goobs-frontend 0.7.61 → 0.7.64

package/src/components/Form/Popup/index.tsx

@@ -8,7 +8,7 @@ import React, {
   useCallback,
 } from 'react'
 import { Close } from '@mui/icons-material'
-import { Dialog, IconButton, Box } from '@mui/material'
+import { Dialog, IconButton, Box, DialogProps } from '@mui/material'
 import ContentSection, { ContentSectionProps } from '../../Content'
 import { formContainerStyle } from './../../../styles/Form'
 import { ExtendedTypographyProps } from '../../Content/Structure/typography/useGridTypography'
@@ -34,6 +34,8 @@ export interface PopupFormProps {
   open?: boolean
   /** Callback function to handle closing the popup (only applicable for 'dialog' type) */
   onClose?: () => void
+  /** The width of the popup form in pixels */
+  width?: number
 }
 
 /**
@@ -52,11 +54,22 @@ export interface PopupFormProps {
  *   onClose={handleClose}
  *   onSubmit={handleSubmit}
  *   content={<LoginForm />}
+ *   width={400}
  * />
  */
 const PopupForm = forwardRef<HTMLFormElement, PopupFormProps>(
   (
-    { title, description, grids, onSubmit, content, popupType, open, onClose },
+    {
+      title,
+      description,
+      grids,
+      onSubmit,
+      content,
+      popupType,
+      open,
+      onClose,
+      width = 450,
+    },
     ref
   ) => {
     const internalFormRef = useRef<HTMLFormElement>(null)
@@ -151,22 +164,28 @@ const PopupForm = forwardRef<HTMLFormElement, PopupFormProps>(
       [renderHeader, handleSubmit, content, grids]
     )
 
+    const dialogProps: DialogProps = {
+      open: popupType === 'modal' ? true : open || false,
+      onClose: popupType === 'modal' ? undefined : onClose,
+      fullWidth: true,
+      maxWidth: false,
+      PaperProps: {
+        style: {
+          width: `${width}px`,
+        },
+      },
+    }
+
     if (popupType === 'modal') {
       return (
-        <Dialog
-          open={true}
-          fullWidth
-          maxWidth="sm"
-          disableEscapeKeyDown
-          hideBackdrop
-        >
+        <Dialog {...dialogProps} disableEscapeKeyDown hideBackdrop>
           {renderContent}
         </Dialog>
       )
     }
 
     return (
-      <Dialog open={open || false} onClose={onClose} fullWidth maxWidth="sm">
+      <Dialog {...dialogProps}>
         {onClose && (
           <IconButton
             size="small"

package/src/components/Icons/ShowHideEye.tsx

@@ -1,10 +1,16 @@
-// src/components/Icons/ShowHideEyeIcon.tsx
+'use client'
 
 import React from 'react'
 import VisibilityIcon from '@mui/icons-material/Visibility'
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
 
-const ShowHideEyeIcon = ({ visible }: { visible: boolean }) => {
+interface ShowHideEyeIconProps {
+  visible?: boolean
+}
+
+const ShowHideEyeIcon: React.FC<ShowHideEyeIconProps> = ({
+  visible = false,
+}) => {
   const iconStyle = { color: 'black' }
   return visible ? (
     <VisibilityIcon style={iconStyle} />

package/src/components/Nav/HorizontalVariant/index.tsx

@@ -59,10 +59,17 @@ function HorizontalVariant({
      * Asynchronously fetches the active tab values from the cache.
      */
     const fetchActiveTabValues = async () => {
-      const result = await get('activeTabValues', 'client')
-      if (result && typeof result === 'object' && 'value' in result) {
+      const result = await get('activeTabValues', 'tabStore', 'client')
+      if (
+        result &&
+        typeof result === 'object' &&
+        'type' in result &&
+        result.type === 'json' &&
+        'value' in result &&
+        typeof result.value === 'object'
+      ) {
         setActiveTabValues(
-          (result as JSONValue).value as Record<string, ActiveTabValue | null>
+          result.value as Record<string, ActiveTabValue | null>
         )
       }
     }
@@ -88,8 +95,8 @@ function HorizontalVariant({
     setActiveTabValues(updatedActiveTabValues)
     await set(
       'activeTabValues',
+      'tabStore',
       { type: 'json', value: updatedActiveTabValues } as JSONValue,
-      new Date(Date.now() + 30 * 60 * 1000),
       'client'
     )
   }

package/src/components/Nav/index.tsx

@@ -1,9 +1,8 @@
 'use client'
-import React, { useState, useEffect, useMemo } from 'react'
+import React, { useState, useMemo } from 'react'
 import type { JSX } from 'react'
 import HorizontalVariant from './HorizontalVariant'
 import VerticalVariant from './VerticalVariant'
-import { get, JSONValue } from 'goobs-cache'
 
 // Type definition for alignment options
 type Alignment = 'left' | 'center' | 'right' | 'inherit' | 'justify'
@@ -78,7 +77,7 @@ function Nav({
   // State for expanded navigation items
   const [expandedNavs, setExpandedNavs] = useState<string[]>([])
   const [expandedSubnavs, setExpandedSubnavs] = useState<string[]>([])
-  const [verticalNavWidth, setVerticalNavWidth] = useState<number>(250) // Default width
+  const [verticalNavWidth] = useState<number>(250) // Default width, no longer using goobs-cache
 
   // Memoized navigation items
   const navs = useMemo(() => {
@@ -97,17 +96,6 @@ function Nav({
     return navs
   }, [items])
 
-  // Effect to fetch vertical nav width from cache
-  useEffect(() => {
-    const fetchVerticalNavWidth = async () => {
-      const result = await get('verticalNavWidth', 'client')
-      if (result && typeof result === 'object' && 'value' in result) {
-        setVerticalNavWidth((result as JSONValue).value as number)
-      }
-    }
-    fetchVerticalNavWidth()
-  }, [])
-
   // Render vertical or horizontal variant based on orientation
   if (orientation === 'vertical') {
     return (

package/src/components/StyledComponent/adornment/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { InputAdornment, Button, Box } from '@mui/material'
 import SearchIcon from '../../Icons/Search'
 import ShowHideEyeIcon from '../../Icons/ShowHideEye'
@@ -11,6 +11,7 @@ export interface AdornmentProps {
   componentvariant: string
   iconcolor?: string
   passwordVisible?: boolean
+  togglePasswordVisibility?: () => void
   marginRight?: number | string
   handleIncrement?: () => void
   handleDecrement?: () => void
@@ -43,18 +44,15 @@ export const EndAdornment: React.FC<AdornmentProps> = props => {
   const {
     componentvariant,
     passwordVisible,
+    togglePasswordVisibility,
     handleIncrement,
     handleDecrement,
   } = props
-  const [isPasswordVisible, setIsPasswordVisible] = useState(
-    passwordVisible || false
-  )
+
   const adornmentStyle = {
     cursor: 'pointer',
   }
-  const togglePasswordVisibility = () => {
-    setIsPasswordVisible(!isPasswordVisible)
-  }
+
   // Render the show/hide eye icon for the password variant
   if (componentvariant === 'password') {
     return (
@@ -63,7 +61,7 @@ export const EndAdornment: React.FC<AdornmentProps> = props => {
         onClick={togglePasswordVisibility}
         style={adornmentStyle}
       >
-        <ShowHideEyeIcon visible={isPasswordVisible} />
+        <ShowHideEyeIcon visible={passwordVisible} />
       </InputAdornment>
     )
   }