@cruk/cruk-react-components 7.2.1 → 7.2.3

package/lib/index.css

@@ -2815,18 +2815,12 @@ button {
     display: none;
   }
 
-  &[data-is-animated="true"] {
+  &[data-is-animated="true"],
+  &[data-is-animated="true"]::backdrop {
     transition-behavior: allow-discrete;
     transition-property: all;
     transition-duration: 0.3s;
     transition-timing-function: ease-in-out;
-
-    &::backdrop {
-      transition-behavior: allow-discrete;
-      transition-property: all;
-      transition-duration: 0.3s;
-      transition-timing-function: ease-in-out;
-    }
   }
 
   &[open] {
@@ -2851,9 +2845,11 @@ button {
 
   .close-button {
     float: right;
-    margin-left: var(--spacing-xs, 1rem);
+    margin-top: calc(var(--spacing-xs, 1rem) * -1);
+    margin-right: calc(var(--spacing-xs, 0.5rem) * -1);
     font-size: 1.2rem;
     padding: 0;
+    outline-offset: -0.5rem;
   }
 }
 
@@ -2965,14 +2961,23 @@ button {
 }
 
 .component-popover {
-  &[data-is-animated="true"] {
-    [popover],
-    [popovertarget]::before,
-    [popovertarget]::after {
-      transition-behavior: allow-discrete;
-      transition-property: all;
-      transition-duration: 0.2s;
-      transition-timing-function: ease-in-out;
+  [popovertarget] {
+    --anchor-name: --popovertarget;
+    position: relative;
+
+    /* Tether arrow */
+    &::before {
+      content: "";
+      position: absolute;
+      box-sizing: border-box;
+      width: 1rem;
+      height: 1rem;
+      rotate: 45deg;
+      transform-origin: center center center;
+      background-color: var(--clr-popover-background, #fff);
+      border: 1px solid var(--clr-cruk-grey-300, #c6c6c6);
+      display: none;
+      opacity: 0;
     }
   }
 
@@ -2980,6 +2985,7 @@ button {
     --position-anchor: --popovertarget;
     position: absolute;
     inset: auto;
+    margin: 0;
 
     max-width: none;
     min-width: auto;
@@ -2996,43 +3002,30 @@ button {
     opacity: 0;
   }
 
-  [popover]:popover-open {
-    opacity: 1;
-
-    @starting-style {
-      opacity: 0;
+  &[data-is-animated="true"] {
+    [popover],
+    [popovertarget]::before {
+      /* allows display none to block with animation*/
+      transition-behavior: allow-discrete;
+      transition-property: all;
+      transition-duration: 0.2s;
+      transition-timing-function: ease-in-out;
     }
   }
 
-  [popovertarget] {
-    --anchor-name: --popovertarget;
-    position: relative;
+  /* Animate popover */
+  /* Animate tether arrow attached to button */
+  [popover]:popover-open,
+  [popovertarget]:has(+ :popover-open)::before {
+    display: block;
+    opacity: 1;
 
-    &::before {
-      content: "";
-      position: absolute;
-      box-sizing: border-box;
-      width: 1rem;
-      height: 1rem;
-      rotate: 45deg;
-      transform-origin: center center center;
-      background-color: var(--clr-popover-background, #fff);
-      border: 1px solid var(--clr-cruk-grey-300, #c6c6c6);
-      display: none;
+    @starting-style {
       opacity: 0;
     }
   }
 
-  [popovertarget]:has(+ :popover-open) {
-    &::before {
-      display: block;
-      opacity: 1;
-      @starting-style {
-        opacity: 0;
-      }
-    }
-  }
-
+  /* Positioning variants*/
   &[data-position="top"],
   &:not([data-position]) {
     [popover] {
@@ -3061,7 +3054,7 @@ button {
       position-area: left;
       position-try-fallbacks: --right, --top, --bottom;
     }
-    [popovertarget]:has(+ :popover-open)::before {
+    [popovertarget]::before {
       left: -0.5rem;
       top: calc(50% - 0.5rem);
     }
@@ -3072,11 +3065,14 @@ button {
       position-area: right;
       position-try-fallbacks: --left, --top, --bottom;
     }
-    [popovertarget]:has(+ :popover-open)::before {
+    [popovertarget]::before {
       right: -0.5rem;
       top: calc(50% - 0.5rem);
     }
   }
+
+  /* anchor name only works within this wrapping class */
+  anchor-scope: --popovertarget;
 }
 
 @position-try --bottom {

package/lib/src/components/Modal/index.d.ts

@@ -7,28 +7,26 @@ import React, { type HTMLAttributes, type ReactNode } from "react";
  * - Modals are unmounted when closed.
  * - Modal's "trap" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.
  * ## Accessibility
- * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal. You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work, so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.
+ * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal.
+ * You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work,
+ * so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.
  */
-export declare function Modal({ modalName, closeFunction, startOpen, showCloseButton, children, isAnimated, top, maxWidth, width, ref: outerRef, ...htmlAttributes }: HTMLAttributes<HTMLDialogElement> & {
+export declare function Modal({ modalName, startOpen, isAnimated, closeFunction, showCloseButton, children, ref: outerRef, style, ...htmlAttributes }: HTMLAttributes<HTMLDialogElement> & {
     /** modal name used for aria-label */
     modalName: string;
+    /** set if the modal start open */
+    startOpen: boolean;
     /** callback function called on modal close */
     closeFunction?: () => void;
     /** flag to reveal close button with cross in the top right of modal */
     showCloseButton?: boolean;
-    /** set max width of modal */
-    maxWidth?: string;
-    /** set space from top of view port that modal appears */
-    top?: string;
-    /** children components  */
-    children?: ReactNode;
-    /** width of modal */
-    width?: string;
     /** turn on animate in modal */
     isAnimated?: boolean;
-    /** set if the modal start open */
-    startOpen: boolean;
+    /** children components inside modal */
+    children?: ReactNode;
     /** ref to the dialog element */
     ref?: React.RefObject<HTMLDialogElement | null>;
+    /** additional style attributes for the dialog element */
+    style?: React.CSSProperties;
 }): React.JSX.Element;
 export default Modal;

package/lib/src/components/Modal/index.js

@@ -1,2 +1,2 @@
-import{__rest as e,__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import n,{useRef as t,useEffect as i}from"react";import{faClose as r}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as l}from"../IconFa/index.js";import{Button as a}from"../Button/index.js";function d(d){var s=d.modalName,c=d.closeFunction,m=d.startOpen,u=void 0===m||m,f=d.showCloseButton,p=d.children,w=d.isAnimated,v=void 0===w||w,h=d.top,y=d.maxWidth,b=d.width,x=d.ref,E=e(d,["modalName","closeFunction","startOpen","showCloseButton","children","isAnimated","top","maxWidth","width","ref"]),g=t(null),j=null!=x?x:g,k=n.useCallback(function(){var e,o;(null===(e=j.current)||void 0===e?void 0:e.hasAttribute("open"))&&(console.log("closing modal"),null===(o=j.current)||void 0===o||o.close(),c&&c())},[c,j]);return i(function(){var e=function(e){"Escape"===e.key&&k()};if("undefined"!=typeof window)return document.body.style.overflow="hidden",document.addEventListener("keydown",e),function(){"undefined"!=typeof window&&(document.body.style.overflow="unset",document.removeEventListener("keydown",e))}},[k]),i(function(){u&&j&&j.current&&j.current.showModal()},[u,j]),n.createElement(n.Fragment,null,n.createElement("dialog",o({ref:j,className:["component-modal","spacing-props","colour-props"].join(" "),"aria-modal":"true","aria-label":s,open:!1,"data-is-animated":v,style:{maxWidth:y,top:h,width:b}},E),f||c?n.createElement(a,{className:"component-button close-button","aria-label":"close",appearance:"tertiary",onClick:function(){k()}},n.createElement(l,{faIcon:r})):null,p))}export{d as Modal};
+import{__rest as e,__assign as o}from"../../../node_modules/tslib/tslib.es6.js";import n,{useRef as t,useEffect as l}from"react";import{faClose as r}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{IconFa as i}from"../IconFa/index.js";import{Button as a}from"../Button/index.js";function s(s){var c=s.modalName,d=s.startOpen,u=void 0===d||d,m=s.isAnimated,f=void 0===m||m,p=s.closeFunction,v=s.showCloseButton,y=s.children,w=s.ref,b=s.style,h=e(s,["modalName","startOpen","isAnimated","closeFunction","showCloseButton","children","ref","style"]),E=t(null),g=null!=w?w:E,j=n.useCallback(function(){var e,o;(null===(e=g.current)||void 0===e?void 0:e.hasAttribute("open"))&&(console.log("closing modal"),null===(o=g.current)||void 0===o||o.close(),p&&p())},[p,g]);return l(function(){var e=function(e){"Escape"===e.key&&j()};if("undefined"!=typeof window)return document.body.style.overflow="hidden",document.addEventListener("keydown",e),function(){"undefined"!=typeof window&&(document.body.style.overflow="unset",document.removeEventListener("keydown",e))}},[j]),l(function(){u&&g&&g.current&&g.current.showModal()},[u,g]),n.createElement(n.Fragment,null,n.createElement("dialog",o({ref:g,className:["component-modal","spacing-props","colour-props"].join(" "),"aria-modal":"true","aria-label":c,open:!1,"data-is-animated":f,style:b},h),v||p?n.createElement(a,{className:"component-button close-button","aria-label":"close",appearance:"tertiary",onClick:function(){j()}},n.createElement(i,{faIcon:r})):null,y))}export{s as Modal};
 //# sourceMappingURL=index.js.map

package/lib/src/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { faClose } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\n\nimport Button from \"../Button\";\n\n/**\n *\n * Use a modal to display content over top of the rest of the site which must be interacted with before the user can continue.\n * ## How modals work\n * - Modals are positioned over everything else in the document and remove scroll from the \"body\" tag so that modal content scrolls instead.\n * - Modals are unmounted when closed.\n * - Modal's \"trap\" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.\n * ## Accessibility\n * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal. You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work, so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.\n */\nexport function Modal({\n  modalName,\n  closeFunction,\n  startOpen = true,\n  showCloseButton,\n  children,\n  isAnimated = true,\n  top,\n  maxWidth,\n  width,\n  ref: outerRef,\n  ...htmlAttributes\n}: HTMLAttributes<HTMLDialogElement> & {\n  /** modal name used for aria-label */\n  modalName: string;\n  /** callback function called on modal close */\n  closeFunction?: () => void;\n  /** flag to reveal close button with cross in the top right of modal */\n  showCloseButton?: boolean;\n  /** set max width of modal */\n  maxWidth?: string;\n  /** set space from top of view port that modal appears */\n  top?: string;\n  /** children components  */\n  children?: ReactNode;\n  /** width of modal */\n  width?: string;\n  /** turn on animate in modal */\n  isAnimated?: boolean;\n  /** set if the modal start open */\n  startOpen: boolean;\n  /** ref to the dialog element */\n  ref?: React.RefObject<HTMLDialogElement | null>;\n}) {\n  const innerRef = useRef<HTMLDialogElement>(null);\n  const ref = outerRef ?? innerRef;\n\n  const doClose = React.useCallback((): void => {\n    if (!ref.current?.hasAttribute(\"open\")) return;\n    console.log(\"closing modal\");\n    ref.current?.close();\n    if (closeFunction) {\n      closeFunction();\n    }\n  }, [closeFunction, ref]);\n\n  useEffect(() => {\n    const closeByEsc = (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\") {\n        doClose();\n      }\n    };\n    if (typeof window === `undefined`) {\n      return undefined;\n    }\n    document.body.style.overflow = \"hidden\";\n    document.addEventListener(\"keydown\", closeByEsc);\n\n    return () => {\n      if (typeof window === `undefined`) {\n        return;\n      }\n      document.body.style.overflow = \"unset\";\n      document.removeEventListener(\"keydown\", closeByEsc);\n    };\n  }, [doClose]);\n\n  useEffect(() => {\n    if (startOpen && ref && ref.current) {\n      ref.current.showModal();\n    }\n  }, [startOpen, ref]);\n\n  return (\n    <>\n      <dialog\n        ref={ref}\n        className={[\"component-modal\", \"spacing-props\", \"colour-props\"].join(\n          \" \",\n        )}\n        aria-modal=\"true\"\n        aria-label={modalName}\n        open={false}\n        data-is-animated={isAnimated}\n        style={{\n          maxWidth,\n          top,\n          width,\n        }}\n        {...htmlAttributes}\n      >\n        {showCloseButton || closeFunction ? (\n          <Button\n            className=\"component-button close-button\"\n            aria-label=\"close\"\n            appearance=\"tertiary\"\n            onClick={() => {\n              doClose();\n            }}\n          >\n            <IconFa faIcon={faClose} />\n          </Button>\n        ) : null}\n        {children}\n      </dialog>\n    </>\n  );\n}\n\nexport default Modal;\n"],"names":["Modal","_a","modalName","closeFunction","_b","startOpen","showCloseButton","children","_c","isAnimated","top","maxWidth","width","outerRef","ref","htmlAttributes","__rest","innerRef","useRef","doClose","React","useCallback","current","hasAttribute","console","log","close","useEffect","closeByEsc","event","key","window","document","body","style","overflow","addEventListener","removeEventListener","showModal","createElement","Fragment","__assign","className","join","open","Button","appearance","onClick","IconFa","faIcon","faClose"],"mappings":"oTAsBM,SAAUA,EAAMC,GACpB,IAAAC,EAASD,EAAAC,UACTC,EAAaF,EAAAE,cACbC,cAAAC,OAAS,IAAAD,KACTE,oBACAC,aACAC,EAAAP,EAAAQ,WAAAA,cAAiBD,EACjBE,EAAGT,EAAAS,IACHC,EAAQV,EAAAU,SACRC,EAAKX,EAAAW,MACAC,EAAQZ,EAAAa,IACVC,EAAcC,EAAAf,EAXG,oHAkCdgB,EAAWC,EAA0B,MACrCJ,EAAMD,QAAAA,EAAYI,EAElBE,EAAUC,EAAMC,YAAY,oBAChB,QAAXpB,EAAAa,EAAIQ,eAAO,IAAArB,OAAA,EAAAA,EAAEsB,aAAa,WAC/BC,QAAQC,IAAI,iBACD,QAAXrB,EAAAU,EAAIQ,mBAAOlB,GAAAA,EAAEsB,QACTvB,GACFA,IAEJ,EAAG,CAACA,EAAeW,IA6BnB,OA3BAa,EAAU,WACR,IAAMC,EAAa,SAACC,GACA,WAAdA,EAAMC,KACRX,GAEJ,EACA,GAAsB,oBAAXY,OAMX,OAHAC,SAASC,KAAKC,MAAMC,SAAW,SAC/BH,SAASI,iBAAiB,UAAWR,GAE9B,WACiB,oBAAXG,SAGXC,SAASC,KAAKC,MAAMC,SAAW,QAC/BH,SAASK,oBAAoB,UAAWT,GAC1C,CACF,EAAG,CAACT,IAEJQ,EAAU,WACJtB,GAAaS,GAAOA,EAAIQ,SAC1BR,EAAIQ,QAAQgB,WAEhB,EAAG,CAACjC,EAAWS,IAGbM,EAAAmB,cAAAnB,EAAAoB,SAAA,KACEpB,EAAAmB,cAAA,SAAAE,EAAA,CACE3B,IAAKA,EACL4B,UAAW,CAAC,kBAAmB,gBAAiB,gBAAgBC,KAC9D,KACD,aACU,OAAM,aACLzC,EACZ0C,MAAM,EAAK,mBACOnC,EAClByB,MAAO,CACLvB,SAAQA,EACRD,IAAGA,EACHE,MAAKA,IAEHG,GAEHT,GAAmBH,EAClBiB,EAAAmB,cAACM,EAAM,CACLH,UAAU,gCAA+B,aAC9B,QACXI,WAAW,WACXC,QAAS,WACP5B,GACF,GAEAC,EAAAmB,cAACS,EAAM,CAACC,OAAQC,KAEhB,KACH3C,GAIT"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, {\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { faClose } from \"@fortawesome/free-solid-svg-icons\";\n\nimport { IconFa } from \"../IconFa\";\n\nimport Button from \"../Button\";\n\n/**\n *\n * Use a modal to display content over top of the rest of the site which must be interacted with before the user can continue.\n * ## How modals work\n * - Modals are positioned over everything else in the document and remove scroll from the \"body\" tag so that modal content scrolls instead.\n * - Modals are unmounted when closed.\n * - Modal's \"trap\" focus in them, ensuring the keyboard navigation cycles through the modal, and not the rest of the page.\n * ## Accessibility\n * - Once the Modal is appeared on the screen, the focus must be within the Modal container which will enable the screen readers to be able to navigate within the Modal.\n * You may wish to hide the close button so that a user must click on another button to confirm a choice before the modal is closed. However closing with the 'ESC' key must always work,\n * so the props which contains the function that allows the modal to close itself 'closeFunction' is always required.\n */\nexport function Modal({\n  modalName,\n  startOpen = true,\n  isAnimated = true,\n  closeFunction,\n  showCloseButton,\n  children,\n  ref: outerRef,\n  style,\n  ...htmlAttributes\n}: HTMLAttributes<HTMLDialogElement> & {\n  /** modal name used for aria-label */\n  modalName: string;\n  /** set if the modal start open */\n  startOpen: boolean;\n  /** callback function called on modal close */\n  closeFunction?: () => void;\n  /** flag to reveal close button with cross in the top right of modal */\n  showCloseButton?: boolean;\n  /** turn on animate in modal */\n  isAnimated?: boolean;\n  /** children components inside modal */\n  children?: ReactNode;\n  /** ref to the dialog element */\n  ref?: React.RefObject<HTMLDialogElement | null>;\n  /** additional style attributes for the dialog element */\n  style?: React.CSSProperties;\n}) {\n  const innerRef = useRef<HTMLDialogElement>(null);\n  const ref = outerRef ?? innerRef;\n\n  const doClose = React.useCallback((): void => {\n    if (!ref.current?.hasAttribute(\"open\")) return;\n    console.log(\"closing modal\");\n    ref.current?.close();\n    if (closeFunction) {\n      closeFunction();\n    }\n  }, [closeFunction, ref]);\n\n  useEffect(() => {\n    const closeByEsc = (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\") {\n        doClose();\n      }\n    };\n    if (typeof window === `undefined`) {\n      return undefined;\n    }\n    document.body.style.overflow = \"hidden\";\n    document.addEventListener(\"keydown\", closeByEsc);\n\n    return () => {\n      if (typeof window === `undefined`) {\n        return;\n      }\n      document.body.style.overflow = \"unset\";\n      document.removeEventListener(\"keydown\", closeByEsc);\n    };\n  }, [doClose]);\n\n  useEffect(() => {\n    if (startOpen && ref && ref.current) {\n      ref.current.showModal();\n    }\n  }, [startOpen, ref]);\n\n  return (\n    <>\n      <dialog\n        ref={ref}\n        className={[\"component-modal\", \"spacing-props\", \"colour-props\"].join(\n          \" \",\n        )}\n        aria-modal=\"true\"\n        aria-label={modalName}\n        open={false}\n        data-is-animated={isAnimated}\n        style={style}\n        {...htmlAttributes}\n      >\n        {showCloseButton || closeFunction ? (\n          <Button\n            className=\"component-button close-button\"\n            aria-label=\"close\"\n            appearance=\"tertiary\"\n            onClick={() => {\n              doClose();\n            }}\n          >\n            <IconFa faIcon={faClose} />\n          </Button>\n        ) : null}\n        {children}\n      </dialog>\n    </>\n  );\n}\n\nexport default Modal;\n"],"names":["Modal","_a","modalName","_b","startOpen","_c","isAnimated","closeFunction","showCloseButton","children","outerRef","ref","style","htmlAttributes","__rest","innerRef","useRef","doClose","React","useCallback","current","hasAttribute","console","log","close","useEffect","closeByEsc","event","key","window","document","body","overflow","addEventListener","removeEventListener","showModal","createElement","Fragment","__assign","className","join","open","Button","appearance","onClick","IconFa","faIcon","faClose"],"mappings":"oTAwBM,SAAUA,EAAMC,GACpB,IAAAC,EAASD,EAAAC,UACTC,EAAAF,EAAAG,UAAAA,OAAS,IAAAD,GAAOA,EAChBE,EAAAJ,EAAAK,WAAAA,OAAU,IAAAD,GAAOA,EACjBE,EAAaN,EAAAM,cACbC,EAAeP,EAAAO,gBACfC,aACKC,EAAQT,EAAAU,IACbC,EAAKX,EAAAW,MACFC,EAAcC,EAAAb,EATG,mGA4Bdc,EAAWC,EAA0B,MACrCL,EAAMD,QAAAA,EAAYK,EAElBE,EAAUC,EAAMC,YAAY,oBAChB,QAAXlB,EAAAU,EAAIS,eAAO,IAAAnB,OAAA,EAAAA,EAAEoB,aAAa,WAC/BC,QAAQC,IAAI,iBACD,QAAXpB,EAAAQ,EAAIS,mBAAOjB,GAAAA,EAAEqB,QACTjB,GACFA,IAEJ,EAAG,CAACA,EAAeI,IA6BnB,OA3BAc,EAAU,WACR,IAAMC,EAAa,SAACC,GACA,WAAdA,EAAMC,KACRX,GAEJ,EACA,GAAsB,oBAAXY,OAMX,OAHAC,SAASC,KAAKnB,MAAMoB,SAAW,SAC/BF,SAASG,iBAAiB,UAAWP,GAE9B,WACiB,oBAAXG,SAGXC,SAASC,KAAKnB,MAAMoB,SAAW,QAC/BF,SAASI,oBAAoB,UAAWR,GAC1C,CACF,EAAG,CAACT,IAEJQ,EAAU,WACJrB,GAAaO,GAAOA,EAAIS,SAC1BT,EAAIS,QAAQe,WAEhB,EAAG,CAAC/B,EAAWO,IAGbO,EAAAkB,cAAAlB,EAAAmB,SAAA,KACEnB,EAAAkB,cAAA,SAAAE,EAAA,CACE3B,IAAKA,EACL4B,UAAW,CAAC,kBAAmB,gBAAiB,gBAAgBC,KAC9D,KACD,aACU,OAAM,aACLtC,EACZuC,MAAM,EAAK,mBACOnC,EAClBM,MAAOA,GACHC,GAEHL,GAAmBD,EAClBW,EAAAkB,cAACM,EAAM,CACLH,UAAU,gCAA+B,aAC9B,QACXI,WAAW,WACXC,QAAS,WACP3B,GACF,GAEAC,EAAAkB,cAACS,EAAM,CAACC,OAAQC,KAEhB,KACHtC,GAIT"}

package/lib/src/components/PopOver/index.js

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import o,{useId as t,useRef as n}from"react";function a(a){var r=a.onPopOverIsOpenChange,i=a.children,l=a.position,d=a.modalLabel,m=a.modalContent,p=a.style,s=a.isAnimated,c=void 0===s||s,u=t(),v=n(null),f=n(!1);function b(){r&&!f.current&&(r(!0),f.current=!0)}return o.createElement("div",{className:"component-popover","data-position":l||"top","data-is-animated":c},o.Children.map(i,function(e){return o.cloneElement(e,{popovertarget:u,onClick:b})}),o.createElement("dialog",{popover:"auto",id:u,ref:v,role:"dialog",style:e({},p),"data-is-animated":c,"aria-label":d},m))}export{a as PopOver};
+import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import o,{useId as t,useRef as n}from"react";function a(a){var r=a.onPopOverIsOpenChange,i=a.children,l=a.position,d=a.modalLabel,m=a.modalContent,p=a.style,s=a.isAnimated,c=void 0===s||s,u=t(),v=n(null),f=n(!1);function b(){r&&!f.current&&(r(!0),f.current=!0)}return o.createElement("div",{className:"component-popover","data-position":l||"top","data-is-animated":c},o.Children.map(i,function(e){return o.cloneElement(e,{popoverTarget:u,onClick:b})}),o.createElement("dialog",{popover:"auto",id:u,ref:v,role:"dialog",style:e({},p),"data-is-animated":c,"aria-label":d},m))}export{a as PopOver};
 //# sourceMappingURL=index.js.map

package/lib/src/components/PopOver/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/PopOver/index.tsx"],"sourcesContent":["import React, {\n  useRef,\n  useId,\n  type ReactNode,\n  type DetailedReactHTMLElement,\n} from \"react\";\n\nimport { type PopOverPositionType } from \"../../types\";\n\nexport type PopOverProps = {\n  /** modalLabel: used for aria-label of modal */\n  modalLabel: string;\n  /** modalContent: contents in side the popover modal */\n  modalContent: ReactNode;\n  /** position: position that the popover opens relative to the triggering element, the trigger element is the child of the component */\n  position?: PopOverPositionType;\n  /**  onPopOverIsOpenChange: popover isOpen changed handler */\n  onPopOverIsOpenChange?: (isOpen: boolean) => void;\n  /** enable animation in modal */\n  isAnimated?: boolean;\n  children?: ReactNode;\n  style?: React.CSSProperties;\n};\n\n/**\n * Popover is a non-modal dialog that floats around its disclosure. It's\ncommonly used for displaying additional rich content on top of something.\n*/\nexport function PopOver({\n  onPopOverIsOpenChange,\n  children,\n  position,\n  modalLabel,\n  modalContent,\n  style,\n  isAnimated = true,\n}: PopOverProps) {\n  const id = useId();\n  const popRef = useRef<HTMLDialogElement>(null);\n  const hasOpenedRef = useRef(false);\n\n  function handleClick() {\n    if (onPopOverIsOpenChange && !hasOpenedRef.current) {\n      onPopOverIsOpenChange(true);\n      hasOpenedRef.current = true;\n    }\n  }\n\n  return (\n    <div\n      className=\"component-popover\"\n      data-position={position || \"top\"}\n      data-is-animated={isAnimated}\n    >\n      {React.Children.map(children, (child) =>\n        React.cloneElement(\n          child as DetailedReactHTMLElement<object, HTMLElement>,\n          {\n            popovertarget: id,\n            onClick: handleClick,\n          },\n        ),\n      )}\n\n      <dialog\n        popover=\"auto\"\n        id={id}\n        ref={popRef}\n        role=\"dialog\"\n        style={{\n          ...style,\n        }}\n        data-is-animated={isAnimated}\n        aria-label={modalLabel}\n      >\n        {modalContent}\n      </dialog>\n    </div>\n  );\n}\n\nexport default PopOver;\n"],"names":["PopOver","_a","onPopOverIsOpenChange","children","position","modalLabel","modalContent","style","_b","isAnimated","id","useId","popRef","useRef","hasOpenedRef","handleClick","current","React","createElement","className","Children","map","child","cloneElement","popovertarget","onClick","popover","ref","role","__assign"],"mappings":"iHA4BM,SAAUA,EAAQC,OACtBC,EAAqBD,EAAAC,sBACrBC,EAAQF,EAAAE,SACRC,EAAQH,EAAAG,SACRC,EAAUJ,EAAAI,WACVC,EAAYL,EAAAK,aACZC,EAAKN,EAAAM,MACLC,eAAAC,OAAU,IAAAD,GAAOA,EAEXE,EAAKC,IACLC,EAASC,EAA0B,MACnCC,EAAeD,GAAO,GAE5B,SAASE,IACHb,IAA0BY,EAAaE,UACzCd,GAAsB,GACtBY,EAAaE,SAAU,EAE3B,CAEA,OACEC,EAAAC,cAAA,MAAA,CACEC,UAAU,oCACKf,GAAY,MAAK,mBACdK,GAEjBQ,EAAMG,SAASC,IAAIlB,EAAU,SAACmB,GAC7B,OAAAL,EAAMM,aACJD,EACA,CACEE,cAAed,EACfe,QAASV,GAJb,GASFE,EAAAC,cAAA,SAAA,CACEQ,QAAQ,OACRhB,GAAIA,EACJiB,IAAKf,EACLgB,KAAK,SACLrB,MAAKsB,EAAA,GACAtB,GAAK,mBAEQE,EAAU,aAChBJ,GAEXC,GAIT"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/PopOver/index.tsx"],"sourcesContent":["import React, {\n  useRef,\n  useId,\n  type ReactNode,\n  type DetailedReactHTMLElement,\n} from \"react\";\n\nimport { type PopOverPositionType } from \"../../types\";\n\nexport type PopOverProps = {\n  /** modalLabel: used for aria-label of modal */\n  modalLabel: string;\n  /** modalContent: contents in side the popover modal */\n  modalContent: ReactNode;\n  /** position: position that the popover opens relative to the triggering element, the trigger element is the child of the component */\n  position?: PopOverPositionType;\n  /**  onPopOverIsOpenChange: popover isOpen changed handler */\n  onPopOverIsOpenChange?: (isOpen: boolean) => void;\n  /** enable animation in modal */\n  isAnimated?: boolean;\n  children?: ReactNode;\n  style?: React.CSSProperties;\n};\n\n/**\n * Popover is a non-modal dialog that floats around its disclosure. It's\ncommonly used for displaying additional rich content on top of something.\n*/\nexport function PopOver({\n  onPopOverIsOpenChange,\n  children,\n  position,\n  modalLabel,\n  modalContent,\n  style,\n  isAnimated = true,\n}: PopOverProps) {\n  const id = useId();\n  const popRef = useRef<HTMLDialogElement>(null);\n  const hasOpenedRef = useRef(false);\n\n  function handleClick() {\n    if (onPopOverIsOpenChange && !hasOpenedRef.current) {\n      onPopOverIsOpenChange(true);\n      hasOpenedRef.current = true;\n    }\n  }\n\n  return (\n    <div\n      className=\"component-popover\"\n      data-position={position || \"top\"}\n      data-is-animated={isAnimated}\n    >\n      {React.Children.map(children, (child) =>\n        React.cloneElement(\n          child as DetailedReactHTMLElement<object, HTMLElement>,\n          {\n            popoverTarget: id,\n            onClick: handleClick,\n          },\n        ),\n      )}\n\n      <dialog\n        popover=\"auto\"\n        id={id}\n        ref={popRef}\n        role=\"dialog\"\n        style={{\n          ...style,\n        }}\n        data-is-animated={isAnimated}\n        aria-label={modalLabel}\n      >\n        {modalContent}\n      </dialog>\n    </div>\n  );\n}\n\nexport default PopOver;\n"],"names":["PopOver","_a","onPopOverIsOpenChange","children","position","modalLabel","modalContent","style","_b","isAnimated","id","useId","popRef","useRef","hasOpenedRef","handleClick","current","React","createElement","className","Children","map","child","cloneElement","popoverTarget","onClick","popover","ref","role","__assign"],"mappings":"iHA4BM,SAAUA,EAAQC,OACtBC,EAAqBD,EAAAC,sBACrBC,EAAQF,EAAAE,SACRC,EAAQH,EAAAG,SACRC,EAAUJ,EAAAI,WACVC,EAAYL,EAAAK,aACZC,EAAKN,EAAAM,MACLC,eAAAC,OAAU,IAAAD,GAAOA,EAEXE,EAAKC,IACLC,EAASC,EAA0B,MACnCC,EAAeD,GAAO,GAE5B,SAASE,IACHb,IAA0BY,EAAaE,UACzCd,GAAsB,GACtBY,EAAaE,SAAU,EAE3B,CAEA,OACEC,EAAAC,cAAA,MAAA,CACEC,UAAU,oCACKf,GAAY,MAAK,mBACdK,GAEjBQ,EAAMG,SAASC,IAAIlB,EAAU,SAACmB,GAC7B,OAAAL,EAAMM,aACJD,EACA,CACEE,cAAed,EACfe,QAASV,GAJb,GASFE,EAAAC,cAAA,SAAA,CACEQ,QAAQ,OACRhB,GAAIA,EACJiB,IAAKf,EACLgB,KAAK,SACLrB,MAAKsB,EAAA,GACAtB,GAAK,mBAEQE,EAAU,aAChBJ,GAEXC,GAIT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cruk/cruk-react-components",
-  "version": "7.2.1",
+  "version": "7.2.3",
   "description": "React components implementing CRUK, RFL, SU2C & Bowelbabe designs",
   "license": "MIT",
   "publishConfig": {
@@ -49,7 +49,7 @@
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/plugin-typescript": "^12.0.0",
     "@swc/core": "1.9.3",
     "@storybook/addon-a11y": "^10",
     "@storybook/addon-docs": "^10",