design-react-kit 5.0.0-9 → 5.0.1

package/src/Icon/assets/ItTiktok.tsx

@@ -10,7 +10,6 @@ export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement>
       width={24}
       height={24}
       viewBox='0 0 24 24'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
       aria-labelledby={titleId}
       {...props}

package/src/Icon/assets/ItTiktokSquare.tsx

@@ -10,7 +10,6 @@ export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement>
       width={24}
       height={24}
       viewBox='0 0 24 24'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
       aria-labelledby={titleId}
       {...props}

package/src/Icon/assets/ItTwitter.tsx

@@ -10,16 +10,12 @@ export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement>
       width={24}
       height={24}
       viewBox='0 0 24 24'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
       aria-labelledby={titleId}
       {...props}
     >
       {title ? <title id={titleId}>{title}</title> : null}
-      <path
-        d='M13.927 10.491 19.511 4h-1.323l-4.849 5.636L9.467 4H5l5.856 8.523L5 19.33h1.323l5.12-5.952 4.09 5.952H20l-6.073-8.839Zm-1.812 2.107-.594-.849-4.72-6.753h2.032l3.81 5.45.593.849 4.953 7.084h-2.033l-4.041-5.78v-.001Z'
-        fill='#000'
-      />
+      <path d='M13.927 10.491 19.511 4h-1.323l-4.849 5.636L9.467 4H5l5.856 8.523L5 19.33h1.323l5.12-5.952 4.09 5.952H20l-6.073-8.839Zm-1.812 2.107-.594-.849-4.72-6.753h2.032l3.81 5.45.593.849 4.953 7.084h-2.033l-4.041-5.78v-.001Z' />
     </svg>
   );
 };

package/src/Icon/assets/ItTwitterSquare.tsx

@@ -10,7 +10,6 @@ export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement>
       width={24}
       height={24}
       viewBox='0 0 24 24'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
       aria-labelledby={titleId}
       {...props}
@@ -20,7 +19,6 @@ export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement>
         fillRule='evenodd'
         clipRule='evenodd'
         d='M3.567 1.333h16.762a2.286 2.286 0 0 1 2.286 2.286v16.762a2.286 2.286 0 0 1-2.286 2.286H3.567a2.286 2.286 0 0 1-2.286-2.286V3.619a2.286 2.286 0 0 1 2.286-2.286ZM19.511 4l-5.584 6.491L20 19.33h-4.467l-4.09-5.952-5.12 5.952H5l5.856-6.807L5 4h4.467l3.872 5.636L18.188 4h1.323Zm-7.99 7.75.594.848 4.041 5.78h2.033l-4.953-7.083-.593-.849-3.81-5.45H6.8l4.721 6.753Z'
-        fill='#000'
       />
     </svg>
   );

package/src/Icon/assets/ItVimeo.tsx

@@ -10,7 +10,6 @@ export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement>
       width={24}
       height={24}
       viewBox='0 0 24 24'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
       aria-labelledby={titleId}
       {...props}

package/src/Icon/assets/ItVimeoSquare.tsx

@@ -10,7 +10,6 @@ export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement>
       width={24}
       height={24}
       viewBox='0 0 24 24'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
       aria-labelledby={titleId}
       {...props}

package/src/Icon/assets/index.ts

@@ -151,6 +151,8 @@ const iconList: Record<string, boolean> = {
   'it-tiktok-square': true,
   'it-tiktok': true,
   'it-tool': true,
+  'it-threads-square': true,
+  'it-threads': true,
   'it-twitter-square': true,
   'it-twitter': true,
   'it-unlocked': true,
@@ -628,6 +630,12 @@ export const loadIcon = (name: IconName) => {
     case 'it-tool': {
       return import('./ItTool');
     }
+    case 'it-threads-square': {
+      return import('./ItThreadsSquare');
+    }
+    case 'it-threads': {
+      return import('./ItThreads');
+    }
     case 'it-twitter-square': {
       return import('./ItTwitterSquare');
     }

package/src/Megamenu/MegamenuItem.tsx

@@ -1,38 +1,28 @@
-import React, { FC, HTMLAttributes, useRef } from 'react';
-import { DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
+import React, { FC, HTMLAttributes } from 'react';
+import { Dropdown } from '../Dropdown/Dropdown';
+import { DropdownMenu } from '../Dropdown/DropdownMenu';
+import { DropdownToggle } from '../Dropdown/DropdownToggle';
 import classNames from 'classnames';
-import { Icon } from '../Icon/Icon';
 
 export interface MegamenuItemProps extends HTMLAttributes<HTMLUListElement> {
   /** Etichetta del megamenu visibile all'interno della barra di navigazione */
   itemName: string;
-  /** Classi aggiuntive da usare per il componente UncontrolledDropdown */
+  /** Classi aggiuntive da usare per il componente Dropdown */
   className?: string;
 }
 
 export const MegamenuItem: FC<MegamenuItemProps> = ({ itemName, className, children, ...attributes }) => {
   const classes = classNames(className, 'megamenu');
-  const [isOpen, setShowButton] = React.useState(false);
-  const toggleRef = useRef<DropdownToggle>(null);
-  const toggleClasses = classNames('px-lg-2', 'px-xl-3', {
-    show: isOpen
-  });
-  const setMegamenuButtonClass = () => {
-    //setShowButton(contact);
-    if (toggleRef && toggleRef.current) {
-      setShowButton(toggleRef.current.context.isOpen);
-    }
-  };
+  const toggleClasses = classNames('px-lg-2', 'px-xl-3');
 
   return (
-    <UncontrolledDropdown nav tag='li' className={classes} {...attributes} inNavbar onToggle={setMegamenuButtonClass}>
-      <DropdownToggle caret nav tag='button' className={toggleClasses} ref={toggleRef}>
+    <Dropdown tag='li' className={classes} {...attributes} inNavbar>
+      <DropdownToggle caret className={toggleClasses} inNavbar>
         <span>{itemName}</span>
-        <Icon icon='it-expand' size='xs' className='ms-1' />
       </DropdownToggle>
       <DropdownMenu>
         <div className='megamenu pb-5 pt-3 py-lg-0'>{children}</div>
       </DropdownMenu>
-    </UncontrolledDropdown>
+    </Dropdown>
   );
 };

package/src/NavScroll/debounce.ts

@@ -0,0 +1,9 @@
+export const debounce = (callback: Function, wait: number) => {
+  let timeoutId: NodeJS.Timeout;
+  return (...args: unknown[]) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      callback.apply(null, args);
+    }, wait);
+  };
+};

package/src/NavScroll/index.tsx

@@ -0,0 +1,3 @@
+export type { ChangesType, RegisterOptions, useNavScrollArgs, useNavScrollResult } from './types';
+
+export { useNavScroll } from './useNavScroll';

package/src/NavScroll/types.ts

@@ -0,0 +1,89 @@
+import { HTMLAttributes, RefObject } from 'react';
+
+/**
+ * The returned object from the `onChange` passed function, with the current state of
+ * `added` and `removed` element ids.
+ */
+export type ChangesType = {
+  added: string | null;
+  removed: string | null;
+};
+
+/**
+ * The react-use-navscroll configuration object
+ */
+export type useNavScrollArgs = {
+  /**
+   * Function called every time an element becomes active.
+   * The changes object returned contains the "added" and "removed" id.
+   * */
+  onChange?: (changes: ChangesType) => void;
+  /**
+   * Pass an element as root to track a specific container, smaller than a viewport. Default is window (the whole viewport).
+   * */
+  root?: Element;
+  /**
+   * Moves the detection line by the amount of this offset, expressed in percentage. By default the value is 50 (center).
+   * */
+  offset?: number;
+  /**
+   * Declare if the detection should work vertically or horizontally. By default false (vertical)
+   */
+  isHorizontal?: boolean;
+};
+
+/**
+ * The options object passed to the `register` function.
+ */
+export type RegisterOptions = {
+  /**
+   * Pass the string id of the parent element
+   */
+  parent?: string;
+  /**
+   * If the tracked element has already a reference, you can pass it and will be reused
+   */
+  ref?: RefObject<Element>;
+};
+
+/**
+ * The attributes object to assign to the element to assign
+ */
+export type RegisteredAttributes<T extends Element> = {
+  id: HTMLAttributes<T>['id'];
+  ref: RefObject<T> | null;
+};
+
+/**
+ * The object returned by the hook.
+ */
+export type useNavScrollResult = {
+  /**
+   * The function used to register the component into the tracking system.
+   * It returns the id already passed and the reference object.
+   * Note that only the reference value will be `null` in a SSR context.
+   */
+  register: <T extends Element>(id: string, options?: RegisterOptions) => RegisteredAttributes<T>;
+  /**
+   * Removes the given id from the tracking system.
+   */
+  unregister: (idToUnregister: string) => void;
+  /**
+   * A list of active ids (the full hierarchy).
+   */
+  activeIds: string[];
+  /**
+   * A convenience function to quickly check the active state for the given id
+   */
+  isActive: (id: string) => boolean;
+  /**
+   * A function to retrieve the reference of the current active element (only the last element, not the elements hierarchy).
+   */
+  getActiveRef: () => RefObject<Element> | null;
+};
+
+// @private
+export type TrackedElement = {
+  id: string;
+} & Required<Pick<RegisterOptions, 'ref'>> &
+  Pick<RegisterOptions, 'parent'>;

package/src/NavScroll/useNavScroll.ts

@@ -0,0 +1,162 @@
+import { createRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { debounce } from './debounce';
+import type { TrackedElement, useNavScrollArgs, useNavScrollResult } from './types';
+import { useSizeDetector } from './useSizeDetector';
+
+const hasWindow = typeof window !== 'undefined';
+const REGISTER_DELAY = 50;
+
+function resolveHierarchyIds(id: string, lookup: Record<string, string | undefined>) {
+  const newActiveIds = [id];
+  let lastId: string | undefined = newActiveIds[0];
+  while (lastId != null && lookup[lastId] != null) {
+    newActiveIds.push(lookup[lastId] as string);
+    lastId = lookup[lastId];
+  }
+  // return a list from parent to current child
+  return newActiveIds.reverse();
+}
+/**
+ * This is the main hook: use it in a react function component to track
+ * the state of the passed ids. The function accepts an initial configuration
+ * of type `useNavScrollArgs` to customize the behaviour.
+ */
+export function useNavScroll(args: useNavScrollArgs = {}): useNavScrollResult {
+  const { onChange, root, offset = 50, isHorizontal = false } = args;
+  const els = useRef<TrackedElement[]>([]);
+  const [counter, setCounter] = useState(0);
+  const [forceRecompute, setForceRecompute] = useState(false);
+  const [activeId, updateActiveId] = useState<string | null>(null);
+
+  const { targetSize, useViewport } = useSizeDetector({
+    root,
+    isHorizontal,
+    onChange,
+    activeId,
+    setForceRecompute,
+    updateActiveId,
+    hasWindow
+  });
+
+  const observerMargin = Math.floor((targetSize * offset) / 100) || 1;
+  const observerOptions = useMemo(() => {
+    const topMargin = observerMargin % 2 === 1 ? observerMargin - 1 : observerMargin;
+    const bottomMargin = targetSize - observerMargin;
+    return {
+      root: useViewport ? null : root,
+      rootMargin: isHorizontal
+        ? `0px ${-topMargin}px 0px ${-bottomMargin}px`
+        : `${-topMargin}px 0px ${-bottomMargin}px 0px`
+    };
+  }, [root, targetSize, observerMargin, isHorizontal, useViewport]);
+
+  const elsLookup = useMemo(() => {
+    const lookup: Record<string, string | undefined> = {};
+    for (const { id, parent } of els.current) {
+      lookup[id] = parent;
+    }
+    return lookup;
+  }, []);
+  const activeIds = useMemo(() => (activeId ? resolveHierarchyIds(activeId, elsLookup) : []), [activeId, elsLookup]);
+
+  const activeLookups = useMemo(() => new Set(activeIds), [activeIds]);
+  useEffect(() => {
+    if (!hasWindow) {
+      return;
+    }
+    const handleIntersection: IntersectionObserverCallback = (entries) => {
+      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;
+          }
+        }
+      });
+      if (intersectionId != null) {
+        updateActiveId(intersectionId);
+        if (onChange) {
+          const diffIds = {
+            added: intersectionId,
+            removed: activeId
+          };
+          onChange(diffIds);
+        }
+      }
+    };
+
+    const observer = new IntersectionObserver(handleIntersection, observerOptions);
+
+    els.current.forEach(({ ref }) => {
+      if (ref && ref.current) {
+        observer.observe(ref.current);
+      }
+    });
+
+    if (forceRecompute) {
+      handleIntersection(observer.takeRecords(), observer);
+      setForceRecompute(false);
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [
+    activeIds,
+    updateActiveId,
+    els,
+    elsLookup,
+    onChange,
+    activeLookups,
+    activeId,
+    observerOptions,
+    isHorizontal,
+    root,
+    forceRecompute
+  ]);
+
+  const refresh = useCallback(
+    debounce(() => {
+      setCounter(counter + 1);
+    }, REGISTER_DELAY),
+    [counter]
+  );
+
+  const register = useCallback(
+    (id, options = {}) => {
+      if (!hasWindow) {
+        return { id, ref: null };
+      }
+      const alreadyRegistered = id in elsLookup;
+      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.parent }];
+        refresh();
+      }
+      return { id, ref };
+    },
+    [elsLookup, refresh]
+  );
+
+  const unregister = useCallback((idToUnregister: string) => {
+    els.current = els.current.filter(({ id }) => id !== idToUnregister);
+  }, []);
+
+  const isActive = useCallback((id: string) => activeLookups.has(id), [activeLookups]);
+
+  const getActiveRef = useCallback(() => {
+    const entry = els.current.find(({ id }) => id === activeId);
+    return entry ? entry.ref : null;
+  }, [activeId]);
+
+  return {
+    register,
+    unregister,
+    activeIds,
+    isActive,
+    getActiveRef
+  };
+}

package/src/NavScroll/useSizeDetector.ts

@@ -0,0 +1,86 @@
+/* eslint-disable no-restricted-globals */
+import { useCallback, useEffect, useState } from 'react';
+import { debounce } from './debounce';
+import { useNavScrollArgs } from './types';
+
+const DEFAULT_DELAY = 150;
+
+export type useSizeDetectorArgs = Omit<useNavScrollArgs, 'offset'> & {
+  activeId: string | null;
+  hasWindow: boolean;
+  setForceRecompute: (force: boolean) => void;
+  updateActiveId: (id: string | null) => void;
+};
+
+export const useSizeDetector = ({
+  root,
+  isHorizontal,
+  activeId,
+  onChange,
+  setForceRecompute,
+  updateActiveId,
+  hasWindow
+}: useSizeDetectorArgs) => {
+  const [targetSize, setTargetSize] = useState<number>(1);
+
+  const useViewport =
+    root == null ||
+    (hasWindow && (isHorizontal ? window.innerWidth < root.clientWidth : window.innerHeight < root.clientHeight));
+
+  const scrollEnd = useCallback(
+    debounce(() => {
+      setForceRecompute(true);
+    }, DEFAULT_DELAY),
+    [setForceRecompute]
+  );
+
+  useEffect(() => {
+    if (!hasWindow) {
+      return;
+    }
+    let observer: IntersectionObserver | null = null;
+
+    const resizeWindowHandler = () => {
+      setTimeout(() => {
+        setTargetSize(isHorizontal ? window.innerWidth : window.innerHeight);
+      }, DEFAULT_DELAY);
+    };
+
+    const resizeElementHandler: IntersectionObserverCallback = (entries) => {
+      const [entry] = entries;
+      if (!useViewport) {
+        setTargetSize(isHorizontal ? entry.boundingClientRect.width : entry.boundingClientRect.height);
+      }
+
+      if (entry.intersectionRatio === 0) {
+        if (activeId != null) {
+          updateActiveId(null);
+          if (onChange) {
+            onChange({
+              added: null,
+              removed: activeId
+            });
+          }
+        }
+      }
+    };
+
+    addEventListener('scroll', scrollEnd);
+    if (useViewport) {
+      setTargetSize(isHorizontal ? window.innerWidth : window.innerHeight);
+      addEventListener('resize', resizeWindowHandler);
+    }
+    if (root) {
+      observer = new IntersectionObserver(resizeElementHandler);
+      observer.observe(root);
+    }
+    return () => {
+      if (observer) {
+        observer.disconnect();
+      }
+      removeEventListener('resize', resizeWindowHandler);
+      removeEventListener('scroll', scrollEnd);
+    };
+  }, [root, isHorizontal, activeId, onChange, useViewport, scrollEnd, hasWindow, updateActiveId]);
+  return { targetSize, useViewport };
+};