@dnb/eufemia 10.19.0 → 10.20.0

package/extensions/forms/StepsLayout/StepsLayout.js

@@ -2,60 +2,64 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "id", "mode", "scrollTopOnStepChange", "initialActiveIndex", "onStepChange", "children"];
+const _excluded = ["className", "id", "mode", "scrollTopOnStepChange", "initialActiveIndex", "onStepChange", "children", "noAnimation", "variant", "sidebarId"];
 import React, { useContext, useState, useCallback } from 'react';
 import classnames from 'classnames';
 import { Space, StepIndicator } from '../../../components';
-import { makeUniqueId } from '../../../shared/component-helper';
+import { warn } from '../../../shared/component-helper';
 import DataContext from '../DataContext/Context';
 import Step from './Step';
 import StepsContext from './StepsContext';
 import NextButton from './NextButton';
 import PreviousButton from './PreviousButton';
 import Buttons from './Buttons';
+import Provider from '../DataContext/Provider';
+import useId from '../hooks/useId';
 function StepsLayout(props) {
   const {
       className,
-      id = makeUniqueId(),
+      id: _id,
       mode = 'strict',
       scrollTopOnStepChange,
       initialActiveIndex = 0,
       onStepChange,
-      children
+      children,
+      noAnimation = true,
+      variant = 'sidebar',
+      sidebarId
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
   const dataContext = useContext(DataContext);
+  const {
+    hasContext,
+    hasErrors,
+    setShowAllErrors,
+    scrollToTop
+  } = dataContext;
   const [activeIndex, setActiveIndex] = useState(initialActiveIndex);
+  const id = useId(_id);
   const handlePrevious = useCallback(() => {
     setActiveIndex(activeIndex => {
       onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(activeIndex - 1);
       return activeIndex - 1;
     });
     if (scrollTopOnStepChange) {
-      var _window;
-      (_window = window) === null || _window === void 0 ? void 0 : _window.scrollTo({
-        top: 0,
-        behavior: 'smooth'
-      });
+      scrollToTop();
     }
-  }, [scrollTopOnStepChange, onStepChange]);
+  }, [scrollTopOnStepChange, onStepChange, scrollToTop]);
   const handleNext = useCallback(() => {
-    if (!dataContext.hasErrors()) {
+    if (!hasErrors()) {
       setActiveIndex(activeIndex => {
         onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(activeIndex + 1);
         return activeIndex + 1;
       });
       if (scrollTopOnStepChange) {
-        var _window2;
-        (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.scrollTo({
-          top: 0,
-          behavior: 'smooth'
-        });
+        scrollToTop();
       }
     } else {
-      dataContext.setShowAllErrors(true);
+      setShowAllErrors(true);
     }
-  }, [dataContext, scrollTopOnStepChange, onStepChange]);
+  }, [hasErrors, scrollTopOnStepChange, onStepChange, scrollToTop, setShowAllErrors]);
   const stepIndicatorData = React.Children.map(children, child => {
     var _child$props$title;
     if (!React.isValidElement(child) || child.type !== Step) {
@@ -69,6 +73,12 @@ function StepsLayout(props) {
     } = _ref;
     setActiveIndex(current_step);
   }, []);
+  if (!hasContext) {
+    warn('You may wrap StepsLayout in Form.Handler');
+    return React.createElement(Provider, null, React.createElement(StepsLayout, _extends({}, props, {
+      id: id
+    })));
+  }
   return React.createElement(StepsContext.Provider, {
     value: {
       activeIndex,
@@ -76,7 +86,7 @@ function StepsLayout(props) {
       handleNext
     }
   }, React.createElement(Space, _extends({
-    className: classnames('dnb-forms-steps-layout', className)
+    className: classnames('dnb-forms-steps-layout', className, variant === 'drawer' && 'dnb-forms-steps-layout--drawer')
   }, rest), React.createElement("aside", {
     className: "dnb-forms-steps-layout__sidebar"
   }, React.createElement(StepIndicator.Sidebar, {
@@ -86,10 +96,9 @@ function StepsLayout(props) {
     current_step: activeIndex,
     data: stepIndicatorData,
     mode: mode,
-    no_animation: true,
+    no_animation: noAnimation,
     on_change: handleChange,
-    sidebar_id: id,
-    title: ""
+    sidebar_id: variant === 'drawer' && !sidebarId ? '' : sidebarId ? sidebarId : id
   })), React.createElement("div", {
     className: "dnb-forms-steps-layout__contents"
   }, React.Children.map(children, (child, i) => {

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

@@ -1 +1 @@
-{"version":3,"file":"StepsLayout.js","names":["React","useContext","useState","useCallback","classnames","Space","StepIndicator","makeUniqueId","DataContext","Step","StepsContext","NextButton","PreviousButton","Buttons","StepsLayout","props","className","id","mode","scrollTopOnStepChange","initialActiveIndex","onStepChange","children","rest","_objectWithoutProperties","_excluded","dataContext","activeIndex","setActiveIndex","handlePrevious","_window","window","scrollTo","top","behavior","handleNext","hasErrors","_window2","setShowAllErrors","stepIndicatorData","Children","map","child","_child$props$title","isValidElement","type","Error","title","handleChange","_ref","current_step","createElement","Provider","value","_extends","Sidebar","sidebar_id","bottom","data","no_animation","on_change","i","cloneElement","index","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/StepsLayout/StepsLayout.tsx"],"sourcesContent":["import React, { useContext, useState, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Space, StepIndicator } from '../../../components'\nimport { makeUniqueId } from '../../../shared/component-helper'\nimport { ComponentProps } from '../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 = 'strict',\n    scrollTopOnStepChange,\n    initialActiveIndex = 0,\n    onStepChange,\n    children,\n    ...rest\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      <Space\n        className={classnames('dnb-forms-steps-layout', className)}\n        {...rest}\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      </Space>\n    </StepsContext.Provider>\n  )\n}\n\nStepsLayout._supportsSpacingProps = 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","Space","StepIndicator","warn","DataContext","Step","StepsContext","NextButton","PreviousButton","Buttons","Provider","useId","StepsLayout","props","className","id","_id","mode","scrollTopOnStepChange","initialActiveIndex","onStepChange","children","noAnimation","variant","sidebarId","rest","_objectWithoutProperties","_excluded","dataContext","hasContext","hasErrors","setShowAllErrors","scrollToTop","activeIndex","setActiveIndex","handlePrevious","handleNext","stepIndicatorData","Children","map","child","_child$props$title","isValidElement","type","Error","title","handleChange","_ref","current_step","createElement","_extends","value","Sidebar","sidebar_id","bottom","data","no_animation","on_change","i","cloneElement","index","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/StepsLayout/StepsLayout.tsx"],"sourcesContent":["import React, { useContext, useState, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Space, StepIndicator } from '../../../components'\nimport { warn } from '../../../shared/component-helper'\nimport { ComponentProps } from '../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'\nimport Provider from '../DataContext/Provider'\nimport useId from '../hooks/useId'\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  variant?: 'sidebar' | 'drawer'\n  noAnimation?: boolean\n  sidebarId?: string\n}\n\nfunction StepsLayout(props: Props) {\n  const {\n    className,\n    id: _id,\n    mode = 'strict',\n    scrollTopOnStepChange,\n    initialActiveIndex = 0,\n    onStepChange,\n    children,\n    noAnimation = true,\n    variant = 'sidebar',\n    sidebarId,\n    ...rest\n  } = props\n  const dataContext = useContext(DataContext)\n  const { hasContext, hasErrors, setShowAllErrors, scrollToTop } =\n    dataContext\n\n  const [activeIndex, setActiveIndex] =\n    useState<number>(initialActiveIndex)\n\n  const id = useId(_id)\n\n  const handlePrevious = useCallback(() => {\n    setActiveIndex((activeIndex) => {\n      onStepChange?.(activeIndex - 1)\n      return activeIndex - 1\n    })\n    if (scrollTopOnStepChange) {\n      scrollToTop()\n    }\n  }, [scrollTopOnStepChange, onStepChange, scrollToTop])\n\n  const handleNext = useCallback(() => {\n    if (!hasErrors()) {\n      setActiveIndex((activeIndex) => {\n        onStepChange?.(activeIndex + 1)\n        return activeIndex + 1\n      })\n      if (scrollTopOnStepChange) {\n        scrollToTop()\n      }\n    } else {\n      setShowAllErrors(true)\n    }\n  }, [\n    hasErrors,\n    scrollTopOnStepChange,\n    onStepChange,\n    scrollToTop,\n    setShowAllErrors,\n  ])\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  if (!hasContext) {\n    warn('You may wrap StepsLayout in Form.Handler')\n    return (\n      <Provider>\n        <StepsLayout {...props} id={id} />\n      </Provider>\n    )\n  }\n\n  return (\n    <StepsContext.Provider\n      value={{\n        activeIndex,\n        handlePrevious,\n        handleNext,\n      }}\n    >\n      <Space\n        className={classnames(\n          'dnb-forms-steps-layout',\n          variant === 'drawer' && 'dnb-forms-steps-layout--drawer',\n          className\n        )}\n        {...rest}\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={noAnimation}\n            on_change={handleChange}\n            sidebar_id={\n              variant === 'drawer' && !sidebarId\n                ? ''\n                : sidebarId\n                ? sidebarId\n                : id\n            }\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      </Space>\n    </StepsContext.Provider>\n  )\n}\n\nStepsLayout._supportsSpacingProps = 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/extensions/forms/StepsLayout/style/dnb-steps-layout.css

@@ -7,8 +7,14 @@
   -moz-column-gap: var(--spacing-medium);
        column-gap: var(--spacing-medium);
 }
+.dnb-forms-steps-layout--drawer {
+  flex-direction: column;
+  justify-content: stretch;
+  align-items: stretch;
+}
 .dnb-forms-steps-layout__sidebar {
   flex: 0;
+  margin-bottom: 2rem;
 }
 .dnb-forms-steps-layout__contents {
   flex: 1 0 25rem;

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

@@ -1 +1 @@
-.dnb-forms-steps-layout{-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}.dnb-forms-steps-layout__sidebar{flex:0}.dnb-forms-steps-layout__contents{flex:1 0 25rem}.dnb-forms-steps-layout__contents .dnb-card{--border-color:var(--color-pistachio)}@media screen and (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-steps-layout__contents{flex-basis:auto}}.dnb-forms-steps-layout .dnb-step-indicator__sidebar{margin-right:0}
+.dnb-forms-steps-layout{-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}.dnb-forms-steps-layout--drawer{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-steps-layout__sidebar{flex:0;margin-bottom:2rem}.dnb-forms-steps-layout__contents{flex:1 0 25rem}.dnb-forms-steps-layout__contents .dnb-card{--border-color:var(--color-pistachio)}@media screen and (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-steps-layout__contents{flex-basis:auto}}.dnb-forms-steps-layout .dnb-step-indicator__sidebar{margin-right:0}

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

@@ -5,8 +5,15 @@
   flex-flow: row wrap;
   column-gap: var(--spacing-medium);
 
+  &--drawer {
+    flex-direction: column;
+    justify-content: stretch;
+    align-items: stretch;
+  }
+
   &__sidebar {
     flex: 0;
+    margin-bottom: 2rem;
   }
 
   &__contents {

package/extensions/forms/Value/Currency/Currency.js

@@ -4,11 +4,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import NumberValue from '../Number';
 function Currency(props) {
-  var _props$thousandSepara, _props$suffix;
+  var _props$currency;
   const numberProps = _objectSpread(_objectSpread({}, props), {}, {
     label: props.label,
-    thousandSeparator: (_props$thousandSepara = props.thousandSeparator) !== null && _props$thousandSepara !== void 0 ? _props$thousandSepara : ' ',
-    suffix: (_props$suffix = props.suffix) !== null && _props$suffix !== void 0 ? _props$suffix : ' kr'
+    currency: (_props$currency = props.currency) !== null && _props$currency !== void 0 ? _props$currency : true
   });
   return React.createElement(NumberValue, numberProps);
 }

package/extensions/forms/Value/Currency/Currency.js.map

@@ -1 +1 @@
-{"version":3,"file":"Currency.js","names":["React","NumberValue","Currency","props","_props$thousandSepara","_props$suffix","numberProps","_objectSpread","label","thousandSeparator","suffix","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/Currency/Currency.tsx"],"sourcesContent":["import React from 'react'\nimport NumberValue, { Props as NumberValueProps } from '../Number'\n\nexport type Props = NumberValueProps\n\nfunction Currency(props: Props) {\n  const numberProps: Props = {\n    ...props,\n    label: props.label,\n    thousandSeparator: props.thousandSeparator ?? ' ',\n    suffix: props.suffix ?? ' kr',\n  }\n  return <NumberValue {...numberProps} />\n}\n\nCurrency._supportsSpacingProps = true\nexport default Currency\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,WAAW,MAAqC,WAAW;AAIlE,SAASC,QAAQA,CAACC,KAAY,EAAE;EAAA,IAAAC,qBAAA,EAAAC,aAAA;EAC9B,MAAMC,WAAkB,GAAAC,aAAA,CAAAA,aAAA,KACnBJ,KAAK;IACRK,KAAK,EAAEL,KAAK,CAACK,KAAK;IAClBC,iBAAiB,GAAAL,qBAAA,GAAED,KAAK,CAACM,iBAAiB,cAAAL,qBAAA,cAAAA,qBAAA,GAAI,GAAG;IACjDM,MAAM,GAAAL,aAAA,GAAEF,KAAK,CAACO,MAAM,cAAAL,aAAA,cAAAA,aAAA,GAAI;EAAK,EAC9B;EACD,OAAOL,KAAA,CAAAW,aAAA,CAACV,WAAW,EAAKK,WAAc,CAAC;AACzC;AAEAJ,QAAQ,CAACU,qBAAqB,GAAG,IAAI;AACrC,eAAeV,QAAQ"}
+{"version":3,"file":"Currency.js","names":["React","NumberValue","Currency","props","_props$currency","numberProps","_objectSpread","label","currency","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/Currency/Currency.tsx"],"sourcesContent":["import React from 'react'\nimport NumberValue, { Props as NumberValueProps } from '../Number'\n\nexport type Props = NumberValueProps\n\nfunction Currency(props: Props) {\n  const numberProps: Props = {\n    ...props,\n    label: props.label,\n    currency: props.currency ?? true,\n  }\n\n  return <NumberValue {...numberProps} />\n}\n\nCurrency._supportsSpacingProps = true\nexport default Currency\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,WAAW,MAAqC,WAAW;AAIlE,SAASC,QAAQA,CAACC,KAAY,EAAE;EAAA,IAAAC,eAAA;EAC9B,MAAMC,WAAkB,GAAAC,aAAA,CAAAA,aAAA,KACnBH,KAAK;IACRI,KAAK,EAAEJ,KAAK,CAACI,KAAK;IAClBC,QAAQ,GAAAJ,eAAA,GAAED,KAAK,CAACK,QAAQ,cAAAJ,eAAA,cAAAA,eAAA,GAAI;EAAI,EACjC;EAED,OAAOJ,KAAA,CAAAS,aAAA,CAACR,WAAW,EAAKI,WAAc,CAAC;AACzC;AAEAH,QAAQ,CAACQ,qBAAqB,GAAG,IAAI;AACrC,eAAeR,QAAQ"}

package/extensions/forms/Value/Number/Number.d.ts

@@ -1,13 +1,9 @@
 import { ValueProps } from '../../types';
-export type Props = ValueProps<number> & {
-    thousandSeparator?: string | true;
-    decimalSymbol?: string;
-    decimalLimit?: number;
-    prefix?: string;
-    suffix?: string;
-};
-declare function NumberComponent(props: Props): import("react/jsx-runtime").JSX.Element;
-declare namespace NumberComponent {
+import { NumberFormatProps } from '../../../../components/NumberFormat';
+import { ToCamelCase } from '../../../../shared/helpers/withCamelCaseProps';
+export type Props = ValueProps<number> & ToCamelCase<NumberFormatProps>;
+declare function NumberValue(props: Props): import("react/jsx-runtime").JSX.Element;
+declare namespace NumberValue {
     var _supportsSpacingProps: boolean;
 }
-export default NumberComponent;
+export default NumberValue;

package/extensions/forms/Value/Number/Number.js

@@ -1,37 +1,32 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "label", "placeholder", "inline", "showEmpty"];
 import React from 'react';
-import { formatNumber } from '../../utils';
+import classnames from 'classnames';
 import ValueBlock from '../../ValueBlock';
-import { useDataValue } from '../../hooks';
-import { pickSpacingProps } from '../../../../components/flex/utils';
-function NumberComponent(props) {
-  const {
-    className,
-    label,
-    placeholder,
-    value,
-    inline,
-    showEmpty,
-    thousandSeparator,
-    decimalSymbol,
-    decimalLimit,
-    prefix,
-    suffix
-  } = useDataValue(props);
+import useDataValue, { omitDataValueProps } from '../../hooks/useDataValue';
+import { omitSpacingProps, pickSpacingProps } from '../../../../components/flex/utils';
+import NumberFormat from '../../../../components/NumberFormat';
+import { convertCamelCaseProps } from '../../../../shared/helpers/withCamelCaseProps';
+function NumberValue(props) {
+  const _useDataValue = useDataValue(props),
+    {
+      className,
+      label,
+      placeholder,
+      inline,
+      showEmpty
+    } = _useDataValue,
+    rest = _objectWithoutProperties(_useDataValue, _excluded);
+  const numberFormatProps = convertCamelCaseProps(omitSpacingProps(omitDataValueProps(rest)));
   return React.createElement(ValueBlock, _extends({
-    className: className,
+    className: classnames('dnb-forms-value-number', className),
     label: label,
     showEmpty: showEmpty,
     placeholder: placeholder,
     inline: inline
-  }, pickSpacingProps(props)), value !== undefined ? formatNumber(value, {
-    thousandSeparator: thousandSeparator === true ? ' ' : thousandSeparator,
-    decimalSymbol,
-    decimalLimit,
-    prefix,
-    suffix
-  }) : null);
+  }, pickSpacingProps(rest)), rest.value && React.createElement(NumberFormat, numberFormatProps));
 }
-NumberComponent._supportsSpacingProps = true;
-export default NumberComponent;
+NumberValue._supportsSpacingProps = true;
+export default NumberValue;
 //# sourceMappingURL=Number.js.map

package/extensions/forms/Value/Number/Number.js.map

@@ -1 +1 @@
-{"version":3,"file":"Number.js","names":["React","formatNumber","ValueBlock","useDataValue","pickSpacingProps","NumberComponent","props","className","label","placeholder","value","inline","showEmpty","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","createElement","_extends","undefined","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/Number/Number.tsx"],"sourcesContent":["import React from 'react'\nimport { formatNumber } from '../../utils'\nimport ValueBlock from '../../ValueBlock'\nimport { useDataValue } from '../../hooks'\nimport { ValueProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\n\nexport type Props = ValueProps<number> & {\n  // Formatting\n  thousandSeparator?: string | true\n  decimalSymbol?: string\n  decimalLimit?: number\n  prefix?: string\n  suffix?: string\n}\n\nfunction NumberComponent(props: Props) {\n  const {\n    className,\n    label,\n    placeholder,\n    value,\n    inline,\n    showEmpty,\n    thousandSeparator,\n    decimalSymbol,\n    decimalLimit,\n    prefix,\n    suffix,\n  } = useDataValue(props)\n\n  return (\n    <ValueBlock\n      className={className}\n      label={label}\n      showEmpty={showEmpty}\n      placeholder={placeholder}\n      inline={inline}\n      {...pickSpacingProps(props)}\n    >\n      {value !== undefined\n        ? formatNumber(value, {\n            thousandSeparator:\n              thousandSeparator === true ? ' ' : thousandSeparator,\n            decimalSymbol,\n            decimalLimit,\n            prefix,\n            suffix,\n          })\n        : null}\n    </ValueBlock>\n  )\n}\n\nNumberComponent._supportsSpacingProps = true\nexport default NumberComponent\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,QAAQ,aAAa;AAC1C,OAAOC,UAAU,MAAM,kBAAkB;AACzC,SAASC,YAAY,QAAQ,aAAa;AAE1C,SAASC,gBAAgB,QAAQ,mCAAmC;AAWpE,SAASC,eAAeA,CAACC,KAAY,EAAE;EACrC,MAAM;IACJC,SAAS;IACTC,KAAK;IACLC,WAAW;IACXC,KAAK;IACLC,MAAM;IACNC,SAAS;IACTC,iBAAiB;IACjBC,aAAa;IACbC,YAAY;IACZC,MAAM;IACNC;EACF,CAAC,GAAGd,YAAY,CAACG,KAAK,CAAC;EAEvB,OACEN,KAAA,CAAAkB,aAAA,CAAChB,UAAU,EAAAiB,QAAA;IACTZ,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbI,SAAS,EAAEA,SAAU;IACrBH,WAAW,EAAEA,WAAY;IACzBE,MAAM,EAAEA;EAAO,GACXP,gBAAgB,CAACE,KAAK,CAAC,GAE1BI,KAAK,KAAKU,SAAS,GAChBnB,YAAY,CAACS,KAAK,EAAE;IAClBG,iBAAiB,EACfA,iBAAiB,KAAK,IAAI,GAAG,GAAG,GAAGA,iBAAiB;IACtDC,aAAa;IACbC,YAAY;IACZC,MAAM;IACNC;EACF,CAAC,CAAC,GACF,IACM,CAAC;AAEjB;AAEAZ,eAAe,CAACgB,qBAAqB,GAAG,IAAI;AAC5C,eAAehB,eAAe"}
+{"version":3,"file":"Number.js","names":["React","classnames","ValueBlock","useDataValue","omitDataValueProps","omitSpacingProps","pickSpacingProps","NumberFormat","convertCamelCaseProps","NumberValue","props","_useDataValue","className","label","placeholder","inline","showEmpty","rest","_objectWithoutProperties","_excluded","numberFormatProps","createElement","_extends","value","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/Number/Number.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport ValueBlock from '../../ValueBlock'\nimport useDataValue, { omitDataValueProps } from '../../hooks/useDataValue'\nimport { ValueProps } from '../../types'\nimport {\n  omitSpacingProps,\n  pickSpacingProps,\n} from '../../../../components/flex/utils'\nimport NumberFormat, {\n  NumberFormatProps,\n} from '../../../../components/NumberFormat'\nimport {\n  ToCamelCase,\n  convertCamelCaseProps,\n} from '../../../../shared/helpers/withCamelCaseProps'\n\nexport type Props = ValueProps<number> & ToCamelCase<NumberFormatProps>\n\nfunction NumberValue(props: Props) {\n  const { className, label, placeholder, inline, showEmpty, ...rest } =\n    useDataValue(props)\n\n  const numberFormatProps = convertCamelCaseProps(\n    omitSpacingProps(omitDataValueProps(rest)) as NumberFormatProps\n  )\n\n  return (\n    <ValueBlock\n      className={classnames('dnb-forms-value-number', className)}\n      label={label}\n      showEmpty={showEmpty}\n      placeholder={placeholder}\n      inline={inline}\n      {...pickSpacingProps(rest)}\n    >\n      {rest.value && <NumberFormat {...numberFormatProps} />}\n    </ValueBlock>\n  )\n}\n\nNumberValue._supportsSpacingProps = true\nexport default NumberValue\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAAM,kBAAkB;AACzC,OAAOC,YAAY,IAAIC,kBAAkB,QAAQ,0BAA0B;AAE3E,SACEC,gBAAgB,EAChBC,gBAAgB,QACX,mCAAmC;AAC1C,OAAOC,YAAY,MAEZ,qCAAqC;AAC5C,SAEEC,qBAAqB,QAChB,+CAA+C;AAItD,SAASC,WAAWA,CAACC,KAAY,EAAE;EACjC,MAAAC,aAAA,GACER,YAAY,CAACO,KAAK,CAAC;IADf;MAAEE,SAAS;MAAEC,KAAK;MAAEC,WAAW;MAAEC,MAAM;MAAEC;IAAmB,CAAC,GAAAL,aAAA;IAANM,IAAI,GAAAC,wBAAA,CAAAP,aAAA,EAAAQ,SAAA;EAGjE,MAAMC,iBAAiB,GAAGZ,qBAAqB,CAC7CH,gBAAgB,CAACD,kBAAkB,CAACa,IAAI,CAAC,CAC3C,CAAC;EAED,OACEjB,KAAA,CAAAqB,aAAA,CAACnB,UAAU,EAAAoB,QAAA;IACTV,SAAS,EAAEX,UAAU,CAAC,wBAAwB,EAAEW,SAAS,CAAE;IAC3DC,KAAK,EAAEA,KAAM;IACbG,SAAS,EAAEA,SAAU;IACrBF,WAAW,EAAEA,WAAY;IACzBC,MAAM,EAAEA;EAAO,GACXT,gBAAgB,CAACW,IAAI,CAAC,GAEzBA,IAAI,CAACM,KAAK,IAAIvB,KAAA,CAAAqB,aAAA,CAACd,YAAY,EAAKa,iBAAoB,CAC3C,CAAC;AAEjB;AAEAX,WAAW,CAACe,qBAAqB,GAAG,IAAI;AACxC,eAAef,WAAW"}

package/extensions/forms/Value/PhoneNumber/PhoneNumber.js

@@ -10,11 +10,13 @@ import { format, cleanNumber } from '../../../../components/number-format/Number
 function PhoneNumber(props) {
   var _props$label;
   const sharedContext = useContext(SharedContext);
+  const label = (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : props.inline ? undefined : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.phoneNumberLabel;
+  const prepare = value => format(cleanNumber(value), {
+    phone: true
+  }).toString();
   const stringValueProps = _objectSpread(_objectSpread({}, props), {}, {
-    label: (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : props.inline ? undefined : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.phoneNumberLabel,
-    prepare: value => format(cleanNumber(value), {
-      phone: true
-    }).toString()
+    label,
+    prepare
   });
   return React.createElement(StringValue, stringValueProps);
 }

package/extensions/forms/Value/PhoneNumber/PhoneNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumber.js","names":["React","useContext","StringValue","SharedContext","format","cleanNumber","PhoneNumber","props","_props$label","sharedContext","stringValueProps","_objectSpread","label","inline","undefined","translation","Forms","phoneNumberLabel","prepare","value","phone","toString","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/PhoneNumber/PhoneNumber.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport StringValue, { Props as StringValueProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\nimport {\n  format,\n  cleanNumber,\n} from '../../../../components/number-format/NumberUtils'\n\nexport type Props = StringValueProps\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const stringValueProps: Props = {\n    ...props,\n    label:\n      props.label ??\n      (props.inline\n        ? undefined\n        : sharedContext?.translation.Forms.phoneNumberLabel),\n    prepare: (value) =>\n      format(cleanNumber(value), {\n        phone: true,\n      }).toString(),\n  }\n  return <StringValue {...stringValueProps} />\n}\n\nPhoneNumber._supportsSpacingProps = true\nexport default PhoneNumber\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,aAAa,MAAM,4BAA4B;AACtD,SACEC,MAAM,EACNC,WAAW,QACN,kDAAkD;AAIzD,SAASC,WAAWA,CAACC,KAAY,EAAE;EAAA,IAAAC,YAAA;EACjC,MAAMC,aAAa,GAAGR,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAMO,gBAAuB,GAAAC,aAAA,CAAAA,aAAA,KACxBJ,KAAK;IACRK,KAAK,GAAAJ,YAAA,GACHD,KAAK,CAACK,KAAK,cAAAJ,YAAA,cAAAA,YAAA,GACVD,KAAK,CAACM,MAAM,GACTC,SAAS,GACTL,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEM,WAAW,CAACC,KAAK,CAACC,gBAAiB;IACxDC,OAAO,EAAGC,KAAK,IACbf,MAAM,CAACC,WAAW,CAACc,KAAK,CAAC,EAAE;MACzBC,KAAK,EAAE;IACT,CAAC,CAAC,CAACC,QAAQ,CAAC;EAAC,EAChB;EACD,OAAOrB,KAAA,CAAAsB,aAAA,CAACpB,WAAW,EAAKQ,gBAAmB,CAAC;AAC9C;AAEAJ,WAAW,CAACiB,qBAAqB,GAAG,IAAI;AACxC,eAAejB,WAAW"}
+{"version":3,"file":"PhoneNumber.js","names":["React","useContext","StringValue","SharedContext","format","cleanNumber","PhoneNumber","props","_props$label","sharedContext","label","inline","undefined","translation","Forms","phoneNumberLabel","prepare","value","phone","toString","stringValueProps","_objectSpread","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/PhoneNumber/PhoneNumber.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport StringValue, { Props as StringValueProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\nimport {\n  format,\n  cleanNumber,\n} from '../../../../components/number-format/NumberUtils'\n\nexport type Props = StringValueProps\n\nfunction PhoneNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const label =\n    props.label ??\n    (props.inline\n      ? undefined\n      : sharedContext?.translation.Forms.phoneNumberLabel)\n  const prepare = (value) =>\n    format(cleanNumber(value), {\n      phone: true,\n    }).toString()\n  const stringValueProps: Props = {\n    ...props,\n    label,\n    prepare,\n  }\n\n  return <StringValue {...stringValueProps} />\n}\n\nPhoneNumber._supportsSpacingProps = true\nexport default PhoneNumber\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,aAAa,MAAM,4BAA4B;AACtD,SACEC,MAAM,EACNC,WAAW,QACN,kDAAkD;AAIzD,SAASC,WAAWA,CAACC,KAAY,EAAE;EAAA,IAAAC,YAAA;EACjC,MAAMC,aAAa,GAAGR,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAMO,KAAK,IAAAF,YAAA,GACTD,KAAK,CAACG,KAAK,cAAAF,YAAA,cAAAA,YAAA,GACVD,KAAK,CAACI,MAAM,GACTC,SAAS,GACTH,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACC,gBAAiB;EACxD,MAAMC,OAAO,GAAIC,KAAK,IACpBb,MAAM,CAACC,WAAW,CAACY,KAAK,CAAC,EAAE;IACzBC,KAAK,EAAE;EACT,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC;EACf,MAAMC,gBAAuB,GAAAC,aAAA,CAAAA,aAAA,KACxBd,KAAK;IACRG,KAAK;IACLM;EAAO,EACR;EAED,OAAOhB,KAAA,CAAAsB,aAAA,CAACpB,WAAW,EAAKkB,gBAAmB,CAAC;AAC9C;AAEAd,WAAW,CAACiB,qBAAqB,GAAG,IAAI;AACxC,eAAejB,WAAW"}

package/extensions/forms/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export { default as useDataValue } from './useDataValue';
+export { default as useErrorMessage } from './useErrorMessage';
 export { default as useMountEffect } from './useMountEffect';
 export { default as useUpdateEffect } from './useUpdateEffect';
 export { default as useProcessManager } from './useProcessManager';

package/extensions/forms/hooks/index.js

@@ -1,4 +1,5 @@
 export { default as useDataValue } from './useDataValue';
+export { default as useErrorMessage } from './useErrorMessage';
 export { default as useMountEffect } from './useMountEffect';
 export { default as useUpdateEffect } from './useUpdateEffect';
 export { default as useProcessManager } from './useProcessManager';

package/extensions/forms/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","useDataValue","useMountEffect","useUpdateEffect","useProcessManager"],"sources":["../../../../../src/extensions/forms/hooks/index.ts"],"sourcesContent":["export { default as useDataValue } from './useDataValue'\nexport { default as useMountEffect } from './useMountEffect'\nexport { default as useUpdateEffect } from './useUpdateEffect'\nexport { default as useProcessManager } from './useProcessManager'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,YAAY,QAAQ,gBAAgB;AACxD,SAASD,OAAO,IAAIE,cAAc,QAAQ,kBAAkB;AAC5D,SAASF,OAAO,IAAIG,eAAe,QAAQ,mBAAmB;AAC9D,SAASH,OAAO,IAAII,iBAAiB,QAAQ,qBAAqB"}
+{"version":3,"file":"index.js","names":["default","useDataValue","useErrorMessage","useMountEffect","useUpdateEffect","useProcessManager"],"sources":["../../../../../src/extensions/forms/hooks/index.ts"],"sourcesContent":["export { default as useDataValue } from './useDataValue'\nexport { default as useErrorMessage } from './useErrorMessage'\nexport { default as useMountEffect } from './useMountEffect'\nexport { default as useUpdateEffect } from './useUpdateEffect'\nexport { default as useProcessManager } from './useProcessManager'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,YAAY,QAAQ,gBAAgB;AACxD,SAASD,OAAO,IAAIE,eAAe,QAAQ,mBAAmB;AAC9D,SAASF,OAAO,IAAIG,cAAc,QAAQ,kBAAkB;AAC5D,SAASH,OAAO,IAAII,eAAe,QAAQ,mBAAmB;AAC9D,SAASJ,OAAO,IAAIK,iBAAiB,QAAQ,qBAAqB"}

package/extensions/forms/hooks/useDataValue.d.ts

@@ -1,10 +1,15 @@
 import { FormError, FieldProps } from '../types';
 import { ContextState } from '../DataContext';
+export default function useDataValue<Value = unknown, Props extends FieldProps<Value> = FieldProps<Value>>(props: Props): Props & ReturnAdditional<Value>;
 interface ReturnAdditional<Value> {
     id: string;
+    name: string;
     value: Value;
     error: Error | FormError | undefined;
+    autoComplete: HTMLInputElement['autocomplete'];
+    disabled: boolean;
     hasError: boolean;
+    isChanged: boolean;
     dataContext: ContextState;
     ariaAttributes: {
         'aria-invalid'?: 'true' | 'false';
@@ -17,5 +22,5 @@ interface ReturnAdditional<Value> {
     updateValue: (value: Value) => void;
     forceUpdate: () => void;
 }
-export default function useDataValue<Value = unknown, Props extends FieldProps<Value> = FieldProps<Value>>(props: Props): Props & ReturnAdditional<Value>;
+export declare function omitDataValueProps<OmittedProps extends ReturnAdditional<unknown>>(props: OmittedProps): Omit<OmittedProps, keyof ReturnAdditional<unknown>>;
 export {};

package/extensions/forms/hooks/useDataValue.js

@@ -1,14 +1,17 @@
 "use client";
 
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+const _excluded = ["name", "error", "hasError", "isChanged", "autoComplete", "ariaAttributes", "dataContext", "setHasFocus", "handleFocus", "handleBlur", "handleChange", "updateValue", "forceUpdate"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { useRef, useEffect, useContext, useCallback, useMemo, useReducer } from 'react';
 import pointer from 'json-pointer';
 import { errorChanged } from '../utils';
-import ajv, { ajvErrorsToOneFormError } from '../utils/ajv';
+import { ajvErrorsToOneFormError } from '../utils/ajv';
 import { FormError } from '../types';
 import { Context } from '../DataContext';
+import SharedContext from '../../../shared/Context';
 import FieldBlockContext from '../FieldBlock/FieldBlockContext';
 import IterateElementContext from '../Iterate/IterateElementContext';
 import useMountEffect from './useMountEffect';
@@ -16,7 +19,9 @@ import useUpdateEffect from './useUpdateEffect';
 import useProcessManager from './useProcessManager';
 import useId from './useId';
 export default function useDataValue(props) {
-  var _this = this,
+  var _props$disabled,
+    _dataContext$ajvInsta,
+    _this = this,
     _ref3,
     _props$path,
     _props$autoComplete;
@@ -51,6 +56,7 @@ export default function useDataValue(props) {
       return res;
     }
   } = props;
+  const disabled = (_props$disabled = props.disabled) !== null && _props$disabled !== void 0 ? _props$disabled : props.readOnly;
   const [, forceUpdate] = useReducer(() => ({}), {});
   const {
     startProcess
@@ -59,6 +65,8 @@ export default function useDataValue(props) {
   const dataContext = useContext(Context);
   const fieldBlockContext = useContext(FieldBlockContext);
   const iterateElementContext = useContext(IterateElementContext);
+  const sharedContext = useContext(SharedContext);
+  const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
   const transformers = useRef({
     toInput,
     fromInput,
@@ -70,8 +78,11 @@ export default function useDataValue(props) {
   const {
     handlePathChange: dataContextHandlePathChange,
     updateDataValue: dataContextUpdateDataValue,
+    validateData: dataContextValidateData,
     setValueWithError: dataContextSetValueWithError,
-    errors: dataContextErrors
+    setProps: dataContextSetProps,
+    errors: dataContextErrors,
+    contextErrorMessages
   } = dataContext !== null && dataContext !== void 0 ? dataContext : {};
   const dataContextError = path ? dataContextErrors === null || dataContextErrors === void 0 ? void 0 : dataContextErrors[path] : undefined;
   const inFieldBlock = Boolean(fieldBlockContext);
@@ -121,16 +132,13 @@ export default function useDataValue(props) {
   const showErrorInitially = validateInitially || errorProp;
   const localErrorRef = useRef();
   const contextErrorRef = useRef(dataContextError);
+  dataContextSetProps === null || dataContextSetProps === void 0 ? void 0 : dataContextSetProps(identifier, props);
   const showErrorRef = useRef(Boolean(showErrorInitially));
-  const errorMessagesRef = useRef(errorMessages);
-  useEffect(() => {
-    errorMessagesRef.current = errorMessages;
-  }, [errorMessages]);
   const validatorRef = useRef(validator);
-  useEffect(() => {
+  useUpdateEffect(() => {
     validatorRef.current = validator;
   }, [validator]);
-  const schemaValidatorRef = useRef(schema ? ajv.compile(schema) : undefined);
+  const schemaValidatorRef = useRef(schema ? (_dataContext$ajvInsta = dataContext.ajvInstance) === null || _dataContext$ajvInsta === void 0 ? void 0 : _dataContext$ajvInsta.compile(schema) : undefined);
   const showError = useCallback(() => {
     showErrorRef.current = true;
     setShowFieldBlockError === null || setShowFieldBlockError === void 0 ? void 0 : setShowFieldBlockError(path !== null && path !== void 0 ? path : id, true);
@@ -139,13 +147,29 @@ export default function useDataValue(props) {
     showErrorRef.current = false;
     setShowFieldBlockError === null || setShowFieldBlockError === void 0 ? void 0 : setShowFieldBlockError(path !== null && path !== void 0 ? path : id, false);
   }, [path, id, setShowFieldBlockError]);
+  const errorMessagesRef = useRef(null);
+  errorMessagesRef.current = useMemo(() => {
+    return _objectSpread({
+      required: tr.fieldErrorRequired
+    }, errorMessages);
+  }, [errorMessages, tr.fieldErrorRequired]);
   const prepareError = useCallback(error => {
     if (error === undefined) {
       return;
     }
     if (error instanceof FormError) {
-      var _errorMessagesRef$cur, _error$messageValues;
-      const message = typeof error.validationRule === 'string' && ((_errorMessagesRef$cur = errorMessagesRef.current) === null || _errorMessagesRef$cur === void 0 ? void 0 : _errorMessagesRef$cur[error.validationRule]) || error.message;
+      var _error$messageValues;
+      let message = error.message;
+      const {
+        validationRule
+      } = error;
+      if (typeof validationRule === 'string') {
+        var _errorMessagesRef$cur;
+        const fieldMessage = (_errorMessagesRef$cur = errorMessagesRef.current) === null || _errorMessagesRef$cur === void 0 ? void 0 : _errorMessagesRef$cur[validationRule];
+        if (fieldMessage) {
+          message = fieldMessage;
+        }
+      }
       const messageWithValues = Object.entries((_error$messageValues = error.messageValues) !== null && _error$messageValues !== void 0 ? _error$messageValues : {}).reduce((message, _ref2) => {
         let [key, value] = _ref2;
         return message.replace(`{${key}}`, value);
@@ -167,6 +191,13 @@ export default function useDataValue(props) {
   const clearErrorState = useCallback(() => persistErrorState(undefined), [persistErrorState]);
   const validateValue = useCallback(async () => {
     const isProcessActive = startProcess();
+    if (disabled) {
+      if (isProcessActive()) {
+        clearErrorState();
+      }
+      hideError();
+      return;
+    }
     try {
       const requiredError = transformers.current.validateRequired(valueRef.current, {
         emptyValue,
@@ -185,7 +216,7 @@ export default function useDataValue(props) {
       }
       if (validatorRef.current) {
         var _validatorRef$current;
-        const res = await ((_validatorRef$current = validatorRef.current) === null || _validatorRef$current === void 0 ? void 0 : _validatorRef$current.call(validatorRef, valueRef.current, errorMessagesRef.current));
+        const res = await ((_validatorRef$current = validatorRef.current) === null || _validatorRef$current === void 0 ? void 0 : _validatorRef$current.call(validatorRef, valueRef.current, _objectSpread(_objectSpread({}, contextErrorMessages), errorMessagesRef.current)));
         if (res instanceof Error) {
           throw res;
         }
@@ -198,9 +229,10 @@ export default function useDataValue(props) {
         persistErrorState(error);
       }
     }
-  }, [startProcess, emptyValue, required, clearErrorState, persistErrorState]);
+  }, [startProcess, disabled, hideError, clearErrorState, emptyValue, required, contextErrorMessages, persistErrorState]);
   useUpdateEffect(() => {
-    schemaValidatorRef.current = schema ? ajv.compile(schema) : undefined;
+    var _dataContext$ajvInsta2;
+    schemaValidatorRef.current = schema ? (_dataContext$ajvInsta2 = dataContext.ajvInstance) === null || _dataContext$ajvInsta2 === void 0 ? void 0 : _dataContext$ajvInsta2.compile(schema) : undefined;
     validateValue();
   }, [schema, validateValue]);
   useUpdateEffect(() => {
@@ -222,14 +254,17 @@ export default function useDataValue(props) {
     }
   }, [dataContext.showAllErrors, showError]);
   useEffect(() => {
-    if (path && typeof props.value !== 'undefined') {
+    if (path) {
       const hasValue = pointer.has(dataContext.data, path);
-      const value = hasValue ? pointer.get(dataContext.data, path) : undefined;
-      if (!hasValue || props.value !== value && valueRef.current !== value) {
-        dataContextUpdateDataValue === null || dataContextUpdateDataValue === void 0 ? void 0 : dataContextUpdateDataValue(path, props.value);
+      const existingValue = hasValue ? pointer.get(dataContext.data, path) : undefined;
+      if (!hasValue || props.value !== existingValue && valueRef.current !== existingValue) {
+        dataContextUpdateDataValue === null || dataContextUpdateDataValue === void 0 ? void 0 : dataContextUpdateDataValue(path, props.value, {
+          disabled
+        });
+        dataContextValidateData === null || dataContextValidateData === void 0 ? void 0 : dataContextValidateData();
       }
     }
-  }, [dataContext.data, dataContextUpdateDataValue, path, props.value]);
+  }, [dataContext.data, dataContextUpdateDataValue, dataContextValidateData, disabled, path, props.value]);
   const handleError = useCallback(() => {
     if (continuousValidation || continuousValidation !== false && !hasFocusRef.current) {
       showError();
@@ -314,6 +349,7 @@ export default function useDataValue(props) {
     hasError: Boolean(error),
     isChanged: changedRef.current,
     autoComplete: (_props$autoComplete = props.autoComplete) !== null && _props$autoComplete !== void 0 ? _props$autoComplete : dataContext.autoComplete === true ? 'on' : 'off',
+    disabled,
     ariaAttributes,
     dataContext,
     setHasFocus,
@@ -324,4 +360,23 @@ export default function useDataValue(props) {
     forceUpdate
   });
 }
+export function omitDataValueProps(props) {
+  const {
+      name,
+      error,
+      hasError,
+      isChanged,
+      autoComplete,
+      ariaAttributes,
+      dataContext,
+      setHasFocus,
+      handleFocus,
+      handleBlur,
+      handleChange,
+      updateValue,
+      forceUpdate
+    } = props,
+    restProps = _objectWithoutProperties(props, _excluded);
+  return Object.freeze(restProps);
+}
 //# sourceMappingURL=useDataValue.js.map