@maxio-com/react-ui-components 0.0.6 → 0.0.8

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 a,useCallback as i,useId as n}from"react";import l from"classnames";import{AnimatePresence as r,motion as s}from"framer-motion";import{useClick as c,useHover as m,useFocus as d,useDismiss as g,useFloating as p,offset as f,useInteractions as u,useRole as x,FloatingPortal as v}from"@floating-ui/react-dom-interactions";const E=({children:t,arrowPosition:o,size:a="regular",maxWidth:i=160})=>e.createElement("div",{"data-testid":"tooltip",className:l("maxio-tooltip",`maxio-tooltip--${a}`,{[`maxio-tooltip--arrow-${o}`]:o})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:i}},t)),h={click:c,hover:m,focus:d,dismiss:g},y=(e,t)=>t.map((t=>h[t](e))),_=({children:a,usePortal:i=!1,isActive:n=!1,placement:l="top",interactions:c=["hover"],role:m="tooltip",renderOverlay:d,floatingElementOffset:g,motionSettings:E={},autoHideMs:h,onOverlayUpdate:_})=>{const{getReferenceProps:N,getFloatingProps:P,refs:{floating:O,reference:b},floatingElementCSSPosition:k}=(({placement:e="top",isActive:a=!1,interactions:i=["hover"],floatingElementOffset:n=0,onOverlayUpdate:l,autoHideMs:r})=>{const s=t(null),{strategy:c,x:m,y:d,context:g,floating:v,reference:E}=p({placement:e,open:a,onOpenChange:e=>l(e),middleware:[f(n)]}),{getReferenceProps:h,getFloatingProps:_}=u([...y(g,i),x(g,{role:"tooltip"})]);return o((()=>{s.current&&clearTimeout(s.current),a&&r&&(s.current=setTimeout((()=>l(!1)),r))}),[a,r]),{isActive:a,refs:{floating:v,reference:E},floatingElementCSSPosition:{position:c,top:null!=d?d:0,left:null!=m?m:0},getReferenceProps:h,getFloatingProps:_}})({role:m,isActive:n,onOverlayUpdate:_,autoHideMs:h,floatingElementOffset:g,interactions:c,placement:l}),w=e.createElement(r,null,n&&e.createElement(s.div,{ref:O,style:k,...E,...P()},d()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:b,style:{display:"inline-flex"},...N()},a),i?e.createElement(v,{id:"maxio-ui-portal"},w):w)},N={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}},P=({children:t,interactions:o=["hover"],placement:n="right",arrowPosition:l=null,maxWidth:r=160,size:s="regular",renderContent:c,autoHideMs:m,isVisible:d,onVisibilityUpdate:g})=>{const[p,f]=a(!1),u=void 0!==d,x=i((e=>{u||f(e),g&&g(e)}),[d]);return e.createElement(_,{role:"tooltip",floatingElementOffset:5,motionSettings:N,isActive:u?d:p,onOverlayUpdate:x,autoHideMs:m,placement:n,interactions:o,renderOverlay:()=>e.createElement(E,{size:s,arrowPosition:l,maxWidth:r},c())},t)},O=({checked:t,onChange:o,disabled:a,valueDescription:i,valueDescriptionPosition:r,className:s,...c})=>{const m=n(),d="left"===r?"row":"row-reverse",g=i&&r;return e.createElement("div",{className:l("maxio-toggle",s,{"maxio-toggle--disabled":a}),style:{display:"inline-flex",flexDirection:d},"data-testid":"toggle-container"},g?e.createElement("label",{className:"maxio-toggle__label",htmlFor:m},i):null,e.createElement("div",{className:"maxio-toggle__container"},e.createElement("input",{type:"checkbox",checked:t,onChange:e=>o(e.target.checked,e),onKeyDown:e=>{"Enter"===e.key&&o(!t,e)},disabled:a,"aria-label":g?void 0:i,className:"maxio-toggle__checkbox",id:m,...c}),e.createElement("div",{className:"maxio-toggle__track",role:"switch","aria-checked":t},e.createElement("div",{className:"maxio-toggle__handle"}),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-on"})),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-off"})))))};export{O as Toggle,P 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"),a=require("framer-motion"),i=require("@floating-ui/react-dom-interactions");const o=({children:a,arrowPosition:i,size:o="regular",maxWidth:n=160})=>e.createElement("div",{"data-testid":"tooltip",className:t("maxio-tooltip",`maxio-tooltip--${o}`,{[`maxio-tooltip--arrow-${i}`]:i})},e.createElement("div",{className:"maxio-tooltip__content",style:{maxWidth:n}},a)),n={click:i.useClick,hover:i.useHover,focus:i.useFocus,dismiss:i.useDismiss},l=(e,t)=>t.map((t=>n[t](e))),r=({children:t,usePortal:o=!1,isActive:n=!1,placement:r="top",interactions:s=["hover"],role:c="tooltip",renderOverlay:m,floatingElementOffset:g,motionSettings:d={},autoHideMs:u,onOverlayUpdate:p})=>{const{getReferenceProps:f,getFloatingProps:v,refs:{floating:x,reference:E},floatingElementCSSPosition:h}=(({placement:t="top",isActive:a=!1,interactions:o=["hover"],floatingElementOffset:n=0,onOverlayUpdate:r,autoHideMs:s})=>{const c=e.useRef(null),{strategy:m,x:g,y:d,context:u,floating:p,reference:f}=i.useFloating({placement:t,open:a,onOpenChange:e=>r(e),middleware:[i.offset(n)]}),{getReferenceProps:v,getFloatingProps:x}=i.useInteractions([...l(u,o),i.useRole(u,{role:"tooltip"})]);return e.useEffect((()=>{c.current&&clearTimeout(c.current),a&&s&&(c.current=setTimeout((()=>r(!1)),s))}),[a,s]),{isActive:a,refs:{floating:p,reference:f},floatingElementCSSPosition:{position:m,top:null!=d?d:0,left:null!=g?g:0},getReferenceProps:v,getFloatingProps:x}})({role:c,isActive:n,onOverlayUpdate:p,autoHideMs:u,floatingElementOffset:g,interactions:s,placement:r}),y=e.createElement(a.AnimatePresence,null,n&&e.createElement(a.motion.div,{ref:x,style:h,...d,...v()},m()));return e.createElement(e.Fragment,null,e.createElement("div",{ref:E,style:{display:"inline-flex"},...f()},t),o?e.createElement(i.FloatingPortal,{id:"maxio-ui-portal"},y):y)},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.Toggle=({checked:a,onChange:i,disabled:o,valueDescription:n,valueDescriptionPosition:l,className:r,...s})=>{const c=e.useId(),m="left"===l?"row":"row-reverse",g=n&&l;return e.createElement("div",{className:t("maxio-toggle",r,{"maxio-toggle--disabled":o}),style:{display:"inline-flex",flexDirection:m},"data-testid":"toggle-container"},g?e.createElement("label",{className:"maxio-toggle__label",htmlFor:c},n):null,e.createElement("div",{className:"maxio-toggle__container"},e.createElement("input",{type:"checkbox",checked:a,onChange:e=>i(e.target.checked,e),onKeyDown:e=>{"Enter"===e.key&&i(!a,e)},disabled:o,"aria-label":g?void 0:n,className:"maxio-toggle__checkbox",id:c,...s}),e.createElement("div",{className:"maxio-toggle__track",role:"switch","aria-checked":a},e.createElement("div",{className:"maxio-toggle__handle"}),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-on"})),e.createElement("span",{className:"maxio-toggle__icon"},e.createElement("i",{className:"maxio-toggle__icon-off"})))))},exports.TooltipTrigger=({children:t,interactions:a=["hover"],placement:i="right",arrowPosition:n=null,maxWidth:l=160,size:c="regular",renderContent:m,autoHideMs:g,isVisible:d,onVisibilityUpdate:u})=>{const[p,f]=e.useState(!1),v=void 0!==d,x=e.useCallback((e=>{v||f(e),u&&u(e)}),[d]);return e.createElement(r,{role:"tooltip",floatingElementOffset:5,motionSettings:s,isActive:v?d:p,onOverlayUpdate:x,autoHideMs:g,placement:i,interactions:a,renderOverlay:()=>e.createElement(o,{size:c,arrowPosition:n,maxWidth:l},m())},t)};
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maxio-com/react-ui-components",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "React ui components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -40,5 +40,11 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e681687540e8e68a730b4ca28812dee72e93be74"
+  "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": "3151f175581b3095a529c0daf6aeb9f125657a13"
 }

package/typings/index.d.ts

@@ -1,5 +1,54 @@
-/// <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
+
+declare type ToggleProps = {
+    checked: boolean;
+    onChange?: (value: boolean, event?: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    name?: string;
+    valueDescription?: string;
+    valueDescriptionPosition?: 'left' | 'right';
+    className?: string;
+};
+declare const Toggle: ({ checked, onChange, disabled, valueDescription, valueDescriptionPosition, className, ...rest }: ToggleProps) => JSX.Element;
+
+export { Toggle, TooltipTrigger };