@gem-sdk/components 4.1.0 → 4.1.1
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.
- package/dist/cjs/header/components/kind/basic/DesktopMenuItem.js +1 -1
- package/dist/cjs/header/components/kind/basic/MenuMobileItem.js +1 -1
- package/dist/esm/header/components/kind/basic/DesktopMenuItem.js +1 -1
- package/dist/esm/header/components/kind/basic/MenuMobileItem.js +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),Link=require("next/link");const DesktopMenuItem=({id:e,menu:t,arrow:
|
|
2
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),Link=require("next/link");const DesktopMenuItem=({id:e,menu:t,arrow:l,textColor:r,menuTextColor:p,depth:s=0,maxDepth:i=2,menuBg:o,typo:n,typography:g,enableHoverEffect:a,enableDropdownHoverEffect:c})=>{let u=t?.[e];if(!u||s>i)return null;let m=s===i,x=core.composeTypographyStyle(n,g),d=!!u?.childrens?.length&&!m,h=d&&!!l,f=core.getGlobalColorStateStyle("c",0===s?r:p),v=0===s&&a||0!==s&&c?f:core.filterHoverVariables(f);return jsxRuntime.jsxs("li",{className:core.cls("gp-group gp-relative gp-inline-flex gp-flex-1 gp-cursor-pointer gp-items-center gp-gap-2 gp-whitespace-nowrap gp-px-4 gp-py-2 gp-transition-colors gp-duration-300 !gp-max-w-fit hover:gp-z-50",{"gp-justify-center":0===s,"gp-min-w-[200px] gp-border-b last:gp-border-b-transparent":s>0}),style:{...x,...v},children:[u?.link?jsxRuntime.jsx(Link,{href:u.link,title:u.title,className:"gp-w-full",children:u.title}):jsxRuntime.jsx("span",{children:u?.title}),h&&jsxRuntime.jsx("span",{dangerouslySetInnerHTML:{__html:l},className:core.cls("gp-ml-auto gp-shrink-0 [&>svg]:gp-h-4 [&>svg]:gp-w-auto",{"-gp-rotate-90":1===s})}),d&&jsxRuntime.jsx("div",{className:core.cls("gp-invisible gp-absolute gp-min-w-max gp-opacity-0 gp-transition-all gp-duration-300 gp-ease-in-out [li:hover>div&]:gp-visible [li:hover>div&]:gp-opacity-100 gp-z-[100]",{"gp-left-0 gp-top-full":0===s,"gp-left-full gp-top-0 gp-translate-y-4 [li:hover>div&]:gp-translate-y-0":1===s}),children:jsxRuntime.jsx("ul",{className:core.cls("gp-flex gp-flex-col gp-shadow-card-2 gp-relative",{"gp-ml-4":1===s}),style:{...core.getGlobalColorResponsiveStyle("bgc",o)},children:u?.childrens?.map(e=>jsxRuntime.jsx(DesktopMenuItem,{id:e,menu:t,depth:s+1,maxDepth:i,arrow:l,menuTextColor:p,menuBg:o,typo:n,typography:g,enableHoverEffect:a,enableDropdownHoverEffect:c},e))})})]})};exports.default=DesktopMenuItem;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),Link=require("next/link"),React=require("react"),reactTransitionGroup=require("react-transition-group"),ChevronLeft=require("../../icons/ChevronLeft.js"),Dismiss=require("../../icons/Dismiss.js");const duration=300,defaultStyle={transitionDuration:"300ms",opacity:0},transitionStyles={entering:{opacity:1,transform:"translateX(0)"},entered:{opacity:1,transform:"translateX(0)"},exiting:{opacity:0,transform:"translateX(50px)"},exited:{opacity:0,transform:"translateX(50px)"},unmounted:{opacity:0}},MenuMobileItem=({id:e,menu:t,arrow:s,menuBg:l,menuTextColor:r,closeMenu:
|
|
2
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),Link=require("next/link"),React=require("react"),reactTransitionGroup=require("react-transition-group"),ChevronLeft=require("../../icons/ChevronLeft.js"),Dismiss=require("../../icons/Dismiss.js");const duration=300,defaultStyle={transitionDuration:"300ms",opacity:0},transitionStyles={entering:{opacity:1,transform:"translateX(0)"},entered:{opacity:1,transform:"translateX(0)"},exiting:{opacity:0,transform:"translateX(50px)"},exited:{opacity:0,transform:"translateX(50px)"},unmounted:{opacity:0}},MenuMobileItem=({id:e,menu:t,arrow:s,menuBg:l,menuTextColor:r,closeMenu:n,depth:i=0,maxDepth:a=2,typo:o,typography:p,enableHoverEffect:c})=>{let[u,g]=React.useState(!1),m=React.useRef(null),x=core.composeTypographyStyle(o,p),d=t?.[e];if(!d||i>a)return null;let f=i===a,j=!!d?.childrens?.length&&!f,y=j&&!!s,h=e=>{e.preventDefault(),e.stopPropagation(),g(e=>!e)},b=core.getGlobalColorStateStyle("c",r),R=c?b:core.filterHoverVariables(b);return jsxRuntime.jsxs("li",{className:core.cls("gp-group gp-flex gp-cursor-pointer gp-gap-2 gp-whitespace-nowrap gp-px-4 gp-py-2",{"gp-flex-col gp-border-b last:gp-border-b-transparent":i>0}),style:{...R,...core.getGlobalColorResponsiveStyle("bgc",l)},children:[jsxRuntime.jsxs("div",{className:"gp-flex gp-w-full gp-items-center gp-justify-between","aria-hidden":!0,onClick:!d?.link&&y?h:void 0,children:[d?.link?jsxRuntime.jsx(Link,{href:d.link,title:d.title,className:"gp-w-full",children:d.title}):jsxRuntime.jsx("span",{style:{...x},children:d?.title}),y&&jsxRuntime.jsx("span",{role:"button",tabIndex:0,"aria-expanded":u,onKeyDown:e=>{("Enter"===e.key||" "===e.key)&&h(e)},onClick:h,dangerouslySetInnerHTML:{__html:s},className:core.cls("gp-ml-auto gp-transition-all gp-duration-200 [&>svg]:gp-w-5",{"gp-rotate-0":i>0&&!u,"gp-rotate-180":i>0&&u,"-gp-rotate-90":0===i}),style:{...x}})]}),j&&jsxRuntime.jsx(reactTransitionGroup.Transition,{in:u,timeout:300,nodeRef:m,unmountOnExit:!0,children:e=>jsxRuntime.jsxs("div",{ref:m,className:core.cls("gp-z-10 gp-flex gp-cursor-default gp-flex-col gp-transition-all",{"gp-absolute gp-left-0 gp-top-0 gp-h-full gp-w-full":0===i}),style:{...core.getGlobalColorResponsiveStyle("bgc",l),...defaultStyle,...transitionStyles[e]},children:[0===i&&jsxRuntime.jsxs("div",{className:"gp-relative gp-flex gp-h-10 gp-w-full gp-items-center gp-justify-between gp-border-b",children:[jsxRuntime.jsx("button",{onClick:e=>{e.preventDefault(),e.stopPropagation(),g(!1)},className:"gp-relative gp-z-1 gp-flex gp-aspect-square gp-h-full gp-items-center gp-justify-center",children:jsxRuntime.jsx(ChevronLeft.default,{className:"gp-w-5"})}),jsxRuntime.jsx("div",{"aria-hidden":!0,onClick:e=>{e.preventDefault(),e.stopPropagation(),g(!1)},className:"gp-absolute gp-inset-0 gp-flex gp-items-center gp-justify-center",children:jsxRuntime.jsx("span",{className:"gp-font-semibold",children:d.title})}),jsxRuntime.jsx("button",{onClick:n,"aria-label":"Close menu",className:"gp-relative gp-z-1 gp-flex gp-aspect-square gp-h-full gp-items-center gp-justify-center",style:{...core.getGlobalColorStateStyle("c",r)},children:jsxRuntime.jsx(Dismiss.default,{className:"gp-w-5"})})]}),jsxRuntime.jsx("ul",{className:core.cls("gp-flex gp-flex-col"),children:d?.childrens?.map(e=>jsxRuntime.jsx(MenuMobileItem,{id:e,menu:t,depth:i+1,maxDepth:a,arrow:s,menuBg:l,menuTextColor:r},e))})]})})]})};exports.default=MenuMobileItem;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{jsxs as e,jsx as
|
|
2
|
+
import{jsxs as e,jsx as p}from"react/jsx-runtime";import{composeTypographyStyle as t,getGlobalColorStateStyle as l,filterHoverVariables as r,cls as g,getGlobalColorResponsiveStyle as i}from"@gem-sdk/core";import n from"next/link";let DesktopMenuItem=({id:a,menu:o,arrow:s,textColor:m,menuTextColor:c,depth:u=0,maxDepth:d=2,menuBg:f,typo:h,typography:v,enableHoverEffect:x,enableDropdownHoverEffect:y})=>{let b=o?.[a];if(!b||u>d)return null;let w=u===d,k=t(h,v),D=!!b?.childrens?.length&&!w,N=D&&!!s,I=l("c",0===u?m:c),M=0===u&&x||0!==u&&y?I:r(I);return e("li",{className:g("gp-group gp-relative gp-inline-flex gp-flex-1 gp-cursor-pointer gp-items-center gp-gap-2 gp-whitespace-nowrap gp-px-4 gp-py-2 gp-transition-colors gp-duration-300 !gp-max-w-fit hover:gp-z-50",{"gp-justify-center":0===u,"gp-min-w-[200px] gp-border-b last:gp-border-b-transparent":u>0}),style:{...k,...M},children:[b?.link?p(n,{href:b.link,title:b.title,className:"gp-w-full",children:b.title}):p("span",{children:b?.title}),N&&p("span",{dangerouslySetInnerHTML:{__html:s},className:g("gp-ml-auto gp-shrink-0 [&>svg]:gp-h-4 [&>svg]:gp-w-auto",{"-gp-rotate-90":1===u})}),D&&p("div",{className:g("gp-invisible gp-absolute gp-min-w-max gp-opacity-0 gp-transition-all gp-duration-300 gp-ease-in-out [li:hover>div&]:gp-visible [li:hover>div&]:gp-opacity-100 gp-z-[100]",{"gp-left-0 gp-top-full":0===u,"gp-left-full gp-top-0 gp-translate-y-4 [li:hover>div&]:gp-translate-y-0":1===u}),children:p("ul",{className:g("gp-flex gp-flex-col gp-shadow-card-2 gp-relative",{"gp-ml-4":1===u}),style:{...i("bgc",f)},children:b?.childrens?.map(e=>p(DesktopMenuItem,{id:e,menu:o,depth:u+1,maxDepth:d,arrow:s,menuTextColor:c,menuBg:f,typo:h,typography:v,enableHoverEffect:x,enableDropdownHoverEffect:y},e))})})]})};export{DesktopMenuItem as default};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{composeTypographyStyle as l,getGlobalColorStateStyle as r,filterHoverVariables as n,cls as
|
|
2
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{composeTypographyStyle as l,getGlobalColorStateStyle as r,filterHoverVariables as n,cls as a,getGlobalColorResponsiveStyle as p}from"@gem-sdk/core";import i from"next/link";import{useState as o,useRef as s}from"react";import{Transition as g}from"react-transition-group";import c from"../../icons/ChevronLeft.js";import m from"../../icons/Dismiss.js";let duration=300,defaultStyle={transitionDuration:"300ms",opacity:0},transitionStyles={entering:{opacity:1,transform:"translateX(0)"},entered:{opacity:1,transform:"translateX(0)"},exiting:{opacity:0,transform:"translateX(50px)"},exited:{opacity:0,transform:"translateX(50px)"},unmounted:{opacity:0}},MenuMobileItem=({id:u,menu:f,arrow:d,menuBg:h,menuTextColor:y,closeMenu:x,depth:b=0,maxDepth:v=2,typo:w,typography:N,enableHoverEffect:k})=>{let[j,C]=o(!1),D=s(null),M=l(w,N),I=f?.[u];if(!I||b>v)return null;let S=b===v,X=!!I?.childrens?.length&&!S,z=X&&!!d,P=e=>{e.preventDefault(),e.stopPropagation(),C(e=>!e)},q=r("c",y),E=k?q:n(q);return e("li",{className:a("gp-group gp-flex gp-cursor-pointer gp-gap-2 gp-whitespace-nowrap gp-px-4 gp-py-2",{"gp-flex-col gp-border-b last:gp-border-b-transparent":b>0}),style:{...E,...p("bgc",h)},children:[e("div",{className:"gp-flex gp-w-full gp-items-center gp-justify-between","aria-hidden":!0,onClick:!I?.link&&z?P:void 0,children:[I?.link?t(i,{href:I.link,title:I.title,className:"gp-w-full",children:I.title}):t("span",{style:{...M},children:I?.title}),z&&t("span",{role:"button",tabIndex:0,"aria-expanded":j,onKeyDown:e=>{("Enter"===e.key||" "===e.key)&&P(e)},onClick:P,dangerouslySetInnerHTML:{__html:d},className:a("gp-ml-auto gp-transition-all gp-duration-200 [&>svg]:gp-w-5",{"gp-rotate-0":b>0&&!j,"gp-rotate-180":b>0&&j,"-gp-rotate-90":0===b}),style:{...M}})]}),X&&t(g,{in:j,timeout:300,nodeRef:D,unmountOnExit:!0,children:l=>e("div",{ref:D,className:a("gp-z-10 gp-flex gp-cursor-default gp-flex-col gp-transition-all",{"gp-absolute gp-left-0 gp-top-0 gp-h-full gp-w-full":0===b}),style:{...p("bgc",h),...defaultStyle,...transitionStyles[l]},children:[0===b&&e("div",{className:"gp-relative gp-flex gp-h-10 gp-w-full gp-items-center gp-justify-between gp-border-b",children:[t("button",{onClick:e=>{e.preventDefault(),e.stopPropagation(),C(!1)},className:"gp-relative gp-z-1 gp-flex gp-aspect-square gp-h-full gp-items-center gp-justify-center",children:t(c,{className:"gp-w-5"})}),t("div",{"aria-hidden":!0,onClick:e=>{e.preventDefault(),e.stopPropagation(),C(!1)},className:"gp-absolute gp-inset-0 gp-flex gp-items-center gp-justify-center",children:t("span",{className:"gp-font-semibold",children:I.title})}),t("button",{onClick:x,"aria-label":"Close menu",className:"gp-relative gp-z-1 gp-flex gp-aspect-square gp-h-full gp-items-center gp-justify-center",style:{...r("c",y)},children:t(m,{className:"gp-w-5"})})]}),t("ul",{className:a("gp-flex gp-flex-col"),children:I?.childrens?.map(e=>t(MenuMobileItem,{id:e,menu:f,depth:b+1,maxDepth:v,arrow:d,menuBg:h,menuTextColor:y},e))})]})})]})};export{MenuMobileItem as default};
|