@cruk/cruk-react-components 7.2.2 → 7.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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,{
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +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
|
|
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"}
|