@canlooks/can-ui 0.0.46 → 0.0.47

package/dist/cjs/components/menuItem/menuItem.style.js

@@ -28,6 +28,7 @@ function useStyle({ color }) {
         const c = (0, color_1.default)(colorValue);
         const selectedBg = c.alpha(.1).string();
         const selectedAndFocused = c.alpha(.15).string();
+        const selectedActive = c.alpha(.08).string();
         const focusedBg = gray(mode === 'light' ? .05 : .23);
         const disabledOrActive = gray(mode === 'light' ? .1 : .17);
         return (0, react_1.css) `
@@ -38,6 +39,7 @@ function useStyle({ color }) {
             cursor: pointer;
             color: ${text.primary};
             padding: ${exports.paddingHorizontal.medium}px 12px;
+            position: relative;
             -webkit-tap-highlight-color: transparent;
             
             &[data-size=small] {
@@ -52,8 +54,7 @@ function useStyle({ color }) {
         
             transition: background-color .25s ${easing.easeOut};
         
-            &:hover,
-            &[data-focused=true] {
+            &:hover, &[data-focused=true] {
                 background-color: ${focusedBg};
             }
 
@@ -69,7 +70,7 @@ function useStyle({ color }) {
             &[data-selected=true] {
                 background-color: ${selectedBg};
 
-                &[data-focused=true] {
+                &:hover, &[data-focused=true] {
                     background-color: ${selectedAndFocused};
                 }
 
@@ -77,6 +78,10 @@ function useStyle({ color }) {
                     font-weight: bold;
                     color: ${colorValue};
                 }
+                
+                &:active {
+                    background-color: ${selectedActive};
+                }
             }
 
             &[data-disabled=true] {

package/dist/cjs/components/touchRipple/touchRipple.js

@@ -20,10 +20,6 @@ exports.Ripple = (0, react_1.memo)(({ ref, color = 'primary', ...props }) => {
     (0, react_1.useLayoutEffect)(() => {
         const wrapper = rippleRef.current?.parentElement;
         if (wrapper) {
-            const { position } = getComputedStyle(wrapper);
-            if (position === 'static') {
-                wrapper.style.position = 'relative';
-            }
             const pointerDown = (e) => {
                 setRipples(o => [
                     ...o,

package/dist/esm/components/menuItem/menuItem.style.js

@@ -23,6 +23,7 @@ export function useStyle({ color }) {
         const c = Color(colorValue);
         const selectedBg = c.alpha(.1).string();
         const selectedAndFocused = c.alpha(.15).string();
+        const selectedActive = c.alpha(.08).string();
         const focusedBg = gray(mode === 'light' ? .05 : .23);
         const disabledOrActive = gray(mode === 'light' ? .1 : .17);
         return css `
@@ -33,6 +34,7 @@ export function useStyle({ color }) {
             cursor: pointer;
             color: ${text.primary};
             padding: ${paddingHorizontal.medium}px 12px;
+            position: relative;
             -webkit-tap-highlight-color: transparent;
             
             &[data-size=small] {
@@ -47,8 +49,7 @@ export function useStyle({ color }) {
         
             transition: background-color .25s ${easing.easeOut};
         
-            &:hover,
-            &[data-focused=true] {
+            &:hover, &[data-focused=true] {
                 background-color: ${focusedBg};
             }
 
@@ -64,7 +65,7 @@ export function useStyle({ color }) {
             &[data-selected=true] {
                 background-color: ${selectedBg};
 
-                &[data-focused=true] {
+                &:hover, &[data-focused=true] {
                     background-color: ${selectedAndFocused};
                 }
 
@@ -72,6 +73,10 @@ export function useStyle({ color }) {
                     font-weight: bold;
                     color: ${colorValue};
                 }
+                
+                &:active {
+                    background-color: ${selectedActive};
+                }
             }
 
             &[data-disabled=true] {

package/dist/esm/components/touchRipple/touchRipple.js

@@ -17,10 +17,6 @@ export const Ripple = memo(({ ref, color = 'primary', ...props }) => {
     useLayoutEffect(() => {
         const wrapper = rippleRef.current?.parentElement;
         if (wrapper) {
-            const { position } = getComputedStyle(wrapper);
-            if (position === 'static') {
-                wrapper.style.position = 'relative';
-            }
             const pointerDown = (e) => {
                 setRipples(o => [
                     ...o,

package/documentation/dist/assets/{index-gntHdyKP.js → index-DpTyMkMP.js}

@@ -1549,7 +1549,7 @@ Error generating stack: `+I.message+`
         &:not([data-open=true]) {
             pointer-events: none;
         }
-    `]}),c4e=300;function Hoe({container:a,forceRender:l,open:_,onMaskClick:m,singleLayer:b,onOpened:k,onClosed:w,maskProps:O,removeFocusOnOpen:j=!0,...$}){const[G,B]=Yh((Fe=!1)=>_?!0:l===!0||Fe,[_,l]),de=(typeof a=="function"?a():a)||document.body;we.useEffect(()=>{var Fe,Ue;if(_)return j&&((Ue=(Fe=document.activeElement)==null?void 0:Fe.blur)==null||Ue.call(Fe)),de.style.overflow="hidden",()=>{de.style.overflow=""}},[_]);const ie=Fe=>{var Ue;(Ue=O==null?void 0:O.onClick)==null||Ue.call(O,Fe),m==null||m(Fe)},fe=Fe=>{var Ue;(Ue=O==null?void 0:O.onEntered)==null||Ue.call(O,Fe),k==null||k()},$e=()=>{var Fe;(Fe=O==null?void 0:O.onExited)==null||Fe.call(O),w==null||w(),l===!1&&B(!1)};return G.current&&nI.createPortal(Vr("div",{...$,css:kBt,className:Fi(hDe.root,$.className),"data-open":_,"data-custom-container":de!==document.body,children:[Ie(D6e,{timeout:c4e,...O,in:_,className:Fi(hDe.mask,O==null?void 0:O.className),onClick:ie,onEntered:fe,onExited:$e}),$.children]}),de)}const dg=ks("menu-item",["content","checkbox","prefix","suffix","content","children","childrenWrap","arrow"]),Jse={small:2,medium:6,large:10};function EBt({color:a}){const l=bm(a);return B_(({spacing:_,mode:m,borderRadius:b,gray:k,easing:w,text:O})=>{const j=nl(l),$=j.alpha(.1).string(),G=j.alpha(.15).string(),B=k(m==="light"?.05:.23),de=k(m==="light"?.1:.17);return Xi`
+    `]}),c4e=300;function Hoe({container:a,forceRender:l,open:_,onMaskClick:m,singleLayer:b,onOpened:k,onClosed:w,maskProps:O,removeFocusOnOpen:j=!0,...$}){const[G,B]=Yh((Fe=!1)=>_?!0:l===!0||Fe,[_,l]),de=(typeof a=="function"?a():a)||document.body;we.useEffect(()=>{var Fe,Ue;if(_)return j&&((Ue=(Fe=document.activeElement)==null?void 0:Fe.blur)==null||Ue.call(Fe)),de.style.overflow="hidden",()=>{de.style.overflow=""}},[_]);const ie=Fe=>{var Ue;(Ue=O==null?void 0:O.onClick)==null||Ue.call(O,Fe),m==null||m(Fe)},fe=Fe=>{var Ue;(Ue=O==null?void 0:O.onEntered)==null||Ue.call(O,Fe),k==null||k()},$e=()=>{var Fe;(Fe=O==null?void 0:O.onExited)==null||Fe.call(O),w==null||w(),l===!1&&B(!1)};return G.current&&nI.createPortal(Vr("div",{...$,css:kBt,className:Fi(hDe.root,$.className),"data-open":_,"data-custom-container":de!==document.body,children:[Ie(D6e,{timeout:c4e,...O,in:_,className:Fi(hDe.mask,O==null?void 0:O.className),onClick:ie,onEntered:fe,onExited:$e}),$.children]}),de)}const dg=ks("menu-item",["content","checkbox","prefix","suffix","content","children","childrenWrap","arrow"]),Jse={small:2,medium:6,large:10};function EBt({color:a}){const l=bm(a);return B_(({spacing:_,mode:m,borderRadius:b,gray:k,easing:w,text:O})=>{const j=nl(l),$=j.alpha(.1).string(),G=j.alpha(.15).string(),B=j.alpha(.08).string(),de=k(m==="light"?.05:.23),ie=k(m==="light"?.1:.17);return Xi`
             display: flex;
             align-items: center;
             gap: ${_[3]}px;
@@ -1557,6 +1557,7 @@ Error generating stack: `+I.message+`
             cursor: pointer;
             color: ${O.primary};
             padding: ${Jse.medium}px 12px;
+            position: relative;
             -webkit-tap-highlight-color: transparent;
             
             &[data-size=small] {
@@ -1571,9 +1572,8 @@ Error generating stack: `+I.message+`
         
             transition: background-color .25s ${w.easeOut};
         
-            &:hover,
-            &[data-focused=true] {
-                background-color: ${B};
+            &:hover, &[data-focused=true] {
+                background-color: ${de};
             }
 
             &[data-emphasized=true] {
@@ -1582,13 +1582,13 @@ Error generating stack: `+I.message+`
         
             &:active {
                 transition: background-color 0s;
-                background-color: ${de};
+                background-color: ${ie};
             }
         
             &[data-selected=true] {
                 background-color: ${$};
 
-                &[data-focused=true] {
+                &:hover, &[data-focused=true] {
                     background-color: ${G};
                 }
 
@@ -1596,12 +1596,16 @@ Error generating stack: `+I.message+`
                     font-weight: bold;
                     color: ${l};
                 }
+                
+                &:active {
+                    background-color: ${B};
+                }
             }
 
             &[data-disabled=true] {
                 cursor: not-allowed;
                 color: ${O.disabled};
-                background-color: ${de};
+                background-color: ${ie};
             }
 
             .${dg.checkbox} {
@@ -6533,7 +6537,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
     100% {
         scale: 1;
     }
-`,aVt=({ref:a,color:l,rippleProps:_,children:m,...b})=>{const k=Ie(Act,{..._,ref:m?a:void 0});return m?we.cloneElement(m,{...b,ref:a},m.props.children,k):k},Act=we.memo(({ref:a,color:l="primary",..._})=>{const[m,b]=we.useState([]),k=we.useRef(null);we.useLayoutEffect(()=>{var j;const O=(j=k.current)==null?void 0:j.parentElement;if(O){const{position:$}=getComputedStyle(O);$==="static"&&(O.style.position="relative");const G=ie=>{b(fe=>[...fe,{key:U6e("touch-ripple"),r:Math.sqrt(O.clientWidth**2+O.clientHeight**2),left:ie.offsetX,top:ie.offsetY,leaving:!1}]),O.addEventListener("pointerup",B),O.addEventListener("pointerleave",B)},B=()=>{b(ie=>ie.map(fe=>({...fe,leaving:!0}))),de()};O.addEventListener("pointerdown",G);const de=()=>{O.removeEventListener("pointerup",B),O.removeEventListener("pointerleave",B)};return()=>{O.removeEventListener("pointerdown",G),de()}}},[]);const w=O=>{b(j=>j.filter($=>$.key!==O))};return Ie("div",{..._,ref:Pf(a,k),css:rVt({color:l||"primary"}),className:WDe.root,children:m.map(({key:O,r:j,left:$,top:G,leaving:B})=>Ie("div",{className:WDe.ripple,style:{width:j*2,left:$,top:G},"data-leaving":B,onTransitionEnd:()=>w(O)},O))})}),$v=ks("transfer",["panel","header","checkbox","info","title","count","list","buttons"]),sVt=Io(({spacing:a,background:l,divider:_,borderRadius:m,text:b})=>Xi`
+`,aVt=({ref:a,color:l,rippleProps:_,children:m,...b})=>{const k=Ie(Act,{..._,ref:m?a:void 0});return m?we.cloneElement(m,{...b,ref:a},m.props.children,k):k},Act=we.memo(({ref:a,color:l="primary",..._})=>{const[m,b]=we.useState([]),k=we.useRef(null);we.useLayoutEffect(()=>{var j;const O=(j=k.current)==null?void 0:j.parentElement;if(O){const $=de=>{b(ie=>[...ie,{key:U6e("touch-ripple"),r:Math.sqrt(O.clientWidth**2+O.clientHeight**2),left:de.offsetX,top:de.offsetY,leaving:!1}]),O.addEventListener("pointerup",G),O.addEventListener("pointerleave",G)},G=()=>{b(de=>de.map(ie=>({...ie,leaving:!0}))),B()};O.addEventListener("pointerdown",$);const B=()=>{O.removeEventListener("pointerup",G),O.removeEventListener("pointerleave",G)};return()=>{O.removeEventListener("pointerdown",$),B()}}},[]);const w=O=>{b(j=>j.filter($=>$.key!==O))};return Ie("div",{..._,ref:Pf(a,k),css:rVt({color:l||"primary"}),className:WDe.root,children:m.map(({key:O,r:j,left:$,top:G,leaving:B})=>Ie("div",{className:WDe.ripple,style:{width:j*2,left:$,top:G},"data-leaving":B,onTransitionEnd:()=>w(O)},O))})}),$v=ks("transfer",["panel","header","checkbox","info","title","count","list","buttons"]),sVt=Io(({spacing:a,background:l,divider:_,borderRadius:m,text:b})=>Xi`
     display: inline-flex;
     gap: ${a[3]}px;
 
@@ -7071,7 +7075,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
                     display: flex !important;
                 }
             }
-        `})]),zVt="0.0.45";/*!
+        `})]),zVt="0.0.46";/*!
  * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  * Copyright 2024 Fonticons, Inc.

package/documentation/dist/index.html

@@ -5,7 +5,7 @@
     <link rel="shortcut icon" href="/logo.png">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>Canlooks UI</title>
-  <script type="module" crossorigin src="/assets/index-gntHdyKP.js"></script>
+  <script type="module" crossorigin src="/assets/index-DpTyMkMP.js"></script>
 </head>
 <body>
 <div id="app"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.46",
+  "version": "0.0.47",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",