@alxgrn/telefrag-ui 0.0.45 → 0.0.46

package/README.md

@@ -1,12 +1,17 @@
-# Подготовка для публикации библиотеки
+# UI-библиотека проекта [The Daily Telefrag](https://dailytelefrag.ru)
+Документация по компонентам [тут](./docs/README.md)
+
+Ниже просто мусор для памяти :)
+
+## Подготовка для публикации библиотеки
 https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma
 ВНИМАНИЕ: на последней версии Vite может возникнуть ошибка `but '--jsx' is not set`.
 Как её чинить непонятно. В интернете пишут про версии TS и т.п. Поэтому инциализировали версию vite 5.0.0 с более старыми версиями всего.
 
-# Настройка тестов
+## Настройка тестов
 https://deku.posstree.com/en/react/vite/react-typescript/test/
 
-# React + TypeScript + Vite
+## React + TypeScript + Vite
 
 This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
@@ -15,7 +20,7 @@ Currently, two official plugins are available:
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
-## Expanding the ESLint configuration
+### Expanding the ESLint configuration
 
 If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
 

package/dist/components/ui/menu/Menu.d.ts

@@ -15,9 +15,9 @@ export type MenuAlternative = {
     disabled?: boolean | null;
 };
 export type MenuItem = MenuAlternative | MenuSeparator;
-interface MenuProps extends PopupProps {
+type MenuProps = PopupProps & {
     items: MenuItem[];
     onClick: (item: MenuItem) => void;
-}
+};
 export declare const Menu: React.FC<MenuProps>;
 export default Menu;

package/dist/components/ui/popup/Popup.d.ts

@@ -1,5 +1,20 @@
 import { FC, PropsWithChildren } from 'react';
-export interface PopupProps {
+export type PopupPropsPosition = {
+    x: number;
+    y: number;
+    isOpen: boolean;
+    onClose: () => void;
+    margin?: string;
+    vertical?: 'auto' | 'top' | 'bottom';
+    horizontal?: 'auto' | 'left' | 'right';
+    maxHeight?: 'auto' | 'none';
+    position?: 'absolute' | 'fixed';
+    parent?: never;
+    width?: never;
+};
+export type PopupPropsParent = {
+    x?: never;
+    y?: never;
     parent: HTMLElement;
     isOpen: boolean;
     onClose: () => void;
@@ -9,6 +24,7 @@ export interface PopupProps {
     maxHeight?: 'auto' | 'none';
     width?: 'auto' | 'parent';
     position?: 'absolute' | 'fixed';
-}
+};
+export type PopupProps = PopupPropsPosition | PopupPropsParent;
 export declare const Popup: FC<PropsWithChildren<PopupProps>>;
 export default Popup;

package/dist/components/ui/popup/Popup.js

@@ -1,10 +1,12 @@
 import { jsx as s } from "react/jsx-runtime";
-import { useRef as v, useState as y, useEffect as m } from "react";
-import { CSSTransition as L } from "react-transition-group";
-import S from "../portal/Portal.js";
-import { ANIMATION_LENGTH as T } from "../../../config.js";
+import { useRef as S, useState as g, useEffect as m } from "react";
+import { CSSTransition as T } from "react-transition-group";
+import N from "../portal/Portal.js";
+import { ANIMATION_LENGTH as P } from "../../../config.js";
 import '../../../assets/Popup.css';/* empty css                      */
-const N = T, M = ({
+const I = P, W = ({
+  x: k,
+  y,
   parent: u,
   isOpen: d,
   onClose: c,
@@ -14,62 +16,59 @@ const N = T, M = ({
   maxHeight: h = "none",
   width: b = "auto",
   position: l = "absolute",
-  children: E
+  children: w
 }) => {
-  const a = v(null), [w, g] = y({}), [x, k] = y({});
+  const a = S(null), [E, x] = g({}), [v, L] = g({});
   return m(() => {
     if (!d) return;
-    if (!u) {
-      g({}), k({});
-      return;
-    }
-    const r = document.documentElement.clientWidth, n = document.documentElement.clientHeight, e = u.getBoundingClientRect();
-    k({
+    const r = document.documentElement.clientWidth, n = document.documentElement.clientHeight;
+    let t = {};
+    u ? t = u.getBoundingClientRect() : (t.y = t.top = t.bottom = y, t.x = t.left = t.right = k, t.width = t.height = 0), L({
       position: l,
-      top: l === "fixed" ? e.top : e.top + window.scrollY,
-      left: l === "fixed" ? e.left : e.left + window.scrollX,
-      width: e.width,
-      height: e.height
+      top: l === "fixed" ? t.top : t.top + window.scrollY,
+      left: l === "fixed" ? t.left : t.left + window.scrollX,
+      width: t.width,
+      height: t.height
     });
-    const t = {
-      width: b === "parent" ? e.width : "auto"
+    const e = {
+      width: b === "parent" ? t.width : "auto"
     };
     let i = 0;
     switch (p) {
       case "top":
-        t.bottom = "100%", t.marginBottom = o, i = e.top;
+        e.bottom = "100%", e.marginBottom = o, i = t.top;
         break;
       case "bottom":
-        t.top = "100%", t.marginTop = o, i = n - e.bottom;
+        e.top = "100%", e.marginTop = o, i = n - t.bottom;
         break;
       case "inner-top":
-        t.top = 0, i = n - e.top;
+        e.top = 0, i = n - t.top;
         break;
       case "inner-bottom":
-        t.bottom = 0, i = e.bottom;
+        e.bottom = 0, i = t.bottom;
         break;
       default:
-        e.top < n - e.bottom ? (t.top = "100%", t.marginTop = o, i = n - e.bottom) : (t.bottom = "100%", t.marginBottom = o, i = e.top);
+        t.top < n - t.bottom ? (e.top = "100%", e.marginTop = o, i = n - t.bottom) : (e.bottom = "100%", e.marginBottom = o, i = t.top);
         break;
     }
-    switch (h === "auto" && (t.maxHeight = `calc(${i}px - 2 * ${o})`), f) {
+    switch (h === "auto" && (e.maxHeight = `calc(${i}px - 2 * ${o})`), f) {
       case "left":
-        t.right = "100%", t.marginRight = o;
+        e.right = "100%", e.marginRight = o;
         break;
       case "right":
-        t.left = "100%", t.marginLeft = o;
+        e.left = "100%", e.marginLeft = o;
         break;
       case "inner-left":
-        t.left = 0;
+        e.left = 0;
         break;
       case "inner-right":
-        t.right = 0;
+        e.right = 0;
         break;
       default:
-        e.left < r - e.right ? (t.left = "100%", t.marginLeft = o) : (t.right = "100%", t.marginRight = o);
+        t.left < r - t.right ? (e.left = "100%", e.marginLeft = o) : (e.right = "100%", e.marginRight = o);
         break;
     }
-    g(t);
+    x(e);
   }, [u, d, o, p, f, h, b, l]), m(() => {
     const r = (n) => {
       a.current && !a.current.contains(n.target) && c();
@@ -84,19 +83,19 @@ const N = T, M = ({
     return document.body.addEventListener("keydown", r), () => {
       document.body.removeEventListener("keydown", r);
     };
-  }, [c]), /* @__PURE__ */ s(S, { id: "alxgrn-popup", children: /* @__PURE__ */ s(
-    L,
+  }, [c]), /* @__PURE__ */ s(N, { id: "alxgrn-popup", children: /* @__PURE__ */ s(
+    T,
     {
       in: d,
-      timeout: N,
+      timeout: I,
       unmountOnExit: !0,
       classNames: "Popup",
       nodeRef: a,
-      children: /* @__PURE__ */ s("div", { className: "Popup", style: x, children: /* @__PURE__ */ s("div", { className: "PopupInner", ref: a, style: w, children: E }) })
+      children: /* @__PURE__ */ s("div", { className: "Popup", style: v, children: /* @__PURE__ */ s("div", { className: "PopupInner", ref: a, style: E, children: w }) })
     }
   ) });
 };
 export {
-  M as Popup,
-  M as default
+  W as Popup,
+  W as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@alxgrn/telefrag-ui",
   "description": "UI library for The Daily Telefrag project",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "private": false,
   "author": "Alexander Fedorov <alex@molner.ru>",
   "license": "Apache-2.0",