@startupjs-ui/portal 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/portal
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* refactor Br, Layout, Portal ([d5f4dcd](https://github.com/startupjs/startupjs-ui/commit/d5f4dcd17e834ceae95decfc1df38bda2b5a17ab))

package/README.mdx

@@ -0,0 +1,76 @@
+import { useState } from 'react'
+import Button from '@startupjs-ui/button'
+import Span from '@startupjs-ui/span'
+import Div from '@startupjs-ui/div'
+import Portal, { _PropsJsonSchema as PortalPropsJsonSchema } from './index'
+import { u } from 'startupjs'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# Portal
+
+The portal component renders its children into a new "subtree" outside of current DOM hierarchy.
+
+```jsx
+import { Portal } from 'startupjs-ui'
+```
+
+## Initialization
+
+It is necessary to wrap the part of the application components on top of which the Portal will be displayed
+
+```jsx
+function Layout ({ children }) {
+  return (
+    <Portal.Provider>
+      <Layout>{children}</Layout>
+    </Portal.Provider>
+  )
+}
+```
+
+## Simple example
+
+```jsx example
+const [visible, setVisible] = useState(false)
+
+const contentStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: u(25),
+  height: u(20),
+  backgroundColor: '#444',
+  justifyContent: 'center',
+  alignItems: 'center'
+}
+
+const textStyle = {
+  color: '#fff',
+  marginBottom: u(2),
+  fontSize: u(3)
+}
+
+return (
+  <Div>
+    <Button onPress={()=> setVisible(true)}>Open</Button>
+    {visible &&
+      <Portal>
+        <Div style={contentStyle}>
+          <Span style={textStyle}>Content</Span>
+          <Button
+            variant='flat'
+            onPress={()=> setVisible(false)}
+          >Close</Button>
+        </Div>
+      </Portal>
+    }
+  </Div>
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Portal}
+  propsJsonSchema={PortalPropsJsonSchema}
+/>

package/index.d.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type ReactNode } from 'react';
+export declare const _PropsJsonSchema: {};
+export interface PortalProps {
+    /** Content rendered into the portal host */
+    children?: ReactNode;
+}
+declare const ObservedPortal: any;
+export default ObservedPortal;

package/index.tsx

@@ -0,0 +1,60 @@
+import { createContext, Fragment, useContext, useEffect, useId, type ReactNode } from 'react'
+import { pug, $, observer } from 'startupjs'
+
+const PortalContext = createContext<any>(undefined)
+
+export const _PropsJsonSchema = {/* PortalProps */}
+
+export interface PortalProps {
+  /** Content rendered into the portal host */
+  children?: ReactNode
+}
+
+const Provider = observer(function Provider ({ children }: { children?: ReactNode }): ReactNode {
+  const $state = $({ order: [], nodes: {} })
+  return pug`
+    PortalContext.Provider(value=$state)
+      = children
+      Host($state=$state)
+  `
+})
+
+const Host = observer(function Host ({ $state }: { $state: any }): ReactNode {
+  const { order, nodes } = $state.get()
+
+  return pug`
+    each componentId in order
+      Fragment(key=componentId)
+        = nodes[componentId]?.()
+  `
+})
+
+function Portal ({ children }: PortalProps): ReactNode {
+  const componentId = useId()
+  const $state = useContext(PortalContext)
+  if (!$state) throw Error('Portal must be used within a Portal.Provider')
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/promise-function-async
+    $state.nodes[componentId].set(() => children)
+    const { $order } = $state
+    if (!$order.get().includes(componentId)) $order.push(componentId)
+  }, [$state, componentId, children])
+
+  useEffect(() => {
+    return () => {
+      $state.nodes[componentId].del()
+      const { $order } = $state
+      const index = $order.get().indexOf(componentId)
+      $order[index].del()
+    }
+  }, [$state, componentId])
+
+  return null
+}
+
+const ObservedPortal: any = observer(Portal)
+
+ObservedPortal.Provider = Provider
+
+export default ObservedPortal

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@startupjs-ui/portal",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@startupjs-ui/core": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}