design-react-kit 5.0.0-2 → 5.0.0-4

package/src/Input/Input.tsx

@@ -1,22 +1,9 @@
-import React, {
-  InputHTMLAttributes,
-  ElementType,
-  Ref,
-  ReactNode,
-  useCallback,
-  useState
-} from 'react';
+import React, { InputHTMLAttributes, ElementType, Ref, ReactNode, useCallback, useState } from 'react';
 import isNumber from 'is-number';
 
 import { InputContainer } from './InputContainer';
 import { Icon } from '../Icon/Icon';
-import {
-  getTag,
-  getFormControlClass,
-  getClasses,
-  getInfoTextControlClass,
-  useFocus
-} from './utils';
+import { getTag, getFormControlClass, getClasses, getValidationTextControlClass, useFocus } from './utils';
 import type { CSSModule } from 'reactstrap/types/lib/utils';
 import { notifyDeprecation } from '../utils';
 // taken from reactstrap types
@@ -57,6 +44,8 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   label?: string | ReactNode;
   /** Testo di esempio da utilizzare per il campo. */
   placeholder?: string;
+  /** Testo di validazione per l'elemento del moduleo form. */
+  validationText?: string;
   /** Testo di aiuto per l'elemento del moduleo form. Richiede che il componente `Input` abbia la prop `id` impostata. */
   infoText?: string;
   /** Il valore nel campo Input. */
@@ -114,6 +103,7 @@ export const Input = ({
   plaintext,
   innerRef,
   label,
+  validationText,
   infoText,
   placeholder,
   normalized,
@@ -128,11 +118,10 @@ export const Input = ({
   const [isHidden, setHidden] = useState(true);
   const [hasIcon, toggleIcon] = useState(true);
 
-  const { toggleFocusLabel, toggleBlurLabel, isFocused } =
-    useFocus<HTMLInputElement>({
-      onFocus: attributes.onFocus,
-      onBlur: attributes.onBlur
-    });
+  const { toggleFocusLabel, toggleBlurLabel, isFocused } = useFocus<HTMLInputElement>({
+    onFocus: attributes.onFocus,
+    onBlur: attributes.onBlur
+  });
 
   const toggleShow = useCallback(() => {
     setHidden(!isHidden);
@@ -152,10 +141,7 @@ export const Input = ({
     },
     cssModule
   );
-  const infoTextControlClass = getInfoTextControlClass(
-    { valid, invalid },
-    cssModule
-  );
+  const validationTextControlClass = getValidationTextControlClass({ valid, invalid }, cssModule);
 
   if (state && valid == null && invalid == null) {
     invalid = state === 'danger';
@@ -168,9 +154,7 @@ export const Input = ({
     ['aria-describedby']?: string;
   } = {};
   if (size && !isNumber(size)) {
-    notifyDeprecation(
-      'Please use the prop "bsSize" instead of the "size" to bootstrap\'s input sizing.'
-    );
+    notifyDeprecation('Please use the prop "bsSize" instead of the "size" to bootstrap\'s input sizing.');
     bsSize = size as unknown as InputProps['bsSize'];
   } else {
     extraAttributes.size = size;
@@ -188,13 +172,7 @@ export const Input = ({
 
   if (
     attributes.children &&
-    !(
-      plaintext ||
-      staticInput ||
-      type === 'select' ||
-      typeof Tag !== 'string' ||
-      Tag === 'select'
-    )
+    !(plaintext || staticInput || type === 'select' || typeof Tag !== 'string' || Tag === 'select')
   ) {
     notifyDeprecation(
       `Input with a type of "${type}" cannot have children. Please use "value"/"defaultValue" instead.`
@@ -204,12 +182,12 @@ export const Input = ({
 
   const inputPassword = extraAttributes.type === 'password';
 
-  const indeterminateCheckboxInput =
-    type === 'checkbox' && className?.includes('semi-checked');
+  const indeterminateCheckboxInput = type === 'checkbox' && className?.includes('semi-checked');
 
   // Styling
-  const { activeClass, infoTextClass, inputClasses, wrapperClass } = getClasses(
+  const { activeClass, validationTextClass, inputClasses, wrapperClass } = getClasses(
     className,
+    type,
     {
       valid,
       invalid,
@@ -217,11 +195,11 @@ export const Input = ({
       placeholder,
       value,
       label,
-      infoText,
+      validationText,
       normalized: Boolean(normalized),
       inputPassword,
       formControlClass,
-      infoTextControlClass,
+      validationTextControlClass,
       isFocused: isFocused,
       originalWrapperClass: originalWrapperClass || originalWrapperClassOld
     },
@@ -241,10 +219,11 @@ export const Input = ({
   const containerProps = {
     id,
     infoId,
+    infoText,
     activeClass,
     label,
-    infoTextClass,
-    infoText,
+    validationTextClass,
+    validationText,
     wrapperClass
   };
 
@@ -328,27 +307,13 @@ export const Input = ({
       </InputContainer>
     );
   }
-  if (label || infoText) {
+  if (label || validationText) {
     return (
       <InputContainer {...containerProps}>
-        <Tag
-          {...rest}
-          {...extraAttributes}
-          {...sharedAttributes}
-          className={inputClasses}
-          data-testid={testId}
-        />
+        <Tag {...rest} {...extraAttributes} {...sharedAttributes} className={inputClasses} data-testid={testId} />
       </InputContainer>
     );
   }
 
-  return (
-    <Tag
-      {...rest}
-      {...extraAttributes}
-      className={inputClasses}
-      {...sharedAttributes}
-      data-testid={testId}
-    />
-  );
+  return <Tag {...rest} {...extraAttributes} className={inputClasses} {...sharedAttributes} data-testid={testId} />;
 };

package/src/Input/InputContainer.tsx

@@ -3,22 +3,24 @@ import React, { FC, HTMLAttributes, ReactNode } from 'react';
 export interface InputContainerProps extends HTMLAttributes<HTMLElement> {
   wrapperClass: string;
   activeClass: string;
-  infoTextClass: string;
+  validationTextClass: string;
   label: string | ReactNode | undefined;
-  infoText: string | undefined;
+  validationText: string | undefined;
   id: string | undefined;
   infoId: string | undefined;
+  infoText: string | undefined;
   testId?: string;
 }
 
 export const InputContainer: FC<InputContainerProps> = ({
   id,
   infoId,
+  infoText,
   testId,
   activeClass,
   label,
-  infoTextClass,
-  infoText,
+  validationTextClass,
+  validationText,
   wrapperClass,
   children
 }) => {
@@ -28,9 +30,12 @@ export const InputContainer: FC<InputContainerProps> = ({
       <label htmlFor={id} className={activeClass}>
         {label}
       </label>
-      <small id={infoId} className={infoTextClass}>
-        {infoText}
-      </small>
+      {infoText && (
+        <small id={infoId} className='form-text'>
+          {infoText}
+        </small>
+      )}
+      <div className={validationTextClass}>{validationText}</div>
     </div>
   );
 };

package/src/Input/TextArea.tsx

@@ -1,15 +1,16 @@
 import React, { Ref, ReactNode, TextareaHTMLAttributes } from 'react';
 
 import { InputContainer } from './InputContainer';
-import { getClasses, getInfoTextControlClass, useFocus } from './utils';
+import { getClasses, getValidationTextControlClass, useFocus } from './utils';
 import type { CSSModule } from 'reactstrap/types/lib/utils';
 
-export interface TextAreaProps
-  extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   /** Etichetta del campo TextArea. */
   label?: string | ReactNode;
   /** Testo di esempio da utilizzare per il campo. */
   placeholder?: string;
+  /** Testo di validazione per l'elemento del moduleo */
+  validationText?: string;
   /** Testo di aiuto per l'elemento del moduleo form. Richiede che il componente `TextArea` abbia la prop `id` impostata. */
   infoText?: string;
   /** Il valore nel campo TextArea. */
@@ -38,6 +39,7 @@ export const TextArea = ({
   cssModule,
   innerRef,
   label,
+  validationText,
   infoText,
   placeholder,
   normalized,
@@ -48,16 +50,12 @@ export const TextArea = ({
   testId,
   ...attributes
 }: TextAreaProps) => {
-  const { toggleFocusLabel, toggleBlurLabel, isFocused } =
-    useFocus<HTMLTextAreaElement>({
-      onFocus: attributes.onFocus,
-      onBlur: attributes.onBlur
-    });
+  const { toggleFocusLabel, toggleBlurLabel, isFocused } = useFocus<HTMLTextAreaElement>({
+    onFocus: attributes.onFocus,
+    onBlur: attributes.onBlur
+  });
 
-  const infoTextControlClass = getInfoTextControlClass(
-    { valid, invalid },
-    cssModule
-  );
+  const validationTextControlClass = getValidationTextControlClass({ valid, invalid }, cssModule);
 
   const extraAttributes: { ['aria-describedby']?: string } = {};
 
@@ -68,17 +66,18 @@ export const TextArea = ({
   }
 
   // Styling
-  const { activeClass, infoTextClass, inputClasses, wrapperClass } = getClasses(
+  const { activeClass, validationTextClass, inputClasses, wrapperClass } = getClasses(
     className,
+    'textarea',
     {
       valid,
       invalid,
       placeholder,
       value,
       label,
-      infoText,
+      validationText,
       normalized: Boolean(normalized),
-      infoTextControlClass,
+      validationTextControlClass,
       isFocused,
       originalWrapperClass
     },
@@ -98,10 +97,11 @@ export const TextArea = ({
   const containerProps = {
     id,
     infoId,
+    infoText,
     activeClass,
     label,
-    infoTextClass,
-    infoText,
+    validationTextClass,
+    validationText,
     wrapperClass
   };
 
@@ -134,7 +134,7 @@ export const TextArea = ({
       </InputContainer>
     );
   }
-  if (label || infoText) {
+  if (label || validationText) {
     return (
       <InputContainer {...containerProps}>
         <textarea

package/src/Input/utils.tsx

@@ -10,13 +10,7 @@ type TypeProps = Pick<InputProps, 'plaintext' | 'type'> & {
 };
 type FormControlProps = Pick<InputProps, 'addon' | 'normalized'> & TypeProps;
 
-function getFormControlClassInternal({
-  plaintext,
-  staticInput,
-  type = 'text',
-  addon,
-  normalized
-}: FormControlProps) {
+function getFormControlClassInternal({ plaintext, staticInput, type = 'text', addon, normalized }: FormControlProps) {
   const formControlClass = 'form-control';
   if (plaintext || staticInput || normalized) {
     return `${formControlClass}-plaintext`;
@@ -32,17 +26,11 @@ function getFormControlClassInternal({
   return formControlClass;
 }
 
-export function getFormControlClass(
-  props: FormControlProps,
-  cssModule?: CSSModule
-) {
+export function getFormControlClass(props: FormControlProps, cssModule?: CSSModule) {
   return mapToCssModules(getFormControlClassInternal(props), cssModule);
 }
 
-export function getInfoTextControlClass(
-  { invalid }: ValidationProps,
-  cssModule?: CSSModule
-) {
+export function getValidationTextControlClass({ invalid }: ValidationProps, cssModule?: CSSModule) {
   return mapToCssModules(
     classNames({
       'form-text': true,
@@ -52,12 +40,7 @@ export function getInfoTextControlClass(
   );
 }
 
-export function getTag({
-  tag,
-  plaintext,
-  staticInput,
-  type = 'text'
-}: Pick<InputProps, 'tag'> & TypeProps) {
+export function getTag({ tag, plaintext, staticInput, type = 'text' }: Pick<InputProps, 'tag'> & TypeProps) {
   if (tag) {
     return tag;
   }
@@ -71,19 +54,17 @@ export function getTag({
 }
 
 type InputClassesParams = ValidationProps &
-  Pick<
-    InputProps,
-    'bsSize' | 'placeholder' | 'value' | 'label' | 'infoText' | 'normalized'
-  > & {
+  Pick<InputProps, 'bsSize' | 'placeholder' | 'value' | 'label' | 'validationText' | 'normalized'> & {
     isFocused: boolean;
     inputPassword?: boolean;
     formControlClass?: string;
-    infoTextControlClass?: string;
+    validationTextControlClass?: string;
     originalWrapperClass: InputProps['wrapperClassName'];
   };
 
 export function getClasses(
   className: string | undefined,
+  type: string,
   {
     isFocused,
     valid,
@@ -92,21 +73,19 @@ export function getClasses(
     placeholder,
     value,
     label,
-    infoText,
+    validationText,
     normalized,
     inputPassword,
     formControlClass,
-    infoTextControlClass,
+    validationTextControlClass,
     originalWrapperClass
   }: InputClassesParams,
   cssModule?: CSSModule
 ) {
-  const hasPlainCondition = placeholder || label || infoText;
+  const hasPlainCondition = placeholder || label || validationText;
   const baseCondition = hasPlainCondition && !normalized && !inputPassword;
-  const passwordOnlyCondition =
-    inputPassword && !hasPlainCondition && !normalized;
-  const normalizedOnlyCondition =
-    normalized && !hasPlainCondition && !inputPassword;
+  const passwordOnlyCondition = inputPassword && !hasPlainCondition && !normalized;
+  const normalizedOnlyCondition = normalized && !hasPlainCondition && !inputPassword;
 
   const classes = mapToCssModules(
     classNames(
@@ -120,17 +99,14 @@ export function getClasses(
     ),
     cssModule
   );
-  const wrapperClass = mapToCssModules(
-    classNames(className, originalWrapperClass, 'form-group'),
-    cssModule
-  );
-  const infoTextClass = mapToCssModules(
+  const wrapperClass = mapToCssModules(classNames(className, originalWrapperClass, 'form-group'), cssModule);
+  const validationTextClass = mapToCssModules(
     classNames(
       {
         'valid-feedback': valid,
         'invalid-feedback form-feedback just-validate-error-label': invalid
       },
-      infoTextControlClass
+      validationTextControlClass
     ),
     cssModule
   );
@@ -151,7 +127,7 @@ export function getClasses(
 
   const activeClass = mapToCssModules(
     classNames({
-      active: isFocused || placeholder || value
+      active: isFocused || placeholder || value || ['date', 'time'].includes(type)
     }),
     cssModule
   );
@@ -160,7 +136,7 @@ export function getClasses(
     wrapperClass,
     inputClasses,
     activeClass,
-    infoTextClass
+    validationTextClass
   };
 }
 

package/src/LinkList/LinkListItem.tsx

@@ -1,14 +1,7 @@
-import React, {
-  FC,
-  AnchorHTMLAttributes,
-  ElementType,
-  MouseEvent,
-  MouseEventHandler
-} from 'react';
+import React, { FC, AnchorHTMLAttributes, ElementType, MouseEvent, MouseEventHandler } from 'react';
 import classNames from 'classnames';
 
-export interface LinkListItemProps
-  extends AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface LinkListItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   /** Indica se l'elemento è attivo o no */
   active?: boolean;
   /** Indica se l'elemento è disabilitato o no */
@@ -77,12 +70,7 @@ export const LinkListItem: FC<LinkListItemProps> = ({
     return (
       <li className={wrapperClassName} data-testid={testId}>
         <Tag>
-          <a
-            href={href || '#'}
-            {...attributes}
-            className={classes}
-            {...handlers}
-          >
+          <a href={href || '#'} {...attributes} className={classes} {...handlers}>
             {children}
           </a>
         </Tag>

package/src/{Collapse → Megamenu}/Collapse.tsx

@@ -78,11 +78,7 @@ export const Collapse: FC<CollapseProps> = ({
             <span className='it-close'></span>close
           </button>
         </div>
-        {megamenu ? (
-          <div className='menu-wrapper'>{children}</div>
-        ) : (
-          <>{children}</>
-        )}
+        {megamenu ? <div className='menu-wrapper'>{children}</div> : <>{children}</>}
       </CollapseBase>
     );
   }

package/src/Megamenu/Megamenu.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useState } from 'react';
 import { Navbar, NavbarBrand, NavbarProps, NavbarToggler } from 'reactstrap';
 import classNames from 'classnames';
-import { Collapse } from '../Collapse/Collapse';
+import { Collapse } from './Collapse';
 import { Icon } from '../Icon/Icon';
 import { Nav } from '../Nav/Nav';
 
@@ -13,13 +13,7 @@ export interface MegamenuProps extends NavbarProps {
   testId?: string;
 }
 
-export const Megamenu: FC<MegamenuProps> = ({
-  brand,
-  className,
-  children,
-  testId,
-  ...attributes
-}) => {
+export const Megamenu: FC<MegamenuProps> = ({ brand, className, children, testId, ...attributes }) => {
   const [openNav, setOpenNav] = useState(false);
   const toggle = () => {
     setOpenNav(!openNav);

package/src/Megamenu/MegamenuFooter.tsx

@@ -6,11 +6,7 @@ export interface MegamenuFooterProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
 }
 
-export const MegamenuFooter: FC<MegamenuFooterProps> = ({
-  className,
-  children,
-  ...attributes
-}) => {
+export const MegamenuFooter: FC<MegamenuFooterProps> = ({ className, children, ...attributes }) => {
   const classes = classNames(className, 'it-megamenu-footer');
   return (
     <div className={classes} {...attributes}>

package/src/Megamenu/MegamenuHighlightColumn.tsx

@@ -8,12 +8,7 @@ export interface MegamenuHCProps extends ColProps {
   /** Classi aggiuntive da usare per il componente Megamenu Highlight Column */
   className?: string;
 }
-export const MegamenuHighlightColumn: FC<MegamenuHCProps> = ({
-  description,
-  className,
-  children,
-  ...attributes
-}) => {
+export const MegamenuHighlightColumn: FC<MegamenuHCProps> = ({ description, className, children, ...attributes }) => {
   const classes = classNames(className, 'it-vertical', {
     'it-description': description
   });
@@ -21,11 +16,7 @@ export const MegamenuHighlightColumn: FC<MegamenuHCProps> = ({
     <Col {...attributes}>
       <Row className='max-height-col'>
         <Col className={classes}>
-          {description ? (
-            <div className='description-content'>{children}</div>
-          ) : (
-            <>{children}</>
-          )}
+          {description ? <div className='description-content'>{children}</div> : <>{children}</>}
         </Col>
       </Row>
     </Col>

package/src/Megamenu/MegamenuItem.tsx

@@ -9,12 +9,7 @@ export interface MegamenuItemProps extends HTMLAttributes<HTMLUListElement> {
   className?: string;
 }
 
-export const MegamenuItem: FC<MegamenuItemProps> = ({
-  itemName,
-  className,
-  children,
-  ...attributes
-}) => {
+export const MegamenuItem: FC<MegamenuItemProps> = ({ itemName, className, children, ...attributes }) => {
   const classes = classNames(className, 'megamenu');
   return (
     <UncontrolledDropdown nav tag='li' className={classes} {...attributes}>

package/src/Modal/ModalBody.tsx

@@ -7,6 +7,4 @@ export interface ModalBodyProps extends HTMLAttributes<HTMLElement> {
   cssModule?: CSSModule;
 }
 
-export const ModalBody: FC<ModalBodyProps> = (props) => (
-  <InnerModalBody {...props} />
-);
+export const ModalBody: FC<ModalBodyProps> = (props) => <InnerModalBody {...props} />;

package/src/Modal/ModalFooter.tsx

@@ -7,6 +7,4 @@ export interface ModalFooterProps extends HTMLAttributes<HTMLElement> {
   cssModule?: CSSModule;
 }
 
-export const ModalFooter: FC<ModalFooterProps> = (props) => (
-  <InnerModalFooter {...props} />
-);
+export const ModalFooter: FC<ModalFooterProps> = (props) => <InnerModalFooter {...props} />;

package/src/Modal/ModalHeader.tsx

@@ -34,10 +34,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
   cssModule,
   ...props
 }) => {
-  const classes = mapToCssModules(
-    classNames(className, 'modal-header'),
-    cssModule
-  );
+  const classes = mapToCssModules(classNames(className, 'modal-header'), cssModule);
 
   let CloseButton;
 
@@ -55,9 +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', cssModule)}>{children}</Tag>
       {close || CloseButton}
     </WrapTag>
   );

package/src/Nav/Nav.tsx

@@ -35,22 +35,9 @@ export interface NavProps extends HTMLAttributes<HTMLUListElement> {
   secondary?: boolean;
 }
 
-export const Nav: FC<NavProps> = ({
-  className,
-  tag = 'ul',
-  vertical = false,
-  secondary,
-  ...attributes
-}) => {
+export const Nav: FC<NavProps> = ({ className, tag = 'ul', vertical = false, secondary, ...attributes }) => {
   const classes = classNames(className, {
     'navbar-secondary': secondary
   });
-  return (
-    <NavBase
-      className={classes}
-      tag={tag}
-      vertical={vertical}
-      {...attributes}
-    />
-  );
+  return <NavBase className={classes} tag={tag} vertical={vertical} {...attributes} />;
 };

package/src/Notification/Notification.tsx

@@ -3,9 +3,7 @@ import { ToastProps, useToast, cssTransition } from 'react-toastify';
 import { NotificationToastProps } from './NotificationContent';
 import { NotificationCommonProps } from './types';
 
-export type NotificationProps = Omit<ToastProps, 'transition'> &
-  NotificationCommonProps &
-  NotificationToastProps;
+export type NotificationProps = Omit<ToastProps, 'transition'> & NotificationCommonProps & NotificationToastProps;
 
 const dummyTransition = cssTransition({ enter: '', exit: '' });
 
@@ -14,16 +12,7 @@ export const Notification: FC<NotificationProps> = (props) => {
     ...props,
     transition: dummyTransition
   });
-  const {
-    children,
-    autoClose,
-    onClick,
-    role,
-    toastId,
-    deleteToast,
-    closeToast,
-    isIn
-  } = props;
+  const { children, autoClose, onClick, role, toastId, deleteToast, closeToast, isIn } = props;
 
   const customStyle: CSSProperties = {
     display: isIn ? 'block' : 'none'