@maxio-com/react-ui-components 0.0.4 → 0.0.6-alpha.0

package/dist/index.esm.js

@@ -1 +1 @@
-import e from"react";const a=()=>e.createElement("ul",{className:"maxio-side-nav__items"},e.createElement("li",{className:"maxio-side-nav__item maxio-side-nav__item--active"},e.createElement("button",{"aria-expanded":"true",className:"maxio-side-nav__menu-button",type:"button"},e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement("i",{className:"maxio-icon maxio-icon-credit-card"})),e.createElement("span",{className:"maxio-side-nav__menu-title"},"Category"),e.createElement("span",{className:"maxio-side-nav__menu-chevron"},e.createElement("i",{className:"maxio-icon maxio-icon-chevron-down"}))),e.createElement("ul",{className:"maxio-side-nav__menu"},e.createElement("li",{className:"maxio-side-nav__item"},e.createElement("a",{"aria-current":"page",className:"maxio-side-nav__link"},e.createElement("span",{className:"maxio-side-nav__link-title"},"SubItem 1"))),e.createElement("li",{className:"maxio-side-nav__item"},e.createElement("a",{className:"maxio-side-nav__link"},e.createElement("span",{className:"maxio-side-nav__link-title"},"SubItem 2"))))));export{a as SideNav};
+import e,{useRef as t,useEffect as o,useState as i,useCallback as n}from"react";import r from"classnames";import{AnimatePresence as a,motion as l}from"framer-motion";import{useClick as s,useHover as c,useFocus as m,useDismiss as p,useFloating as f,offset as d,useInteractions as g,useRole as u,FloatingPortal as v}from"@floating-ui/react-dom-interactions";const y=({children:t,arrowPosition:o,size:i="regular",maxWidth:n=160})=>e.createElement("div",{"data-testid":"tooltip",className:r("maxio-tooltip",`maxio-tooltip--${i}`,{[`maxio-tooltip--arrow-${o}`]:o})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:n}},t)),E={click:s,hover:c,focus:m,dismiss:p},x=(e,t)=>t.map((t=>E[t](e))),h=({children:i,usePortal:n=!1,isActive:r=!1,placement:s="top",interactions:c=["hover"],role:m="tooltip",renderOverlay:p,floatingElementOffset:y,motionSettings:E={},autoHideMs:h,onOverlayUpdate:P})=>{const{getReferenceProps:O,getFloatingProps:S,refs:{floating:w,reference:A},floatingElementCSSPosition:H}=(({placement:e="top",isActive:i=!1,interactions:n=["hover"],floatingElementOffset:r=0,onOverlayUpdate:a,autoHideMs:l})=>{const s=t(null),{strategy:c,x:m,y:p,context:v,floating:y,reference:E}=f({placement:e,open:i,onOpenChange:e=>a(e),middleware:[d(r)]}),{getReferenceProps:h,getFloatingProps:P}=g([...x(v,n),u(v,{role:"tooltip"})]);return o((()=>{s.current&&clearTimeout(s.current),i&&l&&(s.current=setTimeout((()=>a(!1)),l))}),[i,l]),{isActive:i,refs:{floating:y,reference:E},floatingElementCSSPosition:{position:c,top:null!=p?p:0,left:null!=m?m:0},getReferenceProps:h,getFloatingProps:P}})({role:m,isActive:r,onOverlayUpdate:P,autoHideMs:h,floatingElementOffset:y,interactions:c,placement:s}),M=e.createElement(a,null,r&&e.createElement(l.div,{ref:w,style:H,...E,...S()},p()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:A,style:{display:"inline-flex"},...O()},i),n?e.createElement(v,{id:"maxio-ui-portal"},M):M)},P={initial:{opacity:0,transform:"scale3d(.2,.2,1)"},animate:{opacity:1,transform:"scale3d(1,1,1)"},exit:{opacity:0,transform:"scale3d(.2,.2,1)"},transition:{ease:[.4,0,.2,1],duration:.3}},O=({children:t,interactions:o=["hover"],placement:r="right",arrowPosition:a=null,maxWidth:l=160,size:s="regular",renderContent:c,autoHideMs:m,isVisible:p,onVisibilityUpdate:f})=>{const[d,g]=i(!1),u=void 0!==p,v=n((e=>{u||g(e),f&&f(e)}),[p]);return e.createElement(h,{role:"tooltip",floatingElementOffset:5,motionSettings:P,isActive:u?p:d,onOverlayUpdate:v,autoHideMs:m,placement:r,interactions:o,renderOverlay:()=>e.createElement(y,{size:s,arrowPosition:a,maxWidth:l},c())},t)};export{O as TooltipTrigger};

package/dist/index.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react");exports.SideNav=()=>e.createElement("ul",{className:"maxio-side-nav__items"},e.createElement("li",{className:"maxio-side-nav__item maxio-side-nav__item--active"},e.createElement("button",{"aria-expanded":"true",className:"maxio-side-nav__menu-button",type:"button"},e.createElement("span",{className:"maxio-side-nav__icon"},e.createElement("i",{className:"maxio-icon maxio-icon-credit-card"})),e.createElement("span",{className:"maxio-side-nav__menu-title"},"Category"),e.createElement("span",{className:"maxio-side-nav__menu-chevron"},e.createElement("i",{className:"maxio-icon maxio-icon-chevron-down"}))),e.createElement("ul",{className:"maxio-side-nav__menu"},e.createElement("li",{className:"maxio-side-nav__item"},e.createElement("a",{"aria-current":"page",className:"maxio-side-nav__link"},e.createElement("span",{className:"maxio-side-nav__link-title"},"SubItem 1"))),e.createElement("li",{className:"maxio-side-nav__item"},e.createElement("a",{className:"maxio-side-nav__link"},e.createElement("span",{className:"maxio-side-nav__link-title"},"SubItem 2"))))));
+"use strict";var e=require("react"),t=require("classnames"),i=require("framer-motion"),o=require("@floating-ui/react-dom-interactions");const n=({children:i,arrowPosition:o,size:n="regular",maxWidth:r=160})=>e.createElement("div",{"data-testid":"tooltip",className:t("maxio-tooltip",`maxio-tooltip--${n}`,{[`maxio-tooltip--arrow-${o}`]:o})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:r}},i)),r={click:o.useClick,hover:o.useHover,focus:o.useFocus,dismiss:o.useDismiss},a=(e,t)=>t.map((t=>r[t](e))),l=({children:t,usePortal:n=!1,isActive:r=!1,placement:l="top",interactions:s=["hover"],role:c="tooltip",renderOverlay:m,floatingElementOffset:u,motionSettings:f={},autoHideMs:p,onOverlayUpdate:d})=>{const{getReferenceProps:g,getFloatingProps:v,refs:{floating:y,reference:E},floatingElementCSSPosition:x}=(({placement:t="top",isActive:i=!1,interactions:n=["hover"],floatingElementOffset:r=0,onOverlayUpdate:l,autoHideMs:s})=>{const c=e.useRef(null),{strategy:m,x:u,y:f,context:p,floating:d,reference:g}=o.useFloating({placement:t,open:i,onOpenChange:e=>l(e),middleware:[o.offset(r)]}),{getReferenceProps:v,getFloatingProps:y}=o.useInteractions([...a(p,n),o.useRole(p,{role:"tooltip"})]);return e.useEffect((()=>{c.current&&clearTimeout(c.current),i&&s&&(c.current=setTimeout((()=>l(!1)),s))}),[i,s]),{isActive:i,refs:{floating:d,reference:g},floatingElementCSSPosition:{position:m,top:null!=f?f:0,left:null!=u?u:0},getReferenceProps:v,getFloatingProps:y}})({role:c,isActive:r,onOverlayUpdate:d,autoHideMs:p,floatingElementOffset:u,interactions:s,placement:l}),P=e.createElement(i.AnimatePresence,null,r&&e.createElement(i.motion.div,{ref:y,style:x,...f,...v()},m()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:E,style:{display:"inline-flex"},...g()},t),n?e.createElement(o.FloatingPortal,{id:"maxio-ui-portal"},P):P)},s={initial:{opacity:0,transform:"scale3d(.2,.2,1)"},animate:{opacity:1,transform:"scale3d(1,1,1)"},exit:{opacity:0,transform:"scale3d(.2,.2,1)"},transition:{ease:[.4,0,.2,1],duration:.3}};exports.TooltipTrigger=({children:t,interactions:i=["hover"],placement:o="right",arrowPosition:r=null,maxWidth:a=160,size:c="regular",renderContent:m,autoHideMs:u,isVisible:f,onVisibilityUpdate:p})=>{const[d,g]=e.useState(!1),v=void 0!==f,y=e.useCallback((e=>{v||g(e),p&&p(e)}),[f]);return e.createElement(l,{role:"tooltip",floatingElementOffset:5,motionSettings:s,isActive:v?f:d,onOverlayUpdate:y,autoHideMs:u,placement:o,interactions:i,renderOverlay:()=>e.createElement(n,{size:c,arrowPosition:r,maxWidth:a},m())},t)};
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maxio-com/react-ui-components",
-  "version": "0.0.4",
+  "version": "0.0.6-alpha.0",
   "description": "React ui components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -40,5 +40,11 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "af600e8748a9fe6cbdee062216a00dc740428d6b"
+  "dependencies": {
+    "@floating-ui/react-dom": "^1.0.0",
+    "@floating-ui/react-dom-interactions": "^0.10.3",
+    "classnames": "^2.3.2",
+    "framer-motion": "^7.6.4"
+  },
+  "gitHead": "20f28466add6b5f459c313c9631afc2840d607f8"
 }

package/typings/index.d.ts

@@ -1,5 +1,43 @@
-/// <reference types="react" />
-declare const SideNav: () => JSX.Element;
-//# sourceMappingURL=SideNav.d.ts.map
+import React, { FC } from 'react';
+import { AnimationProps } from 'framer-motion';
 
-export { SideNav };
+declare type ArrowPosition = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom' | 'right' | 'right-top' | 'right-bottom';
+
+declare type TooltipProps = {
+    children: React.ReactNode;
+    size?: 'regular' | 'small';
+    arrowPosition?: ArrowPosition;
+    maxWidth?: number | 'none';
+};
+
+declare type Alignment = 'start' | 'end';
+declare type Side = 'top' | 'right' | 'bottom' | 'left';
+declare type AlignedPlacement = `${Side}-${Alignment}`;
+declare type Placement = Side | AlignedPlacement;
+declare type Interactions = 'click' | 'hover' | 'focus' | 'dismiss';
+declare type OverlayAriaRole = 'tooltip' | 'dialog' | 'alertdialog' | 'menu' | 'listbox' | 'grid' | 'tree';
+
+declare type OverlayTriggerProps = {
+    children: React.ReactNode;
+    placement?: Placement;
+    usePortal?: boolean;
+    interactions?: Interactions[];
+    renderOverlay: () => React.ReactNode;
+    role?: OverlayAriaRole;
+    floatingElementOffset?: number;
+    isActive?: boolean;
+    onOverlayUpdate: (isActive: boolean) => void;
+    motionSettings?: AnimationProps;
+    autoHideMs?: number;
+};
+
+declare type Props = {
+    children: React.ReactNode;
+    isVisible?: boolean;
+    onVisibilityUpdate?: (isVisible: boolean) => void;
+    renderContent: () => React.ReactNode;
+} & Pick<OverlayTriggerProps, 'placement' | 'interactions' | 'usePortal' | 'autoHideMs'> & Pick<TooltipProps, 'size' | 'arrowPosition' | 'maxWidth'>;
+declare const TooltipTrigger: FC<Props>;
+//# sourceMappingURL=TooltipTrigger.d.ts.map
+
+export { TooltipTrigger };