@dnb/eufemia 10.48.0 → 10.49.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/cjs/components/height-animation/HeightAnimationInstance.d.ts +1 -0
- package/cjs/components/height-animation/HeightAnimationInstance.js +13 -6
- package/cjs/components/height-animation/HeightAnimationInstance.js.map +1 -1
- package/cjs/extensions/forms/DataContext/Context.d.ts +6 -4
- package/cjs/extensions/forms/DataContext/Context.js +1 -2
- package/cjs/extensions/forms/DataContext/Context.js.map +1 -1
- package/cjs/extensions/forms/DataContext/FieldBoundary/FieldBoundaryContext.d.ts +4 -0
- package/cjs/extensions/forms/DataContext/FieldBoundary/FieldBoundaryContext.js.map +1 -1
- package/cjs/extensions/forms/DataContext/FieldBoundary/FieldBoundaryProvider.js +13 -4
- package/cjs/extensions/forms/DataContext/FieldBoundary/FieldBoundaryProvider.js.map +1 -1
- package/cjs/extensions/forms/DataContext/Provider/Provider.d.ts +0 -4
- package/cjs/extensions/forms/DataContext/Provider/Provider.js +27 -28
- package/cjs/extensions/forms/DataContext/Provider/Provider.js.map +1 -1
- package/cjs/extensions/forms/Form/Isolation/Isolation.js +5 -4
- package/cjs/extensions/forms/Form/Isolation/Isolation.js.map +1 -1
- package/cjs/extensions/forms/Iterate/Array/Array.js +12 -6
- package/cjs/extensions/forms/Iterate/Array/Array.js.map +1 -1
- package/cjs/extensions/forms/Iterate/Array/ArrayDocs.js +6 -1
- package/cjs/extensions/forms/Iterate/Array/ArrayDocs.js.map +1 -1
- package/cjs/extensions/forms/Iterate/Array/ArrayItemArea.d.ts +1 -1
- package/cjs/extensions/forms/Iterate/Array/ArrayItemArea.js.map +1 -1
- package/cjs/extensions/forms/Iterate/Array/types.d.ts +1 -0
- package/cjs/extensions/forms/Iterate/Array/types.js.map +1 -1
- package/cjs/extensions/forms/Iterate/EditContainer/DoneButton.js +0 -1
- package/cjs/extensions/forms/Iterate/EditContainer/DoneButton.js.map +1 -1
- package/cjs/extensions/forms/Iterate/PushButton/PushButton.js +19 -7
- package/cjs/extensions/forms/Iterate/PushButton/PushButton.js.map +1 -1
- package/cjs/extensions/forms/Iterate/PushContainer/OpenButton.js +18 -2
- package/cjs/extensions/forms/Iterate/PushContainer/OpenButton.js.map +1 -1
- package/cjs/extensions/forms/Iterate/PushContainer/PushContainer.d.ts +2 -1
- package/cjs/extensions/forms/Iterate/PushContainer/PushContainer.js.map +1 -1
- package/cjs/extensions/forms/Iterate/PushContainer/PushContainerDocs.js +5 -0
- package/cjs/extensions/forms/Iterate/PushContainer/PushContainerDocs.js.map +1 -1
- package/cjs/extensions/forms/Iterate/RemoveButton/RemoveButton.js +3 -5
- package/cjs/extensions/forms/Iterate/RemoveButton/RemoveButton.js.map +1 -1
- package/cjs/extensions/forms/Wizard/Step/Step.d.ts +1 -1
- package/cjs/extensions/forms/Wizard/Step/Step.js.map +1 -1
- package/cjs/extensions/forms/hooks/useFieldProps.js +20 -14
- package/cjs/extensions/forms/hooks/useFieldProps.js.map +1 -1
- package/cjs/shared/Eufemia.d.ts +1 -1
- package/cjs/shared/Eufemia.js +2 -2
- package/cjs/shared/Eufemia.js.map +1 -1
- package/cjs/style/core/scopes.scss +1 -1
- package/cjs/style/dnb-ui-basis.css +1 -1
- package/cjs/style/dnb-ui-basis.min.css +1 -1
- package/cjs/style/dnb-ui-body.css +1 -1
- package/cjs/style/dnb-ui-body.min.css +1 -1
- package/cjs/style/dnb-ui-core.css +1 -1
- package/cjs/style/dnb-ui-core.min.css +1 -1
- package/components/height-animation/HeightAnimationInstance.d.ts +1 -0
- package/components/height-animation/HeightAnimationInstance.js +13 -6
- package/components/height-animation/HeightAnimationInstance.js.map +1 -1
- package/es/components/height-animation/HeightAnimationInstance.d.ts +1 -0
- package/es/components/height-animation/HeightAnimationInstance.js +13 -6
- package/es/components/height-animation/HeightAnimationInstance.js.map +1 -1
- package/es/extensions/forms/DataContext/Context.d.ts +6 -4
- package/es/extensions/forms/DataContext/Context.js +1 -2
- package/es/extensions/forms/DataContext/Context.js.map +1 -1
- package/es/extensions/forms/DataContext/FieldBoundary/FieldBoundaryContext.d.ts +4 -0
- package/es/extensions/forms/DataContext/FieldBoundary/FieldBoundaryContext.js.map +1 -1
- package/es/extensions/forms/DataContext/FieldBoundary/FieldBoundaryProvider.js +13 -4
- package/es/extensions/forms/DataContext/FieldBoundary/FieldBoundaryProvider.js.map +1 -1
- package/es/extensions/forms/DataContext/Provider/Provider.d.ts +0 -4
- package/es/extensions/forms/DataContext/Provider/Provider.js +27 -26
- package/es/extensions/forms/DataContext/Provider/Provider.js.map +1 -1
- package/es/extensions/forms/Form/Isolation/Isolation.js +5 -4
- package/es/extensions/forms/Form/Isolation/Isolation.js.map +1 -1
- package/es/extensions/forms/Iterate/Array/Array.js +14 -8
- package/es/extensions/forms/Iterate/Array/Array.js.map +1 -1
- package/es/extensions/forms/Iterate/Array/ArrayDocs.js +6 -1
- package/es/extensions/forms/Iterate/Array/ArrayDocs.js.map +1 -1
- package/es/extensions/forms/Iterate/Array/ArrayItemArea.d.ts +1 -1
- package/es/extensions/forms/Iterate/Array/ArrayItemArea.js.map +1 -1
- package/es/extensions/forms/Iterate/Array/types.d.ts +1 -0
- package/es/extensions/forms/Iterate/Array/types.js.map +1 -1
- package/es/extensions/forms/Iterate/EditContainer/DoneButton.js +0 -1
- package/es/extensions/forms/Iterate/EditContainer/DoneButton.js.map +1 -1
- package/es/extensions/forms/Iterate/PushButton/PushButton.js +20 -8
- package/es/extensions/forms/Iterate/PushButton/PushButton.js.map +1 -1
- package/es/extensions/forms/Iterate/PushContainer/OpenButton.js +19 -3
- package/es/extensions/forms/Iterate/PushContainer/OpenButton.js.map +1 -1
- package/es/extensions/forms/Iterate/PushContainer/PushContainer.d.ts +2 -1
- package/es/extensions/forms/Iterate/PushContainer/PushContainer.js.map +1 -1
- package/es/extensions/forms/Iterate/PushContainer/PushContainerDocs.js +5 -0
- package/es/extensions/forms/Iterate/PushContainer/PushContainerDocs.js.map +1 -1
- package/es/extensions/forms/Iterate/RemoveButton/RemoveButton.js +4 -6
- package/es/extensions/forms/Iterate/RemoveButton/RemoveButton.js.map +1 -1
- package/es/extensions/forms/Wizard/Step/Step.d.ts +1 -1
- package/es/extensions/forms/Wizard/Step/Step.js.map +1 -1
- package/es/extensions/forms/hooks/useFieldProps.js +20 -14
- package/es/extensions/forms/hooks/useFieldProps.js.map +1 -1
- package/es/shared/Eufemia.d.ts +1 -1
- package/es/shared/Eufemia.js +2 -2
- package/es/shared/Eufemia.js.map +1 -1
- package/es/style/core/scopes.scss +1 -1
- package/es/style/dnb-ui-basis.css +1 -1
- package/es/style/dnb-ui-basis.min.css +1 -1
- package/es/style/dnb-ui-body.css +1 -1
- package/es/style/dnb-ui-body.min.css +1 -1
- package/es/style/dnb-ui-core.css +1 -1
- package/es/style/dnb-ui-core.min.css +1 -1
- package/esm/dnb-ui-basis.min.mjs +1 -1
- package/esm/dnb-ui-components.min.mjs +1 -1
- package/esm/dnb-ui-elements.min.mjs +1 -1
- package/esm/dnb-ui-extensions.min.mjs +2 -2
- package/esm/dnb-ui-lib.min.mjs +1 -1
- package/extensions/forms/DataContext/Context.d.ts +6 -4
- package/extensions/forms/DataContext/Context.js +1 -2
- package/extensions/forms/DataContext/Context.js.map +1 -1
- package/extensions/forms/DataContext/FieldBoundary/FieldBoundaryContext.d.ts +4 -0
- package/extensions/forms/DataContext/FieldBoundary/FieldBoundaryContext.js.map +1 -1
- package/extensions/forms/DataContext/FieldBoundary/FieldBoundaryProvider.js +13 -4
- package/extensions/forms/DataContext/FieldBoundary/FieldBoundaryProvider.js.map +1 -1
- package/extensions/forms/DataContext/Provider/Provider.d.ts +0 -4
- package/extensions/forms/DataContext/Provider/Provider.js +27 -26
- package/extensions/forms/DataContext/Provider/Provider.js.map +1 -1
- package/extensions/forms/Form/Isolation/Isolation.js +5 -4
- package/extensions/forms/Form/Isolation/Isolation.js.map +1 -1
- package/extensions/forms/Iterate/Array/Array.js +14 -8
- package/extensions/forms/Iterate/Array/Array.js.map +1 -1
- package/extensions/forms/Iterate/Array/ArrayDocs.js +6 -1
- package/extensions/forms/Iterate/Array/ArrayDocs.js.map +1 -1
- package/extensions/forms/Iterate/Array/ArrayItemArea.d.ts +1 -1
- package/extensions/forms/Iterate/Array/ArrayItemArea.js.map +1 -1
- package/extensions/forms/Iterate/Array/types.d.ts +1 -0
- package/extensions/forms/Iterate/Array/types.js.map +1 -1
- package/extensions/forms/Iterate/EditContainer/DoneButton.js +0 -1
- package/extensions/forms/Iterate/EditContainer/DoneButton.js.map +1 -1
- package/extensions/forms/Iterate/PushButton/PushButton.js +20 -8
- package/extensions/forms/Iterate/PushButton/PushButton.js.map +1 -1
- package/extensions/forms/Iterate/PushContainer/OpenButton.js +19 -3
- package/extensions/forms/Iterate/PushContainer/OpenButton.js.map +1 -1
- package/extensions/forms/Iterate/PushContainer/PushContainer.d.ts +2 -1
- package/extensions/forms/Iterate/PushContainer/PushContainer.js.map +1 -1
- package/extensions/forms/Iterate/PushContainer/PushContainerDocs.js +5 -0
- package/extensions/forms/Iterate/PushContainer/PushContainerDocs.js.map +1 -1
- package/extensions/forms/Iterate/RemoveButton/RemoveButton.js +4 -6
- package/extensions/forms/Iterate/RemoveButton/RemoveButton.js.map +1 -1
- package/extensions/forms/Wizard/Step/Step.d.ts +1 -1
- package/extensions/forms/Wizard/Step/Step.js.map +1 -1
- package/extensions/forms/hooks/useFieldProps.js +20 -14
- package/extensions/forms/hooks/useFieldProps.js.map +1 -1
- package/package.json +1 -1
- package/shared/Eufemia.d.ts +1 -1
- package/shared/Eufemia.js +2 -2
- package/shared/Eufemia.js.map +1 -1
- package/style/core/scopes.scss +1 -1
- package/style/dnb-ui-basis.css +1 -1
- package/style/dnb-ui-basis.min.css +1 -1
- package/style/dnb-ui-body.css +1 -1
- package/style/dnb-ui-body.min.css +1 -1
- package/style/dnb-ui-core.css +1 -1
- package/style/dnb-ui-core.min.css +1 -1
- package/umd/dnb-ui-basis.min.js +1 -1
- package/umd/dnb-ui-components.min.js +1 -1
- package/umd/dnb-ui-elements.min.js +1 -1
- package/umd/dnb-ui-extensions.min.js +2 -2
- package/umd/dnb-ui-lib.min.js +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Path } from '../../types';
|
|
3
3
|
import { SpacingProps } from '../../../../shared/types';
|
|
4
|
+
import { ArrayItemAreaProps } from '../Array/ArrayItemArea';
|
|
4
5
|
export type Props = {
|
|
5
6
|
/**
|
|
6
7
|
* The path to the array to add the new item to.
|
|
@@ -32,7 +33,7 @@ export type Props = {
|
|
|
32
33
|
*/
|
|
33
34
|
children: React.ReactNode;
|
|
34
35
|
};
|
|
35
|
-
export type AllProps = Props & SpacingProps;
|
|
36
|
+
export type AllProps = Props & SpacingProps & ArrayItemAreaProps;
|
|
36
37
|
declare function PushContainer(props: AllProps): import("react/jsx-runtime").JSX.Element;
|
|
37
38
|
declare namespace PushContainer {
|
|
38
39
|
var OpenButton: typeof import("./OpenButton").default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PushContainer.js","names":["React","useCallback","useContext","useMemo","useRef","Isolation","PushContainerContext","IterateItemContext","DataContext","useDataValue","EditContainer","CancelButton","DoneButton","IterateArray","OpenButton","Flex","HeightAnimation","useSwitchContainerMode","Toolbar","useTranslation","PushContainer","props","data","path","title","children","openButton","showOpenButtonWhen","rest","_objectWithoutProperties","_excluded","commitHandleRef","switchContainerModeRef","value","entries","moveValueToPath","setNextContainerMode","showOpenButton","newItemContextProps","switchContainerMode","current","defaultData","newItems","createElement","emptyData","transformOnCommit","onCommit","clearData","_switchContainerModeR","call","Provider","containerMode","NewContainer","_extends","_ref","_DoneButton","_excluded2","createButton","IteratePushContainer","restoreOriginalValue","toolbar","Consumer","context","_objectSpread","Horizontal","gap","text","_CancelButton","Fragment","open","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/PushContainer/PushContainer.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo, useRef } from 'react'\nimport Isolation from '../../Form/Isolation'\nimport PushContainerContext from './PushContainerContext'\nimport IterateItemContext from '../IterateItemContext'\nimport DataContext from '../../DataContext/Context'\nimport useDataValue from '../../hooks/useDataValue'\nimport EditContainer, { CancelButton, DoneButton } from '../EditContainer'\nimport IterateArray, { ContainerMode } from '../Array'\nimport OpenButton from './OpenButton'\nimport { Flex, HeightAnimation } from '../../../../components'\nimport { Path } from '../../types'\nimport { SpacingProps } from '../../../../shared/types'\nimport { useSwitchContainerMode } from '../hooks'\nimport Toolbar from '../Toolbar'\nimport { useTranslation } from '../../hooks'\n\nexport type Props = {\n /**\n * The path to the array to add the new item to.\n */\n path: Path\n\n /**\n * The title of the container.\n */\n title?: React.ReactNode\n\n /**\n * The button to open container.\n */\n openButton?: React.ReactNode\n\n /**\n * Define when the \"open button\" should be shown.\n * Should be a function that returns a boolean.\n */\n showOpenButtonWhen?: (list: unknown[]) => boolean\n\n /**\n * Prefilled data to add to the fields.\n */\n data?: unknown | Record<string, unknown>\n\n /**\n * A custom toolbar to be shown below the container.\n */\n toolbar?: React.ReactNode\n\n /**\n * The container contents.\n */\n children: React.ReactNode\n}\n\nexport type AllProps = Props & SpacingProps\n\nfunction PushContainer(props: AllProps) {\n const {\n data = null,\n path,\n title,\n children,\n openButton,\n showOpenButtonWhen,\n ...rest\n } = props\n\n const commitHandleRef = useRef<() => void>()\n const switchContainerModeRef = useRef<(mode: ContainerMode) => void>()\n const { value: entries = [], moveValueToPath } = useDataValue<\n Array<unknown>\n >({ path })\n\n const { setNextContainerMode } = useSwitchContainerMode({ path })\n\n const showOpenButton = showOpenButtonWhen?.(entries)\n const newItemContextProps: PushContainerContext = {\n path,\n entries,\n commitHandleRef,\n switchContainerMode: switchContainerModeRef.current,\n }\n\n const defaultData = useMemo(() => {\n return { newItems: [data] }\n }, [data])\n\n return (\n <Isolation\n defaultData={defaultData}\n emptyData={defaultData}\n commitHandleRef={commitHandleRef}\n transformOnCommit={({ newItems }) => {\n return moveValueToPath(path, [...entries, ...newItems])\n }}\n onCommit={(data, { clearData }) => {\n setNextContainerMode('view')\n switchContainerModeRef.current?.('view')\n clearData()\n }}\n >\n <PushContainerContext.Provider value={newItemContextProps}>\n <IterateArray\n path=\"/newItems\"\n containerMode={showOpenButton ? 'view' : 'edit'}\n >\n <NewContainer\n title={title}\n openButton={openButton}\n switchContainerModeRef={switchContainerModeRef}\n showOpenButton={showOpenButton}\n {...rest}\n >\n {children}\n </NewContainer>\n </IterateArray>\n </PushContainerContext.Provider>\n </Isolation>\n )\n}\n\nfunction NewContainer({\n title,\n openButton,\n showOpenButton,\n switchContainerModeRef,\n children,\n ...rest\n}) {\n const { containerMode, switchContainerMode } =\n useContext(IterateItemContext) || {}\n switchContainerModeRef.current = switchContainerMode\n const { createButton } = useTranslation().IteratePushContainer\n const { clearData } = useContext(DataContext) || {}\n const restoreOriginalValue = useCallback(() => {\n clearData?.()\n }, [clearData])\n\n const toolbar = (\n <Toolbar>\n <IterateItemContext.Consumer>\n {(context) => {\n const newItemContextProps = {\n ...context,\n restoreOriginalValue,\n }\n return (\n <IterateItemContext.Provider value={newItemContextProps}>\n <Flex.Horizontal gap=\"large\">\n <DoneButton text={createButton} />\n {showOpenButton && <CancelButton />}\n </Flex.Horizontal>\n </IterateItemContext.Provider>\n )\n }}\n </IterateItemContext.Consumer>\n </Toolbar>\n )\n\n return (\n <>\n <EditContainer\n open={!showOpenButton || containerMode === 'edit'}\n title={title}\n toolbar={toolbar}\n {...rest}\n >\n {children}\n </EditContainer>\n\n {openButton && typeof showOpenButton === 'boolean' && (\n <HeightAnimation open={showOpenButton && containerMode === 'view'}>\n {openButton}\n </HeightAnimation>\n )}\n </>\n )\n}\n\nPushContainer.OpenButton = OpenButton\nPushContainer._supportsSpacingProps = true\n\nexport default PushContainer\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AACvE,OAAOC,SAAS,MAAM,sBAAsB;AAC5C,OAAOC,oBAAoB,MAAM,wBAAwB;AACzD,OAAOC,kBAAkB,MAAM,uBAAuB;AACtD,OAAOC,WAAW,MAAM,2BAA2B;AACnD,OAAOC,YAAY,MAAM,0BAA0B;AACnD,OAAOC,aAAa,IAAIC,YAAY,EAAEC,UAAU,QAAQ,kBAAkB;AAC1E,OAAOC,YAAY,MAAyB,UAAU;AACtD,OAAOC,UAAU,MAAM,cAAc;AACrC,SAASC,IAAI,EAAEC,eAAe,QAAQ,wBAAwB;AAG9D,SAASC,sBAAsB,QAAQ,UAAU;AACjD,OAAOC,OAAO,MAAM,YAAY;AAChC,SAASC,cAAc,QAAQ,aAAa;
|
|
1
|
+
{"version":3,"file":"PushContainer.js","names":["React","useCallback","useContext","useMemo","useRef","Isolation","PushContainerContext","IterateItemContext","DataContext","useDataValue","EditContainer","CancelButton","DoneButton","IterateArray","OpenButton","Flex","HeightAnimation","useSwitchContainerMode","Toolbar","useTranslation","PushContainer","props","data","path","title","children","openButton","showOpenButtonWhen","rest","_objectWithoutProperties","_excluded","commitHandleRef","switchContainerModeRef","value","entries","moveValueToPath","setNextContainerMode","showOpenButton","newItemContextProps","switchContainerMode","current","defaultData","newItems","createElement","emptyData","transformOnCommit","onCommit","clearData","_switchContainerModeR","call","Provider","containerMode","NewContainer","_extends","_ref","_DoneButton","_excluded2","createButton","IteratePushContainer","restoreOriginalValue","toolbar","Consumer","context","_objectSpread","Horizontal","gap","text","_CancelButton","Fragment","open","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/PushContainer/PushContainer.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo, useRef } from 'react'\nimport Isolation from '../../Form/Isolation'\nimport PushContainerContext from './PushContainerContext'\nimport IterateItemContext from '../IterateItemContext'\nimport DataContext from '../../DataContext/Context'\nimport useDataValue from '../../hooks/useDataValue'\nimport EditContainer, { CancelButton, DoneButton } from '../EditContainer'\nimport IterateArray, { ContainerMode } from '../Array'\nimport OpenButton from './OpenButton'\nimport { Flex, HeightAnimation } from '../../../../components'\nimport { Path } from '../../types'\nimport { SpacingProps } from '../../../../shared/types'\nimport { useSwitchContainerMode } from '../hooks'\nimport Toolbar from '../Toolbar'\nimport { useTranslation } from '../../hooks'\nimport { ArrayItemAreaProps } from '../Array/ArrayItemArea'\n\nexport type Props = {\n /**\n * The path to the array to add the new item to.\n */\n path: Path\n\n /**\n * The title of the container.\n */\n title?: React.ReactNode\n\n /**\n * The button to open container.\n */\n openButton?: React.ReactNode\n\n /**\n * Define when the \"open button\" should be shown.\n * Should be a function that returns a boolean.\n */\n showOpenButtonWhen?: (list: unknown[]) => boolean\n\n /**\n * Prefilled data to add to the fields.\n */\n data?: unknown | Record<string, unknown>\n\n /**\n * A custom toolbar to be shown below the container.\n */\n toolbar?: React.ReactNode\n\n /**\n * The container contents.\n */\n children: React.ReactNode\n}\n\nexport type AllProps = Props & SpacingProps & ArrayItemAreaProps\n\nfunction PushContainer(props: AllProps) {\n const {\n data = null,\n path,\n title,\n children,\n openButton,\n showOpenButtonWhen,\n ...rest\n } = props\n\n const commitHandleRef = useRef<() => void>()\n const switchContainerModeRef = useRef<(mode: ContainerMode) => void>()\n const { value: entries = [], moveValueToPath } = useDataValue<\n Array<unknown>\n >({ path })\n\n const { setNextContainerMode } = useSwitchContainerMode({ path })\n\n const showOpenButton = showOpenButtonWhen?.(entries)\n const newItemContextProps: PushContainerContext = {\n path,\n entries,\n commitHandleRef,\n switchContainerMode: switchContainerModeRef.current,\n }\n\n const defaultData = useMemo(() => {\n return { newItems: [data] }\n }, [data])\n\n return (\n <Isolation\n defaultData={defaultData}\n emptyData={defaultData}\n commitHandleRef={commitHandleRef}\n transformOnCommit={({ newItems }) => {\n return moveValueToPath(path, [...entries, ...newItems])\n }}\n onCommit={(data, { clearData }) => {\n setNextContainerMode('view')\n switchContainerModeRef.current?.('view')\n clearData()\n }}\n >\n <PushContainerContext.Provider value={newItemContextProps}>\n <IterateArray\n path=\"/newItems\"\n containerMode={showOpenButton ? 'view' : 'edit'}\n >\n <NewContainer\n title={title}\n openButton={openButton}\n switchContainerModeRef={switchContainerModeRef}\n showOpenButton={showOpenButton}\n {...rest}\n >\n {children}\n </NewContainer>\n </IterateArray>\n </PushContainerContext.Provider>\n </Isolation>\n )\n}\n\nfunction NewContainer({\n title,\n openButton,\n showOpenButton,\n switchContainerModeRef,\n children,\n ...rest\n}) {\n const { containerMode, switchContainerMode } =\n useContext(IterateItemContext) || {}\n switchContainerModeRef.current = switchContainerMode\n const { createButton } = useTranslation().IteratePushContainer\n const { clearData } = useContext(DataContext) || {}\n const restoreOriginalValue = useCallback(() => {\n clearData?.()\n }, [clearData])\n\n const toolbar = (\n <Toolbar>\n <IterateItemContext.Consumer>\n {(context) => {\n const newItemContextProps = {\n ...context,\n restoreOriginalValue,\n }\n return (\n <IterateItemContext.Provider value={newItemContextProps}>\n <Flex.Horizontal gap=\"large\">\n <DoneButton text={createButton} />\n {showOpenButton && <CancelButton />}\n </Flex.Horizontal>\n </IterateItemContext.Provider>\n )\n }}\n </IterateItemContext.Consumer>\n </Toolbar>\n )\n\n return (\n <>\n <EditContainer\n open={!showOpenButton || containerMode === 'edit'}\n title={title}\n toolbar={toolbar}\n {...rest}\n >\n {children}\n </EditContainer>\n\n {openButton && typeof showOpenButton === 'boolean' && (\n <HeightAnimation open={showOpenButton && containerMode === 'view'}>\n {openButton}\n </HeightAnimation>\n )}\n </>\n )\n}\n\nPushContainer.OpenButton = OpenButton\nPushContainer._supportsSpacingProps = true\n\nexport default PushContainer\n"],"mappings":"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"}
|
|
@@ -19,6 +19,11 @@ export const PushContainerProperties = {
|
|
|
19
19
|
type: 'function',
|
|
20
20
|
status: 'optional'
|
|
21
21
|
},
|
|
22
|
+
variant: {
|
|
23
|
+
doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.',
|
|
24
|
+
type: 'string',
|
|
25
|
+
status: 'optional'
|
|
26
|
+
},
|
|
22
27
|
toolbar: {
|
|
23
28
|
doc: 'A custom toolbar to be shown below the container.',
|
|
24
29
|
type: 'React.Node',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PushContainerDocs.js","names":["PushContainerProperties","path","doc","type","status","title","openButton","showOpenButtonWhen","toolbar","children","PushContainerEvents"],"sources":["../../../../../../src/extensions/forms/Iterate/PushContainer/PushContainerDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const PushContainerProperties: PropertiesTableProps = {\n path: {\n doc: 'The path to the array to add the new item to.',\n type: 'string',\n status: 'required',\n },\n title: {\n doc: 'The title of the container.',\n type: 'React.Node',\n status: 'optional',\n },\n openButton: {\n doc: 'The button to open container.',\n type: 'React.Node',\n status: 'optional',\n },\n showOpenButtonWhen: {\n doc: 'Define when the \"open button\" should be shown. Should be a function that returns a boolean.',\n type: 'function',\n status: 'optional',\n },\n toolbar: {\n doc: 'A custom toolbar to be shown below the container.',\n type: 'React.Node',\n status: 'optional',\n },\n children: {\n doc: 'The container contents.',\n type: 'React.Node',\n status: 'required',\n },\n '[Space](/uilib/layout/space/properties)': {\n doc: 'Spacing properties like `top` or `bottom` are supported.',\n type: ['string', 'object'],\n status: 'optional',\n },\n}\n\nexport const PushContainerEvents: PropertiesTableProps = {}\n"],"mappings":"AAEA,OAAO,MAAMA,uBAA6C,GAAG;EAC3DC,IAAI,EAAE;IACJC,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,6BAA6B;IAClCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDE,UAAU,EAAE;IACVJ,GAAG,EAAE,+BAA+B;IACpCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDG,kBAAkB,EAAE;IAClBL,GAAG,EAAE,6FAA6F;IAClGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDI,OAAO,EAAE;IACPN,GAAG,EAAE,mDAAmD;IACxDC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;
|
|
1
|
+
{"version":3,"file":"PushContainerDocs.js","names":["PushContainerProperties","path","doc","type","status","title","openButton","showOpenButtonWhen","variant","toolbar","children","PushContainerEvents"],"sources":["../../../../../../src/extensions/forms/Iterate/PushContainer/PushContainerDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const PushContainerProperties: PropertiesTableProps = {\n path: {\n doc: 'The path to the array to add the new item to.',\n type: 'string',\n status: 'required',\n },\n title: {\n doc: 'The title of the container.',\n type: 'React.Node',\n status: 'optional',\n },\n openButton: {\n doc: 'The button to open container.',\n type: 'React.Node',\n status: 'optional',\n },\n showOpenButtonWhen: {\n doc: 'Define when the \"open button\" should be shown. Should be a function that returns a boolean.',\n type: 'function',\n status: 'optional',\n },\n variant: {\n doc: 'Defines the variant of the container. Can be `outline` or `basic`. Defaults to `outline`.',\n type: 'string',\n status: 'optional',\n },\n toolbar: {\n doc: 'A custom toolbar to be shown below the container.',\n type: 'React.Node',\n status: 'optional',\n },\n children: {\n doc: 'The container contents.',\n type: 'React.Node',\n status: 'required',\n },\n '[Space](/uilib/layout/space/properties)': {\n doc: 'Spacing properties like `top` or `bottom` are supported.',\n type: ['string', 'object'],\n status: 'optional',\n },\n}\n\nexport const PushContainerEvents: PropertiesTableProps = {}\n"],"mappings":"AAEA,OAAO,MAAMA,uBAA6C,GAAG;EAC3DC,IAAI,EAAE;IACJC,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,6BAA6B;IAClCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDE,UAAU,EAAE;IACVJ,GAAG,EAAE,+BAA+B;IACpCC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDG,kBAAkB,EAAE;IAClBL,GAAG,EAAE,6FAA6F;IAClGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDI,OAAO,EAAE;IACPN,GAAG,EAAE,2FAA2F;IAChGC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,OAAO,EAAE;IACPP,GAAG,EAAE,mDAAmD;IACxDC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,yBAAyB;IAC9BC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMO,mBAAyC,GAAG,CAAC,CAAC"}
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
5
|
-
const _excluded = ["className"];
|
|
5
|
+
const _excluded = ["text", "children", "className"];
|
|
6
6
|
import React, { useCallback, useContext } from 'react';
|
|
7
7
|
import classnames from 'classnames';
|
|
8
8
|
import { Button } from '../../../../components';
|
|
9
9
|
import IterateItemContext from '../IterateItemContext';
|
|
10
|
-
import {
|
|
10
|
+
import { useTranslation } from '../../hooks';
|
|
11
11
|
import ArrayItemAreaContext from '../Array/ArrayItemAreaContext';
|
|
12
12
|
import { omitDataValueReadWriteProps } from '../../types';
|
|
13
13
|
import { trash } from '../../../../icons';
|
|
@@ -20,13 +20,11 @@ function RemoveButton(props) {
|
|
|
20
20
|
throw new Error('RemoveButton must be inside an Iterate.Array');
|
|
21
21
|
}
|
|
22
22
|
const {
|
|
23
|
+
text,
|
|
24
|
+
children,
|
|
23
25
|
className
|
|
24
26
|
} = props,
|
|
25
27
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
26
|
-
const {
|
|
27
|
-
children,
|
|
28
|
-
text
|
|
29
|
-
} = useFieldProps(restProps);
|
|
30
28
|
const buttonProps = omitDataValueReadWriteProps(restProps);
|
|
31
29
|
const translation = useTranslation().RemoveButton;
|
|
32
30
|
const textContent = text || children || translation.text;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RemoveButton.js","names":["React","useCallback","useContext","classnames","Button","IterateItemContext","
|
|
1
|
+
{"version":3,"file":"RemoveButton.js","names":["React","useCallback","useContext","classnames","Button","IterateItemContext","useTranslation","ArrayItemAreaContext","omitDataValueReadWriteProps","trash","RemoveButton","props","iterateItemContext","handleRemove","Error","text","children","className","restProps","_objectWithoutProperties","_excluded","buttonProps","translation","textContent","elementBlockContext","handleRemoveItem","handleClick","createElement","_extends","variant","icon","icon_position","on_click","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/RemoveButton/RemoveButton.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport classnames from 'classnames'\nimport { Button } from '../../../../components'\nimport { ButtonProps } from '../../../../components/Button'\nimport IterateItemContext from '../IterateItemContext'\nimport { useTranslation } from '../../hooks'\nimport ArrayItemAreaContext from '../Array/ArrayItemAreaContext'\nimport {\n DataValueReadWriteComponentProps,\n omitDataValueReadWriteProps,\n} from '../../types'\nimport { trash } from '../../../../icons'\n\nexport type Props = ButtonProps &\n DataValueReadWriteComponentProps<unknown[]>\n\nfunction RemoveButton(props: Props) {\n const iterateItemContext = useContext(IterateItemContext)\n const { handleRemove } = iterateItemContext || {}\n\n if (!iterateItemContext) {\n throw new Error('RemoveButton must be inside an Iterate.Array')\n }\n\n const { text, children, className, ...restProps } = props\n const buttonProps = omitDataValueReadWriteProps(restProps)\n const translation = useTranslation().RemoveButton\n const textContent = text || children || translation.text\n\n const elementBlockContext = useContext(ArrayItemAreaContext)\n const { handleRemoveItem } = elementBlockContext || {}\n\n const handleClick = useCallback(() => {\n if (handleRemoveItem) {\n handleRemoveItem?.()\n } else {\n handleRemove?.()\n }\n }, [handleRemove, handleRemoveItem])\n\n return (\n <Button\n className={classnames(\n 'dnb-forms-iterate-remove-element-button',\n className\n )}\n variant={textContent ? 'tertiary' : 'secondary'}\n icon={trash}\n icon_position=\"left\"\n on_click={handleClick}\n {...buttonProps}\n >\n {textContent}\n </Button>\n )\n}\n\nRemoveButton._supportsSpacingProps = true\nexport default RemoveButton\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAOC,kBAAkB,MAAM,uBAAuB;AACtD,SAASC,cAAc,QAAQ,aAAa;AAC5C,OAAOC,oBAAoB,MAAM,+BAA+B;AAChE,SAEEC,2BAA2B,QACtB,aAAa;AACpB,SAASC,KAAK,QAAQ,mBAAmB;AAKzC,SAASC,YAAYA,CAACC,KAAY,EAAE;EAClC,MAAMC,kBAAkB,GAAGV,UAAU,CAACG,kBAAkB,CAAC;EACzD,MAAM;IAAEQ;EAAa,CAAC,GAAGD,kBAAkB,IAAI,CAAC,CAAC;EAEjD,IAAI,CAACA,kBAAkB,EAAE;IACvB,MAAM,IAAIE,KAAK,CAAC,8CAA8C,CAAC;EACjE;EAEA,MAAM;MAAEC,IAAI;MAAEC,QAAQ;MAAEC;IAAwB,CAAC,GAAGN,KAAK;IAAnBO,SAAS,GAAAC,wBAAA,CAAKR,KAAK,EAAAS,SAAA;EACzD,MAAMC,WAAW,GAAGb,2BAA2B,CAACU,SAAS,CAAC;EAC1D,MAAMI,WAAW,GAAGhB,cAAc,CAAC,CAAC,CAACI,YAAY;EACjD,MAAMa,WAAW,GAAGR,IAAI,IAAIC,QAAQ,IAAIM,WAAW,CAACP,IAAI;EAExD,MAAMS,mBAAmB,GAAGtB,UAAU,CAACK,oBAAoB,CAAC;EAC5D,MAAM;IAAEkB;EAAiB,CAAC,GAAGD,mBAAmB,IAAI,CAAC,CAAC;EAEtD,MAAME,WAAW,GAAGzB,WAAW,CAAC,MAAM;IACpC,IAAIwB,gBAAgB,EAAE;MACpBA,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAG,CAAC;IACtB,CAAC,MAAM;MACLZ,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG,CAAC;IAClB;EACF,CAAC,EAAE,CAACA,YAAY,EAAEY,gBAAgB,CAAC,CAAC;EAEpC,OACEzB,KAAA,CAAA2B,aAAA,CAACvB,MAAM,EAAAwB,QAAA;IACLX,SAAS,EAAEd,UAAU,CACnB,yCAAyC,EACzCc,SACF,CAAE;IACFY,OAAO,EAAEN,WAAW,GAAG,UAAU,GAAG,WAAY;IAChDO,IAAI,EAAErB,KAAM;IACZsB,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEN;EAAY,GAClBL,WAAW,GAEdE,WACK,CAAC;AAEb;AAEAb,YAAY,CAACuB,qBAAqB,GAAG,IAAI;AACzC,eAAevB,YAAY"}
|
|
@@ -30,7 +30,7 @@ export type Props = ComponentProps & FlexContainerProps & {
|
|
|
30
30
|
*/
|
|
31
31
|
prerenderFieldProps?: boolean;
|
|
32
32
|
};
|
|
33
|
-
declare function Step(props: Props):
|
|
33
|
+
declare function Step(props: Props): JSX.Element;
|
|
34
34
|
declare namespace Step {
|
|
35
35
|
var _supportsSpacingProps: boolean;
|
|
36
36
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Step.js","names":["React","useContext","useMemo","useRef","classnames","WizardContext","Flex","convertJsxToString","FieldProps","useLayoutEffect","window","useEffect","Step","props","className","title","index","active","activeWhen","required","prerenderFieldProps","children","restProps","_objectWithoutProperties","_excluded","check","activeIndex","titlesRef","stepElementRef","ariaLabel","_ref","_titlesRef$current","current","currentElementRef","visibleWhen","createElement","Fragment","fieldProps","undefined","Stack","_extends","element","innerRef","tabIndex","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Wizard/Step/Step.tsx"],"sourcesContent":["import React, { useContext, useMemo, useRef } from 'react'\nimport classnames from 'classnames'\nimport { ComponentProps } from '../../types'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\nimport WizardContext from '../Context/WizardContext'\nimport Flex from '../../../../components/flex/Flex'\nimport { convertJsxToString } from '../../../../shared/component-helper'\nimport FieldProps from '../../Form/FieldProps'\nimport type { VisibleWhen } from '../../Form/Visibility'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type Props = ComponentProps &\n FlexContainerProps & {\n /**\n * A title that will be displayed in the indicator.\n */\n title?: React.ReactNode\n\n /**\n * To determine if the step should be rendered.\n * Used internally by the WizardContainer.\n */\n index?: number\n\n /**\n * Will make all the fields inside the step to be required.\n */\n required?: boolean\n\n /**\n * If set to `false`, the step will not be rendered.\n */\n active?: boolean\n\n /**\n * Provide a `path` and a `hasValue` property with the excepted value in order to enable the step. You can alternatively provide a `hasValue` function that returns a boolean. The first parameter is the value of the path.\n */\n activeWhen?: VisibleWhen\n\n /**\n * If set to `true`, the step will always be rendered.\n * For internal use only.\n */\n prerenderFieldProps?: boolean\n }\n\nfunction Step(props: Props) {\n const {\n className,\n title,\n index,\n active = true,\n activeWhen,\n required,\n prerenderFieldProps,\n children,\n ...restProps\n } = props\n const { check, activeIndex, titlesRef, stepElementRef } =\n useContext(WizardContext) || {}\n\n const ariaLabel = useMemo(() => {\n return (\n (!prerenderFieldProps && titlesRef?.current?.[index]) ??\n convertJsxToString(title)\n )\n }, [index, prerenderFieldProps, title, titlesRef])\n\n const currentElementRef = useRef<HTMLElement>()\n useLayoutEffect(() => {\n if (!prerenderFieldProps && typeof stepElementRef !== 'undefined') {\n if (currentElementRef.current) {\n stepElementRef.current = currentElementRef.current\n }\n return () => {\n stepElementRef.current = null\n }\n }\n }, [prerenderFieldProps, stepElementRef])\n\n if (prerenderFieldProps) {\n return children\n }\n\n if (\n activeIndex !== index ||\n active === false ||\n (activeWhen && !check({ visibleWhen: activeWhen }))\n ) {\n // Another step is active\n return <></>\n }\n\n const fieldProps =\n typeof required === 'boolean' ? { required } : undefined\n\n return (\n <Flex.Stack\n className={classnames('dnb-forms-step', className)}\n element=\"section\"\n aria-label={ariaLabel}\n innerRef={currentElementRef}\n tabIndex={-1}\n {...restProps}\n >\n {fieldProps ? (\n <FieldProps {...fieldProps}>{children}</FieldProps>\n ) : (\n children\n )}\n </Flex.Stack>\n )\n}\n\nStep._supportsSpacingProps = true\nexport default Step\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAC1D,OAAOC,UAAU,MAAM,YAAY;AAGnC,OAAOC,aAAa,MAAM,0BAA0B;AACpD,OAAOC,IAAI,MAAM,kCAAkC;AACnD,SAASC,kBAAkB,QAAQ,qCAAqC;AACxE,OAAOC,UAAU,MAAM,uBAAuB;AAI9C,MAAMC,eAAe,GACnB,OAAOC,MAAM,KAAK,WAAW,GAAGV,KAAK,CAACW,SAAS,GAAGX,KAAK,CAACS,eAAe;AAqCzE,SAASG,IAAIA,CAACC,KAAY,
|
|
1
|
+
{"version":3,"file":"Step.js","names":["React","useContext","useMemo","useRef","classnames","WizardContext","Flex","convertJsxToString","FieldProps","useLayoutEffect","window","useEffect","Step","props","className","title","index","active","activeWhen","required","prerenderFieldProps","children","restProps","_objectWithoutProperties","_excluded","check","activeIndex","titlesRef","stepElementRef","ariaLabel","_ref","_titlesRef$current","current","currentElementRef","visibleWhen","createElement","Fragment","fieldProps","undefined","Stack","_extends","element","innerRef","tabIndex","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Wizard/Step/Step.tsx"],"sourcesContent":["import React, { useContext, useMemo, useRef } from 'react'\nimport classnames from 'classnames'\nimport { ComponentProps } from '../../types'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\nimport WizardContext from '../Context/WizardContext'\nimport Flex from '../../../../components/flex/Flex'\nimport { convertJsxToString } from '../../../../shared/component-helper'\nimport FieldProps from '../../Form/FieldProps'\nimport type { VisibleWhen } from '../../Form/Visibility'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type Props = ComponentProps &\n FlexContainerProps & {\n /**\n * A title that will be displayed in the indicator.\n */\n title?: React.ReactNode\n\n /**\n * To determine if the step should be rendered.\n * Used internally by the WizardContainer.\n */\n index?: number\n\n /**\n * Will make all the fields inside the step to be required.\n */\n required?: boolean\n\n /**\n * If set to `false`, the step will not be rendered.\n */\n active?: boolean\n\n /**\n * Provide a `path` and a `hasValue` property with the excepted value in order to enable the step. You can alternatively provide a `hasValue` function that returns a boolean. The first parameter is the value of the path.\n */\n activeWhen?: VisibleWhen\n\n /**\n * If set to `true`, the step will always be rendered.\n * For internal use only.\n */\n prerenderFieldProps?: boolean\n }\n\nfunction Step(props: Props): JSX.Element {\n const {\n className,\n title,\n index,\n active = true,\n activeWhen,\n required,\n prerenderFieldProps,\n children,\n ...restProps\n } = props\n const { check, activeIndex, titlesRef, stepElementRef } =\n useContext(WizardContext) || {}\n\n const ariaLabel = useMemo(() => {\n return (\n (!prerenderFieldProps && titlesRef?.current?.[index]) ??\n convertJsxToString(title)\n )\n }, [index, prerenderFieldProps, title, titlesRef])\n\n const currentElementRef = useRef<HTMLElement>()\n useLayoutEffect(() => {\n if (!prerenderFieldProps && typeof stepElementRef !== 'undefined') {\n if (currentElementRef.current) {\n stepElementRef.current = currentElementRef.current\n }\n return () => {\n stepElementRef.current = null\n }\n }\n }, [prerenderFieldProps, stepElementRef])\n\n if (prerenderFieldProps) {\n return children as JSX.Element\n }\n\n if (\n activeIndex !== index ||\n active === false ||\n (activeWhen && !check({ visibleWhen: activeWhen }))\n ) {\n // Another step is active\n return <></>\n }\n\n const fieldProps =\n typeof required === 'boolean' ? { required } : undefined\n\n return (\n <Flex.Stack\n className={classnames('dnb-forms-step', className)}\n element=\"section\"\n aria-label={ariaLabel}\n innerRef={currentElementRef}\n tabIndex={-1}\n {...restProps}\n >\n {fieldProps ? (\n <FieldProps {...fieldProps}>{children}</FieldProps>\n ) : (\n children\n )}\n </Flex.Stack>\n )\n}\n\nStep._supportsSpacingProps = true\nexport default Step\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAC1D,OAAOC,UAAU,MAAM,YAAY;AAGnC,OAAOC,aAAa,MAAM,0BAA0B;AACpD,OAAOC,IAAI,MAAM,kCAAkC;AACnD,SAASC,kBAAkB,QAAQ,qCAAqC;AACxE,OAAOC,UAAU,MAAM,uBAAuB;AAI9C,MAAMC,eAAe,GACnB,OAAOC,MAAM,KAAK,WAAW,GAAGV,KAAK,CAACW,SAAS,GAAGX,KAAK,CAACS,eAAe;AAqCzE,SAASG,IAAIA,CAACC,KAAY,EAAe;EACvC,MAAM;MACJC,SAAS;MACTC,KAAK;MACLC,KAAK;MACLC,MAAM,GAAG,IAAI;MACbC,UAAU;MACVC,QAAQ;MACRC,mBAAmB;MACnBC;IAEF,CAAC,GAAGR,KAAK;IADJS,SAAS,GAAAC,wBAAA,CACVV,KAAK,EAAAW,SAAA;EACT,MAAM;IAAEC,KAAK;IAAEC,WAAW;IAAEC,SAAS;IAAEC;EAAe,CAAC,GACrD3B,UAAU,CAACI,aAAa,CAAC,IAAI,CAAC,CAAC;EAEjC,MAAMwB,SAAS,GAAG3B,OAAO,CAAC,MAAM;IAAA,IAAA4B,IAAA,EAAAC,kBAAA;IAC9B,QAAAD,IAAA,GACG,CAACV,mBAAmB,KAAIO,SAAS,aAATA,SAAS,wBAAAI,kBAAA,GAATJ,SAAS,CAAEK,OAAO,cAAAD,kBAAA,uBAAlBA,kBAAA,CAAqBf,KAAK,CAAC,eAAAc,IAAA,cAAAA,IAAA,GACpDvB,kBAAkB,CAACQ,KAAK,CAAC;EAE7B,CAAC,EAAE,CAACC,KAAK,EAAEI,mBAAmB,EAAEL,KAAK,EAAEY,SAAS,CAAC,CAAC;EAElD,MAAMM,iBAAiB,GAAG9B,MAAM,CAAc,CAAC;EAC/CM,eAAe,CAAC,MAAM;IACpB,IAAI,CAACW,mBAAmB,IAAI,OAAOQ,cAAc,KAAK,WAAW,EAAE;MACjE,IAAIK,iBAAiB,CAACD,OAAO,EAAE;QAC7BJ,cAAc,CAACI,OAAO,GAAGC,iBAAiB,CAACD,OAAO;MACpD;MACA,OAAO,MAAM;QACXJ,cAAc,CAACI,OAAO,GAAG,IAAI;MAC/B,CAAC;IACH;EACF,CAAC,EAAE,CAACZ,mBAAmB,EAAEQ,cAAc,CAAC,CAAC;EAEzC,IAAIR,mBAAmB,EAAE;IACvB,OAAOC,QAAQ;EACjB;EAEA,IACEK,WAAW,KAAKV,KAAK,IACrBC,MAAM,KAAK,KAAK,IACfC,UAAU,IAAI,CAACO,KAAK,CAAC;IAAES,WAAW,EAAEhB;EAAW,CAAC,CAAE,EACnD;IAEA,OAAOlB,KAAA,CAAAmC,aAAA,CAAAnC,KAAA,CAAAoC,QAAA,MAAI,CAAC;EACd;EAEA,MAAMC,UAAU,GACd,OAAOlB,QAAQ,KAAK,SAAS,GAAG;IAAEA;EAAS,CAAC,GAAGmB,SAAS;EAE1D,OACEtC,KAAA,CAAAmC,aAAA,CAAC7B,IAAI,CAACiC,KAAK,EAAAC,QAAA;IACT1B,SAAS,EAAEV,UAAU,CAAC,gBAAgB,EAAEU,SAAS,CAAE;IACnD2B,OAAO,EAAC,SAAS;IACjB,cAAYZ,SAAU;IACtBa,QAAQ,EAAET,iBAAkB;IAC5BU,QAAQ,EAAE,CAAC;EAAE,GACTrB,SAAS,GAEZe,UAAU,GACTrC,KAAA,CAAAmC,aAAA,CAAC3B,UAAU,EAAK6B,UAAU,EAAGhB,QAAqB,CAAC,GAEnDA,QAEQ,CAAC;AAEjB;AAEAT,IAAI,CAACgC,qBAAqB,GAAG,IAAI;AACjC,eAAehC,IAAI"}
|
|
@@ -106,9 +106,8 @@ export default function useFieldProps(localeProps, {
|
|
|
106
106
|
setFieldState: setFieldStateDataContext,
|
|
107
107
|
setFieldError: setFieldErrorDataContext,
|
|
108
108
|
setFieldProps: setPropsDataContext,
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
handleUnMountField,
|
|
109
|
+
setVisibleError: setVisibleErrorDataContext,
|
|
110
|
+
setMountedFieldState: setMountedFieldStateDataContext,
|
|
112
111
|
setFieldEventListener,
|
|
113
112
|
errors: dataContextErrors,
|
|
114
113
|
showAllErrors,
|
|
@@ -130,7 +129,8 @@ export default function useFieldProps(localeProps, {
|
|
|
130
129
|
errorPrioritization
|
|
131
130
|
} = sectionContext || {};
|
|
132
131
|
const {
|
|
133
|
-
setFieldError,
|
|
132
|
+
setFieldError: setFieldErrorBoundary,
|
|
133
|
+
setVisibleError: setVisibleErrorBoundary,
|
|
134
134
|
showBoundaryErrors
|
|
135
135
|
} = fieldBoundaryContext || {};
|
|
136
136
|
const hasPath = Boolean(pathProp);
|
|
@@ -272,16 +272,18 @@ export default function useFieldProps(localeProps, {
|
|
|
272
272
|
if (!revealErrorRef.current) {
|
|
273
273
|
revealErrorRef.current = true;
|
|
274
274
|
showFieldErrorFieldBlock === null || showFieldErrorFieldBlock === void 0 ? void 0 : showFieldErrorFieldBlock(identifier, true);
|
|
275
|
-
|
|
275
|
+
setVisibleErrorBoundary === null || setVisibleErrorBoundary === void 0 ? void 0 : setVisibleErrorBoundary(identifier, !!localErrorRef.current);
|
|
276
|
+
setVisibleErrorDataContext === null || setVisibleErrorDataContext === void 0 ? void 0 : setVisibleErrorDataContext(identifier, !!localErrorRef.current);
|
|
276
277
|
}
|
|
277
|
-
}, [identifier,
|
|
278
|
+
}, [identifier, setVisibleErrorDataContext, setVisibleErrorBoundary, showFieldErrorFieldBlock, validateInitially]);
|
|
278
279
|
const hideError = useCallback(() => {
|
|
279
280
|
if (revealErrorRef.current) {
|
|
280
281
|
revealErrorRef.current = undefined;
|
|
281
282
|
showFieldErrorFieldBlock === null || showFieldErrorFieldBlock === void 0 ? void 0 : showFieldErrorFieldBlock(identifier, false);
|
|
282
|
-
|
|
283
|
+
setVisibleErrorBoundary === null || setVisibleErrorBoundary === void 0 ? void 0 : setVisibleErrorBoundary(identifier, false);
|
|
284
|
+
setVisibleErrorDataContext === null || setVisibleErrorDataContext === void 0 ? void 0 : setVisibleErrorDataContext(identifier, false);
|
|
283
285
|
}
|
|
284
|
-
}, [identifier,
|
|
286
|
+
}, [identifier, setVisibleErrorBoundary, setVisibleErrorDataContext, showFieldErrorFieldBlock]);
|
|
285
287
|
const prepareError = useCallback(error => {
|
|
286
288
|
if (error instanceof FormError) {
|
|
287
289
|
let message = error.message;
|
|
@@ -401,7 +403,7 @@ export default function useFieldProps(localeProps, {
|
|
|
401
403
|
}
|
|
402
404
|
localErrorRef.current = error;
|
|
403
405
|
setFieldErrorDataContext === null || setFieldErrorDataContext === void 0 ? void 0 : setFieldErrorDataContext(identifier, error);
|
|
404
|
-
|
|
406
|
+
setFieldErrorBoundary === null || setFieldErrorBoundary === void 0 ? void 0 : setFieldErrorBoundary(identifier, error);
|
|
405
407
|
setFieldStateDataContext === null || setFieldStateDataContext === void 0 ? void 0 : setFieldStateDataContext(identifier, error ? 'error' : undefined);
|
|
406
408
|
setFieldStateFieldBlock === null || setFieldStateFieldBlock === void 0 ? void 0 : setFieldStateFieldBlock({
|
|
407
409
|
stateId,
|
|
@@ -411,7 +413,7 @@ export default function useFieldProps(localeProps, {
|
|
|
411
413
|
showInitially: Boolean(inFieldBlock && validateInitially)
|
|
412
414
|
});
|
|
413
415
|
forceUpdate();
|
|
414
|
-
}, [prepareError, setFieldErrorDataContext, identifier,
|
|
416
|
+
}, [prepareError, setFieldErrorDataContext, identifier, setFieldErrorBoundary, setFieldStateDataContext, setFieldStateFieldBlock, stateId, inFieldBlock, validateInitially]);
|
|
415
417
|
const clearErrorState = useCallback(() => {
|
|
416
418
|
persistErrorState('wipe');
|
|
417
419
|
hasLocalErrorRef.current = false;
|
|
@@ -824,14 +826,18 @@ export default function useFieldProps(localeProps, {
|
|
|
824
826
|
const handleBlur = useCallback(() => setHasFocus(false), [setHasFocus]);
|
|
825
827
|
setPropsDataContext === null || setPropsDataContext === void 0 ? void 0 : setPropsDataContext(identifier, props);
|
|
826
828
|
useEffect(() => {
|
|
827
|
-
|
|
829
|
+
setMountedFieldStateDataContext(identifier, {
|
|
830
|
+
isMounted: true
|
|
831
|
+
});
|
|
828
832
|
return () => {
|
|
829
|
-
|
|
833
|
+
setMountedFieldStateDataContext(identifier, {
|
|
834
|
+
isMounted: false
|
|
835
|
+
});
|
|
830
836
|
setFieldErrorDataContext === null || setFieldErrorDataContext === void 0 ? void 0 : setFieldErrorDataContext(identifier, undefined);
|
|
831
|
-
|
|
837
|
+
setFieldErrorBoundary === null || setFieldErrorBoundary === void 0 ? void 0 : setFieldErrorBoundary(identifier, undefined);
|
|
832
838
|
localErrorRef.current = undefined;
|
|
833
839
|
};
|
|
834
|
-
}, [
|
|
840
|
+
}, [identifier, setFieldErrorBoundary, setFieldErrorDataContext, setMountedFieldStateDataContext]);
|
|
835
841
|
useEffect(() => {
|
|
836
842
|
validateValue();
|
|
837
843
|
}, [validateValue]);
|