design-react-kit 5.0.0-1 → 5.0.0-3

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'

package/src/Notification/NotificationContent.tsx

@@ -24,14 +24,14 @@ type NotificationElementProps = {
 
 export const getBorderStyleFix = (fix: NotificationCommonProps['fix']) => {
   const borderReset = ['top', 'bottom', 'right', 'left']
-    .filter((curPosition) =>
-      fix === 'left' ? curPosition !== 'right' : curPosition !== 'left'
-    )
+    .filter((curPosition) => (fix === 'left' ? curPosition !== 'right' : curPosition !== 'left'))
     .map(
       (borderPosition) =>
-        `border${
-          borderPosition[0].toUpperCase() + borderPosition.substring(1)
-        }` as 'borderTop' | 'borderBottom' | 'borderLeft' | 'borderRight'
+        `border${borderPosition[0].toUpperCase() + borderPosition.substring(1)}` as
+          | 'borderTop'
+          | 'borderBottom'
+          | 'borderLeft'
+          | 'borderRight'
     );
 
   const customStyle: CSSProperties = {};
@@ -66,17 +66,10 @@ function pickIcon(state: NotificationToastProps['state']) {
   }
 }
 
-function NotificationElement({
-  closeToast,
-  toastProps,
-  title,
-  body,
-  options
-}: NotificationElementProps) {
+function NotificationElement({ closeToast, toastProps, title, body, options }: NotificationElementProps) {
   const globalFix = usePosition();
   const { icon: userIcon, state, fix: localFix, dismissable } = options;
-  const fixPosition =
-    localFix == null && globalFix ? globalFix : localFix || globalFix;
+  const fixPosition = localFix == null && globalFix ? globalFix : localFix || globalFix;
   const { autoClose, style } = toastProps;
   const content = typeof body === 'string' ? <p>{body}</p> : body;
   const icon = userIcon || pickIcon(state);
@@ -125,11 +118,5 @@ export const createNotification = (
   closeToast?: () => void,
   toastProps?: any
 ) => (
-  <NotificationElement
-    title={title}
-    body={body}
-    options={options}
-    closeToast={closeToast}
-    toastProps={toastProps}
-  />
+  <NotificationElement title={title} body={body} options={options} closeToast={closeToast} toastProps={toastProps} />
 );

package/src/Notification/NotificationManager.tsx

@@ -37,8 +37,7 @@ export const NotificationManager = (props: NotificationManagerProps) => {
     enableMultiContainer: props.containerId != null // enable multi container when an explicit id is passed
   };
 
-  const { getToastToRender, containerRef, isToastActive } =
-    useToastContainer(hookProps);
+  const { getToastToRender, containerRef, isToastActive } = useToastContainer(hookProps);
 
   const { containerId, style, fix } = props;
 

package/src/Notification/core.tsx

@@ -4,28 +4,17 @@ import { createNotification } from './NotificationContent';
 import type { NotificationOptions } from './NotificationContent';
 import { NotificationId } from './types';
 
-export function notify(
-  title: string,
-  options?: NotificationOptions
-): NotificationId;
+export function notify(title: string, options?: NotificationOptions): NotificationId;
 
-export function notify(
-  title: string,
-  body: ReactChild,
-  options?: NotificationOptions
-): NotificationId;
+export function notify(title: string, body: ReactChild, options?: NotificationOptions): NotificationId;
 
 export function notify(
   title: string,
   bodyOrOptions?: ReactChild | NotificationOptions,
   options?: NotificationOptions
 ): NotificationId {
-  let body: ReactChild | undefined = isReactChild(bodyOrOptions)
-    ? bodyOrOptions
-    : undefined;
-  const safeOptions = isReactChild(bodyOrOptions)
-    ? { ...options }
-    : bodyOrOptions || {};
+  let body: ReactChild | undefined = isReactChild(bodyOrOptions) ? bodyOrOptions : undefined;
+  const safeOptions = isReactChild(bodyOrOptions) ? { ...options } : bodyOrOptions || {};
   const NotificationContent = createNotification(title, body, safeOptions);
   const internalOptions = {
     ...safeOptions,
@@ -34,13 +23,8 @@ export function notify(
   return toast(NotificationContent, internalOptions) as NotificationId;
 }
 
-function isReactChild(
-  el: ReactChild | NotificationOptions | undefined
-): el is ReactChild {
-  return (
-    el != null &&
-    (typeof el === 'string' || typeof el === 'number' || 'type' in el)
-  );
+function isReactChild(el: ReactChild | NotificationOptions | undefined): el is ReactChild {
+  return el != null && (typeof el === 'string' || typeof el === 'number' || 'type' in el);
 }
 
 notify.dismiss = (id?: NotificationId) => toast.dismiss(id);

package/src/Notification/usePosition.tsx

@@ -1,8 +1,7 @@
 import { createContext, useContext } from 'react';
 import { NotificationCommonProps } from './types';
 
-export const PositionContext =
-  createContext<NotificationCommonProps['fix']>(undefined);
+export const PositionContext = createContext<NotificationCommonProps['fix']>(undefined);
 
 export function usePosition() {
   const context = useContext(PositionContext);

package/src/Pager/Pager.tsx

@@ -33,9 +33,7 @@ export const Pager: FC<PagerProps> = ({
   });
   const listClasses = classNames(listClassName, 'pagination');
   const { ariaLabel, label } = total || {};
-  const totalAriaLabel = ariaLabel ? (
-    <span className='visually-hidden'>{ariaLabel}</span>
-  ) : null;
+  const totalAriaLabel = ariaLabel ? <span className='visually-hidden'>{ariaLabel}</span> : null;
   return (
     <Tag className={classes} {...attributes} data-testid={testId}>
       <ListTag className={listClasses}>{children}</ListTag>

package/src/Progress/Progress.tsx

@@ -43,14 +43,10 @@ export const Progress: FC<ProgressProps> = ({
   }
   const numericValue = Number(value);
   const wrapperClasses = classNames('progress-bar-wrapper');
-  const secondaryWrapperClasses = classNames(
-    wrapperClassName === true ? className : wrapperClassName,
-    'progress',
-    {
-      'progress-indeterminate': indeterminate,
-      'progress-color': color
-    }
-  );
+  const secondaryWrapperClasses = classNames(wrapperClassName === true ? className : wrapperClassName, 'progress', {
+    'progress-indeterminate': indeterminate,
+    'progress-color': color
+  });
   const classes = classNames(className, 'progress-bar', {
     [`bg-${color}`]: color
   });

package/src/Rating/Rating.tsx

@@ -90,11 +90,7 @@ export const Rating: FC<RatingProps> = ({
   }
 
   const legendContent =
-    isCustomLegendObject(legend) || isLegendString ? (
-      <legend className={legendClass}>{legendText}</legend>
-    ) : (
-      legend
-    );
+    isCustomLegendObject(legend) || isLegendString ? <legend className={legendClass}>{legendText}</legend> : legend;
 
   return (
     <FormGroup

package/src/ResponsiveImage/ResponsiveImage.tsx

@@ -10,11 +10,7 @@ export interface ResponsiveImageProps extends HTMLAttributes<HTMLImageElement> {
   testId?: string;
 }
 
-export const ResponsiveImage: FC<ResponsiveImageProps> = ({
-  alt,
-  testId,
-  ...attributes
-}) => {
+export const ResponsiveImage: FC<ResponsiveImageProps> = ({ alt, testId, ...attributes }) => {
   return (
     <div className='img-responsive-wrapper' data-testid={testId}>
       <div className='img-responsive'>

package/src/Section/Section.tsx

@@ -44,20 +44,14 @@ export const Section: FC<SectionProps> = ({
   muted,
   ...rest
 }) => {
-  const classes = classNames(
-    'section',
-    wrapperClassName === true ? className : wrapperClassName,
-    {
-      [`section-${color}`]: color,
-      'section-image': image
-    }
-  );
+  const classes = classNames('section', wrapperClassName === true ? className : wrapperClassName, {
+    [`section-${color}`]: color,
+    'section-image': image
+  });
 
   if (neutral || muted) {
     notifyDeprecation(
-      `Please use the prop "color" instead of the "${
-        neutral ? 'neutral' : 'muted'
-      }" for the Section component.`
+      `Please use the prop "color" instead of the "${neutral ? 'neutral' : 'muted'}" for the Section component.`
     );
   }
 
@@ -77,12 +71,7 @@ export const Section: FC<SectionProps> = ({
   const finalWrapperClassName = classNames(classes, deprecatedClasses);
 
   return (
-    <div
-      className={finalWrapperClassName}
-      style={styleClass.backgroundImageClass}
-      data-testid={testId}
-      {...rest}
-    >
+    <div className={finalWrapperClassName} style={styleClass.backgroundImageClass} data-testid={testId} {...rest}>
       <div className={innerClasses}>{children}</div>
     </div>
   );

package/src/Select/Select.tsx

@@ -1,107 +1,55 @@
-import React, { FC, ReactElement } from 'react';
-import SelectBase, { components, OptionsType } from 'react-select';
-import { Icon } from '../Icon/Icon';
-import type {
-  Props as SelectBaseProps,
-  IndicatorProps,
-  OptionTypeBase,
-  GroupTypeBase,
-  OptionProps
-} from 'react-select';
-import { styles } from './shared';
-export type {
-  ValueType,
-  ActionMeta,
-  GroupTypeBase,
-  OptionTypeBase
-} from 'react-select';
-
-export type SelectOptionType<OptionType extends OptionTypeBase> =
-  | OptionType
-  | OptionsType<OptionType>;
-
-export interface SelectProps<
-  OptionType extends OptionTypeBase,
-  IsMulti extends boolean,
-  GroupType extends GroupTypeBase<OptionType>
-> extends SelectBaseProps<OptionType, IsMulti, GroupType> {
-  icon?: boolean;
-  clearText?: string;
+import React, { ChangeEvent, ReactElement, SelectHTMLAttributes } from 'react';
+import { Input } from 'reactstrap';
+import { InputType } from 'reactstrap/types/lib/Input';
+
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> {
+  /**
+   * Se `true` determina la disabilitazione del campo
+   */
+  disabled?: boolean;
+  /**
+   * L'etichetta del campo
+   */
+  label: string;
+  /**
+   * La lista di opzioni da visualizzare nella tendina del Select
+   */
+  children: ReactElement<'option'> | ReactElement<'option'>[];
+  /**
+   * Gestisce il cambio del valore selezionato
+   * @param selectedValue
+   * @returns
+   */
+  onChange: (selectedValue: string) => void;
 }
 
-const DropdownIndicator = <
-  OptionType extends OptionTypeBase,
-  IsMulti extends boolean,
-  GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
->(
-  props: IndicatorProps<OptionType, IsMulti, GroupType>
-) => {
-  return (
-    <components.DropdownIndicator {...props}>
-      <Icon icon='it-arrow-down-triangle' aria-hidden />
-    </components.DropdownIndicator>
-  );
-};
-
-const Option = <
-  OptionType extends OptionTypeBase,
-  IsMulti extends boolean,
-  GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
->(
-  props: OptionProps<OptionType, IsMulti, GroupType>
-) => {
-  return (
-    <div className='select-pill text-primary'>
-      <components.Option {...props} />
-    </div>
-  );
-};
-
-const CustomClearText: FC<{ clearText: string }> = ({ clearText }) => (
-  <>{clearText}</>
-);
-
-export const Select = <
-  OptionType extends OptionTypeBase = { label: string; value: string },
-  IsMulti extends boolean = false,
-  GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
->({
-  clearText = 'Annulla',
-  icon = false,
-  ...props
-}: SelectProps<OptionType, IsMulti, GroupType>): ReactElement<
-  SelectProps<OptionType, IsMulti, GroupType>
-> => {
-  // @TODO: move it outside when migrating to hooks
-  const ClearIndicator = <
-    OptionType extends OptionTypeBase,
-    IsMulti extends boolean,
-    GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
-  >(
-    clearIndicatorProps: IndicatorProps<OptionType, IsMulti, GroupType>
-  ) => {
-    const {
-      children = <CustomClearText clearText={clearText} />,
-      innerProps: { ref, ...restInnerProps }
-    } = clearIndicatorProps;
-    return (
-      <div className='select-pill text-primary' {...restInnerProps} ref={ref}>
-        <div style={{ padding: '0px 5px' }}>{children}</div>
-      </div>
-    );
+export const Select = ({ id, disabled = false, label, children, onChange }: SelectProps) => {
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value);
   };
 
-  const selectComponents = {
-    ...props.components,
-    Option,
-    DropdownIndicator,
-    IndicatorSeparator: null
+  const inputProps = {
+    name: 'select',
+    type: 'select' as InputType,
+    disabled: disabled,
+    handleChange: handleChange
   };
 
-  if (props.isClearable) {
-    selectComponents.ClearIndicator = ClearIndicator;
-  }
   return (
-    <SelectBase {...props} components={selectComponents} styles={styles} />
+    <div className='select-wrapper'>
+      {id ? (
+        <>
+          <label htmlFor={id}>{label}</label>
+          <Input id={id} {...inputProps}>
+            {children}
+          </Input>
+        </>
+      ) : (
+        <label>
+          {label}
+          <Input {...inputProps}>{children}</Input>
+        </label>
+      )}
+    </div>
   );
 };

package/src/Sidebar/Sidebar.tsx

@@ -38,13 +38,7 @@ export const Sidebar: FC<SidebarProps> = ({
     'linklist-secondary': secondary
   });
   if (secondary) {
-    return (
-      <Tag
-        {...attributes}
-        className={wrapperClassesLinkList}
-        data-testid={testId}
-      />
-    );
+    return <Tag {...attributes} className={wrapperClassesLinkList} data-testid={testId} />;
   }
   return (
     <Tag className={wrapperClasses} data-testid={testId}>

package/src/Skiplink/Skiplink.tsx

@@ -9,12 +9,7 @@ export interface SkiplinkProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-export const Skiplink: FC<SkiplinkProps> = ({
-  className,
-  tag = 'div',
-  testId,
-  ...attributes
-}) => {
+export const Skiplink: FC<SkiplinkProps> = ({ className, tag = 'div', testId, ...attributes }) => {
   const Tag = tag;
   const classes = classNames(className, 'skiplinks');
 

package/src/Skiplink/SkiplinkItem.tsx

@@ -1,8 +1,7 @@
 import React, { FC, ElementType, AnchorHTMLAttributes } from 'react';
 import classNames from 'classnames';
 
-export interface SkiplinkItemProps
-  extends AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface SkiplinkItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
   tag?: ElementType;
   /** Classi aggiuntive da usare per il componente Skiplink */
@@ -27,12 +26,5 @@ export const SkiplinkItem: FC<SkiplinkItemProps> = ({
   // Add an extra href for focusable if the user passes an onClick rather than href prop
   const extraHref = attributes.onClick ? { href: '#' } : {};
 
-  return (
-    <Tag
-      className={classes}
-      {...attributes}
-      {...extraHref}
-      data-testid={testId}
-    />
-  );
+  return <Tag className={classes} {...attributes} {...extraHref} data-testid={testId} />;
 };

package/src/Stepper/StepperContainer.tsx

@@ -22,11 +22,6 @@ export const StepperContainer: FC<StepperContainerProps> = ({
   ...attributes
 }) => {
   const Tag = tag;
-  const wrapperClass = classNames(
-    'steppers',
-    className,
-    { 'bg-dark': dark },
-    { 'mobile-examples': mobile }
-  );
+  const wrapperClass = classNames('steppers', className, { 'bg-dark': dark }, { 'mobile-examples': mobile });
   return <Tag {...attributes} className={wrapperClass} data-testid={testId} />;
 };

package/src/Stepper/StepperContent.tsx

@@ -33,12 +33,7 @@ const contentStyleDark = {
   opacity: 0.5
 };
 
-export const StepperContent: FC<StepperContentProps> = ({
-  tag = 'div',
-  className,
-  dark,
-  ...attributes
-}) => {
+export const StepperContent: FC<StepperContentProps> = ({ tag = 'div', className, dark, ...attributes }) => {
   const Tag = tag;
   const classes = classNames('steppers-content', className);
   return (

package/src/Stepper/StepperDots.tsx

@@ -11,12 +11,7 @@ export interface StepperDotsProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-export const StepperDots: FC<StepperDotsProps> = ({
-  tag = 'ul',
-  className,
-  testId,
-  ...attributes
-}) => {
+export const StepperDots: FC<StepperDotsProps> = ({ tag = 'ul', className, testId, ...attributes }) => {
   const Tag = tag;
   const wrapperClass = classNames('steppers-dots', className);
   return <Tag {...attributes} className={wrapperClass} data-testid={testId} />;

package/src/Stepper/StepperHeader.tsx

@@ -9,13 +9,7 @@ export interface StepperHeaderProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-export const StepperHeader: FC<StepperHeaderProps> = ({
-  tag = 'div',
-  testId,
-  className,
-  children,
-  ...attributes
-}) => {
+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

package/src/Stepper/StepperHeaderElement.tsx

@@ -11,8 +11,7 @@ const variants = {
   'steppers-index': 'steppers-index'
 } as const;
 
-export interface StepperHeaderElementProps
-  extends HTMLAttributes<HTMLLIElement> {
+export interface StepperHeaderElementProps extends HTMLAttributes<HTMLLIElement> {
   /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
   tag?: ElementType;
   /** Classi aggiuntive da usare per il componente StepperHeader */
@@ -56,13 +55,9 @@ export const StepperHeaderElement: FC<StepperHeaderElementProps> = ({
   ...attributes
 }) => {
   const Tag = tag;
-  const wrapperClasses = classNames(
-    variant ? variants[variant] : '',
-    className,
-    {
-      'no-line': noLine
-    }
-  );
+  const wrapperClasses = classNames(variant ? variants[variant] : '', className, {
+    'no-line': noLine
+  });
   const iconClass = classNames('icon', 'steppers-success');
   const spanClass = classNames('steppers-number');