react-asc 23.6.1 → 23.7.0

package/components/Drawer/Drawer.d.ts

@@ -6,4 +6,4 @@ export interface IDrawerProps extends React.ComponentProps<'div'> {
     permanent?: boolean;
     target?: HTMLElement;
 }
-export declare const Drawer: (props: IDrawerProps) => React.ReactPortal;
+export declare const Drawer: (props: IDrawerProps) => JSX.Element;

package/components/Portal/Portal.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface IPortalProps {
+    children: React.ReactNode;
+    target?: HTMLElement;
+    className?: string;
+}
+export declare const Portal: ({ children, target, className }: IPortalProps) => import("react").ReactPortal;

package/components/Portal/index.d.ts

@@ -0,0 +1 @@
+export * from './Portal';

package/index.es.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, createContext, useContext, Fragment, Component, createRef, cloneElement } from 'react';
+import React, { useRef, useEffect, useState, createContext, useContext, Fragment, Component, createRef, useMemo, cloneElement } from 'react';
 import { createPortal, render, unmountComponentAtNode } from 'react-dom';
 import { createPopper } from '@popperjs/core';
 
@@ -1535,6 +1535,18 @@ const DateSelect = (props) => {
 // 	return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
 // };
 
+const Portal = ({ children, target = document.body, className }) => {
+    const containerEl = useMemo(() => document.createElement('div'), []);
+    useEffect(() => {
+        className && className.split(' ').forEach(cssClass => containerEl.classList.add(cssClass));
+        target.appendChild(containerEl);
+        return () => {
+            target.removeChild(containerEl);
+        };
+    }, []);
+    return createPortal(children, containerEl);
+};
+
 var css_248z$z = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 320px;\n  overflow-y: auto;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n  position: inherit;\n  z-index: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n  order: 0;\n  left: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n  order: 2;\n  right: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n  box-shadow: var(--shadow);\n}\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden;\n}";
 var styles$z = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-module_permanent__c-y8y","left":"Drawer-module_left__loQVO","right":"Drawer-module_right__sJ3mZ","shadow":"Drawer-module_shadow__Myo3n","drawerOpen":"Drawer-module_drawerOpen__07ptP"};
 styleInject(css_248z$z);
@@ -1550,9 +1562,9 @@ const Drawer = (props) => {
     const handleClickBackdrop = () => {
         onClickBackdrop && onClickBackdrop();
     };
-    return createPortal(React.createElement(React.Fragment, null,
+    return (React.createElement(Portal, { className: 'drawer-container', target: target },
         React.createElement(DrawerContent, Object.assign({ className: className, position: position, permanent: permanent, shadow: shadow }, rest), children),
-        !permanent && React.createElement(Backdrop, { onClick: handleClickBackdrop })), target);
+        !permanent && React.createElement(Backdrop, { onClick: handleClickBackdrop })));
 };
 const DrawerContent = (props) => {
     const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);

package/index.js

@@ -1543,6 +1543,18 @@ const DateSelect = (props) => {
 // 	return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
 // };
 
+const Portal = ({ children, target = document.body, className }) => {
+    const containerEl = React.useMemo(() => document.createElement('div'), []);
+    React.useEffect(() => {
+        className && className.split(' ').forEach(cssClass => containerEl.classList.add(cssClass));
+        target.appendChild(containerEl);
+        return () => {
+            target.removeChild(containerEl);
+        };
+    }, []);
+    return reactDom.createPortal(children, containerEl);
+};
+
 var css_248z$z = ".Drawer-module_drawer__kdQCk {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 320px;\n  overflow-y: auto;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n  position: inherit;\n  z-index: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n  order: 0;\n  left: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n  order: 2;\n  right: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n  box-shadow: var(--shadow);\n}\n\n.Drawer-module_drawerOpen__07ptP {\n  overflow: hidden;\n}";
 var styles$z = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-module_permanent__c-y8y","left":"Drawer-module_left__loQVO","right":"Drawer-module_right__sJ3mZ","shadow":"Drawer-module_shadow__Myo3n","drawerOpen":"Drawer-module_drawerOpen__07ptP"};
 styleInject(css_248z$z);
@@ -1558,9 +1570,9 @@ const Drawer = (props) => {
     const handleClickBackdrop = () => {
         onClickBackdrop && onClickBackdrop();
     };
-    return reactDom.createPortal(React__default["default"].createElement(React__default["default"].Fragment, null,
+    return (React__default["default"].createElement(Portal, { className: 'drawer-container', target: target },
         React__default["default"].createElement(DrawerContent, Object.assign({ className: className, position: position, permanent: permanent, shadow: shadow }, rest), children),
-        !permanent && React__default["default"].createElement(Backdrop, { onClick: handleClickBackdrop })), target);
+        !permanent && React__default["default"].createElement(Backdrop, { onClick: handleClickBackdrop })));
 };
 const DrawerContent = (props) => {
     const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-asc",
-	"version": "23.6.1",
+	"version": "23.7.0",
 	"description": "handcrafted react components",
 	"main": "index.js",
 	"module": "index.es.js",

package/react-asc.scss

@@ -248,6 +248,10 @@
 	color: var(--muted);
 }
 
+.flex-1 {
+	flex: 1;
+}
+
 .d-flex {
 	display: flex !important;
 }
@@ -288,8 +292,6 @@
 	height: 100%;
 }
 
-
-
 .text-center {
 	text-align: center;
 }

package/readme.md

@@ -69,8 +69,10 @@ react-asc provides built-in ts definition
 -   Menu
 -   Modal + ModalService
 -   NumberSelect
+	Portal
 -   Select
 -   Sidebar
+-	Skeleton (Avatar, Image, Text, SkeletonFooter)
 -   Snackbar + SnackbarService
 -   SpeedDial
 -   Stepper (beta)