@dnb/eufemia 10.58.0 → 10.60.0

package/es/components/form-label/FormLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","names":["React","useEffect","useRef","classnames","extendPropsWithContext","isTrue","validateDOMAttributes","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","pickFormElementProps","convertSnakeCaseProps","omitSpacingProps","Context","FormLabel","localProps","context","useContext","props","skeleton","FormRow","formElement","nestedContent","text","children","nestedNode","nestedElement","createElement","forId","srOnly","vertical","labelDirection","size","element","Element","innerRef","className","attributes","_objectWithoutProperties","_excluded","content","isInteractive","Boolean","disabled","onClick","params","_objectSpread","right","htmlFor","labelRef","ref","forElem","document","querySelector","target","closest","_elem$addEventListene","_elem$addEventListene2","elem","current","buttonEnter","classList","add","leave","buttonLeave","remove","enter","_button$addEventListe","_button$addEventListe2","button","addEventListener","call","once","_elem$querySelector","_elem$querySelector$r","removeEventListener","_elem$removeEventList","_elem$removeEventList2","_elem$querySelector2","_elem$querySelector2$","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/form-label/FormLabel.tsx"],"sourcesContent":["/**\n * Web FormLabel Component\n *\n */\n\nimport React, { useEffect, useRef } from 'react'\nimport classnames from 'classnames'\nimport {\n  extendPropsWithContext,\n  isTrue,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n  createSkeletonClass,\n  skeletonDOMAttributes,\n} from '../skeleton/SkeletonHelper'\nimport {\n  FormElementProps,\n  pickFormElementProps,\n} from '../../shared/helpers/filterValidProps'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\nimport { omitSpacingProps } from '../flex/utils'\nimport Context from '../../shared/Context'\nimport type {\n  DynamicElement,\n  DynamicElementParams,\n  SpacingProps,\n} from '../../shared/types'\n\nexport type FormLabelProps = {\n  forId?: string\n  element?: DynamicElement<HTMLLabelElement>\n  text?: React.ReactNode\n  size?: 'basis' | 'medium' | 'large'\n  id?: string\n  skeleton?: boolean\n  label?: React.ReactNode\n  vertical?: boolean\n  srOnly?: boolean\n  innerRef?: React.RefObject<HTMLElement>\n\n  /** Is not a part of HTMLLabelElement and not documented as of now */\n  disabled?: boolean\n\n  /**\n   * For internal use only\n   */\n  labelDirection?: FormElementProps['labelDirection']\n\n  /** @deprecated use forId instead */\n  for_id?: string\n  /** @deprecated use srOnly instead */\n  sr_only?: boolean\n  /** @deprecated use \"vertical\" (or \"labelDirection\" for internal use) instead (was not documented before) */\n  label_direction?: FormElementProps['label_direction']\n}\n\nexport type FormLabelAllProps = FormLabelProps &\n  React.HTMLAttributes<HTMLLabelElement> &\n  SpacingProps\n\nexport default function FormLabel(localProps: FormLabelAllProps) {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = convertSnakeCaseProps(\n    extendPropsWithContext(\n      localProps,\n      null,\n      { skeleton: context?.skeleton },\n      pickFormElementProps(context?.FormRow), // Deprecated – can be removed in v11\n      pickFormElementProps(context?.formElement),\n      context?.FormLabel\n    )\n  )\n\n  const nestedContent = props?.text || props?.children\n  const nestedNode =\n    nestedContent?.['type'] === FormLabel ? nestedContent?.['type'] : null\n  const nestedElement = nestedNode\n    ? () => React.createElement(nestedNode, nestedContent['props'])\n    : null\n\n  const {\n    forId,\n    text,\n    srOnly,\n    vertical,\n    labelDirection,\n    size,\n    skeleton,\n    element: Element = nestedElement || 'label',\n    innerRef,\n    className,\n    children,\n    ...attributes\n  } = props\n\n  const content = text || children\n\n  const isInteractive = Boolean(\n    !props.disabled &&\n      !srOnly &&\n      (typeof props.onClick === 'function' || forId)\n  )\n\n  const params = {\n    className: classnames(\n      'dnb-form-label',\n      (isTrue(vertical) || labelDirection === 'vertical') &&\n        `dnb-form-label--vertical`,\n      srOnly && 'dnb-sr-only',\n      size && `dnb-h--${size}`,\n      isInteractive && 'dnb-form-label--interactive',\n      createSkeletonClass('font', skeleton, context),\n      createSpacingClasses(\n        content ? { right: 'small', ...props } : omitSpacingProps(props)\n      ),\n      className\n    ),\n    htmlFor: forId,\n    ...(attributes as DynamicElementParams),\n  }\n\n  const labelRef = useRef<HTMLLabelElement>(null)\n  const ref = innerRef || labelRef\n  if (!nestedNode) {\n    params['ref'] = ref\n  }\n\n  useEffect(() => {\n    if (!forId) {\n      return\n    }\n\n    const forElem = document.querySelector(`#${forId}`)\n    const target =\n      forElem?.closest('.dnb-input__border--root') ||\n      forElem?.closest('.dnb-input__border')\n\n    if (target) {\n      const elem = ref.current\n\n      const buttonEnter = () => {\n        target.classList.add('no-hover')\n        leave()\n      }\n      const buttonLeave = () => {\n        target.classList.remove('no-hover')\n        enter()\n      }\n\n      const enter = () => {\n        target.classList.add('hover')\n\n        // Remove the style from interactive elements (e.g. HelpButton)\n        const button = elem.querySelector('button')\n        button?.addEventListener?.('mouseenter', buttonEnter, {\n          once: true,\n        })\n        button?.addEventListener?.('mouseleave', buttonLeave, {\n          once: true,\n        })\n      }\n      const leave = () => {\n        target.classList.remove('hover')\n\n        elem\n          .querySelector('button')\n          ?.removeEventListener?.('mouseenter', buttonEnter)\n      }\n\n      elem?.addEventListener?.('mouseenter', enter)\n      elem?.addEventListener?.('mouseleave', leave)\n\n      return () => {\n        elem?.removeEventListener?.('mouseenter', enter)\n        elem?.removeEventListener?.('mouseleave', leave)\n        elem\n          .querySelector('button')\n          ?.removeEventListener?.('mouseleave', buttonLeave)\n      }\n    }\n  }, [forId, ref])\n\n  skeletonDOMAttributes(params, skeleton, context)\n  validateDOMAttributes(localProps, params)\n\n  return <Element {...params}>{content}</Element>\n}\n\nFormLabel._formElement = true\nFormLabel._supportsSpacingProps = true\n"],"mappings":";;;;;;;AAKA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAChD,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,sBAAsB,EACtBC,MAAM,EACNC,qBAAqB,QAChB,+BAA+B;AACtC,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SACEC,mBAAmB,EACnBC,qBAAqB,QAChB,4BAA4B;AACnC,SAEEC,oBAAoB,QACf,uCAAuC;AAC9C,SAASC,qBAAqB,QAAQ,yCAAyC;AAC/E,SAASC,gBAAgB,QAAQ,eAAe;AAChD,OAAOC,OAAO,MAAM,sBAAsB;AAuC1C,eAAe,SAASC,SAASA,CAACC,UAA6B,EAAE;EAC/D,MAAMC,OAAO,GAAGhB,KAAK,CAACiB,UAAU,CAACJ,OAAO,CAAC;EAGzC,MAAMK,KAAK,GAAGP,qBAAqB,CACjCP,sBAAsB,CACpBW,UAAU,EACV,IAAI,EACJ;IAAEI,QAAQ,EAAEH,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEG;EAAS,CAAC,EAC/BT,oBAAoB,CAACM,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEI,OAAO,CAAC,EACtCV,oBAAoB,CAACM,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEK,WAAW,CAAC,EAC1CL,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,SACX,CACF,CAAC;EAED,MAAMQ,aAAa,GAAG,CAAAJ,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEK,IAAI,MAAIL,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEM,QAAQ;EACpD,MAAMC,UAAU,GACd,CAAAH,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAG,MAAM,CAAC,MAAKR,SAAS,GAAGQ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAG,MAAM,CAAC,GAAG,IAAI;EACxE,MAAMI,aAAa,GAAGD,UAAU,GAC5B,MAAMzB,KAAK,CAAC2B,aAAa,CAACF,UAAU,EAAEH,aAAa,CAAC,OAAO,CAAC,CAAC,GAC7D,IAAI;EAER,MAAM;MACJM,KAAK;MACLL,IAAI;MACJM,MAAM;MACNC,QAAQ;MACRC,cAAc;MACdC,IAAI;MACJb,QAAQ;MACRc,OAAO,EAAEC,OAAO,GAAGR,aAAa,IAAI,OAAO;MAC3CS,QAAQ;MACRC,SAAS;MACTZ;IAEF,CAAC,GAAGN,KAAK;IADJmB,UAAU,GAAAC,wBAAA,CACXpB,KAAK,EAAAqB,SAAA;EAET,MAAMC,OAAO,GAAGjB,IAAI,IAAIC,QAAQ;EAEhC,MAAMiB,aAAa,GAAGC,OAAO,CAC3B,CAACxB,KAAK,CAACyB,QAAQ,IACb,CAACd,MAAM,KACN,OAAOX,KAAK,CAAC0B,OAAO,KAAK,UAAU,IAAIhB,KAAK,CACjD,CAAC;EAED,MAAMiB,MAAM,GAAAC,aAAA;IACVV,SAAS,EAAEjC,UAAU,CACnB,gBAAgB,EAChB,CAACE,MAAM,CAACyB,QAAQ,CAAC,IAAIC,cAAc,KAAK,UAAU,KAC/C,0BAAyB,EAI5BvB,mBAAmB,CAAC,MAAM,EAAEW,QAAQ,EAAEH,OAAO,CAAC,EAC9CT,oBAAoB,CAClBiC,OAAO,GAAAM,aAAA;MAAKC,KAAK,EAAE;IAAO,GAAK7B,KAAK,IAAKN,gBAAgB,CAACM,KAAK,CACjE,CAAC,EACDkB,SAAS,EAPTP,MAAM,IAAI,aAAa,EACvBG,IAAI,IAAK,UAASA,IAAK,EAAC,EACxBS,aAAa,IAAI,6BAMnB,CAAC;IACDO,OAAO,EAAEpB;EAAK,GACVS,UAAU,CACf;EAED,MAAMY,QAAQ,GAAG/C,MAAM,CAAmB,IAAI,CAAC;EAC/C,MAAMgD,GAAG,GAAGf,QAAQ,IAAIc,QAAQ;EAChC,IAAI,CAACxB,UAAU,EAAE;IACfoB,MAAM,CAAC,KAAK,CAAC,GAAGK,GAAG;EACrB;EAEAjD,SAAS,CAAC,MAAM;IACd,IAAI,CAAC2B,KAAK,EAAE;MACV;IACF;IAEA,MAAMuB,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAE,IAAGzB,KAAM,EAAC,CAAC;IACnD,MAAM0B,MAAM,GACV,CAAAH,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEI,OAAO,CAAC,0BAA0B,CAAC,MAC5CJ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEI,OAAO,CAAC,oBAAoB,CAAC;IAExC,IAAID,MAAM,EAAE;MAAA,IAAAE,qBAAA,EAAAC,sBAAA;MACV,MAAMC,IAAI,GAAGR,GAAG,CAACS,OAAO;MAExB,MAAMC,WAAW,GAAGA,CAAA,KAAM;QACxBN,MAAM,CAACO,SAAS,CAACC,GAAG,CAAC,UAAU,CAAC;QAChCC,KAAK,CAAC,CAAC;MACT,CAAC;MACD,MAAMC,WAAW,GAAGA,CAAA,KAAM;QACxBV,MAAM,CAACO,SAAS,CAACI,MAAM,CAAC,UAAU,CAAC;QACnCC,KAAK,CAAC,CAAC;MACT,CAAC;MAED,MAAMA,KAAK,GAAGA,CAAA,KAAM;QAAA,IAAAC,qBAAA,EAAAC,sBAAA;QAClBd,MAAM,CAACO,SAAS,CAACC,GAAG,CAAC,OAAO,CAAC;QAG7B,MAAMO,MAAM,GAAGX,IAAI,CAACL,aAAa,CAAC,QAAQ,CAAC;QAC3CgB,MAAM,aAANA,MAAM,wBAAAF,qBAAA,GAANE,MAAM,CAAEC,gBAAgB,cAAAH,qBAAA,uBAAxBA,qBAAA,CAAAI,IAAA,CAAAF,MAAM,EAAqB,YAAY,EAAET,WAAW,EAAE;UACpDY,IAAI,EAAE;QACR,CAAC,CAAC;QACFH,MAAM,aAANA,MAAM,wBAAAD,sBAAA,GAANC,MAAM,CAAEC,gBAAgB,cAAAF,sBAAA,uBAAxBA,sBAAA,CAAAG,IAAA,CAAAF,MAAM,EAAqB,YAAY,EAAEL,WAAW,EAAE;UACpDQ,IAAI,EAAE;QACR,CAAC,CAAC;MACJ,CAAC;MACD,MAAMT,KAAK,GAAGA,CAAA,KAAM;QAAA,IAAAU,mBAAA,EAAAC,qBAAA;QAClBpB,MAAM,CAACO,SAAS,CAACI,MAAM,CAAC,OAAO,CAAC;QAEhC,CAAAQ,mBAAA,GAAAf,IAAI,CACDL,aAAa,CAAC,QAAQ,CAAC,cAAAoB,mBAAA,wBAAAC,qBAAA,GAD1BD,mBAAA,CAEIE,mBAAmB,cAAAD,qBAAA,uBAFvBA,qBAAA,CAAAH,IAAA,CAAAE,mBAAA,EAE0B,YAAY,EAAEb,WAAW,CAAC;MACtD,CAAC;MAEDF,IAAI,aAAJA,IAAI,wBAAAF,qBAAA,GAAJE,IAAI,CAAEY,gBAAgB,cAAAd,qBAAA,uBAAtBA,qBAAA,CAAAe,IAAA,CAAAb,IAAI,EAAqB,YAAY,EAAEQ,KAAK,CAAC;MAC7CR,IAAI,aAAJA,IAAI,wBAAAD,sBAAA,GAAJC,IAAI,CAAEY,gBAAgB,cAAAb,sBAAA,uBAAtBA,sBAAA,CAAAc,IAAA,CAAAb,IAAI,EAAqB,YAAY,EAAEK,KAAK,CAAC;MAE7C,OAAO,MAAM;QAAA,IAAAa,qBAAA,EAAAC,sBAAA,EAAAC,oBAAA,EAAAC,qBAAA;QACXrB,IAAI,aAAJA,IAAI,wBAAAkB,qBAAA,GAAJlB,IAAI,CAAEiB,mBAAmB,cAAAC,qBAAA,uBAAzBA,qBAAA,CAAAL,IAAA,CAAAb,IAAI,EAAwB,YAAY,EAAEQ,KAAK,CAAC;QAChDR,IAAI,aAAJA,IAAI,wBAAAmB,sBAAA,GAAJnB,IAAI,CAAEiB,mBAAmB,cAAAE,sBAAA,uBAAzBA,sBAAA,CAAAN,IAAA,CAAAb,IAAI,EAAwB,YAAY,EAAEK,KAAK,CAAC;QAChD,CAAAe,oBAAA,GAAApB,IAAI,CACDL,aAAa,CAAC,QAAQ,CAAC,cAAAyB,oBAAA,wBAAAC,qBAAA,GAD1BD,oBAAA,CAEIH,mBAAmB,cAAAI,qBAAA,uBAFvBA,qBAAA,CAAAR,IAAA,CAAAO,oBAAA,EAE0B,YAAY,EAAEd,WAAW,CAAC;MACtD,CAAC;IACH;EACF,CAAC,EAAE,CAACpC,KAAK,EAAEsB,GAAG,CAAC,CAAC;EAEhBzC,qBAAqB,CAACoC,MAAM,EAAE1B,QAAQ,EAAEH,OAAO,CAAC;EAChDV,qBAAqB,CAACS,UAAU,EAAE8B,MAAM,CAAC;EAEzC,OAAO7C,KAAA,CAAA2B,aAAA,CAACO,OAAO,EAAKW,MAAM,EAAGL,OAAiB,CAAC;AACjD;AAEA1B,SAAS,CAACkE,YAAY,GAAG,IAAI;AAC7BlE,SAAS,CAACmE,qBAAqB,GAAG,IAAI"}
+{"version":3,"file":"FormLabel.js","names":["React","useEffect","useRef","classnames","extendPropsWithContext","isTrue","validateDOMAttributes","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","pickFormElementProps","convertSnakeCaseProps","omitSpacingProps","Context","FormLabel","localProps","context","useContext","props","skeleton","FormRow","formElement","nestedContent","text","children","nestedNode","nestedElement","createElement","forId","srOnly","vertical","labelDirection","size","element","Element","innerRef","className","attributes","_objectWithoutProperties","_excluded","content","isInteractive","Boolean","disabled","onClick","params","_objectSpread","right","htmlFor","labelRef","ref","forElem","document","querySelector","target","closest","current","elem","buttonEnter","classList","add","leave","buttonLeave","remove","enter","_button$addEventListe","_button$addEventListe2","button","addEventListener","call","once","_button$removeEventLi","removeEventListener","_button$removeEventLi2","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/form-label/FormLabel.tsx"],"sourcesContent":["/**\n * Web FormLabel Component\n *\n */\n\nimport React, { useEffect, useRef } from 'react'\nimport classnames from 'classnames'\nimport {\n  extendPropsWithContext,\n  isTrue,\n  validateDOMAttributes,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n  createSkeletonClass,\n  skeletonDOMAttributes,\n} from '../skeleton/SkeletonHelper'\nimport {\n  FormElementProps,\n  pickFormElementProps,\n} from '../../shared/helpers/filterValidProps'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\nimport { omitSpacingProps } from '../flex/utils'\nimport Context from '../../shared/Context'\nimport type {\n  DynamicElement,\n  DynamicElementParams,\n  SpacingProps,\n} from '../../shared/types'\n\nexport type FormLabelProps = {\n  forId?: string\n  element?: DynamicElement<HTMLLabelElement>\n  text?: React.ReactNode\n  size?: 'basis' | 'medium' | 'large'\n  id?: string\n  skeleton?: boolean\n  label?: React.ReactNode\n  vertical?: boolean\n  srOnly?: boolean\n  innerRef?: React.RefObject<HTMLElement>\n\n  /** Is not a part of HTMLLabelElement and not documented as of now */\n  disabled?: boolean\n\n  /**\n   * For internal use only\n   */\n  labelDirection?: FormElementProps['labelDirection']\n\n  /** @deprecated use forId instead */\n  for_id?: string\n  /** @deprecated use srOnly instead */\n  sr_only?: boolean\n  /** @deprecated use \"vertical\" (or \"labelDirection\" for internal use) instead (was not documented before) */\n  label_direction?: FormElementProps['label_direction']\n}\n\nexport type FormLabelAllProps = FormLabelProps &\n  React.HTMLAttributes<HTMLLabelElement> &\n  SpacingProps\n\nexport default function FormLabel(localProps: FormLabelAllProps) {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = convertSnakeCaseProps(\n    extendPropsWithContext(\n      localProps,\n      null,\n      { skeleton: context?.skeleton },\n      pickFormElementProps(context?.FormRow), // Deprecated – can be removed in v11\n      pickFormElementProps(context?.formElement),\n      context?.FormLabel\n    )\n  )\n\n  const nestedContent = props?.text || props?.children\n  const nestedNode =\n    nestedContent?.['type'] === FormLabel ? nestedContent?.['type'] : null\n  const nestedElement = nestedNode\n    ? () => React.createElement(nestedNode, nestedContent['props'])\n    : null\n\n  const {\n    forId,\n    text,\n    srOnly,\n    vertical,\n    labelDirection,\n    size,\n    skeleton,\n    element: Element = nestedElement || 'label',\n    innerRef,\n    className,\n    children,\n    ...attributes\n  } = props\n\n  const content = text || children\n\n  const isInteractive = Boolean(\n    !props.disabled &&\n      !srOnly &&\n      (typeof props.onClick === 'function' || forId)\n  )\n\n  const params = {\n    className: classnames(\n      'dnb-form-label',\n      (isTrue(vertical) || labelDirection === 'vertical') &&\n        `dnb-form-label--vertical`,\n      srOnly && 'dnb-sr-only',\n      size && `dnb-h--${size}`,\n      isInteractive && 'dnb-form-label--interactive',\n      createSkeletonClass('font', skeleton, context),\n      createSpacingClasses(\n        content ? { right: 'small', ...props } : omitSpacingProps(props)\n      ),\n      className\n    ),\n    htmlFor: forId,\n    ...(attributes as DynamicElementParams),\n  }\n\n  const labelRef = useRef<HTMLLabelElement>(null)\n  const ref = innerRef || labelRef\n  if (!nestedNode) {\n    params['ref'] = ref\n  }\n\n  useEffect(() => {\n    if (!forId) {\n      return\n    }\n\n    const forElem = document.querySelector(`#${forId}`)\n    const target =\n      forElem?.closest('.dnb-input__border--root') ||\n      forElem?.closest('.dnb-input__border')\n\n    if (target && ref.current) {\n      const elem = ref.current\n\n      const buttonEnter = () => {\n        target.classList.add('no-hover')\n        leave()\n      }\n      const buttonLeave = () => {\n        target.classList.remove('no-hover')\n        enter()\n      }\n\n      const enter = () => {\n        target.classList.add('hover')\n\n        // Remove the style from interactive elements (e.g. HelpButton)\n        const button = elem.querySelector('button')\n        button?.addEventListener?.('mouseenter', buttonEnter, {\n          once: true,\n        })\n        button?.addEventListener?.('mouseleave', buttonLeave, {\n          once: true,\n        })\n      }\n      const leave = () => {\n        target.classList.remove('hover')\n\n        const button = elem.querySelector('button')\n        button?.removeEventListener?.('mouseenter', buttonEnter)\n      }\n\n      elem.addEventListener('mouseenter', enter)\n      elem.addEventListener('mouseleave', leave)\n\n      return () => {\n        if (elem) {\n          elem.removeEventListener('mouseenter', enter)\n          elem.removeEventListener('mouseleave', leave)\n\n          const button = elem.querySelector('button')\n          button?.removeEventListener?.('mouseleave', buttonLeave)\n        }\n      }\n    }\n  }, [forId, ref])\n\n  skeletonDOMAttributes(params, skeleton, context)\n  validateDOMAttributes(localProps, params)\n\n  return <Element {...params}>{content}</Element>\n}\n\nFormLabel._formElement = true\nFormLabel._supportsSpacingProps = true\n"],"mappings":"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"}

package/es/components/height-animation/HeightAnimation.d.ts

@@ -33,7 +33,7 @@ export type HeightAnimationProps = {
      */
     innerRef?: React.RefObject<HTMLElement>;
 } & useHeightAnimationOptions;
-export type HeightAnimationAllProps = HeightAnimationProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, 'ref'>;
+export type HeightAnimationAllProps = HeightAnimationProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, 'ref' | 'onAnimationEnd'>;
 declare function HeightAnimation({ open, animate, keepInDOM, showOverflow, element, duration, delay, className, innerRef, children, compensateForGap, onInit, onOpen, onAnimationStart, onAnimationEnd, ...rest }: HeightAnimationAllProps): import("react/jsx-runtime").JSX.Element;
 declare namespace HeightAnimation {
     var _supportsSpacingProps: string;

package/es/components/height-animation/HeightAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeightAnimation.js","names":["React","useRef","classnames","useHeightAnimation","Space","HeightAnimation","_ref","open","animate","keepInDOM","showOverflow","element","duration","delay","className","innerRef","children","compensateForGap","onInit","onOpen","onAnimationStart","onAnimationEnd","rest","_objectWithoutProperties","_excluded","elementRef","targetRef","isInDOM","isVisible","isVisibleParallax","isAnimating","firstPaintStyle","createElement","_extends","style","_objectSpread","undefined","_supportsSpacingProps"],"sources":["../../../../src/components/height-animation/HeightAnimation.tsx"],"sourcesContent":["import React, { useRef } from 'react'\nimport classnames from 'classnames'\nimport {\n  useHeightAnimation,\n  useHeightAnimationOptions,\n} from './useHeightAnimation'\nimport Space from '../space/Space'\n\nimport type { DynamicElement, SpacingProps } from '../../shared/types'\n\nexport type HeightAnimationProps = {\n  /**\n   * Whether the nested children content should be kept in the DOM or not.\n   * Default: false\n   */\n  keepInDOM?: boolean\n\n  /**\n   * Set to `true` to omit the usage of \"overflow: hidden;\"\n   * Default: false\n   */\n  showOverflow?: boolean\n\n  /**\n   * Defines the duration of the animation in milliseconds.\n   * Default: 400\n   */\n  duration?: number\n\n  /**\n   * Defines the delay of the animation in milliseconds.\n   * Default: 0\n   */\n  delay?: number\n\n  /**\n   * Define a custom HTML Element.\n   * Default: div\n   */\n  element?: DynamicElement\n\n  /**\n   * Send along a custom React Ref.\n   * Default: null\n   */\n  innerRef?: React.RefObject<HTMLElement>\n} & useHeightAnimationOptions\n\nexport type HeightAnimationAllProps = HeightAnimationProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\nfunction HeightAnimation({\n  open = true,\n  animate = true,\n  keepInDOM = false,\n  showOverflow = false,\n  element,\n  duration,\n  delay,\n  className,\n  innerRef,\n  children,\n  compensateForGap,\n  onInit = null,\n  onOpen = null,\n  onAnimationStart = null,\n  onAnimationEnd = null,\n  ...rest\n}: HeightAnimationAllProps) {\n  const elementRef = useRef<HTMLElement>()\n  const targetRef = innerRef || elementRef\n\n  const {\n    isInDOM,\n    isVisible,\n    isVisibleParallax,\n    isAnimating,\n    firstPaintStyle,\n  } = useHeightAnimation(targetRef, {\n    open,\n    animate,\n    children,\n    compensateForGap,\n    onInit,\n    onOpen,\n    onAnimationStart,\n    onAnimationEnd,\n  })\n\n  if (!keepInDOM && !isInDOM && !isAnimating) {\n    return null\n  }\n\n  if (duration) {\n    firstPaintStyle['--duration'] = `${duration}ms`\n  }\n  if (delay) {\n    firstPaintStyle['--delay'] = `${delay}ms`\n  }\n\n  return (\n    <Space\n      innerRef={targetRef}\n      element={element || 'div'}\n      className={classnames(\n        'dnb-height-animation',\n        isInDOM && 'dnb-height-animation--is-in-dom',\n        isVisible && 'dnb-height-animation--is-visible',\n        animate && isVisibleParallax && 'dnb-height-animation--parallax',\n        isAnimating && 'dnb-height-animation--animating',\n        !isVisible &&\n          !isAnimating &&\n          !open &&\n          'dnb-height-animation--hidden',\n        showOverflow && 'dnb-height-animation--show-overflow',\n        className\n      )}\n      style={{ ...firstPaintStyle, ...rest?.style }}\n      aria-hidden={keepInDOM ? !open : undefined}\n      {...rest}\n    >\n      {compensateForGap ? (\n        <div className=\"compensateForGap\">{children}</div>\n      ) : (\n        children\n      )}\n    </Space>\n  )\n}\n\nHeightAnimation._supportsSpacingProps = 'children'\n\nexport default HeightAnimation\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,kBAAkB,QAEb,sBAAsB;AAC7B,OAAOC,KAAK,MAAM,gBAAgB;AA8ClC,SAASC,eAAeA,CAAAC,IAAA,EAiBI;EAAA,IAjBH;MACvBC,IAAI,GAAG,IAAI;MACXC,OAAO,GAAG,IAAI;MACdC,SAAS,GAAG,KAAK;MACjBC,YAAY,GAAG,KAAK;MACpBC,OAAO;MACPC,QAAQ;MACRC,KAAK;MACLC,SAAS;MACTC,QAAQ;MACRC,QAAQ;MACRC,gBAAgB;MAChBC,MAAM,GAAG,IAAI;MACbC,MAAM,GAAG,IAAI;MACbC,gBAAgB,GAAG,IAAI;MACvBC,cAAc,GAAG;IAEM,CAAC,GAAAf,IAAA;IADrBgB,IAAI,GAAAC,wBAAA,CAAAjB,IAAA,EAAAkB,SAAA;EAEP,MAAMC,UAAU,GAAGxB,MAAM,CAAc,CAAC;EACxC,MAAMyB,SAAS,GAAGX,QAAQ,IAAIU,UAAU;EAExC,MAAM;IACJE,OAAO;IACPC,SAAS;IACTC,iBAAiB;IACjBC,WAAW;IACXC;EACF,CAAC,GAAG5B,kBAAkB,CAACuB,SAAS,EAAE;IAChCnB,IAAI;IACJC,OAAO;IACPQ,QAAQ;IACRC,gBAAgB;IAChBC,MAAM;IACNC,MAAM;IACNC,gBAAgB;IAChBC;EACF,CAAC,CAAC;EAEF,IAAI,CAACZ,SAAS,IAAI,CAACkB,OAAO,IAAI,CAACG,WAAW,EAAE;IAC1C,OAAO,IAAI;EACb;EAEA,IAAIlB,QAAQ,EAAE;IACZmB,eAAe,CAAC,YAAY,CAAC,GAAI,GAAEnB,QAAS,IAAG;EACjD;EACA,IAAIC,KAAK,EAAE;IACTkB,eAAe,CAAC,SAAS,CAAC,GAAI,GAAElB,KAAM,IAAG;EAC3C;EAEA,OACEb,KAAA,CAAAgC,aAAA,CAAC5B,KAAK,EAAA6B,QAAA;IACJlB,QAAQ,EAAEW,SAAU;IACpBf,OAAO,EAAEA,OAAO,IAAI,KAAM;IAC1BG,SAAS,EAAEZ,UAAU,CACnB,sBAAsB,EAUtBY,SAAS,EARTc,SAAS,GAAI,kCAAkC,GAI7C,CAACE,WAAW,IACZ,CAACvB,IAAI,IACL,8BAA8B,EAPhCoB,OAAO,IAAI,iCAAiC,EAE5CnB,OAAO,IAAIqB,iBAAiB,IAAI,gCAAgC,EAChEC,WAAW,IAAI,iCAAiC,EAKhDpB,YAAY,IAAI,qCAElB,CAAE;IACFwB,KAAK,EAAAC,aAAA,CAAAA,aAAA,KAAOJ,eAAe,GAAKT,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEY,KAAK,CAAG;IAC9C,eAAazB,SAAS,GAAG,CAACF,IAAI,GAAG6B;EAAU,GACvCd,IAAI,GAEPL,gBAAgB,GACfjB,KAAA,CAAAgC,aAAA;IAAKlB,SAAS,EAAC;EAAkB,GAAEE,QAAc,CAAC,GAElDA,QAEG,CAAC;AAEZ;AAEAX,eAAe,CAACgC,qBAAqB,GAAG,UAAU;AAElD,eAAehC,eAAe"}
+{"version":3,"file":"HeightAnimation.js","names":["React","useRef","classnames","useHeightAnimation","Space","HeightAnimation","_ref","open","animate","keepInDOM","showOverflow","element","duration","delay","className","innerRef","children","compensateForGap","onInit","onOpen","onAnimationStart","onAnimationEnd","rest","_objectWithoutProperties","_excluded","elementRef","targetRef","isInDOM","isVisible","isVisibleParallax","isAnimating","firstPaintStyle","createElement","_extends","style","_objectSpread","undefined","_supportsSpacingProps"],"sources":["../../../../src/components/height-animation/HeightAnimation.tsx"],"sourcesContent":["import React, { useRef } from 'react'\nimport classnames from 'classnames'\nimport {\n  useHeightAnimation,\n  useHeightAnimationOptions,\n} from './useHeightAnimation'\nimport Space from '../space/Space'\n\nimport type { DynamicElement, SpacingProps } from '../../shared/types'\n\nexport type HeightAnimationProps = {\n  /**\n   * Whether the nested children content should be kept in the DOM or not.\n   * Default: false\n   */\n  keepInDOM?: boolean\n\n  /**\n   * Set to `true` to omit the usage of \"overflow: hidden;\"\n   * Default: false\n   */\n  showOverflow?: boolean\n\n  /**\n   * Defines the duration of the animation in milliseconds.\n   * Default: 400\n   */\n  duration?: number\n\n  /**\n   * Defines the delay of the animation in milliseconds.\n   * Default: 0\n   */\n  delay?: number\n\n  /**\n   * Define a custom HTML Element.\n   * Default: div\n   */\n  element?: DynamicElement\n\n  /**\n   * Send along a custom React Ref.\n   * Default: null\n   */\n  innerRef?: React.RefObject<HTMLElement>\n} & useHeightAnimationOptions\n\nexport type HeightAnimationAllProps = HeightAnimationProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref' | 'onAnimationEnd'>\n\nfunction HeightAnimation({\n  open = true,\n  animate = true,\n  keepInDOM = false,\n  showOverflow = false,\n  element,\n  duration,\n  delay,\n  className,\n  innerRef,\n  children,\n  compensateForGap,\n  onInit = null,\n  onOpen = null,\n  onAnimationStart = null,\n  onAnimationEnd = null,\n  ...rest\n}: HeightAnimationAllProps) {\n  const elementRef = useRef<HTMLElement>()\n  const targetRef = innerRef || elementRef\n\n  const {\n    isInDOM,\n    isVisible,\n    isVisibleParallax,\n    isAnimating,\n    firstPaintStyle,\n  } = useHeightAnimation(targetRef, {\n    open,\n    animate,\n    children,\n    compensateForGap,\n    onInit,\n    onOpen,\n    onAnimationStart,\n    onAnimationEnd,\n  })\n\n  if (!keepInDOM && !isInDOM && !isAnimating) {\n    return null\n  }\n\n  if (duration) {\n    firstPaintStyle['--duration'] = `${duration}ms`\n  }\n  if (delay) {\n    firstPaintStyle['--delay'] = `${delay}ms`\n  }\n\n  return (\n    <Space\n      innerRef={targetRef}\n      element={element || 'div'}\n      className={classnames(\n        'dnb-height-animation',\n        isInDOM && 'dnb-height-animation--is-in-dom',\n        isVisible && 'dnb-height-animation--is-visible',\n        animate && isVisibleParallax && 'dnb-height-animation--parallax',\n        isAnimating && 'dnb-height-animation--animating',\n        !isVisible &&\n          !isAnimating &&\n          !open &&\n          'dnb-height-animation--hidden',\n        showOverflow && 'dnb-height-animation--show-overflow',\n        className\n      )}\n      style={{ ...firstPaintStyle, ...rest?.style }}\n      aria-hidden={keepInDOM ? !open : undefined}\n      {...rest}\n    >\n      {compensateForGap ? (\n        <div className=\"compensateForGap\">{children}</div>\n      ) : (\n        children\n      )}\n    </Space>\n  )\n}\n\nHeightAnimation._supportsSpacingProps = 'children'\n\nexport default HeightAnimation\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,kBAAkB,QAEb,sBAAsB;AAC7B,OAAOC,KAAK,MAAM,gBAAgB;AA8ClC,SAASC,eAAeA,CAAAC,IAAA,EAiBI;EAAA,IAjBH;MACvBC,IAAI,GAAG,IAAI;MACXC,OAAO,GAAG,IAAI;MACdC,SAAS,GAAG,KAAK;MACjBC,YAAY,GAAG,KAAK;MACpBC,OAAO;MACPC,QAAQ;MACRC,KAAK;MACLC,SAAS;MACTC,QAAQ;MACRC,QAAQ;MACRC,gBAAgB;MAChBC,MAAM,GAAG,IAAI;MACbC,MAAM,GAAG,IAAI;MACbC,gBAAgB,GAAG,IAAI;MACvBC,cAAc,GAAG;IAEM,CAAC,GAAAf,IAAA;IADrBgB,IAAI,GAAAC,wBAAA,CAAAjB,IAAA,EAAAkB,SAAA;EAEP,MAAMC,UAAU,GAAGxB,MAAM,CAAc,CAAC;EACxC,MAAMyB,SAAS,GAAGX,QAAQ,IAAIU,UAAU;EAExC,MAAM;IACJE,OAAO;IACPC,SAAS;IACTC,iBAAiB;IACjBC,WAAW;IACXC;EACF,CAAC,GAAG5B,kBAAkB,CAACuB,SAAS,EAAE;IAChCnB,IAAI;IACJC,OAAO;IACPQ,QAAQ;IACRC,gBAAgB;IAChBC,MAAM;IACNC,MAAM;IACNC,gBAAgB;IAChBC;EACF,CAAC,CAAC;EAEF,IAAI,CAACZ,SAAS,IAAI,CAACkB,OAAO,IAAI,CAACG,WAAW,EAAE;IAC1C,OAAO,IAAI;EACb;EAEA,IAAIlB,QAAQ,EAAE;IACZmB,eAAe,CAAC,YAAY,CAAC,GAAI,GAAEnB,QAAS,IAAG;EACjD;EACA,IAAIC,KAAK,EAAE;IACTkB,eAAe,CAAC,SAAS,CAAC,GAAI,GAAElB,KAAM,IAAG;EAC3C;EAEA,OACEb,KAAA,CAAAgC,aAAA,CAAC5B,KAAK,EAAA6B,QAAA;IACJlB,QAAQ,EAAEW,SAAU;IACpBf,OAAO,EAAEA,OAAO,IAAI,KAAM;IAC1BG,SAAS,EAAEZ,UAAU,CACnB,sBAAsB,EAUtBY,SAAS,EARTc,SAAS,GAAI,kCAAkC,GAI7C,CAACE,WAAW,IACZ,CAACvB,IAAI,IACL,8BAA8B,EAPhCoB,OAAO,IAAI,iCAAiC,EAE5CnB,OAAO,IAAIqB,iBAAiB,IAAI,gCAAgC,EAChEC,WAAW,IAAI,iCAAiC,EAKhDpB,YAAY,IAAI,qCAElB,CAAE;IACFwB,KAAK,EAAAC,aAAA,CAAAA,aAAA,KAAOJ,eAAe,GAAKT,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEY,KAAK,CAAG;IAC9C,eAAazB,SAAS,GAAG,CAACF,IAAI,GAAG6B;EAAU,GACvCd,IAAI,GAEPL,gBAAgB,GACfjB,KAAA,CAAAgC,aAAA;IAAKlB,SAAS,EAAC;EAAkB,GAAEE,QAAc,CAAC,GAElDA,QAEG,CAAC;AAEZ;AAEAX,eAAe,CAACgC,qBAAqB,GAAG,UAAU;AAElD,eAAehC,eAAe"}

package/es/components/height-animation/HeightAnimationDocs.js

@@ -57,12 +57,12 @@ export const HeightAnimationEvents = {
     status: 'optional'
   },
   onAnimationStart: {
-    doc: 'Is called when animation has started.',
+    doc: 'Is called when animation has started. The first parameter is a string. Depending on the state, the value can be `opening`, `closing` or `adjusting`.',
     type: 'function',
     status: 'optional'
   },
   onAnimationEnd: {
-    doc: 'Is called when animation is done and the full height is reached.',
+    doc: 'Is called when animation is done and the full height is reached. The first parameter is a string. Depending on the state, the value can be `opened`, `closed` or `adjusted`.',
     type: 'function',
     status: 'optional'
   },

package/es/components/height-animation/HeightAnimationDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeightAnimationDocs.js","names":["HeightAnimationProperties","open","doc","type","status","animate","keepInDOM","compensateForGap","showOverflow","duration","delay","element","innerRef","HeightAnimationEvents","onOpen","onAnimationStart","onAnimationEnd","onInit"],"sources":["../../../../src/components/height-animation/HeightAnimationDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const HeightAnimationProperties: PropertiesTableProps = {\n  open: {\n    doc: 'Set to `true` on second re-render when the view should animate from 0px to auto. Defaults to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  animate: {\n    doc: 'Set to `false` to omit the animation. Defaults to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keepInDOM: {\n    doc: 'Set to `true` ensure the nested children content will be kept in the DOM. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  compensateForGap: {\n    doc: 'To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`.',\n    type: 'string',\n    status: 'optional',\n  },\n  showOverflow: {\n    doc: 'Set to `true` to omit the usage of \"overflow: hidden;\". Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  duration: {\n    doc: 'Custom duration of the animation in milliseconds. Defaults to `400ms`.',\n    type: 'number',\n    status: 'optional',\n  },\n  delay: {\n    doc: 'Custom delay of the animation in milliseconds. Defaults to `0ms`.',\n    type: 'number',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Custom HTML element for the component. Defaults to `div` HTML Element.',\n    type: 'string',\n    status: 'optional',\n  },\n  innerRef: {\n    doc: 'Send along a custom React Ref.',\n    type: 'React.RefObject',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const HeightAnimationEvents: PropertiesTableProps = {\n  onOpen: {\n    doc: 'Is called when fully opened or closed. Returns `true` or `false` depending on the state.',\n    type: 'function',\n    status: 'optional',\n  },\n  onAnimationStart: {\n    doc: 'Is called when animation has started.',\n    type: 'function',\n    status: 'optional',\n  },\n  onAnimationEnd: {\n    doc: 'Is called when animation is done and the full height is reached.',\n    type: 'function',\n    status: 'optional',\n  },\n  onInit: {\n    doc: 'Is called once before mounting the component (useLayoutEffect). Returns the instance of the internal animation class.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,yBAA+C,GAAG;EAC7DC,IAAI,EAAE;IACJC,GAAG,EAAE,sGAAsG;IAC3GC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,OAAO,EAAE;IACPH,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,SAAS,EAAE;IACTJ,GAAG,EAAE,gGAAgG;IACrGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,gBAAgB,EAAE;IAChBL,GAAG,EAAE,gJAAgJ;IACrJC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,YAAY,EAAE;IACZN,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,QAAQ,EAAE;IACRP,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,KAAK,EAAE;IACLR,GAAG,EAAE,mEAAmE;IACxEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,OAAO,EAAE;IACPT,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,QAAQ,EAAE;IACRV,GAAG,EAAE,gCAAgC;IACrCC,IAAI,EAAE,iBAAiB;IACvBC,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,MAAMS,qBAA2C,GAAG;EACzDC,MAAM,EAAE;IACNZ,GAAG,EAAE,0FAA0F;IAC/FC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDW,gBAAgB,EAAE;IAChBb,GAAG,EAAE,uCAAuC;IAC5CC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDY,cAAc,EAAE;IACdd,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDa,MAAM,EAAE;IACNf,GAAG,EAAE,uHAAuH;IAC5HC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"HeightAnimationDocs.js","names":["HeightAnimationProperties","open","doc","type","status","animate","keepInDOM","compensateForGap","showOverflow","duration","delay","element","innerRef","HeightAnimationEvents","onOpen","onAnimationStart","onAnimationEnd","onInit"],"sources":["../../../../src/components/height-animation/HeightAnimationDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const HeightAnimationProperties: PropertiesTableProps = {\n  open: {\n    doc: 'Set to `true` on second re-render when the view should animate from 0px to auto. Defaults to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  animate: {\n    doc: 'Set to `false` to omit the animation. Defaults to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  keepInDOM: {\n    doc: 'Set to `true` ensure the nested children content will be kept in the DOM. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  compensateForGap: {\n    doc: 'To compensate for CSS gap between the rows, so animation does not jump during the animation. Provide a CSS unit or `auto`. Defaults to `null`.',\n    type: 'string',\n    status: 'optional',\n  },\n  showOverflow: {\n    doc: 'Set to `true` to omit the usage of \"overflow: hidden;\". Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  duration: {\n    doc: 'Custom duration of the animation in milliseconds. Defaults to `400ms`.',\n    type: 'number',\n    status: 'optional',\n  },\n  delay: {\n    doc: 'Custom delay of the animation in milliseconds. Defaults to `0ms`.',\n    type: 'number',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Custom HTML element for the component. Defaults to `div` HTML Element.',\n    type: 'string',\n    status: 'optional',\n  },\n  innerRef: {\n    doc: 'Send along a custom React Ref.',\n    type: 'React.RefObject',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const HeightAnimationEvents: PropertiesTableProps = {\n  onOpen: {\n    doc: 'Is called when fully opened or closed. Returns `true` or `false` depending on the state.',\n    type: 'function',\n    status: 'optional',\n  },\n  onAnimationStart: {\n    doc: 'Is called when animation has started. The first parameter is a string. Depending on the state, the value can be `opening`, `closing` or `adjusting`.',\n    type: 'function',\n    status: 'optional',\n  },\n  onAnimationEnd: {\n    doc: 'Is called when animation is done and the full height is reached. The first parameter is a string. Depending on the state, the value can be `opened`, `closed` or `adjusted`.',\n    type: 'function',\n    status: 'optional',\n  },\n  onInit: {\n    doc: 'Is called once before mounting the component (useLayoutEffect). Returns the instance of the internal animation class.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,yBAA+C,GAAG;EAC7DC,IAAI,EAAE;IACJC,GAAG,EAAE,sGAAsG;IAC3GC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,OAAO,EAAE;IACPH,GAAG,EAAE,2DAA2D;IAChEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,SAAS,EAAE;IACTJ,GAAG,EAAE,gGAAgG;IACrGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,gBAAgB,EAAE;IAChBL,GAAG,EAAE,gJAAgJ;IACrJC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,YAAY,EAAE;IACZN,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,QAAQ,EAAE;IACRP,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,KAAK,EAAE;IACLR,GAAG,EAAE,mEAAmE;IACxEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,OAAO,EAAE;IACPT,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,QAAQ,EAAE;IACRV,GAAG,EAAE,gCAAgC;IACrCC,IAAI,EAAE,iBAAiB;IACvBC,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,MAAMS,qBAA2C,GAAG;EACzDC,MAAM,EAAE;IACNZ,GAAG,EAAE,0FAA0F;IAC/FC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDW,gBAAgB,EAAE;IAChBb,GAAG,EAAE,sJAAsJ;IAC3JC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDY,cAAc,EAAE;IACdd,GAAG,EAAE,8KAA8K;IACnLC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDa,MAAM,EAAE;IACNf,GAAG,EAAE,uHAAuH;IAC5HC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}

package/es/components/pagination/Pagination.d.ts

@@ -87,7 +87,7 @@ export interface PaginationProps
    */
   skeleton?: SkeletonShow;
   /**
-   * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. For more information, check out the <a href="https://eufemia.dnb.no/uilib/components/pagination/infinity-scroller">Infinity Scroller</a>. Defaults to `pagination`.
+   * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. For more information, check out the <a href="/uilib/components/pagination/infinity-scroller">Infinity Scroller</a>. Defaults to `pagination`.
    */
   mode?: PaginationMode;
   /**

package/es/components/upload/Upload.js

@@ -5,7 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _UploadInfo, _UploadFileInput, _UploadFileList;
 const _excluded = ["buttonTextSingular", "textSingular"],
-  _excluded2 = ["id", "skeleton", "className", "acceptedFileTypes", "filesAmountLimit", "fileMaxSize", "onChange", "onFileDelete", "download", "title", "text", "fileTypeTableCaption", "fileTypeDescription", "fileSizeDescription", "fileAmountDescription", "fileSizeContent", "buttonText", "loadingText", "errorLargeFile", "errorUnsupportedFile", "errorAmountLimit", "deleteButton", "fileListAriaLabel"];
+  _excluded2 = ["id", "skeleton", "className", "acceptedFileTypes", "filesAmountLimit", "fileMaxSize", "onChange", "onFileDelete", "onFileClick", "download", "title", "text", "fileTypeTableCaption", "fileTypeDescription", "fileSizeDescription", "fileAmountDescription", "fileSizeContent", "buttonText", "loadingText", "errorLargeFile", "errorUnsupportedFile", "errorAmountLimit", "deleteButton", "fileListAriaLabel"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useCallback } from 'react';
@@ -46,6 +46,7 @@ const Upload = localProps => {
       fileMaxSize,
       onChange,
       onFileDelete,
+      onFileClick,
       download,
       title,
       text,

package/es/components/upload/Upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"Upload.js","names":["React","useCallback","classnames","createSpacingClasses","Provider","Context","extendPropsWithContext","makeUniqueId","UploadFileInput","useUpload","UploadDropzone","UploadContext","defaultProps","verifyFiles","UploadFileList","UploadInfo","Upload","localProps","context","useContext","_context$getTranslati","getTranslation","buttonTextSingular","textSingular","translations","_objectWithoutProperties","_excluded","filesAmountLimit","buttonText","text","extendedProps","skeleton","id","className","acceptedFileTypes","fileMaxSize","onChange","onFileDelete","download","title","fileTypeTableCaption","fileTypeDescription","fileSizeDescription","fileAmountDescription","fileSizeContent","loadingText","errorLargeFile","errorUnsupportedFile","errorAmountLimit","deleteButton","fileListAriaLabel","props","_excluded2","spacingClasses","files","setFiles","setInternalFiles","getExistingFile","onInputUpload","newFiles","mergedFiles","map","fileItem","file","existingFile","exists","Boolean","verifiedFiles","filter","validFiles","slice","createElement","value","_objectSpread","_extends","_UploadInfo","_UploadFileInput","_UploadFileList","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/upload/Upload.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport classnames from 'classnames'\n\n// Shared\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Provider from '../../shared/Provider'\nimport Context from '../../shared/Context'\nimport {\n  extendPropsWithContext,\n  makeUniqueId,\n} from '../../shared/component-helper'\n\n// Internal\nimport UploadFileInput from './UploadFileInput'\nimport useUpload from './useUpload'\nimport UploadDropzone from './UploadDropzone'\nimport { UploadContext, defaultProps } from './UploadContext'\nimport { verifyFiles } from './UploadVerify'\n\nimport type { UploadFile, UploadAllProps } from './types'\nimport UploadFileList from './UploadFileList'\nimport UploadInfo from './UploadInfo'\n\nexport type * from './types'\nexport { defaultProps }\n\nconst Upload = (localProps: UploadAllProps) => {\n  const context = React.useContext(Context)\n\n  const { buttonTextSingular, textSingular, ...translations } =\n    context.getTranslation(localProps).Upload\n\n  if (localProps?.filesAmountLimit === 1) {\n    translations.buttonText = buttonTextSingular\n    translations.text = textSingular\n  }\n\n  const extendedProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    { skeleton: context?.skeleton },\n    translations,\n    context.Upload\n  )\n\n  const {\n    id,\n    skeleton,\n    className,\n    acceptedFileTypes,\n    filesAmountLimit,\n    fileMaxSize,\n    onChange,\n    onFileDelete, // eslint-disable-line\n    download, // eslint-disable-line\n    title, // eslint-disable-line\n    text, // eslint-disable-line\n    fileTypeTableCaption, // eslint-disable-line\n    fileTypeDescription, // eslint-disable-line\n    fileSizeDescription, // eslint-disable-line\n    fileAmountDescription, // eslint-disable-line\n    fileSizeContent, // eslint-disable-line\n    buttonText, // eslint-disable-line\n    loadingText, // eslint-disable-line\n    errorLargeFile,\n    errorUnsupportedFile,\n    errorAmountLimit, // eslint-disable-line\n    deleteButton, // eslint-disable-line\n    fileListAriaLabel, // eslint-disable-line\n    ...props\n  } = extendedProps\n\n  const spacingClasses = createSpacingClasses(props)\n\n  const { files, setFiles, setInternalFiles, getExistingFile } =\n    useUpload(id)\n\n  const onInputUpload = useCallback(\n    (newFiles: Array<UploadFile>) => {\n      const mergedFiles = [\n        ...files,\n        ...newFiles.map((fileItem) => {\n          const { file } = fileItem\n\n          const existingFile = getExistingFile(file, files)\n\n          fileItem.exists = Boolean(existingFile)\n          fileItem.id = fileItem.exists ? existingFile.id : makeUniqueId()\n\n          return fileItem\n        }),\n      ]\n\n      const verifiedFiles = verifyFiles(\n        mergedFiles.filter(({ exists }) => !exists),\n        {\n          fileMaxSize,\n          acceptedFileTypes,\n          errorUnsupportedFile,\n          errorLargeFile,\n        }\n      )\n\n      const validFiles = [...verifiedFiles].slice(\n        0,\n        filesAmountLimit\n      ) as Array<UploadFile>\n\n      setFiles(validFiles)\n      setInternalFiles(mergedFiles)\n\n      if (typeof onChange === 'function') {\n        onChange({ files: validFiles })\n      }\n\n      return validFiles\n    },\n    [\n      acceptedFileTypes,\n      errorLargeFile,\n      errorUnsupportedFile,\n      fileMaxSize,\n      files,\n      filesAmountLimit,\n      getExistingFile,\n      onChange,\n      setFiles,\n      setInternalFiles,\n    ]\n  )\n\n  return (\n    <UploadContext.Provider\n      value={{\n        ...extendedProps,\n        id,\n        onInputUpload,\n      }}\n    >\n      <Provider skeleton={skeleton}>\n        <UploadDropzone\n          className={classnames('dnb-upload', spacingClasses, className)}\n          {...props}\n        >\n          <UploadInfo />\n\n          <UploadFileInput />\n\n          <UploadFileList />\n        </UploadDropzone>\n      </Provider>\n    </UploadContext.Provider>\n  )\n}\n\nUpload.useUpload = useUpload\n\nUpload._formElement = true\nUpload._supportsSpacingProps = true\n\nexport default Upload\n"],"mappings":"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"}
+{"version":3,"file":"Upload.js","names":["React","useCallback","classnames","createSpacingClasses","Provider","Context","extendPropsWithContext","makeUniqueId","UploadFileInput","useUpload","UploadDropzone","UploadContext","defaultProps","verifyFiles","UploadFileList","UploadInfo","Upload","localProps","context","useContext","_context$getTranslati","getTranslation","buttonTextSingular","textSingular","translations","_objectWithoutProperties","_excluded","filesAmountLimit","buttonText","text","extendedProps","skeleton","id","className","acceptedFileTypes","fileMaxSize","onChange","onFileDelete","onFileClick","download","title","fileTypeTableCaption","fileTypeDescription","fileSizeDescription","fileAmountDescription","fileSizeContent","loadingText","errorLargeFile","errorUnsupportedFile","errorAmountLimit","deleteButton","fileListAriaLabel","props","_excluded2","spacingClasses","files","setFiles","setInternalFiles","getExistingFile","onInputUpload","newFiles","mergedFiles","map","fileItem","file","existingFile","exists","Boolean","verifiedFiles","filter","validFiles","slice","createElement","value","_objectSpread","_extends","_UploadInfo","_UploadFileInput","_UploadFileList","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/upload/Upload.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport classnames from 'classnames'\n\n// Shared\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Provider from '../../shared/Provider'\nimport Context from '../../shared/Context'\nimport {\n  extendPropsWithContext,\n  makeUniqueId,\n} from '../../shared/component-helper'\n\n// Internal\nimport UploadFileInput from './UploadFileInput'\nimport useUpload from './useUpload'\nimport UploadDropzone from './UploadDropzone'\nimport { UploadContext, defaultProps } from './UploadContext'\nimport { verifyFiles } from './UploadVerify'\n\nimport type { UploadFile, UploadAllProps } from './types'\nimport UploadFileList from './UploadFileList'\nimport UploadInfo from './UploadInfo'\n\nexport type * from './types'\nexport { defaultProps }\n\nconst Upload = (localProps: UploadAllProps) => {\n  const context = React.useContext(Context)\n\n  const { buttonTextSingular, textSingular, ...translations } =\n    context.getTranslation(localProps).Upload\n\n  if (localProps?.filesAmountLimit === 1) {\n    translations.buttonText = buttonTextSingular\n    translations.text = textSingular\n  }\n\n  const extendedProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    { skeleton: context?.skeleton },\n    translations,\n    context.Upload\n  )\n\n  const {\n    id,\n    skeleton,\n    className,\n    acceptedFileTypes,\n    filesAmountLimit,\n    fileMaxSize,\n    onChange,\n    onFileDelete, // eslint-disable-line\n    onFileClick, // eslint-disable-line\n    download, // eslint-disable-line\n    title, // eslint-disable-line\n    text, // eslint-disable-line\n    fileTypeTableCaption, // eslint-disable-line\n    fileTypeDescription, // eslint-disable-line\n    fileSizeDescription, // eslint-disable-line\n    fileAmountDescription, // eslint-disable-line\n    fileSizeContent, // eslint-disable-line\n    buttonText, // eslint-disable-line\n    loadingText, // eslint-disable-line\n    errorLargeFile,\n    errorUnsupportedFile,\n    errorAmountLimit, // eslint-disable-line\n    deleteButton, // eslint-disable-line\n    fileListAriaLabel, // eslint-disable-line\n    ...props\n  } = extendedProps\n\n  const spacingClasses = createSpacingClasses(props)\n\n  const { files, setFiles, setInternalFiles, getExistingFile } =\n    useUpload(id)\n\n  const onInputUpload = useCallback(\n    (newFiles: Array<UploadFile>) => {\n      const mergedFiles = [\n        ...files,\n        ...newFiles.map((fileItem) => {\n          const { file } = fileItem\n\n          const existingFile = getExistingFile(file, files)\n\n          fileItem.exists = Boolean(existingFile)\n          fileItem.id = fileItem.exists ? existingFile.id : makeUniqueId()\n\n          return fileItem\n        }),\n      ]\n\n      const verifiedFiles = verifyFiles(\n        mergedFiles.filter(({ exists }) => !exists),\n        {\n          fileMaxSize,\n          acceptedFileTypes,\n          errorUnsupportedFile,\n          errorLargeFile,\n        }\n      )\n\n      const validFiles = [...verifiedFiles].slice(\n        0,\n        filesAmountLimit\n      ) as Array<UploadFile>\n\n      setFiles(validFiles)\n      setInternalFiles(mergedFiles)\n\n      if (typeof onChange === 'function') {\n        onChange({ files: validFiles })\n      }\n\n      return validFiles\n    },\n    [\n      acceptedFileTypes,\n      errorLargeFile,\n      errorUnsupportedFile,\n      fileMaxSize,\n      files,\n      filesAmountLimit,\n      getExistingFile,\n      onChange,\n      setFiles,\n      setInternalFiles,\n    ]\n  )\n\n  return (\n    <UploadContext.Provider\n      value={{\n        ...extendedProps,\n        id,\n        onInputUpload,\n      }}\n    >\n      <Provider skeleton={skeleton}>\n        <UploadDropzone\n          className={classnames('dnb-upload', spacingClasses, className)}\n          {...props}\n        >\n          <UploadInfo />\n\n          <UploadFileInput />\n\n          <UploadFileList />\n        </UploadDropzone>\n      </Provider>\n    </UploadContext.Provider>\n  )\n}\n\nUpload.useUpload = useUpload\n\nUpload._formElement = true\nUpload._supportsSpacingProps = true\n\nexport default Upload\n"],"mappings":"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"}

package/es/components/upload/UploadDocs.js

@@ -62,6 +62,11 @@ export const UploadEvents = {
     doc: 'Will be called once a file gets deleted by the user. Access the deleted file with `{ fileItem }`.',
     type: 'function',
     status: 'optional'
+  },
+  onFileClick: {
+    doc: 'Will be called once a file gets clicked on by the user. Access the clicked file with `{ fileItem }`.',
+    type: 'function',
+    status: 'optional'
   }
 };
 //# sourceMappingURL=UploadDocs.js.map

package/es/components/upload/UploadDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadDocs.js","names":["UploadProperties","acceptedFileTypes","doc","type","status","filesAmountLimit","fileMaxSize","title","text","download","skeleton","AcceptedFileTypeProperties","fileType","UploadEvents","onChange","onFileDelete"],"sources":["../../../../src/components/upload/UploadDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const UploadProperties: PropertiesTableProps = {\n  acceptedFileTypes: {\n    doc: 'List of accepted file types. Either as string or [AcceptedFileType](/uilib/components/upload/properties/#acceptedfiletype). When providing a list of [AcceptedFileType](/uilib/components/upload/properties/#acceptedfiletype), the accepted file types will be presented in a table(see [example](/uilib/components/upload/demos/#upload-with-file-max-size-based-on-file-type)).',\n    type: ['Array<string>', 'Array<AcceptedFileType>'],\n    status: 'required',\n  },\n  filesAmountLimit: {\n    doc: 'Defines the amount of files the user can select and upload. Defaults to 100.',\n    type: 'number',\n    status: 'optional',\n  },\n  fileMaxSize: {\n    doc: 'Defines the max file size of each file in MB. Use either `0` or `false` to disable. Defaults to 5 MB.',\n    type: ['number', 'false'],\n    status: 'optional',\n  },\n  title: {\n    doc: 'Custom text property. Replaces the default title. Can be disabled using `false`.',\n    type: 'string',\n    status: 'optional',\n  },\n  text: {\n    doc: 'Custom text property. Replaces the default text. Can be disabled using `false`.',\n    type: 'string',\n    status: 'optional',\n  },\n  download: {\n    doc: 'Causes the browser to treat all listed files as downloadable instead of opening them in a new browser tab or window. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'Skeleton should be applied when loading content.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const AcceptedFileTypeProperties: PropertiesTableProps = {\n  fileType: {\n    doc: 'The name of the accepted file type.',\n    type: 'string',\n    status: 'required',\n  },\n  fileMaxSize: {\n    doc: 'Defines the max file size of the given file type in MB. Use either `0` or `false` to disable. If not provided, it defaults to the value of [Uploads](/uilib/components/upload/properties/#properties) `fileMaxSize` which defaults to 5 MB.',\n    type: ['number', 'false'],\n    status: 'optional',\n  },\n}\n\nexport const UploadEvents: PropertiesTableProps = {\n  onChange: {\n    doc: 'Will be called on `files` changes made by the user. Access the files with `{ files }` (containing each a `fileItem`).',\n    type: 'function',\n    status: 'optional',\n  },\n  onFileDelete: {\n    doc: 'Will be called once a file gets deleted by the user. Access the deleted file with `{ fileItem }`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,gBAAsC,GAAG;EACpDC,iBAAiB,EAAE;IACjBC,GAAG,EAAE,oXAAoX;IACzXC,IAAI,EAAE,CAAC,eAAe,EAAE,yBAAyB,CAAC;IAClDC,MAAM,EAAE;EACV,CAAC;EACDC,gBAAgB,EAAE;IAChBH,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,WAAW,EAAE;IACXJ,GAAG,EAAE,uGAAuG;IAC5GC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDG,KAAK,EAAE;IACLL,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,IAAI,EAAE;IACJN,GAAG,EAAE,iFAAiF;IACtFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,QAAQ,EAAE;IACRP,GAAG,EAAE,2IAA2I;IAChJC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,kDAAkD;IACvDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMO,0BAAgD,GAAG;EAC9DC,QAAQ,EAAE;IACRV,GAAG,EAAE,qCAAqC;IAC1CC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,WAAW,EAAE;IACXJ,GAAG,EAAE,6OAA6O;IAClPC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMS,YAAkC,GAAG;EAChDC,QAAQ,EAAE;IACRZ,GAAG,EAAE,uHAAuH;IAC5HC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDW,YAAY,EAAE;IACZb,GAAG,EAAE,mGAAmG;IACxGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"UploadDocs.js","names":["UploadProperties","acceptedFileTypes","doc","type","status","filesAmountLimit","fileMaxSize","title","text","download","skeleton","AcceptedFileTypeProperties","fileType","UploadEvents","onChange","onFileDelete","onFileClick"],"sources":["../../../../src/components/upload/UploadDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const UploadProperties: PropertiesTableProps = {\n  acceptedFileTypes: {\n    doc: 'List of accepted file types. Either as string or [AcceptedFileType](/uilib/components/upload/properties/#acceptedfiletype). When providing a list of [AcceptedFileType](/uilib/components/upload/properties/#acceptedfiletype), the accepted file types will be presented in a table(see [example](/uilib/components/upload/demos/#upload-with-file-max-size-based-on-file-type)).',\n    type: ['Array<string>', 'Array<AcceptedFileType>'],\n    status: 'required',\n  },\n  filesAmountLimit: {\n    doc: 'Defines the amount of files the user can select and upload. Defaults to 100.',\n    type: 'number',\n    status: 'optional',\n  },\n  fileMaxSize: {\n    doc: 'Defines the max file size of each file in MB. Use either `0` or `false` to disable. Defaults to 5 MB.',\n    type: ['number', 'false'],\n    status: 'optional',\n  },\n  title: {\n    doc: 'Custom text property. Replaces the default title. Can be disabled using `false`.',\n    type: 'string',\n    status: 'optional',\n  },\n  text: {\n    doc: 'Custom text property. Replaces the default text. Can be disabled using `false`.',\n    type: 'string',\n    status: 'optional',\n  },\n  download: {\n    doc: 'Causes the browser to treat all listed files as downloadable instead of opening them in a new browser tab or window. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'Skeleton should be applied when loading content.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const AcceptedFileTypeProperties: PropertiesTableProps = {\n  fileType: {\n    doc: 'The name of the accepted file type.',\n    type: 'string',\n    status: 'required',\n  },\n  fileMaxSize: {\n    doc: 'Defines the max file size of the given file type in MB. Use either `0` or `false` to disable. If not provided, it defaults to the value of [Uploads](/uilib/components/upload/properties/#properties) `fileMaxSize` which defaults to 5 MB.',\n    type: ['number', 'false'],\n    status: 'optional',\n  },\n}\n\nexport const UploadEvents: PropertiesTableProps = {\n  onChange: {\n    doc: 'Will be called on `files` changes made by the user. Access the files with `{ files }` (containing each a `fileItem`).',\n    type: 'function',\n    status: 'optional',\n  },\n  onFileDelete: {\n    doc: 'Will be called once a file gets deleted by the user. Access the deleted file with `{ fileItem }`.',\n    type: 'function',\n    status: 'optional',\n  },\n  onFileClick: {\n    doc: 'Will be called once a file gets clicked on by the user. Access the clicked file with `{ fileItem }`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,gBAAsC,GAAG;EACpDC,iBAAiB,EAAE;IACjBC,GAAG,EAAE,oXAAoX;IACzXC,IAAI,EAAE,CAAC,eAAe,EAAE,yBAAyB,CAAC;IAClDC,MAAM,EAAE;EACV,CAAC;EACDC,gBAAgB,EAAE;IAChBH,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,WAAW,EAAE;IACXJ,GAAG,EAAE,uGAAuG;IAC5GC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDG,KAAK,EAAE;IACLL,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,IAAI,EAAE;IACJN,GAAG,EAAE,iFAAiF;IACtFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,QAAQ,EAAE;IACRP,GAAG,EAAE,2IAA2I;IAChJC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,kDAAkD;IACvDC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMO,0BAAgD,GAAG;EAC9DC,QAAQ,EAAE;IACRV,GAAG,EAAE,qCAAqC;IAC1CC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,WAAW,EAAE;IACXJ,GAAG,EAAE,6OAA6O;IAClPC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMS,YAAkC,GAAG;EAChDC,QAAQ,EAAE;IACRZ,GAAG,EAAE,uHAAuH;IAC5HC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDW,YAAY,EAAE;IACZb,GAAG,EAAE,mGAAmG;IACxGC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDY,WAAW,EAAE;IACXd,GAAG,EAAE,sGAAsG;IAC3GC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}

package/es/components/upload/UploadFileList.js

@@ -1,7 +1,13 @@
-import React from 'react';
+"use client";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useEffect, useRef } from 'react';
 import { UploadContext } from './UploadContext';
 import UploadFileListCell from './UploadFileListCell';
 import useUpload from './useUpload';
+import { isAsync } from '../../shared/helpers/isAsync';
 function UploadFileList() {
   const context = React.useContext(UploadContext);
   const {
@@ -11,6 +17,7 @@ function UploadFileList() {
     download,
     loadingText,
     onFileDelete,
+    onFileClick,
     onChange
   } = context;
   const {
@@ -18,26 +25,83 @@ function UploadFileList() {
     setFiles,
     setInternalFiles
   } = useUpload(id);
+  const filesRef = useRef(null);
+  useEffect(() => {
+    filesRef.current = files;
+  }, [files]);
   if (files === null || files.length < 1) {
     return null;
   }
+  const removeFile = fileToBeRemoved => {
+    return filesRef.current.filter(fileListElement => fileListElement.file != fileToBeRemoved.file);
+  };
+  const updateFile = (fileToBeUpdated, props) => {
+    return filesRef.current.map(fileListElement => fileListElement.id === fileToBeUpdated.id ? _objectSpread(_objectSpread({}, fileListElement), props) : fileListElement);
+  };
+  const updateFiles = updatedFiles => {
+    setFiles(updatedFiles);
+    setInternalFiles(updatedFiles);
+    if (typeof onChange === 'function') {
+      onChange({
+        files: updatedFiles
+      });
+    }
+  };
+  const handleDeleteAsync = async uploadFile => {
+    updateFiles(updateFile(uploadFile, {
+      isLoading: true,
+      errorMessage: null
+    }));
+    try {
+      await onFileDelete({
+        fileItem: uploadFile
+      });
+      updateFiles(removeFile(uploadFile));
+    } catch (error) {
+      updateFiles(updateFile(uploadFile, {
+        isLoading: false,
+        errorMessage: error.message
+      }));
+    }
+  };
+  const handleFileClickAsync = async uploadFile => {
+    updateFiles(updateFile(uploadFile, {
+      isLoading: true
+    }));
+    await onFileClick({
+      fileItem: uploadFile
+    });
+    updateFiles(updateFile(uploadFile, {
+      isLoading: false
+    }));
+  };
   return React.createElement("ul", {
     className: "dnb-upload__file-list",
     "aria-label": fileListAriaLabel
   }, files.map((uploadFile, index) => {
-    const onDeleteHandler = () => {
+    const onDeleteHandler = async () => {
       if (typeof onFileDelete === 'function') {
-        onFileDelete({
-          fileItem: uploadFile
-        });
+        if (isAsync(onFileDelete)) {
+          handleDeleteAsync(uploadFile);
+        } else {
+          onFileDelete({
+            fileItem: uploadFile
+          });
+          updateFiles(removeFile(uploadFile));
+        }
+      } else {
+        updateFiles(removeFile(uploadFile));
       }
-      const cleanedFiles = files.filter(fileListElement => fileListElement.file != uploadFile.file);
-      setFiles(cleanedFiles);
-      setInternalFiles(cleanedFiles);
-      if (typeof onChange === 'function') {
-        onChange({
-          files: cleanedFiles
-        });
+    };
+    const onFileClickHandler = async () => {
+      if (typeof onFileClick === 'function') {
+        if (isAsync(onFileClick)) {
+          handleFileClickAsync(uploadFile);
+        } else {
+          onFileClick({
+            fileItem: uploadFile
+          });
+        }
       }
     };
     return React.createElement(UploadFileListCell, {
@@ -45,6 +109,7 @@ function UploadFileList() {
       id: id,
       uploadFile: uploadFile,
       onDelete: onDeleteHandler,
+      onClick: onFileClick && onFileClickHandler,
       deleteButtonText: deleteButton,
       loadingText: loadingText,
       download: download

package/es/components/upload/UploadFileList.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadFileList.js","names":["React","UploadContext","UploadFileListCell","useUpload","UploadFileList","context","useContext","id","fileListAriaLabel","deleteButton","download","loadingText","onFileDelete","onChange","files","setFiles","setInternalFiles","length","createElement","className","map","uploadFile","index","onDeleteHandler","fileItem","cleanedFiles","filter","fileListElement","file","key","onDelete","deleteButtonText"],"sources":["../../../../src/components/upload/UploadFileList.tsx"],"sourcesContent":["import React from 'react'\nimport { UploadFile } from './types'\nimport { UploadContext } from './UploadContext'\nimport UploadFileListCell from './UploadFileListCell'\nimport useUpload from './useUpload'\n\nfunction UploadFileList() {\n  const context = React.useContext(UploadContext)\n\n  const {\n    id,\n    fileListAriaLabel,\n    deleteButton,\n    download,\n    loadingText,\n    onFileDelete,\n    onChange,\n  } = context\n\n  const { files, setFiles, setInternalFiles } = useUpload(id)\n\n  if (files === null || files.length < 1) {\n    return null\n  }\n\n  return (\n    <ul className=\"dnb-upload__file-list\" aria-label={fileListAriaLabel}>\n      {files.map((uploadFile: UploadFile, index: number) => {\n        const onDeleteHandler = () => {\n          if (typeof onFileDelete === 'function') {\n            onFileDelete({ fileItem: uploadFile })\n          }\n\n          const cleanedFiles = files.filter(\n            (fileListElement) => fileListElement.file != uploadFile.file\n          )\n\n          setFiles(cleanedFiles)\n          setInternalFiles(cleanedFiles)\n\n          if (typeof onChange === 'function') {\n            onChange({ files: cleanedFiles })\n          }\n        }\n\n        return (\n          <UploadFileListCell\n            key={index}\n            id={id}\n            uploadFile={uploadFile}\n            onDelete={onDeleteHandler}\n            deleteButtonText={deleteButton}\n            loadingText={loadingText}\n            download={download}\n          />\n        )\n      })}\n    </ul>\n  )\n}\n\nexport default UploadFileList\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,OAAOC,SAAS,MAAM,aAAa;AAEnC,SAASC,cAAcA,CAAA,EAAG;EACxB,MAAMC,OAAO,GAAGL,KAAK,CAACM,UAAU,CAACL,aAAa,CAAC;EAE/C,MAAM;IACJM,EAAE;IACFC,iBAAiB;IACjBC,YAAY;IACZC,QAAQ;IACRC,WAAW;IACXC,YAAY;IACZC;EACF,CAAC,GAAGR,OAAO;EAEX,MAAM;IAAES,KAAK;IAAEC,QAAQ;IAAEC;EAAiB,CAAC,GAAGb,SAAS,CAACI,EAAE,CAAC;EAE3D,IAAIO,KAAK,KAAK,IAAI,IAAIA,KAAK,CAACG,MAAM,GAAG,CAAC,EAAE;IACtC,OAAO,IAAI;EACb;EAEA,OACEjB,KAAA,CAAAkB,aAAA;IAAIC,SAAS,EAAC,uBAAuB;IAAC,cAAYX;EAAkB,GACjEM,KAAK,CAACM,GAAG,CAAC,CAACC,UAAsB,EAAEC,KAAa,KAAK;IACpD,MAAMC,eAAe,GAAGA,CAAA,KAAM;MAC5B,IAAI,OAAOX,YAAY,KAAK,UAAU,EAAE;QACtCA,YAAY,CAAC;UAAEY,QAAQ,EAAEH;QAAW,CAAC,CAAC;MACxC;MAEA,MAAMI,YAAY,GAAGX,KAAK,CAACY,MAAM,CAC9BC,eAAe,IAAKA,eAAe,CAACC,IAAI,IAAIP,UAAU,CAACO,IAC1D,CAAC;MAEDb,QAAQ,CAACU,YAAY,CAAC;MACtBT,gBAAgB,CAACS,YAAY,CAAC;MAE9B,IAAI,OAAOZ,QAAQ,KAAK,UAAU,EAAE;QAClCA,QAAQ,CAAC;UAAEC,KAAK,EAAEW;QAAa,CAAC,CAAC;MACnC;IACF,CAAC;IAED,OACEzB,KAAA,CAAAkB,aAAA,CAAChB,kBAAkB;MACjB2B,GAAG,EAAEP,KAAM;MACXf,EAAE,EAAEA,EAAG;MACPc,UAAU,EAAEA,UAAW;MACvBS,QAAQ,EAAEP,eAAgB;MAC1BQ,gBAAgB,EAAEtB,YAAa;MAC/BE,WAAW,EAAEA,WAAY;MACzBD,QAAQ,EAAEA;IAAS,CACpB,CAAC;EAEN,CAAC,CACC,CAAC;AAET;AAEA,eAAeN,cAAc"}
+{"version":3,"file":"UploadFileList.js","names":["React","useEffect","useRef","UploadContext","UploadFileListCell","useUpload","isAsync","UploadFileList","context","useContext","id","fileListAriaLabel","deleteButton","download","loadingText","onFileDelete","onFileClick","onChange","files","setFiles","setInternalFiles","filesRef","current","length","removeFile","fileToBeRemoved","filter","fileListElement","file","updateFile","fileToBeUpdated","props","map","_objectSpread","updateFiles","updatedFiles","handleDeleteAsync","uploadFile","isLoading","errorMessage","fileItem","error","message","handleFileClickAsync","createElement","className","index","onDeleteHandler","onFileClickHandler","key","onDelete","onClick","deleteButtonText"],"sources":["../../../../src/components/upload/UploadFileList.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport { UploadFile } from './types'\nimport { UploadContext } from './UploadContext'\nimport UploadFileListCell from './UploadFileListCell'\nimport useUpload from './useUpload'\nimport { isAsync } from '../../shared/helpers/isAsync'\n\nfunction UploadFileList() {\n  const context = React.useContext(UploadContext)\n\n  const {\n    id,\n    fileListAriaLabel,\n    deleteButton,\n    download,\n    loadingText,\n    onFileDelete,\n    onFileClick,\n    onChange,\n  } = context\n\n  const { files, setFiles, setInternalFiles } = useUpload(id)\n\n  const filesRef = useRef(null)\n\n  useEffect(() => {\n    filesRef.current = files\n  }, [files])\n\n  if (files === null || files.length < 1) {\n    return null\n  }\n\n  const removeFile = (fileToBeRemoved: UploadFile) => {\n    return filesRef.current.filter(\n      (fileListElement) => fileListElement.file != fileToBeRemoved.file\n    )\n  }\n\n  const updateFile = (\n    fileToBeUpdated: UploadFile,\n    props: Partial<UploadFile>\n  ) => {\n    return filesRef.current.map((fileListElement) =>\n      fileListElement.id === fileToBeUpdated.id\n        ? {\n            ...fileListElement,\n            ...props,\n          }\n        : fileListElement\n    )\n  }\n\n  const updateFiles = (updatedFiles: UploadFile[]) => {\n    setFiles(updatedFiles)\n    setInternalFiles(updatedFiles)\n\n    if (typeof onChange === 'function') {\n      onChange({ files: updatedFiles })\n    }\n  }\n\n  const handleDeleteAsync = async (uploadFile: UploadFile) => {\n    updateFiles(\n      updateFile(uploadFile, {\n        isLoading: true,\n        errorMessage: null,\n      })\n    )\n\n    try {\n      await onFileDelete({ fileItem: uploadFile })\n      updateFiles(removeFile(uploadFile))\n    } catch (error) {\n      updateFiles(\n        updateFile(uploadFile, {\n          isLoading: false,\n          errorMessage: error.message,\n        })\n      )\n    }\n  }\n\n  const handleFileClickAsync = async (uploadFile: UploadFile) => {\n    updateFiles(\n      updateFile(uploadFile, {\n        isLoading: true,\n      })\n    )\n\n    await onFileClick({ fileItem: uploadFile })\n    updateFiles(\n      updateFile(uploadFile, {\n        isLoading: false,\n      })\n    )\n  }\n\n  return (\n    <ul className=\"dnb-upload__file-list\" aria-label={fileListAriaLabel}>\n      {files.map((uploadFile: UploadFile, index: number) => {\n        const onDeleteHandler = async () => {\n          if (typeof onFileDelete === 'function') {\n            if (isAsync(onFileDelete)) {\n              handleDeleteAsync(uploadFile)\n            } else {\n              onFileDelete({ fileItem: uploadFile })\n              updateFiles(removeFile(uploadFile))\n            }\n          } else {\n            updateFiles(removeFile(uploadFile))\n          }\n        }\n\n        const onFileClickHandler = async () => {\n          if (typeof onFileClick === 'function') {\n            if (isAsync(onFileClick)) {\n              handleFileClickAsync(uploadFile)\n            } else {\n              onFileClick({ fileItem: uploadFile })\n            }\n          }\n        }\n\n        return (\n          <UploadFileListCell\n            key={index}\n            id={id}\n            uploadFile={uploadFile}\n            onDelete={onDeleteHandler}\n            onClick={onFileClick && onFileClickHandler}\n            deleteButtonText={deleteButton}\n            loadingText={loadingText}\n            download={download}\n          />\n        )\n      })}\n    </ul>\n  )\n}\n\nexport default UploadFileList\n"],"mappings":"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"}

package/es/components/upload/UploadFileListCell.d.ts

@@ -24,6 +24,10 @@ export type UploadFileListCellProps = {
      * Calls onDelete when clicking the delete button
      */
     onDelete: () => void;
+    /**
+     * Calls onClick when clicking the file name
+     */
+    onClick?: () => void;
     /**
      * Causes the browser to treat all listed files as downloadable instead of opening them in a new browser tab or window.
      * Default: false
@@ -35,5 +39,5 @@ export type UploadFileListCellProps = {
     loadingText: React.ReactNode;
     deleteButtonText: React.ReactNode;
 };
-declare const UploadFileListCell: ({ id, uploadFile, onDelete, loadingText, deleteButtonText, download, }: UploadFileListCellProps) => import("react/jsx-runtime").JSX.Element;
+declare const UploadFileListCell: ({ id, uploadFile, onDelete, onClick, loadingText, deleteButtonText, download, }: UploadFileListCellProps) => import("react/jsx-runtime").JSX.Element;
 export default UploadFileListCell;

package/es/components/upload/UploadFileListCell.js

@@ -3,7 +3,6 @@
 var _ProgressIndicator, _Icon;
 import React, { useRef } from 'react';
 import classnames from 'classnames';
-import Anchor from '../../components/Anchor';
 import Button from '../button/Button';
 import Icon from '../../components/Icon';
 import FormStatus from '../../components/FormStatus';
@@ -12,6 +11,7 @@ import { trash as TrashIcon, exclamation_medium as ExclamationIcon, file_png_med
 import { getPreviousSibling, warn } from '../../shared/component-helper';
 import useUpload from './useUpload';
 import { getFileTypeFromExtension } from './UploadVerify';
+import UploadFileLink from './UploadFileListLink';
 export const fileExtensionImages = {
   png,
   jpg,
@@ -30,6 +30,7 @@ const UploadFileListCell = ({
   id,
   uploadFile,
   onDelete,
+  onClick,
   loadingText,
   deleteButtonText,
   download
@@ -69,7 +70,8 @@ const UploadFileListCell = ({
     icon: TrashIcon,
     variant: "tertiary",
     onClick: onDeleteHandler,
-    icon_position: "left"
+    icon_position: "left",
+    disabled: isLoading
   }, deleteButtonText))), getWarning());
   function getIcon() {
     if (isLoading) {
@@ -95,13 +97,12 @@ const UploadFileListCell = ({
       className: "dnb-upload__file-cell__text-container dnb-upload__file-cell__text-container--loading"
     }, loadingText)) : React.createElement("div", {
       className: "dnb-upload__file-cell__text-container"
-    }, React.createElement(Anchor, {
-      target: "_blank",
+    }, React.createElement(UploadFileLink, {
+      text: file.name,
       href: imageUrl,
-      download: download ? file.name : null,
-      className: "dnb-anchor--no-launch-icon dnb-upload__file-cell__title",
-      rel: "noopener noreferrer"
-    }, file.name));
+      download: download,
+      onClick: onClick
+    }));
   }
   function getWarning() {
     return hasWarning ? _FormStatus || (_FormStatus = React.createElement(FormStatus, {

package/es/components/upload/UploadFileListCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"UploadFileListCell.js","names":["React","useRef","classnames","Anchor","Button","Icon","FormStatus","ProgressIndicator","trash","TrashIcon","exclamation_medium","ExclamationIcon","file_png_medium","png","file_jpg_medium","jpg","file_word_medium","doc","file_pdf_medium","pdf","file_xls_medium","xls","file_ppt_medium","ppt","file_csv_medium","csv","file_txt_medium","txt","file_xml_medium","xml","file_medium","file","getPreviousSibling","warn","useUpload","getFileTypeFromExtension","fileExtensionImages","docx","odt","UploadFileListCell","id","uploadFile","onDelete","loadingText","deleteButtonText","download","_div","_FormStatus","errorMessage","isLoading","hasWarning","fileType","imageUrl","URL","createObjectURL","cellRef","exists","useExistsHighlight","handleDisappearFocus","cellElement","current","focusElement","querySelector","focus","e","onDeleteHandler","createElement","className","ref","getIcon","getTitle","icon","variant","onClick","icon_position","getWarning","_ProgressIndicator","_Icon","iconFileType","mimeParts","type","split","Object","prototype","hasOwnProperty","call","target","href","name","rel","top","text","stretch","internalFiles","updateExists","useState","timerRef","clearTimers","clearTimeout","useEffect","some","f","size","setTimeout"],"sources":["../../../../src/components/upload/UploadFileListCell.tsx"],"sourcesContent":["import React, { useRef } from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport Anchor from '../../components/Anchor'\nimport Button from '../button/Button'\nimport Icon from '../../components/Icon'\nimport FormStatus from '../../components/FormStatus'\nimport ProgressIndicator from '../../components/progress-indicator'\n\n// Icons\nimport {\n  trash as TrashIcon,\n  exclamation_medium as ExclamationIcon,\n  file_png_medium as png,\n  file_jpg_medium as jpg,\n  file_word_medium as doc,\n  file_pdf_medium as pdf,\n  file_xls_medium as xls,\n  file_ppt_medium as ppt,\n  file_csv_medium as csv,\n  file_txt_medium as txt,\n  file_xml_medium as xml,\n  file_medium as file,\n} from '../../icons'\nimport { UploadFile, UploadFileNative } from './types'\n\n// Shared\nimport { getPreviousSibling, warn } from '../../shared/component-helper'\nimport useUpload from './useUpload'\nimport { getFileTypeFromExtension } from './UploadVerify'\n\n// Will be deprecated - and then default to only showing the file icon,\n// and not file icon per file extension type\nexport const fileExtensionImages = {\n  png,\n  jpg,\n  pdf,\n  doc,\n  docx: doc,\n  odt: doc,\n  xls,\n  ppt,\n  csv,\n  txt,\n  xml,\n  file,\n}\n\nexport type UploadFileListCellProps = {\n  id: string\n\n  /**\n   * Uploaded file\n   */\n  uploadFile: UploadFile | UploadFileNative\n\n  /**\n   * Calls onDelete when clicking the delete button\n   */\n  onDelete: () => void\n\n  /**\n   * Causes the browser to treat all listed files as downloadable instead of opening them in a new browser tab or window.\n   * Default: false\n   */\n  download?: boolean\n\n  /**\n   * Text\n   */\n  loadingText: React.ReactNode\n  deleteButtonText: React.ReactNode\n}\n\nconst UploadFileListCell = ({\n  id,\n  uploadFile,\n  onDelete,\n  loadingText,\n  deleteButtonText,\n  download,\n}: UploadFileListCellProps) => {\n  const { file, errorMessage, isLoading } = uploadFile\n  const hasWarning = errorMessage != null\n\n  const fileType = getFileTypeFromExtension(file)\n\n  const imageUrl = URL.createObjectURL(file)\n  const cellRef = useRef<HTMLLIElement>()\n  const exists = useExistsHighlight(id, file)\n\n  const handleDisappearFocus = () => {\n    try {\n      const cellElement = cellRef.current\n      const focusElement = getPreviousSibling(\n        '.dnb-upload',\n        cellElement\n      ).querySelector(\n        '.dnb-upload__file-input-button'\n      ) as HTMLButtonElement\n      focusElement.focus()\n    } catch (e) {\n      warn(e)\n    }\n  }\n\n  const onDeleteHandler = () => {\n    handleDisappearFocus()\n\n    onDelete()\n  }\n\n  return (\n    <li\n      className={classnames(\n        'dnb-upload__file-cell',\n        hasWarning && 'dnb-upload__file-cell--warning',\n        exists && 'dnb-upload__file-cell--highlight'\n      )}\n      ref={cellRef}\n    >\n      <div className=\"dnb-upload__file-cell__content\">\n        <div className=\"dnb-upload__file-cell__content__left\">\n          {getIcon()}\n          {getTitle()}\n        </div>\n        <div>\n          <Button\n            icon={TrashIcon}\n            variant=\"tertiary\"\n            onClick={onDeleteHandler}\n            icon_position=\"left\"\n          >\n            {deleteButtonText}\n          </Button>\n        </div>\n      </div>\n\n      {getWarning()}\n    </li>\n  )\n\n  function getIcon() {\n    if (isLoading) {\n      return <ProgressIndicator />\n    }\n\n    if (hasWarning) return <Icon icon={ExclamationIcon} />\n\n    let iconFileType = fileType\n\n    if (!iconFileType) {\n      const mimeParts = file.type.split('/')\n      iconFileType =\n        fileExtensionImages[mimeParts[0]] ||\n        fileExtensionImages[mimeParts[1]]\n    }\n\n    if (\n      !Object.prototype.hasOwnProperty.call(\n        fileExtensionImages,\n        iconFileType\n      )\n    ) {\n      iconFileType = 'file'\n    }\n\n    return <Icon icon={fileExtensionImages[iconFileType]} />\n  }\n\n  function getTitle() {\n    return isLoading ? (\n      <div\n        className={classnames(\n          'dnb-upload__file-cell__text-container',\n          'dnb-upload__file-cell__text-container--loading'\n        )}\n      >\n        {loadingText}\n      </div>\n    ) : (\n      <div className=\"dnb-upload__file-cell__text-container\">\n        <Anchor\n          target=\"_blank\"\n          href={imageUrl}\n          download={download ? file.name : null}\n          className={classnames(\n            'dnb-anchor--no-launch-icon',\n            'dnb-upload__file-cell__title'\n          )}\n          rel=\"noopener noreferrer\"\n        >\n          {file.name}\n        </Anchor>\n      </div>\n    )\n  }\n\n  function getWarning() {\n    return hasWarning ? (\n      <FormStatus top=\"small\" text={errorMessage} stretch />\n    ) : null\n  }\n}\n\nexport default UploadFileListCell\n\nfunction useExistsHighlight(id: string, file: File) {\n  const { internalFiles } = useUpload(id)\n  const [exists, updateExists] = React.useState(false)\n  const timerRef = React.useRef<NodeJS.Timer>()\n\n  const clearTimers = () => {\n    clearTimeout(timerRef.current)\n  }\n\n  React.useEffect(() => {\n    const exists = internalFiles.some(({ exists, file: f }) => {\n      return exists && f.name === file.name && f.size === file.size\n    })\n\n    if (exists) {\n      updateExists(true)\n      clearTimers()\n      timerRef.current = setTimeout(() => updateExists(false), 1500) // transition-duration in CSS\n    }\n\n    return clearTimers\n  }, [file, internalFiles])\n\n  return exists\n}\n"],"mappings":"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"}
+{"version":3,"file":"UploadFileListCell.js","names":["React","useRef","classnames","Button","Icon","FormStatus","ProgressIndicator","trash","TrashIcon","exclamation_medium","ExclamationIcon","file_png_medium","png","file_jpg_medium","jpg","file_word_medium","doc","file_pdf_medium","pdf","file_xls_medium","xls","file_ppt_medium","ppt","file_csv_medium","csv","file_txt_medium","txt","file_xml_medium","xml","file_medium","file","getPreviousSibling","warn","useUpload","getFileTypeFromExtension","UploadFileLink","fileExtensionImages","docx","odt","UploadFileListCell","id","uploadFile","onDelete","onClick","loadingText","deleteButtonText","download","_div","_FormStatus","errorMessage","isLoading","hasWarning","fileType","imageUrl","URL","createObjectURL","cellRef","exists","useExistsHighlight","handleDisappearFocus","cellElement","current","focusElement","querySelector","focus","e","onDeleteHandler","createElement","className","ref","getIcon","getTitle","icon","variant","icon_position","disabled","getWarning","_ProgressIndicator","_Icon","iconFileType","mimeParts","type","split","Object","prototype","hasOwnProperty","call","text","name","href","top","stretch","internalFiles","updateExists","useState","timerRef","clearTimers","clearTimeout","useEffect","some","f","size","setTimeout"],"sources":["../../../../src/components/upload/UploadFileListCell.tsx"],"sourcesContent":["import React, { useRef } from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport Button from '../button/Button'\nimport Icon from '../../components/Icon'\nimport FormStatus from '../../components/FormStatus'\nimport ProgressIndicator from '../../components/progress-indicator'\n\n// Icons\nimport {\n  trash as TrashIcon,\n  exclamation_medium as ExclamationIcon,\n  file_png_medium as png,\n  file_jpg_medium as jpg,\n  file_word_medium as doc,\n  file_pdf_medium as pdf,\n  file_xls_medium as xls,\n  file_ppt_medium as ppt,\n  file_csv_medium as csv,\n  file_txt_medium as txt,\n  file_xml_medium as xml,\n  file_medium as file,\n} from '../../icons'\nimport { UploadFile, UploadFileNative } from './types'\n\n// Shared\nimport { getPreviousSibling, warn } from '../../shared/component-helper'\nimport useUpload from './useUpload'\nimport { getFileTypeFromExtension } from './UploadVerify'\nimport UploadFileLink from './UploadFileListLink'\n\n// Will be deprecated - and then default to only showing the file icon,\n// and not file icon per file extension type\nexport const fileExtensionImages = {\n  png,\n  jpg,\n  pdf,\n  doc,\n  docx: doc,\n  odt: doc,\n  xls,\n  ppt,\n  csv,\n  txt,\n  xml,\n  file,\n}\n\nexport type UploadFileListCellProps = {\n  id: string\n\n  /**\n   * Uploaded file\n   */\n  uploadFile: UploadFile | UploadFileNative\n\n  /**\n   * Calls onDelete when clicking the delete button\n   */\n  onDelete: () => void\n\n  /**\n   * Calls onClick when clicking the file name\n   */\n  onClick?: () => void\n\n  /**\n   * Causes the browser to treat all listed files as downloadable instead of opening them in a new browser tab or window.\n   * Default: false\n   */\n  download?: boolean\n\n  /**\n   * Text\n   */\n  loadingText: React.ReactNode\n  deleteButtonText: React.ReactNode\n}\n\nconst UploadFileListCell = ({\n  id,\n  uploadFile,\n  onDelete,\n  onClick,\n  loadingText,\n  deleteButtonText,\n  download,\n}: UploadFileListCellProps) => {\n  const { file, errorMessage, isLoading } = uploadFile\n  const hasWarning = errorMessage != null\n\n  const fileType = getFileTypeFromExtension(file)\n\n  const imageUrl = URL.createObjectURL(file)\n  const cellRef = useRef<HTMLLIElement>()\n  const exists = useExistsHighlight(id, file)\n\n  const handleDisappearFocus = () => {\n    try {\n      const cellElement = cellRef.current\n      const focusElement = getPreviousSibling(\n        '.dnb-upload',\n        cellElement\n      ).querySelector(\n        '.dnb-upload__file-input-button'\n      ) as HTMLButtonElement\n      focusElement.focus()\n    } catch (e) {\n      warn(e)\n    }\n  }\n\n  const onDeleteHandler = () => {\n    handleDisappearFocus()\n\n    onDelete()\n  }\n\n  return (\n    <li\n      className={classnames(\n        'dnb-upload__file-cell',\n        hasWarning && 'dnb-upload__file-cell--warning',\n        exists && 'dnb-upload__file-cell--highlight'\n      )}\n      ref={cellRef}\n    >\n      <div className=\"dnb-upload__file-cell__content\">\n        <div className=\"dnb-upload__file-cell__content__left\">\n          {getIcon()}\n          {getTitle()}\n        </div>\n        <div>\n          <Button\n            icon={TrashIcon}\n            variant=\"tertiary\"\n            onClick={onDeleteHandler}\n            icon_position=\"left\"\n            disabled={isLoading}\n          >\n            {deleteButtonText}\n          </Button>\n        </div>\n      </div>\n\n      {getWarning()}\n    </li>\n  )\n\n  function getIcon() {\n    if (isLoading) {\n      return <ProgressIndicator />\n    }\n\n    if (hasWarning) return <Icon icon={ExclamationIcon} />\n\n    let iconFileType = fileType\n\n    if (!iconFileType) {\n      const mimeParts = file.type.split('/')\n      iconFileType =\n        fileExtensionImages[mimeParts[0]] ||\n        fileExtensionImages[mimeParts[1]]\n    }\n\n    if (\n      !Object.prototype.hasOwnProperty.call(\n        fileExtensionImages,\n        iconFileType\n      )\n    ) {\n      iconFileType = 'file'\n    }\n\n    return <Icon icon={fileExtensionImages[iconFileType]} />\n  }\n\n  function getTitle() {\n    return isLoading ? (\n      <div\n        className={classnames(\n          'dnb-upload__file-cell__text-container',\n          'dnb-upload__file-cell__text-container--loading'\n        )}\n      >\n        {loadingText}\n      </div>\n    ) : (\n      <div className=\"dnb-upload__file-cell__text-container\">\n        <UploadFileLink\n          text={file.name}\n          href={imageUrl}\n          download={download}\n          onClick={onClick}\n        />\n      </div>\n    )\n  }\n\n  function getWarning() {\n    return hasWarning ? (\n      <FormStatus top=\"small\" text={errorMessage} stretch />\n    ) : null\n  }\n}\n\nexport default UploadFileListCell\n\nfunction useExistsHighlight(id: string, file: File) {\n  const { internalFiles } = useUpload(id)\n  const [exists, updateExists] = React.useState(false)\n  const timerRef = React.useRef<NodeJS.Timer>()\n\n  const clearTimers = () => {\n    clearTimeout(timerRef.current)\n  }\n\n  React.useEffect(() => {\n    const exists = internalFiles.some(({ exists, file: f }) => {\n      return exists && f.name === file.name && f.size === file.size\n    })\n\n    if (exists) {\n      updateExists(true)\n      clearTimers()\n      timerRef.current = setTimeout(() => updateExists(false), 1500) // transition-duration in CSS\n    }\n\n    return clearTimers\n  }, [file, internalFiles])\n\n  return exists\n}\n"],"mappings":"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"}

package/es/components/upload/UploadFileListLink.d.ts

@@ -0,0 +1,13 @@
+import { SpacingProps } from '../space/types';
+export type UploadFileLinkProps = UploadFileAnchorProps & UploadFileButtonProps;
+export declare const UploadFileLink: (props: UploadFileLinkProps) => import("react/jsx-runtime").JSX.Element;
+export default UploadFileLink;
+type UploadFileButtonProps = {
+    text: string;
+    onClick?: () => void;
+} & SpacingProps;
+type UploadFileAnchorProps = {
+    text: string;
+    href: string;
+    download?: boolean;
+} & SpacingProps;