@dnb/eufemia 10.34.1 → 10.36.0

package/es/extensions/forms/Form/Section/ViewContainer/ViewToolbarTools.js

@@ -0,0 +1,26 @@
+"use client";
+
+import React, { useCallback, useContext } from 'react';
+import { Button, Flex } from '../../../../../components';
+import useTranslation from '../../../hooks/useTranslation';
+import SectionContainerContext from '../containers/SectionContainerContext';
+import { edit } from '../../../../../icons';
+export default function ViewToolbarTools() {
+  const sectionContainerContext = useContext(SectionContainerContext);
+  const {
+    switchContainerMode
+  } = sectionContainerContext !== null && sectionContainerContext !== void 0 ? sectionContainerContext : {};
+  const translation = useTranslation().Section;
+  const editHandler = useCallback(() => {
+    switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode('edit');
+  }, [switchContainerMode]);
+  return React.createElement(Flex.Horizontal, {
+    gap: "large"
+  }, React.createElement(Button, {
+    variant: "tertiary",
+    icon: edit,
+    icon_position: "left",
+    on_click: editHandler
+  }, translation.edit));
+}
+//# sourceMappingURL=ViewToolbarTools.js.map

package/es/extensions/forms/Form/Section/ViewContainer/ViewToolbarTools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewToolbarTools.js","names":["React","useCallback","useContext","Button","Flex","useTranslation","SectionContainerContext","edit","ViewToolbarTools","sectionContainerContext","switchContainerMode","translation","Section","editHandler","createElement","Horizontal","gap","variant","icon","icon_position","on_click"],"sources":["../../../../../../../src/extensions/forms/Form/Section/ViewContainer/ViewToolbarTools.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport { Button, Flex } from '../../../../../components'\nimport useTranslation from '../../../hooks/useTranslation'\nimport SectionContainerContext from '../containers/SectionContainerContext'\nimport { edit } from '../../../../../icons'\n\nexport default function ViewToolbarTools() {\n  const sectionContainerContext = useContext(SectionContainerContext)\n  const { switchContainerMode } = sectionContainerContext ?? {}\n\n  const translation = useTranslation().Section\n\n  const editHandler = useCallback(() => {\n    switchContainerMode?.('edit')\n  }, [switchContainerMode])\n\n  return (\n    <Flex.Horizontal gap=\"large\">\n      <Button\n        variant=\"tertiary\"\n        icon={edit}\n        icon_position=\"left\"\n        on_click={editHandler}\n      >\n        {translation.edit}\n      </Button>\n    </Flex.Horizontal>\n  )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,SAASC,MAAM,EAAEC,IAAI,QAAQ,2BAA2B;AACxD,OAAOC,cAAc,MAAM,+BAA+B;AAC1D,OAAOC,uBAAuB,MAAM,uCAAuC;AAC3E,SAASC,IAAI,QAAQ,sBAAsB;AAE3C,eAAe,SAASC,gBAAgBA,CAAA,EAAG;EACzC,MAAMC,uBAAuB,GAAGP,UAAU,CAACI,uBAAuB,CAAC;EACnE,MAAM;IAAEI;EAAoB,CAAC,GAAGD,uBAAuB,aAAvBA,uBAAuB,cAAvBA,uBAAuB,GAAI,CAAC,CAAC;EAE7D,MAAME,WAAW,GAAGN,cAAc,CAAC,CAAC,CAACO,OAAO;EAE5C,MAAMC,WAAW,GAAGZ,WAAW,CAAC,MAAM;IACpCS,mBAAmB,aAAnBA,mBAAmB,uBAAnBA,mBAAmB,CAAG,MAAM,CAAC;EAC/B,CAAC,EAAE,CAACA,mBAAmB,CAAC,CAAC;EAEzB,OACEV,KAAA,CAAAc,aAAA,CAACV,IAAI,CAACW,UAAU;IAACC,GAAG,EAAC;EAAO,GAC1BhB,KAAA,CAAAc,aAAA,CAACX,MAAM;IACLc,OAAO,EAAC,UAAU;IAClBC,IAAI,EAAEX,IAAK;IACXY,aAAa,EAAC,MAAM;IACpBC,QAAQ,EAAEP;EAAY,GAErBF,WAAW,CAACJ,IACP,CACO,CAAC;AAEtB"}

package/es/extensions/forms/Form/Section/ViewContainer/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ViewContainer';
+export * from './ViewContainer';

package/es/extensions/forms/Form/Section/ViewContainer/index.js

@@ -0,0 +1,3 @@
+export { default } from './ViewContainer';
+export * from './ViewContainer';
+//# sourceMappingURL=index.js.map

package/es/extensions/forms/Form/Section/ViewContainer/index.js.map

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

package/es/extensions/forms/Form/Section/containers/SectionContainer.d.ts

@@ -0,0 +1,19 @@
+import { Props as FlexContainerProps } from '../../../../../components/flex/Container';
+export type ContainerMode = 'view' | 'edit';
+export type SectionContainerProps = {
+    /**
+     * Defines the variant of the ViewContainer or EditContainer. Can be `outline`.
+     * Defaults to `outline`.
+     */
+    variant?: 'outline' | 'basic';
+};
+export type Props = {
+    mode: ContainerMode;
+    open?: boolean | undefined;
+    ariaLabel?: string;
+} & SectionContainerProps;
+declare function SectionContainer(props: Props & FlexContainerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SectionContainer {
+    var _supportsSpacingProps: boolean;
+}
+export default SectionContainer;

package/es/extensions/forms/Form/Section/containers/SectionContainer.js

@@ -0,0 +1,83 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["mode", "open", "ariaLabel", "onAnimationEnd", "className", "children", "variant"];
+import React, { useCallback, useContext, useEffect, useReducer, useRef } from 'react';
+import classnames from 'classnames';
+import { Flex, HeightAnimation } from '../../../../../components';
+import SectionContainerContext from './SectionContainerContext';
+import FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext';
+function SectionContainer(props) {
+  const [, forceUpdate] = useReducer(() => ({}), {});
+  const containerRef = useRef();
+  const contextRef = useRef();
+  contextRef.current = useContext(SectionContainerContext) || {};
+  const {
+    hasError,
+    hasSubmitError
+  } = useContext(FieldBoundaryContext) || {};
+  contextRef.current.hasError = hasError;
+  contextRef.current.hasSubmitError = hasSubmitError;
+  if (hasSubmitError) {
+    contextRef.current.containerMode = 'edit';
+  }
+  const {
+    switchContainerMode,
+    containerMode
+  } = contextRef.current;
+  const {
+      mode,
+      open,
+      ariaLabel,
+      onAnimationEnd,
+      className,
+      children,
+      variant = 'outline'
+    } = props,
+    restProps = _objectWithoutProperties(props, _excluded);
+  const openRef = useRef(open !== null && open !== void 0 ? open : containerMode === mode);
+  const setOpenState = useCallback(open => {
+    openRef.current = open;
+    forceUpdate();
+  }, []);
+  useEffect(() => {
+    if (typeof open !== 'undefined') {
+      setOpenState(open);
+    } else {
+      if (openRef.current !== (containerMode === mode)) {
+        setOpenState(containerMode === mode);
+      }
+    }
+  }, [containerMode, mode, open, setOpenState]);
+  const handleAnimationEnd = useCallback(state => {
+    if (contextRef.current.hasSubmitError) {
+      switchContainerMode === null || switchContainerMode === void 0 ? void 0 : switchContainerMode('edit');
+    }
+    if (state === 'opened') {
+      const preventFocusOnErrorOpening = !contextRef.current.hasSubmitError;
+      if (preventFocusOnErrorOpening) {
+        var _containerRef$current, _containerRef$current2;
+        containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : (_containerRef$current2 = _containerRef$current.focus) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.call(_containerRef$current);
+      }
+    }
+    onAnimationEnd === null || onAnimationEnd === void 0 ? void 0 : onAnimationEnd(state);
+  }, [onAnimationEnd, switchContainerMode]);
+  return React.createElement(HeightAnimation, {
+    className: classnames('dnb-forms-section-block', className, variant && `dnb-forms-section-block--variant-${variant}`, contextRef.current.hasSubmitError && 'dnb-forms-section-block--error'),
+    open: openRef.current,
+    onAnimationEnd: handleAnimationEnd,
+    duration: 450,
+    keepInDOM: true
+  }, React.createElement(Flex.Stack, _extends({
+    className: "dnb-forms-section-block__inner"
+  }, restProps, {
+    element: "section",
+    "aria-label": ariaLabel,
+    innerRef: containerRef,
+    tabIndex: -1
+  }), children));
+}
+SectionContainer._supportsSpacingProps = true;
+export default SectionContainer;
+//# sourceMappingURL=SectionContainer.js.map

package/es/extensions/forms/Form/Section/containers/SectionContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionContainer.js","names":["React","useCallback","useContext","useEffect","useReducer","useRef","classnames","Flex","HeightAnimation","SectionContainerContext","FieldBoundaryContext","SectionContainer","props","forceUpdate","containerRef","contextRef","current","hasError","hasSubmitError","containerMode","switchContainerMode","mode","open","ariaLabel","onAnimationEnd","className","children","variant","restProps","_objectWithoutProperties","_excluded","openRef","setOpenState","handleAnimationEnd","state","preventFocusOnErrorOpening","_containerRef$current","_containerRef$current2","focus","call","createElement","duration","keepInDOM","Stack","_extends","element","innerRef","tabIndex","_supportsSpacingProps"],"sources":["../../../../../../../src/extensions/forms/Form/Section/containers/SectionContainer.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport { Flex, HeightAnimation } from '../../../../../components'\nimport SectionContainerContext, {\n  SectionContainerContextState,\n} from './SectionContainerContext'\nimport { Props as FlexContainerProps } from '../../../../../components/flex/Container'\nimport FieldBoundaryContext from '../../../DataContext/FieldBoundary/FieldBoundaryContext'\n\nexport type ContainerMode = 'view' | 'edit'\nexport type SectionContainerProps = {\n  /**\n   * Defines the variant of the ViewContainer or EditContainer. Can be `outline`.\n   * Defaults to `outline`.\n   */\n  variant?: 'outline' | 'basic'\n}\n\nexport type Props = {\n  mode: ContainerMode\n  open?: boolean | undefined\n  ariaLabel?: string\n} & SectionContainerProps\n\nfunction SectionContainer(props: Props & FlexContainerProps) {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const containerRef = useRef<HTMLDivElement>()\n  const contextRef = useRef<\n    SectionContainerContextState & {\n      hasError?: boolean\n      hasSubmitError?: boolean\n    }\n  >()\n  contextRef.current = useContext(SectionContainerContext) || {}\n\n  const { hasError, hasSubmitError } =\n    useContext(FieldBoundaryContext) || {}\n  contextRef.current.hasError = hasError\n  contextRef.current.hasSubmitError = hasSubmitError\n\n  // - Set the container mode to \"edit\" if we have an error\n  if (hasSubmitError) {\n    contextRef.current.containerMode = 'edit'\n  }\n\n  const { switchContainerMode, containerMode } = contextRef.current\n\n  const {\n    mode,\n    open,\n    ariaLabel,\n    onAnimationEnd,\n    className,\n    children,\n    variant = 'outline',\n    ...restProps\n  } = props\n\n  const openRef = useRef(open ?? containerMode === mode)\n  const setOpenState = useCallback((open: boolean) => {\n    openRef.current = open\n    forceUpdate()\n  }, [])\n\n  useEffect(() => {\n    // - Set the open state, if it's controlled\n    if (typeof open !== 'undefined') {\n      setOpenState(open)\n    } else {\n      // - Open the block with animation, if it's in the right mode\n      if (openRef.current !== (containerMode === mode)) {\n        setOpenState(containerMode === mode)\n      }\n    }\n  }, [containerMode, mode, open, setOpenState])\n\n  // - Remove the block with animation, if it's in the right mode\n  const handleAnimationEnd = useCallback(\n    (state) => {\n      // - Keep the block open if we have an error\n      if (contextRef.current.hasSubmitError) {\n        switchContainerMode?.('edit')\n      }\n\n      if (state === 'opened') {\n        const preventFocusOnErrorOpening =\n          !contextRef.current.hasSubmitError\n        if (preventFocusOnErrorOpening) {\n          containerRef?.current?.focus?.()\n        }\n      }\n\n      onAnimationEnd?.(state)\n    },\n    [onAnimationEnd, switchContainerMode]\n  )\n\n  return (\n    <HeightAnimation\n      className={classnames(\n        'dnb-forms-section-block',\n        variant && `dnb-forms-section-block--variant-${variant}`,\n        contextRef.current.hasSubmitError &&\n          'dnb-forms-section-block--error',\n        className\n      )}\n      open={openRef.current}\n      onAnimationEnd={handleAnimationEnd}\n      duration={450}\n      keepInDOM // Ensure fields get mounted so they will sync with the data context\n    >\n      <Flex.Stack\n        className=\"dnb-forms-section-block__inner\"\n        {...restProps}\n        element=\"section\"\n        aria-label={ariaLabel}\n        innerRef={containerRef}\n        tabIndex={-1}\n      >\n        {children}\n      </Flex.Stack>\n    </HeightAnimation>\n  )\n}\n\nSectionContainer._supportsSpacingProps = true\nexport default SectionContainer\n"],"mappings":"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"}

package/es/extensions/forms/Form/Section/containers/SectionContainerContext.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ContainerMode } from './SectionContainer';
+export interface SectionContainerContextState {
+    containerMode?: ContainerMode;
+    switchContainerMode?: (mode: ContainerMode) => void;
+}
+declare const SectionContainerContext: React.Context<SectionContainerContextState>;
+export default SectionContainerContext;

package/es/extensions/forms/Form/Section/containers/SectionContainerContext.js

@@ -0,0 +1,4 @@
+import React from 'react';
+const SectionContainerContext = React.createContext(undefined);
+export default SectionContainerContext;
+//# sourceMappingURL=SectionContainerContext.js.map

package/es/extensions/forms/Form/Section/containers/SectionContainerContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionContainerContext.js","names":["React","SectionContainerContext","createContext","undefined"],"sources":["../../../../../../../src/extensions/forms/Form/Section/containers/SectionContainerContext.ts"],"sourcesContent":["import React from 'react'\nimport { ContainerMode } from './SectionContainer'\n\nexport interface SectionContainerContextState {\n  containerMode?: ContainerMode\n  switchContainerMode?: (mode: ContainerMode) => void\n}\n\nconst SectionContainerContext = React.createContext<\n  SectionContainerContextState | undefined\n>(undefined)\n\nexport default SectionContainerContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAQzB,MAAMC,uBAAuB,GAAGD,KAAK,CAACE,aAAa,CAEjDC,SAAS,CAAC;AAEZ,eAAeF,uBAAuB"}

package/es/extensions/forms/Form/Section/containers/SectionContainerProvider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ContainerMode } from './SectionContainer';
+export type Props = {
+    containerMode?: ContainerMode;
+    children: React.ReactNode;
+};
+declare function SectionContainerProvider(props: Props): import("react/jsx-runtime").JSX.Element;
+export default SectionContainerProvider;

package/es/extensions/forms/Form/Section/containers/SectionContainerProvider.js

@@ -0,0 +1,24 @@
+"use client";
+
+import React, { useCallback, useReducer, useRef } from 'react';
+import SectionContainerContext from './SectionContainerContext';
+function SectionContainerProvider(props) {
+  const [, forceUpdate] = useReducer(() => ({}), {});
+  const {
+    containerMode,
+    children
+  } = props;
+  const containerModeRef = useRef(containerMode);
+  const switchContainerMode = useCallback(mode => {
+    containerModeRef.current = mode;
+    forceUpdate();
+  }, []);
+  return React.createElement(SectionContainerContext.Provider, {
+    value: {
+      containerMode: containerModeRef.current,
+      switchContainerMode
+    }
+  }, children);
+}
+export default SectionContainerProvider;
+//# sourceMappingURL=SectionContainerProvider.js.map

package/es/extensions/forms/Form/Section/containers/SectionContainerProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionContainerProvider.js","names":["React","useCallback","useReducer","useRef","SectionContainerContext","SectionContainerProvider","props","forceUpdate","containerMode","children","containerModeRef","switchContainerMode","mode","current","createElement","Provider","value"],"sources":["../../../../../../../src/extensions/forms/Form/Section/containers/SectionContainerProvider.tsx"],"sourcesContent":["import React, { useCallback, useReducer, useRef } from 'react'\nimport SectionContainerContext from './SectionContainerContext'\nimport { ContainerMode } from './SectionContainer'\n\nexport type Props = {\n  containerMode?: ContainerMode\n  children: React.ReactNode\n}\n\nfunction SectionContainerProvider(props: Props) {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const { containerMode, children } = props\n\n  const containerModeRef = useRef<ContainerMode>(containerMode)\n\n  const switchContainerMode = useCallback((mode: ContainerMode) => {\n    containerModeRef.current = mode\n    forceUpdate()\n  }, [])\n\n  return (\n    <SectionContainerContext.Provider\n      value={{\n        containerMode: containerModeRef.current,\n        switchContainerMode,\n      }}\n    >\n      {children}\n    </SectionContainerContext.Provider>\n  )\n}\n\nexport default SectionContainerProvider\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,MAAM,QAAQ,OAAO;AAC9D,OAAOC,uBAAuB,MAAM,2BAA2B;AAQ/D,SAASC,wBAAwBA,CAACC,KAAY,EAAE;EAC9C,MAAM,GAAGC,WAAW,CAAC,GAAGL,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EAElD,MAAM;IAAEM,aAAa;IAAEC;EAAS,CAAC,GAAGH,KAAK;EAEzC,MAAMI,gBAAgB,GAAGP,MAAM,CAAgBK,aAAa,CAAC;EAE7D,MAAMG,mBAAmB,GAAGV,WAAW,CAAEW,IAAmB,IAAK;IAC/DF,gBAAgB,CAACG,OAAO,GAAGD,IAAI;IAC/BL,WAAW,CAAC,CAAC;EACf,CAAC,EAAE,EAAE,CAAC;EAEN,OACEP,KAAA,CAAAc,aAAA,CAACV,uBAAuB,CAACW,QAAQ;IAC/BC,KAAK,EAAE;MACLR,aAAa,EAAEE,gBAAgB,CAACG,OAAO;MACvCF;IACF;EAAE,GAEDF,QAC+B,CAAC;AAEvC;AAEA,eAAeJ,wBAAwB"}

package/es/extensions/forms/Form/Section/containers/Toolbar.d.ts

@@ -0,0 +1,7 @@
+import { SpaceAllProps } from '../../../../../components/Space';
+export type Props = SpaceAllProps;
+declare function Toolbar(props: Props): import("react/jsx-runtime").JSX.Element;
+declare namespace Toolbar {
+    var _supportsSpacingProps: boolean;
+}
+export default Toolbar;

package/es/extensions/forms/Form/Section/containers/Toolbar.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _Hr;
+const _excluded = ["children", "className"];
+import React from 'react';
+import classnames from 'classnames';
+import { Hr } from '../../../../../elements';
+import { Flex, Space } from '../../../../../components';
+export default function Toolbar(props) {
+  const _ref = props || {},
+    {
+      children,
+      className
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return React.createElement(Space, _extends({
+    top: "medium",
+    className: classnames('dnb-forms-section-toolbar', className)
+  }, rest), _Hr || (_Hr = React.createElement(Hr, {
+    space: 0
+  })), React.createElement(Flex.Horizontal, {
+    top: "x-small",
+    gap: "large"
+  }, children));
+}
+Toolbar._supportsSpacingProps = true;
+//# sourceMappingURL=Toolbar.js.map

package/es/extensions/forms/Form/Section/containers/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","names":["React","classnames","Hr","Flex","Space","Toolbar","props","_ref","children","className","rest","_objectWithoutProperties","_excluded","createElement","_extends","top","_Hr","space","Horizontal","gap","_supportsSpacingProps"],"sources":["../../../../../../../src/extensions/forms/Form/Section/containers/Toolbar.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Hr } from '../../../../../elements'\nimport { Flex, Space } from '../../../../../components'\nimport { SpaceAllProps } from '../../../../../components/Space'\n\nexport type Props = SpaceAllProps\n\nexport default function Toolbar(props: Props) {\n  const { children, className, ...rest } = props || {}\n\n  return (\n    <Space\n      top=\"medium\"\n      className={classnames('dnb-forms-section-toolbar', className)}\n      {...rest}\n    >\n      <Hr space={0} />\n\n      <Flex.Horizontal top=\"x-small\" gap=\"large\">\n        {children}\n      </Flex.Horizontal>\n    </Space>\n  )\n}\n\nToolbar._supportsSpacingProps = true\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,EAAE,QAAQ,yBAAyB;AAC5C,SAASC,IAAI,EAAEC,KAAK,QAAQ,2BAA2B;AAKvD,eAAe,SAASC,OAAOA,CAACC,KAAY,EAAE;EAC5C,MAAAC,IAAA,GAAyCD,KAAK,IAAI,CAAC,CAAC;IAA9C;MAAEE,QAAQ;MAAEC;IAAmB,CAAC,GAAAF,IAAA;IAANG,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAEpC,OACEZ,KAAA,CAAAa,aAAA,CAACT,KAAK,EAAAU,QAAA;IACJC,GAAG,EAAC,QAAQ;IACZN,SAAS,EAAER,UAAU,CAAC,2BAA2B,EAAEQ,SAAS;EAAE,GAC1DC,IAAI,GAAAM,GAAA,KAAAA,GAAA,GAERhB,KAAA,CAAAa,aAAA,CAACX,EAAE;IAACe,KAAK,EAAE;EAAE,CAAE,CAAC,GAEhBjB,KAAA,CAAAa,aAAA,CAACV,IAAI,CAACe,UAAU;IAACH,GAAG,EAAC,SAAS;IAACI,GAAG,EAAC;EAAO,GACvCX,QACc,CACZ,CAAC;AAEZ;AAEAH,OAAO,CAACe,qBAAqB,GAAG,IAAI"}

package/es/extensions/forms/Form/Section/style/dnb-form-section.css

@@ -0,0 +1,45 @@
+.dnb-forms-section-block {
+  --block-outline-color: var(--outline-color, var(--color-lavender));
+}
+.dnb-forms-section-block--error:has(.dnb-form-status--error) {
+  --block-outline-color: var(--color-fire-red);
+}
+.dnb-forms-section-block:not(.dnb-height-animation--hidden) {
+  display: flex;
+  flex-direction: column;
+}
+.dnb-forms-section-block__inner {
+  flex: 1;
+  outline: none;
+  margin-bottom: var(--space);
+  padding: var(--padding, 1rem);
+  transition: transform 400ms var(--easing-default) 50ms, box-shadow 0.8s var(--easing-default);
+  transform: translateY(-2.5rem);
+}
+.dnb-forms-section-block--variant-basic .dnb-forms-section-block__inner, .dnb-forms-section-block__inner:not([class*=dnb-flex-container--spacing]) {
+  --padding: 0;
+}
+.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing] {
+  border-radius: 0.375rem;
+}
+.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small {
+  --space: var(--spacing-small);
+}
+.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium {
+  --space: var(--spacing-medium);
+}
+.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large {
+  --space: var(--spacing-large);
+}
+.dnb-forms-section-block--variant-outline .dnb-forms-section-block__inner[class*=dnb-flex-container--spacing] {
+  box-shadow: inset 0 0 0 2px var(--block-outline-color);
+}
+.dnb-forms-section-block__inner .dnb-dl .dnb-dd {
+  margin-bottom: 0;
+}
+.dnb-forms-section-block.dnb-height-animation--is-visible .dnb-forms-section-block__inner {
+  transform: translateY(-0.5rem);
+}
+.dnb-forms-section-block.dnb-height-animation--parallax .dnb-forms-section-block__inner {
+  transform: translateY(0);
+}

package/es/extensions/forms/Form/Section/style/dnb-form-section.min.css

@@ -0,0 +1 @@
+.dnb-forms-section-block{--block-outline-color:var(--outline-color,var(--color-lavender))}.dnb-forms-section-block--error:has(.dnb-form-status--error){--block-outline-color:var(--color-fire-red)}.dnb-forms-section-block:not(.dnb-height-animation--hidden){display:flex;flex-direction:column}.dnb-forms-section-block__inner{flex:1;margin-bottom:var(--space);outline:none;padding:var(--padding,1rem);transform:translateY(-2.5rem);transition:transform .4s var(--easing-default) 50ms,box-shadow .8s var(--easing-default)}.dnb-forms-section-block--variant-basic .dnb-forms-section-block__inner,.dnb-forms-section-block__inner:not([class*=dnb-flex-container--spacing]){--padding:0}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing]{border-radius:.375rem}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small{--space:var(--spacing-small)}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium{--space:var(--spacing-medium)}.dnb-forms-section-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large{--space:var(--spacing-large)}.dnb-forms-section-block--variant-outline .dnb-forms-section-block__inner[class*=dnb-flex-container--spacing]{box-shadow:inset 0 0 0 2px var(--block-outline-color)}.dnb-forms-section-block__inner .dnb-dl .dnb-dd{margin-bottom:0}.dnb-forms-section-block.dnb-height-animation--is-visible .dnb-forms-section-block__inner{transform:translateY(-.5rem)}.dnb-forms-section-block.dnb-height-animation--parallax .dnb-forms-section-block__inner{transform:translateY(0)}

package/{cjs/extensions/forms/Iterate/style/dnb-form-iterate.scss → es/extensions/forms/Form/Section/style/dnb-form-section.scss}

@@ -1,4 +1,4 @@
-.dnb-forms-iterate {
+.dnb-forms-section {
   &-block {
     --block-outline-color: var(--outline-color, var(--color-lavender));
     &--error:has(.dnb-form-status--error) {
@@ -13,11 +13,12 @@
 
     &__inner {
       flex: 1;
+      outline: none; // for JavaSCript focus
 
       margin-bottom: var(--space);
       padding: var(--padding, 1rem);
 
-      .dnb-forms-iterate-block--variant-basic &,
+      .dnb-forms-section-block--variant-basic &,
       &:not([class*='dnb-flex-container--spacing']) {
         --padding: 0;
       }
@@ -37,7 +38,7 @@
 
         border-radius: 0.375rem;
 
-        .dnb-forms-iterate-block--variant-outline & {
+        .dnb-forms-section-block--variant-outline & {
           box-shadow: inset 0 0 0 2px var(--block-outline-color);
         }
       }
@@ -59,13 +60,4 @@
       transform: translateY(0);
     }
   }
-
-  &__element {
-    outline: none; // for JavaSCript focus
-  }
-
-  & > &__element:has(> &-block) {
-    // To make Animation not jump, we add "margin-bottom" in the inner element
-    margin-top: 0;
-  }
 }

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

@@ -1,9 +1,9 @@
 import React, { AriaAttributes } from 'react';
 import { HeightAnimationProps } from '../../../../components/HeightAnimation';
-import { FilterData } from '../../DataContext/Context';
 import type { UseFieldProps } from '../../types';
 import type { DataAttributes } from '../../hooks/useFieldProps';
-type VisibleWhen = {
+import { FilterData } from '../../DataContext';
+export type VisibleWhen = {
     path: string;
     hasValue: unknown;
 } | {

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

@@ -1,16 +1,12 @@
-"use client";
-
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["visible", "pathDefined", "pathUndefined", "pathTruthy", "pathFalsy", "pathTrue", "pathFalse", "pathValue", "whenValue", "visibleWhen", "visibleWhenNot", "inferData", "filterData", "animate", "keepInDOM", "fieldPropsWhenHidden", "children"];
-import React, { useCallback, useContext } from 'react';
-import pointer from 'json-pointer';
+import React from 'react';
 import { warn } from '../../../../shared/helpers';
 import useMountEffect from '../../../../shared/helpers/useMountEffect';
 import HeightAnimation from '../../../../components/HeightAnimation';
-import DataContext from '../../DataContext/Context';
-import SectionContext from '../Section/SectionContext';
 import FieldProps from '../FieldProps';
+import useVisibility from './useVisibility';
 function Visibility(_ref) {
   let {
       visible,
@@ -32,76 +28,29 @@ function Visibility(_ref) {
       children
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  const dataContext = useContext(DataContext);
-  const sectionContext = useContext(SectionContext);
-  const sectionPath = sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.path;
-  const composePath = useCallback(path => {
-    return `${sectionPath && sectionPath !== '/' ? sectionPath : ''}${path}`;
-  }, [sectionPath]);
   useMountEffect(() => {
     if (fieldPropsWhenHidden && !keepInDOM) {
       warn('Using "fieldPropsWhenHidden" requires "keepInDOM" to be true.');
     }
   });
-  const check = () => {
-    var _dataContext$filterDa;
-    if (visible === false) {
-      return;
-    }
-    const data = filterData && ((_dataContext$filterDa = dataContext.filterDataHandler) === null || _dataContext$filterDa === void 0 ? void 0 : _dataContext$filterDa.call(dataContext, dataContext.data, filterData)) || dataContext.data;
-    if (visibleWhen || visibleWhenNot) {
-      if (visibleWhenNot) {
-        visibleWhen = visibleWhenNot;
-      }
-      const hasPath = pointer.has(data, composePath(visibleWhen.path));
-      if (hasPath) {
-        var _visibleWhen, _visibleWhen2;
-        const value = pointer.get(data, composePath(visibleWhen.path));
-        const withValue = (_visibleWhen = visibleWhen) === null || _visibleWhen === void 0 ? void 0 : _visibleWhen['withValue'];
-        const result = withValue && (withValue === null || withValue === void 0 ? void 0 : withValue(value)) === false || Object.prototype.hasOwnProperty.call(visibleWhen, 'hasValue') && ((_visibleWhen2 = visibleWhen) === null || _visibleWhen2 === void 0 ? void 0 : _visibleWhen2['hasValue']) !== value;
-        if (visibleWhenNot) {
-          if (!result) {
-            return;
-          }
-        } else if (result) {
-          return;
-        }
-      } else {
-        return;
-      }
-    }
-    if (pathDefined && !pointer.has(data, composePath(pathDefined))) {
-      return;
-    }
-    if (pathUndefined && pointer.has(data, composePath(pathUndefined))) {
-      return;
-    }
-    const getValue = path => {
-      if (pointer.has(data, path)) {
-        return pointer.get(data, path);
-      }
-    };
-    if (pathTrue && getValue(composePath(pathTrue)) !== true) {
-      return;
-    }
-    if (pathFalse && getValue(composePath(pathFalse)) !== false) {
-      return;
-    }
-    if (pathTruthy && Boolean(getValue(composePath(pathTruthy))) === false) {
-      return;
-    }
-    if (pathFalsy && Boolean(getValue(composePath(pathFalsy))) === true) {
-      return;
-    }
-    if (inferData && !inferData(data)) {
-      return;
-    }
-    if (pathValue && getValue(composePath(pathValue)) !== whenValue) {
-      return;
-    }
-    return true;
-  };
-  const open = Boolean(check());
+  const {
+    check
+  } = useVisibility({
+    visible,
+    pathDefined,
+    pathUndefined,
+    pathTruthy,
+    pathFalsy,
+    pathTrue,
+    pathFalse,
+    pathValue,
+    whenValue,
+    visibleWhen,
+    visibleWhenNot,
+    inferData,
+    filterData
+  });
+  const open = check();
   if (animate) {
     const props = !open ? fieldPropsWhenHidden : null;
     return React.createElement(HeightAnimation, _extends({

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

@@ -1 +1 @@
-{"version":3,"file":"Visibility.js","names":["React","useCallback","useContext","pointer","warn","useMountEffect","HeightAnimation","DataContext","SectionContext","FieldProps","Visibility","_ref","visible","pathDefined","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","pathValue","whenValue","visibleWhen","visibleWhenNot","inferData","filterData","animate","keepInDOM","fieldPropsWhenHidden","children","rest","_objectWithoutProperties","_excluded","dataContext","sectionContext","sectionPath","path","composePath","check","_dataContext$filterDa","data","filterDataHandler","call","hasPath","has","_visibleWhen","_visibleWhen2","value","get","withValue","result","Object","prototype","hasOwnProperty","getValue","Boolean","open","props","createElement","_extends","className","hidden","Fragment","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/Visibility.tsx"],"sourcesContent":["import React, { AriaAttributes, useCallback, useContext } from 'react'\nimport pointer from 'json-pointer'\nimport { warn } from '../../../../shared/helpers'\nimport useMountEffect from '../../../../shared/helpers/useMountEffect'\nimport HeightAnimation, {\n  HeightAnimationProps,\n} from '../../../../components/HeightAnimation'\nimport DataContext, { FilterData } from '../../DataContext/Context'\nimport SectionContext from '../Section/SectionContext'\nimport FieldProps from '../FieldProps'\nimport type { Path, UseFieldProps } from '../../types'\nimport type { DataAttributes } from '../../hooks/useFieldProps'\n\ntype VisibleWhen =\n  | {\n      path: string\n      hasValue: unknown\n    }\n  | {\n      path: string\n      withValue: (value: unknown) => boolean\n    }\n\nexport type Props = {\n  visible?: boolean\n  /** Given data context path must be defined to show children */\n  pathDefined?: string\n  /** Given data context path must be undefined to show children */\n  pathUndefined?: string\n  /** Given data context path must be truthy to show children */\n  pathTruthy?: string\n  /** Given data context path must be falsy to show children */\n  pathFalsy?: string\n  /** Given data context path must be true to show children */\n  pathTrue?: string\n  /** Given data context path must be false to show children */\n  pathFalse?: string\n  /** Provide a `path` and a `hasValue` property with the excepted value in order to show children. You can alternatively provide a `withValue` function that returns a boolean. The first parameter is the value of the path. */\n  visibleWhen?: VisibleWhen\n  /** Same as `visibleWhen`, but with inverted logic. */\n  visibleWhenNot?: VisibleWhen\n  /** Infer visibility calling given derivative function with the whole data set. Should return true/false for visibility.   */\n  inferData?: (data: unknown) => boolean\n  /** Filter data based on provided criteria. The first parameter is the path, the second is the value, and the third is the props, and the fourth is the internal. Return false to filter out the data. */\n  filterData?: FilterData\n  /** Animate the visibility change */\n  animate?: boolean\n  /** Keep the content in the DOM, even if it's not visible */\n  keepInDOM?: boolean\n  /** When visibility is hidden, and `keepInDOM` is true, pass these props to the children */\n  fieldPropsWhenHidden?: UseFieldProps & DataAttributes & AriaAttributes\n  element?: HeightAnimationProps['element']\n  children: React.ReactNode\n\n  /** @deprecated Use `visibleWhen` instead */\n  pathValue?: string\n  /** @deprecated Use `visibleWhen` instead */\n  whenValue?: unknown\n}\n\nfunction Visibility({\n  visible,\n  pathDefined,\n  pathUndefined,\n  pathTruthy,\n  pathFalsy,\n  pathTrue,\n  pathFalse,\n  pathValue,\n  whenValue,\n  visibleWhen,\n  visibleWhenNot,\n  inferData,\n  filterData,\n  animate,\n  keepInDOM,\n  fieldPropsWhenHidden,\n  children,\n  ...rest\n}: Props) {\n  const dataContext = useContext(DataContext)\n  const sectionContext = useContext(SectionContext)\n\n  const sectionPath = sectionContext?.path\n  const composePath = useCallback(\n    (path: Path) => {\n      return `${\n        sectionPath && sectionPath !== '/' ? sectionPath : ''\n      }${path}`\n    },\n    [sectionPath]\n  )\n\n  useMountEffect(() => {\n    if (fieldPropsWhenHidden && !keepInDOM) {\n      warn('Using \"fieldPropsWhenHidden\" requires \"keepInDOM\" to be true.')\n    }\n  })\n\n  const check = () => {\n    if (visible === false) {\n      return\n    }\n\n    const data =\n      (filterData &&\n        dataContext.filterDataHandler?.(dataContext.data, filterData)) ||\n      dataContext.data\n\n    if (visibleWhen || visibleWhenNot) {\n      if (visibleWhenNot) {\n        visibleWhen = visibleWhenNot\n      }\n      const hasPath = pointer.has(data, composePath(visibleWhen.path))\n      if (hasPath) {\n        const value = pointer.get(data, composePath(visibleWhen.path))\n\n        const withValue = visibleWhen?.['withValue']\n        const result =\n          (withValue && withValue?.(value) === false) ||\n          (Object.prototype.hasOwnProperty.call(visibleWhen, 'hasValue') &&\n            visibleWhen?.['hasValue'] !== value)\n\n        if (visibleWhenNot) {\n          if (!result) {\n            return\n          }\n        } else if (result) {\n          return\n        }\n      } else {\n        return\n      }\n    }\n\n    if (pathDefined && !pointer.has(data, composePath(pathDefined))) {\n      return\n    }\n    if (pathUndefined && pointer.has(data, composePath(pathUndefined))) {\n      return\n    }\n\n    const getValue = (path: Path) => {\n      if (pointer.has(data, path)) {\n        return pointer.get(data, path)\n      }\n    }\n\n    if (pathTrue && getValue(composePath(pathTrue)) !== true) {\n      return\n    }\n    if (pathFalse && getValue(composePath(pathFalse)) !== false) {\n      return\n    }\n    if (\n      pathTruthy &&\n      Boolean(getValue(composePath(pathTruthy))) === false\n    ) {\n      return\n    }\n    if (pathFalsy && Boolean(getValue(composePath(pathFalsy))) === true) {\n      return\n    }\n    if (inferData && !inferData(data)) {\n      return\n    }\n\n    // Deprecated can be removed in v11\n    if (pathValue && getValue(composePath(pathValue)) !== whenValue) {\n      return\n    }\n\n    return true\n  }\n\n  const open = Boolean(check())\n\n  if (animate) {\n    const props = !open ? fieldPropsWhenHidden : null\n\n    return (\n      <HeightAnimation\n        open={open}\n        keepInDOM={Boolean(keepInDOM)}\n        className=\"dnb-forms-visibility\"\n        {...rest}\n      >\n        <FieldProps {...props}>{children}</FieldProps>\n      </HeightAnimation>\n    )\n  }\n\n  if (keepInDOM) {\n    const props = !open ? fieldPropsWhenHidden : null\n    return (\n      <span className=\"dnb-forms-visibility\" hidden={!open}>\n        <FieldProps {...props}>{children}</FieldProps>\n      </span>\n    )\n  }\n\n  return <>{open ? children : null}</>\n}\n\nVisibility._supportsSpacingProps = 'children'\nexport default Visibility\n"],"mappings":"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"}
+{"version":3,"file":"Visibility.js","names":["React","warn","useMountEffect","HeightAnimation","FieldProps","useVisibility","Visibility","_ref","visible","pathDefined","pathUndefined","pathTruthy","pathFalsy","pathTrue","pathFalse","pathValue","whenValue","visibleWhen","visibleWhenNot","inferData","filterData","animate","keepInDOM","fieldPropsWhenHidden","children","rest","_objectWithoutProperties","_excluded","check","open","props","createElement","_extends","Boolean","className","hidden","Fragment","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/Visibility/Visibility.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react'\n\nimport { warn } from '../../../../shared/helpers'\nimport useMountEffect from '../../../../shared/helpers/useMountEffect'\nimport HeightAnimation, {\n  HeightAnimationProps,\n} from '../../../../components/HeightAnimation'\nimport FieldProps from '../FieldProps'\nimport useVisibility from './useVisibility'\n\nimport type { UseFieldProps } from '../../types'\nimport type { DataAttributes } from '../../hooks/useFieldProps'\nimport { FilterData } from '../../DataContext'\n\nexport type VisibleWhen =\n  | {\n      path: string\n      hasValue: unknown\n    }\n  | {\n      path: string\n      withValue: (value: unknown) => boolean\n    }\n\nexport type Props = {\n  visible?: boolean\n  /** Given data context path must be defined to show children */\n  pathDefined?: string\n  /** Given data context path must be undefined to show children */\n  pathUndefined?: string\n  /** Given data context path must be truthy to show children */\n  pathTruthy?: string\n  /** Given data context path must be falsy to show children */\n  pathFalsy?: string\n  /** Given data context path must be true to show children */\n  pathTrue?: string\n  /** Given data context path must be false to show children */\n  pathFalse?: string\n  /** Provide a `path` and a `hasValue` property with the excepted value in order to show children. You can alternatively provide a `withValue` function that returns a boolean. The first parameter is the value of the path. */\n  visibleWhen?: VisibleWhen\n  /** Same as `visibleWhen`, but with inverted logic. */\n  visibleWhenNot?: VisibleWhen\n  /** Infer visibility calling given derivative function with the whole data set. Should return true/false for visibility.   */\n  inferData?: (data: unknown) => boolean\n  /** Filter data based on provided criteria. The first parameter is the path, the second is the value, and the third is the props, and the fourth is the internal. Return false to filter out the data. */\n  filterData?: FilterData\n  /** Animate the visibility change */\n  animate?: boolean\n  /** Keep the content in the DOM, even if it's not visible */\n  keepInDOM?: boolean\n  /** When visibility is hidden, and `keepInDOM` is true, pass these props to the children */\n  fieldPropsWhenHidden?: UseFieldProps & DataAttributes & AriaAttributes\n  element?: HeightAnimationProps['element']\n  children: React.ReactNode\n\n  /** @deprecated Use `visibleWhen` instead */\n  pathValue?: string\n  /** @deprecated Use `visibleWhen` instead */\n  whenValue?: unknown\n}\n\nfunction Visibility({\n  visible,\n  pathDefined,\n  pathUndefined,\n  pathTruthy,\n  pathFalsy,\n  pathTrue,\n  pathFalse,\n  pathValue,\n  whenValue,\n  visibleWhen,\n  visibleWhenNot,\n  inferData,\n  filterData,\n  animate,\n  keepInDOM,\n  fieldPropsWhenHidden,\n  children,\n  ...rest\n}: Props) {\n  useMountEffect(() => {\n    if (fieldPropsWhenHidden && !keepInDOM) {\n      warn('Using \"fieldPropsWhenHidden\" requires \"keepInDOM\" to be true.')\n    }\n  })\n\n  const { check } = useVisibility({\n    visible,\n    pathDefined,\n    pathUndefined,\n    pathTruthy,\n    pathFalsy,\n    pathTrue,\n    pathFalse,\n    pathValue,\n    whenValue,\n    visibleWhen,\n    visibleWhenNot,\n    inferData,\n    filterData,\n  })\n  const open = check()\n\n  if (animate) {\n    const props = !open ? fieldPropsWhenHidden : null\n\n    return (\n      <HeightAnimation\n        open={open}\n        keepInDOM={Boolean(keepInDOM)}\n        className=\"dnb-forms-visibility\"\n        {...rest}\n      >\n        <FieldProps {...props}>{children}</FieldProps>\n      </HeightAnimation>\n    )\n  }\n\n  if (keepInDOM) {\n    const props = !open ? fieldPropsWhenHidden : null\n    return (\n      <span className=\"dnb-forms-visibility\" hidden={!open}>\n        <FieldProps {...props}>{children}</FieldProps>\n      </span>\n    )\n  }\n\n  return <>{open ? children : null}</>\n}\n\nVisibility._supportsSpacingProps = 'children'\nexport default Visibility\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAA0B,OAAO;AAE7C,SAASC,IAAI,QAAQ,4BAA4B;AACjD,OAAOC,cAAc,MAAM,2CAA2C;AACtE,OAAOC,eAAe,MAEf,wCAAwC;AAC/C,OAAOC,UAAU,MAAM,eAAe;AACtC,OAAOC,aAAa,MAAM,iBAAiB;AAqD3C,SAASC,UAAUA,CAAAC,IAAA,EAmBT;EAAA,IAnBU;MAClBC,OAAO;MACPC,WAAW;MACXC,aAAa;MACbC,UAAU;MACVC,SAAS;MACTC,QAAQ;MACRC,SAAS;MACTC,SAAS;MACTC,SAAS;MACTC,WAAW;MACXC,cAAc;MACdC,SAAS;MACTC,UAAU;MACVC,OAAO;MACPC,SAAS;MACTC,oBAAoB;MACpBC;IAEK,CAAC,GAAAjB,IAAA;IADHkB,IAAI,GAAAC,wBAAA,CAAAnB,IAAA,EAAAoB,SAAA;EAEPzB,cAAc,CAAC,MAAM;IACnB,IAAIqB,oBAAoB,IAAI,CAACD,SAAS,EAAE;MACtCrB,IAAI,CAAC,+DAA+D,CAAC;IACvE;EACF,CAAC,CAAC;EAEF,MAAM;IAAE2B;EAAM,CAAC,GAAGvB,aAAa,CAAC;IAC9BG,OAAO;IACPC,WAAW;IACXC,aAAa;IACbC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,SAAS;IACTC,SAAS;IACTC,SAAS;IACTC,WAAW;IACXC,cAAc;IACdC,SAAS;IACTC;EACF,CAAC,CAAC;EACF,MAAMS,IAAI,GAAGD,KAAK,CAAC,CAAC;EAEpB,IAAIP,OAAO,EAAE;IACX,MAAMS,KAAK,GAAG,CAACD,IAAI,GAAGN,oBAAoB,GAAG,IAAI;IAEjD,OACEvB,KAAA,CAAA+B,aAAA,CAAC5B,eAAe,EAAA6B,QAAA;MACdH,IAAI,EAAEA,IAAK;MACXP,SAAS,EAAEW,OAAO,CAACX,SAAS,CAAE;MAC9BY,SAAS,EAAC;IAAsB,GAC5BT,IAAI,GAERzB,KAAA,CAAA+B,aAAA,CAAC3B,UAAU,EAAK0B,KAAK,EAAGN,QAAqB,CAC9B,CAAC;EAEtB;EAEA,IAAIF,SAAS,EAAE;IACb,MAAMQ,KAAK,GAAG,CAACD,IAAI,GAAGN,oBAAoB,GAAG,IAAI;IACjD,OACEvB,KAAA,CAAA+B,aAAA;MAAMG,SAAS,EAAC,sBAAsB;MAACC,MAAM,EAAE,CAACN;IAAK,GACnD7B,KAAA,CAAA+B,aAAA,CAAC3B,UAAU,EAAK0B,KAAK,EAAGN,QAAqB,CACzC,CAAC;EAEX;EAEA,OAAOxB,KAAA,CAAA+B,aAAA,CAAA/B,KAAA,CAAAoC,QAAA,QAAGP,IAAI,GAAGL,QAAQ,GAAG,IAAO,CAAC;AACtC;AAEAlB,UAAU,CAAC+B,qBAAqB,GAAG,UAAU;AAC7C,eAAe/B,UAAU"}

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

@@ -0,0 +1,5 @@
+import { Props } from './Visibility';
+export type { Props };
+export default function useVisibility(props?: Partial<Props>): {
+    check: ({ visible, visibleWhen, visibleWhenNot, pathDefined, pathUndefined, pathTruthy, pathFalsy, pathTrue, pathFalse, pathValue, whenValue, inferData, filterData, }?: Partial<Props>) => boolean;
+};