design-react-kit 5.2.0 → 5.4.0

package/src/Icon/assets/ItThreadsSquare.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItTiktok.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItTiktokSquare.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItTool.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItTwitter.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItTwitterSquare.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItUnlocked.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItUpload.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItUser.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItVideo.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItVimeo.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItVimeoSquare.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItWarning.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItWarningCircle.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItWhatsapp.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItWhatsappSquare.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItWifi.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItYoutube.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItZoomIn.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItZoomOut.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
+
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/index.ts

@@ -694,3 +694,8 @@ export function isBundledIcon(name: string): name is IconName {
 }
 
 export const allIcons = Object.keys(iconList);
+
+export interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}

package/src/Input/Input.tsx

@@ -169,6 +169,7 @@ export const Input = ({
     }
   }, [value]);
 
+  // eslint-disable-next-line prefer-const
   let { bsSize, valid, ...rest } = attributes;
 
   const Tag = getTag({ tag, plaintext, staticInput, type });
@@ -282,7 +283,7 @@ export const Input = ({
   }
 
   const clickIncrDecr = (mode: number) => {
-    var step = parseFloat(inputRef.current?.step ? inputRef.current.step : '1');
+    let step = parseFloat(inputRef.current?.step ? inputRef.current.step : '1');
     const min = parseFloat(inputRef.current?.min ? inputRef.current.min : 'Nan');
     const max = parseFloat(inputRef.current?.max ? inputRef.current.max : 'Nan');
     step = isNaN(step) ? 1 : step;
@@ -295,7 +296,7 @@ export const Input = ({
     }
     const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
     nativeInputValueSetter?.call(inputRef.current, `${newValue}`);
-    var ev2 = new Event('input', { bubbles: true });
+    const ev2 = new Event('input', { bubbles: true });
     inputRef.current?.dispatchEvent(ev2);
   };
 

package/src/List/ListItem.tsx

@@ -39,7 +39,7 @@ export const ListItem: FC<ListItemProps> & {
   children,
   ...attributes
 }) => {
-    let Tag = tag;
+    const Tag = tag;
     const classes = classNames(
       className,
       { active },
@@ -55,11 +55,9 @@ export const ListItem: FC<ListItemProps> & {
     if (href) {
       return (
         <li className={wrapperClassName} data-testid={testId}>
-          <Tag>
-            <a href={href || '#'} {...attributes} className={classes}>
-              {children}
-            </a>
-          </Tag>
+          <a href={href || '#'} {...attributes} className={classes}>
+            <div className="it-right-zone">{children}</div>
+          </a>
         </li>
       );
     }

package/src/Modal/Modal.tsx

@@ -1,16 +1,17 @@
+import classnames from 'classnames';
 import React, { FC, HTMLAttributes } from 'react';
 import { FadeProps, Modal as InnerModal } from 'reactstrap';
 import { CSSModule } from 'reactstrap/types/lib/utils';
-import classnames from 'classnames';
 
 export interface ModalProps extends HTMLAttributes<HTMLElement> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [key: string]: any;
   /** Indica lo stato del modale. Valore di default: undefined. */
   isOpen?: boolean;
   autoFocus?: boolean;
   size?: string;
   /** Funzione da chiamare quando l'utente clicca sul backdrop. Valore di default: undefined. */
-  toggle?: React.KeyboardEventHandler<any> | React.MouseEventHandler<any>;
+  toggle?: React.KeyboardEventHandler<unknown> | React.MouseEventHandler<unknown>;
   keyboard?: boolean;
   backdrop?: boolean | 'static';
   /**

package/src/Modal/ModalHeader.tsx

@@ -1,10 +1,11 @@
+import classNames from 'classnames';
 import React, { FC, HTMLAttributes } from 'react';
 import { CSSModule } from 'reactstrap/types/lib/utils';
-import classNames from 'classnames';
 import { Icon } from '../Icon/Icon';
 import { mapToCssModules } from '../utils';
 
 export interface ModalHeaderProps extends HTMLAttributes<HTMLElement> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [key: string]: any;
   cssModule?: CSSModule;
   /** Componente che conterrà il nodo titolo. Valore di default: h5 */
@@ -12,7 +13,7 @@ export interface ModalHeaderProps extends HTMLAttributes<HTMLElement> {
   /** Componente che contenitore per l'header. Valore di default: div. */
   wrapTag?: React.ElementType;
   /** Funzione da passare al tasto di chiusura nell'intestazione. Quando questa funzione non è presente il tasto di chiusura non viene mostrato. Valore di default: undefined */
-  toggle?: React.MouseEventHandler<any>;
+  toggle?: React.MouseEventHandler<unknown>;
   /** Indica il nome dell'icona da utilizzare nel titolo. */
   icon?: string;
   /** Classi da aggiungere al nodo contenitore. */
@@ -25,9 +26,8 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
   icon,
   className,
   children,
-  Util,
   toggle,
-  tag: Tag = 'h5',
+  tag: Tag = 'h2',
   wrapTag: WrapTag = 'div',
   closeAriaLabel = 'Close',
   close,
@@ -52,7 +52,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
   return (
     <WrapTag {...props} className={classes}>
       {icon != null ? <Icon icon={icon} /> : null}
-      <Tag className={mapToCssModules('modal-title', cssModule)}>{children}</Tag>
+      <Tag className={mapToCssModules('modal-title h5', cssModule)}>{children}</Tag>
       {close || CloseButton}
     </WrapTag>
   );

package/src/NavScroll/debounce.ts

@@ -4,12 +4,12 @@
  * Code: https://github.com/dej611/react-use-navscroll
  */
 
-export const debounce = (callback: Function, wait: number) => {
+export const debounce = (callback: CallableFunction, wait: number) => {
   let timeoutId: NodeJS.Timeout;
   return (...args: unknown[]) => {
     clearTimeout(timeoutId);
     timeoutId = setTimeout(() => {
-      callback.apply(null, args);
+      callback(...args);
     }, wait);
   };
 };

package/src/NavScroll/useNavScroll.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /*
  * This work derives from the React Use Navscroll library
  * Released under the MIT license by Marco Liberati

package/src/NavScroll/useSizeDetector.ts

@@ -4,7 +4,6 @@
  * Code: https://github.com/dej611/react-use-navscroll
  */
 
-/* eslint-disable no-restricted-globals */
 import { useCallback, useEffect, useState } from 'react';
 import { debounce } from './debounce';
 import { useNavScrollArgs } from './types';

package/src/Notification/Notification.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties, FC, PropsWithChildren, useEffect } from 'react';
-import { ToastProps, useToast, cssTransition } from 'react-toastify';
+import { cssTransition, ToastProps, useToast } from 'react-toastify';
 import { NotificationToastProps } from './NotificationContent';
 import { NotificationCommonProps } from './types';
 
@@ -20,7 +20,6 @@ export const Notification: FC<PropsWithChildren<NotificationProps>> = (props) =>
 
   useEffect(() => {
     if (!isIn) deleteToast();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isIn]);
 
   useEffect(() => {

package/src/Notification/NotificationContent.tsx

@@ -1,9 +1,10 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import classNames from 'classnames';
 import React, { CSSProperties, ReactNode } from 'react';
 import { Button } from '../Button/Button';
-import classNames from 'classnames';
 import { Icon } from '../Icon/Icon';
-import { usePosition } from './usePosition';
 import { NotificationCommonProps } from './types';
+import { usePosition } from './usePosition';
 
 export interface NotificationToastProps {
   /** Indica quale icona affiancare al titolo. */

package/src/Notification/core.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, isValidElement } from 'react';
 import { toast } from 'react-toastify';
-import { createNotification } from './NotificationContent';
 import type { NotificationOptions } from './NotificationContent';
+import { createNotification } from './NotificationContent';
 import { NotificationId } from './types';
 
 export function notify(title: string, options?: NotificationOptions): NotificationId;
@@ -13,7 +13,7 @@ export function notify(
   bodyOrOptions?: ReactNode | NotificationOptions,
   options?: NotificationOptions
 ): NotificationId {
-  let body: ReactNode | undefined = isReactNode(bodyOrOptions) ? bodyOrOptions : undefined;
+  const body: ReactNode | undefined = isReactNode(bodyOrOptions) ? bodyOrOptions : undefined;
   const safeOptions = isReactNode(bodyOrOptions) ? { ...options } : bodyOrOptions || {};
   const NotificationContent = createNotification(title, body, safeOptions);
   const internalOptions = {

package/src/Progress/Progress.tsx

@@ -1,6 +1,6 @@
-import React, { FC, HTMLAttributes, ElementType } from 'react';
 import classNames from 'classnames';
 import isNumber from 'is-number';
+import React, { ElementType, FC, HTMLAttributes } from 'react';
 import { logError } from '../utils';
 
 export interface ProgressProps extends HTMLAttributes<HTMLElement> {
@@ -34,7 +34,6 @@ export const Progress: FC<ProgressProps> = ({
   indeterminate = false,
   color,
   testId,
-  role = 'progressbar',
   ...attributes
 }) => {
   const Tag = tag;

package/src/ResponsiveImage/ResponsiveImage.tsx

@@ -8,16 +8,40 @@ export interface ResponsiveImageProps extends HTMLAttributes<HTMLImageElement> {
   /** Il titolo dell'immagine */
   title?: string;
   testId?: string;
+  /** Indica se l'immagine deve essere considerata proporzionata */
+  proportioned?: boolean;
 }
 
-export const ResponsiveImage: FC<ResponsiveImageProps> = ({ alt, testId, ...attributes }) => {
-  return (
-    <div className='img-responsive-wrapper' data-testid={testId}>
-      <div className='img-responsive'>
-        <div className='img-wrapper'>
-          <img {...attributes} alt={alt} />
+export const ResponsiveImage: FC<ResponsiveImageProps> = ({ alt, testId, proportioned=false, children, ...attributes }) => {
+  if (children) {
+    if (proportioned) {
+      return(
+        <div className='img-responsive-wrapper'>
+          <div className='img-responsive'>
+            <figure className='img-wrapper'>
+              <img {...attributes} alt={alt}  className='figure-img img-fluid rounded' />
+              {children}
+            </figure>
+          </div>
+        </div>
+      )
+    } else {
+      return(
+        <figure className='figure img-full w-100 img-responsive-wrapper'>
+          <img {...attributes} alt={alt}  className='figure-img img-fluid rounded' />
+          {children}
+        </figure>
+      )
+    }
+  } else {
+    return (
+      <div className='img-responsive-wrapper' data-testid={testId}>
+        <div className='img-responsive'>
+          <div className='img-wrapper'>
+            <img {...attributes} alt={alt} />
+          </div>
         </div>
       </div>
-    </div>
-  );
+    );
+  }
 };

package/src/Stepper/StepperHeader.tsx

@@ -1,5 +1,5 @@
-import React, { FC, HTMLAttributes, ElementType } from 'react';
 import classNames from 'classnames';
+import React, { ElementType, FC, HTMLAttributes } from 'react';
 
 export interface StepperHeaderProps extends HTMLAttributes<HTMLElement> {
   /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
@@ -12,7 +12,7 @@ export interface StepperHeaderProps extends HTMLAttributes<HTMLElement> {
 export const StepperHeader: FC<StepperHeaderProps> = ({ tag = 'div', testId, className, children, ...attributes }) => {
   const Tag = tag;
   const wrapperClass = classNames('steppers-header', className);
-  // @ts-ignore not recognize children's props
+  // @ts-expect-error not recognize children's props
   const isMobile = children?.props?.variant === 'mobile';
 
   return (

package/src/ThumbNav/ThumbNavItem.tsx

@@ -21,7 +21,6 @@ export const ThumbNavItem: FC<ThumbNavItemProps> = ({
 
   return (
     <li {...attributes} data-testid={testId}>
-      <img src={'https://picsum.photos/240/160?image=1056'} className='thumb-nav-resizer' aria-hidden='true' alt='' />
       <a href={targetUrl} className={classes}>
         <img src={imageUrl} alt={actionDescription} />
       </a>

package/src/Timeline/TimelinePin.tsx

@@ -1,4 +1,4 @@
-import React, { FC, HTMLAttributes } from 'react';
+import React, { ElementType, FC, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
 import { Icon } from '../Icon/Icon';
@@ -13,6 +13,10 @@ export interface TimelinePinProps extends HTMLAttributes<HTMLElement> {
    * @deprecated. Utilizzare `iconName`.
    * */
   icon?: string;
+  /**
+   * Titolo dell'icona all'interno del TimelinePin.
+   * */
+  iconTitle?: string;
   /** Etichetta da associare all'elemento */
   label: string;
   /** Quando abilitato indica che l'evento TimelinePin è collocato nel presente (azzurro) */
@@ -21,18 +25,22 @@ export interface TimelinePinProps extends HTMLAttributes<HTMLElement> {
   nowText?: string;
   /** Quando abilitato indica che l'evento TimelinePin è collocato nel passato (blu scuro) */
   past?: boolean;
+  /** Tag del pin da utilizzare a seconda della struttura */
+  tag?: ElementType;
   testId?: string;
 }
 
 export const TimelinePin: FC<TimelinePinProps> = ({
   iconName = 'it-code-circle',
   icon = 'it-code-circle',
+  iconTitle = '',
   label = ' ',
   past,
   now,
   nowText,
   testId,
   className,
+  tag='h3',
   ...attributes
 }) => {
   const { children, ...rest } = attributes;
@@ -43,7 +51,7 @@ export const TimelinePin: FC<TimelinePinProps> = ({
   });
   const pinIcon = (
     <div className='pin-icon'>
-      <Icon icon={iconName || icon} />
+      <Icon icon={iconName || icon} role="img" title={iconTitle} />
     </div>
   );
   const pinLabel = (
@@ -53,14 +61,15 @@ export const TimelinePin: FC<TimelinePinProps> = ({
   );
 
   const pinTextNow = now && <span className='it-now-label d-none d-lg-flex'>{nowText}</span>;
+  const Tag = tag;
 
   return (
     <div className={classes} data-testid={testId}>
       {pinTextNow}
-      <div className={innerClasses} {...rest}>
+      <Tag className={innerClasses} {...rest}>
         {pinIcon}
         {pinLabel}
-      </div>
+      </Tag>
       {children}
     </div>
   );

package/src/Toggle/Toggle.tsx

@@ -21,9 +21,9 @@ export interface ToggleProps extends InputProps {
 export const Toggle: FC<ToggleProps> = ({ label, testId, ...rest }) => {
   return (
     <div className='toggles' data-testid={testId}>
-      <Label check>
+      <Label check for={rest.id}>
         {label}
-        <Input {...rest} type='checkbox' />
+        <Input {...rest} type='checkbox' aria-describedby={rest.id ? rest.id + 'Description' : '' } />
         <span className='lever' />
       </Label>
     </div>

package/src/Toolbar/ToolbarDividerItem.tsx

@@ -1,3 +1,3 @@
 import React from 'react';
 
-export const ToolbarDividerItem = () => <li className='toolbar-divider' aria-hidden={true} />;
+export const ToolbarDividerItem = () => <li className='toolbar-divider' role='separator' aria-orientation='vertical' />;

package/src/Toolbar/ToolbarItem.tsx

@@ -67,8 +67,6 @@ export interface ToolbarItemProps extends HTMLAttributes<HTMLElement> {
   onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
 }
 
-const disabledMessage = ' elemento disabilitato';
-
 function ToolbarItemLabel({
   label,
   size,
@@ -83,12 +81,11 @@ function ToolbarItemLabel({
   const showSrText = size && size !== 'large';
   if (disabled) {
     if (!label || showSrText) {
-      return <span className='visually-hidden'>{disabledMessage}</span>;
+      return <span></span>;
     }
     return (
       <>
         <span className='toolbar-label'>{label}</span>
-        <span className='visually-hidden'>{disabledMessage}</span>
       </>
     );
   }