@dnb/eufemia 10.37.0 → 10.38.0

package/components/card/style/themes/dnb-card-theme-sbanken.scss

@@ -1,7 +1,5 @@
 .dnb-card {
-  &.dnb-section {
-    --outline-color: var(--border-color, var(--sb-color-gray-light));
-    --outline-width: 0.0625rem;
-    --background-color: var(--sb-color-white);
-  }
+  --card-outline-color: var(--border-color, var(--sb-color-gray-light));
+  --card-outline-width: 0.0625rem;
+  --card-background-color: var(--sb-color-white);
 }

package/components/card/style/themes/dnb-card-theme-ui.css

@@ -1,8 +1,5 @@
-/*
- * Utilities
- */
-.dnb-card.dnb-section {
-  --outline-color: var(--border-color, var(--color-lavender));
-  --outline-width: 0.25rem;
-  --background-color: var(--color-white);
+.dnb-card {
+  --card-outline-color: var(--border-color, var(--color-lavender));
+  --card-outline-width: 0.25rem;
+  --card-background-color: var(--color-white);
 }

package/components/card/style/themes/dnb-card-theme-ui.min.css

@@ -1 +1 @@
-.dnb-card.dnb-section{--outline-color:var(--border-color,var(--color-lavender));--outline-width:0.25rem;--background-color:var(--color-white)}
+.dnb-card{--card-outline-color:var(--border-color,var(--color-lavender));--card-outline-width:0.25rem;--card-background-color:var(--color-white)}

package/components/card/style/themes/dnb-card-theme-ui.scss

@@ -1,9 +1,5 @@
-@import '../../../../style/core/utilities.scss';
-
 .dnb-card {
-  &.dnb-section {
-    --outline-color: var(--border-color, var(--color-lavender));
-    --outline-width: 0.25rem;
-    --background-color: var(--color-white);
-  }
+  --card-outline-color: var(--border-color, var(--color-lavender));
+  --card-outline-width: 0.25rem;
+  --card-background-color: var(--color-white);
 }

package/components/checkbox/style/dnb-checkbox.scss

@@ -243,7 +243,7 @@
    */
 
   // stylelint-disable no-descending-specificity
-  // We prioritise categorisation and readability over specificity here
+  // We prioritize categorisation and readability over specificity here
 
   /** Normal state **/
 

package/components/height-animation/HeightAnimation.d.ts

@@ -34,7 +34,7 @@ export type HeightAnimationProps = {
     innerRef?: React.RefObject<HTMLElement>;
 } & useHeightAnimationOptions;
 export type HeightAnimationAllProps = HeightAnimationProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, 'ref'>;
-declare function HeightAnimation({ open, animate, keepInDOM, showOverflow, element, duration, delay, className, innerRef, children, onInit, onOpen, onAnimationStart, onAnimationEnd, ...rest }: HeightAnimationAllProps): import("react/jsx-runtime").JSX.Element;
+declare function HeightAnimation({ open, animate, keepInDOM, showOverflow, element, duration, delay, className, innerRef, children, compensateForGap, onInit, onOpen, onAnimationStart, onAnimationEnd, ...rest }: HeightAnimationAllProps): import("react/jsx-runtime").JSX.Element;
 declare namespace HeightAnimation {
     var _supportsSpacingProps: string;
 }

package/components/height-animation/HeightAnimation.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["open", "animate", "keepInDOM", "showOverflow", "element", "duration", "delay", "className", "innerRef", "children", "onInit", "onOpen", "onAnimationStart", "onAnimationEnd"];
+const _excluded = ["open", "animate", "keepInDOM", "showOverflow", "element", "duration", "delay", "className", "innerRef", "children", "compensateForGap", "onInit", "onOpen", "onAnimationStart", "onAnimationEnd"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useRef } from 'react';
@@ -22,6 +22,7 @@ function HeightAnimation(_ref) {
       className,
       innerRef,
       children,
+      compensateForGap,
       onInit = null,
       onOpen = null,
       onAnimationStart = null,
@@ -40,6 +41,7 @@ function HeightAnimation(_ref) {
     open,
     animate,
     children,
+    compensateForGap,
     onInit,
     onOpen,
     onAnimationStart,
@@ -60,7 +62,9 @@ function HeightAnimation(_ref) {
     className: classnames('dnb-height-animation', className, isVisible ? 'dnb-height-animation--is-visible' : !isAnimating && !open && 'dnb-height-animation--hidden', isInDOM && 'dnb-height-animation--is-in-dom', animate && isVisibleParallax && 'dnb-height-animation--parallax', isAnimating && 'dnb-height-animation--animating', showOverflow && 'dnb-height-animation--show-overflow'),
     style: _objectSpread(_objectSpread({}, firstPaintStyle), rest === null || rest === void 0 ? void 0 : rest.style),
     "aria-hidden": keepInDOM ? !open : undefined
-  }, rest), children);
+  }, rest), compensateForGap ? React.createElement("div", {
+    className: "compensateForGap"
+  }, children) : children);
 }
 HeightAnimation._supportsSpacingProps = 'children';
 export default HeightAnimation;

package/components/height-animation/HeightAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeightAnimation.js","names":["React","useRef","classnames","useHeightAnimation","Space","HeightAnimation","_ref","open","animate","keepInDOM","showOverflow","element","duration","delay","className","innerRef","children","onInit","onOpen","onAnimationStart","onAnimationEnd","rest","_objectWithoutProperties","_excluded","elementRef","targetRef","isInDOM","isVisible","isVisibleParallax","isAnimating","firstPaintStyle","createElement","_extends","style","_objectSpread","undefined","_supportsSpacingProps"],"sources":["../../../../src/components/height-animation/HeightAnimation.tsx"],"sourcesContent":["import React, { useRef } from 'react'\nimport classnames from 'classnames'\nimport {\n  useHeightAnimation,\n  useHeightAnimationOptions,\n} from './useHeightAnimation'\nimport Space from '../space/Space'\n\nimport type { DynamicElement, SpacingProps } from '../../shared/types'\n\nexport type HeightAnimationProps = {\n  /**\n   * Whether the nested children content should be kept in the DOM or not.\n   * Default: false\n   */\n  keepInDOM?: boolean\n\n  /**\n   * Set to `true` to omit the usage of \"overflow: hidden;\"\n   * Default: false\n   */\n  showOverflow?: boolean\n\n  /**\n   * Defines the duration of the animation in milliseconds.\n   * Default: 400\n   */\n  duration?: number\n\n  /**\n   * Defines the delay of the animation in milliseconds.\n   * Default: 0\n   */\n  delay?: number\n\n  /**\n   * Define a custom HTML Element.\n   * Default: div\n   */\n  element?: DynamicElement\n\n  /**\n   * Send along a custom React Ref.\n   * Default: null\n   */\n  innerRef?: React.RefObject<HTMLElement>\n} & useHeightAnimationOptions\n\nexport type HeightAnimationAllProps = HeightAnimationProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\nfunction HeightAnimation({\n  open = true,\n  animate = true,\n  keepInDOM = false,\n  showOverflow = false,\n  element,\n  duration,\n  delay,\n  className,\n  innerRef,\n  children,\n  onInit = null,\n  onOpen = null,\n  onAnimationStart = null,\n  onAnimationEnd = null,\n  ...rest\n}: HeightAnimationAllProps) {\n  const elementRef = useRef<HTMLElement>()\n  const targetRef = innerRef || elementRef\n\n  const {\n    isInDOM,\n    isVisible,\n    isVisibleParallax,\n    isAnimating,\n    firstPaintStyle,\n  } = useHeightAnimation(targetRef, {\n    open,\n    animate,\n    children,\n    onInit,\n    onOpen,\n    onAnimationStart,\n    onAnimationEnd,\n  })\n\n  if (!keepInDOM && !isInDOM && !isAnimating) {\n    return null\n  }\n\n  if (duration) {\n    firstPaintStyle['--duration'] = `${duration}ms`\n  }\n  if (delay) {\n    firstPaintStyle['--delay'] = `${delay}ms`\n  }\n\n  return (\n    <Space\n      innerRef={targetRef}\n      element={element || 'div'}\n      className={classnames(\n        'dnb-height-animation',\n        isInDOM && 'dnb-height-animation--is-in-dom',\n        isVisible && 'dnb-height-animation--is-visible',\n        animate && isVisibleParallax && 'dnb-height-animation--parallax',\n        isAnimating && 'dnb-height-animation--animating',\n        !isVisible &&\n          !isAnimating &&\n          !open &&\n          'dnb-height-animation--hidden',\n        showOverflow && 'dnb-height-animation--show-overflow',\n        className\n      )}\n      style={{ ...firstPaintStyle, ...rest?.style }}\n      aria-hidden={keepInDOM ? !open : undefined}\n      {...rest}\n    >\n      {children}\n    </Space>\n  )\n}\n\nHeightAnimation._supportsSpacingProps = 'children'\n\nexport default HeightAnimation\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,kBAAkB,QAEb,sBAAsB;AAC7B,OAAOC,KAAK,MAAM,gBAAgB;AA8ClC,SAASC,eAAeA,CAAAC,IAAA,EAgBI;EAAA,IAhBH;MACvBC,IAAI,GAAG,IAAI;MACXC,OAAO,GAAG,IAAI;MACdC,SAAS,GAAG,KAAK;MACjBC,YAAY,GAAG,KAAK;MACpBC,OAAO;MACPC,QAAQ;MACRC,KAAK;MACLC,SAAS;MACTC,QAAQ;MACRC,QAAQ;MACRC,MAAM,GAAG,IAAI;MACbC,MAAM,GAAG,IAAI;MACbC,gBAAgB,GAAG,IAAI;MACvBC,cAAc,GAAG;IAEM,CAAC,GAAAd,IAAA;IADrBe,IAAI,GAAAC,wBAAA,CAAAhB,IAAA,EAAAiB,SAAA;EAEP,MAAMC,UAAU,GAAGvB,MAAM,CAAc,CAAC;EACxC,MAAMwB,SAAS,GAAGV,QAAQ,IAAIS,UAAU;EAExC,MAAM;IACJE,OAAO;IACPC,SAAS;IACTC,iBAAiB;IACjBC,WAAW;IACXC;EACF,CAAC,GAAG3B,kBAAkB,CAACsB,SAAS,EAAE;IAChClB,IAAI;IACJC,OAAO;IACPQ,QAAQ;IACRC,MAAM;IACNC,MAAM;IACNC,gBAAgB;IAChBC;EACF,CAAC,CAAC;EAEF,IAAI,CAACX,SAAS,IAAI,CAACiB,OAAO,IAAI,CAACG,WAAW,EAAE;IAC1C,OAAO,IAAI;EACb;EAEA,IAAIjB,QAAQ,EAAE;IACZkB,eAAe,CAAC,YAAY,CAAC,GAAI,GAAElB,QAAS,IAAG;EACjD;EACA,IAAIC,KAAK,EAAE;IACTiB,eAAe,CAAC,SAAS,CAAC,GAAI,GAAEjB,KAAM,IAAG;EAC3C;EAEA,OACEb,KAAA,CAAA+B,aAAA,CAAC3B,KAAK,EAAA4B,QAAA;IACJjB,QAAQ,EAAEU,SAAU;IACpBd,OAAO,EAAEA,OAAO,IAAI,KAAM;IAC1BG,SAAS,EAAEZ,UAAU,CACnB,sBAAsB,EAUtBY,SAAS,EARTa,SAAS,GAAI,kCAAkC,GAI7C,CAACE,WAAW,IACZ,CAACtB,IAAI,IACL,8BAA8B,EAPhCmB,OAAO,IAAI,iCAAiC,EAE5ClB,OAAO,IAAIoB,iBAAiB,IAAI,gCAAgC,EAChEC,WAAW,IAAI,iCAAiC,EAKhDnB,YAAY,IAAI,qCAElB,CAAE;IACFuB,KAAK,EAAAC,aAAA,CAAAA,aAAA,KAAOJ,eAAe,GAAKT,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEY,KAAK,CAAG;IAC9C,eAAaxB,SAAS,GAAG,CAACF,IAAI,GAAG4B;EAAU,GACvCd,IAAI,GAEPL,QACI,CAAC;AAEZ;AAEAX,eAAe,CAAC+B,qBAAqB,GAAG,UAAU;AAElD,eAAe/B,eAAe"}
+{"version":3,"file":"HeightAnimation.js","names":["React","useRef","classnames","useHeightAnimation","Space","HeightAnimation","_ref","open","animate","keepInDOM","showOverflow","element","duration","delay","className","innerRef","children","compensateForGap","onInit","onOpen","onAnimationStart","onAnimationEnd","rest","_objectWithoutProperties","_excluded","elementRef","targetRef","isInDOM","isVisible","isVisibleParallax","isAnimating","firstPaintStyle","createElement","_extends","style","_objectSpread","undefined","_supportsSpacingProps"],"sources":["../../../../src/components/height-animation/HeightAnimation.tsx"],"sourcesContent":["import React, { useRef } from 'react'\nimport classnames from 'classnames'\nimport {\n  useHeightAnimation,\n  useHeightAnimationOptions,\n} from './useHeightAnimation'\nimport Space from '../space/Space'\n\nimport type { DynamicElement, SpacingProps } from '../../shared/types'\n\nexport type HeightAnimationProps = {\n  /**\n   * Whether the nested children content should be kept in the DOM or not.\n   * Default: false\n   */\n  keepInDOM?: boolean\n\n  /**\n   * Set to `true` to omit the usage of \"overflow: hidden;\"\n   * Default: false\n   */\n  showOverflow?: boolean\n\n  /**\n   * Defines the duration of the animation in milliseconds.\n   * Default: 400\n   */\n  duration?: number\n\n  /**\n   * Defines the delay of the animation in milliseconds.\n   * Default: 0\n   */\n  delay?: number\n\n  /**\n   * Define a custom HTML Element.\n   * Default: div\n   */\n  element?: DynamicElement\n\n  /**\n   * Send along a custom React Ref.\n   * Default: null\n   */\n  innerRef?: React.RefObject<HTMLElement>\n} & useHeightAnimationOptions\n\nexport type HeightAnimationAllProps = HeightAnimationProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\nfunction HeightAnimation({\n  open = true,\n  animate = true,\n  keepInDOM = false,\n  showOverflow = false,\n  element,\n  duration,\n  delay,\n  className,\n  innerRef,\n  children,\n  compensateForGap,\n  onInit = null,\n  onOpen = null,\n  onAnimationStart = null,\n  onAnimationEnd = null,\n  ...rest\n}: HeightAnimationAllProps) {\n  const elementRef = useRef<HTMLElement>()\n  const targetRef = innerRef || elementRef\n\n  const {\n    isInDOM,\n    isVisible,\n    isVisibleParallax,\n    isAnimating,\n    firstPaintStyle,\n  } = useHeightAnimation(targetRef, {\n    open,\n    animate,\n    children,\n    compensateForGap,\n    onInit,\n    onOpen,\n    onAnimationStart,\n    onAnimationEnd,\n  })\n\n  if (!keepInDOM && !isInDOM && !isAnimating) {\n    return null\n  }\n\n  if (duration) {\n    firstPaintStyle['--duration'] = `${duration}ms`\n  }\n  if (delay) {\n    firstPaintStyle['--delay'] = `${delay}ms`\n  }\n\n  return (\n    <Space\n      innerRef={targetRef}\n      element={element || 'div'}\n      className={classnames(\n        'dnb-height-animation',\n        isInDOM && 'dnb-height-animation--is-in-dom',\n        isVisible && 'dnb-height-animation--is-visible',\n        animate && isVisibleParallax && 'dnb-height-animation--parallax',\n        isAnimating && 'dnb-height-animation--animating',\n        !isVisible &&\n          !isAnimating &&\n          !open &&\n          'dnb-height-animation--hidden',\n        showOverflow && 'dnb-height-animation--show-overflow',\n        className\n      )}\n      style={{ ...firstPaintStyle, ...rest?.style }}\n      aria-hidden={keepInDOM ? !open : undefined}\n      {...rest}\n    >\n      {compensateForGap ? (\n        <div className=\"compensateForGap\">{children}</div>\n      ) : (\n        children\n      )}\n    </Space>\n  )\n}\n\nHeightAnimation._supportsSpacingProps = 'children'\n\nexport default HeightAnimation\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,kBAAkB,QAEb,sBAAsB;AAC7B,OAAOC,KAAK,MAAM,gBAAgB;AA8ClC,SAASC,eAAeA,CAAAC,IAAA,EAiBI;EAAA,IAjBH;MACvBC,IAAI,GAAG,IAAI;MACXC,OAAO,GAAG,IAAI;MACdC,SAAS,GAAG,KAAK;MACjBC,YAAY,GAAG,KAAK;MACpBC,OAAO;MACPC,QAAQ;MACRC,KAAK;MACLC,SAAS;MACTC,QAAQ;MACRC,QAAQ;MACRC,gBAAgB;MAChBC,MAAM,GAAG,IAAI;MACbC,MAAM,GAAG,IAAI;MACbC,gBAAgB,GAAG,IAAI;MACvBC,cAAc,GAAG;IAEM,CAAC,GAAAf,IAAA;IADrBgB,IAAI,GAAAC,wBAAA,CAAAjB,IAAA,EAAAkB,SAAA;EAEP,MAAMC,UAAU,GAAGxB,MAAM,CAAc,CAAC;EACxC,MAAMyB,SAAS,GAAGX,QAAQ,IAAIU,UAAU;EAExC,MAAM;IACJE,OAAO;IACPC,SAAS;IACTC,iBAAiB;IACjBC,WAAW;IACXC;EACF,CAAC,GAAG5B,kBAAkB,CAACuB,SAAS,EAAE;IAChCnB,IAAI;IACJC,OAAO;IACPQ,QAAQ;IACRC,gBAAgB;IAChBC,MAAM;IACNC,MAAM;IACNC,gBAAgB;IAChBC;EACF,CAAC,CAAC;EAEF,IAAI,CAACZ,SAAS,IAAI,CAACkB,OAAO,IAAI,CAACG,WAAW,EAAE;IAC1C,OAAO,IAAI;EACb;EAEA,IAAIlB,QAAQ,EAAE;IACZmB,eAAe,CAAC,YAAY,CAAC,GAAI,GAAEnB,QAAS,IAAG;EACjD;EACA,IAAIC,KAAK,EAAE;IACTkB,eAAe,CAAC,SAAS,CAAC,GAAI,GAAElB,KAAM,IAAG;EAC3C;EAEA,OACEb,KAAA,CAAAgC,aAAA,CAAC5B,KAAK,EAAA6B,QAAA;IACJlB,QAAQ,EAAEW,SAAU;IACpBf,OAAO,EAAEA,OAAO,IAAI,KAAM;IAC1BG,SAAS,EAAEZ,UAAU,CACnB,sBAAsB,EAUtBY,SAAS,EARTc,SAAS,GAAI,kCAAkC,GAI7C,CAACE,WAAW,IACZ,CAACvB,IAAI,IACL,8BAA8B,EAPhCoB,OAAO,IAAI,iCAAiC,EAE5CnB,OAAO,IAAIqB,iBAAiB,IAAI,gCAAgC,EAChEC,WAAW,IAAI,iCAAiC,EAKhDpB,YAAY,IAAI,qCAElB,CAAE;IACFwB,KAAK,EAAAC,aAAA,CAAAA,aAAA,KAAOJ,eAAe,GAAKT,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEY,KAAK,CAAG;IAC9C,eAAazB,SAAS,GAAG,CAACF,IAAI,GAAG6B;EAAU,GACvCd,IAAI,GAEPL,gBAAgB,GACfjB,KAAA,CAAAgC,aAAA;IAAKlB,SAAS,EAAC;EAAkB,GAAEE,QAAc,CAAC,GAElDA,QAEG,CAAC;AAEZ;AAEAX,eAAe,CAACgC,qBAAqB,GAAG,UAAU;AAElD,eAAehC,eAAe"}

package/components/height-animation/HeightAnimationDocs.d.ts

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

package/components/height-animation/HeightAnimationDocs.js

@@ -0,0 +1,75 @@
+export const HeightAnimationProperties = {
+  open: {
+    doc: 'Set to `true` on second re-render when the view should animate from 0px to auto. Defaults to `true`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  animate: {
+    doc: 'Set to `false` to omit the animation. Defaults to `true`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  keepInDOM: {
+    doc: 'Set to `true` ensure the nested children content will be kept in the DOM. Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  compensateForGap: {
+    doc: 'To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`.',
+    type: 'string',
+    status: 'optional'
+  },
+  showOverflow: {
+    doc: 'Set to `true` to omit the usage of "overflow: hidden;". Defaults to `false`.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  duration: {
+    doc: 'Custom duration of the animation in milliseconds. Defaults to `400ms`.',
+    type: 'number',
+    status: 'optional'
+  },
+  delay: {
+    doc: 'Custom delay of the animation in milliseconds. Defaults to `0ms`.',
+    type: 'number',
+    status: 'optional'
+  },
+  element: {
+    doc: 'Custom HTML element for the component. Defaults to `div` HTML Element.',
+    type: 'string',
+    status: 'optional'
+  },
+  innerRef: {
+    doc: 'Send along a custom React Ref.',
+    type: 'React.RefObject',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+export const HeightAnimationEvents = {
+  onOpen: {
+    doc: 'Is called when fully opened or closed. Returns `true` or `false` depending on the state.',
+    type: 'function',
+    status: 'optional'
+  },
+  onAnimationStart: {
+    doc: 'Is called when animation has started.',
+    type: 'function',
+    status: 'optional'
+  },
+  onAnimationEnd: {
+    doc: 'Is called when animation is done and the full height is reached.',
+    type: 'function',
+    status: 'optional'
+  },
+  onInit: {
+    doc: 'Is called once before mounting the component (useLayoutEffect). Returns the instance of the internal animation class.',
+    type: 'function',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=HeightAnimationDocs.js.map

package/components/height-animation/HeightAnimationDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeightAnimationDocs.js","names":["HeightAnimationProperties","open","doc","type","status","animate","keepInDOM","compensateForGap","showOverflow","duration","delay","element","innerRef","HeightAnimationEvents","onOpen","onAnimationStart","onAnimationEnd","onInit"],"sources":["../../../../src/components/height-animation/HeightAnimationDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const HeightAnimationProperties: PropertiesTableProps = {\n  open: {\n    doc: 'Set to `true` on second re-render when the view should animate from 0px to auto. Defaults to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  animate: {\n    doc: 'Set to `false` to omit the animation. Defaults to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keepInDOM: {\n    doc: 'Set to `true` ensure the nested children content will be kept in the DOM. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  compensateForGap: {\n    doc: 'To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`.',\n    type: 'string',\n    status: 'optional',\n  },\n  showOverflow: {\n    doc: 'Set to `true` to omit the usage of \"overflow: hidden;\". Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  duration: {\n    doc: 'Custom duration of the animation in milliseconds. Defaults to `400ms`.',\n    type: 'number',\n    status: 'optional',\n  },\n  delay: {\n    doc: 'Custom delay of the animation in milliseconds. Defaults to `0ms`.',\n    type: 'number',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Custom HTML element for the component. Defaults to `div` HTML Element.',\n    type: 'string',\n    status: 'optional',\n  },\n  innerRef: {\n    doc: 'Send along a custom React Ref.',\n    type: 'React.RefObject',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const HeightAnimationEvents: PropertiesTableProps = {\n  onOpen: {\n    doc: 'Is called when fully opened or closed. Returns `true` or `false` depending on the state.',\n    type: 'function',\n    status: 'optional',\n  },\n  onAnimationStart: {\n    doc: 'Is called when animation has started.',\n    type: 'function',\n    status: 'optional',\n  },\n  onAnimationEnd: {\n    doc: 'Is called when animation is done and the full height is reached.',\n    type: 'function',\n    status: 'optional',\n  },\n  onInit: {\n    doc: 'Is called once before mounting the component (useLayoutEffect). Returns the instance of the internal animation class.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,yBAA+C,GAAG;EAC7DC,IAAI,EAAE;IACJC,GAAG,EAAE,sGAAsG;IAC3GC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,OAAO,EAAE;IACPH,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,SAAS,EAAE;IACTJ,GAAG,EAAE,gGAAgG;IACrGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,gBAAgB,EAAE;IAChBL,GAAG,EAAE,gJAAgJ;IACrJC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,YAAY,EAAE;IACZN,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,QAAQ,EAAE;IACRP,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,KAAK,EAAE;IACLR,GAAG,EAAE,mEAAmE;IACxEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,OAAO,EAAE;IACPT,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,QAAQ,EAAE;IACRV,GAAG,EAAE,gCAAgC;IACrCC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMS,qBAA2C,GAAG;EACzDC,MAAM,EAAE;IACNZ,GAAG,EAAE,0FAA0F;IAC/FC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDW,gBAAgB,EAAE;IAChBb,GAAG,EAAE,uCAAuC;IAC5CC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDY,cAAc,EAAE;IACdd,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDa,MAAM,EAAE;IACNf,GAAG,EAAE,uHAAuH;IAC5HC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}

package/components/height-animation/style/dnb-height-animation.css

@@ -6,8 +6,9 @@
  * Utilities
  */
 .dnb-height-animation {
-  --height-animation: height var(--duration, 400ms) var(--easing-default)
-    var(--delay, 0ms);
+  --height-animation-duration: var(--duration, 400ms);
+  --height-animation: height var(--height-animation-duration)
+    var(--easing-default) var(--delay, 0ms);
   will-change: height;
   transition: var(--height-animation);
 }

package/components/height-animation/style/dnb-height-animation.min.css

@@ -1 +1 @@
-.dnb-height-animation{--height-animation:height var(--duration,400ms) var(--easing-default) var(--delay,0ms);transition:var(--height-animation);will-change:height}html[data-visual-test] .dnb-height-animation,html[data-visual-test] .dnb-height-animation *{transition:none!important}.dnb-height-animation--animating{overflow-y:hidden}@supports (overflow-y:clip){.dnb-height-animation--animating{overflow-y:clip}}.dnb-height-animation--hidden{display:none}.dnb-height-animation--show-overflow{overflow:visible}
+.dnb-height-animation{--height-animation-duration:var(--duration,400ms);--height-animation:height var(--height-animation-duration) var(--easing-default) var(--delay,0ms);transition:var(--height-animation);will-change:height}html[data-visual-test] .dnb-height-animation,html[data-visual-test] .dnb-height-animation *{transition:none!important}.dnb-height-animation--animating{overflow-y:hidden}@supports (overflow-y:clip){.dnb-height-animation--animating{overflow-y:clip}}.dnb-height-animation--hidden{display:none}.dnb-height-animation--show-overflow{overflow:visible}

package/components/height-animation/style/dnb-height-animation.scss

@@ -6,8 +6,9 @@
 @import '../../../style/core/utilities.scss';
 
 .dnb-height-animation {
-  --height-animation: height var(--duration, 400ms) var(--easing-default)
-    var(--delay, 0ms);
+  --height-animation-duration: var(--duration, 400ms);
+  --height-animation: height var(--height-animation-duration)
+    var(--easing-default) var(--delay, 0ms);
 
   will-change: height;
   transition: var(--height-animation);

package/components/height-animation/useHeightAnimation.d.ts

@@ -11,6 +11,11 @@ export type useHeightAnimationOptions = {
      * Default: true
      */
     animate?: boolean;
+    /**
+     * To compensate for CSS gap between the rows, so animation does not jump during the animation.
+     * Provide a CSS unit or `var(--row-gap)`.
+     */
+    compensateForGap?: string | 'auto';
     /**
      * In order to let the Hook know when children has changed
      */
@@ -34,7 +39,7 @@ export type useHeightAnimationOptions = {
 };
 export type HeightAnimationOnStartTypes = 'opening' | 'closing' | 'adjusting';
 export type HeightAnimationOnEndTypes = 'opened' | 'closed' | 'adjusted';
-export declare function useHeightAnimation(targetRef: React.RefObject<HTMLElement>, { open, animate, children, onInit, onOpen, onAnimationStart, onAnimationEnd, }?: useHeightAnimationOptions): {
+export declare function useHeightAnimation(targetRef: React.RefObject<HTMLElement>, { open, animate, children, compensateForGap, onInit, onOpen, onAnimationStart, onAnimationEnd, }?: useHeightAnimationOptions): {
     open: boolean;
     isOpen: boolean;
     isInDOM: boolean;

package/components/height-animation/useHeightAnimation.js

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import HeightAnimationInstance from './HeightAnimationInstance';
 const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
 export function useHeightAnimation(targetRef) {
@@ -9,6 +9,7 @@ export function useHeightAnimation(targetRef) {
     open = true,
     animate = true,
     children = null,
+    compensateForGap,
     onInit = null,
     onOpen = null,
     onAnimationStart = null,
@@ -20,9 +21,20 @@ export function useHeightAnimation(targetRef) {
   const [isVisible, setIsVisible] = useState(false);
   const [isAnimating, setIsAnimating] = useState(false);
   const [isVisibleParallax, setParallax] = useState(open);
+  const eventsRef = useRef({
+    onInit,
+    onAnimationEnd,
+    onAnimationStart,
+    onOpen
+  });
+  eventsRef.current.onInit = onInit;
+  eventsRef.current.onAnimationEnd = onAnimationEnd;
+  eventsRef.current.onAnimationStart = onAnimationStart;
+  eventsRef.current.onOpen = onOpen;
   useLayoutEffect(() => {
+    var _eventsRef$current$on, _eventsRef$current;
     instRef.current = new HeightAnimationInstance();
-    onInit === null || onInit === void 0 ? void 0 : onInit(instRef.current);
+    (_eventsRef$current$on = (_eventsRef$current = eventsRef.current).onInit) === null || _eventsRef$current$on === void 0 ? void 0 : _eventsRef$current$on.call(_eventsRef$current, instRef.current);
     return () => {
       var _instRef$current;
       (_instRef$current = instRef.current) === null || _instRef$current === void 0 ? void 0 : _instRef$current.remove();
@@ -39,10 +51,25 @@ export function useHeightAnimation(targetRef) {
       });
     }
   }, [animate]);
+  const handleCompensateForGap = useCallback(() => {
+    if (compensateForGap) {
+      let gap = compensateForGap;
+      const {
+        elem
+      } = instRef.current;
+      if (compensateForGap === 'auto') {
+        gap = window.getComputedStyle(elem.parentElement).getPropertyValue('row-gap');
+      }
+      elem.style.marginTop = `calc(${gap} * -1)`;
+      const inner = elem.querySelector('.compensateForGap');
+      inner.style.marginTop = gap;
+    }
+  }, [compensateForGap]);
   useLayoutEffect(() => {
     instRef.current.onStart(state => {
       switch (state) {
         case 'opening':
+          handleCompensateForGap();
           setIsVisible(true);
           setParallax(true);
           setIsAnimating(true);
@@ -56,33 +83,36 @@ export function useHeightAnimation(targetRef) {
           break;
       }
       if (!isInitialRenderRef.current) {
-        onAnimationStart === null || onAnimationStart === void 0 ? void 0 : onAnimationStart(state);
+        var _eventsRef$current$on2, _eventsRef$current2;
+        (_eventsRef$current$on2 = (_eventsRef$current2 = eventsRef.current).onAnimationStart) === null || _eventsRef$current$on2 === void 0 ? void 0 : _eventsRef$current$on2.call(_eventsRef$current2, state);
       }
     });
     instRef.current.onEnd(state => {
+      var _eventsRef$current$on3, _eventsRef$current3, _eventsRef$current$on4, _eventsRef$current4;
       switch (state) {
         case 'opened':
           setIsVisible(true);
           setIsOpen(true);
           setIsAnimating(false);
-          onOpen === null || onOpen === void 0 ? void 0 : onOpen(true);
+          (_eventsRef$current$on3 = (_eventsRef$current3 = eventsRef.current).onOpen) === null || _eventsRef$current$on3 === void 0 ? void 0 : _eventsRef$current$on3.call(_eventsRef$current3, true);
           break;
         case 'closed':
           setIsVisible(false);
           setIsOpen(false);
           setParallax(false);
           setIsAnimating(false);
-          onOpen === null || onOpen === void 0 ? void 0 : onOpen(false);
+          (_eventsRef$current$on4 = (_eventsRef$current4 = eventsRef.current).onOpen) === null || _eventsRef$current$on4 === void 0 ? void 0 : _eventsRef$current$on4.call(_eventsRef$current4, false);
           break;
         case 'adjusted':
           setIsAnimating(false);
           break;
       }
       if (!isInitialRenderRef.current) {
-        onAnimationEnd === null || onAnimationEnd === void 0 ? void 0 : onAnimationEnd(state);
+        var _eventsRef$current$on5, _eventsRef$current5;
+        (_eventsRef$current$on5 = (_eventsRef$current5 = eventsRef.current).onAnimationEnd) === null || _eventsRef$current$on5 === void 0 ? void 0 : _eventsRef$current$on5.call(_eventsRef$current5, state);
       }
     });
-  }, []);
+  }, [compensateForGap, handleCompensateForGap]);
   useOpenClose({
     open,
     instRef,

package/components/height-animation/useHeightAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHeightAnimation.js","names":["React","useMemo","useRef","useState","HeightAnimationInstance","useLayoutEffect","window","useEffect","useHeightAnimation","targetRef","_instRef$current2","open","animate","children","onInit","onOpen","onAnimationStart","onAnimationEnd","arguments","length","undefined","instRef","isInitialRenderRef","globalThis","readjustTime","isOpen","setIsOpen","isVisible","setIsVisible","isAnimating","setIsAnimating","isVisibleParallax","setParallax","current","_instRef$current","remove","setOptions","global","IS_TEST","onStart","state","onEnd","useOpenClose","useAdjust","firstPaintStyle","isInDOM","_ref","isTest","process","env","NODE_ENV","setElement","setAsOpen","setAsClosed","close","_targetRef$current","event","CustomEvent","dispatchEvent","run","bypassTime","_window$requestAnimat","_window","requestAnimationFrame","call","_ref2","fromHeight","timer","Date","now","shouldAdjust","_instRef$current3","_instRef$current4","getHeight","elem","style","height","toHeight","adjustTo"],"sources":["../../../../src/components/height-animation/useHeightAnimation.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react'\nimport HeightAnimationInstance from './HeightAnimationInstance'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type useHeightAnimationOptions = {\n  /**\n   * Set to `true`, when initially `false` was given, to animate from 0px to auto.\n   * Default: true\n   */\n  open?: boolean\n\n  /**\n   * Set to `false` to omit the animation.\n   * Default: true\n   */\n  animate?: boolean\n\n  /**\n   * In order to let the Hook know when children has changed\n   */\n  children?: React.ReactNode | HTMLElement\n\n  /**\n   * Is called once before mounting the component (useLayoutEffect)\n   */\n  onInit?: (instance: HeightAnimationInstance) => void\n\n  /**\n   * Is called when fully opened or closed\n   */\n  onOpen?: (isOpen: boolean) => void\n\n  /**\n   * Is called when animation has started.\n   */\n  onAnimationStart?: (state: HeightAnimationOnStartTypes) => void\n\n  /**\n   * Is called when animation is done and the full height is reached.\n   */\n  onAnimationEnd?: (state: HeightAnimationOnEndTypes) => void\n}\n\nexport type HeightAnimationOnStartTypes =\n  | 'opening'\n  | 'closing'\n  | 'adjusting'\n\nexport type HeightAnimationOnEndTypes = 'opened' | 'closed' | 'adjusted'\n\nexport function useHeightAnimation(\n  targetRef: React.RefObject<HTMLElement>,\n  {\n    open = true,\n    animate = true,\n    children = null,\n    onInit = null,\n    onOpen = null,\n    onAnimationStart = null,\n    onAnimationEnd = null,\n  }: useHeightAnimationOptions = {}\n) {\n  const instRef = useRef<HeightAnimationInstance>(null)\n  const isInitialRenderRef = useRef(\n    typeof globalThis !== 'undefined'\n      ? globalThis.readjustTime !== -1\n      : true\n  )\n\n  const [isOpen, setIsOpen] = useState(open)\n  const [isVisible, setIsVisible] = useState(false)\n  const [isAnimating, setIsAnimating] = useState(false)\n  const [isVisibleParallax, setParallax] = useState(open)\n\n  useLayoutEffect(() => {\n    instRef.current = new HeightAnimationInstance()\n    onInit?.(instRef.current)\n    return () => {\n      instRef.current?.remove()\n      instRef.current = null\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useLayoutEffect(() => {\n    instRef.current.setOptions({ animate })\n\n    if (typeof global !== 'undefined' && globalThis.IS_TEST) {\n      instRef.current.setOptions({ animate: false })\n    }\n  }, [animate])\n\n  useLayoutEffect(() => {\n    instRef.current.onStart((state: HeightAnimationOnStartTypes) => {\n      switch (state) {\n        case 'opening':\n          setIsVisible(true)\n          setParallax(true)\n          setIsAnimating(true)\n          break\n\n        case 'closing':\n          setParallax(false)\n          setIsAnimating(true)\n          break\n\n        case 'adjusting':\n          setIsAnimating(true)\n          break\n      }\n\n      if (!isInitialRenderRef.current) {\n        onAnimationStart?.(state)\n      }\n    })\n\n    instRef.current.onEnd((state: HeightAnimationOnEndTypes) => {\n      switch (state) {\n        case 'opened':\n          setIsVisible(true)\n          setIsOpen(true)\n          setIsAnimating(false)\n          onOpen?.(true)\n          break\n\n        case 'closed':\n          setIsVisible(false)\n          setIsOpen(false)\n          setParallax(false)\n          setIsAnimating(false)\n          onOpen?.(false)\n          break\n\n        case 'adjusted':\n          setIsAnimating(false)\n          break\n      }\n\n      if (!isInitialRenderRef.current) {\n        onAnimationEnd?.(state)\n      }\n    })\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useOpenClose({ open, instRef, isInitialRenderRef, targetRef })\n  useAdjust({ children, instRef, isInitialRenderRef, targetRef })\n\n  /**\n   * Returns the first paint style, to be used for the initial render,\n   * to avoid flickering.\n   */\n  const firstPaintStyle:\n    | typeof instRef.current.firstPaintStyle\n    | Record<string, never> =\n    (open &&\n      !isVisible &&\n      !isAnimating &&\n      instRef.current?.firstPaintStyle) ||\n    {}\n  const isInDOM = open || isVisible\n\n  return {\n    open,\n    isOpen,\n    isInDOM,\n    isVisible,\n    isVisibleParallax,\n    isAnimating,\n    firstPaintStyle,\n  }\n}\n\nfunction useOpenClose({ open, instRef, isInitialRenderRef, targetRef }) {\n  const isTest =\n    typeof process !== 'undefined' &&\n    process.env.NODE_ENV === 'test' &&\n    typeof globalThis.IS_TEST === 'undefined'\n\n  useLayoutEffect(() => {\n    instRef.current.setElement(targetRef.current)\n\n    if (\n      !targetRef.current ||\n      (instRef.current.state === 'init' && isInitialRenderRef.current)\n    ) {\n      if (open) {\n        instRef.current.setAsOpen()\n      } else {\n        instRef.current.setAsClosed()\n      }\n    } else {\n      if (open) {\n        instRef.current.open()\n      } else {\n        instRef.current.close()\n      }\n    }\n\n    // For testing purposes, we need to trigger the transitionend event\n    if (isTest) {\n      const event = new CustomEvent('transitionend')\n      targetRef.current?.dispatchEvent(event)\n    }\n  }, [open, targetRef, instRef, isInitialRenderRef, isTest])\n\n  useLayoutEffect(() => {\n    const run = () => {\n      isInitialRenderRef.current = false\n    }\n    if (globalThis.bypassTime === -1 || isTest) {\n      run()\n    } else {\n      window.requestAnimationFrame?.(run)\n    }\n  }, [isInitialRenderRef, isTest])\n}\n\nfunction useAdjust({ children, instRef, isInitialRenderRef, targetRef }) {\n  const fromHeight = useRef(0)\n\n  const [timer] = useState(() => Date.now())\n\n  /**\n   * Wait for some criteria and a certain time, before we adjust the height,\n   * so it will not run when a open/close animation is running.\n   */\n  const shouldAdjust = () => {\n    switch (instRef.current?.state) {\n      case 'opened':\n      case 'adjusted':\n      case 'adjusting':\n        return (\n          !isInitialRenderRef.current &&\n          Date.now() - timer > (globalThis.readjustTime || 100)\n        )\n    }\n\n    return false\n  }\n\n  useMemo(() => {\n    if (shouldAdjust()) {\n      fromHeight.current = instRef.current?.getHeight()\n    }\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useLayoutEffect(() => {\n    if (shouldAdjust()) {\n      /**\n       * In certain cases, the targetRef.current is outdated, so we need to set it again.\n       * E.g. in Tabs.js, when we switch tabs, the targetRef.current is not updated.\n       */\n      instRef.current.setElement(targetRef.current)\n\n      /**\n       * Ensure we don't have height, while we get the \"toHeight\" again.\n       * We may move this inside of the HeightAnimationInstance class later,\n       * but the \"GlobalStatus\" is currently relying on \"getUnknownHeight\" inside of adjustTo.\n       */\n      instRef.current.elem.style.height = ''\n\n      /**\n       * Use getHeight instead of getUnknownHeight because of the additional,\n       * disturbing DOM manipulation.\n       */\n      const toHeight = instRef.current.getHeight()\n\n      instRef.current.adjustTo(fromHeight.current, toHeight)\n    }\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACxD,OAAOC,uBAAuB,MAAM,2BAA2B;AAG/D,MAAMC,eAAe,GACnB,OAAOC,MAAM,KAAK,WAAW,GAAGN,KAAK,CAACO,SAAS,GAAGP,KAAK,CAACK,eAAe;AAgDzE,OAAO,SAASG,kBAAkBA,CAChCC,SAAuC,EAUvC;EAAA,IAAAC,iBAAA;EAAA,IATA;IACEC,IAAI,GAAG,IAAI;IACXC,OAAO,GAAG,IAAI;IACdC,QAAQ,GAAG,IAAI;IACfC,MAAM,GAAG,IAAI;IACbC,MAAM,GAAG,IAAI;IACbC,gBAAgB,GAAG,IAAI;IACvBC,cAAc,GAAG;EACQ,CAAC,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EAEjC,MAAMG,OAAO,GAAGnB,MAAM,CAA0B,IAAI,CAAC;EACrD,MAAMoB,kBAAkB,GAAGpB,MAAM,CAC/B,OAAOqB,UAAU,KAAK,WAAW,GAC7BA,UAAU,CAACC,YAAY,KAAK,CAAC,CAAC,GAC9B,IACN,CAAC;EAED,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGvB,QAAQ,CAACQ,IAAI,CAAC;EAC1C,MAAM,CAACgB,SAAS,EAAEC,YAAY,CAAC,GAAGzB,QAAQ,CAAC,KAAK,CAAC;EACjD,MAAM,CAAC0B,WAAW,EAAEC,cAAc,CAAC,GAAG3B,QAAQ,CAAC,KAAK,CAAC;EACrD,MAAM,CAAC4B,iBAAiB,EAAEC,WAAW,CAAC,GAAG7B,QAAQ,CAACQ,IAAI,CAAC;EAEvDN,eAAe,CAAC,MAAM;IACpBgB,OAAO,CAACY,OAAO,GAAG,IAAI7B,uBAAuB,CAAC,CAAC;IAC/CU,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAGO,OAAO,CAACY,OAAO,CAAC;IACzB,OAAO,MAAM;MAAA,IAAAC,gBAAA;MACX,CAAAA,gBAAA,GAAAb,OAAO,CAACY,OAAO,cAAAC,gBAAA,uBAAfA,gBAAA,CAAiBC,MAAM,CAAC,CAAC;MACzBd,OAAO,CAACY,OAAO,GAAG,IAAI;IACxB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN5B,eAAe,CAAC,MAAM;IACpBgB,OAAO,CAACY,OAAO,CAACG,UAAU,CAAC;MAAExB;IAAQ,CAAC,CAAC;IAEvC,IAAI,OAAOyB,MAAM,KAAK,WAAW,IAAId,UAAU,CAACe,OAAO,EAAE;MACvDjB,OAAO,CAACY,OAAO,CAACG,UAAU,CAAC;QAAExB,OAAO,EAAE;MAAM,CAAC,CAAC;IAChD;EACF,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEbP,eAAe,CAAC,MAAM;IACpBgB,OAAO,CAACY,OAAO,CAACM,OAAO,CAAEC,KAAkC,IAAK;MAC9D,QAAQA,KAAK;QACX,KAAK,SAAS;UACZZ,YAAY,CAAC,IAAI,CAAC;UAClBI,WAAW,CAAC,IAAI,CAAC;UACjBF,cAAc,CAAC,IAAI,CAAC;UACpB;QAEF,KAAK,SAAS;UACZE,WAAW,CAAC,KAAK,CAAC;UAClBF,cAAc,CAAC,IAAI,CAAC;UACpB;QAEF,KAAK,WAAW;UACdA,cAAc,CAAC,IAAI,CAAC;UACpB;MACJ;MAEA,IAAI,CAACR,kBAAkB,CAACW,OAAO,EAAE;QAC/BjB,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAGwB,KAAK,CAAC;MAC3B;IACF,CAAC,CAAC;IAEFnB,OAAO,CAACY,OAAO,CAACQ,KAAK,CAAED,KAAgC,IAAK;MAC1D,QAAQA,KAAK;QACX,KAAK,QAAQ;UACXZ,YAAY,CAAC,IAAI,CAAC;UAClBF,SAAS,CAAC,IAAI,CAAC;UACfI,cAAc,CAAC,KAAK,CAAC;UACrBf,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAG,IAAI,CAAC;UACd;QAEF,KAAK,QAAQ;UACXa,YAAY,CAAC,KAAK,CAAC;UACnBF,SAAS,CAAC,KAAK,CAAC;UAChBM,WAAW,CAAC,KAAK,CAAC;UAClBF,cAAc,CAAC,KAAK,CAAC;UACrBf,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAG,KAAK,CAAC;UACf;QAEF,KAAK,UAAU;UACbe,cAAc,CAAC,KAAK,CAAC;UACrB;MACJ;MAEA,IAAI,CAACR,kBAAkB,CAACW,OAAO,EAAE;QAC/BhB,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGuB,KAAK,CAAC;MACzB;IACF,CAAC,CAAC;EACJ,CAAC,EAAE,EAAE,CAAC;EAENE,YAAY,CAAC;IAAE/B,IAAI;IAAEU,OAAO;IAAEC,kBAAkB;IAAEb;EAAU,CAAC,CAAC;EAC9DkC,SAAS,CAAC;IAAE9B,QAAQ;IAAEQ,OAAO;IAAEC,kBAAkB;IAAEb;EAAU,CAAC,CAAC;EAM/D,MAAMmC,eAEmB,GACtBjC,IAAI,IACH,CAACgB,SAAS,IACV,CAACE,WAAW,MAAAnB,iBAAA,GACZW,OAAO,CAACY,OAAO,cAAAvB,iBAAA,uBAAfA,iBAAA,CAAiBkC,eAAe,KAClC,CAAC,CAAC;EACJ,MAAMC,OAAO,GAAGlC,IAAI,IAAIgB,SAAS;EAEjC,OAAO;IACLhB,IAAI;IACJc,MAAM;IACNoB,OAAO;IACPlB,SAAS;IACTI,iBAAiB;IACjBF,WAAW;IACXe;EACF,CAAC;AACH;AAEA,SAASF,YAAYA,CAAAI,IAAA,EAAmD;EAAA,IAAlD;IAAEnC,IAAI;IAAEU,OAAO;IAAEC,kBAAkB;IAAEb;EAAU,CAAC,GAAAqC,IAAA;EACpE,MAAMC,MAAM,GACV,OAAOC,OAAO,KAAK,WAAW,IAC9BA,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM,IAC/B,OAAO3B,UAAU,CAACe,OAAO,KAAK,WAAW;EAE3CjC,eAAe,CAAC,MAAM;IACpBgB,OAAO,CAACY,OAAO,CAACkB,UAAU,CAAC1C,SAAS,CAACwB,OAAO,CAAC;IAE7C,IACE,CAACxB,SAAS,CAACwB,OAAO,IACjBZ,OAAO,CAACY,OAAO,CAACO,KAAK,KAAK,MAAM,IAAIlB,kBAAkB,CAACW,OAAQ,EAChE;MACA,IAAItB,IAAI,EAAE;QACRU,OAAO,CAACY,OAAO,CAACmB,SAAS,CAAC,CAAC;MAC7B,CAAC,MAAM;QACL/B,OAAO,CAACY,OAAO,CAACoB,WAAW,CAAC,CAAC;MAC/B;IACF,CAAC,MAAM;MACL,IAAI1C,IAAI,EAAE;QACRU,OAAO,CAACY,OAAO,CAACtB,IAAI,CAAC,CAAC;MACxB,CAAC,MAAM;QACLU,OAAO,CAACY,OAAO,CAACqB,KAAK,CAAC,CAAC;MACzB;IACF;IAGA,IAAIP,MAAM,EAAE;MAAA,IAAAQ,kBAAA;MACV,MAAMC,KAAK,GAAG,IAAIC,WAAW,CAAC,eAAe,CAAC;MAC9C,CAAAF,kBAAA,GAAA9C,SAAS,CAACwB,OAAO,cAAAsB,kBAAA,uBAAjBA,kBAAA,CAAmBG,aAAa,CAACF,KAAK,CAAC;IACzC;EACF,CAAC,EAAE,CAAC7C,IAAI,EAAEF,SAAS,EAAEY,OAAO,EAAEC,kBAAkB,EAAEyB,MAAM,CAAC,CAAC;EAE1D1C,eAAe,CAAC,MAAM;IACpB,MAAMsD,GAAG,GAAGA,CAAA,KAAM;MAChBrC,kBAAkB,CAACW,OAAO,GAAG,KAAK;IACpC,CAAC;IACD,IAAIV,UAAU,CAACqC,UAAU,KAAK,CAAC,CAAC,IAAIb,MAAM,EAAE;MAC1CY,GAAG,CAAC,CAAC;IACP,CAAC,MAAM;MAAA,IAAAE,qBAAA,EAAAC,OAAA;MACL,CAAAD,qBAAA,IAAAC,OAAA,GAAAxD,MAAM,EAACyD,qBAAqB,cAAAF,qBAAA,uBAA5BA,qBAAA,CAAAG,IAAA,CAAAF,OAAA,EAA+BH,GAAG,CAAC;IACrC;EACF,CAAC,EAAE,CAACrC,kBAAkB,EAAEyB,MAAM,CAAC,CAAC;AAClC;AAEA,SAASJ,SAASA,CAAAsB,KAAA,EAAuD;EAAA,IAAtD;IAAEpD,QAAQ;IAAEQ,OAAO;IAAEC,kBAAkB;IAAEb;EAAU,CAAC,GAAAwD,KAAA;EACrE,MAAMC,UAAU,GAAGhE,MAAM,CAAC,CAAC,CAAC;EAE5B,MAAM,CAACiE,KAAK,CAAC,GAAGhE,QAAQ,CAAC,MAAMiE,IAAI,CAACC,GAAG,CAAC,CAAC,CAAC;EAM1C,MAAMC,YAAY,GAAGA,CAAA,KAAM;IAAA,IAAAC,iBAAA;IACzB,SAAAA,iBAAA,GAAQlD,OAAO,CAACY,OAAO,cAAAsC,iBAAA,uBAAfA,iBAAA,CAAiB/B,KAAK;MAC5B,KAAK,QAAQ;MACb,KAAK,UAAU;MACf,KAAK,WAAW;QACd,OACE,CAAClB,kBAAkB,CAACW,OAAO,IAC3BmC,IAAI,CAACC,GAAG,CAAC,CAAC,GAAGF,KAAK,IAAI5C,UAAU,CAACC,YAAY,IAAI,GAAG,CAAC;IAE3D;IAEA,OAAO,KAAK;EACd,CAAC;EAEDvB,OAAO,CAAC,MAAM;IACZ,IAAIqE,YAAY,CAAC,CAAC,EAAE;MAAA,IAAAE,iBAAA;MAClBN,UAAU,CAACjC,OAAO,IAAAuC,iBAAA,GAAGnD,OAAO,CAACY,OAAO,cAAAuC,iBAAA,uBAAfA,iBAAA,CAAiBC,SAAS,CAAC,CAAC;IACnD;EACF,CAAC,EAAE,CAAC5D,QAAQ,CAAC,CAAC;EAEdR,eAAe,CAAC,MAAM;IACpB,IAAIiE,YAAY,CAAC,CAAC,EAAE;MAKlBjD,OAAO,CAACY,OAAO,CAACkB,UAAU,CAAC1C,SAAS,CAACwB,OAAO,CAAC;MAO7CZ,OAAO,CAACY,OAAO,CAACyC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,EAAE;MAMtC,MAAMC,QAAQ,GAAGxD,OAAO,CAACY,OAAO,CAACwC,SAAS,CAAC,CAAC;MAE5CpD,OAAO,CAACY,OAAO,CAAC6C,QAAQ,CAACZ,UAAU,CAACjC,OAAO,EAAE4C,QAAQ,CAAC;IACxD;EACF,CAAC,EAAE,CAAChE,QAAQ,CAAC,CAAC;AAChB"}
+{"version":3,"file":"useHeightAnimation.js","names":["React","useCallback","useMemo","useRef","useState","HeightAnimationInstance","useLayoutEffect","window","useEffect","useHeightAnimation","targetRef","_instRef$current2","open","animate","children","compensateForGap","onInit","onOpen","onAnimationStart","onAnimationEnd","arguments","length","undefined","instRef","isInitialRenderRef","globalThis","readjustTime","isOpen","setIsOpen","isVisible","setIsVisible","isAnimating","setIsAnimating","isVisibleParallax","setParallax","eventsRef","current","_eventsRef$current$on","_eventsRef$current","call","_instRef$current","remove","setOptions","global","IS_TEST","handleCompensateForGap","gap","elem","getComputedStyle","parentElement","getPropertyValue","style","marginTop","inner","querySelector","onStart","state","_eventsRef$current$on2","_eventsRef$current2","onEnd","_eventsRef$current$on3","_eventsRef$current3","_eventsRef$current$on4","_eventsRef$current4","_eventsRef$current$on5","_eventsRef$current5","useOpenClose","useAdjust","firstPaintStyle","isInDOM","_ref","isTest","process","env","NODE_ENV","setElement","setAsOpen","setAsClosed","close","_targetRef$current","event","CustomEvent","dispatchEvent","run","bypassTime","_window$requestAnimat","_window","requestAnimationFrame","_ref2","fromHeight","timer","Date","now","shouldAdjust","_instRef$current3","_instRef$current4","getHeight","height","toHeight","adjustTo"],"sources":["../../../../src/components/height-animation/useHeightAnimation.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from 'react'\nimport HeightAnimationInstance from './HeightAnimationInstance'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type useHeightAnimationOptions = {\n  /**\n   * Set to `true`, when initially `false` was given, to animate from 0px to auto.\n   * Default: true\n   */\n  open?: boolean\n\n  /**\n   * Set to `false` to omit the animation.\n   * Default: true\n   */\n  animate?: boolean\n\n  /**\n   * To compensate for CSS gap between the rows, so animation does not jump during the animation.\n   * Provide a CSS unit or `var(--row-gap)`.\n   */\n  compensateForGap?: string | 'auto'\n\n  /**\n   * In order to let the Hook know when children has changed\n   */\n  children?: React.ReactNode | HTMLElement\n\n  /**\n   * Is called once before mounting the component (useLayoutEffect)\n   */\n  onInit?: (instance: HeightAnimationInstance) => void\n\n  /**\n   * Is called when fully opened or closed\n   */\n  onOpen?: (isOpen: boolean) => void\n\n  /**\n   * Is called when animation has started.\n   */\n  onAnimationStart?: (state: HeightAnimationOnStartTypes) => void\n\n  /**\n   * Is called when animation is done and the full height is reached.\n   */\n  onAnimationEnd?: (state: HeightAnimationOnEndTypes) => void\n}\n\nexport type HeightAnimationOnStartTypes =\n  | 'opening'\n  | 'closing'\n  | 'adjusting'\n\nexport type HeightAnimationOnEndTypes = 'opened' | 'closed' | 'adjusted'\n\nexport function useHeightAnimation(\n  targetRef: React.RefObject<HTMLElement>,\n  {\n    open = true,\n    animate = true,\n    children = null,\n    compensateForGap,\n    onInit = null,\n    onOpen = null,\n    onAnimationStart = null,\n    onAnimationEnd = null,\n  }: useHeightAnimationOptions = {}\n) {\n  const instRef = useRef<HeightAnimationInstance>(null)\n  const isInitialRenderRef = useRef(\n    typeof globalThis !== 'undefined'\n      ? globalThis.readjustTime !== -1\n      : true\n  )\n\n  const [isOpen, setIsOpen] = useState(open)\n  const [isVisible, setIsVisible] = useState(false)\n  const [isAnimating, setIsAnimating] = useState(false)\n  const [isVisibleParallax, setParallax] = useState(open)\n\n  const eventsRef = useRef({\n    onInit,\n    onAnimationEnd,\n    onAnimationStart,\n    onOpen,\n  })\n  eventsRef.current.onInit = onInit\n  eventsRef.current.onAnimationEnd = onAnimationEnd\n  eventsRef.current.onAnimationStart = onAnimationStart\n  eventsRef.current.onOpen = onOpen\n\n  useLayoutEffect(() => {\n    instRef.current = new HeightAnimationInstance()\n    eventsRef.current.onInit?.(instRef.current)\n    return () => {\n      instRef.current?.remove()\n      instRef.current = null\n    }\n  }, [])\n\n  useLayoutEffect(() => {\n    instRef.current.setOptions({ animate })\n\n    if (typeof global !== 'undefined' && globalThis.IS_TEST) {\n      instRef.current.setOptions({ animate: false })\n    }\n  }, [animate])\n\n  const handleCompensateForGap = useCallback(() => {\n    if (compensateForGap) {\n      let gap = compensateForGap\n      const { elem } = instRef.current\n      if (compensateForGap === 'auto') {\n        gap = window\n          .getComputedStyle(elem.parentElement)\n          .getPropertyValue('row-gap')\n      }\n      elem.style.marginTop = `calc(${gap} * -1)`\n      const inner = elem.querySelector('.compensateForGap') as HTMLElement\n      inner.style.marginTop = gap\n    }\n  }, [compensateForGap])\n\n  useLayoutEffect(() => {\n    instRef.current.onStart((state: HeightAnimationOnStartTypes) => {\n      switch (state) {\n        case 'opening':\n          handleCompensateForGap()\n          setIsVisible(true)\n          setParallax(true)\n          setIsAnimating(true)\n          break\n\n        case 'closing':\n          setParallax(false)\n          setIsAnimating(true)\n          break\n\n        case 'adjusting':\n          setIsAnimating(true)\n          break\n      }\n\n      if (!isInitialRenderRef.current) {\n        eventsRef.current.onAnimationStart?.(state)\n      }\n    })\n\n    instRef.current.onEnd((state: HeightAnimationOnEndTypes) => {\n      switch (state) {\n        case 'opened':\n          setIsVisible(true)\n          setIsOpen(true)\n          setIsAnimating(false)\n          eventsRef.current.onOpen?.(true)\n          break\n\n        case 'closed':\n          setIsVisible(false)\n          setIsOpen(false)\n          setParallax(false)\n          setIsAnimating(false)\n          eventsRef.current.onOpen?.(false)\n          break\n\n        case 'adjusted':\n          setIsAnimating(false)\n          break\n      }\n\n      if (!isInitialRenderRef.current) {\n        eventsRef.current.onAnimationEnd?.(state)\n      }\n    })\n  }, [compensateForGap, handleCompensateForGap])\n\n  useOpenClose({ open, instRef, isInitialRenderRef, targetRef })\n  useAdjust({ children, instRef, isInitialRenderRef, targetRef })\n\n  /**\n   * Returns the first paint style, to be used for the initial render,\n   * to avoid flickering.\n   */\n  const firstPaintStyle:\n    | typeof instRef.current.firstPaintStyle\n    | Record<string, never> =\n    (open &&\n      !isVisible &&\n      !isAnimating &&\n      instRef.current?.firstPaintStyle) ||\n    {}\n  const isInDOM = open || isVisible\n\n  return {\n    open,\n    isOpen,\n    isInDOM,\n    isVisible,\n    isVisibleParallax,\n    isAnimating,\n    firstPaintStyle,\n  }\n}\n\nfunction useOpenClose({ open, instRef, isInitialRenderRef, targetRef }) {\n  const isTest =\n    typeof process !== 'undefined' &&\n    process.env.NODE_ENV === 'test' &&\n    typeof globalThis.IS_TEST === 'undefined'\n\n  useLayoutEffect(() => {\n    instRef.current.setElement(targetRef.current)\n\n    if (\n      !targetRef.current ||\n      (instRef.current.state === 'init' && isInitialRenderRef.current)\n    ) {\n      if (open) {\n        instRef.current.setAsOpen()\n      } else {\n        instRef.current.setAsClosed()\n      }\n    } else {\n      if (open) {\n        instRef.current.open()\n      } else {\n        instRef.current.close()\n      }\n    }\n\n    // For testing purposes, we need to trigger the transitionend event\n    if (isTest) {\n      const event = new CustomEvent('transitionend')\n      targetRef.current?.dispatchEvent(event)\n    }\n  }, [open, targetRef, instRef, isInitialRenderRef, isTest])\n\n  useLayoutEffect(() => {\n    const run = () => {\n      isInitialRenderRef.current = false\n    }\n    if (globalThis.bypassTime === -1 || isTest) {\n      run()\n    } else {\n      window.requestAnimationFrame?.(run)\n    }\n  }, [isInitialRenderRef, isTest])\n}\n\nfunction useAdjust({ children, instRef, isInitialRenderRef, targetRef }) {\n  const fromHeight = useRef(0)\n\n  const [timer] = useState(() => Date.now())\n\n  /**\n   * Wait for some criteria and a certain time, before we adjust the height,\n   * so it will not run when a open/close animation is running.\n   */\n  const shouldAdjust = () => {\n    switch (instRef.current?.state) {\n      case 'opened':\n      case 'adjusted':\n      case 'adjusting':\n        return (\n          !isInitialRenderRef.current &&\n          Date.now() - timer > (globalThis.readjustTime || 100)\n        )\n    }\n\n    return false\n  }\n\n  useMemo(() => {\n    if (shouldAdjust()) {\n      fromHeight.current = instRef.current?.getHeight()\n    }\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useLayoutEffect(() => {\n    if (shouldAdjust()) {\n      /**\n       * In certain cases, the targetRef.current is outdated, so we need to set it again.\n       * E.g. in Tabs.js, when we switch tabs, the targetRef.current is not updated.\n       */\n      instRef.current.setElement(targetRef.current)\n\n      /**\n       * Ensure we don't have height, while we get the \"toHeight\" again.\n       * We may move this inside of the HeightAnimationInstance class later,\n       * but the \"GlobalStatus\" is currently relying on \"getUnknownHeight\" inside of adjustTo.\n       */\n      instRef.current.elem.style.height = ''\n\n      /**\n       * Use getHeight instead of getUnknownHeight because of the additional,\n       * disturbing DOM manipulation.\n       */\n      const toHeight = instRef.current.getHeight()\n\n      instRef.current.adjustTo(fromHeight.current, toHeight)\n    }\n  }, [children]) // eslint-disable-line react-hooks/exhaustive-deps\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACrE,OAAOC,uBAAuB,MAAM,2BAA2B;AAG/D,MAAMC,eAAe,GACnB,OAAOC,MAAM,KAAK,WAAW,GAAGP,KAAK,CAACQ,SAAS,GAAGR,KAAK,CAACM,eAAe;AAsDzE,OAAO,SAASG,kBAAkBA,CAChCC,SAAuC,EAWvC;EAAA,IAAAC,iBAAA;EAAA,IAVA;IACEC,IAAI,GAAG,IAAI;IACXC,OAAO,GAAG,IAAI;IACdC,QAAQ,GAAG,IAAI;IACfC,gBAAgB;IAChBC,MAAM,GAAG,IAAI;IACbC,MAAM,GAAG,IAAI;IACbC,gBAAgB,GAAG,IAAI;IACvBC,cAAc,GAAG;EACQ,CAAC,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EAEjC,MAAMG,OAAO,GAAGpB,MAAM,CAA0B,IAAI,CAAC;EACrD,MAAMqB,kBAAkB,GAAGrB,MAAM,CAC/B,OAAOsB,UAAU,KAAK,WAAW,GAC7BA,UAAU,CAACC,YAAY,KAAK,CAAC,CAAC,GAC9B,IACN,CAAC;EAED,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGxB,QAAQ,CAACQ,IAAI,CAAC;EAC1C,MAAM,CAACiB,SAAS,EAAEC,YAAY,CAAC,GAAG1B,QAAQ,CAAC,KAAK,CAAC;EACjD,MAAM,CAAC2B,WAAW,EAAEC,cAAc,CAAC,GAAG5B,QAAQ,CAAC,KAAK,CAAC;EACrD,MAAM,CAAC6B,iBAAiB,EAAEC,WAAW,CAAC,GAAG9B,QAAQ,CAACQ,IAAI,CAAC;EAEvD,MAAMuB,SAAS,GAAGhC,MAAM,CAAC;IACvBa,MAAM;IACNG,cAAc;IACdD,gBAAgB;IAChBD;EACF,CAAC,CAAC;EACFkB,SAAS,CAACC,OAAO,CAACpB,MAAM,GAAGA,MAAM;EACjCmB,SAAS,CAACC,OAAO,CAACjB,cAAc,GAAGA,cAAc;EACjDgB,SAAS,CAACC,OAAO,CAAClB,gBAAgB,GAAGA,gBAAgB;EACrDiB,SAAS,CAACC,OAAO,CAACnB,MAAM,GAAGA,MAAM;EAEjCX,eAAe,CAAC,MAAM;IAAA,IAAA+B,qBAAA,EAAAC,kBAAA;IACpBf,OAAO,CAACa,OAAO,GAAG,IAAI/B,uBAAuB,CAAC,CAAC;IAC/C,CAAAgC,qBAAA,IAAAC,kBAAA,GAAAH,SAAS,CAACC,OAAO,EAACpB,MAAM,cAAAqB,qBAAA,uBAAxBA,qBAAA,CAAAE,IAAA,CAAAD,kBAAA,EAA2Bf,OAAO,CAACa,OAAO,CAAC;IAC3C,OAAO,MAAM;MAAA,IAAAI,gBAAA;MACX,CAAAA,gBAAA,GAAAjB,OAAO,CAACa,OAAO,cAAAI,gBAAA,uBAAfA,gBAAA,CAAiBC,MAAM,CAAC,CAAC;MACzBlB,OAAO,CAACa,OAAO,GAAG,IAAI;IACxB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN9B,eAAe,CAAC,MAAM;IACpBiB,OAAO,CAACa,OAAO,CAACM,UAAU,CAAC;MAAE7B;IAAQ,CAAC,CAAC;IAEvC,IAAI,OAAO8B,MAAM,KAAK,WAAW,IAAIlB,UAAU,CAACmB,OAAO,EAAE;MACvDrB,OAAO,CAACa,OAAO,CAACM,UAAU,CAAC;QAAE7B,OAAO,EAAE;MAAM,CAAC,CAAC;IAChD;EACF,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,MAAMgC,sBAAsB,GAAG5C,WAAW,CAAC,MAAM;IAC/C,IAAIc,gBAAgB,EAAE;MACpB,IAAI+B,GAAG,GAAG/B,gBAAgB;MAC1B,MAAM;QAAEgC;MAAK,CAAC,GAAGxB,OAAO,CAACa,OAAO;MAChC,IAAIrB,gBAAgB,KAAK,MAAM,EAAE;QAC/B+B,GAAG,GAAGvC,MAAM,CACTyC,gBAAgB,CAACD,IAAI,CAACE,aAAa,CAAC,CACpCC,gBAAgB,CAAC,SAAS,CAAC;MAChC;MACAH,IAAI,CAACI,KAAK,CAACC,SAAS,GAAI,QAAON,GAAI,QAAO;MAC1C,MAAMO,KAAK,GAAGN,IAAI,CAACO,aAAa,CAAC,mBAAmB,CAAgB;MACpED,KAAK,CAACF,KAAK,CAACC,SAAS,GAAGN,GAAG;IAC7B;EACF,CAAC,EAAE,CAAC/B,gBAAgB,CAAC,CAAC;EAEtBT,eAAe,CAAC,MAAM;IACpBiB,OAAO,CAACa,OAAO,CAACmB,OAAO,CAAEC,KAAkC,IAAK;MAC9D,QAAQA,KAAK;QACX,KAAK,SAAS;UACZX,sBAAsB,CAAC,CAAC;UACxBf,YAAY,CAAC,IAAI,CAAC;UAClBI,WAAW,CAAC,IAAI,CAAC;UACjBF,cAAc,CAAC,IAAI,CAAC;UACpB;QAEF,KAAK,SAAS;UACZE,WAAW,CAAC,KAAK,CAAC;UAClBF,cAAc,CAAC,IAAI,CAAC;UACpB;QAEF,KAAK,WAAW;UACdA,cAAc,CAAC,IAAI,CAAC;UACpB;MACJ;MAEA,IAAI,CAACR,kBAAkB,CAACY,OAAO,EAAE;QAAA,IAAAqB,sBAAA,EAAAC,mBAAA;QAC/B,CAAAD,sBAAA,IAAAC,mBAAA,GAAAvB,SAAS,CAACC,OAAO,EAAClB,gBAAgB,cAAAuC,sBAAA,uBAAlCA,sBAAA,CAAAlB,IAAA,CAAAmB,mBAAA,EAAqCF,KAAK,CAAC;MAC7C;IACF,CAAC,CAAC;IAEFjC,OAAO,CAACa,OAAO,CAACuB,KAAK,CAAEH,KAAgC,IAAK;MAAA,IAAAI,sBAAA,EAAAC,mBAAA,EAAAC,sBAAA,EAAAC,mBAAA;MAC1D,QAAQP,KAAK;QACX,KAAK,QAAQ;UACX1B,YAAY,CAAC,IAAI,CAAC;UAClBF,SAAS,CAAC,IAAI,CAAC;UACfI,cAAc,CAAC,KAAK,CAAC;UACrB,CAAA4B,sBAAA,IAAAC,mBAAA,GAAA1B,SAAS,CAACC,OAAO,EAACnB,MAAM,cAAA2C,sBAAA,uBAAxBA,sBAAA,CAAArB,IAAA,CAAAsB,mBAAA,EAA2B,IAAI,CAAC;UAChC;QAEF,KAAK,QAAQ;UACX/B,YAAY,CAAC,KAAK,CAAC;UACnBF,SAAS,CAAC,KAAK,CAAC;UAChBM,WAAW,CAAC,KAAK,CAAC;UAClBF,cAAc,CAAC,KAAK,CAAC;UACrB,CAAA8B,sBAAA,IAAAC,mBAAA,GAAA5B,SAAS,CAACC,OAAO,EAACnB,MAAM,cAAA6C,sBAAA,uBAAxBA,sBAAA,CAAAvB,IAAA,CAAAwB,mBAAA,EAA2B,KAAK,CAAC;UACjC;QAEF,KAAK,UAAU;UACb/B,cAAc,CAAC,KAAK,CAAC;UACrB;MACJ;MAEA,IAAI,CAACR,kBAAkB,CAACY,OAAO,EAAE;QAAA,IAAA4B,sBAAA,EAAAC,mBAAA;QAC/B,CAAAD,sBAAA,IAAAC,mBAAA,GAAA9B,SAAS,CAACC,OAAO,EAACjB,cAAc,cAAA6C,sBAAA,uBAAhCA,sBAAA,CAAAzB,IAAA,CAAA0B,mBAAA,EAAmCT,KAAK,CAAC;MAC3C;IACF,CAAC,CAAC;EACJ,CAAC,EAAE,CAACzC,gBAAgB,EAAE8B,sBAAsB,CAAC,CAAC;EAE9CqB,YAAY,CAAC;IAAEtD,IAAI;IAAEW,OAAO;IAAEC,kBAAkB;IAAEd;EAAU,CAAC,CAAC;EAC9DyD,SAAS,CAAC;IAAErD,QAAQ;IAAES,OAAO;IAAEC,kBAAkB;IAAEd;EAAU,CAAC,CAAC;EAM/D,MAAM0D,eAEmB,GACtBxD,IAAI,IACH,CAACiB,SAAS,IACV,CAACE,WAAW,MAAApB,iBAAA,GACZY,OAAO,CAACa,OAAO,cAAAzB,iBAAA,uBAAfA,iBAAA,CAAiByD,eAAe,KAClC,CAAC,CAAC;EACJ,MAAMC,OAAO,GAAGzD,IAAI,IAAIiB,SAAS;EAEjC,OAAO;IACLjB,IAAI;IACJe,MAAM;IACN0C,OAAO;IACPxC,SAAS;IACTI,iBAAiB;IACjBF,WAAW;IACXqC;EACF,CAAC;AACH;AAEA,SAASF,YAAYA,CAAAI,IAAA,EAAmD;EAAA,IAAlD;IAAE1D,IAAI;IAAEW,OAAO;IAAEC,kBAAkB;IAAEd;EAAU,CAAC,GAAA4D,IAAA;EACpE,MAAMC,MAAM,GACV,OAAOC,OAAO,KAAK,WAAW,IAC9BA,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM,IAC/B,OAAOjD,UAAU,CAACmB,OAAO,KAAK,WAAW;EAE3CtC,eAAe,CAAC,MAAM;IACpBiB,OAAO,CAACa,OAAO,CAACuC,UAAU,CAACjE,SAAS,CAAC0B,OAAO,CAAC;IAE7C,IACE,CAAC1B,SAAS,CAAC0B,OAAO,IACjBb,OAAO,CAACa,OAAO,CAACoB,KAAK,KAAK,MAAM,IAAIhC,kBAAkB,CAACY,OAAQ,EAChE;MACA,IAAIxB,IAAI,EAAE;QACRW,OAAO,CAACa,OAAO,CAACwC,SAAS,CAAC,CAAC;MAC7B,CAAC,MAAM;QACLrD,OAAO,CAACa,OAAO,CAACyC,WAAW,CAAC,CAAC;MAC/B;IACF,CAAC,MAAM;MACL,IAAIjE,IAAI,EAAE;QACRW,OAAO,CAACa,OAAO,CAACxB,IAAI,CAAC,CAAC;MACxB,CAAC,MAAM;QACLW,OAAO,CAACa,OAAO,CAAC0C,KAAK,CAAC,CAAC;MACzB;IACF;IAGA,IAAIP,MAAM,EAAE;MAAA,IAAAQ,kBAAA;MACV,MAAMC,KAAK,GAAG,IAAIC,WAAW,CAAC,eAAe,CAAC;MAC9C,CAAAF,kBAAA,GAAArE,SAAS,CAAC0B,OAAO,cAAA2C,kBAAA,uBAAjBA,kBAAA,CAAmBG,aAAa,CAACF,KAAK,CAAC;IACzC;EACF,CAAC,EAAE,CAACpE,IAAI,EAAEF,SAAS,EAAEa,OAAO,EAAEC,kBAAkB,EAAE+C,MAAM,CAAC,CAAC;EAE1DjE,eAAe,CAAC,MAAM;IACpB,MAAM6E,GAAG,GAAGA,CAAA,KAAM;MAChB3D,kBAAkB,CAACY,OAAO,GAAG,KAAK;IACpC,CAAC;IACD,IAAIX,UAAU,CAAC2D,UAAU,KAAK,CAAC,CAAC,IAAIb,MAAM,EAAE;MAC1CY,GAAG,CAAC,CAAC;IACP,CAAC,MAAM;MAAA,IAAAE,qBAAA,EAAAC,OAAA;MACL,CAAAD,qBAAA,IAAAC,OAAA,GAAA/E,MAAM,EAACgF,qBAAqB,cAAAF,qBAAA,uBAA5BA,qBAAA,CAAA9C,IAAA,CAAA+C,OAAA,EAA+BH,GAAG,CAAC;IACrC;EACF,CAAC,EAAE,CAAC3D,kBAAkB,EAAE+C,MAAM,CAAC,CAAC;AAClC;AAEA,SAASJ,SAASA,CAAAqB,KAAA,EAAuD;EAAA,IAAtD;IAAE1E,QAAQ;IAAES,OAAO;IAAEC,kBAAkB;IAAEd;EAAU,CAAC,GAAA8E,KAAA;EACrE,MAAMC,UAAU,GAAGtF,MAAM,CAAC,CAAC,CAAC;EAE5B,MAAM,CAACuF,KAAK,CAAC,GAAGtF,QAAQ,CAAC,MAAMuF,IAAI,CAACC,GAAG,CAAC,CAAC,CAAC;EAM1C,MAAMC,YAAY,GAAGA,CAAA,KAAM;IAAA,IAAAC,iBAAA;IACzB,SAAAA,iBAAA,GAAQvE,OAAO,CAACa,OAAO,cAAA0D,iBAAA,uBAAfA,iBAAA,CAAiBtC,KAAK;MAC5B,KAAK,QAAQ;MACb,KAAK,UAAU;MACf,KAAK,WAAW;QACd,OACE,CAAChC,kBAAkB,CAACY,OAAO,IAC3BuD,IAAI,CAACC,GAAG,CAAC,CAAC,GAAGF,KAAK,IAAIjE,UAAU,CAACC,YAAY,IAAI,GAAG,CAAC;IAE3D;IAEA,OAAO,KAAK;EACd,CAAC;EAEDxB,OAAO,CAAC,MAAM;IACZ,IAAI2F,YAAY,CAAC,CAAC,EAAE;MAAA,IAAAE,iBAAA;MAClBN,UAAU,CAACrD,OAAO,IAAA2D,iBAAA,GAAGxE,OAAO,CAACa,OAAO,cAAA2D,iBAAA,uBAAfA,iBAAA,CAAiBC,SAAS,CAAC,CAAC;IACnD;EACF,CAAC,EAAE,CAAClF,QAAQ,CAAC,CAAC;EAEdR,eAAe,CAAC,MAAM;IACpB,IAAIuF,YAAY,CAAC,CAAC,EAAE;MAKlBtE,OAAO,CAACa,OAAO,CAACuC,UAAU,CAACjE,SAAS,CAAC0B,OAAO,CAAC;MAO7Cb,OAAO,CAACa,OAAO,CAACW,IAAI,CAACI,KAAK,CAAC8C,MAAM,GAAG,EAAE;MAMtC,MAAMC,QAAQ,GAAG3E,OAAO,CAACa,OAAO,CAAC4D,SAAS,CAAC,CAAC;MAE5CzE,OAAO,CAACa,OAAO,CAAC+D,QAAQ,CAACV,UAAU,CAACrD,OAAO,EAAE8D,QAAQ,CAAC;IACxD;EACF,CAAC,EAAE,CAACpF,QAAQ,CAAC,CAAC;AAChB"}

package/components/radio/RadioGroup.js

@@ -111,9 +111,11 @@ export default class RadioGroup extends React.PureComponent {
       value: context
     }, React.createElement("div", {
       className: classes
-    }, _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), React.createElement(Fieldset, null, React.createElement(Flex.Container, {
+    }, _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), React.createElement(Fieldset, {
+      className: "dnb-toggle-button-group__fieldset"
+    }, React.createElement(Flex.Container, {
       direction: vertical || label_direction === 'vertical' ? 'vertical' : 'horizontal',
-      spacing: vertical ? 'x-small' : 'small'
+      gap: vertical ? 'x-small' : 'small'
     }, label && React.createElement(FormLabel, {
       element: "legend",
       id: id + '-label',

package/components/radio/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["React","PropTypes","classnames","extendPropsWithContextInClassComponent","makeUniqueId","validateDOMAttributes","getStatusState","combineDescribedBy","combineLabelledBy","dispatchCustomElementEvent","pickFormElementProps","spacingPropTypes","createSpacingClasses","AlignmentHelper","Space","FormLabel","FormStatus","Flex","Context","Suffix","RadioGroupContext","RadioGroup","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","value","_value","constructor","_defineProperty","_ref","event","setState","_refInput","createRef","_id","id","_name","name","render","_this$context","_this$context2","defaultProps","context","FormRow","formElement","status","status_state","status_props","status_no_animation","globalStatus","suffix","label","label_direction","label_sr_only","label_position","vertical","layout_direction","size","disabled","skeleton","className","children","on_change","rest","_objectWithoutProperties","_excluded","showStatus","classes","params","_objectSpread","onChange","onChangeHandler","Fieldset","createElement","Provider","_AlignmentHelper","Container","direction","spacing","element","srOnly","_extends","role","show","text","text_id","width_selector","no_animation","title","undefined","attributes","test","String","process","env","NODE_ENV","propTypes","oneOfType","string","func","node","oneOf","bool","object","shape","message","_supportsSpacingProps"],"sources":["../../../../src/components/radio/RadioGroup.js"],"sourcesContent":["/**\n * Web RadioGroup Component\n *\n * This is a legacy component.\n * For referencing while developing new features, please use a Functional component.\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport {\n  extendPropsWithContextInClassComponent,\n  makeUniqueId,\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  combineLabelledBy,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport Space from '../Space'\nimport FormLabel from '../FormLabel'\nimport FormStatus from '../FormStatus'\nimport Flex from '../Flex'\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport RadioGroupContext from './RadioGroupContext'\n\n/**\n * The radio component is our enhancement of the classic radio button. It acts like a radio. Example: On/off, yes/no.\n */\nexport default class RadioGroup extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    label: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    label_direction: PropTypes.oneOf(['horizontal', 'vertical']),\n    label_sr_only: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    label_position: PropTypes.oneOf(['left', 'right']),\n    title: PropTypes.string,\n    disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    id: PropTypes.string,\n    name: PropTypes.string,\n    size: PropTypes.oneOf(['default', 'medium', 'large']),\n    status: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    status_state: PropTypes.string,\n    status_props: PropTypes.object,\n    status_no_animation: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n    globalStatus: PropTypes.shape({\n      id: PropTypes.string,\n      message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    }),\n    suffix: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    layout_direction: PropTypes.oneOf(['column', 'row']),\n    vertical: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    value: PropTypes.string,\n    attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n\n    ...spacingPropTypes,\n\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n\n    on_change: PropTypes.func,\n  }\n\n  static defaultProps = {\n    label: null,\n    label_direction: null,\n    label_sr_only: null,\n    label_position: null,\n    title: null,\n    disabled: null,\n    skeleton: null,\n    id: null,\n    name: null,\n    size: null,\n    status: null,\n    status_state: 'error',\n    status_props: null,\n    status_no_animation: null,\n    globalStatus: null,\n    suffix: null,\n    vertical: null,\n    layout_direction: 'row',\n    value: undefined,\n    attributes: null,\n\n    className: null,\n    children: null,\n\n    on_change: null,\n  }\n\n  static parseChecked = (state) => /true|on/.test(String(state))\n\n  static getDerivedStateFromProps(props, state) {\n    if (state._listenForPropChanges) {\n      if (props.value !== state._value) {\n        state.value = props.value\n      }\n      if (typeof props.value !== 'undefined') {\n        state._value = props.value\n      }\n    }\n    state._listenForPropChanges = true\n\n    return state\n  }\n\n  constructor(props) {\n    super(props)\n    this._refInput = React.createRef()\n    this._id = props.id || makeUniqueId() // cause we need an id anyway\n    this._name = props.name || this._id\n    this.state = {\n      _listenForPropChanges: true,\n    }\n  }\n\n  onChangeHandler = ({ value, event }) => {\n    this.setState({ value, _listenForPropChanges: false })\n    dispatchCustomElementEvent(this, 'on_change', {\n      value,\n      event,\n    })\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      RadioGroup.defaultProps,\n      // Deprecated – can be removed in v11\n      pickFormElementProps(this.context?.FormRow),\n      pickFormElementProps(this.context?.formElement),\n      this.context.RadioGroup\n    )\n\n    const {\n      status,\n      status_state,\n      status_props,\n      status_no_animation,\n      globalStatus,\n      suffix,\n      label,\n      label_direction,\n      label_sr_only,\n      label_position,\n      vertical,\n      layout_direction,\n      size,\n      disabled,\n      skeleton,\n      className,\n\n      id: _id, // eslint-disable-line\n      name: _name, // eslint-disable-line\n      value: _value, // eslint-disable-line\n      children, // eslint-disable-line\n      on_change, // eslint-disable-line\n\n      ...rest\n    } = props\n\n    const { value } = this.state\n\n    const id = this._id\n    const showStatus = getStatusState(status)\n\n    const classes = classnames(\n      'dnb-radio-group',\n      status && `dnb-radio-group__status--${status_state}`,\n      `dnb-radio-group--${layout_direction}`,\n      'dnb-form-component',\n      createSpacingClasses(props),\n      className\n    )\n\n    const params = {\n      ...rest,\n    }\n\n    if (showStatus || suffix) {\n      params['aria-describedby'] = combineDescribedBy(\n        params,\n        showStatus ? id + '-status' : null,\n        suffix ? id + '-suffix' : null\n      )\n    }\n    if (label) {\n      params['aria-labelledby'] = combineLabelledBy(params, id + '-label')\n    }\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, params)\n\n    const context = {\n      name: this._name,\n      value,\n      size,\n      disabled,\n      label_position,\n      onChange: this.onChangeHandler,\n    }\n\n    const Fieldset = label ? 'fieldset' : 'div'\n\n    return (\n      <RadioGroupContext.Provider value={context}>\n        <div className={classes}>\n          <AlignmentHelper />\n          <Fieldset>\n            <Flex.Container\n              // align=\"baseline\"\n              direction={\n                vertical || label_direction === 'vertical'\n                  ? 'vertical'\n                  : 'horizontal'\n              }\n              spacing={vertical ? 'x-small' : 'small'}\n            >\n              {label && (\n                <FormLabel\n                  element=\"legend\"\n                  id={id + '-label'}\n                  srOnly={label_sr_only}\n                >\n                  {label}\n                </FormLabel>\n              )}\n\n              <Space\n                element=\"span\"\n                id={id}\n                className=\"dnb-radio-group__shell\"\n                role=\"radiogroup\"\n                {...params}\n              >\n                {children}\n\n                {suffix && (\n                  <Suffix\n                    className=\"dnb-radio-group__suffix\"\n                    id={id + '-suffix'} // used for \"aria-describedby\"\n                    context={props}\n                  >\n                    {suffix}\n                  </Suffix>\n                )}\n\n                <FormStatus\n                  show={showStatus}\n                  id={id + '-form-status'}\n                  globalStatus={globalStatus}\n                  label={label}\n                  text={status}\n                  state={status_state}\n                  text_id={id + '-status'} // used for \"aria-describedby\"\n                  width_selector={id + ', ' + id + '-label'}\n                  no_animation={status_no_animation}\n                  skeleton={skeleton}\n                  {...status_props}\n                />\n              </Space>\n            </Flex.Container>\n          </Fieldset>\n        </div>\n      </RadioGroupContext.Provider>\n    )\n  }\n}\n\nRadioGroup._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"RadioGroup.js","names":["React","PropTypes","classnames","extendPropsWithContextInClassComponent","makeUniqueId","validateDOMAttributes","getStatusState","combineDescribedBy","combineLabelledBy","dispatchCustomElementEvent","pickFormElementProps","spacingPropTypes","createSpacingClasses","AlignmentHelper","Space","FormLabel","FormStatus","Flex","Context","Suffix","RadioGroupContext","RadioGroup","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","value","_value","constructor","_defineProperty","_ref","event","setState","_refInput","createRef","_id","id","_name","name","render","_this$context","_this$context2","defaultProps","context","FormRow","formElement","status","status_state","status_props","status_no_animation","globalStatus","suffix","label","label_direction","label_sr_only","label_position","vertical","layout_direction","size","disabled","skeleton","className","children","on_change","rest","_objectWithoutProperties","_excluded","showStatus","classes","params","_objectSpread","onChange","onChangeHandler","Fieldset","createElement","Provider","_AlignmentHelper","Container","direction","gap","element","srOnly","_extends","role","show","text","text_id","width_selector","no_animation","title","undefined","attributes","test","String","process","env","NODE_ENV","propTypes","oneOfType","string","func","node","oneOf","bool","object","shape","message","_supportsSpacingProps"],"sources":["../../../../src/components/radio/RadioGroup.js"],"sourcesContent":["/**\n * Web RadioGroup Component\n *\n * This is a legacy component.\n * For referencing while developing new features, please use a Functional component.\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport {\n  extendPropsWithContextInClassComponent,\n  makeUniqueId,\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  combineLabelledBy,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport {\n  spacingPropTypes,\n  createSpacingClasses,\n} from '../space/SpacingHelper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport Space from '../Space'\nimport FormLabel from '../FormLabel'\nimport FormStatus from '../FormStatus'\nimport Flex from '../Flex'\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport RadioGroupContext from './RadioGroupContext'\n\n/**\n * The radio component is our enhancement of the classic radio button. It acts like a radio. Example: On/off, yes/no.\n */\nexport default class RadioGroup extends React.PureComponent {\n  static contextType = Context\n\n  static propTypes = {\n    label: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    label_direction: PropTypes.oneOf(['horizontal', 'vertical']),\n    label_sr_only: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    label_position: PropTypes.oneOf(['left', 'right']),\n    title: PropTypes.string,\n    disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    id: PropTypes.string,\n    name: PropTypes.string,\n    size: PropTypes.oneOf(['default', 'medium', 'large']),\n    status: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    status_state: PropTypes.string,\n    status_props: PropTypes.object,\n    status_no_animation: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.bool,\n    ]),\n    globalStatus: PropTypes.shape({\n      id: PropTypes.string,\n      message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    }),\n    suffix: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n    layout_direction: PropTypes.oneOf(['column', 'row']),\n    vertical: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n    value: PropTypes.string,\n    attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n\n    ...spacingPropTypes,\n\n    className: PropTypes.string,\n    children: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n      PropTypes.node,\n    ]),\n\n    on_change: PropTypes.func,\n  }\n\n  static defaultProps = {\n    label: null,\n    label_direction: null,\n    label_sr_only: null,\n    label_position: null,\n    title: null,\n    disabled: null,\n    skeleton: null,\n    id: null,\n    name: null,\n    size: null,\n    status: null,\n    status_state: 'error',\n    status_props: null,\n    status_no_animation: null,\n    globalStatus: null,\n    suffix: null,\n    vertical: null,\n    layout_direction: 'row',\n    value: undefined,\n    attributes: null,\n\n    className: null,\n    children: null,\n\n    on_change: null,\n  }\n\n  static parseChecked = (state) => /true|on/.test(String(state))\n\n  static getDerivedStateFromProps(props, state) {\n    if (state._listenForPropChanges) {\n      if (props.value !== state._value) {\n        state.value = props.value\n      }\n      if (typeof props.value !== 'undefined') {\n        state._value = props.value\n      }\n    }\n    state._listenForPropChanges = true\n\n    return state\n  }\n\n  constructor(props) {\n    super(props)\n    this._refInput = React.createRef()\n    this._id = props.id || makeUniqueId() // cause we need an id anyway\n    this._name = props.name || this._id\n    this.state = {\n      _listenForPropChanges: true,\n    }\n  }\n\n  onChangeHandler = ({ value, event }) => {\n    this.setState({ value, _listenForPropChanges: false })\n    dispatchCustomElementEvent(this, 'on_change', {\n      value,\n      event,\n    })\n  }\n\n  render() {\n    // use only the props from context, who are available here anyway\n    const props = extendPropsWithContextInClassComponent(\n      this.props,\n      RadioGroup.defaultProps,\n      // Deprecated – can be removed in v11\n      pickFormElementProps(this.context?.FormRow),\n      pickFormElementProps(this.context?.formElement),\n      this.context.RadioGroup\n    )\n\n    const {\n      status,\n      status_state,\n      status_props,\n      status_no_animation,\n      globalStatus,\n      suffix,\n      label,\n      label_direction,\n      label_sr_only,\n      label_position,\n      vertical,\n      layout_direction,\n      size,\n      disabled,\n      skeleton,\n      className,\n\n      id: _id, // eslint-disable-line\n      name: _name, // eslint-disable-line\n      value: _value, // eslint-disable-line\n      children, // eslint-disable-line\n      on_change, // eslint-disable-line\n\n      ...rest\n    } = props\n\n    const { value } = this.state\n\n    const id = this._id\n    const showStatus = getStatusState(status)\n\n    const classes = classnames(\n      'dnb-radio-group',\n      status && `dnb-radio-group__status--${status_state}`,\n      `dnb-radio-group--${layout_direction}`,\n      'dnb-form-component',\n      createSpacingClasses(props),\n      className\n    )\n\n    const params = {\n      ...rest,\n    }\n\n    if (showStatus || suffix) {\n      params['aria-describedby'] = combineDescribedBy(\n        params,\n        showStatus ? id + '-status' : null,\n        suffix ? id + '-suffix' : null\n      )\n    }\n    if (label) {\n      params['aria-labelledby'] = combineLabelledBy(params, id + '-label')\n    }\n\n    // also used for code markup simulation\n    validateDOMAttributes(this.props, params)\n\n    const context = {\n      name: this._name,\n      value,\n      size,\n      disabled,\n      label_position,\n      onChange: this.onChangeHandler,\n    }\n\n    const Fieldset = label ? 'fieldset' : 'div'\n\n    return (\n      <RadioGroupContext.Provider value={context}>\n        <div className={classes}>\n          <AlignmentHelper />\n          <Fieldset className=\"dnb-toggle-button-group__fieldset\">\n            <Flex.Container\n              direction={\n                vertical || label_direction === 'vertical'\n                  ? 'vertical'\n                  : 'horizontal'\n              }\n              gap={vertical ? 'x-small' : 'small'}\n            >\n              {label && (\n                <FormLabel\n                  element=\"legend\"\n                  id={id + '-label'}\n                  srOnly={label_sr_only}\n                >\n                  {label}\n                </FormLabel>\n              )}\n\n              <Space\n                element=\"span\"\n                id={id}\n                className=\"dnb-radio-group__shell\"\n                role=\"radiogroup\"\n                {...params}\n              >\n                {children}\n\n                {suffix && (\n                  <Suffix\n                    className=\"dnb-radio-group__suffix\"\n                    id={id + '-suffix'} // used for \"aria-describedby\"\n                    context={props}\n                  >\n                    {suffix}\n                  </Suffix>\n                )}\n\n                <FormStatus\n                  show={showStatus}\n                  id={id + '-form-status'}\n                  globalStatus={globalStatus}\n                  label={label}\n                  text={status}\n                  state={status_state}\n                  text_id={id + '-status'} // used for \"aria-describedby\"\n                  width_selector={id + ', ' + id + '-label'}\n                  no_animation={status_no_animation}\n                  skeleton={skeleton}\n                  {...status_props}\n                />\n              </Space>\n            </Flex.Container>\n          </Fieldset>\n        </div>\n      </RadioGroupContext.Provider>\n    )\n  }\n}\n\nRadioGroup._supportsSpacingProps = true\n"],"mappings":"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"}

package/components/radio/style/dnb-radio.css

@@ -200,10 +200,13 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   transform: translateY(0.25rem); /* 4/16 */
 }
 .dnb-radio-group {
-  --radio-group-margin-bottom: 0.5rem;
-  --radio-group-margin-right: 1rem;
+  --radio-group-row-gap: 0.5rem;
+  --radio-group-column-gap: 1rem;
   display: inline-flex;
 }
+.dnb-radio-group, .dnb-radio-group__fieldset, .dnb-radio-group__shell {
+  flex-grow: 1;
+}
 .dnb-radio-group fieldset {
   margin: 0;
   padding: 0;
@@ -219,9 +222,9 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 .dnb-radio-group [role=radiogroup], .dnb-radio-group__shell {
   display: flex;
   flex-wrap: wrap;
-  -moz-column-gap: var(--radio-group-margin-right);
-       column-gap: var(--radio-group-margin-right);
-  row-gap: var(--radio-group-margin-bottom);
+  -moz-column-gap: var(--radio-group-column-gap);
+       column-gap: var(--radio-group-column-gap);
+  row-gap: var(--radio-group-row-gap);
 }
 .dnb-radio-group__shell > .dnb-form-status {
   margin-top: 0;