oddsgate-ds 1.0.185 → 1.0.186

package/dist/esm/types/components/atoms/LegalLinksDropdown/LegalLinksDropdown.interface.d.ts

@@ -5,9 +5,10 @@ export type ILegalLinksDropdown = {
     style?: CSSProperties;
     children: React.ReactNode;
 };
-export type ILegalLinksDropdownContainer = {
+export interface ILegalLinksDropdownContainer {
     isVisible: boolean;
-};
+    openUpward?: boolean;
+}
 export type ILegalLinksDropdownItem = {
     className?: string;
     style?: CSSProperties;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.185",
+  "version": "1.0.186",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/atoms/LegalLinks/LegalLinks.component.tsx

@@ -22,7 +22,6 @@ const LegalLinks = ({
               <LegalLinksDropdown title={link.label} className="font-epilogue">
                 {link.children.map((childLink, childIndex) => {
                   if (!childLink.label || !childLink.url) return null
-                  
                   return (
                     <LegalLinksDropdownItem key={`childLink-${childIndex}`}>
                       <a

package/src/components/atoms/LegalLinks/LegalLinks.stories.tsx

@@ -16,45 +16,117 @@ export const Example: StoryObj<ILegalLinks> = {
   args: {
     links: [
       {
-        'label': 'Terms of Service',
-        'url': 'https://www.miew.com/terms-of-service'
+        label: 'Terms of Service',
+        url: 'https://www.miew.com/terms-of-service'
       },
       {
-        'label': 'Privacy Policy',
-        'url': 'https://www.miew.com/privacy-policy'
+        label: 'Privacy Policy',
+        url: 'https://www.miew.com/privacy-policy'
       },
       {
-        'label': 'Cookie Policy',
-        'url': 'https://www.miew.com/cookie-policy'
+        label: 'Cookie Policy',
+        url: 'https://www.miew.com/cookie-policy'
       },
       {
-        'label': 'Accessibility Statement',
-        'url': 'https://www.miew.com/accessibility-statement',
-        'children': [
+        label: 'Accessibility Statement',
+        url: 'https://www.miew.com/accessibility-statement',
+        children: [
           {
-            'label': 'Sub Link 1',
-            'url': 'https://www.miew.com/accessibility-statement/sublink1'
+            label: 'Sub Link 1',
+            url: 'https://www.miew.com/accessibility-statement/sublink1'
           },
           {
-            'label': 'Sub Link 2',
-            'url': 'https://www.miew.com/accessibility-statement/sublink2'
+            label: 'Sub Link 2',
+            url: 'https://www.miew.com/accessibility-statement/sublink2'
           },
           {
-            'label': 'Sub Link 3',
-            'url': 'https://www.miew.com/accessibility-statement/sublink3'
+            label: 'Sub Link 3',
+            url: 'https://www.miew.com/accessibility-statement/sublink3'
           },
           {
-            'label': 'Sub Link 4',
-            'url': 'https://www.miew.com/accessibility-statement/sublink4'
+            label: 'Sub Link 4',
+            url: 'https://www.miew.com/accessibility-statement/sublink4'
           }
         ]
       }
     ]
   },
   decorators: [
-    (Story) => (
-      <div style={{ background: 'black', padding: '2rem' }}>
-        {Story()}
+    Story => (
+      <div style={{ background: 'black', padding: '2rem' }}>{Story()}</div>
+    )
+  ]
+}
+
+export const TestUpwardOpening: StoryObj<ILegalLinks> = {
+  args: {
+    links: [
+      {
+        label: 'Regular Link',
+        url: 'https://www.miew.com/terms'
+      },
+      {
+        label: 'Dropdown Menu',
+        url: 'https://www.miew.com/dropdown',
+        children: [
+          {
+            label: 'First Child Link',
+            url: 'https://www.miew.com/child1'
+          },
+          {
+            label: 'Second Child Link',
+            url: 'https://www.miew.com/child2'
+          },
+          {
+            label: 'Third Child Link',
+            url: 'https://www.miew.com/child3'
+          },
+          {
+            label: 'Fourth Child Link',
+            url: 'https://www.miew.com/child4'
+          },
+          {
+            label: 'Fifth Child Link',
+            url: 'https://www.miew.com/child5'
+          }
+        ]
+      },
+      {
+        label: 'Another Link',
+        url: 'https://www.miew.com/another'
+      }
+    ]
+  },
+  decorators: [
+    Story => (
+      <div
+        style={{
+          background: 'black',
+          height: '100vh',
+          display: 'flex',
+          alignItems: 'flex-end',
+          justifyContent: 'center',
+          paddingBottom: '50px'
+        }}
+      >
+        <div
+          style={{
+            border: '1px dashed #666',
+            padding: '20px',
+            borderRadius: '8px'
+          }}
+        >
+          <p
+            style={{
+              color: 'white',
+              marginBottom: '20px',
+              textAlign: 'center'
+            }}
+          >
+            Test upward opening
+          </p>
+          {Story()}
+        </div>
       </div>
     )
   ]

package/src/components/atoms/LegalLinksDropdown/LegalLinksDropdown.component.tsx

@@ -1,5 +1,8 @@
-import { ILegalLinksDropdown, ILegalLinksDropdownItem } from './LegalLinksDropdown.interface'
-import React, { useState } from 'react'
+import {
+  ILegalLinksDropdown,
+  ILegalLinksDropdownItem
+} from './LegalLinksDropdown.interface'
+import React, { useState, useRef, useEffect } from 'react'
 import {
   StyledLegalLinksDropdown,
   StyledLegalLinksDropdownContainer,
@@ -17,14 +20,43 @@ const LegalLinksDropdown = ({
   style,
   ...props
 }: ILegalLinksDropdown) => {
-  const [isVisible, setIsVisible] = useState(false)
+  const [isOpen, setIsOpen] = useState(false)
+  const [openUpward, setOpenUpward] = useState(false)
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLUListElement>(null)
+
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+      timeoutRef.current = null
+    }
+    setIsOpen(true)
+  }
+
+  const handleMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => {
+      setIsOpen(false)
+    }, 100)
+  }
+
+  useEffect(() => {
+    if (isOpen && dropdownRef.current && containerRef.current) {
+      const triggerRect = dropdownRef.current.getBoundingClientRect()
+      const containerHeight = containerRef.current.offsetHeight
+      const spaceBelow = window.innerHeight - triggerRect.bottom
+
+      setOpenUpward(spaceBelow < containerHeight)
+    }
+  }, [isOpen])
 
   return (
     <StyledLegalLinksDropdown
-      className={className} 
+      ref={dropdownRef}
+      className={className}
       style={style}
-      onMouseEnter={() => setIsVisible(true)}
-      onMouseLeave={() => setIsVisible(false)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
     >
       <StyledLegalLinksDropdownTrigger>
         <StyledLegalLinksDropdownTitle>{title}</StyledLegalLinksDropdownTitle>
@@ -32,7 +64,13 @@ const LegalLinksDropdown = ({
           <Icon icon="icon-chevron-down" />
         </StyledLegalLinksDropdownIcon>
       </StyledLegalLinksDropdownTrigger>
-      <StyledLegalLinksDropdownContainer isVisible={isVisible}>
+      <StyledLegalLinksDropdownContainer
+        ref={containerRef}
+        isVisible={isOpen}
+        openUpward={openUpward}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
         {children}
       </StyledLegalLinksDropdownContainer>
     </StyledLegalLinksDropdown>
@@ -57,4 +95,4 @@ export const LegalLinksDropdownItem = ({
       {children}
     </StyledLegalLinksDropdownItem>
   )
-}
+}

package/src/components/atoms/LegalLinksDropdown/LegalLinksDropdown.interface.ts

@@ -1,19 +1,20 @@
-import { CSSProperties } from 'react';
+import { CSSProperties } from 'react'
 
 export type ILegalLinksDropdown = {
   title?: string
-  className?: string;
+  className?: string
   style?: CSSProperties
   children: React.ReactNode
 }
 
-export type ILegalLinksDropdownContainer = {
+export interface ILegalLinksDropdownContainer {
   isVisible: boolean
+  openUpward?: boolean
 }
 
 export type ILegalLinksDropdownItem = {
-  className?: string;
+  className?: string
   style?: CSSProperties
   children: React.ReactNode
   onClick?: () => void
-}
+}

package/src/components/atoms/LegalLinksDropdown/LegalLinksDropdown.theme.ts

@@ -1,11 +1,15 @@
-import { ILegalLinksDropdown, ILegalLinksDropdownContainer, ILegalLinksDropdownItem } from './LegalLinksDropdown.interface';
-import { colors, radius, responsiveMedia, shadows } from '@/styles/variables';
-import styled from 'styled-components';
+import {
+  ILegalLinksDropdown,
+  ILegalLinksDropdownContainer,
+  ILegalLinksDropdownItem
+} from './LegalLinksDropdown.interface'
+import { colors, radius, responsiveMedia, shadows } from '@/styles/variables'
+import styled from 'styled-components'
 
 export const StyledLegalLinksDropdown = styled.div<ILegalLinksDropdown>`
   position: relative;
   display: inline-flex;
-`;
+`
 
 export const StyledLegalLinksDropdownTrigger = styled.div`
   font-family: var(--alternative-fontFamily);
@@ -16,7 +20,7 @@ export const StyledLegalLinksDropdownTrigger = styled.div`
   display: inline-flex;
   gap: 4px;
   align-items: center;
-  
+
   &:hover {
     opacity: 0.6;
   }
@@ -24,19 +28,19 @@ export const StyledLegalLinksDropdownTrigger = styled.div`
   @media only screen and (min-width: ${responsiveMedia}) {
     font-size: 15px;
   }
-`;
+`
 
 export const StyledLegalLinksDropdownTitle = styled.span`
   text-decoration: underline;
-`;
+`
 
 export const StyledLegalLinksDropdownContainer = styled.ul<ILegalLinksDropdownContainer>`
   position: absolute;
-  top: 100%;
+  ${props => (props.openUpward ? 'bottom: 100%;' : 'top: 100%;')}
   left: 50%;
   transform: translateX(-50%);
 
-  margin-top: 2px;
+  ${props => (props.openUpward ? 'margin-bottom: 2px;' : 'margin-top: 2px;')}
   background: ${colors.primary50};
   box-shadow: ${shadows.sm};
   border-radius: ${radius.md};
@@ -44,17 +48,23 @@ export const StyledLegalLinksDropdownContainer = styled.ul<ILegalLinksDropdownCo
   min-width: 200px;
   white-space: nowrap;
 
-  opacity: ${props => props.isVisible ? 1 : 0};
-  pointer-events: ${props => props.isVisible ? "auto" : "none"};
-  visibility: ${props => props.isVisible ? "visible" : "hidden"};
+  opacity: ${props => (props.isVisible ? 1 : 0)};
+  pointer-events: ${props => (props.isVisible ? 'auto' : 'none')};
+  visibility: ${props => (props.isVisible ? 'visible' : 'hidden')};
 
-  transform: ${props => props.isVisible 
-    ? "translateX(-50%) translateY(0)" 
-    : "translateX(-50%) translateY(-10px)"};
+  transform: ${props => {
+    const baseTransform = 'translateX(-50%)'
+    if (!props.isVisible) {
+      return props.openUpward
+        ? `${baseTransform} translateY(10px)`
+        : `${baseTransform} translateY(-10px)`
+    }
+    return `${baseTransform} translateY(0)`
+  }};
 
   z-index: 100;
   transition: all 0.2s ease-in-out;
-`;
+`
 
 export const StyledLegalLinksDropdownItem = styled.li<ILegalLinksDropdownItem>`
   display: flex;
@@ -64,23 +74,23 @@ export const StyledLegalLinksDropdownItem = styled.li<ILegalLinksDropdownItem>`
   color: ${colors.gray50};
   background-color: ${colors.primary50};
   transition: background-color 0.3s linear;
-  
+
   &:first-child {
     border-radius: ${radius.md} ${radius.md} 0 0;
   }
-  
+
   &:last-child {
     border-radius: 0 0 ${radius.md} ${radius.md};
   }
-  
+
   &:first-child:last-child {
     border-radius: ${radius.md};
   }
-  
+
   &:hover {
     background-color: ${colors.third10};
   }
-  
+
   a {
     font-family: var(--alternative-fontFamily);
     text-decoration: none;
@@ -89,7 +99,7 @@ export const StyledLegalLinksDropdownItem = styled.li<ILegalLinksDropdownItem>`
     color: inherit;
     width: 100%;
     display: block;
-    
+
     &:hover {
       opacity: 1;
     }