@useloops/design-system 1.4.712 → 1.4.714
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{styled as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{styled as n,Box as i,useTheme as o}from"@mui/material";import{motion as r}from"motion/react";import{useRef as a,useState as s,useEffect as l}from"react";import d from"../../../BrandCore/Icon/Icon.js";import{space as u}from"../../../BrandCore/primitiveVariables.js";import c from"../../../WebCore/IconButton/IconButton.js";import h from"../../../WebCore/TextField/TextField.js";const p=.3,m=[.16,1,.3,1],f=u[500],g=({value:n,onChange:i,placeholder:r="Search…",open:u,defaultOpen:g=!1,onOpenChange:E,onSubmit:O,onClear:z,hideClearButton:B=!1,results:M,maxWidth:j=640,buttons:R,slotProps:W})=>{const S=o(),F=a(null),A=a(null),D=a(null),[K,T]=s(g),$=void 0!==u,G=$?u:K,[L,P]=s(null),V=e=>{$||T(e),E?.(e)};l(()=>{const e=()=>{const e=A.current,t=D.current;if(!e||!t)return;const n=e.parentElement?.parentElement??e,i=e.getBoundingClientRect(),o=t.getBoundingClientRect(),r=n.getBoundingClientRect(),a=i.left+i.width/2,s=o.left+o.width/2,l=r.left+r.width/2,d=Math.min(j,i.width),u=l-d/2,c=Math.max(i.left,Math.min(u,i.right-d))+d/2;P({width:o.width,height:o.height,closedOffset:s-a,openOffset:c-a})};e();const t=new ResizeObserver(e);return A.current&&t.observe(A.current),()=>t.disconnect()},[j]),l(()=>{G?F.current?.focus():F.current?.blur()},[G]);const Y=()=>V(!1),q=()=>{i?.(""),F.current&&(F.current.value="")};return e(v,{children:[e(x,{children:[t(c,{ref:D,icon:t(d,{name:"search",size:20}),sizing:"md",variation:"outlined","aria-hidden":!0,tabIndex:-1,sx:{visibility:"hidden"}}),t(x,{"aria-hidden":G,initial:!1,animate:{opacity:G?0:1},transition:{duration:p,ease:m},sx:{pointerEvents:G?"none":"auto"},children:R})]}),t(b,{ref:A,children:L&&e(C,{initial:!1,animate:{width:G?j:L.width,height:G?f:L.height,x:G?L.openOffset:L.closedOffset},transition:{duration:p,ease:m},children:[e(w,{initial:!1,animate:{backgroundColor:G?S.custom.palette.input.default:S.custom.palette.surface.raised},transition:{duration:p,ease:m},role:G?void 0:"button","aria-label":G?void 0:"Open search",tabIndex:G?-1:0,onClick:()=>{G||V(!0)},onKeyDown:e=>{G||"Enter"!==e.key&&" "!==e.key||V(!0)},sx:{borderRadius:S.r.md,border:`1px solid ${S.custom.palette.stroke.default}`,cursor:G?void 0:"pointer","&::after":{content:'""',position:"absolute",inset:0,pointerEvents:"none",transition:S.custom.easing.input},"&:hover::after":{backgroundColor:S.custom.palette.interaction.hover},"&:focus-within":G?{borderColor:S.custom.palette.stroke.focus,boxShadow:S.custom.boxShadow.input.focus}:void 0},children:[t(y,{initial:!1,animate:{left:G?10:(L.width-20)/2-1},transition:{duration:p,ease:m},children:t(d,{name:"search",size:20})}),t(I,{initial:!1,animate:{opacity:G?1:0},transition:{duration:.15,ease:m,delay:G?p/3:0},inert:!G,sx:{pointerEvents:G?"auto":"none"},children:t(h,{fullWidth:!0,value:n,placeholder:r,autoComplete:"off",inputRef:F,onChange:e=>i?.(e.target.value),onKeyDown:e=>{"Escape"===e.key&&Y(),"Enter"===e.key&&O?.(F.current?.value??n??"")},sx:{height:1,"& .MuiOutlinedInput-root, &:hover .MuiOutlinedInput-root":{height:1,backgroundColor:"transparent"},"& fieldset":{display:"none"},"& .MuiOutlinedInput-input":{paddingLeft:"38px",paddingRight:S.spacing(1)},"& .MuiInputAdornment-root .MuiSvgIcon-root":{width:16,height:16}},endAdornment:B?void 0:t(c,{icon:t(d,{name:"close",size:16}),sizing:"xs",shape:"round",variation:"default","aria-label":"Close search",onClick:()=>{z?z({clear:q,collapse:Y}):(q(),Y())},sx:{width:24,height:24}}),...W?.textField})})]}),G&&M&&t(k,{children:M})]})})]})},v=n(i)(({theme:e})=>({position:"relative",display:"flex",alignItems:"center",justifyContent:"flex-end",gap:e.p.sm,flexGrow:1,minWidth:0})),x=n(r.div)(({theme:e})=>({display:"flex",alignItems:"center",gap:e.p.sm})),b=n(i)({position:"absolute",inset:0,display:"flex",justifyContent:"center",alignItems:"center",pointerEvents:"none"}),C=n(r.div)({position:"relative",maxWidth:"100%",pointerEvents:"auto"}),w=n(r.div)({position:"relative",overflow:"hidden",height:"100%",display:"flex",alignItems:"center"}),y=n(r.div)({position:"absolute",top:"50%",transform:"translateY(-50%)",display:"flex",zIndex:1,pointerEvents:"none"}),I=n(r.div)({width:"100%",height:"100%",display:"flex",alignItems:"center",position:"relative",zIndex:1}),k=n(i)(({theme:e})=>({position:"absolute",top:`calc(100% + ${e.p.xs})`,left:0,right:0,zIndex:1e3}));export{g as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),i=require("motion/react"),n=require("react"),o=require("../../../BrandCore/Icon/Icon.js"),r=require("../../../BrandCore/primitiveVariables.js"),s=require("../../../WebCore/IconButton/IconButton.js"),a=require("../../../WebCore/TextField/TextField.js");const l=.3,d=[.16,1,.3,1],u=r.space[500],c=t.styled(t.Box)(({theme:e})=>({position:"relative",display:"flex",alignItems:"center",justifyContent:"flex-end",gap:e.p.sm,flexGrow:1,minWidth:0})),h=t.styled(i.motion.div)(({theme:e})=>({display:"flex",alignItems:"center",gap:e.p.sm})),p=t.styled(t.Box)({position:"absolute",inset:0,display:"flex",justifyContent:"center",alignItems:"center",pointerEvents:"none"}),f=t.styled(i.motion.div)({position:"relative",maxWidth:"100%",pointerEvents:"auto"}),m=t.styled(i.motion.div)({position:"relative",overflow:"hidden",height:"100%",display:"flex",alignItems:"center"}),x=t.styled(i.motion.div)({position:"absolute",top:"50%",transform:"translateY(-50%)",display:"flex",zIndex:1,pointerEvents:"none"}),g=t.styled(i.motion.div)({width:"100%",height:"100%",display:"flex",alignItems:"center",position:"relative",zIndex:1}),v=t.styled(t.Box)(({theme:e})=>({position:"absolute",top:`calc(100% + ${e.p.xs})`,left:0,right:0,zIndex:1e3}));module.exports=({value:i,onChange:r,placeholder:y="Search…",open:b,defaultOpen:j=!1,onOpenChange:C,onSubmit:w,onClear:I,hideClearButton:E=!1,results:k,maxWidth:B=640,buttons:O,slotProps:R})=>{const z=t.useTheme(),q=n.useRef(null),M=n.useRef(null),S=n.useRef(null),[W,F]=n.useState(j),T=void 0!==b,A=T?b:W,[D,K]=n.useState(null),$=e=>{T||F(e),C?.(e)};n.useEffect(()=>{const e=()=>{const e=M.current,t=S.current;if(!e||!t)return;const i=e.parentElement?.parentElement??e,n=e.getBoundingClientRect(),o=t.getBoundingClientRect(),r=i.getBoundingClientRect(),s=n.left+n.width/2,a=o.left+o.width/2,l=r.left+r.width/2,d=Math.min(B,n.width),u=l-d/2,c=Math.max(n.left,Math.min(u,n.right-d))+d/2;K({width:o.width,height:o.height,closedOffset:a-s,openOffset:c-s})};e();const t=new ResizeObserver(e);return M.current&&t.observe(M.current),()=>t.disconnect()},[B]),n.useEffect(()=>{A
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),i=require("motion/react"),n=require("react"),o=require("../../../BrandCore/Icon/Icon.js"),r=require("../../../BrandCore/primitiveVariables.js"),s=require("../../../WebCore/IconButton/IconButton.js"),a=require("../../../WebCore/TextField/TextField.js");const l=.3,d=[.16,1,.3,1],u=r.space[500],c=t.styled(t.Box)(({theme:e})=>({position:"relative",display:"flex",alignItems:"center",justifyContent:"flex-end",gap:e.p.sm,flexGrow:1,minWidth:0})),h=t.styled(i.motion.div)(({theme:e})=>({display:"flex",alignItems:"center",gap:e.p.sm})),p=t.styled(t.Box)({position:"absolute",inset:0,display:"flex",justifyContent:"center",alignItems:"center",pointerEvents:"none"}),f=t.styled(i.motion.div)({position:"relative",maxWidth:"100%",pointerEvents:"auto"}),m=t.styled(i.motion.div)({position:"relative",overflow:"hidden",height:"100%",display:"flex",alignItems:"center"}),x=t.styled(i.motion.div)({position:"absolute",top:"50%",transform:"translateY(-50%)",display:"flex",zIndex:1,pointerEvents:"none"}),g=t.styled(i.motion.div)({width:"100%",height:"100%",display:"flex",alignItems:"center",position:"relative",zIndex:1}),v=t.styled(t.Box)(({theme:e})=>({position:"absolute",top:`calc(100% + ${e.p.xs})`,left:0,right:0,zIndex:1e3}));module.exports=({value:i,onChange:r,placeholder:y="Search…",open:b,defaultOpen:j=!1,onOpenChange:C,onSubmit:w,onClear:I,hideClearButton:E=!1,results:k,maxWidth:B=640,buttons:O,slotProps:R})=>{const z=t.useTheme(),q=n.useRef(null),M=n.useRef(null),S=n.useRef(null),[W,F]=n.useState(j),T=void 0!==b,A=T?b:W,[D,K]=n.useState(null),$=e=>{T||F(e),C?.(e)};n.useEffect(()=>{const e=()=>{const e=M.current,t=S.current;if(!e||!t)return;const i=e.parentElement?.parentElement??e,n=e.getBoundingClientRect(),o=t.getBoundingClientRect(),r=i.getBoundingClientRect(),s=n.left+n.width/2,a=o.left+o.width/2,l=r.left+r.width/2,d=Math.min(B,n.width),u=l-d/2,c=Math.max(n.left,Math.min(u,n.right-d))+d/2;K({width:o.width,height:o.height,closedOffset:a-s,openOffset:c-s})};e();const t=new ResizeObserver(e);return M.current&&t.observe(M.current),()=>t.disconnect()},[B]),n.useEffect(()=>{A?q.current?.focus():q.current?.blur()},[A]);const G=()=>$(!1),L=()=>{r?.(""),q.current&&(q.current.value="")};return e.jsxs(c,{children:[e.jsxs(h,{children:[e.jsx(s,{ref:S,icon:e.jsx(o.default,{name:"search",size:20}),sizing:"md",variation:"outlined","aria-hidden":!0,tabIndex:-1,sx:{visibility:"hidden"}}),e.jsx(h,{"aria-hidden":A,initial:!1,animate:{opacity:A?0:1},transition:{duration:l,ease:d},sx:{pointerEvents:A?"none":"auto"},children:O})]}),e.jsx(p,{ref:M,children:D&&e.jsxs(f,{initial:!1,animate:{width:A?B:D.width,height:A?u:D.height,x:A?D.openOffset:D.closedOffset},transition:{duration:l,ease:d},children:[e.jsxs(m,{initial:!1,animate:{backgroundColor:A?z.custom.palette.input.default:z.custom.palette.surface.raised},transition:{duration:l,ease:d},role:A?void 0:"button","aria-label":A?void 0:"Open search",tabIndex:A?-1:0,onClick:()=>{A||$(!0)},onKeyDown:e=>{A||"Enter"!==e.key&&" "!==e.key||$(!0)},sx:{borderRadius:z.r.md,border:`1px solid ${z.custom.palette.stroke.default}`,cursor:A?void 0:"pointer","&::after":{content:'""',position:"absolute",inset:0,pointerEvents:"none",transition:z.custom.easing.input},"&:hover::after":{backgroundColor:z.custom.palette.interaction.hover},"&:focus-within":A?{borderColor:z.custom.palette.stroke.focus,boxShadow:z.custom.boxShadow.input.focus}:void 0},children:[e.jsx(x,{initial:!1,animate:{left:A?10:(D.width-20)/2-1},transition:{duration:l,ease:d},children:e.jsx(o.default,{name:"search",size:20})}),e.jsx(g,{initial:!1,animate:{opacity:A?1:0},transition:{duration:.15,ease:d,delay:A?l/3:0},inert:!A,sx:{pointerEvents:A?"auto":"none"},children:e.jsx(a,{fullWidth:!0,value:i,placeholder:y,autoComplete:"off",inputRef:q,onChange:e=>r?.(e.target.value),onKeyDown:e=>{"Escape"===e.key&&G(),"Enter"===e.key&&w?.(q.current?.value??i??"")},sx:{height:1,"& .MuiOutlinedInput-root, &:hover .MuiOutlinedInput-root":{height:1,backgroundColor:"transparent"},"& fieldset":{display:"none"},"& .MuiOutlinedInput-input":{paddingLeft:"38px",paddingRight:z.spacing(1)},"& .MuiInputAdornment-root .MuiSvgIcon-root":{width:16,height:16}},endAdornment:E?void 0:e.jsx(s,{icon:e.jsx(o.default,{name:"close",size:16}),sizing:"xs",shape:"round",variation:"default","aria-label":"Close search",onClick:()=>{I?I({clear:L,collapse:G}):(L(),G())},sx:{width:24,height:24}}),...R?.textField})})]}),A&&k&&e.jsx(v,{children:k})]})})]})};
|
|
@@ -4,7 +4,7 @@ import { PaletteMode, Direction } from '@mui/material';
|
|
|
4
4
|
import { ScreenSize, CustomTheme } from './types.js';
|
|
5
5
|
|
|
6
6
|
declare const useThemeBuilder: (initialMode?: PaletteMode, initialScreenSize?: ScreenSize, initialDirection?: Direction) => {
|
|
7
|
-
breakpoint: "" | "sm" | "
|
|
7
|
+
breakpoint: "" | "sm" | "lg" | "md" | "xl";
|
|
8
8
|
custom: CustomTheme;
|
|
9
9
|
gridOverlayVisible: boolean;
|
|
10
10
|
mode: PaletteMode;
|