@dnb/eufemia 10.22.0 → 10.24.0

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

@@ -1 +1 @@
-{"version":3,"file":"FieldBlock.js","names":["React","useMemo","useContext","useCallback","useRef","useReducer","useEffect","classnames","SharedContext","FieldBlockContext","Space","FormLabel","FormStatus","Ul","Li","convertJsxToString","findElementInChildren","useId","FormError","useUnmountEffect","states","FieldBlock","props","nestedFieldBlockContext","className","forId","layout","composition","label","labelDescription","asFieldset","info","warning","error","errorProp","disabled","width","contentWidth","labelSize","contentClassName","children","rest","_objectWithoutProperties","_excluded","blockId","id","wasUpdated","forceUpdate","mountedFieldsRef","stateRecordRef","fieldStateIdsRef","contentsRef","hasInitiallyErrorProp","Boolean","setInternalRecord","stateId","identifier","type","current","existingIndex","findIndex","item","_objectSpread","push","setFieldState","showFieldError","show","map","showInitially","statusContent","state","statesWithMessages","Object","entries","flatMap","_ref","reduce","acc","cur","existing","find","message","getMessage","messages","undefined","width_element","no_animation","process","env","NODE_ENV","globalThis","IS_TEST","found","msg","filter","_ref2","i","arr","length","text","createElement","CombineMessages","mainClasses","gridClasses","enableFieldset","useEnableFieldset","labelProps","element","space","top","bottom","size","Provider","value","hasErrorProp","_extends","Fragment","ref","_ref3","result","count","child","_child$props","_child$type","_ref4","sharedContext","tr","translation","Forms","fieldErrorSummary","fieldStateSummary","_ref5","key","Error","toString","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React, {\n  useMemo,\n  useContext,\n  useCallback,\n  useRef,\n  useReducer,\n  useEffect,\n} from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../shared/Context'\nimport FieldBlockContext, {\n  StateWithMessage,\n  StatesWithMessages,\n  FieldErrorIdsRef,\n  MountedFieldsRef,\n  StateRecord,\n  StateMessage,\n  StateTypes,\n  StatusContent,\n  FieldBlockContextProps,\n} from './FieldBlockContext'\nimport { Space, FormLabel, FormStatus } from '../../../components'\nimport { Ul, Li } from '../../../elements'\nimport {\n  convertJsxToString,\n  findElementInChildren,\n} from '../../../shared/component-helper'\nimport useId from '../hooks/useId'\nimport {\n  ComponentProps,\n  FieldProps,\n  FormError,\n  Identifier,\n} from '../types'\nimport type { FormLabelAllProps } from '../../../components/FormLabel'\nimport useUnmountEffect from '../hooks/useUnmountEffect'\n\nexport const states: Array<StateTypes> = ['error', 'info', 'warning']\n\nexport type Props = Pick<\n  FieldProps,\n  | keyof ComponentProps\n  | 'layout'\n  | 'label'\n  | 'labelDescription'\n  | 'info'\n  | 'warning'\n  | 'error'\n  | 'disabled'\n> & {\n  /** The id to link a element with */\n  forId?: string\n  /** Use true if you have more than one form element */\n  asFieldset?: boolean\n  /** Defines the layout of nested fields */\n  composition?: FieldBlockContextProps['composition']\n  /** Width of outer block element */\n  width?: false | 'small' | 'medium' | 'large' | 'stretch'\n  /** Width of contents block, while label etc can be wider if space is available */\n  contentWidth?: 'small' | 'medium' | 'large' | 'stretch'\n  contentClassName?: string\n  /** Typography size */\n  labelSize?: 'medium' | 'large'\n  children: React.ReactNode\n} & React.HTMLAttributes<HTMLDivElement>\n\nfunction FieldBlock(props: Props) {\n  const nestedFieldBlockContext = useContext(FieldBlockContext)\n\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    composition,\n    label,\n    labelDescription,\n    asFieldset,\n    info,\n    warning,\n    error: errorProp,\n    disabled,\n    width,\n    contentWidth,\n    labelSize,\n    contentClassName,\n    children,\n    ...rest\n  } = props\n\n  const blockId = useId(props.id)\n  const [wasUpdated, forceUpdate] = useReducer(() => ({}), {})\n  const mountedFieldsRef = useRef<MountedFieldsRef>({})\n  const stateRecordRef = useRef<StateRecord>({})\n  const fieldStateIdsRef = useRef<FieldErrorIdsRef>(null)\n  const contentsRef = useRef<HTMLDivElement>(null)\n  const hasInitiallyErrorProp = useMemo(() => {\n    return Boolean(errorProp)\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const setInternalRecord = useCallback((props) => {\n    const { stateId, identifier, type } = props\n\n    if (!stateRecordRef.current[identifier]) {\n      stateRecordRef.current[identifier] = []\n    }\n\n    fieldStateIdsRef.current = { error: null, warning: null, info: null }\n\n    const existingIndex = stateRecordRef.current[identifier].findIndex(\n      (item) => {\n        return item.stateId === stateId && item.type === type\n      }\n    )\n\n    if (existingIndex > -1) {\n      stateRecordRef.current[identifier][existingIndex] = {\n        ...stateRecordRef.current[identifier][existingIndex],\n        ...props,\n      }\n    } else {\n      stateRecordRef.current[identifier].push(props)\n    }\n  }, [])\n\n  const setFieldState = useCallback(\n    (props) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setFieldState(props)\n        return\n      }\n\n      setInternalRecord(props)\n\n      forceUpdate()\n    },\n    [nestedFieldBlockContext, setInternalRecord]\n  )\n\n  const showFieldError = useCallback(\n    (identifier: Identifier, show: boolean) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.showFieldError(identifier, show)\n        return\n      }\n\n      if (stateRecordRef.current[identifier]) {\n        stateRecordRef.current[identifier] = stateRecordRef.current[\n          identifier\n        ].map((item) => {\n          if (item.showInitially) {\n            return item\n          }\n\n          return {\n            ...item,\n            show,\n          }\n        })\n\n        forceUpdate()\n      }\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const statusContent = useMemo(() => {\n    if (errorProp) {\n      setInternalRecord({\n        identifier: blockId,\n        showInitially: hasInitiallyErrorProp,\n        type: 'error',\n        state: errorProp,\n      })\n    }\n\n    if (warning) {\n      setInternalRecord({\n        identifier: blockId,\n        showInitially: true,\n        type: 'warning',\n        state: warning,\n      })\n    }\n\n    if (info) {\n      setInternalRecord({\n        identifier: blockId,\n        showInitially: true,\n        type: 'info',\n        state: info,\n      })\n    }\n\n    const statesWithMessages: Array<StatesWithMessages> =\n      // 1. Prepare the states for later use\n      Object.entries(stateRecordRef.current)\n        .flatMap(([identifier, states]) =>\n          states.map((props) => {\n            return {\n              identifier,\n              ...props,\n            }\n          })\n        )\n\n        // 2. Take states and group the same type together\n        .reduce((acc, cur) => {\n          const existing = acc.find((item) => {\n            return item.type === cur.type\n          })\n\n          const message = getMessage(cur)\n\n          if (existing) {\n            existing.messages.push({\n              ...cur,\n              message,\n            })\n          } else {\n            acc.push({\n              ...cur,\n              state: undefined,\n              messages: [\n                {\n                  ...cur,\n                  message,\n                },\n              ],\n            })\n          }\n\n          return acc\n        }, [] as Array<StatesWithMessages>)\n\n    // 3. Return the grouped states/messages\n    return states.reduce((acc, type) => {\n      const id = `${props.id || forId || blockId}-form-status--${type}`\n      acc[type] = {\n        id,\n        label,\n        state: type === 'warning' ? 'warn' : type,\n        width_element: contentsRef,\n\n        // Enable animation only in the browser and not in tests\n        no_animation:\n          process.env.NODE_ENV === 'test'\n            ? true\n            : typeof globalThis !== 'undefined'\n            ? globalThis.IS_TEST === true\n            : false,\n      }\n\n      const found = statesWithMessages.find((item) => {\n        return item.type === type\n      })\n\n      if (found?.messages) {\n        // Hide/remove messages that should be hidden and are not marked as to be shown initially\n        const messages = found.messages\n          .map((msg) => {\n            if (msg.type === 'error') {\n              if (!msg.showInitially && !msg.show) {\n                msg.message = null\n              }\n            }\n\n            return msg\n          })\n          .filter(({ message }) => message)\n          .reduce((acc, msg, i, arr) => {\n            const existingIndex = arr.findIndex((item) => {\n              return (\n                convertJsxToString(item.message) ===\n                convertJsxToString(msg.message)\n              )\n            })\n\n            // Remove duplicates, use the first found message\n            if (existingIndex === i) {\n              acc.push(msg)\n            }\n\n            return acc\n          }, [])\n\n        // Combine the messages and put them in an ul/li list\n        if (messages.length > 0) {\n          acc[type] = {\n            ...acc[type],\n            text: <CombineMessages type={type} messages={messages} />,\n          }\n\n          fieldStateIdsRef.current[type] = id\n        } else {\n          fieldStateIdsRef.current[type] = undefined\n        }\n      }\n\n      return acc\n    }, {}) as StatusContent\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    info,\n    warning,\n    errorProp,\n    nestedFieldBlockContext,\n    setInternalRecord,\n    blockId,\n    wasUpdated, // wasUpdated is needed to get the current errors\n  ])\n\n  // Handle the error prop from outside\n  useEffect(() => {\n    if (!nestedFieldBlockContext) {\n      showFieldError(blockId, Boolean(errorProp))\n    }\n  }, [errorProp, blockId, showFieldError, nestedFieldBlockContext])\n\n  useUnmountEffect(() => () => {\n    mountedFieldsRef.current = {}\n    stateRecordRef.current = {}\n  })\n\n  const mainClasses = classnames(\n    'dnb-forms-field-block',\n    width !== undefined && `dnb-forms-field-block--width-${width}`,\n    className\n  )\n  const gridClasses = classnames(\n    'dnb-forms-field-block__grid',\n    `dnb-forms-field-block--layout-${layout}`\n  )\n\n  // A child component with a label was found, use fieldset/legend instead of div/label\n  const enableFieldset = useEnableFieldset({\n    label,\n    asFieldset,\n    children,\n    nestedFieldBlockContext,\n  })\n\n  const labelProps: FormLabelAllProps = {\n    element: enableFieldset ? 'legend' : 'label',\n    forId: enableFieldset ? undefined : forId,\n    space: { top: 0, bottom: 'x-small' },\n    size: labelSize,\n    disabled,\n  }\n\n  return (\n    <FieldBlockContext.Provider\n      value={{\n        setFieldState,\n        showFieldError,\n        hasErrorProp: Boolean(errorProp),\n        fieldStateIdsRef,\n        mountedFieldsRef,\n        composition,\n      }}\n    >\n      <Space\n        element={enableFieldset ? 'fieldset' : 'div'} // use fieldset and legend to enhance a11y\n        className={mainClasses}\n        {...rest}\n      >\n        <div className={gridClasses}>\n          {labelDescription ? (\n            <div className=\"dnb-forms-field-block__label\">\n              {label || labelDescription ? (\n                <FormLabel {...labelProps}>\n                  {label}\n                  {labelDescription && (\n                    <span className=\"dnb-forms-field-block__label-description\">\n                      {labelDescription}\n                    </span>\n                  )}\n                </FormLabel>\n              ) : (\n                <>&nbsp;</>\n              )}\n            </div>\n          ) : (\n            label && <FormLabel {...labelProps}>{label}</FormLabel>\n          )}\n\n          <div className=\"dnb-forms-field-block__status\">\n            <FormStatus {...statusContent?.error} />\n            <FormStatus {...statusContent?.warning} />\n            <FormStatus {...statusContent?.info} />\n          </div>\n\n          <div\n            className={classnames(\n              'dnb-forms-field-block__contents',\n              contentWidth !== undefined &&\n                `dnb-forms-field-block__contents--width-${contentWidth}`,\n              composition !== undefined &&\n                `dnb-forms-field-block__contents__composition--${\n                  composition === true ? 'horizontal' : composition\n                }`,\n              contentClassName\n            )}\n            ref={contentsRef}\n          >\n            {children}\n          </div>\n        </div>\n      </Space>\n    </FieldBlockContext.Provider>\n  )\n}\n\nfunction useEnableFieldset({\n  label,\n  asFieldset,\n  children,\n  nestedFieldBlockContext,\n}) {\n  return useMemo(() => {\n    if (asFieldset === false) {\n      return false\n    }\n\n    let result = asFieldset\n\n    if (label && !result && !nestedFieldBlockContext) {\n      let count = 0\n\n      findElementInChildren(children, (child: React.ReactElement) => {\n        if (\n          child?.props?.label ||\n          child?.type?.['_formElement'] === true\n        ) {\n          count++\n        }\n        if (count > 1) {\n          return (result = true)\n        }\n      })\n    }\n\n    return Boolean(result)\n  }, [asFieldset, children, label, nestedFieldBlockContext])\n}\n\nfunction CombineMessages({\n  type,\n  messages,\n}: {\n  type: StateTypes\n  messages: Array<StateWithMessage>\n}) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  if (messages.length === 1) {\n    return <>{messages[0].message}</>\n  }\n\n  return (\n    <>\n      {type === 'error' ? tr.fieldErrorSummary : tr.fieldStateSummary}\n      <Ul>\n        {messages.map(({ message }, i) => {\n          return <Li key={i}>{message}</Li>\n        })}\n      </Ul>\n    </>\n  )\n}\n\nfunction getMessage(item: Partial<StateWithMessage>): StateMessage {\n  const { state } = item\n\n  return ((state instanceof Error && state.message) ||\n    (state instanceof FormError && state.message) ||\n    state?.toString() ||\n    state) as StateMessage\n}\n\nFieldBlock._supportsSpacingProps = true\n\nexport default FieldBlock\n"],"mappings":"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"}
+{"version":3,"file":"FieldBlock.js","names":["React","useMemo","useContext","useCallback","useRef","useReducer","useEffect","classnames","SharedContext","FieldBlockContext","Space","FormLabel","FormStatus","Ul","Li","convertJsxToString","findElementInChildren","warn","useId","useUnmountEffect","FormError","SubmitIndicator","createSharedState","states","FieldBlock","props","nestedFieldBlockContext","sharedData","forId","id","_Object$assign","Object","assign","data","className","layout","composition","label","labelDescription","asFieldset","info","warning","error","errorProp","fieldState","disabled","width","contentWidth","labelSize","contentClassName","children","rest","_objectWithoutProperties","_excluded","blockId","wasUpdated","forceUpdate","mountedFieldsRef","stateRecordRef","fieldStateIdsRef","contentsRef","hasInitiallyErrorProp","Boolean","setInternalRecord","stateId","identifier","type","current","existingIndex","findIndex","item","_objectSpread","push","setFieldState","showFieldError","show","map","showInitially","statusContent","content","statesWithMessages","entries","flatMap","_ref","reduce","acc","cur","existing","find","message","getMessage","messages","undefined","state","width_element","no_animation","process","env","NODE_ENV","globalThis","IS_TEST","found","msg","filter","_ref2","i","arr","length","text","createElement","CombineMessages","mainClasses","gridClasses","enableFieldset","useEnableFieldset","labelProps","element","space","top","bottom","size","Provider","value","hasErrorProp","_extends","LabelDescription","ref","_ref3","result","count","child","_child$props","_child$type","_ref4","sharedContext","tr","translation","Forms","Fragment","fieldErrorSummary","fieldStateSummary","_ref5","key","_ref6","Error","toString","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React, {\n  useMemo,\n  useContext,\n  useCallback,\n  useRef,\n  useReducer,\n  useEffect,\n} from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../shared/Context'\nimport FieldBlockContext, {\n  StateWithMessage,\n  StatesWithMessages,\n  FieldErrorIdsRef,\n  MountedFieldsRef,\n  StateRecord,\n  StateMessage,\n  StateTypes,\n  StatusContent,\n  FieldBlockContextProps,\n  StateBasis,\n} from './FieldBlockContext'\nimport { Space, FormLabel, FormStatus } from '../../../components'\nimport { Ul, Li } from '../../../elements'\nimport {\n  convertJsxToString,\n  findElementInChildren,\n  warn,\n} from '../../../shared/component-helper'\nimport useId from '../../../shared/helpers/useId'\nimport useUnmountEffect from '../../../shared/helpers/useUnmountEffect'\nimport {\n  ComponentProps,\n  FieldProps,\n  FormError,\n  SubmitState,\n  Identifier,\n} from '../types'\nimport type { FormLabelAllProps } from '../../../components/FormLabel'\nimport SubmitIndicator from '../Form/SubmitIndicator/SubmitIndicator'\nimport { createSharedState } from '../../../shared/helpers/useSharedState'\n\nexport const states: Array<StateTypes> = ['error', 'info', 'warning']\n\nexport type Props = Pick<\n  FieldProps,\n  | keyof ComponentProps\n  | 'layout'\n  | 'label'\n  | 'labelDescription'\n  | 'info'\n  | 'warning'\n  | 'error'\n  | 'disabled'\n> & {\n  /** The id to link a element with */\n  forId?: string\n  /** Use true if you have more than one form element */\n  asFieldset?: boolean\n  /** Defines the layout of nested fields */\n  composition?: FieldBlockContextProps['composition']\n  /** Width of outer block element */\n  width?: false | 'small' | 'medium' | 'large' | 'stretch'\n  /** Width of contents block, while label etc can be wider if space is available */\n  contentWidth?: 'small' | 'medium' | 'large' | 'stretch'\n  contentClassName?: string\n  /** To show the SubmitIndicator during async validation */\n  fieldState?: SubmitState\n  /** Typography size */\n  labelSize?: 'medium' | 'large'\n  children: React.ReactNode\n} & React.HTMLAttributes<HTMLDivElement>\n\nfunction FieldBlock(props: Props) {\n  const nestedFieldBlockContext = useContext(FieldBlockContext)\n\n  const sharedData = createSharedState<Props>(props.forId || props.id)\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    composition,\n    label,\n    labelDescription,\n    asFieldset,\n    info,\n    warning,\n    error: errorProp,\n    fieldState,\n    disabled,\n    width,\n    contentWidth,\n    labelSize,\n    contentClassName,\n    children,\n    ...rest\n  } = Object.assign({}, sharedData.data, props)\n\n  const blockId = useId(props.id)\n  const [wasUpdated, forceUpdate] = useReducer(() => ({}), {})\n  const mountedFieldsRef = useRef<MountedFieldsRef>({})\n  const stateRecordRef = useRef<StateRecord>({})\n  const fieldStateIdsRef = useRef<FieldErrorIdsRef>(null)\n  const contentsRef = useRef<HTMLDivElement>(null)\n  const hasInitiallyErrorProp = useMemo(() => {\n    return Boolean(errorProp)\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const setInternalRecord = useCallback((props: StateBasis) => {\n    const { stateId, identifier, type } = props\n\n    if (!stateRecordRef.current[identifier]) {\n      stateRecordRef.current[identifier] = []\n    }\n\n    fieldStateIdsRef.current = { error: null, warning: null, info: null }\n\n    const existingIndex = stateRecordRef.current[identifier].findIndex(\n      (item) => {\n        return item.stateId === stateId && item.type === type\n      }\n    )\n\n    if (existingIndex > -1) {\n      stateRecordRef.current[identifier][existingIndex] = {\n        ...stateRecordRef.current[identifier][existingIndex],\n        ...props,\n      }\n    } else {\n      stateRecordRef.current[identifier].push(props)\n    }\n  }, [])\n\n  const setFieldState = useCallback(\n    (props: StateBasis) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setFieldState(props)\n        return\n      }\n\n      setInternalRecord(props)\n\n      forceUpdate()\n    },\n    [nestedFieldBlockContext, setInternalRecord]\n  )\n\n  const showFieldError = useCallback(\n    (identifier: Identifier, show: boolean) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.showFieldError(identifier, show)\n        return\n      }\n\n      if (stateRecordRef.current[identifier]) {\n        stateRecordRef.current[identifier] = stateRecordRef.current[\n          identifier\n        ].map((item) => {\n          if (item.showInitially) {\n            return item\n          }\n\n          return {\n            ...item,\n            show,\n          }\n        })\n\n        forceUpdate()\n      }\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const statusContent = useMemo(() => {\n    if (typeof errorProp !== 'undefined') {\n      setInternalRecord({\n        identifier: blockId,\n        showInitially: hasInitiallyErrorProp,\n        type: 'error',\n        content: errorProp,\n      })\n    }\n\n    if (typeof warning !== 'undefined') {\n      setInternalRecord({\n        identifier: blockId,\n        showInitially: true,\n        type: 'warning',\n        content: warning,\n      })\n    }\n\n    if (typeof info !== 'undefined') {\n      setInternalRecord({\n        identifier: blockId,\n        showInitially: true,\n        type: 'info',\n        content: info,\n      })\n    }\n\n    const statesWithMessages: Array<StatesWithMessages> =\n      // 1. Prepare the states for later use\n      Object.entries(stateRecordRef.current)\n        .flatMap(([identifier, states]) =>\n          states.map((props) => {\n            return {\n              identifier,\n              ...props,\n            }\n          })\n        )\n\n        // 2. Take states and group the same type together\n        .reduce((acc, cur) => {\n          const existing = acc.find((item) => {\n            return item.type === cur.type\n          })\n\n          const message = getMessage(cur)\n\n          if (existing) {\n            existing.messages.push({\n              ...cur,\n              message,\n            })\n          } else {\n            acc.push({\n              ...cur,\n              content: undefined,\n              messages: [\n                {\n                  ...cur,\n                  message,\n                },\n              ],\n            })\n          }\n\n          return acc\n        }, [] as Array<StatesWithMessages>)\n\n    // 3. Return the grouped states/messages\n    return states.reduce((acc, type) => {\n      const id = `${props.id || forId || blockId}-form-status--${type}`\n      acc[type] = {\n        id,\n        label,\n        state: type === 'warning' ? 'warn' : type,\n        width_element: contentsRef,\n\n        // Enable animation only in the browser and not in tests\n        no_animation:\n          process.env.NODE_ENV === 'test'\n            ? true\n            : typeof globalThis !== 'undefined'\n            ? globalThis.IS_TEST === true\n            : false,\n      }\n\n      const found = statesWithMessages.find((item) => {\n        return item.type === type\n      })\n\n      if (found?.messages) {\n        // Hide/remove messages that should be hidden and are not marked as to be shown initially\n        const messages = found.messages\n          .map((msg) => {\n            if (msg.type === 'error') {\n              if (!msg.showInitially && !msg.show) {\n                msg.message = null\n              }\n            }\n\n            return msg\n          })\n          .filter(({ message }) => message)\n          .reduce((acc, msg, i, arr) => {\n            const existingIndex = arr.findIndex((item) => {\n              return (\n                convertJsxToString(item.message) ===\n                convertJsxToString(msg.message)\n              )\n            })\n\n            // Remove duplicates, use the first found message\n            if (existingIndex === i) {\n              acc.push(msg)\n            }\n\n            return acc\n          }, [])\n\n        // Combine the messages and put them in an ul/li list\n        if (messages.length > 0) {\n          acc[type] = {\n            ...acc[type],\n            text: <CombineMessages type={type} messages={messages} />,\n          }\n\n          fieldStateIdsRef.current[type] = id\n        } else {\n          fieldStateIdsRef.current[type] = undefined\n        }\n      }\n\n      return acc\n    }, {}) as StatusContent\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    info,\n    warning,\n    errorProp,\n    nestedFieldBlockContext,\n    setInternalRecord,\n    blockId,\n    wasUpdated, // wasUpdated is needed to get the current errors\n  ])\n\n  // Handle the error prop from outside\n  useEffect(() => {\n    if (!nestedFieldBlockContext) {\n      showFieldError(blockId, Boolean(errorProp))\n    }\n  }, [errorProp, blockId, showFieldError, nestedFieldBlockContext])\n\n  useUnmountEffect(() => () => {\n    mountedFieldsRef.current = {}\n    stateRecordRef.current = {}\n  })\n\n  const mainClasses = classnames(\n    'dnb-forms-field-block',\n    width !== undefined && `dnb-forms-field-block--width-${width}`,\n    className\n  )\n  const gridClasses = classnames(\n    'dnb-forms-field-block__grid',\n    `dnb-forms-field-block--layout-${layout}`\n  )\n\n  // A child component with a label was found, use fieldset/legend instead of div/label\n  const enableFieldset = useEnableFieldset({\n    label,\n    asFieldset,\n    children,\n    nestedFieldBlockContext,\n  })\n\n  const labelProps: FormLabelAllProps = {\n    element: enableFieldset ? 'legend' : 'label',\n    forId: enableFieldset ? undefined : forId,\n    space: { top: 0, bottom: 'x-small' },\n    size: labelSize,\n    disabled,\n  }\n\n  if (fieldState && !label) {\n    warn('You have to provide a label to use show an indicator.')\n  }\n\n  return (\n    <FieldBlockContext.Provider\n      value={{\n        setFieldState,\n        showFieldError,\n        hasErrorProp: Boolean(errorProp),\n        fieldStateIdsRef,\n        mountedFieldsRef,\n        composition,\n      }}\n    >\n      <Space\n        element={enableFieldset ? 'fieldset' : 'div'} // use fieldset and legend to enhance a11y\n        className={mainClasses}\n        {...rest}\n      >\n        <div className={gridClasses}>\n          <LabelDescription labelDescription={labelDescription}>\n            {(label || labelDescription) && (\n              <FormLabel {...labelProps}>\n                <SubmitIndicator state={fieldState}>\n                  {label}\n                  {labelDescription && (\n                    <span className=\"dnb-forms-field-block__label-description\">\n                      {labelDescription}\n                    </span>\n                  )}\n                </SubmitIndicator>\n              </FormLabel>\n            )}\n          </LabelDescription>\n\n          <div className=\"dnb-forms-field-block__status\">\n            <FormStatus {...statusContent?.error} />\n            <FormStatus {...statusContent?.warning} />\n            <FormStatus {...statusContent?.info} />\n          </div>\n\n          <div\n            className={classnames(\n              'dnb-forms-field-block__contents',\n              contentWidth !== undefined &&\n                `dnb-forms-field-block__contents--width-${contentWidth}`,\n              composition !== undefined &&\n                `dnb-forms-field-block__contents__composition--${\n                  composition === true ? 'horizontal' : composition\n                }`,\n              contentClassName\n            )}\n            ref={contentsRef}\n          >\n            {children}\n          </div>\n        </div>\n      </Space>\n    </FieldBlockContext.Provider>\n  )\n}\n\nfunction useEnableFieldset({\n  label,\n  asFieldset,\n  children,\n  nestedFieldBlockContext,\n}) {\n  return useMemo(() => {\n    if (asFieldset === false) {\n      return false\n    }\n\n    let result = asFieldset\n\n    if (label && !result && !nestedFieldBlockContext) {\n      let count = 0\n\n      findElementInChildren(children, (child: React.ReactElement) => {\n        if (\n          child?.props?.label ||\n          child?.type?.['_formElement'] === true\n        ) {\n          count++\n        }\n        if (count > 1) {\n          return (result = true)\n        }\n      })\n    }\n\n    return Boolean(result)\n  }, [asFieldset, children, label, nestedFieldBlockContext])\n}\n\nfunction CombineMessages({\n  type,\n  messages,\n}: {\n  type: StateTypes\n  messages: Array<StateWithMessage>\n}) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  if (messages.length === 1) {\n    return <>{messages[0].message}</>\n  }\n\n  return (\n    <>\n      {type === 'error' ? tr.fieldErrorSummary : tr.fieldStateSummary}\n      <Ul>\n        {messages.map(({ message }, i) => {\n          return <Li key={i}>{message}</Li>\n        })}\n      </Ul>\n    </>\n  )\n}\n\nfunction LabelDescription({ labelDescription, children }) {\n  if (!labelDescription) {\n    return children\n  }\n  return <div className=\"dnb-forms-field-block__label\">{children}</div>\n}\n\nfunction getMessage(item: Partial<StateWithMessage>): StateMessage {\n  const { content } = item\n\n  return ((content instanceof Error && content.message) ||\n    (content instanceof FormError && content.message) ||\n    content?.toString() ||\n    content) as StateMessage\n}\n\nFieldBlock._supportsSpacingProps = true\n\nexport default FieldBlock\n"],"mappings":"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"}

package/extensions/forms/FieldBlock/FieldBlockContext.d.ts

@@ -7,7 +7,7 @@ export type StateContent = FieldProps<unknown>['error'] | FieldProps<unknown>['w
 export type StateBasis = {
     identifier: Identifier;
     type: StateTypes;
-    state: StateContent;
+    content: StateContent;
     stateId?: string;
     showInitially?: boolean;
     show?: boolean;
@@ -30,7 +30,7 @@ export type StatusContent = {
     info: StatusContentState;
 };
 export type FieldBlockContextProps = {
-    setFieldState?: ({ identifier, type, stateId, state, showInitially, show, }: StateBasis) => void;
+    setFieldState?: ({ identifier, type, stateId, content, showInitially, show, }: StateBasis) => void;
     showFieldError?: (identifier: Identifier, showError: boolean) => void;
     hasErrorProp?: boolean;
     composition?: true;

package/extensions/forms/FieldBlock/FieldBlockContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldBlockContext.js","names":["React","FieldBlockContext","createContext","undefined"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlockContext.ts"],"sourcesContent":["import React from 'react'\nimport type { FieldProps, Identifier } from '../types'\n\nexport type FieldErrorIdsRef = Record<StateTypes, string>\nexport type MountedFieldsRef = Record<Identifier, boolean>\nexport type StateTypes = 'error' | 'warning' | 'info'\nexport type StateContent =\n  | FieldProps<unknown>['error']\n  | FieldProps<unknown>['warning']\n  | FieldProps<unknown>['info']\nexport type StateBasis = {\n  identifier: Identifier\n  type: StateTypes\n  state: StateContent\n  stateId?: string\n  showInitially?: boolean\n  show?: boolean\n}\nexport type StateRecord = Record<\n  Identifier,\n  Array<Omit<StateBasis, 'identifier'>>\n>\nexport type StateMessage = React.ReactNode\nexport type StateWithMessage = StateBasis & {\n  message: StateMessage\n}\nexport type StatesWithMessages = StateBasis & {\n  messages: Array<StateWithMessage>\n}\nexport type StatusContentState = { id: string; text: React.ReactNode }\nexport type StatusContent = {\n  error: StatusContentState\n  warning: StatusContentState\n  info: StatusContentState\n}\n\nexport type FieldBlockContextProps = {\n  setFieldState?: ({\n    identifier,\n    type,\n    stateId,\n    state,\n    showInitially,\n    show,\n  }: StateBasis) => void\n  showFieldError?: (identifier: Identifier, showError: boolean) => void\n  hasErrorProp?: boolean\n  composition?: true\n  fieldStateIdsRef?: React.MutableRefObject<FieldErrorIdsRef>\n  mountedFieldsRef?: React.MutableRefObject<MountedFieldsRef>\n}\n\nconst FieldBlockContext = React.createContext<\n  FieldBlockContextProps | undefined\n>(undefined)\n\nexport default FieldBlockContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAoDzB,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,aAAa,CAE3CC,SAAS,CAAC;AAEZ,eAAeF,iBAAiB"}
+{"version":3,"file":"FieldBlockContext.js","names":["React","FieldBlockContext","createContext","undefined"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlockContext.ts"],"sourcesContent":["import React from 'react'\nimport type { FieldProps, Identifier } from '../types'\n\nexport type FieldErrorIdsRef = Record<StateTypes, string>\nexport type MountedFieldsRef = Record<Identifier, boolean>\nexport type StateTypes = 'error' | 'warning' | 'info'\nexport type StateContent =\n  | FieldProps<unknown>['error']\n  | FieldProps<unknown>['warning']\n  | FieldProps<unknown>['info']\nexport type StateBasis = {\n  identifier: Identifier\n  type: StateTypes\n  content: StateContent\n  stateId?: string\n  showInitially?: boolean\n  show?: boolean\n}\nexport type StateRecord = Record<\n  Identifier,\n  Array<Omit<StateBasis, 'identifier'>>\n>\nexport type StateMessage = React.ReactNode\nexport type StateWithMessage = StateBasis & {\n  message: StateMessage\n}\nexport type StatesWithMessages = StateBasis & {\n  messages: Array<StateWithMessage>\n}\nexport type StatusContentState = { id: string; text: React.ReactNode }\nexport type StatusContent = {\n  error: StatusContentState\n  warning: StatusContentState\n  info: StatusContentState\n}\n\nexport type FieldBlockContextProps = {\n  setFieldState?: ({\n    identifier,\n    type,\n    stateId,\n    content,\n    showInitially,\n    show,\n  }: StateBasis) => void\n  showFieldError?: (identifier: Identifier, showError: boolean) => void\n  hasErrorProp?: boolean\n  composition?: true\n  fieldStateIdsRef?: React.MutableRefObject<FieldErrorIdsRef>\n  mountedFieldsRef?: React.MutableRefObject<MountedFieldsRef>\n}\n\nconst FieldBlockContext = React.createContext<\n  FieldBlockContextProps | undefined\n>(undefined)\n\nexport default FieldBlockContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAoDzB,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,aAAa,CAE3CC,SAAS,CAAC;AAEZ,eAAeF,iBAAiB"}

package/extensions/forms/Form/Appearance/Appearance.js

@@ -15,6 +15,9 @@ function FormAppearance(_ref) {
     Input: {
       size
     },
+    Textarea: {
+      size
+    },
     DatePicker: {
       size
     },

package/extensions/forms/Form/Appearance/Appearance.js.map

@@ -1 +1 @@
-{"version":3,"file":"Appearance.js","names":["React","Provider","FormAppearance","_ref","children","size","rest","_objectWithoutProperties","_excluded","createElement","_extends","Input","DatePicker","Autocomplete","Dropdown"],"sources":["../../../../../../src/extensions/forms/Form/Appearance/Appearance.tsx"],"sourcesContent":["import React from 'react'\nimport Provider from '../../../../shared/Provider'\n\nexport type Props = {\n  size?: 'medium' | 'large'\n  children: React.ReactNode\n}\n\nfunction FormAppearance({ children, size = null, ...rest }: Props) {\n  return (\n    <Provider\n      Input={{ size }}\n      DatePicker={{ size }}\n      Autocomplete={{ size }}\n      Dropdown={{ size }}\n      {...rest}\n    >\n      {children}\n    </Provider>\n  )\n}\n\nexport default FormAppearance\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,QAAQ,MAAM,6BAA6B;AAOlD,SAASC,cAAcA,CAAAC,IAAA,EAA4C;EAAA,IAA3C;MAAEC,QAAQ;MAAEC,IAAI,GAAG;IAAqB,CAAC,GAAAF,IAAA;IAAbG,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EACtD,OACER,KAAA,CAAAS,aAAA,CAACR,QAAQ,EAAAS,QAAA;IACPC,KAAK,EAAE;MAAEN;IAAK,CAAE;IAChBO,UAAU,EAAE;MAAEP;IAAK,CAAE;IACrBQ,YAAY,EAAE;MAAER;IAAK,CAAE;IACvBS,QAAQ,EAAE;MAAET;IAAK;EAAE,GACfC,IAAI,GAEPF,QACO,CAAC;AAEf;AAEA,eAAeF,cAAc"}
+{"version":3,"file":"Appearance.js","names":["React","Provider","FormAppearance","_ref","children","size","rest","_objectWithoutProperties","_excluded","createElement","_extends","Input","Textarea","DatePicker","Autocomplete","Dropdown"],"sources":["../../../../../../src/extensions/forms/Form/Appearance/Appearance.tsx"],"sourcesContent":["import React from 'react'\nimport Provider from '../../../../shared/Provider'\n\nexport type Props = {\n  size?: 'medium' | 'large'\n  children: React.ReactNode\n}\n\nfunction FormAppearance({ children, size = null, ...rest }: Props) {\n  return (\n    <Provider\n      Input={{ size }}\n      Textarea={{ size }}\n      DatePicker={{ size }}\n      Autocomplete={{ size }}\n      Dropdown={{ size }}\n      {...rest}\n    >\n      {children}\n    </Provider>\n  )\n}\n\nexport default FormAppearance\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,QAAQ,MAAM,6BAA6B;AAOlD,SAASC,cAAcA,CAAAC,IAAA,EAA4C;EAAA,IAA3C;MAAEC,QAAQ;MAAEC,IAAI,GAAG;IAAqB,CAAC,GAAAF,IAAA;IAAbG,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EACtD,OACER,KAAA,CAAAS,aAAA,CAACR,QAAQ,EAAAS,QAAA;IACPC,KAAK,EAAE;MAAEN;IAAK,CAAE;IAChBO,QAAQ,EAAE;MAAEP;IAAK,CAAE;IACnBQ,UAAU,EAAE;MAAER;IAAK,CAAE;IACrBS,YAAY,EAAE;MAAET;IAAK,CAAE;IACvBU,QAAQ,EAAE;MAAEV;IAAK;EAAE,GACfC,IAAI,GAEPF,QACO,CAAC;AAEf;AAEA,eAAeF,cAAc"}

package/extensions/forms/Form/ButtonRow/style/dnb-form-button-row.css

@@ -4,8 +4,8 @@
 .dnb-forms-button-row {
   display: flex;
   flex-flow: row;
-  -moz-column-gap: var(--spacing-small);
-       column-gap: var(--spacing-small);
+  flex-wrap: wrap;
+  gap: var(--spacing-small);
 }
 .dnb-card + .dnb-forms-button-row:not([class*=space__top]) {
   margin-top: var(--spacing-small);

package/extensions/forms/Form/ButtonRow/style/dnb-form-button-row.min.css

@@ -1 +1 @@
-.dnb-forms-button-row{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-card+.dnb-forms-button-row:not([class*=space__top]){margin-top:var(--spacing-small)}.dnb-card+.dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top]{margin-top:0}@media screen and (min-width:40em){.dnb-card+.dnb-forms-button-row:not([class*=space__left]){margin-left:var(--spacing-medium)}}
+.dnb-forms-button-row{display:flex;flex-flow:row;flex-wrap:wrap;gap:var(--spacing-small)}.dnb-card+.dnb-forms-button-row:not([class*=space__top]){margin-top:var(--spacing-small)}.dnb-card+.dnb-forms-button-row:not([class*=space__top]) .dnb-button[class*=space__top]{margin-top:0}@media screen and (min-width:40em){.dnb-card+.dnb-forms-button-row:not([class*=space__left]){margin-left:var(--spacing-medium)}}

package/extensions/forms/Form/ButtonRow/style/dnb-form-button-row.scss

@@ -3,7 +3,8 @@
 .dnb-forms-button-row {
   display: flex;
   flex-flow: row;
-  column-gap: var(--spacing-small);
+  flex-wrap: wrap;
+  gap: var(--spacing-small);
 
   .dnb-card + & {
     &:not([class*='space__top']) {

package/extensions/forms/Form/Handler/Handler.d.ts

@@ -7,4 +7,4 @@ export type Props = Omit<ElementAllProps, 'data' | 'as' | 'autoComplete'> & {
      */
     autoComplete?: boolean;
 };
-export default function FormHandler<Data extends JsonObject>({ children, defaultData, data, schema, ajvInstance, errorMessages, filterData, onChange, onPathChange, onSubmit, onSubmitRequest, scrollTopOnSubmit, sessionStorageId, autoComplete, ...rest }: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>): import("react/jsx-runtime").JSX.Element;
+export default function FormHandler<Data extends JsonObject>({ children, defaultData, data, schema, ajvInstance, errorMessages, filterData, onChange, onPathChange, onSubmit, onSubmitRequest, onSubmitComplete, minimumAsyncBehaviorTime, asyncBehaviorTimeout, scrollTopOnSubmit, sessionStorageId, autoComplete, ...rest }: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>): import("react/jsx-runtime").JSX.Element;

package/extensions/forms/Form/Handler/Handler.js

@@ -1,10 +1,16 @@
 "use client";
 
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["children", "defaultData", "data", "schema", "ajvInstance", "errorMessages", "filterData", "onChange", "onPathChange", "onSubmit", "onSubmitRequest", "scrollTopOnSubmit", "sessionStorageId", "autoComplete"];
-import React from 'react';
-import Provider from '../../DataContext/Provider';
+const _excluded = ["children", "defaultData", "data", "schema", "ajvInstance", "errorMessages", "filterData", "onChange", "onPathChange", "onSubmit", "onSubmitRequest", "onSubmitComplete", "minimumAsyncBehaviorTime", "asyncBehaviorTimeout", "scrollTopOnSubmit", "sessionStorageId", "autoComplete"],
+  _excluded2 = ["children"];
+import React, { useContext } from 'react';
+import DataContextProvider from '../../DataContext/Provider';
+import DataContext from '../../DataContext/Context';
 import FormElement from '../Element';
+import FormStatus from '../../../../components/FormStatus';
+import useId from '../../../../shared/helpers/useId';
+import { combineLabelledBy } from '../../../../shared/component-helper';
 export default function FormHandler(_ref) {
   let {
       children,
@@ -18,6 +24,9 @@ export default function FormHandler(_ref) {
       onPathChange,
       onSubmit,
       onSubmitRequest,
+      onSubmitComplete,
+      minimumAsyncBehaviorTime,
+      asyncBehaviorTimeout,
       scrollTopOnSubmit,
       sessionStorageId,
       autoComplete
@@ -33,16 +42,47 @@ export default function FormHandler(_ref) {
     filterData,
     onChange,
     onPathChange,
-    onSubmit: function () {
-      if (typeof onSubmit === 'function') {
-        onSubmit(...arguments);
-      }
-    },
+    onSubmit,
     onSubmitRequest,
+    onSubmitComplete,
+    minimumAsyncBehaviorTime,
+    asyncBehaviorTimeout,
     scrollTopOnSubmit,
     sessionStorageId,
     autoComplete
   };
-  return React.createElement(Provider, providerProps, React.createElement(FormElement, rest, children));
+  return React.createElement(DataContextProvider, providerProps, React.createElement(FormElementWithState, rest, children));
+}
+function FormElementWithState(_ref2) {
+  let {
+      children
+    } = _ref2,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  const id = useId();
+  const {
+    submitState
+  } = useContext(DataContext) || {};
+  const states = Object.entries(submitState).filter(_ref3 => {
+    let [, value] = _ref3;
+    return value;
+  });
+  return React.createElement(FormElement, _extends({}, rest, {
+    "aria-labelledby": combineLabelledBy(rest, states.map(_ref4 => {
+      let [key] = _ref4;
+      return `${id}-form-status-${key}`;
+    })) || undefined
+  }), children, ['error', 'warning', 'info'].map(key => {
+    const value = submitState[key];
+    return React.createElement(FormStatus, {
+      key: key,
+      state: key,
+      id: `${id}-form-status-${key}`,
+      show: Boolean(value),
+      no_animation: false,
+      shellSpace: {
+        top: 'x-small'
+      }
+    }, String((value === null || value === void 0 ? void 0 : value['message']) || value || ''));
+  }));
 }
 //# sourceMappingURL=Handler.js.map

package/extensions/forms/Form/Handler/Handler.js.map

@@ -1 +1 @@
-{"version":3,"file":"Handler.js","names":["React","Provider","FormElement","FormHandler","_ref","children","defaultData","data","schema","ajvInstance","errorMessages","filterData","onChange","onPathChange","onSubmit","onSubmitRequest","scrollTopOnSubmit","sessionStorageId","autoComplete","rest","_objectWithoutProperties","_excluded","providerProps","id","arguments","createElement"],"sources":["../../../../../../src/extensions/forms/Form/Handler/Handler.tsx"],"sourcesContent":["import React from 'react'\nimport { JsonObject } from 'json-pointer'\nimport Provider, {\n  Props as ProviderProps,\n} from '../../DataContext/Provider'\nimport FormElement from '../Element'\nimport type { ElementAllProps } from '../../../../elements/Element'\n\nexport type Props = Omit<\n  ElementAllProps,\n  'data' | 'as' | 'autoComplete'\n> & {\n  /**\n   * Will enable autoComplete for all nested Field.String fields\n   */\n  autoComplete?: boolean\n}\n\nexport default function FormHandler<Data extends JsonObject>({\n  children,\n  defaultData,\n  data,\n  schema,\n  ajvInstance,\n  errorMessages,\n  filterData,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  scrollTopOnSubmit,\n  sessionStorageId,\n  autoComplete,\n  ...rest\n}: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>) {\n  const providerProps = {\n    id: rest.id,\n    defaultData,\n    data,\n    schema,\n    ajvInstance,\n    errorMessages,\n    filterData,\n    onChange,\n    onPathChange,\n    onSubmit: (...args) => {\n      if (typeof onSubmit === 'function') {\n        onSubmit(...args)\n      }\n    },\n    onSubmitRequest,\n    scrollTopOnSubmit,\n    sessionStorageId,\n    autoComplete,\n  } as Omit<ProviderProps<Data>, 'children'>\n\n  return (\n    <Provider {...providerProps}>\n      <FormElement {...rest}>{children}</FormElement>\n    </Provider>\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,QAAQ,MAER,4BAA4B;AACnC,OAAOC,WAAW,MAAM,YAAY;AAapC,eAAe,SAASC,WAAWA,CAAAC,IAAA,EAgB8B;EAAA,IAhBJ;MAC3DC,QAAQ;MACRC,WAAW;MACXC,IAAI;MACJC,MAAM;MACNC,WAAW;MACXC,aAAa;MACbC,UAAU;MACVC,QAAQ;MACRC,YAAY;MACZC,QAAQ;MACRC,eAAe;MACfC,iBAAiB;MACjBC,gBAAgB;MAChBC;IAE4D,CAAC,GAAAd,IAAA;IAD1De,IAAI,GAAAC,wBAAA,CAAAhB,IAAA,EAAAiB,SAAA;EAEP,MAAMC,aAAa,GAAG;IACpBC,EAAE,EAAEJ,IAAI,CAACI,EAAE;IACXjB,WAAW;IACXC,IAAI;IACJC,MAAM;IACNC,WAAW;IACXC,aAAa;IACbC,UAAU;IACVC,QAAQ;IACRC,YAAY;IACZC,QAAQ,EAAE,SAAAA,CAAA,EAAa;MACrB,IAAI,OAAOA,QAAQ,KAAK,UAAU,EAAE;QAClCA,QAAQ,CAAC,GAAAU,SAAO,CAAC;MACnB;IACF,CAAC;IACDT,eAAe;IACfC,iBAAiB;IACjBC,gBAAgB;IAChBC;EACF,CAA0C;EAE1C,OACElB,KAAA,CAAAyB,aAAA,CAACxB,QAAQ,EAAKqB,aAAa,EACzBtB,KAAA,CAAAyB,aAAA,CAACvB,WAAW,EAAKiB,IAAI,EAAGd,QAAsB,CACtC,CAAC;AAEf"}
+{"version":3,"file":"Handler.js","names":["React","useContext","DataContextProvider","DataContext","FormElement","FormStatus","useId","combineLabelledBy","FormHandler","_ref","children","defaultData","data","schema","ajvInstance","errorMessages","filterData","onChange","onPathChange","onSubmit","onSubmitRequest","onSubmitComplete","minimumAsyncBehaviorTime","asyncBehaviorTimeout","scrollTopOnSubmit","sessionStorageId","autoComplete","rest","_objectWithoutProperties","_excluded","providerProps","id","createElement","FormElementWithState","_ref2","_excluded2","submitState","states","Object","entries","filter","_ref3","value","_extends","map","_ref4","key","undefined","state","show","Boolean","no_animation","shellSpace","top","String"],"sources":["../../../../../../src/extensions/forms/Form/Handler/Handler.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport { JsonObject } from 'json-pointer'\nimport DataContextProvider, {\n  Props as ProviderProps,\n} from '../../DataContext/Provider'\nimport DataContext from '../../DataContext/Context'\nimport FormElement from '../Element'\nimport type { ElementAllProps } from '../../../../elements/Element'\nimport FormStatus from '../../../../components/FormStatus'\nimport useId from '../../../../shared/helpers/useId'\nimport { combineLabelledBy } from '../../../../shared/component-helper'\n\nexport type Props = Omit<\n  ElementAllProps,\n  'data' | 'as' | 'autoComplete'\n> & {\n  /**\n   * Will enable autoComplete for all nested Field.String fields\n   */\n  autoComplete?: boolean\n}\n\nexport default function FormHandler<Data extends JsonObject>({\n  children,\n  defaultData,\n  data,\n  schema,\n  ajvInstance,\n  errorMessages,\n  filterData,\n  onChange,\n  onPathChange,\n  onSubmit,\n  onSubmitRequest,\n  onSubmitComplete,\n  minimumAsyncBehaviorTime,\n  asyncBehaviorTimeout,\n  scrollTopOnSubmit,\n  sessionStorageId,\n  autoComplete,\n  ...rest\n}: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>) {\n  const providerProps = {\n    id: rest.id,\n    defaultData,\n    data,\n    schema,\n    ajvInstance,\n    errorMessages,\n    filterData,\n    onChange,\n    onPathChange,\n    onSubmit,\n    onSubmitRequest,\n    onSubmitComplete,\n    minimumAsyncBehaviorTime,\n    asyncBehaviorTimeout,\n    scrollTopOnSubmit,\n    sessionStorageId,\n    autoComplete,\n  } as Omit<ProviderProps<Data>, 'children'>\n\n  return (\n    <DataContextProvider {...providerProps}>\n      <FormElementWithState {...rest}>{children}</FormElementWithState>\n    </DataContextProvider>\n  )\n}\n\nfunction FormElementWithState({ children, ...rest }) {\n  const id = useId()\n  const { submitState } = useContext(DataContext) || {}\n  const states = Object.entries(submitState).filter(([, value]) => value)\n\n  return (\n    <FormElement\n      {...rest}\n      aria-labelledby={\n        combineLabelledBy(\n          rest,\n          states.map(([key]) => {\n            return `${id}-form-status-${key}`\n          })\n        ) || undefined\n      }\n    >\n      {children}\n\n      {['error', 'warning', 'info'].map((key) => {\n        const value = submitState[key]\n        return (\n          <FormStatus\n            key={key}\n            state={key}\n            id={`${id}-form-status-${key}`}\n            show={Boolean(value)}\n            no_animation={false}\n            shellSpace={{ top: 'x-small' }}\n          >\n            {String(value?.['message'] || value || '')}\n          </FormStatus>\n        )\n      })}\n    </FormElement>\n  )\n}\n"],"mappings":"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"}

package/extensions/forms/Form/Handler/HandlerDocs.d.ts

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

package/extensions/forms/Form/Handler/HandlerDocs.js

@@ -0,0 +1,39 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 { ProviderEvents, ProviderProperties } from '../../DataContext/Provider/ProviderDocs';
+export const HandlerProperties = _objectSpread(_objectSpread({}, ProviderProperties), {}, {
+  disabled: {
+    doc: 'Will disable all nested form fields.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  autoComplete: {
+    doc: 'Will set `autoComplete="on"` on all nested [Field.String](/uilib/extensions/forms/base-fields/String/)-fields.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  },
+  '[DataContext.Provider](/uilib/extensions/forms/extended-features/DataContext/Provider/properties)': {
+    doc: 'Provider properties such as `data`.',
+    type: 'Various',
+    status: 'optional'
+  },
+  '[Form Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attributes)': {
+    doc: 'All supported form element attributes.',
+    type: 'string',
+    status: 'optional'
+  }
+});
+export const HandlerEvents = _objectSpread(_objectSpread({}, ProviderEvents), {}, {
+  '[DataContext.Provider](/uilib/extensions/forms/extended-features/DataContext/Provider/events)': {
+    doc: 'events such as `onSubmit`.',
+    type: 'function',
+    status: 'optional'
+  }
+});
+//# sourceMappingURL=HandlerDocs.js.map

package/extensions/forms/Form/Handler/HandlerDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HandlerDocs.js","names":["ProviderEvents","ProviderProperties","HandlerProperties","_objectSpread","disabled","doc","type","status","autoComplete","HandlerEvents"],"sources":["../../../../../../src/extensions/forms/Form/Handler/HandlerDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\nimport {\n  ProviderEvents,\n  ProviderProperties,\n} from '../../DataContext/Provider/ProviderDocs'\n\nexport const HandlerProperties: PropertiesTableProps = {\n  ...ProviderProperties,\n  disabled: {\n    doc: 'Will disable all nested form fields.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  autoComplete: {\n    doc: 'Will set `autoComplete=\"on\"` on all nested [Field.String](/uilib/extensions/forms/base-fields/String/)-fields.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n  '[DataContext.Provider](/uilib/extensions/forms/extended-features/DataContext/Provider/properties)':\n    {\n      doc: 'Provider properties such as `data`.',\n      type: 'Various',\n      status: 'optional',\n    },\n  '[Form Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attributes)':\n    {\n      doc: 'All supported form element attributes.',\n      type: 'string',\n      status: 'optional',\n    },\n}\n\nexport const HandlerEvents: PropertiesTableProps = {\n  ...ProviderEvents,\n  '[DataContext.Provider](/uilib/extensions/forms/extended-features/DataContext/Provider/events)':\n    {\n      doc: 'events such as `onSubmit`.',\n      type: 'function',\n      status: 'optional',\n    },\n}\n"],"mappings":";;;AACA,SACEA,cAAc,EACdC,kBAAkB,QACb,yCAAyC;AAEhD,OAAO,MAAMC,iBAAuC,GAAAC,aAAA,CAAAA,aAAA,KAC/CF,kBAAkB;EACrBG,QAAQ,EAAE;IACRC,GAAG,EAAE,sCAAsC;IAC3CC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,YAAY,EAAE;IACZH,GAAG,EAAE,gHAAgH;IACrHC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACD,mGAAmG,EACjG;IACEF,GAAG,EAAE,qCAAqC;IAC1CC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACH,8FAA8F,EAC5F;IACEF,GAAG,EAAE,wCAAwC;IAC7CC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AAAC,EACJ;AAED,OAAO,MAAME,aAAmC,GAAAN,aAAA,CAAAA,aAAA,KAC3CH,cAAc;EACjB,+FAA+F,EAC7F;IACEK,GAAG,EAAE,4BAA4B;IACjCC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AAAC,EACJ"}

package/extensions/forms/Form/SubmitButton/SubmitButton.d.ts

@@ -1,7 +1,12 @@
 import React from 'react';
 import type { ComponentProps } from '../../types';
 import { ButtonProps } from '../../../../components/button/Button';
-export type Props = ComponentProps & ButtonProps & Partial<React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export type Props = {
+    /**
+     * Show the submit indicator
+     */
+    showIndicator?: boolean;
+} & ComponentProps & ButtonProps & Partial<React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 declare function SubmitButton(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace SubmitButton {
     var _supportsSpacingProps: boolean;

package/extensions/forms/Form/SubmitButton/SubmitButton.js

@@ -2,31 +2,40 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "children"];
-import React, { useContext } from 'react';
+const _excluded = ["className", "showIndicator", "children", "text"];
+import React, { useCallback, useContext } from 'react';
 import classnames from 'classnames';
 import SharedContext from '../../../../shared/Context';
-import Context from '../../DataContext/Context';
+import DataContext from '../../DataContext/Context';
 import Button from '../../../../components/button/Button';
+import SubmitIndicator from '../SubmitIndicator';
 function SubmitButton(props) {
   const sharedContext = useContext(SharedContext);
   const {
       className,
-      children = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.contextSubmit
+      showIndicator,
+      children,
+      text
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
-  const dataContext = useContext(Context);
+  const content = text || children || (sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.contextSubmit);
+  const {
+    formState,
+    handleSubmit,
+    _isInsideFormElement
+  } = useContext(DataContext) || {};
+  const onClickHandler = useCallback(() => {
+    if (!_isInsideFormElement) {
+      handleSubmit === null || handleSubmit === void 0 ? void 0 : handleSubmit();
+    }
+  }, [_isInsideFormElement, handleSubmit]);
   return React.createElement(Button, _extends({
     className: classnames('dnb-forms-submit-button', className),
     onClick: onClickHandler,
-    icon_position: "left",
     type: "submit"
-  }, rest), children);
-  function onClickHandler() {
-    if (!dataContext._isInsideFormElement) {
-      dataContext.handleSubmit();
-    }
-  }
+  }, rest), content, React.createElement(SubmitIndicator, {
+    state: showIndicator ? 'pending' : formState
+  }));
 }
 SubmitButton._supportsSpacingProps = true;
 export default SubmitButton;

package/extensions/forms/Form/SubmitButton/SubmitButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubmitButton.js","names":["React","useContext","classnames","SharedContext","Context","Button","SubmitButton","props","sharedContext","className","children","translation","Forms","contextSubmit","rest","_objectWithoutProperties","_excluded","dataContext","createElement","_extends","onClick","onClickHandler","icon_position","type","_isInsideFormElement","handleSubmit","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/SubmitButton/SubmitButton.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../../types'\nimport SharedContext from '../../../../shared/Context'\nimport Context from '../../DataContext/Context'\nimport Button, { ButtonProps } from '../../../../components/button/Button'\n\nexport type Props = ComponentProps &\n  ButtonProps &\n  Partial<React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>>\n\nfunction SubmitButton(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    className,\n    children = sharedContext?.translation.Forms.contextSubmit,\n    ...rest\n  } = props\n  const dataContext = useContext(Context)\n\n  return (\n    <Button\n      className={classnames('dnb-forms-submit-button', className)}\n      onClick={onClickHandler}\n      icon_position=\"left\"\n      type=\"submit\"\n      {...rest}\n    >\n      {children}\n    </Button>\n  )\n\n  function onClickHandler() {\n    if (!dataContext._isInsideFormElement) {\n      dataContext.handleSubmit()\n    }\n  }\n}\n\nSubmitButton._supportsSpacingProps = true\nexport default SubmitButton\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,OAAO,MAAM,2BAA2B;AAC/C,OAAOC,MAAM,MAAuB,sCAAsC;AAM1E,SAASC,YAAYA,CAACC,KAAY,EAAE;EAClC,MAAMC,aAAa,GAAGP,UAAU,CAACE,aAAa,CAAC;EAC/C,MAAM;MACJM,SAAS;MACTC,QAAQ,GAAGF,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEG,WAAW,CAACC,KAAK,CAACC;IAE9C,CAAC,GAAGN,KAAK;IADJO,IAAI,GAAAC,wBAAA,CACLR,KAAK,EAAAS,SAAA;EACT,MAAMC,WAAW,GAAGhB,UAAU,CAACG,OAAO,CAAC;EAEvC,OACEJ,KAAA,CAAAkB,aAAA,CAACb,MAAM,EAAAc,QAAA;IACLV,SAAS,EAAEP,UAAU,CAAC,yBAAyB,EAAEO,SAAS,CAAE;IAC5DW,OAAO,EAAEC,cAAe;IACxBC,aAAa,EAAC,MAAM;IACpBC,IAAI,EAAC;EAAQ,GACTT,IAAI,GAEPJ,QACK,CAAC;EAGX,SAASW,cAAcA,CAAA,EAAG;IACxB,IAAI,CAACJ,WAAW,CAACO,oBAAoB,EAAE;MACrCP,WAAW,CAACQ,YAAY,CAAC,CAAC;IAC5B;EACF;AACF;AAEAnB,YAAY,CAACoB,qBAAqB,GAAG,IAAI;AACzC,eAAepB,YAAY"}
+{"version":3,"file":"SubmitButton.js","names":["React","useCallback","useContext","classnames","SharedContext","DataContext","Button","SubmitIndicator","SubmitButton","props","sharedContext","className","showIndicator","children","text","rest","_objectWithoutProperties","_excluded","content","translation","Forms","contextSubmit","formState","handleSubmit","_isInsideFormElement","onClickHandler","createElement","_extends","onClick","type","state","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/SubmitButton/SubmitButton.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../../types'\nimport SharedContext from '../../../../shared/Context'\nimport DataContext from '../../DataContext/Context'\nimport Button, { ButtonProps } from '../../../../components/button/Button'\nimport SubmitIndicator from '../SubmitIndicator'\n\nexport type Props = {\n  /**\n   * Show the submit indicator\n   */\n  showIndicator?: boolean\n} & ComponentProps &\n  ButtonProps &\n  Partial<React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>>\n\nfunction SubmitButton(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const { className, showIndicator, children, text, ...rest } = props\n\n  const content =\n    text || children || sharedContext?.translation.Forms.contextSubmit\n\n  const { formState, handleSubmit, _isInsideFormElement } =\n    useContext(DataContext) || {}\n\n  const onClickHandler = useCallback(() => {\n    if (!_isInsideFormElement) {\n      handleSubmit?.()\n    }\n  }, [_isInsideFormElement, handleSubmit])\n\n  return (\n    <Button\n      className={classnames('dnb-forms-submit-button', className)}\n      onClick={onClickHandler}\n      type=\"submit\"\n      {...rest}\n    >\n      {content}\n\n      <SubmitIndicator\n        state={\n          showIndicator ? 'pending' : formState // will be enabled in a follow-up PR\n        }\n      />\n    </Button>\n  )\n}\n\nSubmitButton._supportsSpacingProps = true\nexport default SubmitButton\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,WAAW,MAAM,2BAA2B;AACnD,OAAOC,MAAM,MAAuB,sCAAsC;AAC1E,OAAOC,eAAe,MAAM,oBAAoB;AAWhD,SAASC,YAAYA,CAACC,KAAY,EAAE;EAClC,MAAMC,aAAa,GAAGR,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAM;MAAEO,SAAS;MAAEC,aAAa;MAAEC,QAAQ;MAAEC;IAAc,CAAC,GAAGL,KAAK;IAAdM,IAAI,GAAAC,wBAAA,CAAKP,KAAK,EAAAQ,SAAA;EAEnE,MAAMC,OAAO,GACXJ,IAAI,IAAID,QAAQ,KAAIH,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAES,WAAW,CAACC,KAAK,CAACC,aAAa;EAEpE,MAAM;IAAEC,SAAS;IAAEC,YAAY;IAAEC;EAAqB,CAAC,GACrDtB,UAAU,CAACG,WAAW,CAAC,IAAI,CAAC,CAAC;EAE/B,MAAMoB,cAAc,GAAGxB,WAAW,CAAC,MAAM;IACvC,IAAI,CAACuB,oBAAoB,EAAE;MACzBD,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG,CAAC;IAClB;EACF,CAAC,EAAE,CAACC,oBAAoB,EAAED,YAAY,CAAC,CAAC;EAExC,OACEvB,KAAA,CAAA0B,aAAA,CAACpB,MAAM,EAAAqB,QAAA;IACLhB,SAAS,EAAER,UAAU,CAAC,yBAAyB,EAAEQ,SAAS,CAAE;IAC5DiB,OAAO,EAAEH,cAAe;IACxBI,IAAI,EAAC;EAAQ,GACTd,IAAI,GAEPG,OAAO,EAERlB,KAAA,CAAA0B,aAAA,CAACnB,eAAe;IACduB,KAAK,EACHlB,aAAa,GAAG,SAAS,GAAGU;EAC7B,CACF,CACK,CAAC;AAEb;AAEAd,YAAY,CAACuB,qBAAqB,GAAG,IAAI;AACzC,eAAevB,YAAY"}

package/extensions/forms/Form/SubmitButton/SubmitButtonDocs.d.ts

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

package/extensions/forms/Form/SubmitButton/SubmitButtonDocs.js

@@ -0,0 +1,23 @@
+export const SubmitButtonProperties = {
+  showIndicator: {
+    doc: 'Show the submit indicator.',
+    type: 'boolean',
+    status: 'required'
+  },
+  children: {
+    doc: 'Button text.',
+    type: 'React.Node',
+    status: 'required'
+  },
+  '[Button](/uilib/components/button/properties)': {
+    doc: 'All button properties.',
+    type: 'Various',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=SubmitButtonDocs.js.map

package/extensions/forms/Form/SubmitButton/SubmitButtonDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubmitButtonDocs.js","names":["SubmitButtonProperties","showIndicator","doc","type","status","children"],"sources":["../../../../../../src/extensions/forms/Form/SubmitButton/SubmitButtonDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const SubmitButtonProperties: PropertiesTableProps = {\n  showIndicator: {\n    doc: 'Show the submit indicator.',\n    type: 'boolean',\n    status: 'required',\n  },\n  children: {\n    doc: 'Button text.',\n    type: 'React.Node',\n    status: 'required',\n  },\n  '[Button](/uilib/components/button/properties)': {\n    doc: 'All button properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,sBAA4C,GAAG;EAC1DC,aAAa,EAAE;IACbC,GAAG,EAAE,4BAA4B;IACjCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,cAAc;IACnBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACD,+CAA+C,EAAE;IAC/CF,GAAG,EAAE,wBAAwB;IAC7BC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC"}

package/extensions/forms/Form/SubmitIndicator/SubmitIndicator.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { SpaceProps } from '../../../../components/Space';
+import type { SubmitState } from '../../types';
+export type Props = {
+    state: SubmitState;
+    className?: string;
+    successLabel?: string;
+    children?: React.ReactNode;
+} & SpaceProps;
+declare function SubmitIndicator(props: Props): import("react/jsx-runtime").JSX.Element;
+declare namespace SubmitIndicator {
+    var _supportsSpacingProps: boolean;
+}
+export default SubmitIndicator;

package/extensions/forms/Form/SubmitIndicator/SubmitIndicator.js

@@ -0,0 +1,69 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _b, _span;
+const _excluded = ["className", "children", "state", "successLabel"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import classnames from 'classnames';
+import { Icon, Space, Tooltip } from '../../../../components';
+import { check } from '../../../../icons';
+import { omitSpacingProps, pickSpacingProps } from '../../../../components/flex/utils';
+import { useLocale } from '../../../../shared';
+function SubmitIndicator(props) {
+  const {
+      className,
+      children,
+      state,
+      successLabel = 'Saved'
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
+  const tr = useLocale();
+  const childrenRef = useRef(null);
+  const [willWrap, setWillWrap] = useState(false);
+  useLayoutEffect(() => {
+    if (children && state) {
+      setWillWrap(willWordWrap(childrenRef.current, '. . . '));
+    }
+  }, [children, state]);
+  const params = _objectSpread({
+    className: classnames('dnb-form-submit-indicator', className, state && `dnb-form-submit-indicator--state-${state}`, willWrap && 'dnb-form-submit-indicator--inline-wrap')
+  }, pickSpacingProps(rest));
+  const ariaAttributes = state === 'pending' ? {
+    role: 'status',
+    'aria-busy': true,
+    'aria-label': tr.ProgressIndicator.indicator_label
+  } : {};
+  const dot = _b || (_b = React.createElement("b", null, "."));
+  const indicator = React.createElement("span", _extends({
+    className: "dnb-form-submit-indicator__content"
+  }, ariaAttributes, omitSpacingProps(rest)), state === 'success' && React.createElement(Tooltip, {
+    targetElement: _span || (_span = React.createElement("span", null, React.createElement(Icon, {
+      icon: check
+    })))
+  }, successLabel), state && state !== 'success' && state !== 'abort' && React.createElement(React.Fragment, null, dot, dot, dot));
+  return React.createElement(Space, _extends({}, params, {
+    element: "span"
+  }), children && React.createElement("span", {
+    ref: childrenRef
+  }, children), indicator);
+}
+function willWordWrap(element, word) {
+  if (!element) {
+    return;
+  }
+  const {
+    offsetHeight,
+    textContent
+  } = element;
+  element.textContent += word;
+  const height = element.offsetHeight;
+  element.textContent = textContent;
+  return height > offsetHeight;
+}
+SubmitIndicator._supportsSpacingProps = true;
+export default SubmitIndicator;
+//# sourceMappingURL=SubmitIndicator.js.map