@dnb/eufemia 10.51.1 → 10.51.2

package/components/badge/Badge.js

@@ -1,8 +1,8 @@
 "use client";
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["label", "className", "children", "skeleton", "horizontal", "vertical", "content", "variant"];
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["label", "className", "children", "skeleton", "horizontal", "vertical", "content", "variant", "context"];
 import React from 'react';
 import classnames from 'classnames';
 import { createSpacingClasses } from '../space/SpacingHelper';
@@ -20,11 +20,31 @@ export const defaultProps = {
   variant: 'information'
 };
 function Badge(localProps) {
-  var _span;
   const context = React.useContext(Context);
   const allProps = extendPropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.Badge, {
     skeleton: context === null || context === void 0 ? void 0 : context.skeleton
   });
+  const {
+    children
+  } = allProps;
+  if (children) {
+    return React.createElement(BadgeRoot, null, children, React.createElement(BadgeElem, _extends({
+      context: context
+    }, allProps)));
+  }
+  return React.createElement(BadgeElem, _extends({
+    context: context
+  }, allProps));
+}
+function BadgeRoot(_ref) {
+  let {
+    children
+  } = _ref;
+  return React.createElement("span", {
+    className: "dnb-badge__root"
+  }, children);
+}
+function BadgeElem(props) {
   const {
       label,
       className,
@@ -33,42 +53,29 @@ function Badge(localProps) {
       horizontal,
       vertical,
       content: contentProp,
-      variant
-    } = allProps,
-    props = _objectWithoutProperties(allProps, _excluded);
-  validateDOMAttributes(allProps, props);
-  if (children) {
-    return React.createElement(BadgeRoot, null, children, React.createElement(BadgeElem, null));
-  }
-  return React.createElement(BadgeElem, null);
-  function BadgeRoot(_ref) {
-    let {
-      children
-    } = _ref;
-    return React.createElement("span", {
-      className: "dnb-badge__root"
-    }, children);
+      variant,
+      context
+    } = props,
+    restProps = _objectWithoutProperties(props, _excluded);
+  validateDOMAttributes(props, restProps);
+  const skeletonClasses = createSkeletonClass('shape', skeleton, context);
+  const spacingClasses = createSpacingClasses(props);
+  const contentIsNum = typeof contentProp === 'number';
+  const variantIsNotification = variant === 'notification';
+  const content = variantIsNotification && contentIsNum && contentProp > 9 ? '9+' : contentProp;
+  if (variantIsNotification && !contentIsNum) {
+    warn(`Type of content should be a number: A notification badge is best suited to display content of type number.`);
   }
-  function BadgeElem() {
-    const skeletonClasses = createSkeletonClass('shape', skeleton, context);
-    const spacingClasses = createSpacingClasses(allProps);
-    const contentIsNum = typeof contentProp === 'number';
-    const variantIsNotification = variant === 'notification';
-    const content = variantIsNotification && contentIsNum && contentProp > 9 ? '9+' : contentProp;
-    if (variantIsNotification && !contentIsNum) {
-      warn(`Type of content should be a number: A notification badge is best suited to display content of type number.`);
-    }
-    if (!label && contentIsNum) {
-      warn(`Label required: A Badge with a number as content requires a label describing the content of the badge. This is to ensure correct semantic and accessibility.`);
-    }
-    const isInline = !children && content;
-    return React.createElement("span", _extends({
-      role: "status",
-      className: classnames(`dnb-badge dnb-badge--variant-${variant}`, skeletonClasses, spacingClasses, className, horizontal && `dnb-badge--horizontal-${horizontal}`, vertical && `dnb-badge--vertical-${vertical}`, isInline && 'dnb-badge--inline')
-    }, props), label && (_span || (_span = React.createElement("span", {
-      className: "dnb-sr-only"
-    }, label, " "))), content);
+  if (!label && contentIsNum) {
+    warn(`Label required: A Badge with a number as content requires a label describing the content of the badge. This is to ensure correct semantic and accessibility.`);
   }
+  const isInline = !children && content;
+  return React.createElement("span", _extends({
+    role: "status",
+    className: classnames(`dnb-badge dnb-badge--variant-${variant}`, skeletonClasses, spacingClasses, className, horizontal && `dnb-badge--horizontal-${horizontal}`, vertical && `dnb-badge--vertical-${vertical}`, isInline && 'dnb-badge--inline')
+  }, restProps), label && React.createElement("span", {
+    className: "dnb-sr-only"
+  }, label, " "), content);
 }
 Badge._supportsSpacingProps = true;
 export default Badge;

package/components/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["React","classnames","createSpacingClasses","createSkeletonClass","Context","warn","extendPropsWithContext","validateDOMAttributes","defaultProps","label","className","skeleton","children","content","vertical","horizontal","variant","Badge","localProps","_span","context","useContext","allProps","contentProp","props","_objectWithoutProperties","_excluded","createElement","BadgeRoot","BadgeElem","_ref","skeletonClasses","spacingClasses","contentIsNum","variantIsNotification","isInline","_extends","role","_supportsSpacingProps"],"sources":["../../../../src/components/badge/Badge.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  warn,\n  extendPropsWithContext,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\n\nexport type BadgeProps = {\n  /**\n   * Aria label to describe the badge\n   * Default: null\n   */\n  label?: React.ReactNode\n\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * The content to display the badge on top of.\n   * Default: null\n   */\n  children?: React.ReactNode\n\n  /**\n   * The content of the component.\n   * Default: null\n   */\n  content?: string | number | React.ReactNode\n\n  /**\n   * The vertical positioning of the component.\n   * Default: null\n   */\n  vertical?: 'bottom' | 'top'\n\n  /**\n   * The horizontal positioning of the component.\n   * Default: null\n   */\n  horizontal?: 'left' | 'right'\n\n  /**\n   * The variant of the component.\n   * Default: information.\n   */\n  variant?: 'information' | 'notification'\n}\n\ntype BadgeAndSpacingProps = BadgeProps & SpacingProps\n\nexport const defaultProps = {\n  label: null,\n  className: null,\n  skeleton: false,\n  children: null,\n  content: null,\n  vertical: null,\n  horizontal: null,\n  variant: 'information',\n}\n\nfunction Badge(localProps: BadgeAndSpacingProps) {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.Badge,\n    { skeleton: context?.skeleton }\n  )\n\n  const {\n    label,\n    className,\n    children, // eslint-disable-line\n    skeleton,\n    horizontal,\n    vertical,\n    content: contentProp,\n    variant,\n    ...props\n  } = allProps\n\n  validateDOMAttributes(allProps, props)\n\n  if (children) {\n    return (\n      <BadgeRoot>\n        {children}\n        <BadgeElem />\n      </BadgeRoot>\n    )\n  }\n\n  return <BadgeElem />\n\n  function BadgeRoot({ children }: { children: React.ReactNode }) {\n    return <span className=\"dnb-badge__root\">{children}</span>\n  }\n\n  function BadgeElem() {\n    const skeletonClasses = createSkeletonClass('shape', skeleton, context)\n    const spacingClasses = createSpacingClasses(allProps)\n    const contentIsNum = typeof contentProp === 'number'\n    const variantIsNotification = variant === 'notification'\n\n    const content =\n      variantIsNotification && contentIsNum && contentProp > 9\n        ? '9+'\n        : contentProp\n\n    if (variantIsNotification && !contentIsNum) {\n      warn(\n        `Type of content should be a number: A notification badge is best suited to display content of type number.`\n      )\n    }\n    if (!label && contentIsNum) {\n      warn(\n        `Label required: A Badge with a number as content requires a label describing the content of the badge. This is to ensure correct semantic and accessibility.`\n      )\n    }\n\n    const isInline = !children && content\n\n    return (\n      <span\n        role=\"status\"\n        className={classnames(\n          'dnb-badge',\n          `dnb-badge--variant-${variant}`,\n          horizontal && `dnb-badge--horizontal-${horizontal}`,\n          vertical && `dnb-badge--vertical-${vertical}`,\n          isInline && 'dnb-badge--inline',\n          skeletonClasses,\n          spacingClasses,\n          className\n        )}\n        {...props}\n      >\n        {label && <span className=\"dnb-sr-only\">{label} </span>}\n        {content}\n      </span>\n    )\n  }\n}\n\nBadge._supportsSpacingProps = true\n\nexport default Badge\n"],"mappings":"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"}
+{"version":3,"file":"Badge.js","names":["React","classnames","createSpacingClasses","createSkeletonClass","Context","warn","extendPropsWithContext","validateDOMAttributes","defaultProps","label","className","skeleton","children","content","vertical","horizontal","variant","Badge","localProps","context","useContext","allProps","createElement","BadgeRoot","BadgeElem","_extends","_ref","props","contentProp","restProps","_objectWithoutProperties","_excluded","skeletonClasses","spacingClasses","contentIsNum","variantIsNotification","isInline","role","_supportsSpacingProps"],"sources":["../../../../src/components/badge/Badge.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\n\n// Shared\nimport Context, { ContextProps } from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  warn,\n  extendPropsWithContext,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\n\nexport type BadgeProps = {\n  /**\n   * Aria label to describe the badge\n   * Default: null\n   */\n  label?: React.ReactNode\n\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * The content to display the badge on top of.\n   * Default: null\n   */\n  children?: React.ReactNode\n\n  /**\n   * The content of the component.\n   * Default: null\n   */\n  content?: string | number | React.ReactNode\n\n  /**\n   * The vertical positioning of the component.\n   * Default: null\n   */\n  vertical?: 'bottom' | 'top'\n\n  /**\n   * The horizontal positioning of the component.\n   * Default: null\n   */\n  horizontal?: 'left' | 'right'\n\n  /**\n   * The variant of the component.\n   * Default: information.\n   */\n  variant?: 'information' | 'notification'\n}\n\ntype BadgeAndSpacingProps = BadgeProps & SpacingProps\n\nexport const defaultProps = {\n  label: null,\n  className: null,\n  skeleton: false,\n  children: null,\n  content: null,\n  vertical: null,\n  horizontal: null,\n  variant: 'information',\n}\n\nfunction Badge(localProps: BadgeAndSpacingProps) {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.Badge,\n    { skeleton: context?.skeleton }\n  )\n  const { children } = allProps\n\n  if (children) {\n    return (\n      <BadgeRoot>\n        {children}\n        <BadgeElem context={context} {...allProps} />\n      </BadgeRoot>\n    )\n  }\n\n  return <BadgeElem context={context} {...allProps} />\n}\n\nfunction BadgeRoot({ children }: { children: React.ReactNode }) {\n  return <span className=\"dnb-badge__root\">{children}</span>\n}\n\nfunction BadgeElem(\n  props: BadgeAndSpacingProps & { context: ContextProps }\n) {\n  const {\n    label,\n    className,\n    children,\n    skeleton,\n    horizontal,\n    vertical,\n    content: contentProp,\n    variant,\n    context,\n    ...restProps\n  } = props\n\n  // to remove spacing props, etc.\n  validateDOMAttributes(props, restProps)\n\n  const skeletonClasses = createSkeletonClass('shape', skeleton, context)\n  const spacingClasses = createSpacingClasses(props)\n  const contentIsNum = typeof contentProp === 'number'\n  const variantIsNotification = variant === 'notification'\n\n  const content =\n    variantIsNotification && contentIsNum && contentProp > 9\n      ? '9+'\n      : contentProp\n\n  if (variantIsNotification && !contentIsNum) {\n    warn(\n      `Type of content should be a number: A notification badge is best suited to display content of type number.`\n    )\n  }\n  if (!label && contentIsNum) {\n    warn(\n      `Label required: A Badge with a number as content requires a label describing the content of the badge. This is to ensure correct semantic and accessibility.`\n    )\n  }\n\n  const isInline = !children && content\n\n  return (\n    <span\n      role=\"status\"\n      className={classnames(\n        'dnb-badge',\n        `dnb-badge--variant-${variant}`,\n        horizontal && `dnb-badge--horizontal-${horizontal}`,\n        vertical && `dnb-badge--vertical-${vertical}`,\n        isInline && 'dnb-badge--inline',\n        skeletonClasses,\n        spacingClasses,\n        className\n      )}\n      {...restProps}\n    >\n      {label && <span className=\"dnb-sr-only\">{label} </span>}\n      {content}\n    </span>\n  )\n}\n\nBadge._supportsSpacingProps = true\n\nexport default Badge\n"],"mappings":"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"}

package/es/components/badge/Badge.js

@@ -1,8 +1,8 @@
 "use client";
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["label", "className", "children", "skeleton", "horizontal", "vertical", "content", "variant"];
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["label", "className", "children", "skeleton", "horizontal", "vertical", "content", "variant", "context"];
 import React from 'react';
 import classnames from 'classnames';
 import { createSpacingClasses } from '../space/SpacingHelper';
@@ -20,11 +20,30 @@ export const defaultProps = {
   variant: 'information'
 };
 function Badge(localProps) {
-  var _span;
   const context = React.useContext(Context);
   const allProps = extendPropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.Badge, {
     skeleton: context === null || context === void 0 ? void 0 : context.skeleton
   });
+  const {
+    children
+  } = allProps;
+  if (children) {
+    return React.createElement(BadgeRoot, null, children, React.createElement(BadgeElem, _extends({
+      context: context
+    }, allProps)));
+  }
+  return React.createElement(BadgeElem, _extends({
+    context: context
+  }, allProps));
+}
+function BadgeRoot({
+  children
+}) {
+  return React.createElement("span", {
+    className: "dnb-badge__root"
+  }, children);
+}
+function BadgeElem(props) {
   const {
       label,
       className,
@@ -33,41 +52,29 @@ function Badge(localProps) {
       horizontal,
       vertical,
       content: contentProp,
-      variant
-    } = allProps,
-    props = _objectWithoutProperties(allProps, _excluded);
-  validateDOMAttributes(allProps, props);
-  if (children) {
-    return React.createElement(BadgeRoot, null, children, React.createElement(BadgeElem, null));
-  }
-  return React.createElement(BadgeElem, null);
-  function BadgeRoot({
-    children
-  }) {
-    return React.createElement("span", {
-      className: "dnb-badge__root"
-    }, children);
+      variant,
+      context
+    } = props,
+    restProps = _objectWithoutProperties(props, _excluded);
+  validateDOMAttributes(props, restProps);
+  const skeletonClasses = createSkeletonClass('shape', skeleton, context);
+  const spacingClasses = createSpacingClasses(props);
+  const contentIsNum = typeof contentProp === 'number';
+  const variantIsNotification = variant === 'notification';
+  const content = variantIsNotification && contentIsNum && contentProp > 9 ? '9+' : contentProp;
+  if (variantIsNotification && !contentIsNum) {
+    warn(`Type of content should be a number: A notification badge is best suited to display content of type number.`);
   }
-  function BadgeElem() {
-    const skeletonClasses = createSkeletonClass('shape', skeleton, context);
-    const spacingClasses = createSpacingClasses(allProps);
-    const contentIsNum = typeof contentProp === 'number';
-    const variantIsNotification = variant === 'notification';
-    const content = variantIsNotification && contentIsNum && contentProp > 9 ? '9+' : contentProp;
-    if (variantIsNotification && !contentIsNum) {
-      warn(`Type of content should be a number: A notification badge is best suited to display content of type number.`);
-    }
-    if (!label && contentIsNum) {
-      warn(`Label required: A Badge with a number as content requires a label describing the content of the badge. This is to ensure correct semantic and accessibility.`);
-    }
-    const isInline = !children && content;
-    return React.createElement("span", _extends({
-      role: "status",
-      className: classnames(`dnb-badge dnb-badge--variant-${variant}`, skeletonClasses, spacingClasses, className, horizontal && `dnb-badge--horizontal-${horizontal}`, vertical && `dnb-badge--vertical-${vertical}`, isInline && 'dnb-badge--inline')
-    }, props), label && (_span || (_span = React.createElement("span", {
-      className: "dnb-sr-only"
-    }, label, " "))), content);
+  if (!label && contentIsNum) {
+    warn(`Label required: A Badge with a number as content requires a label describing the content of the badge. This is to ensure correct semantic and accessibility.`);
   }
+  const isInline = !children && content;
+  return React.createElement("span", _extends({
+    role: "status",
+    className: classnames(`dnb-badge dnb-badge--variant-${variant}`, skeletonClasses, spacingClasses, className, horizontal && `dnb-badge--horizontal-${horizontal}`, vertical && `dnb-badge--vertical-${vertical}`, isInline && 'dnb-badge--inline')
+  }, restProps), label && React.createElement("span", {
+    className: "dnb-sr-only"
+  }, label, " "), content);
 }
 Badge._supportsSpacingProps = true;
 export default Badge;

package/es/components/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["React","classnames","createSpacingClasses","createSkeletonClass","Context","warn","extendPropsWithContext","validateDOMAttributes","defaultProps","label","className","skeleton","children","content","vertical","horizontal","variant","Badge","localProps","_span","context","useContext","allProps","contentProp","props","_objectWithoutProperties","_excluded","createElement","BadgeRoot","BadgeElem","skeletonClasses","spacingClasses","contentIsNum","variantIsNotification","isInline","_extends","role","_supportsSpacingProps"],"sources":["../../../../src/components/badge/Badge.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  warn,\n  extendPropsWithContext,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\n\nexport type BadgeProps = {\n  /**\n   * Aria label to describe the badge\n   * Default: null\n   */\n  label?: React.ReactNode\n\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * The content to display the badge on top of.\n   * Default: null\n   */\n  children?: React.ReactNode\n\n  /**\n   * The content of the component.\n   * Default: null\n   */\n  content?: string | number | React.ReactNode\n\n  /**\n   * The vertical positioning of the component.\n   * Default: null\n   */\n  vertical?: 'bottom' | 'top'\n\n  /**\n   * The horizontal positioning of the component.\n   * Default: null\n   */\n  horizontal?: 'left' | 'right'\n\n  /**\n   * The variant of the component.\n   * Default: information.\n   */\n  variant?: 'information' | 'notification'\n}\n\ntype BadgeAndSpacingProps = BadgeProps & SpacingProps\n\nexport const defaultProps = {\n  label: null,\n  className: null,\n  skeleton: false,\n  children: null,\n  content: null,\n  vertical: null,\n  horizontal: null,\n  variant: 'information',\n}\n\nfunction Badge(localProps: BadgeAndSpacingProps) {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.Badge,\n    { skeleton: context?.skeleton }\n  )\n\n  const {\n    label,\n    className,\n    children, // eslint-disable-line\n    skeleton,\n    horizontal,\n    vertical,\n    content: contentProp,\n    variant,\n    ...props\n  } = allProps\n\n  validateDOMAttributes(allProps, props)\n\n  if (children) {\n    return (\n      <BadgeRoot>\n        {children}\n        <BadgeElem />\n      </BadgeRoot>\n    )\n  }\n\n  return <BadgeElem />\n\n  function BadgeRoot({ children }: { children: React.ReactNode }) {\n    return <span className=\"dnb-badge__root\">{children}</span>\n  }\n\n  function BadgeElem() {\n    const skeletonClasses = createSkeletonClass('shape', skeleton, context)\n    const spacingClasses = createSpacingClasses(allProps)\n    const contentIsNum = typeof contentProp === 'number'\n    const variantIsNotification = variant === 'notification'\n\n    const content =\n      variantIsNotification && contentIsNum && contentProp > 9\n        ? '9+'\n        : contentProp\n\n    if (variantIsNotification && !contentIsNum) {\n      warn(\n        `Type of content should be a number: A notification badge is best suited to display content of type number.`\n      )\n    }\n    if (!label && contentIsNum) {\n      warn(\n        `Label required: A Badge with a number as content requires a label describing the content of the badge. This is to ensure correct semantic and accessibility.`\n      )\n    }\n\n    const isInline = !children && content\n\n    return (\n      <span\n        role=\"status\"\n        className={classnames(\n          'dnb-badge',\n          `dnb-badge--variant-${variant}`,\n          horizontal && `dnb-badge--horizontal-${horizontal}`,\n          vertical && `dnb-badge--vertical-${vertical}`,\n          isInline && 'dnb-badge--inline',\n          skeletonClasses,\n          spacingClasses,\n          className\n        )}\n        {...props}\n      >\n        {label && <span className=\"dnb-sr-only\">{label} </span>}\n        {content}\n      </span>\n    )\n  }\n}\n\nBadge._supportsSpacingProps = true\n\nexport default Badge\n"],"mappings":"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"}
+{"version":3,"file":"Badge.js","names":["React","classnames","createSpacingClasses","createSkeletonClass","Context","warn","extendPropsWithContext","validateDOMAttributes","defaultProps","label","className","skeleton","children","content","vertical","horizontal","variant","Badge","localProps","context","useContext","allProps","createElement","BadgeRoot","BadgeElem","_extends","props","contentProp","restProps","_objectWithoutProperties","_excluded","skeletonClasses","spacingClasses","contentIsNum","variantIsNotification","isInline","role","_supportsSpacingProps"],"sources":["../../../../src/components/badge/Badge.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\n\n// Shared\nimport Context, { ContextProps } from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  warn,\n  extendPropsWithContext,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\n\nexport type BadgeProps = {\n  /**\n   * Aria label to describe the badge\n   * Default: null\n   */\n  label?: React.ReactNode\n\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * The content to display the badge on top of.\n   * Default: null\n   */\n  children?: React.ReactNode\n\n  /**\n   * The content of the component.\n   * Default: null\n   */\n  content?: string | number | React.ReactNode\n\n  /**\n   * The vertical positioning of the component.\n   * Default: null\n   */\n  vertical?: 'bottom' | 'top'\n\n  /**\n   * The horizontal positioning of the component.\n   * Default: null\n   */\n  horizontal?: 'left' | 'right'\n\n  /**\n   * The variant of the component.\n   * Default: information.\n   */\n  variant?: 'information' | 'notification'\n}\n\ntype BadgeAndSpacingProps = BadgeProps & SpacingProps\n\nexport const defaultProps = {\n  label: null,\n  className: null,\n  skeleton: false,\n  children: null,\n  content: null,\n  vertical: null,\n  horizontal: null,\n  variant: 'information',\n}\n\nfunction Badge(localProps: BadgeAndSpacingProps) {\n  // Every component should have a context\n  const context = React.useContext(Context)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.Badge,\n    { skeleton: context?.skeleton }\n  )\n  const { children } = allProps\n\n  if (children) {\n    return (\n      <BadgeRoot>\n        {children}\n        <BadgeElem context={context} {...allProps} />\n      </BadgeRoot>\n    )\n  }\n\n  return <BadgeElem context={context} {...allProps} />\n}\n\nfunction BadgeRoot({ children }: { children: React.ReactNode }) {\n  return <span className=\"dnb-badge__root\">{children}</span>\n}\n\nfunction BadgeElem(\n  props: BadgeAndSpacingProps & { context: ContextProps }\n) {\n  const {\n    label,\n    className,\n    children,\n    skeleton,\n    horizontal,\n    vertical,\n    content: contentProp,\n    variant,\n    context,\n    ...restProps\n  } = props\n\n  // to remove spacing props, etc.\n  validateDOMAttributes(props, restProps)\n\n  const skeletonClasses = createSkeletonClass('shape', skeleton, context)\n  const spacingClasses = createSpacingClasses(props)\n  const contentIsNum = typeof contentProp === 'number'\n  const variantIsNotification = variant === 'notification'\n\n  const content =\n    variantIsNotification && contentIsNum && contentProp > 9\n      ? '9+'\n      : contentProp\n\n  if (variantIsNotification && !contentIsNum) {\n    warn(\n      `Type of content should be a number: A notification badge is best suited to display content of type number.`\n    )\n  }\n  if (!label && contentIsNum) {\n    warn(\n      `Label required: A Badge with a number as content requires a label describing the content of the badge. This is to ensure correct semantic and accessibility.`\n    )\n  }\n\n  const isInline = !children && content\n\n  return (\n    <span\n      role=\"status\"\n      className={classnames(\n        'dnb-badge',\n        `dnb-badge--variant-${variant}`,\n        horizontal && `dnb-badge--horizontal-${horizontal}`,\n        vertical && `dnb-badge--vertical-${vertical}`,\n        isInline && 'dnb-badge--inline',\n        skeletonClasses,\n        spacingClasses,\n        className\n      )}\n      {...restProps}\n    >\n      {label && <span className=\"dnb-sr-only\">{label} </span>}\n      {content}\n    </span>\n  )\n}\n\nBadge._supportsSpacingProps = true\n\nexport default Badge\n"],"mappings":"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"}

package/es/extensions/forms/Field/Selection/Selection.js

@@ -173,7 +173,7 @@ function renderRadioItems({
     const Component = variant === 'radio' ? Radio : ToggleButton;
     return React.createElement(Component, _extends({
       id: optionsCount === 1 ? id : undefined,
-      key: `option-${i}-${value}`,
+      key: `option-${i}-${id}`,
       label: variant === 'radio' ? label : undefined,
       text: variant === 'button' ? label : undefined,
       value: String(value !== null && value !== void 0 ? value : ''),

package/es/extensions/forms/Field/Selection/Selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","makeUniqueId","ToggleButton","Dropdown","Radio","HelpButton","Autocomplete","OptionField","useFieldProps","pickSpacingProps","FieldBlock","FormError","convertCamelCaseProps","useDataValue","Selection","props","clearValue","id","className","variant","label","labelDescription","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","help","emptyValue","width","htmlAttributes","setHasFocus","handleChange","data","dataPath","children","autocompleteProps","dropdownProps","getValueByPath","dataList","handleDropdownChange","selectedKey","onChangeHandler","undefined","handleShow","handleHide","cn","fieldBlockProps","_objectSpread","forId","Component","items","renderRadioItems","createElement","_extends","asFieldset","Children","count","Group","layout_direction","on_change","String","status","getStatus","renderDropdownItems","concat","makeOptions","filter","Boolean","sharedProps","list_class","portal_class","title","suffix","content","on_show","on_hide","stretch","_error$message","message","Error","toString","optionsCount","length","createOption","i","rest","_objectWithoutProperties","_excluded","size","key","text","map","mapOptions","child","isValidElement","type","nestedChildren","cloneElement","_child","_child$props","_child$props$children","_ref","_props$children","_props$value","_em","_em2","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  HelpButton,\n  Autocomplete,\n} from '../../../../components'\nimport OptionField, { Props as OptionFieldProps } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { ReturnAdditional } from '../../hooks/useFieldProps'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock from '../../FieldBlock'\nimport {\n  FormError,\n  FieldProps,\n  FieldHelpProps,\n  FieldBlockWidth,\n  Path,\n} from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type { AutocompleteAllProps } from '../../../../components/Autocomplete'\nimport type { DropdownAllProps } from '../../../../components/Dropdown'\nimport { HelpButtonProps } from '../../../../components/HelpButton'\nimport { DrawerListProps } from '../../../../fragments/DrawerList'\nimport {\n  convertCamelCaseProps,\n  ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\nimport useDataValue from '../../hooks/useDataValue'\n\ntype IOption = {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\nexport type Data = Array<{\n  value: string\n  title: React.ReactNode\n  text?: React.ReactNode\n}>\n\nexport type Props = FieldHelpProps &\n  FieldProps<IOption['value']> & {\n    /**\n     * Defines the variant of the component.\n     * Default: dropdown\n     */\n    variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button'\n\n    /**\n     * The width of the component.\n     * Default: large\n     */\n    width?: FieldBlockWidth\n\n    /**\n     * Defines the layout of the options for radio and button variants.\n     */\n    optionsLayout?: 'horizontal' | 'vertical'\n\n    /**\n     * The path to the context data (Form.Handler).\n     * The context data object needs to have a `value` and a `title` property.\n     */\n    dataPath?: Path\n\n    /**\n     * Data to be used for the component. The object needs to have a `value` and a `title` property.\n     * The generated options will be placed above given JSX based children.\n     */\n    data?: Data\n\n    /**\n     * Autocomplete specific props\n     */\n    autocompleteProps?: ToCamelCase<AutocompleteAllProps>\n\n    /**\n     * Dropdown specific props\n     */\n    dropdownProps?: ToCamelCase<DropdownAllProps>\n\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode\n  }\n\nfunction Selection(props: Props) {\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    label,\n    labelDescription,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    htmlAttributes,\n    setHasFocus,\n    handleChange,\n    data,\n    dataPath,\n    children,\n\n    // - Autocomplete and Dropdown specific props\n    autocompleteProps,\n    dropdownProps,\n  } = useFieldProps(props)\n\n  const { getValueByPath } = useDataValue()\n  let dataList = data\n  if (dataPath) {\n    dataList = getValueByPath(dataPath)\n  }\n\n  const handleDropdownChange = useCallback(\n    ({ data }) => {\n      const selectedKey = data?.selectedKey\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const onChangeHandler = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useFieldPropss handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames(\n    'dnb-forms-field-selection',\n    `dnb-forms-field-selection__variant--${variant}`,\n    `dnb-forms-field-selection__options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldBlockProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n  }\n\n  switch (variant) {\n    case 'radio':\n    case 'button': {\n      const Component = (\n        variant === 'radio' ? Radio : ToggleButton\n      ) as typeof Radio & typeof ToggleButton\n\n      const items = renderRadioItems({\n        id,\n        value,\n        variant,\n        info,\n        warning,\n        htmlAttributes,\n        children,\n        dataList,\n        hasError,\n      })\n\n      return (\n        <FieldBlock\n          {...fieldBlockProps}\n          asFieldset={React.Children.count(items) > 1}\n        >\n          <Component.Group\n            className={cn}\n            layout_direction={\n              optionsLayout === 'horizontal' ? 'row' : 'column'\n            }\n            disabled={disabled}\n            on_change={onChangeHandler}\n            value={String(value ?? '')}\n          >\n            {items}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'autocomplete':\n    case 'dropdown': {\n      const status = getStatus(error, info, warning)\n      const data = renderDropdownItems(dataList)\n        .concat(makeOptions(children))\n        .filter(Boolean)\n\n      const sharedProps: AutocompleteAllProps & DropdownAllProps = {\n        id,\n        list_class: 'dnb-forms-field-selection__list',\n        portal_class: 'dnb-forms-field-selection__portal',\n        title: placeholder,\n        value: String(value ?? ''),\n        status: (hasError || status) && 'error',\n        disabled,\n        ...htmlAttributes,\n        data,\n        suffix: help ? (\n          <HelpButton title={help.title}>{help.content}</HelpButton>\n        ) : undefined,\n        on_change: handleDropdownChange,\n        on_show: handleShow,\n        on_hide: handleHide,\n        stretch: true,\n      }\n\n      return (\n        <FieldBlock {...fieldBlockProps} width={width}>\n          {variant === 'autocomplete' ? (\n            <Autocomplete\n              {...sharedProps}\n              {...(autocompleteProps\n                ? (convertCamelCaseProps(\n                    autocompleteProps\n                  ) as AutocompleteAllProps)\n                : null)}\n            />\n          ) : (\n            <Dropdown\n              {...sharedProps}\n              {...(dropdownProps\n                ? (convertCamelCaseProps(\n                    dropdownProps\n                  ) as DropdownAllProps)\n                : null)}\n            />\n          )}\n        </FieldBlock>\n      )\n    }\n  }\n}\n\nexport function getStatus(\n  error: Error | FormError | undefined,\n  info: React.ReactNode,\n  warning: React.ReactNode\n) {\n  return (\n    error?.message ??\n    ((warning instanceof Error && warning.message) ||\n      (warning instanceof FormError && warning.message) ||\n      warning?.toString() ||\n      (info instanceof Error && info.message) ||\n      (info instanceof FormError && info.message) ||\n      info?.toString())\n  )\n}\n\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    error?: Error | FormError | undefined\n    title: React.ReactNode\n    help?: HelpButtonProps\n    children?: React.ReactNode\n  }>\n>\n\nfunction renderRadioItems({\n  id,\n  value,\n  variant,\n  info,\n  warning,\n  htmlAttributes,\n  children,\n  dataList,\n  hasError,\n}: {\n  id: string\n  value: Props['value']\n  variant: Props['variant']\n  info: Props['info']\n  warning: Props['warning']\n  htmlAttributes: Props['htmlAttributes']\n  children: Props['children']\n  dataList: Data\n  hasError: ReturnAdditional<Props['value']>['hasError']\n}) {\n  const optionsCount =\n    React.Children.count(children) + (dataList?.length || 0)\n\n  const createOption = (props: OptionProps, i: number) => {\n    const { error, title, help, children, ...rest } = props\n\n    const label = title ?? children\n    const status = getStatus(error, info, warning)\n    const suffix = help ? (\n      <HelpButton size=\"small\" title={help.title}>\n        {help.content}\n      </HelpButton>\n    ) : undefined\n\n    const Component = (\n      variant === 'radio' ? Radio : ToggleButton\n    ) as typeof Radio & typeof ToggleButton\n\n    return (\n      <Component\n        id={optionsCount === 1 ? id : undefined}\n        key={`option-${i}-${value}`}\n        label={variant === 'radio' ? label : undefined}\n        text={variant === 'button' ? label : undefined}\n        value={String(value ?? '')}\n        status={(hasError || status) && 'error'}\n        suffix={suffix}\n        {...htmlAttributes}\n        {...rest}\n      />\n    )\n  }\n\n  return [\n    ...(dataList || []).map((props, i) => {\n      return createOption(props as OptionProps, i)\n    }),\n    ...(mapOptions(children, { createOption }) || []),\n  ].filter(Boolean)\n}\n\nexport function mapOptions(children: React.ReactNode, { createOption }) {\n  return React.Children.map(\n    children,\n    (child: React.ReactElement<OptionProps>, i) => {\n      if (React.isValidElement(child)) {\n        if (child.type === OptionField) {\n          return createOption(child.props, i)\n        }\n\n        if (child.props.children) {\n          const nestedChildren = mapOptions(child.props.children, {\n            createOption,\n          })\n          return React.cloneElement(child, child.props, nestedChildren)\n        }\n      }\n\n      return child\n    }\n  )\n}\n\nexport function makeOptions<T = DrawerListProps['data']>(\n  children: React.ReactNode\n): T {\n  return React.Children.map(children, (child) => {\n    if (child?.['props']?.children?.type === OptionField) {\n      child = child['props'].children\n    }\n\n    if (React.isValidElement(child) && child.type === OptionField) {\n      const props = child.props as OptionFieldProps\n      const title = props.children ?? props.title ?? <em>Untitled</em>\n      const content = props.text ? [title, props.text] : title\n      const selectedKey = String(props.value ?? '')\n\n      return { selectedKey, content }\n    }\n\n    // For other children, just show them as content\n    if (child) {\n      return {\n        content: child,\n      }\n    }\n  }) as T\n}\n\nfunction renderDropdownItems(data: Data) {\n  return (\n    data?.map(({ value, title, text }) => ({\n      selectedKey: value,\n      content: (text ? [title, text] : title) || <em>Untitled</em>,\n    })) || []\n  )\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}
+{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","classnames","makeUniqueId","ToggleButton","Dropdown","Radio","HelpButton","Autocomplete","OptionField","useFieldProps","pickSpacingProps","FieldBlock","FormError","convertCamelCaseProps","useDataValue","Selection","props","clearValue","id","className","variant","label","labelDescription","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","help","emptyValue","width","htmlAttributes","setHasFocus","handleChange","data","dataPath","children","autocompleteProps","dropdownProps","getValueByPath","dataList","handleDropdownChange","selectedKey","onChangeHandler","undefined","handleShow","handleHide","cn","fieldBlockProps","_objectSpread","forId","Component","items","renderRadioItems","createElement","_extends","asFieldset","Children","count","Group","layout_direction","on_change","String","status","getStatus","renderDropdownItems","concat","makeOptions","filter","Boolean","sharedProps","list_class","portal_class","title","suffix","content","on_show","on_hide","stretch","_error$message","message","Error","toString","optionsCount","length","createOption","i","rest","_objectWithoutProperties","_excluded","size","key","text","map","mapOptions","child","isValidElement","type","nestedChildren","cloneElement","_child","_child$props","_child$props$children","_ref","_props$children","_props$value","_em","_em2","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  HelpButton,\n  Autocomplete,\n} from '../../../../components'\nimport OptionField, { Props as OptionFieldProps } from '../Option'\nimport { useFieldProps } from '../../hooks'\nimport { ReturnAdditional } from '../../hooks/useFieldProps'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport FieldBlock from '../../FieldBlock'\nimport {\n  FormError,\n  FieldProps,\n  FieldHelpProps,\n  FieldBlockWidth,\n  Path,\n} from '../../types'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport type { AutocompleteAllProps } from '../../../../components/Autocomplete'\nimport type { DropdownAllProps } from '../../../../components/Dropdown'\nimport { HelpButtonProps } from '../../../../components/HelpButton'\nimport { DrawerListProps } from '../../../../fragments/DrawerList'\nimport {\n  convertCamelCaseProps,\n  ToCamelCase,\n} from '../../../../shared/helpers/withCamelCaseProps'\nimport useDataValue from '../../hooks/useDataValue'\n\ntype IOption = {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\nexport type Data = Array<{\n  value: string\n  title: React.ReactNode\n  text?: React.ReactNode\n}>\n\nexport type Props = FieldHelpProps &\n  FieldProps<IOption['value']> & {\n    /**\n     * Defines the variant of the component.\n     * Default: dropdown\n     */\n    variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button'\n\n    /**\n     * The width of the component.\n     * Default: large\n     */\n    width?: FieldBlockWidth\n\n    /**\n     * Defines the layout of the options for radio and button variants.\n     */\n    optionsLayout?: 'horizontal' | 'vertical'\n\n    /**\n     * The path to the context data (Form.Handler).\n     * The context data object needs to have a `value` and a `title` property.\n     */\n    dataPath?: Path\n\n    /**\n     * Data to be used for the component. The object needs to have a `value` and a `title` property.\n     * The generated options will be placed above given JSX based children.\n     */\n    data?: Data\n\n    /**\n     * Autocomplete specific props\n     */\n    autocompleteProps?: ToCamelCase<AutocompleteAllProps>\n\n    /**\n     * Dropdown specific props\n     */\n    dropdownProps?: ToCamelCase<DropdownAllProps>\n\n    /**\n     * The content of the component.\n     */\n    children?: React.ReactNode\n  }\n\nfunction Selection(props: Props) {\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    label,\n    labelDescription,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    htmlAttributes,\n    setHasFocus,\n    handleChange,\n    data,\n    dataPath,\n    children,\n\n    // - Autocomplete and Dropdown specific props\n    autocompleteProps,\n    dropdownProps,\n  } = useFieldProps(props)\n\n  const { getValueByPath } = useDataValue()\n  let dataList = data\n  if (dataPath) {\n    dataList = getValueByPath(dataPath)\n  }\n\n  const handleDropdownChange = useCallback(\n    ({ data }) => {\n      const selectedKey = data?.selectedKey\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const onChangeHandler = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useFieldPropss handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames(\n    'dnb-forms-field-selection',\n    `dnb-forms-field-selection__variant--${variant}`,\n    `dnb-forms-field-selection__options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldBlockProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n  }\n\n  switch (variant) {\n    case 'radio':\n    case 'button': {\n      const Component = (\n        variant === 'radio' ? Radio : ToggleButton\n      ) as typeof Radio & typeof ToggleButton\n\n      const items = renderRadioItems({\n        id,\n        value,\n        variant,\n        info,\n        warning,\n        htmlAttributes,\n        children,\n        dataList,\n        hasError,\n      })\n\n      return (\n        <FieldBlock\n          {...fieldBlockProps}\n          asFieldset={React.Children.count(items) > 1}\n        >\n          <Component.Group\n            className={cn}\n            layout_direction={\n              optionsLayout === 'horizontal' ? 'row' : 'column'\n            }\n            disabled={disabled}\n            on_change={onChangeHandler}\n            value={String(value ?? '')}\n          >\n            {items}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'autocomplete':\n    case 'dropdown': {\n      const status = getStatus(error, info, warning)\n      const data = renderDropdownItems(dataList)\n        .concat(makeOptions(children))\n        .filter(Boolean)\n\n      const sharedProps: AutocompleteAllProps & DropdownAllProps = {\n        id,\n        list_class: 'dnb-forms-field-selection__list',\n        portal_class: 'dnb-forms-field-selection__portal',\n        title: placeholder,\n        value: String(value ?? ''),\n        status: (hasError || status) && 'error',\n        disabled,\n        ...htmlAttributes,\n        data,\n        suffix: help ? (\n          <HelpButton title={help.title}>{help.content}</HelpButton>\n        ) : undefined,\n        on_change: handleDropdownChange,\n        on_show: handleShow,\n        on_hide: handleHide,\n        stretch: true,\n      }\n\n      return (\n        <FieldBlock {...fieldBlockProps} width={width}>\n          {variant === 'autocomplete' ? (\n            <Autocomplete\n              {...sharedProps}\n              {...(autocompleteProps\n                ? (convertCamelCaseProps(\n                    autocompleteProps\n                  ) as AutocompleteAllProps)\n                : null)}\n            />\n          ) : (\n            <Dropdown\n              {...sharedProps}\n              {...(dropdownProps\n                ? (convertCamelCaseProps(\n                    dropdownProps\n                  ) as DropdownAllProps)\n                : null)}\n            />\n          )}\n        </FieldBlock>\n      )\n    }\n  }\n}\n\nexport function getStatus(\n  error: Error | FormError | undefined,\n  info: React.ReactNode,\n  warning: React.ReactNode\n) {\n  return (\n    error?.message ??\n    ((warning instanceof Error && warning.message) ||\n      (warning instanceof FormError && warning.message) ||\n      warning?.toString() ||\n      (info instanceof Error && info.message) ||\n      (info instanceof FormError && info.message) ||\n      info?.toString())\n  )\n}\n\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    error?: Error | FormError | undefined\n    title: React.ReactNode\n    help?: HelpButtonProps\n    children?: React.ReactNode\n  }>\n>\n\nfunction renderRadioItems({\n  id,\n  value,\n  variant,\n  info,\n  warning,\n  htmlAttributes,\n  children,\n  dataList,\n  hasError,\n}: {\n  id: string\n  value: Props['value']\n  variant: Props['variant']\n  info: Props['info']\n  warning: Props['warning']\n  htmlAttributes: Props['htmlAttributes']\n  children: Props['children']\n  dataList: Data\n  hasError: ReturnAdditional<Props['value']>['hasError']\n}) {\n  const optionsCount =\n    React.Children.count(children) + (dataList?.length || 0)\n\n  const createOption = (props: OptionProps, i: number) => {\n    const { error, title, help, children, ...rest } = props\n\n    const label = title ?? children\n    const status = getStatus(error, info, warning)\n    const suffix = help ? (\n      <HelpButton size=\"small\" title={help.title}>\n        {help.content}\n      </HelpButton>\n    ) : undefined\n\n    const Component = (\n      variant === 'radio' ? Radio : ToggleButton\n    ) as typeof Radio & typeof ToggleButton\n\n    return (\n      <Component\n        id={optionsCount === 1 ? id : undefined}\n        key={`option-${i}-${id}`}\n        label={variant === 'radio' ? label : undefined}\n        text={variant === 'button' ? label : undefined}\n        value={String(value ?? '')}\n        status={(hasError || status) && 'error'}\n        suffix={suffix}\n        {...htmlAttributes}\n        {...rest}\n      />\n    )\n  }\n\n  return [\n    ...(dataList || []).map((props, i) => {\n      return createOption(props as OptionProps, i)\n    }),\n    ...(mapOptions(children, { createOption }) || []),\n  ].filter(Boolean)\n}\n\nexport function mapOptions(children: React.ReactNode, { createOption }) {\n  return React.Children.map(\n    children,\n    (child: React.ReactElement<OptionProps>, i) => {\n      if (React.isValidElement(child)) {\n        if (child.type === OptionField) {\n          return createOption(child.props, i)\n        }\n\n        if (child.props.children) {\n          const nestedChildren = mapOptions(child.props.children, {\n            createOption,\n          })\n          return React.cloneElement(child, child.props, nestedChildren)\n        }\n      }\n\n      return child\n    }\n  )\n}\n\nexport function makeOptions<T = DrawerListProps['data']>(\n  children: React.ReactNode\n): T {\n  return React.Children.map(children, (child) => {\n    if (child?.['props']?.children?.type === OptionField) {\n      child = child['props'].children\n    }\n\n    if (React.isValidElement(child) && child.type === OptionField) {\n      const props = child.props as OptionFieldProps\n      const title = props.children ?? props.title ?? <em>Untitled</em>\n      const content = props.text ? [title, props.text] : title\n      const selectedKey = String(props.value ?? '')\n\n      return { selectedKey, content }\n    }\n\n    // For other children, just show them as content\n    if (child) {\n      return {\n        content: child,\n      }\n    }\n  }) as T\n}\n\nfunction renderDropdownItems(data: Data) {\n  return (\n    data?.map(({ value, title, text }) => ({\n      selectedKey: value,\n      content: (text ? [title, text] : title) || <em>Untitled</em>,\n    })) || []\n  )\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}

package/es/extensions/forms/Form/Visibility/Visibility.d.ts

@@ -11,7 +11,7 @@ export type VisibleWhen = {
     hasValue: unknown;
 }
 /**
- * @deprecated Will be remove din v11!
+ * @deprecated Will be removed in v11!
  */
  | {
     path: Path;
@@ -19,7 +19,7 @@ export type VisibleWhen = {
     withValue: (value: unknown) => boolean;
 }
 /**
- * @deprecated  Will be remove din v11!
+ * @deprecated  Will be removed in v11!
  */
  | {
     itemPath: Path;

package/es/extensions/forms/Form/Visibility/Visibility.js.map

@@ -1 +1 @@
-{"version":3,"file":"Visibility.js","names":["React","warn","useMountEffect","HeightAnimation","FieldProvider","useVisibility","VisibilityContext","Visibility","_ref","visible","pathDefined","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","pathValue","whenValue","visibleWhen","visibleWhenNot","inferData","filterData","animate","keepInDOM","compensateForGap","fieldPropsWhenHidden","children","rest","_objectWithoutProperties","_excluded","check","open","content","createElement","Provider","value","isVisible","props","_extends","Boolean","className","hidden","Fragment","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/Visibility.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react'\n\nimport { warn } from '../../../../shared/helpers'\nimport useMountEffect from '../../../../shared/helpers/useMountEffect'\nimport HeightAnimation, {\n  HeightAnimationProps,\n} from '../../../../components/HeightAnimation'\nimport FieldProvider from '../../Field/Provider'\nimport useVisibility from './useVisibility'\n\nimport type { Path, UseFieldProps } from '../../types'\nimport type { DataAttributes } from '../../hooks/useFieldProps'\nimport { FilterData } from '../../DataContext'\nimport VisibilityContext from './VisibilityContext'\n\nexport type VisibleWhen =\n  | {\n      path: Path\n      hasValue: unknown\n    }\n  | {\n      itemPath: Path\n      hasValue: unknown\n    }\n  /**\n   * @deprecated Will be remove din v11!\n   */\n  | {\n      path: Path\n      /** @deprecated Use `hasValue` instead */\n      withValue: (value: unknown) => boolean\n    }\n  /**\n   * @deprecated  Will be remove din v11!\n   */\n  | {\n      itemPath: Path\n      /** @deprecated Use `hasValue` instead */\n      withValue: (value: unknown) => boolean\n    }\n\nexport type Props = {\n  visible?: boolean\n  /** Given data context path must be defined to show children */\n  pathDefined?: Path\n  /** Given data context path must be undefined to show children */\n  pathUndefined?: Path\n  /** Given data context path must be truthy to show children */\n  pathTruthy?: Path\n  /** Given data context path must be falsy to show children */\n  pathFalsy?: Path\n  /** Given data context path must be true to show children */\n  pathTrue?: Path\n  /** Given data context path must be false to show children */\n  pathFalse?: Path\n  /** Provide a `path` or `itemPath` and a `hasValue` method that returns a boolean or the excepted value in order to show children. The first parameter is the value of the path. */\n  visibleWhen?: VisibleWhen\n  /** Same as `visibleWhen`, but with inverted logic. */\n  visibleWhenNot?: VisibleWhen\n  /** Infer visibility calling given derivative function with the whole data set. Should return true/false for visibility.   */\n  inferData?: (data: unknown) => boolean\n  /** Filter data based on provided criteria. The first parameter is the path, the second is the value, and the third is the props, and the fourth is the internal. Return false to filter out the data. */\n  filterData?: FilterData\n  /** Animate the visibility change */\n  animate?: boolean\n  /** Keep the content in the DOM, even if it's not visible */\n  keepInDOM?: boolean\n  /** 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  compensateForGap?: HeightAnimationProps['compensateForGap']\n  /** When visibility is hidden, and `keepInDOM` is true, pass these props to the children */\n  fieldPropsWhenHidden?: UseFieldProps & DataAttributes & AriaAttributes\n  element?: HeightAnimationProps['element']\n  children: React.ReactNode\n\n  /** @deprecated Use `visibleWhen` instead */\n  pathValue?: string\n  /** @deprecated Use `visibleWhen` instead */\n  whenValue?: unknown\n}\n\nfunction Visibility({\n  visible,\n  pathDefined,\n  pathUndefined,\n  pathTruthy,\n  pathFalsy,\n  pathTrue,\n  pathFalse,\n  pathValue,\n  whenValue,\n  visibleWhen,\n  visibleWhenNot,\n  inferData,\n  filterData,\n  animate,\n  keepInDOM,\n  compensateForGap,\n  fieldPropsWhenHidden,\n  children,\n  ...rest\n}: Props) {\n  useMountEffect(() => {\n    if (fieldPropsWhenHidden && !keepInDOM) {\n      warn('Using \"fieldPropsWhenHidden\" requires \"keepInDOM\" to be true.')\n    }\n  })\n\n  const { check } = useVisibility({\n    visible,\n    pathDefined,\n    pathUndefined,\n    pathTruthy,\n    pathFalsy,\n    pathTrue,\n    pathFalse,\n    pathValue,\n    whenValue,\n    visibleWhen,\n    visibleWhenNot,\n    inferData,\n    filterData,\n  })\n  const open = check()\n  const content = (\n    <VisibilityContext.Provider\n      value={{\n        isVisible: open,\n      }}\n    >\n      {children}\n    </VisibilityContext.Provider>\n  )\n\n  if (animate) {\n    const props = !open ? fieldPropsWhenHidden : null\n\n    return (\n      <HeightAnimation\n        open={open}\n        keepInDOM={Boolean(keepInDOM)}\n        className=\"dnb-forms-visibility\"\n        compensateForGap={compensateForGap}\n        {...rest}\n      >\n        <FieldProvider {...props}>{content}</FieldProvider>\n      </HeightAnimation>\n    )\n  }\n\n  if (keepInDOM) {\n    const props = !open ? fieldPropsWhenHidden : null\n    return (\n      <span className=\"dnb-forms-visibility\" hidden={!open}>\n        <FieldProvider {...props}>{content}</FieldProvider>\n      </span>\n    )\n  }\n\n  return <>{open ? content : null}</>\n}\n\nVisibility._supportsSpacingProps = 'children'\nexport default Visibility\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAA0B,OAAO;AAE7C,SAASC,IAAI,QAAQ,4BAA4B;AACjD,OAAOC,cAAc,MAAM,2CAA2C;AACtE,OAAOC,eAAe,MAEf,wCAAwC;AAC/C,OAAOC,aAAa,MAAM,sBAAsB;AAChD,OAAOC,aAAa,MAAM,iBAAiB;AAK3C,OAAOC,iBAAiB,MAAM,qBAAqB;AAmEnD,SAASC,UAAUA,CAAAC,IAAA,EAoBT;EAAA,IApBU;MAClBC,OAAO;MACPC,WAAW;MACXC,aAAa;MACbC,UAAU;MACVC,SAAS;MACTC,QAAQ;MACRC,SAAS;MACTC,SAAS;MACTC,SAAS;MACTC,WAAW;MACXC,cAAc;MACdC,SAAS;MACTC,UAAU;MACVC,OAAO;MACPC,SAAS;MACTC,gBAAgB;MAChBC,oBAAoB;MACpBC;IAEK,CAAC,GAAAlB,IAAA;IADHmB,IAAI,GAAAC,wBAAA,CAAApB,IAAA,EAAAqB,SAAA;EAEP3B,cAAc,CAAC,MAAM;IACnB,IAAIuB,oBAAoB,IAAI,CAACF,SAAS,EAAE;MACtCtB,IAAI,CAAC,+DAA+D,CAAC;IACvE;EACF,CAAC,CAAC;EAEF,MAAM;IAAE6B;EAAM,CAAC,GAAGzB,aAAa,CAAC;IAC9BI,OAAO;IACPC,WAAW;IACXC,aAAa;IACbC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,SAAS;IACTC,SAAS;IACTC,SAAS;IACTC,WAAW;IACXC,cAAc;IACdC,SAAS;IACTC;EACF,CAAC,CAAC;EACF,MAAMU,IAAI,GAAGD,KAAK,CAAC,CAAC;EACpB,MAAME,OAAO,GACXhC,KAAA,CAAAiC,aAAA,CAAC3B,iBAAiB,CAAC4B,QAAQ;IACzBC,KAAK,EAAE;MACLC,SAAS,EAAEL;IACb;EAAE,GAEDL,QACyB,CAC7B;EAED,IAAIJ,OAAO,EAAE;IACX,MAAMe,KAAK,GAAG,CAACN,IAAI,GAAGN,oBAAoB,GAAG,IAAI;IAEjD,OACEzB,KAAA,CAAAiC,aAAA,CAAC9B,eAAe,EAAAmC,QAAA;MACdP,IAAI,EAAEA,IAAK;MACXR,SAAS,EAAEgB,OAAO,CAAChB,SAAS,CAAE;MAC9BiB,SAAS,EAAC,sBAAsB;MAChChB,gBAAgB,EAAEA;IAAiB,GAC/BG,IAAI,GAER3B,KAAA,CAAAiC,aAAA,CAAC7B,aAAa,EAAKiC,KAAK,EAAGL,OAAuB,CACnC,CAAC;EAEtB;EAEA,IAAIT,SAAS,EAAE;IACb,MAAMc,KAAK,GAAG,CAACN,IAAI,GAAGN,oBAAoB,GAAG,IAAI;IACjD,OACEzB,KAAA,CAAAiC,aAAA;MAAMO,SAAS,EAAC,sBAAsB;MAACC,MAAM,EAAE,CAACV;IAAK,GACnD/B,KAAA,CAAAiC,aAAA,CAAC7B,aAAa,EAAKiC,KAAK,EAAGL,OAAuB,CAC9C,CAAC;EAEX;EAEA,OAAOhC,KAAA,CAAAiC,aAAA,CAAAjC,KAAA,CAAA0C,QAAA,QAAGX,IAAI,GAAGC,OAAO,GAAG,IAAO,CAAC;AACrC;AAEAzB,UAAU,CAACoC,qBAAqB,GAAG,UAAU;AAC7C,eAAepC,UAAU"}
+{"version":3,"file":"Visibility.js","names":["React","warn","useMountEffect","HeightAnimation","FieldProvider","useVisibility","VisibilityContext","Visibility","_ref","visible","pathDefined","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","pathValue","whenValue","visibleWhen","visibleWhenNot","inferData","filterData","animate","keepInDOM","compensateForGap","fieldPropsWhenHidden","children","rest","_objectWithoutProperties","_excluded","check","open","content","createElement","Provider","value","isVisible","props","_extends","Boolean","className","hidden","Fragment","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/Visibility.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react'\n\nimport { warn } from '../../../../shared/helpers'\nimport useMountEffect from '../../../../shared/helpers/useMountEffect'\nimport HeightAnimation, {\n  HeightAnimationProps,\n} from '../../../../components/HeightAnimation'\nimport FieldProvider from '../../Field/Provider'\nimport useVisibility from './useVisibility'\n\nimport type { Path, UseFieldProps } from '../../types'\nimport type { DataAttributes } from '../../hooks/useFieldProps'\nimport { FilterData } from '../../DataContext'\nimport VisibilityContext from './VisibilityContext'\n\nexport type VisibleWhen =\n  | {\n      path: Path\n      hasValue: unknown\n    }\n  | {\n      itemPath: Path\n      hasValue: unknown\n    }\n  /**\n   * @deprecated Will be removed in v11!\n   */\n  | {\n      path: Path\n      /** @deprecated Use `hasValue` instead */\n      withValue: (value: unknown) => boolean\n    }\n  /**\n   * @deprecated  Will be removed in v11!\n   */\n  | {\n      itemPath: Path\n      /** @deprecated Use `hasValue` instead */\n      withValue: (value: unknown) => boolean\n    }\n\nexport type Props = {\n  visible?: boolean\n  /** Given data context path must be defined to show children */\n  pathDefined?: Path\n  /** Given data context path must be undefined to show children */\n  pathUndefined?: Path\n  /** Given data context path must be truthy to show children */\n  pathTruthy?: Path\n  /** Given data context path must be falsy to show children */\n  pathFalsy?: Path\n  /** Given data context path must be true to show children */\n  pathTrue?: Path\n  /** Given data context path must be false to show children */\n  pathFalse?: Path\n  /** Provide a `path` or `itemPath` and a `hasValue` method that returns a boolean or the excepted value in order to show children. The first parameter is the value of the path. */\n  visibleWhen?: VisibleWhen\n  /** Same as `visibleWhen`, but with inverted logic. */\n  visibleWhenNot?: VisibleWhen\n  /** Infer visibility calling given derivative function with the whole data set. Should return true/false for visibility.   */\n  inferData?: (data: unknown) => boolean\n  /** Filter data based on provided criteria. The first parameter is the path, the second is the value, and the third is the props, and the fourth is the internal. Return false to filter out the data. */\n  filterData?: FilterData\n  /** Animate the visibility change */\n  animate?: boolean\n  /** Keep the content in the DOM, even if it's not visible */\n  keepInDOM?: boolean\n  /** 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  compensateForGap?: HeightAnimationProps['compensateForGap']\n  /** When visibility is hidden, and `keepInDOM` is true, pass these props to the children */\n  fieldPropsWhenHidden?: UseFieldProps & DataAttributes & AriaAttributes\n  element?: HeightAnimationProps['element']\n  children: React.ReactNode\n\n  /** @deprecated Use `visibleWhen` instead */\n  pathValue?: string\n  /** @deprecated Use `visibleWhen` instead */\n  whenValue?: unknown\n}\n\nfunction Visibility({\n  visible,\n  pathDefined,\n  pathUndefined,\n  pathTruthy,\n  pathFalsy,\n  pathTrue,\n  pathFalse,\n  pathValue,\n  whenValue,\n  visibleWhen,\n  visibleWhenNot,\n  inferData,\n  filterData,\n  animate,\n  keepInDOM,\n  compensateForGap,\n  fieldPropsWhenHidden,\n  children,\n  ...rest\n}: Props) {\n  useMountEffect(() => {\n    if (fieldPropsWhenHidden && !keepInDOM) {\n      warn('Using \"fieldPropsWhenHidden\" requires \"keepInDOM\" to be true.')\n    }\n  })\n\n  const { check } = useVisibility({\n    visible,\n    pathDefined,\n    pathUndefined,\n    pathTruthy,\n    pathFalsy,\n    pathTrue,\n    pathFalse,\n    pathValue,\n    whenValue,\n    visibleWhen,\n    visibleWhenNot,\n    inferData,\n    filterData,\n  })\n  const open = check()\n  const content = (\n    <VisibilityContext.Provider\n      value={{\n        isVisible: open,\n      }}\n    >\n      {children}\n    </VisibilityContext.Provider>\n  )\n\n  if (animate) {\n    const props = !open ? fieldPropsWhenHidden : null\n\n    return (\n      <HeightAnimation\n        open={open}\n        keepInDOM={Boolean(keepInDOM)}\n        className=\"dnb-forms-visibility\"\n        compensateForGap={compensateForGap}\n        {...rest}\n      >\n        <FieldProvider {...props}>{content}</FieldProvider>\n      </HeightAnimation>\n    )\n  }\n\n  if (keepInDOM) {\n    const props = !open ? fieldPropsWhenHidden : null\n    return (\n      <span className=\"dnb-forms-visibility\" hidden={!open}>\n        <FieldProvider {...props}>{content}</FieldProvider>\n      </span>\n    )\n  }\n\n  return <>{open ? content : null}</>\n}\n\nVisibility._supportsSpacingProps = 'children'\nexport default Visibility\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAA0B,OAAO;AAE7C,SAASC,IAAI,QAAQ,4BAA4B;AACjD,OAAOC,cAAc,MAAM,2CAA2C;AACtE,OAAOC,eAAe,MAEf,wCAAwC;AAC/C,OAAOC,aAAa,MAAM,sBAAsB;AAChD,OAAOC,aAAa,MAAM,iBAAiB;AAK3C,OAAOC,iBAAiB,MAAM,qBAAqB;AAmEnD,SAASC,UAAUA,CAAAC,IAAA,EAoBT;EAAA,IApBU;MAClBC,OAAO;MACPC,WAAW;MACXC,aAAa;MACbC,UAAU;MACVC,SAAS;MACTC,QAAQ;MACRC,SAAS;MACTC,SAAS;MACTC,SAAS;MACTC,WAAW;MACXC,cAAc;MACdC,SAAS;MACTC,UAAU;MACVC,OAAO;MACPC,SAAS;MACTC,gBAAgB;MAChBC,oBAAoB;MACpBC;IAEK,CAAC,GAAAlB,IAAA;IADHmB,IAAI,GAAAC,wBAAA,CAAApB,IAAA,EAAAqB,SAAA;EAEP3B,cAAc,CAAC,MAAM;IACnB,IAAIuB,oBAAoB,IAAI,CAACF,SAAS,EAAE;MACtCtB,IAAI,CAAC,+DAA+D,CAAC;IACvE;EACF,CAAC,CAAC;EAEF,MAAM;IAAE6B;EAAM,CAAC,GAAGzB,aAAa,CAAC;IAC9BI,OAAO;IACPC,WAAW;IACXC,aAAa;IACbC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,SAAS;IACTC,SAAS;IACTC,SAAS;IACTC,WAAW;IACXC,cAAc;IACdC,SAAS;IACTC;EACF,CAAC,CAAC;EACF,MAAMU,IAAI,GAAGD,KAAK,CAAC,CAAC;EACpB,MAAME,OAAO,GACXhC,KAAA,CAAAiC,aAAA,CAAC3B,iBAAiB,CAAC4B,QAAQ;IACzBC,KAAK,EAAE;MACLC,SAAS,EAAEL;IACb;EAAE,GAEDL,QACyB,CAC7B;EAED,IAAIJ,OAAO,EAAE;IACX,MAAMe,KAAK,GAAG,CAACN,IAAI,GAAGN,oBAAoB,GAAG,IAAI;IAEjD,OACEzB,KAAA,CAAAiC,aAAA,CAAC9B,eAAe,EAAAmC,QAAA;MACdP,IAAI,EAAEA,IAAK;MACXR,SAAS,EAAEgB,OAAO,CAAChB,SAAS,CAAE;MAC9BiB,SAAS,EAAC,sBAAsB;MAChChB,gBAAgB,EAAEA;IAAiB,GAC/BG,IAAI,GAER3B,KAAA,CAAAiC,aAAA,CAAC7B,aAAa,EAAKiC,KAAK,EAAGL,OAAuB,CACnC,CAAC;EAEtB;EAEA,IAAIT,SAAS,EAAE;IACb,MAAMc,KAAK,GAAG,CAACN,IAAI,GAAGN,oBAAoB,GAAG,IAAI;IACjD,OACEzB,KAAA,CAAAiC,aAAA;MAAMO,SAAS,EAAC,sBAAsB;MAACC,MAAM,EAAE,CAACV;IAAK,GACnD/B,KAAA,CAAAiC,aAAA,CAAC7B,aAAa,EAAKiC,KAAK,EAAGL,OAAuB,CAC9C,CAAC;EAEX;EAEA,OAAOhC,KAAA,CAAAiC,aAAA,CAAAjC,KAAA,CAAA0C,QAAA,QAAGX,IAAI,GAAGC,OAAO,GAAG,IAAO,CAAC;AACrC;AAEAzB,UAAU,CAACoC,qBAAqB,GAAG,UAAU;AAC7C,eAAepC,UAAU"}

package/es/extensions/forms/hooks/useFieldProps.js

@@ -32,7 +32,7 @@ export default function useFieldProps(localeProps, {
   executeOnChangeRegardlessOfError = false,
   updateContextDataInSync = false
 } = {}) {
-  var _dataContext$props, _useExternalValue, _dataContext$ajvInsta, _localErrorRef$curren, _ref, _dataContext$props3, _props$path, _props$autoComplete;
+  var _dataContext$props, _transformers$current, _dataContext$ajvInsta, _localErrorRef$curren, _ref, _dataContext$props3, _props$path, _props$autoComplete;
   const {
     extend
   } = useContext(FieldProviderContext);
@@ -156,13 +156,13 @@ export default function useFieldProps(localeProps, {
   useLayoutEffect(() => {
     defaultValueRef.current = defaultValue;
   }, []);
-  const externalValue = (_useExternalValue = useExternalValue({
+  const externalValue = (_transformers$current = transformers.current.transformIn(useExternalValue({
     path,
     itemPath,
     value: valueProp,
     transformers,
     emptyValue
-  })) !== null && _useExternalValue !== void 0 ? _useExternalValue : defaultValueRef.current;
+  }))) !== null && _transformers$current !== void 0 ? _transformers$current : defaultValueRef.current;
   const valueRef = useRef(externalValue);
   const changedRef = useRef();
   const hasFocusRef = useRef();
@@ -665,10 +665,11 @@ export default function useFieldProps(localeProps, {
   }) => {
     const value = transformers.current.toEvent(overrideValue !== null && overrideValue !== void 0 ? overrideValue : valueRef.current, eventName);
     const args = transformers.current.provideAdditionalArgs(value, additionalArgs);
+    const transformedValue = transformers.current.transformOut(value, args);
     if (typeof args !== 'undefined') {
-      return [value, args];
+      return [transformedValue, args];
     }
-    return [value];
+    return [transformedValue];
   }, []);
   const setHasFocus = useCallback(async (hasFocus, overrideValue, additionalArgs) => {
     const args = getEventArgs({
@@ -797,19 +798,25 @@ export default function useFieldProps(localeProps, {
     forceUpdate();
   }, [asyncBehaviorIsEnabled, executeOnChangeRegardlessOfError, hasPath, yieldAsyncProcess, onChangeContext, defineAsyncProcess, hasError, setEventResult, handlePathChangeDataContext, identifier]);
   const updateValue = useCallback(async newValue => {
-    if (newValue === valueRef.current) {
+    const currentValue = valueRef.current;
+    if (newValue === currentValue) {
       return;
     }
-    valueRef.current = newValue;
+    const transformedValue = transformers.current.transformValue(newValue, currentValue);
+    const contextValue = transformers.current.transformOut(transformedValue, transformers.current.provideAdditionalArgs(transformedValue, additionalArgs));
+    valueRef.current = transformedValue;
     if (hasPath) {
-      handlePathChangeUnvalidatedDataContext(identifier, newValue);
+      handlePathChangeUnvalidatedDataContext(identifier, contextValue);
+    }
+    if (itemPath) {
+      handleChangeIterateContext === null || handleChangeIterateContext === void 0 ? void 0 : handleChangeIterateContext(makeIteratePath(itemPath, ''), contextValue);
     }
     addToPool('validator', validateValue, isAsync(onChangeValidatorRef.current));
     addToPool('onChangeContext', callOnChangeContext, isAsync(onChangeContext));
     await runPool(() => {
       handleError();
     });
-  }, [hasPath, addToPool, validateValue, callOnChangeContext, onChangeContext, runPool, handlePathChangeUnvalidatedDataContext, identifier, handleError]);
+  }, [additionalArgs, hasPath, itemPath, addToPool, validateValue, callOnChangeContext, onChangeContext, runPool, handlePathChangeUnvalidatedDataContext, identifier, handleChangeIterateContext, makeIteratePath, handleError]);
   const setChanged = state => {
     changedRef.current = state;
   };
@@ -819,16 +826,12 @@ export default function useFieldProps(localeProps, {
     if (fromInput === currentValue) {
       return;
     }
-    const transformedValue = transformers.current.transformOut(transformers.current.transformValue(fromInput, currentValue), transformers.current.provideAdditionalArgs(fromInput, additionalArgs));
     changedRef.current = true;
-    if (itemPath) {
-      handleChangeIterateContext === null || handleChangeIterateContext === void 0 ? void 0 : handleChangeIterateContext(makeIteratePath(itemPath, ''), transformedValue);
-    }
     if (asyncBehaviorIsEnabled) {
       hideError();
-      await updateValue(transformedValue);
+      await updateValue(fromInput);
     } else {
-      updateValue(transformedValue);
+      updateValue(fromInput);
     }
     if (isAsync(onChange)) {
       addToPool('onChangeLocal', async () => {
@@ -867,7 +870,7 @@ export default function useFieldProps(localeProps, {
       setEventResult(onChange === null || onChange === void 0 ? void 0 : onChange.apply(this, args));
     }
     await runPool();
-  }, [itemPath, asyncBehaviorIsEnabled, onChange, runPool, handleChangeIterateContext, makeIteratePath, hideError, updateValue, addToPool, getEventArgs, yieldAsyncProcess, defineAsyncProcess, hasError, setEventResult]);
+  }, [asyncBehaviorIsEnabled, onChange, runPool, hideError, updateValue, addToPool, getEventArgs, yieldAsyncProcess, defineAsyncProcess, hasError, setEventResult]);
   const handleFocus = useCallback(() => setHasFocus(true), [setHasFocus]);
   const handleBlur = useCallback(() => setHasFocus(false), [setHasFocus]);
   setFieldPropsDataContext === null || setFieldPropsDataContext === void 0 ? void 0 : setFieldPropsDataContext(identifier, props);
@@ -973,12 +976,12 @@ export default function useFieldProps(localeProps, {
     let valueToStore = valueProp;
     const data = wizardContext !== null && wizardContext !== void 0 && wizardContext.prerenderFieldProps ? dataContext.data : (_dataContext$internal = dataContext.internalDataRef) === null || _dataContext$internal === void 0 ? void 0 : _dataContext$internal.current;
     const hasValue = pointer.has(data, identifier) || identifier === '/';
-    const existingValue = identifier === '/' ? data : hasValue ? pointer.get(data, identifier) : undefined;
+    const existingValue = transformers.current.transformIn(identifier === '/' ? data : hasValue ? pointer.get(data, identifier) : undefined);
     if (dataContext.id && !hasValue && typeof existingValue === 'undefined' && typeof valueToStore === 'undefined') {
       const sharedState = createSharedState(dataContext.id);
       const hasValue = pointer.has(sharedState.data, identifier);
       if (hasValue) {
-        const sharedValue = pointer.get(sharedState.data, identifier);
+        const sharedValue = transformers.current.transformIn(pointer.get(sharedState.data, identifier));
         if (sharedValue) {
           valueToStore = sharedValue;
         }
@@ -1162,7 +1165,7 @@ export default function useFieldProps(localeProps, {
     name: props.name || ((_props$path = props.path) === null || _props$path === void 0 ? void 0 : _props$path.replace('/', '')) || id,
     autoComplete: (_props$autoComplete = props.autoComplete) !== null && _props$autoComplete !== void 0 ? _props$autoComplete : dataContext.autoComplete === true ? 'on' : undefined,
     id,
-    value: transformers.current.transformIn(transformers.current.toInput(valueRef.current)),
+    value: transformers.current.toInput(valueRef.current),
     hasError: hasVisibleError,
     isChanged: Boolean(changedRef.current),
     props,