components-tooltip-container-stories.f5d66413.iframe.bundle.js

(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[5163],{"../../node_modules/@storybook/addon-docs/dist/index.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{H2:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.H2,Hl:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Hl,Pd:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Pd,Tn:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Tn,VY:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.VY,W8:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.W8,fy:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.fy,gG:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.gG,hE:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.hE,oz:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.oz});__webpack_require__("../../node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs");var _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@storybook/blocks/dist/index.mjs")},"./.storybook/interactive-docs-page.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{f:()=>InteractiveDocsPage});var _storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/index.mjs"),prop_types__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("../../node_modules/react/jsx-runtime.js"));const InteractiveDocsPage=({stories})=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.hE,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.Pd,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.VY,{of:"meta"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.VY,{of:"story"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.Tn,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.H2,{}),stories.map(((story,index)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.fy,{of:story},(null==story?void 0:story.name)||`story-${index}`)))]});InteractiveDocsPage.propTypes={stories:prop_types__WEBPACK_IMPORTED_MODULE_3___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_3___default().object,prop_types__WEBPACK_IMPORTED_MODULE_3___default().func]))},InteractiveDocsPage.defaultProps={stories:[]},InteractiveDocsPage.__docgenInfo={description:"An alternative version of the Storybook DocsPage component.\n\nReplacing the Stories component with individual DocsStory components.\nThis prevents Stories from passing `__forceInitialArgs` to the DocsStory components.\nWhich makes the stories are interactive on the docs page, making the `args` more like initial values.\n\n@param {(Object|function)[]} [stories] The stories to display.\n@returns {JSX.Element} The DocsPage component without stories.",methods:[],displayName:"InteractiveDocsPage",props:{stories:{defaultValue:{value:"[]",computed:!1},description:"",type:{name:"arrayOf",value:{name:"union",value:[{name:"object"},{name:"func"}]}},required:!1}}}},"./src/components/tooltip-container/stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Factory:()=>Factory,Trigger:()=>Trigger,WithContext:()=>WithContext,WithFlex:()=>WithFlex,default:()=>stories});var react=__webpack_require__("../../node_modules/react/index.js"),interactive_docs_page=__webpack_require__("./.storybook/interactive-docs-page.js");var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),lodash=__webpack_require__("../../node_modules/lodash/lodash.js"),prop_types=__webpack_require__("./node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),tooltip=__webpack_require__("./src/elements/tooltip/index.js"),use_toggle_state=__webpack_require__("./src/hooks/use-toggle-state.js"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const TooltipContext=(0,react.createContext)({isVisible:!1,show:lodash.noop,hide:lodash.noop,tooltipPosition:{},setTooltipPosition:lodash.noop}),useTooltipContext=()=>(0,react.useContext)(TooltipContext),TooltipContainer=({as:Component="span",className,children})=>{const[isVisible,,,show,hide]=(0,use_toggle_state.A)(!1),[tooltipPosition,setTooltipPosition]=(0,react.useState)({}),handleKeyDown=(0,react.useCallback)((event=>{"Escape"===event.key&&isVisible&&(hide(),event.stopPropagation())}),[isVisible,hide]),contextValue=(0,react.useMemo)((()=>({isVisible,show,hide,tooltipPosition,setTooltipPosition})),[isVisible,show,hide,tooltipPosition]);return(0,jsx_runtime.jsx)(TooltipContext.Provider,{value:contextValue,children:(0,jsx_runtime.jsx)(Component,{className:classnames_default()("yst-tooltip-container",className),onKeyDown:handleKeyDown,children})})};TooltipContainer.displayName="TooltipContainer",TooltipContainer.propTypes={as:prop_types_default().elementType,children:prop_types_default().node,className:prop_types_default().string};const TooltipTrigger=({as:Component="button",className,children,ariaDescribedby,...props})=>{const{show,hide,tooltipPosition,isVisible}=useTooltipContext(),triggerRef=(0,react.useRef)();return(0,react.useEffect)((()=>{const handlePointerMove=(0,lodash.debounce)((event=>{const rect=triggerRef.current.getBoundingClientRect(),extendedRect_top=rect.top-10,extendedRect_right=rect.right+10,extendedRect_bottom=rect.bottom+10,extendedRect_left=rect.left-10,mouseX=event.clientX,mouseY=event.clientY,outsideTooltip=mouseX<tooltipPosition.left||mouseX>tooltipPosition.right||mouseY<tooltipPosition.top||mouseY>tooltipPosition.bottom;(mouseX<extendedRect_left||mouseX>extendedRect_right||mouseY<extendedRect_top||mouseY>extendedRect_bottom)&&document.activeElement!==triggerRef.current&&outsideTooltip?hide():show()}),100);return document.addEventListener("pointermove",handlePointerMove),()=>{document.removeEventListener("pointermove",handlePointerMove),handlePointerMove.cancel()}}),[show,hide,triggerRef.current,tooltipPosition,isVisible]),(0,jsx_runtime.jsx)(Component,{ref:triggerRef,className:classnames_default()("yst-tooltip-trigger",className),"aria-describedby":ariaDescribedby,"aria-disabled":!0,...props,children})};TooltipTrigger.displayName="TooltipTrigger",TooltipTrigger.propTypes={as:prop_types_default().elementType,children:prop_types_default().node,className:prop_types_default().string,ariaDescribedby:prop_types_default().string};const TooltipWithContext=({className,children,...props})=>{const{isVisible,setTooltipPosition}=useTooltipContext(),tooltipRef=(0,react.useRef)();return(0,react.useEffect)((()=>{const rect=tooltipRef.current.getBoundingClientRect();setTooltipPosition({top:rect.top,right:rect.right,bottom:rect.bottom,left:rect.left})}),[tooltipRef.current,setTooltipPosition,isVisible]),(0,jsx_runtime.jsx)(tooltip.A,{ref:tooltipRef,className:classnames_default()(className,{"yst-hidden":!isVisible}),...props,children})};TooltipWithContext.displayName="TooltipWithContext",TooltipWithContext.propTypes={className:prop_types_default().string,children:prop_types_default().node},TooltipContainer.__docgenInfo={description:'Manages the visibility of the tooltip.\n- It provides the isVisible boolean and show and hide functions.\n- It adds a keydown event listener to hide the tooltip when the user presses Escape.\n- It contains the styling to center and control the tooltip visibility.\n@param {JSX.ElementClass} [as="span"] Base component.\n@param {string} [className] CSS class.\n@param {JSX.node} [children] The tooltip trigger and tooltip.\n@returns {JSX.Element} The element.',methods:[],displayName:"TooltipContainer",props:{as:{defaultValue:{value:'"span"',computed:!1},description:"",type:{name:"elementType"},required:!1},children:{description:"",type:{name:"node"},required:!1},className:{description:"",type:{name:"string"},required:!1}}},TooltipTrigger.__docgenInfo={description:'Wraps the content that should trigger the tooltip in a focusable element.\n- It ensures that the tooltip is shown on focus and mouse enter.\n- It adds the aria-describedby attribute to associate the tooltip with the trigger.\n- It adds the aria-disabled attribute to indicate the trigger is not actually doing anything.\n- It has styling for keyboard focus and none for hover.\n@param {string|JSX.node} [as="button"] Base component. Needs to be focusable.\n@param {string} [className] CSS class.\n@param {JSX.node} [children] What the tooltip should center on.\n@param {string} [ariaDescribedby] The ID of the tooltip, so that screen readers can associate the tooltip with the trigger.\n@param {Object} [props] Additional props.\n@returns {JSX.Element} The element.',methods:[],displayName:"TooltipTrigger",props:{as:{defaultValue:{value:'"button"',computed:!1},description:"",type:{name:"elementType"},required:!1},children:{description:"",type:{name:"node"},required:!1},className:{description:"",type:{name:"string"},required:!1},ariaDescribedby:{description:"",type:{name:"string"},required:!1}}},TooltipWithContext.__docgenInfo={description:"Wraps the Tooltip element.\n- It gets the `isVisible` from the context.\n- It hides the Tooltip via the `yst-hidden` className when `isVisible` is false.\n- It forwards any props to the Tooltip element.\n@param {string} [className] CSS class.\n@param {JSX.node} [children] What the tooltip should center on.\n@param {Object} [props] Additional props.\n@returns {JSX.Element} The element.",methods:[],displayName:"TooltipWithContext",props:{className:{description:"",type:{name:"string"},required:!1},children:{description:"",type:{name:"node"},required:!1}}};const Factory={parameters:{controls:{disable:!1}},render:()=>(0,jsx_runtime.jsxs)(TooltipContainer,{children:[(0,jsx_runtime.jsx)(TooltipTrigger,{ariaDescribedby:"tooltip-factory",children:"Element containing a tooltip."}),(0,jsx_runtime.jsx)(TooltipWithContext,{id:"tooltip-factory",children:"I'm a tooltip"})]})},Trigger={name:"TooltipTrigger",render:args=>(0,jsx_runtime.jsx)(TooltipTrigger,{...args}),parameters:{controls:{disable:!1}},args:{children:"Element containing a tooltip.",ariaDescribedby:"tooltip-trigger"},decorators:[(Story,args)=>(0,jsx_runtime.jsxs)(TooltipContainer,{children:[(0,jsx_runtime.jsx)(Story,{}),(0,jsx_runtime.jsx)(TooltipWithContext,{id:args.ariaDescribedby,children:"I'm a tooltip"})]})]},WithContext={name:"TooltipWithContext",render:args=>(0,jsx_runtime.jsx)(TooltipWithContext,{...args}),parameters:{controls:{disable:!1}},args:{id:"tooltip",children:"I'm a tooltip"},decorators:[(Story,args)=>(0,jsx_runtime.jsxs)(TooltipContainer,{children:[(0,jsx_runtime.jsx)(TooltipTrigger,{ariaDescribedby:args.id,children:"Element containing a tooltip."}),(0,jsx_runtime.jsx)(Story,{})]})]},WithFlex={name:"With display flex",render:args=>(0,jsx_runtime.jsx)(TooltipWithContext,{...args}),parameters:{controls:{disable:!1},docs:{description:{story:"The TooltipWithContext renders the Tooltip element directly.\nMeaning that adding style could mean overriding the Tooltip style.\n\nFor example the `display` if you want to use `diplay: flex`.\nHere is an example, that solves this by adding a container inside.\n"}}},args:{id:"tooltip",children:(0,jsx_runtime.jsxs)("div",{className:"yst-flex yst-flex-col",children:[(0,jsx_runtime.jsx)("span",{children:"Row one"}),(0,jsx_runtime.jsx)("span",{children:"Row two"})]})},decorators:[(Story,args)=>(0,jsx_runtime.jsxs)(TooltipContainer,{children:[(0,jsx_runtime.jsx)(TooltipTrigger,{ariaDescribedby:args.id,children:"Element containing a tooltip."}),(0,jsx_runtime.jsx)(Story,{})]})]},stories={title:"2) Components/Tooltip Container",component:TooltipContainer,argTypes:{as:{control:{type:"select"},options:["span","div"],table:{type:{summary:"span | div"},defaultValue:{summary:"span"}}}},parameters:{docs:{description:{component:"Tooltips provide contextual information about an element when that owning element receives focus or is hovered over, but are otherwise not visible. They are displayed as small boxes containing a brief label or message. See the Tooltip elements.\n\nHowever, to get a fully functioning experience, with regards to accessibility, the Tooltip needs more. The following are the requirements for the Tooltip:\n* The Tooltip should be visible when the element that triggers the Tooltip is focused. And it should be hidden when the element is blurred.\n* The Tooltip should be visible when the element that triggers the Tooltip is hovered over. And it should be hidden when the element is no longer hovered over.\n* The Tooltip should be hidden when the user presses the `Escape` key, regardless of focus or hover.\n\nThat is what this **TooltipContainer**, the **TooltipTrigger** and the **TooltipWithContext** components are for.\n\nThe **TooltipContainer** is the parent component that wraps the TooltipTrigger and the Tooltip components. It manages the visibility of the Tooltip.\n* It provides the `isVisible` boolean and `show` and `hide` functions.\n* It adds a `keydown` event listener to hide the tooltip when the user presses `Escape`.\n* It contains the styling to center and control the tooltip visibility.\n\nThe **TooltipTrigger** wraps the content that should trigger the Tooltip in a focusable element.\n* It ensures that the tooltip is shown on focus and mouse enter.\n* It adds the `aria-describedby` attribute to associate the tooltip with the trigger.\n* It adds the `aria-disabled` attribute to indicate the trigger itself is not actually doing anything.\n* It has styling for keyboard focus (`focus-visible`) and none for hover.\n\nThe **TooltipWithContext** wraps the Tooltip element.\n* It gets the `isVisible` from the context.\n* It hides the Tooltip via the `yst-hidden` className when `isVisible` is false.\n* It forwards any props to the Tooltip element.\n\n**Note**: The tooltip is the same element, so if you want to override styling like `display`. You should add a container inside.\n"},page:()=>(0,jsx_runtime.jsx)(interactive_docs_page.f,{stories:[Trigger,WithContext,WithFlex]})}},decorators:[Story=>(0,jsx_runtime.jsx)("div",{className:"yst-m-20",children:(0,jsx_runtime.jsx)(Story,{})})]}},"./src/elements/tooltip/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),prop_types__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const positionClassNameMap={top:"yst-tooltip--top",right:"yst-tooltip--right",bottom:"yst-tooltip--bottom",left:"yst-tooltip--left"},variantClassNameMap={light:"yst-tooltip--light",dark:""},Tooltip=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({children,as:Component,className,position,...props},ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Component,{ref,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-tooltip",positionClassNameMap[position],variantClassNameMap[props.variant],className),role:"tooltip",...props,children})));Tooltip.displayName="Tooltip",Tooltip.propTypes={as:prop_types__WEBPACK_IMPORTED_MODULE_3___default().elementType,children:prop_types__WEBPACK_IMPORTED_MODULE_3___default().node,className:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string,position:prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOf(Object.keys(positionClassNameMap)),variant:prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOf(Object.keys(variantClassNameMap))},Tooltip.defaultProps={as:"div",children:null,className:"",position:"top",variant:"dark"};const __WEBPACK_DEFAULT_EXPORT__=Tooltip;Tooltip.__docgenInfo={description:"@param {JSX.node} children Content of the tooltip.\n@param {string|JSX.Element} [as] Base component.\n@param {string} [className] CSS class.\n@param {string} [position] Position of the tooltip.\n@param {string} [variant] Variant of the tooltip.\n@returns {JSX.Element} Tooltip component.",methods:[],displayName:"Tooltip",props:{as:{defaultValue:{value:'"div"',computed:!1},description:"",type:{name:"elementType"},required:!1},children:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"node"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},position:{defaultValue:{value:'"top"',computed:!1},description:"",type:{name:"enum",value:[{value:'"top"',computed:!1},{value:'"right"',computed:!1},{value:'"bottom"',computed:!1},{value:'"left"',computed:!1}]},required:!1},variant:{defaultValue:{value:'"dark"',computed:!1},description:"",type:{name:"enum",value:[{value:'"light"',computed:!1},{value:'"dark"',computed:!1}]},required:!1}}}},"./src/hooks/use-toggle-state.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js");const __WEBPACK_DEFAULT_EXPORT__=(initialState=!0)=>{const[state,setState]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(initialState),toggleState=(0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((()=>setState(!state)),[state,setState]),setTrue=(0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((()=>setState(!0)),[setState]),setFalse=(0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((()=>setState(!1)),[setState]);return[state,toggleState,setState,setTrue,setFalse]}},"../../node_modules/memoizerific sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="../../node_modules/memoizerific sync recursive",module.exports=webpackEmptyContext}}]);