@nuskin/foundation-ui-components 1.19.1 → 1.19.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.19.1",
+    "version": "1.19.3",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {
@@ -46,7 +46,7 @@
         "@mui/material": "5.14.16",
         "@mui/utils": "^5.14.16",
         "@next/font": "13.5.6",
-        "@nuskin/foundation-theme": "^1.4.0",
+        "@nuskin/foundation-theme": "1.4.1",
         "@types/react": "^18.2.34",
         "@types/react-dom": "^18.2.14",
         "cliui": "^8.0.1",

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -1,12 +1,29 @@
-import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
-import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
+import React, {
+    PropsWithChildren,
+    useEffect,
+    useRef,
+    useState,
+} from 'react';
+
+import {
+    Autocomplete,
+    AutocompleteRenderInputParams,
+} from '@mui/material';
 
 import { LineLoader } from './helper/LineLoader';
 import { RecentClearAll } from './helper/RecentClearAll';
-import { renderGroupBy, renderGroupName, renderOptionLabel } from './helper/renderGroupName';
+import {
+    renderGroupBy,
+    renderGroupName,
+    renderOptionLabel,
+} from './helper/renderGroupName';
 import { SeeMoreButton } from './helper/SeeMoreButton';
 import { StyledTextField } from './NsAutocomplete.styled';
-import { ComponentBoxProps, NsAutocompleteProps, OptionsProps } from './types.d';
+import {
+    ComponentBoxProps,
+    NsAutocompleteProps,
+    OptionsProps,
+} from './types.d';
 
 const noop = () => {};
 const NsAutocomplete = ({
@@ -38,7 +55,7 @@ const NsAutocomplete = ({
 
     const renderInput = (params: AutocompleteRenderInputParams) => (
         <StyledTextField
-            {...params}
+            {...(params as any)}
             placeholder={placeholder}
             InputProps={{
                 ...params.InputProps,
@@ -53,7 +70,7 @@ const NsAutocomplete = ({
         OptionsUI ? (
             <OptionsUI {...props} option={option} key={props.id} />
         ) : (
-            <li {...props} key={props.id}>
+            <li {...(props as any)} key={props.id}>
                 {option.value}
             </li>
         );

package/src/common/modal/NsModal.tsx

@@ -1,21 +1,27 @@
 import React from 'react';
+
 import Dialog from '@mui/material/Dialog';
-import { useMediaQuery } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
+
 import { ModalVariantMap } from './model/NsModalVariantMap';
 import { NsModalProps } from './types';
 
 const NsModal = (props: NsModalProps) => {
-    const { open, handleClose, header, body, additionalProps, footer, statusInfo, variant = 'default' } = props;
+    const {
+        open,
+        handleClose,
+        header,
+        body,
+        additionalProps,
+        footer,
+        statusInfo,
+        variant = 'default',
+        fullScreen,
+    } = props;
 
     const { className, scrollType = 'paper', ariaLabel } = additionalProps || {};
 
     const { ariaLabelledby = 'alert-dialog-title', ariaDescribedby = 'alert-dialog-description' } = ariaLabel || {};
 
-    const theme = useTheme();
-
-    const fullScreen: boolean = useMediaQuery(theme.breakpoints.down('md'));
-
     const Component = ModalVariantMap[variant];
 
     return (

package/src/common/modal/types.ts

@@ -9,6 +9,7 @@ export interface DialogTitleProps {
 
 export interface NsModalProps extends NsModalComponentProps {
     open: boolean;
+    fullScreen?: boolean;
 }
 
 export interface NsModalComponentProps {

package/src/common/typography/NsTypography.spec.tsx

@@ -2,21 +2,15 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import NsTypography from './NsTypography';
-import GlobalFontInter from './GlobalFontInter';
 
 describe('GlobalFontInter', () => {
-    it('1. should apply the Inter font to the body element', () => {
-        render(<GlobalFontInter />);
-        const fontStyle = window.getComputedStyle(document.body).fontFamily;
-        expect(fontStyle).toContain('Inter');
-    });
-    it('2. renders without crashing', () => {
+    it('1. renders without crashing', () => {
         const text = 'Hello Typo!';
         const { getByText } = render(<NsTypography variant={'h1'}>{text}</NsTypography>);
         expect(getByText(text)).toBeInTheDocument();
     });
 
-    it('3. renders without crashing with p-l variant', () => {
+    it('2. renders without crashing with p-l variant', () => {
         const text = 'Hello Typo!';
         const { getByText } = render(
             <NsTypography
@@ -33,7 +27,7 @@ describe('GlobalFontInter', () => {
         expect(getByText(text)).toBeInTheDocument();
     });
 
-    it('4. should not render with default color primary when color is passed', () => {
+    it('3. should not render with default color primary when color is passed', () => {
         const text = 'Hello Typo!';
         const { getByText } = render(
             <NsTypography