@dnb/eufemia 10.6.0 → 10.8.0

package/es/extensions/forms/FieldBlock/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default"],"sources":["../../../../../src/extensions/forms/FieldBlock/index.ts"],"sourcesContent":["export { default  } from './FieldBlock';\n"],"mappings":"AAAA,SAASA,OAAO,QAAS,cAAc"}
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../../../src/extensions/forms/FieldBlock/index.ts"],"sourcesContent":["export { default } from './FieldBlock'\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,cAAc"}

package/es/extensions/forms/FieldBlock/style/dnb-field-block.css

@@ -1,4 +1,24 @@
-.dnb-forms-field-block__label-block {
+.dnb-forms-field-block--layout-vertical {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-areas: "label" "contents" "status";
+}
+.dnb-forms-field-block--layout-horizontal {
+  display: grid;
+  grid-template-columns: 11rem auto;
+  grid-template-areas: "label contents" "status status";
+}
+.dnb-forms-field-block--width-small {
+  width: 5rem;
+}
+.dnb-forms-field-block--width-medium {
+  width: 11rem;
+}
+.dnb-forms-field-block--width-large {
+  width: 21rem;
+}
+.dnb-forms-field-block__label {
+  grid-area: label;
   display: flex;
   flex-flow: row;
   justify-content: space-between;
@@ -12,4 +32,22 @@
 .dnb-forms-field-block__label-secondary {
   color: var(--color-black-55);
   font-size: var(--font-size-small);
+}
+.dnb-forms-field-block__status {
+  grid-area: status;
+}
+.dnb-forms-field-block__contents {
+  grid-area: contents;
+}
+.dnb-forms-field-block__contents--width-stretch {
+  width: 100%;
+}
+.dnb-forms-field-block__contents--width-small {
+  width: 5rem;
+}
+.dnb-forms-field-block__contents--width-medium {
+  width: 11rem;
+}
+.dnb-forms-field-block__contents--width-large {
+  width: 21rem;
 }

package/es/extensions/forms/FieldBlock/style/dnb-field-block.min.css

@@ -1 +1 @@
-.dnb-forms-field-block__label-block{align-items:center;display:flex;flex-flow:row;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}
+.dnb-forms-field-block--layout-vertical{display:grid;grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{display:grid;grid-template-areas:"label contents" "status status";grid-template-columns:11rem auto}.dnb-forms-field-block--width-small{width:5rem}.dnb-forms-field-block--width-medium{width:11rem}.dnb-forms-field-block--width-large{width:21rem}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}.dnb-forms-field-block__contents--width-small{width:5rem}.dnb-forms-field-block__contents--width-medium{width:11rem}.dnb-forms-field-block__contents--width-large{width:21rem}

package/es/extensions/forms/FieldBlock/style/dnb-field-block.scss

@@ -1,5 +1,40 @@
+@import '../../variables.scss';
+
 .dnb-forms-field-block {
-  &__label-block {
+  // Layout
+  &--layout-vertical {
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-areas:
+      'label'
+      'contents'
+      'status';
+  }
+
+  &--layout-horizontal {
+    display: grid;
+    grid-template-columns: $forms-field-width-medium auto;
+    grid-template-areas:
+      'label contents'
+      'status status';
+  }
+
+  // Width
+  &--width-small {
+    width: $forms-field-width-small;
+  }
+
+  &--width-medium {
+    width: $forms-field-width-medium;
+  }
+
+  &--width-large {
+    width: $forms-field-width-large;
+  }
+
+  // Elements
+  &__label {
+    grid-area: label;
     display: flex;
     flex-flow: row;
     justify-content: space-between;
@@ -16,4 +51,28 @@
     color: var(--color-black-55);
     font-size: var(--font-size-small);
   }
+
+  &__status {
+    grid-area: status;
+  }
+
+  &__contents {
+    grid-area: contents;
+
+    &--width-stretch {
+      width: 100%;
+    }
+
+    &--width-small {
+      width: $forms-field-width-small;
+    }
+
+    &--width-medium {
+      width: $forms-field-width-medium;
+    }
+
+    &--width-large {
+      width: $forms-field-width-large;
+    }
+  }
 }

package/es/extensions/forms/FieldGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default"],"sources":["../../../../../src/extensions/forms/FieldGroup/index.ts"],"sourcesContent":["export { default } from './FieldGroup';\nexport * from './FieldGroup';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,cAAc;AACtC,cAAc,cAAc"}
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../../../src/extensions/forms/FieldGroup/index.ts"],"sourcesContent":["export { default } from './FieldGroup'\nexport * from './FieldGroup'\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,cAAc;AACtC,cAAc,cAAc"}

package/es/extensions/forms/Layout/Card.js

@@ -28,9 +28,9 @@ function Card(props) {
       spacing: spacing ?? 'small'
     }, forwardSpaceProps(props)), children);
   }
-  return React.createElement(FlexItem, {
+  return React.createElement(FlexItem, _extends({
     className: classnames('dnb-forms-card', className)
-  }, children);
+  }, forwardSpaceProps(props)), children);
 }
 Card._supportsEufemiaSpacingProps = true;
 export default Card;

package/es/extensions/forms/Layout/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["React","classnames","forwardSpaceProps","FlexContainer","FlexItem","Card","props","className","stack","direction","spacing","children","createElement","_extends","divider","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Layout/Card.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport FlexContainer, {\n  Props as FlexContainerProps,\n} from './FlexContainer'\nimport FlexItem from './FlexItem'\n\nexport type Props = ComponentProps & {\n  stack?: boolean\n  direction?: FlexContainerProps['direction']\n  spacing?: FlexContainerProps['spacing']\n  children: React.ReactNode\n}\n\nfunction Card(props: Props) {\n  const { className, stack, direction, spacing, children } = props\n\n  if (stack) {\n    return (\n      <FlexContainer\n        className={classnames('dnb-forms-card', className)}\n        direction=\"column\"\n        divider=\"line\"\n        spacing={spacing ?? 'medium'}\n        {...forwardSpaceProps(props)}\n      >\n        {children}\n      </FlexContainer>\n    )\n  }\n\n  if (direction || spacing) {\n    return (\n      <FlexContainer\n        className={classnames('dnb-forms-card', className)}\n        direction={direction ?? 'column'}\n        divider=\"space\"\n        spacing={spacing ?? 'small'}\n        {...forwardSpaceProps(props)}\n      >\n        {children}\n      </FlexContainer>\n    )\n  }\n\n  return (\n    <FlexItem className={classnames('dnb-forms-card', className)}>\n      {children}\n    </FlexItem>\n  )\n}\n\nCard._supportsEufemiaSpacingProps = true\nexport default Card\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,iBAAiB,QAAQ,UAAU;AAE5C,OAAOC,aAAa,MAEb,iBAAiB;AACxB,OAAOC,QAAQ,MAAM,YAAY;AASjC,SAASC,IAAIA,CAACC,KAAY,EAAE;EAC1B,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,SAAS;IAAEC,OAAO;IAAEC;EAAS,CAAC,GAAGL,KAAK;EAEhE,IAAIE,KAAK,EAAE;IACT,OACER,KAAA,CAAAY,aAAA,CAACT,aAAa,EAAAU,QAAA;MACZN,SAAS,EAAEN,UAAU,CAAC,gBAAgB,EAAEM,SAAS,CAAE;MACnDE,SAAS,EAAC,QAAQ;MAClBK,OAAO,EAAC,MAAM;MACdJ,OAAO,EAAEA,OAAO,IAAI;IAAS,GACzBR,iBAAiB,CAACI,KAAK,CAAC,GAE3BK,QACY,CAAC;EAEpB;EAEA,IAAIF,SAAS,IAAIC,OAAO,EAAE;IACxB,OACEV,KAAA,CAAAY,aAAA,CAACT,aAAa,EAAAU,QAAA;MACZN,SAAS,EAAEN,UAAU,CAAC,gBAAgB,EAAEM,SAAS,CAAE;MACnDE,SAAS,EAAEA,SAAS,IAAI,QAAS;MACjCK,OAAO,EAAC,OAAO;MACfJ,OAAO,EAAEA,OAAO,IAAI;IAAQ,GACxBR,iBAAiB,CAACI,KAAK,CAAC,GAE3BK,QACY,CAAC;EAEpB;EAEA,OACEX,KAAA,CAAAY,aAAA,CAACR,QAAQ;IAACG,SAAS,EAAEN,UAAU,CAAC,gBAAgB,EAAEM,SAAS;EAAE,GAC1DI,QACO,CAAC;AAEf;AAEAN,IAAI,CAACU,4BAA4B,GAAG,IAAI;AACxC,eAAeV,IAAI"}
+{"version":3,"file":"Card.js","names":["React","classnames","forwardSpaceProps","FlexContainer","FlexItem","Card","props","className","stack","direction","spacing","children","createElement","_extends","divider","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Layout/Card.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport FlexContainer, {\n  Props as FlexContainerProps,\n} from './FlexContainer'\nimport FlexItem from './FlexItem'\n\nexport type Props = ComponentProps & {\n  stack?: boolean\n  direction?: FlexContainerProps['direction']\n  spacing?: FlexContainerProps['spacing']\n  children: React.ReactNode\n}\n\nfunction Card(props: Props) {\n  const { className, stack, direction, spacing, children } = props\n\n  if (stack) {\n    return (\n      <FlexContainer\n        className={classnames('dnb-forms-card', className)}\n        direction=\"column\"\n        divider=\"line\"\n        spacing={spacing ?? 'medium'}\n        {...forwardSpaceProps(props)}\n      >\n        {children}\n      </FlexContainer>\n    )\n  }\n\n  if (direction || spacing) {\n    return (\n      <FlexContainer\n        className={classnames('dnb-forms-card', className)}\n        direction={direction ?? 'column'}\n        divider=\"space\"\n        spacing={spacing ?? 'small'}\n        {...forwardSpaceProps(props)}\n      >\n        {children}\n      </FlexContainer>\n    )\n  }\n\n  return (\n    <FlexItem\n      className={classnames('dnb-forms-card', className)}\n      {...forwardSpaceProps(props)}\n    >\n      {children}\n    </FlexItem>\n  )\n}\n\nCard._supportsEufemiaSpacingProps = true\nexport default Card\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,iBAAiB,QAAQ,UAAU;AAE5C,OAAOC,aAAa,MAEb,iBAAiB;AACxB,OAAOC,QAAQ,MAAM,YAAY;AASjC,SAASC,IAAIA,CAACC,KAAY,EAAE;EAC1B,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,SAAS;IAAEC,OAAO;IAAEC;EAAS,CAAC,GAAGL,KAAK;EAEhE,IAAIE,KAAK,EAAE;IACT,OACER,KAAA,CAAAY,aAAA,CAACT,aAAa,EAAAU,QAAA;MACZN,SAAS,EAAEN,UAAU,CAAC,gBAAgB,EAAEM,SAAS,CAAE;MACnDE,SAAS,EAAC,QAAQ;MAClBK,OAAO,EAAC,MAAM;MACdJ,OAAO,EAAEA,OAAO,IAAI;IAAS,GACzBR,iBAAiB,CAACI,KAAK,CAAC,GAE3BK,QACY,CAAC;EAEpB;EAEA,IAAIF,SAAS,IAAIC,OAAO,EAAE;IACxB,OACEV,KAAA,CAAAY,aAAA,CAACT,aAAa,EAAAU,QAAA;MACZN,SAAS,EAAEN,UAAU,CAAC,gBAAgB,EAAEM,SAAS,CAAE;MACnDE,SAAS,EAAEA,SAAS,IAAI,QAAS;MACjCK,OAAO,EAAC,OAAO;MACfJ,OAAO,EAAEA,OAAO,IAAI;IAAQ,GACxBR,iBAAiB,CAACI,KAAK,CAAC,GAE3BK,QACY,CAAC;EAEpB;EAEA,OACEX,KAAA,CAAAY,aAAA,CAACR,QAAQ,EAAAS,QAAA;IACPN,SAAS,EAAEN,UAAU,CAAC,gBAAgB,EAAEM,SAAS;EAAE,GAC/CL,iBAAiB,CAACI,KAAK,CAAC,GAE3BK,QACO,CAAC;AAEf;AAEAN,IAAI,CAACU,4BAA4B,GAAG,IAAI;AACxC,eAAeV,IAAI"}

package/es/extensions/forms/Layout/FlexContainer.d.ts

@@ -14,6 +14,7 @@ export type Props = ComponentProps & {
     divider?: 'space' | 'line';
     /** Spacing between items inside */
     spacing?: false | 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
+    width?: 'small' | 'medium' | 'large';
     children: React.ReactNode;
 };
 declare function FlexContainer(props: Props): import("react/jsx-runtime").JSX.Element;

package/es/extensions/forms/Layout/FlexContainer.js

@@ -29,7 +29,8 @@ export const isEufemiaElement = element => {
   return Object.values(EufemiaElements).some(eufemiaElement => (element === null || element === void 0 ? void 0 : element.type) === eufemiaElement);
 };
 export const isSpacePropsComponent = element => {
-  return React.isValidElement(element) && typeof element.type === 'object' && '_supportsEufemiaSpacingProps' in element.type || isEufemiaElement(element);
+  var _element$type;
+  return React.isValidElement(element) && (element === null || element === void 0 ? void 0 : (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type['_supportsEufemiaSpacingProps']) === true || isEufemiaElement(element);
 };
 const renderWithSpacing = (element, props) => {
   const takesSpaceProps = isSpacePropsComponent(element);
@@ -44,9 +45,10 @@ function FlexContainer(props) {
     justify = 'flex-start',
     align = 'stretch',
     divider = 'space',
-    spacing = 'small'
+    spacing = 'small',
+    width
   } = props;
-  const cn = classnames('dnb-forms-flex-container', className, direction && `dnb-forms-flex-container--direction-${direction}`, justify && `dnb-forms-flex-container--justify-${justify}`, align && `dnb-forms-flex-container--align-${align}`, wrap && `dnb-forms-flex-container--wrap`, divider && `dnb-forms-flex-container--divider-${divider}`, spacing && `dnb-forms-flex-container--spacing-${spacing}`);
+  const cn = classnames('dnb-forms-flex-container', className, direction && `dnb-forms-flex-container--direction-${direction}`, justify && `dnb-forms-flex-container--justify-${justify}`, align && `dnb-forms-flex-container--align-${align}`, wrap && `dnb-forms-flex-container--wrap`, divider && `dnb-forms-flex-container--divider-${divider}`, spacing && `dnb-forms-flex-container--spacing-${spacing}`, width && `dnb-forms-flex-container--width-${width}`);
   const childrenArray = React.Children.toArray(children);
   return React.createElement(Div, _extends({
     className: cn

package/es/extensions/forms/Layout/FlexContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexContainer.js","names":["React","classnames","Space","Div","EufemiaElements","forwardSpaceProps","MainHeading","SubHeading","isHeadingElement","element","type","getSpaceTop","_element$props","_element$props2","isValidElement","props","top","space","undefined","getSpaceBottom","_element$props3","_element$props4","bottom","isEufemiaElement","Object","values","some","eufemiaElement","isSpacePropsComponent","renderWithSpacing","takesSpaceProps","cloneElement","createElement","FlexContainer","className","children","direction","wrap","justify","align","divider","spacing","cn","childrenArray","Children","toArray","_extends","map","child","i","isFirst","previousChild","currentIsHeading","previousWasHeading","spaceAboveLine","Fragment","key","_hr","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Layout/FlexContainer.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Space } from '../../../components'\nimport { Div } from '../../../elements'\nimport * as EufemiaElements from '../../../elements'\nimport { SpaceType } from '../../../components/space/types'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport MainHeading from './MainHeading'\nimport SubHeading from './SubHeading'\n\nexport function isHeadingElement(element): boolean {\n  return element.type === MainHeading || element.type === SubHeading\n}\n\nconst getSpaceTop = (\n  element: React.ReactChild | React.ReactFragment | React.ReactPortal\n): SpaceType | undefined => {\n  if (!React.isValidElement(element)) {\n    return\n  }\n  return (\n    element.props?.top ??\n    (typeof element.props?.space === 'object'\n      ? element.props.space.top\n      : undefined)\n  )\n}\n\nconst getSpaceBottom = (\n  element: React.ReactChild | React.ReactFragment | React.ReactPortal\n): SpaceType | undefined => {\n  if (!React.isValidElement(element)) {\n    return\n  }\n  return (\n    element.props?.bottom ??\n    (typeof element.props?.space === 'object'\n      ? element.props.space.bottom\n      : undefined)\n  )\n}\n\nexport const isEufemiaElement = (element): boolean => {\n  return Object.values(EufemiaElements).some(\n    (eufemiaElement) => element?.type === eufemiaElement\n  )\n}\n\n/**\n * Is the requested element a component that can receive Eufemia space props (space, top, bottom, left and right)?\n */\nexport const isSpacePropsComponent = (\n  element: React.ReactNode\n): boolean => {\n  return (\n    (React.isValidElement(element) &&\n      typeof element.type === 'object' &&\n      '_supportsEufemiaSpacingProps' in\n        (element.type as React.JSXElementConstructor<unknown>)) ||\n    isEufemiaElement(element)\n  )\n}\n\nconst renderWithSpacing = (element: React.ReactNode, props) => {\n  const takesSpaceProps = isSpacePropsComponent(element)\n\n  return takesSpaceProps ? (\n    React.cloneElement(element as React.ReactElement<unknown>, props)\n  ) : (\n    <Div {...props}>{element}</Div>\n  )\n}\n\nexport type Props = ComponentProps & {\n  direction?: 'row' | 'column'\n  wrap?: boolean\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  divider?: 'space' | 'line'\n  /** Spacing between items inside */\n  spacing?:\n    | false\n    | 'xx-small'\n    | 'x-small'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'x-large'\n    | 'xx-large'\n  children: React.ReactNode\n}\n\nfunction FlexContainer(props: Props) {\n  const {\n    className,\n    children,\n    direction = 'column',\n    wrap = false,\n    justify = 'flex-start',\n    align = 'stretch',\n    divider = 'space',\n    spacing = 'small',\n  } = props\n\n  const cn = classnames(\n    'dnb-forms-flex-container',\n    direction && `dnb-forms-flex-container--direction-${direction}`,\n    justify && `dnb-forms-flex-container--justify-${justify}`,\n    align && `dnb-forms-flex-container--align-${align}`,\n    wrap && `dnb-forms-flex-container--wrap`,\n    divider && `dnb-forms-flex-container--divider-${divider}`,\n    spacing && `dnb-forms-flex-container--spacing-${spacing}`,\n    className\n  )\n  const childrenArray = React.Children.toArray(children)\n\n  return (\n    <Div className={cn} {...forwardSpaceProps(props)}>\n      {direction === 'column'\n        ? 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 previousChild = childrenArray?.[i - 1]\n            const currentIsHeading = isHeadingElement(child)\n            const previousWasHeading =\n              i > 0 && isHeadingElement(previousChild)\n\n            // Always set spacing between elements in the column layout on the top props, and 0 on bottom, to avoid\n            // having to divide spacing between both with smaller values.\n            const bottom = 0\n\n            if (\n              divider === 'line' &&\n              // No line above first element\n              !isFirst &&\n              // No line above/below headings\n              !previousWasHeading &&\n              !currentIsHeading\n            ) {\n              const spaceAboveLine =\n                getSpaceBottom(previousChild) ?? spacing\n              const top = getSpaceTop(child) ?? spacing\n\n              return (\n                <React.Fragment key={`element-${i}`}>\n                  <Space top={spaceAboveLine} />\n                  <hr className=\"dnb-forms-flex-container__hr\" />\n                  {renderWithSpacing(child, {\n                    space: { top, bottom },\n                    top,\n                    bottom,\n                  })}\n                </React.Fragment>\n              )\n            }\n\n            const top =\n              // No space above first element.\n              isFirst\n                ? 0\n                : // Since top space of current and bottom space of previous component is the same\n                  getSpaceTop(child) ??\n                  getSpaceBottom(previousChild) ??\n                  spacing\n\n            return renderWithSpacing(child, {\n              key: `element-${i}`,\n              space: { top, bottom },\n              top,\n              bottom,\n            })\n          })\n        : // TODO: Consider doing the same with spacing between horizontal items (direction = row) as vertical\n          children}\n    </Div>\n  )\n}\n\nFlexContainer._supportsEufemiaSpacingProps = true\nexport default FlexContainer\n"],"mappings":"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"}
+{"version":3,"file":"FlexContainer.js","names":["React","classnames","Space","Div","EufemiaElements","forwardSpaceProps","MainHeading","SubHeading","isHeadingElement","element","type","getSpaceTop","_element$props","_element$props2","isValidElement","props","top","space","undefined","getSpaceBottom","_element$props3","_element$props4","bottom","isEufemiaElement","Object","values","some","eufemiaElement","isSpacePropsComponent","_element$type","renderWithSpacing","takesSpaceProps","cloneElement","createElement","FlexContainer","className","children","direction","wrap","justify","align","divider","spacing","width","cn","childrenArray","Children","toArray","_extends","map","child","i","isFirst","previousChild","currentIsHeading","previousWasHeading","spaceAboveLine","Fragment","key","_hr","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Layout/FlexContainer.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Space } from '../../../components'\nimport { Div } from '../../../elements'\nimport * as EufemiaElements from '../../../elements'\nimport { SpaceType } from '../../../components/space/types'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport MainHeading from './MainHeading'\nimport SubHeading from './SubHeading'\n\nexport function isHeadingElement(element): boolean {\n  return element.type === MainHeading || element.type === SubHeading\n}\n\nconst getSpaceTop = (\n  element: React.ReactChild | React.ReactFragment | React.ReactPortal\n): SpaceType | undefined => {\n  if (!React.isValidElement(element)) {\n    return\n  }\n  return (\n    element.props?.top ??\n    (typeof element.props?.space === 'object'\n      ? element.props.space.top\n      : undefined)\n  )\n}\n\nconst getSpaceBottom = (\n  element: React.ReactChild | React.ReactFragment | React.ReactPortal\n): SpaceType | undefined => {\n  if (!React.isValidElement(element)) {\n    return\n  }\n  return (\n    element.props?.bottom ??\n    (typeof element.props?.space === 'object'\n      ? element.props.space.bottom\n      : undefined)\n  )\n}\n\nexport const isEufemiaElement = (element): boolean => {\n  return Object.values(EufemiaElements).some(\n    (eufemiaElement) => element?.type === eufemiaElement\n  )\n}\n\n/**\n * Is the requested element a component that can receive Eufemia space props (space, top, bottom, left and right)?\n */\nexport const isSpacePropsComponent = (\n  element: React.ReactNode\n): boolean => {\n  return (\n    (React.isValidElement(element) &&\n      element?.type?.['_supportsEufemiaSpacingProps'] === true) ||\n    isEufemiaElement(element)\n  )\n}\n\nconst renderWithSpacing = (element: React.ReactNode, props) => {\n  const takesSpaceProps = isSpacePropsComponent(element)\n\n  return takesSpaceProps ? (\n    React.cloneElement(element as React.ReactElement<unknown>, props)\n  ) : (\n    <Div {...props}>{element}</Div>\n  )\n}\n\nexport type Props = ComponentProps & {\n  direction?: 'row' | 'column'\n  wrap?: boolean\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  divider?: 'space' | 'line'\n  /** Spacing between items inside */\n  spacing?:\n    | false\n    | 'xx-small'\n    | 'x-small'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'x-large'\n    | 'xx-large'\n  width?: 'small' | 'medium' | 'large'\n  children: React.ReactNode\n}\n\nfunction FlexContainer(props: Props) {\n  const {\n    className,\n    children,\n    direction = 'column',\n    wrap = false,\n    justify = 'flex-start',\n    align = 'stretch',\n    divider = 'space',\n    spacing = 'small',\n    width,\n  } = props\n\n  const cn = classnames(\n    'dnb-forms-flex-container',\n    direction && `dnb-forms-flex-container--direction-${direction}`,\n    justify && `dnb-forms-flex-container--justify-${justify}`,\n    align && `dnb-forms-flex-container--align-${align}`,\n    wrap && `dnb-forms-flex-container--wrap`,\n    divider && `dnb-forms-flex-container--divider-${divider}`,\n    spacing && `dnb-forms-flex-container--spacing-${spacing}`,\n    width && `dnb-forms-flex-container--width-${width}`,\n    className\n  )\n  const childrenArray = React.Children.toArray(children)\n\n  return (\n    <Div className={cn} {...forwardSpaceProps(props)}>\n      {direction === 'column'\n        ? 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 previousChild = childrenArray?.[i - 1]\n            const currentIsHeading = isHeadingElement(child)\n            const previousWasHeading =\n              i > 0 && isHeadingElement(previousChild)\n\n            // Always set spacing between elements in the column layout on the top props, and 0 on bottom, to avoid\n            // having to divide spacing between both with smaller values.\n            const bottom = 0\n\n            if (\n              divider === 'line' &&\n              // No line above first element\n              !isFirst &&\n              // No line above/below headings\n              !previousWasHeading &&\n              !currentIsHeading\n            ) {\n              const spaceAboveLine =\n                getSpaceBottom(previousChild) ?? spacing\n              const top = getSpaceTop(child) ?? spacing\n\n              return (\n                <React.Fragment key={`element-${i}`}>\n                  <Space top={spaceAboveLine} />\n                  <hr className=\"dnb-forms-flex-container__hr\" />\n                  {renderWithSpacing(child, {\n                    space: { top, bottom },\n                    top,\n                    bottom,\n                  })}\n                </React.Fragment>\n              )\n            }\n\n            const top =\n              // No space above first element.\n              isFirst\n                ? 0\n                : // Since top space of current and bottom space of previous component is the same\n                  getSpaceTop(child) ??\n                  getSpaceBottom(previousChild) ??\n                  spacing\n\n            return renderWithSpacing(child, {\n              key: `element-${i}`,\n              space: { top, bottom },\n              top,\n              bottom,\n            })\n          })\n        : // TODO: Consider doing the same with spacing between horizontal items (direction = row) as vertical\n          children}\n    </Div>\n  )\n}\n\nFlexContainer._supportsEufemiaSpacingProps = true\nexport default FlexContainer\n"],"mappings":"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"}

package/es/extensions/forms/Layout/FlexItem.d.ts

@@ -3,6 +3,7 @@ import type { ComponentProps } from '../component-types';
 export type Props = ComponentProps & {
     grow?: boolean;
     shrink?: boolean;
+    width?: 'small' | 'medium' | 'large';
     children: React.ReactNode;
 };
 declare function FlexItem(props: Props): import("react/jsx-runtime").JSX.Element;

package/es/extensions/forms/Layout/FlexItem.js

@@ -8,9 +8,10 @@ function FlexItem(props) {
     className,
     grow,
     shrink,
+    width,
     children
   } = props;
-  const cn = classnames('dnb-forms-flex-item', className, grow && 'dnb-forms-flex-item--grow', shrink && 'dnb-forms-flex-item--shrink');
+  const cn = classnames('dnb-forms-flex-item', className, grow && 'dnb-forms-flex-item--grow', shrink && 'dnb-forms-flex-item--shrink', width && `dnb-forms-flex-item--width-${width}`);
   return React.createElement(Div, _extends({
     className: cn
   }, forwardSpaceProps(props)), children);

package/es/extensions/forms/Layout/FlexItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexItem.js","names":["React","classnames","Div","forwardSpaceProps","FlexItem","props","className","grow","shrink","children","cn","createElement","_extends","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Layout/FlexItem.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Div } from '../../../elements'\nimport type { ComponentProps } from '../component-types'\nimport { forwardSpaceProps } from '../utils'\n\nexport type Props = ComponentProps & {\n  grow?: boolean\n  shrink?: boolean\n  children: React.ReactNode\n}\n\nfunction FlexItem(props: Props) {\n  const { className, grow, shrink, children } = props\n  const cn = classnames(\n    'dnb-forms-flex-item',\n    grow && 'dnb-forms-flex-item--grow',\n    shrink && 'dnb-forms-flex-item--shrink',\n    className\n  )\n\n  return (\n    <Div className={cn} {...forwardSpaceProps(props)}>\n      {children}\n    </Div>\n  )\n}\n\nFlexItem._supportsEufemiaSpacingProps = true\nexport default FlexItem\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,GAAG,QAAQ,mBAAmB;AAEvC,SAASC,iBAAiB,QAAQ,UAAU;AAQ5C,SAASC,QAAQA,CAACC,KAAY,EAAE;EAC9B,MAAM;IAAEC,SAAS;IAAEC,IAAI;IAAEC,MAAM;IAAEC;EAAS,CAAC,GAAGJ,KAAK;EACnD,MAAMK,EAAE,GAAGT,UAAU,CACnB,qBAAqB,EAGrBK,SAAS,EAFTC,IAAI,IAAI,2BAA2B,EACnCC,MAAM,IAAI,6BAEZ,CAAC;EAED,OACER,KAAA,CAAAW,aAAA,CAACT,GAAG,EAAAU,QAAA;IAACN,SAAS,EAAEI;EAAG,GAAKP,iBAAiB,CAACE,KAAK,CAAC,GAC7CI,QACE,CAAC;AAEV;AAEAL,QAAQ,CAACS,4BAA4B,GAAG,IAAI;AAC5C,eAAeT,QAAQ"}
+{"version":3,"file":"FlexItem.js","names":["React","classnames","Div","forwardSpaceProps","FlexItem","props","className","grow","shrink","width","children","cn","createElement","_extends","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Layout/FlexItem.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Div } from '../../../elements'\nimport type { ComponentProps } from '../component-types'\nimport { forwardSpaceProps } from '../utils'\n\nexport type Props = ComponentProps & {\n  grow?: boolean\n  shrink?: boolean\n  width?: 'small' | 'medium' | 'large'\n  children: React.ReactNode\n}\n\nfunction FlexItem(props: Props) {\n  const { className, grow, shrink, width, children } = props\n  const cn = classnames(\n    'dnb-forms-flex-item',\n    grow && 'dnb-forms-flex-item--grow',\n    shrink && 'dnb-forms-flex-item--shrink',\n    width && `dnb-forms-flex-item--width-${width}`,\n    className\n  )\n\n  return (\n    <Div className={cn} {...forwardSpaceProps(props)}>\n      {children}\n    </Div>\n  )\n}\n\nFlexItem._supportsEufemiaSpacingProps = true\nexport default FlexItem\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,GAAG,QAAQ,mBAAmB;AAEvC,SAASC,iBAAiB,QAAQ,UAAU;AAS5C,SAASC,QAAQA,CAACC,KAAY,EAAE;EAC9B,MAAM;IAAEC,SAAS;IAAEC,IAAI;IAAEC,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAC,GAAGL,KAAK;EAC1D,MAAMM,EAAE,GAAGV,UAAU,CACnB,qBAAqB,EAIrBK,SAAS,EAHTC,IAAI,IAAI,2BAA2B,EACnCC,MAAM,IAAI,6BAA6B,EACvCC,KAAK,IAAK,8BAA6BA,KAAM,EAE/C,CAAC;EAED,OACET,KAAA,CAAAY,aAAA,CAACV,GAAG,EAAAW,QAAA;IAACP,SAAS,EAAEK;EAAG,GAAKR,iBAAiB,CAACE,KAAK,CAAC,GAC7CK,QACE,CAAC;AAEV;AAEAN,QAAQ,CAACU,4BAA4B,GAAG,IAAI;AAC5C,eAAeV,QAAQ"}

package/es/extensions/forms/Layout/SubHeading.js

@@ -10,7 +10,8 @@ function SubHeading(props) {
   } = props;
   return React.createElement(Heading, _extends({
     className: classnames('dnb-forms-sub-heading', className),
-    level: "3"
+    level: "3",
+    size: "medium"
   }, forwardSpaceProps(props)), children);
 }
 SubHeading._supportsEufemiaSpacingProps = true;

package/es/extensions/forms/Layout/SubHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubHeading.js","names":["React","classnames","Heading","forwardSpaceProps","SubHeading","props","className","children","createElement","_extends","level","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Layout/SubHeading.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Heading } from '../../../components'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\n\nexport type Props = ComponentProps & {\n  children?: React.ReactNode\n}\n\nfunction SubHeading(props: Props) {\n  const { className, children } = props\n  return (\n    <Heading\n      className={classnames('dnb-forms-sub-heading', className)}\n      level=\"3\"\n      {...forwardSpaceProps(props)}\n    >\n      {children}\n    </Heading>\n  )\n}\n\nSubHeading._supportsEufemiaSpacingProps = true\nexport default SubHeading\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,iBAAiB,QAAQ,UAAU;AAO5C,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAM;IAAEC,SAAS;IAAEC;EAAS,CAAC,GAAGF,KAAK;EACrC,OACEL,KAAA,CAAAQ,aAAA,CAACN,OAAO,EAAAO,QAAA;IACNH,SAAS,EAAEL,UAAU,CAAC,uBAAuB,EAAEK,SAAS,CAAE;IAC1DI,KAAK,EAAC;EAAG,GACLP,iBAAiB,CAACE,KAAK,CAAC,GAE3BE,QACM,CAAC;AAEd;AAEAH,UAAU,CAACO,4BAA4B,GAAG,IAAI;AAC9C,eAAeP,UAAU"}
+{"version":3,"file":"SubHeading.js","names":["React","classnames","Heading","forwardSpaceProps","SubHeading","props","className","children","createElement","_extends","level","size","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/Layout/SubHeading.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Heading } from '../../../components'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\n\nexport type Props = ComponentProps & {\n  children?: React.ReactNode\n}\n\nfunction SubHeading(props: Props) {\n  const { className, children } = props\n  return (\n    <Heading\n      className={classnames('dnb-forms-sub-heading', className)}\n      level=\"3\"\n      size=\"medium\"\n      {...forwardSpaceProps(props)}\n    >\n      {children}\n    </Heading>\n  )\n}\n\nSubHeading._supportsEufemiaSpacingProps = true\nexport default SubHeading\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,iBAAiB,QAAQ,UAAU;AAO5C,SAASC,UAAUA,CAACC,KAAY,EAAE;EAChC,MAAM;IAAEC,SAAS;IAAEC;EAAS,CAAC,GAAGF,KAAK;EACrC,OACEL,KAAA,CAAAQ,aAAA,CAACN,OAAO,EAAAO,QAAA;IACNH,SAAS,EAAEL,UAAU,CAAC,uBAAuB,EAAEK,SAAS,CAAE;IAC1DI,KAAK,EAAC,GAAG;IACTC,IAAI,EAAC;EAAQ,GACTR,iBAAiB,CAACE,KAAK,CAAC,GAE3BE,QACM,CAAC;AAEd;AAEAH,UAAU,CAACQ,4BAA4B,GAAG,IAAI;AAC9C,eAAeR,UAAU"}

package/es/extensions/forms/Layout/style/dnb-card.css

@@ -1,8 +1,8 @@
 .dnb-forms-card {
-  background-color: var(--color-white);
-  border: 4px solid #F2F2F5;
-  border-radius: 0.5rem;
   padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium);
+  background-color: var(--color-white);
+  border: 0.25rem solid var(--color-pistachio);
+  border-radius: 0.75rem;
 }
 .dnb-forms-card__heading {
   font-size: var(--font-size-basis);

package/es/extensions/forms/Layout/style/dnb-card.min.css

@@ -1 +1 @@
-.dnb-forms-card{background-color:var(--color-white);border:4px solid #f2f2f5;border-radius:.5rem;padding:var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium)}.dnb-forms-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-forms-card+.dnb-forms-card__heading{margin-top:var(--spacing-small)}
+.dnb-forms-card{background-color:var(--color-white);border:.25rem solid var(--color-pistachio);border-radius:.75rem;padding:var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium)}.dnb-forms-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-forms-card+.dnb-forms-card__heading{margin-top:var(--spacing-small)}

package/es/extensions/forms/Layout/style/dnb-card.scss

@@ -1,9 +1,11 @@
 .dnb-forms-card {
+  padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-large)
+    var(--spacing-medium);
+
   background-color: var(--color-white);
-  border: 4px solid #F2F2F5;
-  border-radius: 0.5rem;
-  padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium);
-  
+  border: 0.25rem solid var(--color-pistachio);
+  border-radius: 0.75rem;
+
   &__heading {
     font-size: var(--font-size-basis);
     font-weight: var(--font-weight-medium);

package/es/extensions/forms/Layout/style/dnb-flex-container.css

@@ -60,4 +60,13 @@
   grid-column-gap: var(--spacing-medium);
   -moz-column-gap: var(--spacing-medium);
        column-gap: var(--spacing-medium);
+}
+.dnb-forms-flex-container--width-small {
+  width: 5rem;
+}
+.dnb-forms-flex-container--width-medium {
+  width: 11rem;
+}
+.dnb-forms-flex-container--width-large {
+  width: 21rem;
 }

package/es/extensions/forms/Layout/style/dnb-flex-container.min.css

@@ -1 +1 @@
-.dnb-forms-flex-container{display:flex}.dnb-forms-flex-container--direction-row{flex-direction:row}.dnb-forms-flex-container--direction-column{flex-direction:column}.dnb-forms-flex-container--justify-flex-start{justify-content:flex-start}.dnb-forms-flex-container--justify-flex-end{justify-content:flex-end}.dnb-forms-flex-container--justify-center{justify-content:center}.dnb-forms-flex-container--justify-space-between{justify-content:space-between}.dnb-forms-flex-container--justify-space-around{justify-content:space-around}.dnb-forms-flex-container--justify-space-evenly{justify-content:space-evenly}.dnb-forms-flex-container--align-flex-start{align-items:flex-start}.dnb-forms-flex-container--align-flex-end{align-items:flex-end}.dnb-forms-flex-container--align-center{align-items:center}.dnb-forms-flex-container--align-stretch{align-items:stretch}.dnb-forms-flex-container--align-baseline{align-items:baseline}.dnb-forms-flex-container--wrap{flex-wrap:wrap}.dnb-forms-flex-container__hr{border:none;border-top:1px solid var(--color-black-8);height:0;margin:0;padding:0;width:100%}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-small{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small)}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-medium{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium)}
+.dnb-forms-flex-container{display:flex}.dnb-forms-flex-container--direction-row{flex-direction:row}.dnb-forms-flex-container--direction-column{flex-direction:column}.dnb-forms-flex-container--justify-flex-start{justify-content:flex-start}.dnb-forms-flex-container--justify-flex-end{justify-content:flex-end}.dnb-forms-flex-container--justify-center{justify-content:center}.dnb-forms-flex-container--justify-space-between{justify-content:space-between}.dnb-forms-flex-container--justify-space-around{justify-content:space-around}.dnb-forms-flex-container--justify-space-evenly{justify-content:space-evenly}.dnb-forms-flex-container--align-flex-start{align-items:flex-start}.dnb-forms-flex-container--align-flex-end{align-items:flex-end}.dnb-forms-flex-container--align-center{align-items:center}.dnb-forms-flex-container--align-stretch{align-items:stretch}.dnb-forms-flex-container--align-baseline{align-items:baseline}.dnb-forms-flex-container--wrap{flex-wrap:wrap}.dnb-forms-flex-container__hr{border:none;border-top:1px solid var(--color-black-8);height:0;margin:0;padding:0;width:100%}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-small{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small)}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-medium{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium)}.dnb-forms-flex-container--width-small{width:5rem}.dnb-forms-flex-container--width-medium{width:11rem}.dnb-forms-flex-container--width-large{width:21rem}

package/es/extensions/forms/Layout/style/dnb-flex-container.scss

@@ -1,3 +1,5 @@
+@import '../../variables.scss';
+
 .dnb-forms-flex-container {
   display: flex;
 
@@ -81,4 +83,16 @@
   &--direction-row.dnb-forms-flex-container--spacing-medium {
     column-gap: var(--spacing-medium);
   }
+
+  &--width-small {
+    width: $forms-field-width-small;
+  }
+
+  &--width-medium {
+    width: $forms-field-width-medium;
+  }
+
+  &--width-large {
+    width: $forms-field-width-large;
+  }
 }

package/es/extensions/forms/Layout/style/dnb-flex-item.css

@@ -3,4 +3,13 @@
 }
 .dnb-forms-flex-item--shrink {
   flex-shrink: 1;
+}
+.dnb-forms-flex-item--width-small {
+  width: 5rem;
+}
+.dnb-forms-flex-item--width-medium {
+  width: 11rem;
+}
+.dnb-forms-flex-item--width-large {
+  width: 21rem;
 }

package/es/extensions/forms/Layout/style/dnb-flex-item.min.css

@@ -1 +1 @@
-.dnb-forms-flex-item--grow{flex-grow:1}.dnb-forms-flex-item--shrink{flex-shrink:1}
+.dnb-forms-flex-item--grow{flex-grow:1}.dnb-forms-flex-item--shrink{flex-shrink:1}.dnb-forms-flex-item--width-small{width:5rem}.dnb-forms-flex-item--width-medium{width:11rem}.dnb-forms-flex-item--width-large{width:21rem}

package/es/extensions/forms/Layout/style/dnb-flex-item.scss

@@ -1,3 +1,5 @@
+@import '../../variables.scss';
+
 .dnb-forms-flex-item {
   &--grow {
     flex-grow: 1;
@@ -6,4 +8,16 @@
   &--shrink {
     flex-shrink: 1;
   }
+
+  &--width-small {
+    width: $forms-field-width-small;
+  }
+
+  &--width-medium {
+    width: $forms-field-width-medium;
+  }
+
+  &--width-large {
+    width: $forms-field-width-large;
+  }
 }

package/es/extensions/forms/StepsLayout/StepsLayout.js

@@ -55,7 +55,7 @@ function StepsLayout(props) {
   }, [dataContext, scrollTopOnStepChange, onStepChange]);
   const stepIndicatorData = React.Children.map(children, child => {
     if (!React.isValidElement(child) || child.type !== Step) {
-      throw new Error('Only Step can be children of Steps');
+      throw new Error('Only Step can be children of StepsLayout');
     }
     return child.props.title ?? 'Title missing';
   });

package/es/extensions/forms/StepsLayout/StepsLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepsLayout.js","names":["React","useContext","useState","useCallback","classnames","Div","StepIndicator","makeUniqueId","forwardSpaceProps","DataContext","Step","StepsContext","NextButton","PreviousButton","Buttons","StepsLayout","props","className","id","mode","scrollTopOnStepChange","initialActiveIndex","onStepChange","children","dataContext","activeIndex","setActiveIndex","handlePrevious","_window","window","scrollTo","top","behavior","handleNext","hasErrors","_window2","setShowAllErrors","stepIndicatorData","Children","map","child","isValidElement","type","Error","title","handleChange","current_step","createElement","Provider","value","_extends","Sidebar","sidebar_id","bottom","data","no_animation","on_change","i","cloneElement","index","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/StepsLayout/StepsLayout.tsx"],"sourcesContent":["import React, { useContext, useState, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Div } from '../../../elements'\nimport { StepIndicator } from '../../../components'\nimport { makeUniqueId } from '../../../shared/component-helper'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport DataContext from '../DataContext/Context'\nimport Step, { Props as StepProps } from './Step'\nimport StepsContext from './StepsContext'\nimport NextButton from './NextButton'\nimport PreviousButton from './PreviousButton'\nimport Buttons from './Buttons'\n\nexport type Props = ComponentProps & {\n  id?: string\n  mode?: 'static' | 'strict' | 'loose'\n  scrollTopOnStepChange?: boolean\n  initialActiveIndex?: number\n  onStepChange?: (index: number) => void\n  children: React.ReactNode\n}\n\nfunction StepsLayout(props: Props) {\n  const {\n    className,\n    id = makeUniqueId(),\n    mode = 'loose',\n    scrollTopOnStepChange,\n    initialActiveIndex = 0,\n    onStepChange,\n    children,\n  } = props\n  const dataContext = useContext(DataContext)\n  const [activeIndex, setActiveIndex] =\n    useState<number>(initialActiveIndex)\n\n  const handlePrevious = useCallback(() => {\n    setActiveIndex((activeIndex) => {\n      onStepChange?.(activeIndex - 1)\n      return activeIndex - 1\n    })\n    if (scrollTopOnStepChange) {\n      window?.scrollTo({ top: 0, behavior: 'smooth' })\n    }\n  }, [scrollTopOnStepChange, onStepChange])\n\n  const handleNext = useCallback(() => {\n    if (!dataContext.hasErrors()) {\n      setActiveIndex((activeIndex) => {\n        onStepChange?.(activeIndex + 1)\n        return activeIndex + 1\n      })\n      if (scrollTopOnStepChange) {\n        window?.scrollTo({ top: 0, behavior: 'smooth' })\n      }\n    } else {\n      dataContext.setShowAllErrors(true)\n    }\n  }, [dataContext, scrollTopOnStepChange, onStepChange])\n\n  const stepIndicatorData = React.Children.map(children, (child) => {\n    if (!React.isValidElement(child) || child.type !== Step) {\n      throw new Error('Only Step can be children of Steps')\n    }\n    return child.props.title ?? 'Title missing'\n  }) as string[]\n\n  const handleChange = useCallback(({ current_step }) => {\n    setActiveIndex(current_step)\n  }, [])\n\n  return (\n    <StepsContext.Provider\n      value={{\n        activeIndex,\n        handlePrevious,\n        handleNext,\n      }}\n    >\n      <Div\n        className={classnames('dnb-forms-steps-layout', className)}\n        {...forwardSpaceProps(props)}\n      >\n        <aside className=\"dnb-forms-steps-layout__sidebar\">\n          <StepIndicator.Sidebar sidebar_id={id} />\n          <StepIndicator\n            bottom\n            current_step={activeIndex}\n            data={stepIndicatorData}\n            mode={mode}\n            no_animation\n            on_change={handleChange}\n            sidebar_id={id}\n            title=\"\"\n          />\n        </aside>\n        <div className=\"dnb-forms-steps-layout__contents\">\n          {React.Children.map(children, (child, i) => {\n            if (React.isValidElement(child) && child.type === Step) {\n              return React.cloneElement(\n                child as React.ReactElement<StepProps>,\n                {\n                  index: i,\n                }\n              )\n            }\n            return child\n          })}\n        </div>\n      </Div>\n    </StepsContext.Provider>\n  )\n}\n\nStepsLayout._supportsEufemiaSpacingProps = true\n\nStepsLayout.Step = Step\nStepsLayout.NextButton = NextButton\nStepsLayout.PreviousButton = PreviousButton\nStepsLayout.Buttons = Buttons\n\nexport default StepsLayout\n"],"mappings":"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"}
+{"version":3,"file":"StepsLayout.js","names":["React","useContext","useState","useCallback","classnames","Div","StepIndicator","makeUniqueId","forwardSpaceProps","DataContext","Step","StepsContext","NextButton","PreviousButton","Buttons","StepsLayout","props","className","id","mode","scrollTopOnStepChange","initialActiveIndex","onStepChange","children","dataContext","activeIndex","setActiveIndex","handlePrevious","_window","window","scrollTo","top","behavior","handleNext","hasErrors","_window2","setShowAllErrors","stepIndicatorData","Children","map","child","isValidElement","type","Error","title","handleChange","current_step","createElement","Provider","value","_extends","Sidebar","sidebar_id","bottom","data","no_animation","on_change","i","cloneElement","index","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/StepsLayout/StepsLayout.tsx"],"sourcesContent":["import React, { useContext, useState, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Div } from '../../../elements'\nimport { StepIndicator } from '../../../components'\nimport { makeUniqueId } from '../../../shared/component-helper'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport DataContext from '../DataContext/Context'\nimport Step, { Props as StepProps } from './Step'\nimport StepsContext from './StepsContext'\nimport NextButton from './NextButton'\nimport PreviousButton from './PreviousButton'\nimport Buttons from './Buttons'\n\nexport type Props = ComponentProps & {\n  id?: string\n  mode?: 'static' | 'strict' | 'loose'\n  scrollTopOnStepChange?: boolean\n  initialActiveIndex?: number\n  onStepChange?: (index: number) => void\n  children: React.ReactNode\n}\n\nfunction StepsLayout(props: Props) {\n  const {\n    className,\n    id = makeUniqueId(),\n    mode = 'loose',\n    scrollTopOnStepChange,\n    initialActiveIndex = 0,\n    onStepChange,\n    children,\n  } = props\n  const dataContext = useContext(DataContext)\n  const [activeIndex, setActiveIndex] =\n    useState<number>(initialActiveIndex)\n\n  const handlePrevious = useCallback(() => {\n    setActiveIndex((activeIndex) => {\n      onStepChange?.(activeIndex - 1)\n      return activeIndex - 1\n    })\n    if (scrollTopOnStepChange) {\n      window?.scrollTo({ top: 0, behavior: 'smooth' })\n    }\n  }, [scrollTopOnStepChange, onStepChange])\n\n  const handleNext = useCallback(() => {\n    if (!dataContext.hasErrors()) {\n      setActiveIndex((activeIndex) => {\n        onStepChange?.(activeIndex + 1)\n        return activeIndex + 1\n      })\n      if (scrollTopOnStepChange) {\n        window?.scrollTo({ top: 0, behavior: 'smooth' })\n      }\n    } else {\n      dataContext.setShowAllErrors(true)\n    }\n  }, [dataContext, scrollTopOnStepChange, onStepChange])\n\n  const stepIndicatorData = React.Children.map(children, (child) => {\n    if (!React.isValidElement(child) || child.type !== Step) {\n      throw new Error('Only Step can be children of StepsLayout')\n    }\n    return child.props.title ?? 'Title missing'\n  }) as string[]\n\n  const handleChange = useCallback(({ current_step }) => {\n    setActiveIndex(current_step)\n  }, [])\n\n  return (\n    <StepsContext.Provider\n      value={{\n        activeIndex,\n        handlePrevious,\n        handleNext,\n      }}\n    >\n      <Div\n        className={classnames('dnb-forms-steps-layout', className)}\n        {...forwardSpaceProps(props)}\n      >\n        <aside className=\"dnb-forms-steps-layout__sidebar\">\n          <StepIndicator.Sidebar sidebar_id={id} />\n          <StepIndicator\n            bottom\n            current_step={activeIndex}\n            data={stepIndicatorData}\n            mode={mode}\n            no_animation\n            on_change={handleChange}\n            sidebar_id={id}\n            title=\"\"\n          />\n        </aside>\n        <div className=\"dnb-forms-steps-layout__contents\">\n          {React.Children.map(children, (child, i) => {\n            if (React.isValidElement(child) && child.type === Step) {\n              return React.cloneElement(\n                child as React.ReactElement<StepProps>,\n                {\n                  index: i,\n                }\n              )\n            }\n            return child\n          })}\n        </div>\n      </Div>\n    </StepsContext.Provider>\n  )\n}\n\nStepsLayout._supportsEufemiaSpacingProps = true\n\nStepsLayout.Step = Step\nStepsLayout.NextButton = NextButton\nStepsLayout.PreviousButton = PreviousButton\nStepsLayout.Buttons = Buttons\n\nexport default StepsLayout\n"],"mappings":"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"}

package/es/extensions/forms/StepsLayout/style/dnb-steps-layout.css

@@ -4,9 +4,9 @@
 .dnb-forms-steps-layout {
   display: flex;
   flex-flow: row wrap;
-  grid-column-gap: 3rem;
-  -moz-column-gap: 3rem;
-       column-gap: 3rem;
+  grid-column-gap: var(--spacing-medium);
+  -moz-column-gap: var(--spacing-medium);
+       column-gap: var(--spacing-medium);
 }
 @media (max-width: 60em) {
   .dnb-forms-steps-layout {
@@ -17,9 +17,15 @@
 }
 .dnb-forms-steps-layout__sidebar {
   flex: 0;
-  min-width: 320px;
+  min-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar {
+  max-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item {
+  min-width: 336px;
 }
 .dnb-forms-steps-layout__contents {
   flex: 1;
-  min-width: 400px;
+  min-width: 25rem;
 }

package/es/extensions/forms/StepsLayout/style/dnb-steps-layout.min.css

@@ -1 +1 @@
-.dnb-forms-steps-layout{grid-column-gap:3rem;-moz-column-gap:3rem;column-gap:3rem;display:flex;flex-flow:row wrap}@media (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}}.dnb-forms-steps-layout__sidebar{flex:0;min-width:320px}.dnb-forms-steps-layout__contents{flex:1;min-width:400px}
+.dnb-forms-steps-layout{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}@media (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}}.dnb-forms-steps-layout__sidebar{flex:0;min-width:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar{max-width:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item{min-width:336px}.dnb-forms-steps-layout__contents{flex:1;min-width:25rem}

package/es/extensions/forms/StepsLayout/style/dnb-steps-layout.scss

@@ -3,7 +3,7 @@
 .dnb-forms-steps-layout {
   display: flex;
   flex-flow: row wrap;
-  column-gap: 3rem;
+  column-gap: var(--spacing-medium);
 
   @media (max-width: map-get($breakpoints, 'medium')) {
     flex-direction: column;
@@ -13,11 +13,18 @@
 
   &__sidebar {
     flex: 0;
-    min-width: 320px;
+    min-width: 21rem;
+
+    .dnb-step-indicator__sidebar {
+      max-width: 21rem;
+    }
+    .dnb-step-indicator__sidebar .dnb-step-indicator__item {
+      min-width: 336px;
+    }
   }
 
   &__contents {
     flex: 1;
-    min-width: 400px;
+    min-width: 25rem;
   }
 }

package/es/extensions/forms/ValueBlock/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default"],"sources":["../../../../../src/extensions/forms/ValueBlock/index.ts"],"sourcesContent":["export { default  } from './ValueBlock';\n"],"mappings":"AAAA,SAASA,OAAO,QAAS,cAAc"}
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../../../src/extensions/forms/ValueBlock/index.ts"],"sourcesContent":["export { default } from './ValueBlock'\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,cAAc"}

package/es/extensions/forms/field-types.d.ts

@@ -3,7 +3,7 @@ import { FormError } from './types';
 interface DefaultErrorMessages {
     required?: string;
 }
-export interface FieldProps<Value = unknown, EmptyValue = undefined, ErrorMessages extends {
+export interface FieldProps<Value = unknown, EmptyValue = undefined | string | number, ErrorMessages extends {
     required?: string;
 } = DefaultErrorMessages> {
     /** ID added to the actual field component, and linked to the label via for-attribute */
@@ -49,4 +49,10 @@ export interface FieldProps<Value = unknown, EmptyValue = undefined, ErrorMessag
     toInput?: (external: Value | undefined) => any;
     fromInput?: (...args: any[]) => Value | undefined;
 }
+export interface FieldHelpProps {
+    help?: {
+        title?: string;
+        contents?: string;
+    };
+}
 export {};

package/es/extensions/forms/field-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-types.js","names":[],"sources":["../../../../src/extensions/forms/field-types.ts"],"sourcesContent":["import { JSONSchema7 } from 'json-schema'\nimport { FormError } from './types'\ninterface DefaultErrorMessages {\n  required?: string\n}\n\nexport interface FieldProps<\n  Value = unknown,\n  EmptyValue = undefined,\n  ErrorMessages extends { required?: string } = DefaultErrorMessages\n> {\n  /** ID added to the actual field component, and linked to the label via for-attribute */\n  id?: string\n  layout?: 'horizontal' | 'vertical'\n  /** Main label text */\n  label?: string\n  /** A more discreet text displayed beside the label (i.e for \"(optional)\") */\n  labelDescription?: string\n  /** Secondary information displayed at the end of the label line (i.e character counter) */\n  labelSecondary?: string\n  /** Text showing in place of the value if no value is given */\n  placeholder?: string\n  /** JSON Pointer for where the data for this field is located in the source dataset */\n  path?: string\n  value?: Value\n  info?: Error | FormError | string\n  warning?: Error | FormError | string\n  error?: Error | FormError\n  disabled?: boolean\n  onFocus?: (value: Value | EmptyValue) => void\n  onBlur?: (value: Value | EmptyValue) => void\n  onChange?: (value: Value | EmptyValue) => void\n  emptyValue?: EmptyValue\n  // Validation\n  required?: boolean\n  schema?: JSONSchema7\n  validator?: (\n    value: Value | EmptyValue\n  ) => Error | undefined | Promise<Error | undefined>\n  onBlurValidator?: (\n    value: Value | EmptyValue\n  ) => Error | undefined | Promise<Error | undefined>\n  /**\n   * Should error messages based on validation be shown initially (from given value-prop or source data)\n   * before the user interacts with the field?\n   * @default false\n   * */\n  validateInitially?: boolean\n  /**\n   * Should error messages be shown when touching (like focusing a field and blurring) without having changed\n   * the value? So the user did not introduce a new error, but it was invalid based on validation initially.\n   */\n  validateUnchanged?: boolean\n  /** Should validation be done while writing, not just when blurring the field? */\n  continuousValidation?: boolean\n  errorMessages?: ErrorMessages\n  // Derivatives\n  toInput?: (external: Value | undefined) => any\n  fromInput?: (...args: any[]) => Value | undefined\n}\n"],"mappings":""}
+{"version":3,"file":"field-types.js","names":[],"sources":["../../../../src/extensions/forms/field-types.ts"],"sourcesContent":["import { JSONSchema7 } from 'json-schema'\nimport { FormError } from './types'\ninterface DefaultErrorMessages {\n  required?: string\n}\n\nexport interface FieldProps<\n  Value = unknown,\n  EmptyValue = undefined | string | number,\n  ErrorMessages extends { required?: string } = DefaultErrorMessages,\n> {\n  /** ID added to the actual field component, and linked to the label via for-attribute */\n  id?: string\n  layout?: 'horizontal' | 'vertical'\n  /** Main label text */\n  label?: string\n  /** A more discreet text displayed beside the label (i.e for \"(optional)\") */\n  labelDescription?: string\n  /** Secondary information displayed at the end of the label line (i.e character counter) */\n  labelSecondary?: string\n  /** Text showing in place of the value if no value is given */\n  placeholder?: string\n  /** JSON Pointer for where the data for this field is located in the source dataset */\n  path?: string\n  value?: Value\n  info?: Error | FormError | string\n  warning?: Error | FormError | string\n  error?: Error | FormError\n  disabled?: boolean\n  onFocus?: (value: Value | EmptyValue) => void\n  onBlur?: (value: Value | EmptyValue) => void\n  onChange?: (value: Value | EmptyValue) => void\n  emptyValue?: EmptyValue\n  // Validation\n  required?: boolean\n  schema?: JSONSchema7\n  validator?: (\n    value: Value | EmptyValue\n  ) => Error | undefined | Promise<Error | undefined>\n  onBlurValidator?: (\n    value: Value | EmptyValue\n  ) => Error | undefined | Promise<Error | undefined>\n  /**\n   * Should error messages based on validation be shown initially (from given value-prop or source data)\n   * before the user interacts with the field?\n   * @default false\n   * */\n  validateInitially?: boolean\n  /**\n   * Should error messages be shown when touching (like focusing a field and blurring) without having changed\n   * the value? So the user did not introduce a new error, but it was invalid based on validation initially.\n   */\n  validateUnchanged?: boolean\n  /** Should validation be done while writing, not just when blurring the field? */\n  continuousValidation?: boolean\n  errorMessages?: ErrorMessages\n  // Derivatives\n  toInput?: (external: Value | undefined) => any\n  fromInput?: (...args: any[]) => Value | undefined\n}\n\nexport interface FieldHelpProps {\n  help?: {\n    title?: string\n    contents?: string\n  }\n}\n"],"mappings":""}