design-react-kit 5.4.0 → 5.5.0

package/src/Header/HeaderToggler.tsx

@@ -15,12 +15,13 @@ export interface HeaderTogglerProps extends ButtonHTMLAttributes<HTMLButtonEleme
    * Se fornito questo sovrascriverà il valore di default.
    */
   type?: 'button' | 'submit' | 'reset';
+  isOpen?: boolean;
   testId?: string;
 }
 
 const BUTTON = 'button';
 
-export const HeaderToggler = ({ className, tag, type, testId, ...attributes }: HeaderTogglerProps) => {
+export const HeaderToggler = ({ className, tag, type, isOpen=false, testId, ...attributes }: HeaderTogglerProps) => {
   const HeaderType = useHeaderContext();
   const defaultTag = HeaderType === SLIM ? 'a' : BUTTON;
   const defaultType = HeaderType === SLIM ? undefined : BUTTON;
@@ -31,6 +32,7 @@ export const HeaderToggler = ({ className, tag, type, testId, ...attributes }: H
     },
     className
   );
+  const expanded = isOpen ? "true" : "false"
   useEffect(() => {
     document.querySelectorAll('.container-fluid').forEach((element) => {
       element.classList.remove('container-fluid');
@@ -42,8 +44,8 @@ export const HeaderToggler = ({ className, tag, type, testId, ...attributes }: H
       {...attributes}
       tag={tag || defaultTag}
       type={type || defaultType}
-      href='#'
       data-testid={testId}
+      aria-expanded={expanded}
     />
   );
 };

package/src/Input/TextArea.tsx

@@ -1,8 +1,8 @@
-import React, { Ref, ReactNode, TextareaHTMLAttributes } from 'react';
+import React, { ReactNode, Ref, TextareaHTMLAttributes } from 'react';
 
-import { InputContainer } from './InputContainer';
-import { getClasses, getValidationTextControlClass, useFocus } from './utils';
 import type { CSSModule } from 'reactstrap/types/lib/utils';
+import { InputContainer } from './InputContainer';
+import { getClasses, getFormControlClass, getValidationTextControlClass, useFocus } from './utils';
 
 export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   /** Etichetta del campo TextArea. */
@@ -56,6 +56,11 @@ export const TextArea = ({
 
   const extraAttributes: { ['aria-describedby']?: string } = {};
 
+  //Chiamo questa funzione per impostare classNames a 'form-control'
+  const formControlClass = getFormControlClass(
+    {},
+    cssModule
+  );
   // associate the input field with the help text
   const infoId = id ? `${id}Description` : undefined;
   if (id) {
@@ -73,6 +78,7 @@ export const TextArea = ({
       label,
       validationText,
       normalized: Boolean(normalized),
+      formControlClass,
       validationTextControlClass,
       isFocused,
       originalWrapperClass

package/src/Input/utils.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { useState, useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import type { CSSModule } from 'reactstrap/types/lib/utils';
 import { mapToCssModules } from '../utils';
 import type { InputProps } from './Input';
@@ -98,7 +98,7 @@ export function getClasses(
     ),
     cssModule
   );
-  const wrapperClass = mapToCssModules(classNames(className, originalWrapperClass, 'form-group'), cssModule);
+  const wrapperClass = mapToCssModules(classNames(originalWrapperClass, 'form-group'), cssModule);
   const validationTextClass = mapToCssModules(
     classNames(
       {

package/src/Megamenu/MegamenuItem.tsx

@@ -13,10 +13,12 @@ export interface MegamenuItemProps extends HTMLAttributes<HTMLUListElement> {
 
 export const MegamenuItem: FC<MegamenuItemProps> = ({ itemName, className, children, ...attributes }) => {
   const classes = classNames(className, 'megamenu');
-  const toggleClasses = classNames('px-lg-2', 'px-xl-3');
+  const [dropdownOpen, setDropdownOpen] = React.useState(false);
+  const toggle = () => setDropdownOpen((prevState) => !prevState);
+  const toggleClasses = classNames('px-lg-2', 'px-xl-3', dropdownOpen ? 'show' : '');
 
   return (
-    <Dropdown className={classes} inNavbar {...attributes}>
+    <Dropdown className={classes} inNavbar {...attributes} isOpen={dropdownOpen} toggle={toggle}>
       <DropdownToggle inNavbar caret className={toggleClasses}>
         <span>{itemName}</span>
       </DropdownToggle>

package/src/NavScroll/types.ts

@@ -86,6 +86,10 @@ export type useNavScrollResult = {
    * A function to retrieve the reference of the current active element (only the last element, not the elements hierarchy).
    */
   getActiveRef: () => RefObject<Element> | null;
+  /**
+  * A list of active ids (the full hierarchy).
+  */
+  percentage: number;
 };
 
 // @private

package/src/NavScroll/useNavScroll.ts

@@ -1,15 +1,81 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/*
+/*--------------------------------------------------------------------------
  * This work derives from the React Use Navscroll library
- * Released under the MIT license by Marco Liberati
+ * Released under the MIT license by Marco Liberati (@dej611)
  * Code: https://github.com/dej611/react-use-navscroll
+ * --------------------------------------------------------------------------
+ * Parts of this code has been modified using Bootstrap Italia source code
+ * --------------------------------------------------------------------------
+ * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)
+ * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS
+ * License: BSD-3-Clause (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
  */
 
 import { createRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { debounce } from './debounce';
-import type { TrackedElement, useNavScrollArgs, useNavScrollResult } from './types';
+import type { useNavScrollArgs, useNavScrollResult, TrackedElement } from './types';
 import { useSizeDetector } from './useSizeDetector';
 
+import { v4 as uuidv4 } from 'uuid';
+
+let ticking: boolean = false;
+let callbacks: any[] = [];
+
+class ScrollCallback {
+  private _callback: any;
+  id: string;
+  constructor(id: string, callback: any) {
+    this.id = id;
+    this._callback = callback;
+  }
+
+  //Public
+  dispose() {
+    removeCallBack(this.id);
+  }
+
+  //Private
+  _execute(data: any) {
+    this._callback(data);
+  }
+}
+
+const removeCallBack = (id: string) => {
+  callbacks = callbacks.filter((cb) => cb.id !== id);
+};
+
+const onDocumentScroll = (callback: any) => {
+  if (typeof document === 'undefined') {
+    return;
+  }
+  if (!callbacks.length) {
+    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+      document.addEventListener('scroll', (evt) => {
+        if (!ticking) {
+          window.requestAnimationFrame(() => {
+            callbacks.forEach((cbObj) => cbObj.cb._execute(evt));
+            ticking = false;
+          });
+          ticking = true;
+        }
+      });
+    }
+  }
+
+  if (typeof callback === 'function') {
+    const newCb = new ScrollCallback(uuidv4(), callback);
+    callbacks.push({
+      id: newCb.id,
+      cb: newCb
+    });
+    return newCb;
+  }
+
+  console.error('[onDocumentScroll] the provided data has to be of type function');
+  return null;
+};
+
 const hasWindow = typeof window !== 'undefined';
 const REGISTER_DELAY = 50;
 
@@ -34,6 +100,7 @@ export function useNavScroll(args: useNavScrollArgs = {}): useNavScrollResult {
   const [counter, setCounter] = useState(0);
   const [forceRecompute, setForceRecompute] = useState(false);
   const [activeId, updateActiveId] = useState<string | null>(null);
+  const [percentageValue, setPercentageValue] = useState(0);
 
   const { targetSize, useViewport } = useSizeDetector({
     root,
@@ -63,7 +130,7 @@ export function useNavScroll(args: useNavScrollArgs = {}): useNavScrollResult {
       lookup[id] = parent;
     }
     return lookup;
-  }, []);
+  }, [counter]);
   const activeIds = useMemo(() => (activeId ? resolveHierarchyIds(activeId, elsLookup) : []), [activeId, elsLookup]);
 
   const activeLookups = useMemo(() => new Set(activeIds), [activeIds]);
@@ -71,17 +138,23 @@ export function useNavScroll(args: useNavScrollArgs = {}): useNavScrollResult {
     if (!hasWindow) {
       return;
     }
-    const handleIntersection: IntersectionObserverCallback = (entries) => {
+    const _onScroll = () => {
       let intersectionId = null;
-      let topMin = Infinity;
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          if (topMin > entry.boundingClientRect.top) {
-            topMin = entry.boundingClientRect.top;
-            intersectionId = entry.target.id;
-          }
+      for (let k = 0; k < els.current.length; k++) {
+        const entry = els.current[k].ref.current;
+        const min = entry?.getBoundingClientRect().top ? entry?.getBoundingClientRect().top : 0;
+        if (!min) {
+          break;
         }
-      });
+        if (min > 0 && k > 0) {
+          const totEls =
+            root?.previousSibling?.firstChild?.parentNode?.querySelectorAll('.it-navscroll-wrapper .nav-link').length ||
+            1;
+          setPercentageValue((k / (totEls / 2)) * 100);
+          intersectionId = els.current[k - 1].ref.current?.id;
+          break;
+        }
+      }
       if (intersectionId != null) {
         updateActiveId(intersectionId);
         if (onChange) {
@@ -94,21 +167,11 @@ export function useNavScroll(args: useNavScrollArgs = {}): useNavScrollResult {
       }
     };
 
-    const observer = new IntersectionObserver(handleIntersection, observerOptions);
-
-    els.current.forEach(({ ref }) => {
-      if (ref && ref.current) {
-        observer.observe(ref.current);
-      }
-    });
+    onDocumentScroll(_onScroll);
 
-    if (forceRecompute) {
-      handleIntersection(observer.takeRecords(), observer);
-      setForceRecompute(false);
-    }
-    return () => {
-      observer.disconnect();
-    };
+    setTimeout(() => {
+      _onScroll();
+    }, 300);
   }, [
     activeIds,
     updateActiveId,
@@ -131,28 +194,32 @@ export function useNavScroll(args: useNavScrollArgs = {}): useNavScrollResult {
   );
 
   const register = useCallback(
-    (id: string, options = {}) => {
+    (id: string, options: any = {}) => {
       if (!hasWindow) {
         return { id, ref: null };
       }
       const alreadyRegistered = id in elsLookup;
-      const entry = (alreadyRegistered ? els.current.find(({ id: existingId }) => existingId === id) : options) as any;
+      const entry = alreadyRegistered ? els.current.find(({ id: existingId }) => existingId === id) : options;
       const ref = (entry && entry.ref) || createRef();
 
       if (!alreadyRegistered) {
-        els.current = [...els.current, { id, ref, parent: (options as any).parent }];
+        els.current = [...els.current, { id, ref, parent: options.parent }];
         refresh();
       }
       return { id, ref };
     },
-    [elsLookup, refresh]
+    [counter]
   );
 
-  const unregister = useCallback((idToUnregister: string) => {
-    els.current = els.current.filter(({ id }) => id !== idToUnregister);
-  }, []);
+  const unregister = useCallback(
+    (idToUnregister: string) => {
+      els.current = els.current.filter(({ id }) => id !== idToUnregister);
+    },
+    [counter]
+  );
 
   const isActive = useCallback((id: string) => activeLookups.has(id), [activeLookups]);
+  const percentage = useMemo(() => percentageValue, [percentageValue]);
 
   const getActiveRef = useCallback(() => {
     const entry = els.current.find(({ id }) => id === activeId);
@@ -160,6 +227,7 @@ export function useNavScroll(args: useNavScrollArgs = {}): useNavScrollResult {
   }, [activeId]);
 
   return {
+    percentage,
     register,
     unregister,
     activeIds,

package/src/Rating/Rating.tsx

@@ -119,7 +119,7 @@ export const Rating: FC<RatingProps> = ({
               {...extraFieldAttrs}
             />
             <Label className='full' for={id}>
-              <Icon icon='it-star-full' size='sm' />
+              <Icon icon='it-star-full' size='sm' aria-hidden='true' />
               <span className='visually-hidden'>{labelFn(currentValue)}</span>
             </Label>
           </Fragment>

package/src/Skiplink/Skiplink.tsx

@@ -2,16 +2,29 @@ import React, { FC, HTMLAttributes, ElementType } from 'react';
 import classNames from 'classnames';
 
 export interface SkiplinkProps extends HTMLAttributes<HTMLElement> {
+  ariaLabel?: string;
   /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
   tag?: ElementType;
+  /** Utilizzare il componente in modalità `nav` */
+  nav?: boolean;
   /** Classi aggiuntive da usare per il componente Skiplink */
   className?: string;
   testId?: string;
 }
 
-export const Skiplink: FC<SkiplinkProps> = ({ className, tag = 'div', testId, ...attributes }) => {
-  const Tag = tag;
+export const Skiplink: FC<SkiplinkProps> = ({ ariaLabel=null, className, tag = 'div', nav=false, testId, children, ...attributes }) => {
+  const Tag = nav ? 'nav' : tag;
   const classes = classNames(className, 'skiplinks');
+  if (nav) {
+    return (
+      <Tag aria-label={ariaLabel} className={classes} {...attributes} data-testid={testId} >
+        <ul>
+          {children}
+        </ul>
+      </Tag>
+    )
 
-  return <Tag className={classes} {...attributes} data-testid={testId} />;
+  } else {
+    return <Tag aria-label={ariaLabel} className={classes} {...attributes} data-testid={testId} />;
+  }
 };

package/src/Skiplink/SkiplinkItem.tsx

@@ -4,6 +4,8 @@ import classNames from 'classnames';
 export interface SkiplinkItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
   tag?: ElementType;
+  /** Utilizzare il componente come elemento di uno Skiplink in modalità `nav` */
+  navItem?: boolean;
   /** Classi aggiuntive da usare per il componente Skiplink */
   className?: string;
   /** Abilitare questo attributo per renderizzare lo SkipLinkItem al focus */
@@ -15,6 +17,7 @@ export const SkiplinkItem: FC<SkiplinkItemProps> = ({
   className,
   tag = 'a',
   focusable = true,
+  navItem = false,
   testId,
   ...attributes
 }) => {
@@ -26,5 +29,13 @@ 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} />;
+  if (navItem) {
+    return (
+      <li className={classes} >
+        <Tag {...attributes} {...extraHref} data-testid={testId} />
+      </li>
+    );
+  } else {
+    return <Tag className={classes} {...attributes} {...extraHref} data-testid={testId} />;
+  }
 };

package/src/index.ts

@@ -47,6 +47,7 @@ export {
   Util
 } from 'reactstrap';
 
+export { Autocomplete } from './Autocomplete/Autocomplete';
 export { Accordion } from './Accordion/Accordion';
 export { AccordionBody } from './Accordion/AccordionBody';
 export { AccordionHeader } from './Accordion/AccordionHeader';
@@ -297,3 +298,5 @@ export type {
   UncontrolledCollapseProps,
   UncontrolledTooltipProps
 } from 'reactstrap';
+
+import "./track-focus.js"

package/src/track-focus.js

@@ -0,0 +1,49 @@
+
+// Focus Management
+
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)
+ * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS
+ * Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+const DATA_MOUSE_FOCUS = 'data-focus-mouse'
+const CLASS_NAME_MOUSE_FOCUS = 'focus--mouse'
+
+class TrackFocus {
+  constructor() {
+    this._usingMouse = false
+
+    this._bindEvents()
+  }
+
+  _bindEvents() {
+    if (typeof document === 'undefined') {
+      return
+    }
+    const events = ['keydown', 'mousedown']
+    events.forEach((evtName) => {
+      document.addEventListener(evtName, (evt) => {
+        this._usingMouse = evt.type === 'mousedown'
+      })
+    })
+    document.addEventListener('focusin', (evt) => {
+      if (this._usingMouse) {
+        if (evt.target) {
+          evt.target.classList.add(CLASS_NAME_MOUSE_FOCUS);
+          evt.target.setAttribute(DATA_MOUSE_FOCUS, 'true')
+        }
+      }
+    })
+    document.addEventListener('focusout', (evt) => {
+      if (evt.target) {
+        evt.target.classList.remove(CLASS_NAME_MOUSE_FOCUS);
+        evt.target.setAttribute(DATA_MOUSE_FOCUS, 'false')
+      }
+    })
+  }
+}
+
+new TrackFocus()