dga-ui-react 1.5.1 → 1.6.0

package/Metric/index.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface DGA_MetricProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "style"> {
+    style?: "smallChart" | "largeChart";
+    label?: React.ReactNode;
+    percentage?: React.ReactNode;
+    featuredIcon?: React.ReactNode;
+    showChart?: boolean;
+    chart?: {
+        type: "realistic" | "wavy" | "straight" | "layers";
+        trend: "negative" | "positive";
+        showMarker?: boolean;
+    };
+    showInfo?: boolean;
+    change?: {
+        content: React.ReactNode;
+        type: "01" | "02";
+        trend: "positive" | "negative";
+    };
+    text?: React.ReactNode;
+    showActions?: boolean;
+    moreButton?: React.ReactNode;
+    actions?: React.ReactNode;
+}
+declare const Metric: React.FC<DGA_MetricProps>;
+
+export { Metric as default };

package/Metric/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "dga-ui-react",
+  "version": "1.0.0",
+  "description": "Metric component",
+  "author": "Ashraf Ainia",
+  "license": "MIT",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "types": "index.d.ts"
+}

package/charts/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dga-ui-react",
-  "version": "1.1.1",
-  "description": "DGA ui library",
+  "version": "1.0.0",
+  "description": "DGA UI Charts",
   "author": "Ashraf Ainia",
   "license": "MIT",
   "main": "cjs/index.js",

package/dist/cjs/index.js

@@ -263,11 +263,11 @@
   font-weight: 500;
   .leadIcon {
     margin-inline-end: 4px;
-    display: "inline-flex";
-    alignitems: "center";
+    display: inline-flex;
   }
   .trailIcon {
     margin-inline-start: 4px;
+    display: inline-flex;
   }
 `,xr={medium:{w:320,h:32,p:16,f:14},large:{w:320,h:40,p:16,f:16}},br=er.div`
   direction: ${e=>e.$theme.direction};
@@ -623,6 +623,10 @@
     margin-inline-start: 4px;
     display: inline-flex;
   }
+
+  .iconOnly {
+    display: inline-flex;
+  }
 `,Ur=er.div`
   direction: ${e=>e.$theme.direction};
   /* pointer-events: ${e=>e.$pointerEvents}; */
@@ -863,8 +867,9 @@
   transition: all 0.2s;
   border-bottom-left-radius: 50px;
   border-bottom-right-radius: 50px;
-`,Gr=r=>{var{children:o,menuItems:n,disabled:i,keepOpenOnItemsClicked:a,onOpen:s,onClose:d}=r,p=u(r,["children","menuItems","disabled","keepOpenOnItemsClicked","onOpen","onClose"]);const g=c(),[h,m]=t.useState(!1),[A,f]=t.useState(""),[x,b]=t.useState({top:0,left:0}),v=t.useRef(null),y=t.useRef(null),C=t.useRef(null),w=()=>{let e=Math.max(document.documentElement.clientHeight||0,window.innerHeight||0);if(y.current&&C.current){const t=y.current.getBoundingClientRect();let r={top:t.bottom,left:"ltr"===g.direction?t.left:t.right-C.current.clientWidth};"ltr"===g.direction?r.left+C.current.clientWidth>window.innerWidth&&(r.left=window.innerWidth-C.current.clientWidth):r.left&&t.right-C.current.clientWidth<0&&(r.left=0),t.bottom+C.current.clientHeight>e&&(r.top=t.top-C.current.clientHeight),r.top<0&&(r.top=0),r.top>e&&(r.top=C.current.clientHeight),b(r)}};return t.useEffect((()=>{if(y.current){const e=()=>{w()},t=e=>{var t;(null===(t=v.current)||void 0===t?void 0:t.contains(e.target))||(null==d||d(e),m(!1))};return window.addEventListener("resize",e),window.addEventListener("click",t),()=>{window.removeEventListener("resize",e),window.removeEventListener("click",t)}}}),[y]),t.useEffect((()=>{const e=document.getElementsByTagName("body");e&&e[0]&&(e[0].style.overflow=h?"hidden":A)}),[h]),t.useEffect((()=>{var e,t,r;f(null===(r=null===(t=null===(e=document.getElementsByTagName("body"))||void 0===e?void 0:e[0])||void 0===t?void 0:t.style)||void 0===r?void 0:r.overflow)}),[]),e.jsxs(Wr,Object.assign({$theme:g},p,{className:l("dgaui dgaui_menu",p.className),ref:v,children:[e.jsx("div",{ref:y,onClick:e=>(e=>{h?(m(!1),null==d||d(e)):(w(),m(!0),null==s||s(e))})(e),className:"menuChildren",children:o}),e.jsx("div",{ref:C,className:"menueItemsContainer dgaui_hiddenScrollbar "+(h?" slide-bottom":""),style:x,onClick:e=>{a||(m(!1),null==d||d(e))},children:n})]}))},Wr=er.div`
+`,Gr=r=>{var{children:o,menuItems:n,disabled:i,keepOpenOnItemsClicked:a,onOpen:s,onClose:d,reverseOpeningDirection:p}=r,g=u(r,["children","menuItems","disabled","keepOpenOnItemsClicked","onOpen","onClose","reverseOpeningDirection"]);const h=c(),[m,A]=t.useState(!1),[f,x]=t.useState(""),[b,v]=t.useState({top:0,left:0}),y=t.useRef(null),C=t.useRef(null),w=t.useRef(null),$=()=>{const e=Math.max(document.documentElement.clientHeight,window.innerHeight);if(C.current&&w.current){const t=C.current.getBoundingClientRect();let r={top:t.bottom,left:"ltr"===h.direction?t.left:t.right-w.current.clientWidth};"ltr"===h.direction?r.left+w.current.clientWidth>window.innerWidth&&(r.left=window.innerWidth-w.current.clientWidth):r.left&&t.right-w.current.clientWidth<0&&(r.left=0),p&&(r={top:r.top,left:"ltr"===h.direction?t.right-w.current.clientWidth:t.left},r.left<0&&(r.left=0),t.left+w.current.clientWidth>innerWidth&&(r.left=innerWidth-w.current.clientWidth)),t.bottom+w.current.clientHeight>e&&(r.top=t.top-w.current.clientHeight),r.top<0&&(r.top=0),r.top>e&&(r.top=w.current.clientHeight),v(r)}};return t.useEffect((()=>{if(C.current){const e=()=>{$()},t=e=>{var t;(null===(t=y.current)||void 0===t?void 0:t.contains(e.target))||(null==d||d(e),A(!1))};return window.addEventListener("resize",e),window.addEventListener("click",t),()=>{window.removeEventListener("resize",e),window.removeEventListener("click",t)}}}),[C,p]),t.useEffect((()=>{const e=document.getElementsByTagName("body");e&&e[0]&&(e[0].style.overflow=m?"hidden":f)}),[m]),t.useEffect((()=>{var e,t,r;x(null===(r=null===(t=null===(e=document.getElementsByTagName("body"))||void 0===e?void 0:e[0])||void 0===t?void 0:t.style)||void 0===r?void 0:r.overflow)}),[]),e.jsxs(Wr,Object.assign({$theme:h},g,{className:l("dgaui dgaui_menu",g.className),ref:y,children:[e.jsx("div",{ref:C,onClick:e=>(e=>{m?(A(!1),null==d||d(e)):($(),A(!0),null==s||s(e))})(e),className:"menuChildren",children:o}),e.jsx("div",{ref:w,className:"menueItemsContainer dgaui_hiddenScrollbar "+(m?" slide-bottom":""),style:b,onClick:e=>{a||(A(!1),null==d||d(e))},children:n})]}))},Wr=er.div`
   direction: ${e=>e.$theme.direction};
+  display: inline-block;
 
   .menueItemsContainer {
     width: max-content;