koval-ui/dist/src/lib/Iframe/Iframe.cjs.map

React components collection with minimalistic design. Supports theming, layout, and input validation.

{"version":3,"file":"Iframe.cjs","sources":["../../../../src/lib/Iframe/Iframe.tsx"],"sourcesContent":["import type {\n    ReactNode,\n    HTMLAttributeReferrerPolicy,\n    IframeHTMLAttributes,\n    SyntheticEvent,\n} from 'react';\nimport {useCallback} from 'react';\nimport {useState} from 'react';\nimport {useMemo} from 'react';\nimport {forwardRef} from 'react';\nimport classNames from 'classnames';\nimport {useLocalTheme} from 'css-vars-hook';\n\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\nimport {SkeletonShape} from '@/lib/Skeleton';\n\nimport classes from './Iframe.module.css';\nimport type {SandboxConfig, PermissionsConfig} from './types.ts';\nimport {convertPermissions} from './convertPermissions.ts';\n\nexport type Props = DataAttributes &\n    LibraryProps & {\n        children?: ReactNode;\n        /** Provide an url of the embedded page */\n        src?: string;\n        /**\n         * Provide custom HTML for the iframe.\n         * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/srcdoc\n         */\n        srcDoc?: string;\n        /**\n         * Set the width of the iframe in pixels.\n         * Responsive\n         * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/width\n         */\n        width: number;\n        /**\n         * Set the height of the iframe in pixels.\n         * Responsive\n         * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/height\n         */\n        height: number;\n        /**\n         * Define which referrer is sent when fetching the resource.\n         * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy\n         */\n        referrerPolicy?: HTMLAttributeReferrerPolicy;\n        /**\n         * Allow the iframe's contents to use requestFullscreen().\n         * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/allowFullscreen\n         */\n        allowFullScreen?: boolean;\n        /**\n         * Provide a unique name for the iframe.\n         * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/name\n         * @example\n         * <iframe id=\"el\" name=\"example\"></iframe>\n         * const el = document.getElementById(\"el\");\n         * console.log(el.name); // Output: \"example\"\n         */\n        name?: string;\n        /**\n         * Provide a title for accessibility\n         */\n        title?: string;\n        /**\n         * Set iframe loading behavior\n         * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/loading\n         */\n        loading?: IframeHTMLAttributes<unknown>['loading'];\n        /**\n         * Provide a SandboxConfig object.\n         * @see SandboxConfig\n         * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/sandbox\n         */\n        sandboxConfig?: SandboxConfig;\n        /**\n         * Provide a callback to capture iframe loaded event.\n         */\n        onLoad?: (event: SyntheticEvent<HTMLIFrameElement>) => void;\n        /**\n         * Provide a PermissionsConfig object.\n         * @see PermissionsConfig\n         * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/allow\n         */\n        permissionsConfig?: PermissionsConfig;\n    };\n\nexport const Iframe = forwardRef<HTMLIFrameElement, Props>(\n    (\n        {\n            children,\n            className,\n            src,\n            width,\n            height,\n            referrerPolicy,\n            allowFullScreen,\n            name,\n            title,\n            srcDoc,\n            loading,\n            sandboxConfig,\n            permissionsConfig,\n            onLoad = () => {},\n            ...nativeProps\n        },\n        ref\n    ) => {\n        const [isLoaded, setIsLoaded] = useState(false);\n\n        const handleLoad = useCallback(\n            (event: SyntheticEvent<HTMLIFrameElement>) => {\n                onLoad(event);\n                setIsLoaded(true);\n            },\n            [onLoad]\n        );\n\n        const sandbox =\n            sandboxConfig &&\n            Object.entries(sandboxConfig)\n                .filter(([_, value]) => value)\n                .map(([key]) => key)\n                .join(' ');\n\n        const allow = permissionsConfig && convertPermissions(permissionsConfig);\n\n        const theme = useMemo(\n            () => ({\n                height,\n                width,\n            }),\n            [height, width]\n        );\n\n        const {LocalRoot} = useLocalTheme();\n        return (\n            <LocalRoot theme={theme} className={classes.sizeContainer}>\n                <div className={classes.ratioContainer}>\n                    <iframe\n                        {...nativeProps}\n                        className={classNames(classes.iframe, className)}\n                        ref={ref}\n                        onLoad={handleLoad}\n                        loading={loading}\n                        name={name}\n                        width={width}\n                        height={height}\n                        src={src}\n                        title={title}\n                        srcDoc={srcDoc}\n                        allow={allow}\n                        referrerPolicy={referrerPolicy}\n                        allowFullScreen={allowFullScreen}\n                        sandbox={sandbox}\n                    />\n                    {!isLoaded && (\n                        <SkeletonShape\n                            width={width}\n                            height={height}\n                            borderRadius={0}\n                            className={classes.loader}\n                        />\n                    )}\n                </div>\n            </LocalRoot>\n        );\n    }\n);\n\nIframe.displayName = 'Iframe';\n"],"names":["Iframe","forwardRef","children","className","src","width","height","referrerPolicy","allowFullScreen","name","title","srcDoc","loading","sandboxConfig","permissionsConfig","onLoad","nativeProps","ref","isLoaded","setIsLoaded","useState","handleLoad","useCallback","event","sandbox","_","value","key","allow","convertPermissions","theme","useMemo","LocalRoot","useLocalTheme","jsx","classes","jsxs","classNames","SkeletonShape"],"mappings":"8TAwFaA,EAASC,EAAA,WAClB,CACI,CACI,SAAAC,EACA,UAAAC,EACA,IAAAC,EACA,MAAAC,EACA,OAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,KAAAC,EACA,MAAAC,EACA,OAAAC,EACA,QAAAC,EACA,cAAAC,EACA,kBAAAC,EACA,OAAAC,EAAS,IAAM,CAAC,EAChB,GAAGC,GAEPC,IACC,CACD,KAAM,CAACC,EAAUC,CAAW,EAAIC,EAAAA,SAAS,EAAK,EAExCC,EAAaC,EAAA,YACdC,GAA6C,CAC1CR,EAAOQ,CAAK,EACZJ,EAAY,EAAI,CACpB,EACA,CAACJ,CAAM,CACX,EAEMS,EACFX,GACA,OAAO,QAAQA,CAAa,EACvB,OAAO,CAAC,CAACY,EAAGC,CAAK,IAAMA,CAAK,EAC5B,IAAI,CAAC,CAACC,CAAG,IAAMA,CAAG,EAClB,KAAK,GAAG,EAEXC,EAAQd,GAAqBe,EAAA,mBAAmBf,CAAiB,EAEjEgB,EAAQC,EAAA,QACV,KAAO,CACH,OAAAzB,EACA,MAAAD,CAAA,GAEJ,CAACC,EAAQD,CAAK,CAClB,EAEM,CAAC,UAAA2B,CAAS,EAAIC,gBAAc,EAE9B,OAAAC,EAAAA,IAACF,EAAU,CAAA,MAAAF,EAAc,UAAWK,EAAA,QAAQ,cACxC,SAACC,EAAA,KAAA,MAAA,CAAI,UAAWD,EAAAA,QAAQ,eACpB,SAAA,CAAAD,EAAA,IAAC,SAAA,CACI,GAAGlB,EACJ,UAAWqB,EAAWF,UAAQ,OAAQhC,CAAS,EAC/C,IAAAc,EACA,OAAQI,EACR,QAAAT,EACA,KAAAH,EACA,MAAAJ,EACA,OAAAC,EACA,IAAAF,EACA,MAAAM,EACA,OAAAC,EACA,MAAAiB,EACA,eAAArB,EACA,gBAAAC,EACA,QAAAgB,CAAA,CACJ,EACC,CAACN,GACEgB,EAAA,IAACI,EAAA,cAAA,CACG,MAAAjC,EACA,OAAAC,EACA,aAAc,EACd,UAAW6B,EAAAA,QAAQ,MAAA,CAAA,CACvB,CAAA,CAER,CACJ,CAAA,CAAA,CAGZ,EAEAnC,EAAO,YAAc"}