@maxio-com/react-ui-components 1.0.3 → 1.1.0

package/dist/index.esm.js

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

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maxio-com/react-ui-components",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "React UI components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -47,5 +47,5 @@
     "classnames": "^2.3.2",
     "framer-motion": "^7.6.4"
   },
-  "gitHead": "e80363160d7a9576e2ff0d6b99d6c0b26724cf00"
+  "gitHead": "7e66b543d3e6ef50af6d90c13a03758aa1e23c4a"
 }

package/typings/index.d.ts

@@ -42,7 +42,8 @@ declare const TooltipTrigger: FC<Props>;
 //# sourceMappingURL=TooltipTrigger.d.ts.map
 
 declare type ToggleProps = {
-    checked: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
     onChange?: (value: boolean, event?: React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>) => void;
     disabled?: boolean;
     name?: string;
@@ -51,6 +52,6 @@ declare type ToggleProps = {
     className?: string;
     id?: string;
 };
-declare const Toggle: ({ checked, onChange, disabled, valueDescription, valueDescriptionPosition, className, name, id, }: ToggleProps) => JSX.Element;
+declare const Toggle: ({ defaultChecked, checked, onChange, disabled, valueDescription, valueDescriptionPosition, className, name, id, }: ToggleProps) => JSX.Element;
 
 export { Toggle, TooltipTrigger };