Updates

assets/1_Introduction-fjwePAtR.js

@@ -0,0 +1,47 @@
+import{j as e}from"./jsx-runtime-AgcCsxC8.js";import"./blocks-i5o0VK9R.js";import{useMDXComponents as t}from"./index-7MmEg4M7.js";import{M as r}from"./index-9ylO3ihc.js";import"./index-XiNr8FW2.js";import"./_commonjsHelpers-5-cIlDoe.js";import"./iframe-tWVOrtVB.js";import"../sb-preview/runtime.js";import"./index-9vG4XYWr.js";import"./index-ogXoivrg.js";import"./index-mLPG47JP.js";import"./index-PPLHz8o0.js";function i(o){const n=Object.assign({h1:"h1",h2:"h2",p:"p",code:"code",ul:"ul",li:"li",strong:"strong",pre:"pre",h3:"h3",a:"a"},t(),o.components);return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Documentation/Introduction"}),`
+`,e.jsx(n.h1,{id:"react-bounded-overlay-manager",children:"React Bounded Overlay Manager"}),`
+`,e.jsx(n.h2,{id:"overview",children:"Overview"}),`
+`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"React Bounded Overlay Manager"})," is a React library designed to create and manage overlay components within a specified bounding container. It offers flexible positioning, dynamic show/hide behavior, customizable event handling, and an API for extended control."]}),`
+`,e.jsx(n.h2,{id:"key-features",children:"Key Features"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Flexible Positioning"}),": Utilize ",e.jsx(n.code,{children:"position"})," and ",e.jsx(n.code,{children:"offset"})," parameters within the Overlay component to achieve precise and strategic placement of overlays."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Dynamic Visibility"}),": Effortlessly configure the appearance and disappearance of overlays in response to user interactions, enhancing user experience and interface responsiveness."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Customizable Event Handling"}),": Tailor overlay visibility to align with specific application requirements. This includes the ability to control when overlays appear or disappear based on user interactions, system events, or custom triggers. Configure these settings to suit your application's behavior and user experience needs."]}),`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Extended Control via API"}),": Access the API for comprehensive control over overlay behavior, extending beyond the capabilities offered by component properties."]}),`
+`]}),`
+`,e.jsx(n.h2,{id:"installation",children:"Installation"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-bash",children:`npm install react-bounded-overlay-manager
+`})}),`
+`,e.jsx(n.h2,{id:"basic-example",children:"Basic Example"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-jsx",children:`import React, { useRef } from 'react';
+import BoundedOverlayManager, { Overlay, PredefinedPosition } from 'react-bounded-overlay-manager';
+
+const BasicExample = () => {
+  const boundingComponentRef = useRef(null);
+
+  return (
+    <div>
+      <div ref={boundingComponentRef} style={{ width: '70vw', height: '50vh', border: '1px solid black' }}>
+        Hover over this div to display overlays.
+      </div>
+      <BoundedOverlayManager boundingComponentRef={boundingComponentRef}>
+        <Overlay position={PredefinedPosition.BOTTOM_CENTER}>
+          <button>Overlay Button</button>
+        </Overlay>
+        <!-- more overlays here -->
+      </BoundedOverlayManager>
+    </div>
+  );
+};
+`})}),`
+`,e.jsx(n.h2,{id:"learn-more",children:"Learn More"}),`
+`,e.jsxs(n.p,{children:["For more detailed information on how to utilize ",e.jsx(n.code,{children:"React Bounded Overlay Manager"})," to its fullest, explore the following sections:"]}),`
+`,e.jsx(n.h3,{id:"components",children:"Components"}),`
+`,e.jsx(n.p,{children:"Dive into our interactive stories to uncover in-depth information on each component, complete with examples you can explore and interact with. These stories focus on advanced customization and control techniques, offering hands-on experience with the components:"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsx(n.li,{children:e.jsx(n.a,{href:"./?path=/docs/components-boundedoverlaymanager--docs",children:"BoundedOverlayManager"})}),`
+`,e.jsx(n.li,{children:e.jsx(n.a,{href:"./?path=/docs/components-overlay--docs",children:"Overlay"})}),`
+`]}),`
+`,e.jsx(n.h3,{id:"api-documentation",children:"API Documentation"}),`
+`,e.jsx(n.p,{children:"For a deeper dive into the specific methods and how they can be employed in your application, visit the API documentation."}),`
+`,e.jsx(n.p,{children:e.jsx(n.a,{href:"./?path=/docs/documentation-api-documentation--docs",children:"API Documentation"})})]})}function f(o={}){const{wrapper:n}=Object.assign({},t(),o.components);return n?e.jsx(n,Object.assign({},o,{children:e.jsx(i,o)})):i(o)}export{f as default};

assets/2_APIDocumentation-ow5LfkHs.js

@@ -0,0 +1,41 @@
+import{j as e}from"./jsx-runtime-AgcCsxC8.js";import"./blocks-i5o0VK9R.js";import{useMDXComponents as i}from"./index-7MmEg4M7.js";import{M as r}from"./index-9ylO3ihc.js";import"./index-XiNr8FW2.js";import"./_commonjsHelpers-5-cIlDoe.js";import"./iframe-tWVOrtVB.js";import"../sb-preview/runtime.js";import"./index-9vG4XYWr.js";import"./index-ogXoivrg.js";import"./index-mLPG47JP.js";import"./index-PPLHz8o0.js";function t(o){const n=Object.assign({h1:"h1",h2:"h2",p:"p",code:"code",pre:"pre",h3:"h3",ul:"ul",li:"li"},i(),o.components);return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Documentation/API Documentation"}),`
+`,e.jsx(n.h1,{id:"api-documentation-for-react-bounded-overlay-manager",children:"API Documentation for React Bounded Overlay Manager"}),`
+`,e.jsx(n.h2,{id:"introduction",children:"Introduction"}),`
+`,e.jsxs(n.p,{children:["This section provides detailed information about the API methods available in the ",e.jsx(n.code,{children:"React Bounded Overlay Manager"})," library."]}),`
+`,e.jsx(n.h2,{id:"using-the-api",children:"Using the API"}),`
+`,e.jsxs(n.p,{children:["To access the API, use the ",e.jsx(n.code,{children:"onApiUpdated"})," property of the ",e.jsx(n.code,{children:"BoundedOverlayManager"})," component. This callback returns an API object."]}),`
+`,e.jsx(n.p,{children:"Here's an example demonstrating how to use the API:"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-jsx",children:`const boundingComponentRef = useRef(null);
+const apiRef = useRef<BoundedOverlayManagerApi>();
+
+const onApiUpdated = (api: BoundedOverlayManagerApi) => {
+    apiRef.current = api;
+};
+
+return (
+    <>
+        <div ref={boundingComponentRef}>
+            Bounding Component
+        </div>
+        <button onClick={() => apiRef?.renderOverlays()}>Render Overlays</button>
+        <BoundedOverlayManager onApiUpdated={onApiUpdated} boundingComponentRef={boundingComponentRef} persistentlyShowOverlays={true}>
+            <Overlay position={PredefinedPosition.BOTTOM_CENTER}>
+                Overlay Content
+            </Overlay>
+        </BoundedOverlayManager>
+    </>
+)
+`})}),`
+`,e.jsx(n.h2,{id:"api-methods",children:"API Methods"}),`
+`,e.jsx(n.h3,{id:"renderoverlays",children:"renderOverlays()"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsx(n.li,{children:"Triggers the rendering of overlays. This method is effective for scenarios where system events do not automatically trigger overlay rendering."}),`
+`]}),`
+`,e.jsx(n.h3,{id:"clearoverlays",children:"clearOverlays()"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:["Triggers clearing of the currently displayed overlays, effective in cases where system events do not automatically lead to their hiding. Note, however, that it has no effect when ",e.jsx(n.code,{children:"persistentlyShowOverlays"})," is enabled, as overlays in this mode are intended to stay visible continuously."]}),`
+`]}),`
+`,e.jsx(n.h3,{id:"updateoverlayscontainerboundingbox",children:"updateOverlaysContainerBoundingBox()"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsx(n.li,{children:"Updates the bounding box of the overlays container. While the library automatically updates the bounding box during window resizing or direct resizing of the bounding component, there are other situations where a manual update is necessary to ensure accurate overlay positioning such as when the bounding component is repositioned."}),`
+`]})]})}function x(o={}){const{wrapper:n}=Object.assign({},i(),o.components);return n?e.jsx(n,Object.assign({},o,{children:e.jsx(t,o)})):t(o)}export{x as default};

assets/BoundedOverlayManager.stories-fD-ziWQ-.js

@@ -0,0 +1,33 @@
+import{j as e}from"./jsx-runtime-AgcCsxC8.js";import{r as u}from"./index-XiNr8FW2.js";import{B as l,O as t,P as s,D as v,a as p,b as c,c as m,d as y,e as O}from"./Overlay-Gmu5WiNu.js";import"./_commonjsHelpers-5-cIlDoe.js";import"./index-9vG4XYWr.js";const w={title:"Components/BoundedOverlayManager",component:l,parameters:{layout:"centered"},tags:["autodocs"],argTypes:{persistentlyShowOverlays:{description:"When set to true, overlays are always shown independent of the other factors."},boundingComponentRef:{control:!1,description:"Reference to the component relative to which overlays will be positioned."},overlaysShowTimeout:{description:"Time (in milliseconds) after which overlays will automatically hide, unless persistently shown. Set to NO_TIMEOUT or -1 to disable."},hideOverlaysOnMouseLeave:{description:"When enabled (true), overlays will hide as soon as the mouse leaves the bounding component."},showOverlaysOnMouseMove:{description:"When enabled (true), overlays will appear when the mouse moves on the bounding component."},skipAllSystemEvents:{description:"When set to true, all system events (like mouse movement) will be ignored in overlay behavior."},onApiUpdated:{control:!1,description:"Callback function that is called when the API updates. The updated API is passed as an argument to this function."},unmountContentWhenHidden:{description:"When set to true, the content of the overlay will be unmounted when the overlay is hidden."}}},f=d=>{const o=u.useRef(null),h={width:"70vw",height:"50vh",border:"1px solid black",display:"flex",justifyContent:"center",alignItems:"center",fontSize:"large"};return e.jsxs(e.Fragment,{children:[e.jsx("div",{ref:o,style:h,children:"Move the mouse over this div to show the overlays"}),e.jsxs(l,{boundingComponentRef:o,...d,children:[e.jsx(t,{position:s.BOTTOM_CENTER,offset:{bottom:"2vh"},children:e.jsx("button",{children:"Overlay Button"})}),e.jsx(t,{position:s.BOTTOM_RIGHT,offset:{bottom:"2vh",right:"2vw"},children:e.jsx("div",{style:{border:"2px solid black",padding:"2px"},children:"Overlay Div"})})]})]})},b={persistentlyShowOverlays:v,overlaysShowTimeout:p,hideOverlaysOnMouseLeave:c,showOverlaysOnMouseMove:m,skipAllSystemEvents:y,unmountContentWhenHidden:O},n=f.bind({});n.args={...b};var r,i,a;n.parameters={...n.parameters,docs:{...(r=n.parameters)==null?void 0:r.docs,source:{originalSource:`args => {
+  const boundingComponentRef = useRef(null);
+  const boundingComponentStyle: CSSProperties = {
+    width: '70vw',
+    height: '50vh',
+    border: '1px solid black',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    fontSize: 'large'
+  };
+  return <>
+      <div ref={boundingComponentRef} style={boundingComponentStyle}>
+        Move the mouse over this div to show the overlays
+      </div>
+      <BoundedOverlayManager boundingComponentRef={boundingComponentRef} {...args}>
+        <Overlay position={PredefinedPosition.BOTTOM_CENTER} offset={{
+        bottom: '2vh'
+      }}>
+          <button>Overlay Button</button>
+        </Overlay>
+        <Overlay position={PredefinedPosition.BOTTOM_RIGHT} offset={{
+        bottom: '2vh',
+        right: '2vw'
+      }}>
+          <div style={{
+          border: '2px solid black',
+          padding: '2px'
+        }}>Overlay Div</div>
+        </Overlay>
+      </BoundedOverlayManager>
+    </>;
+}`,...(a=(i=n.parameters)==null?void 0:i.docs)==null?void 0:a.source}}};const M=["Default"];export{n as Default,M as __namedExportsOrder,w as default};

assets/Overlay-GPfDtt7o.css

@@ -0,0 +1 @@
+._overlaysContainer_wi19r_1{position:absolute;pointer-events:none}._overlaysContainerContent_wi19r_6{position:relative;width:100%;height:100%}._overlay_ractj_1{position:absolute;pointer-events:auto}