@redneckz/wildless-cms-uni-blocks 0.6.34 → 0.6.36

package/src/components/Header/HeaderSubMenuItem.tsx

@@ -1,6 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
-import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
+import {
+  useIntersectionObserver,
+  type IntersectionObserverOptions,
+} from '../../hooks/useIntersectionObserver';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
@@ -9,7 +12,7 @@ export interface HeaderSubMenuItemProps extends LinkProps {
   className?: string;
   active?: boolean;
   bgColor?: BgColorVersion;
-  observerOptions?: IntersectionObserverInit;
+  observerOptions?: IntersectionObserverOptions;
   onVisibilityChange?: (isIntersecting: boolean) => void;
 }
 

package/src/components/OtherProductsItem/OtherProductsItem.tsx

@@ -35,7 +35,7 @@ export const OtherProductsItem: JSXBlock<OtherProductsItemProps> = JSX<OtherProd
             <DefaultFoldButton
               label={label}
               icon={icons[Number(isUnfolded)]}
-              dataTheme={rest.options?.page?.colorPalette || colorPalette}
+              dataTheme={colorPalette || rest.options?.page?.colorPalette}
               onClick={onToggle}
             />
           )}

package/src/components/RollupItem/RollupItem.tsx

@@ -55,7 +55,16 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
   ),
 );
 
-RollupItem.childrenTypes = [];
+RollupItem.childrenTypes = {
+  exclude: [
+    'RollupItem',
+    'Accordion',
+    'AccordionItem',
+    'OtherProducts',
+    'OtherProductsItem',
+    'VerticalLayout',
+  ],
+};
 
 const renderFoldButton = ({ isUnfolded, onToggle, label, version }: RollupFoldablePartProps) => {
   const iconsPrimary: IconName[] = ['PlusIcon', 'MinusIcon'];

package/src/components/VerticalLayout/VerticalLayout.tsx

@@ -31,15 +31,17 @@ const backgroundStyleMap: Record<BlockVersionWithTransparent, string> = {
 };
 
 export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutProps>(
-  ({ className = '', gap = '', align = 'left', version = 'transparent', ...rest }) => (
+  ({ className = '', gap = '', align, version = 'transparent', ...rest }) => (
     <BlockWrapper
       className={[
         'flex flex-col',
         gapStyleMap[gap],
-        alignStyle[align],
+        align && alignStyle[align],
         backgroundStyleMap[version],
         className,
-      ].join(' ')}
+      ]
+        .filter(Boolean)
+        .join(' ')}
       {...rest}
     >
       {renderChildren(rest)}

package/src/hooks/useIntersectionObserver.ts

@@ -1,11 +1,23 @@
-import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect, useMemo, useRef } from '@redneckz/uni-jsx/lib/hooks';
+
+export interface IntersectionObserverOptions<E extends Element = Element> {
+  sensitivity?: number; // from 0 to 1
+  rootRef?: { current: E | null };
+}
+
+const SENSITIVITY_SCALE = 10;
 
 export function useIntersectionObserver<R extends Element>(
   observerCallback: IntersectionObserverCallback,
-  observerOptions?: IntersectionObserverInit,
+  { sensitivity, rootRef }: IntersectionObserverOptions = {},
 ) {
   const ref = useRef<R | null>(null);
 
+  const observerOptions = useMemo(
+    () => ({ threshold: sensitivityToThreshold(sensitivity), root: rootRef?.current }),
+    [sensitivity, rootRef?.current],
+  );
+
   useEffect(() => {
     if (!ref.current) {
       return undefined;
@@ -21,3 +33,12 @@ export function useIntersectionObserver<R extends Element>(
 
   return ref;
 }
+
+function sensitivityToThreshold(sensitivity = 0): number[] {
+  const thresholdsCount = Math.round(sensitivity * SENSITIVITY_SCALE);
+
+  return new Array(thresholdsCount)
+    .fill(0)
+    .map((_, thi) => Math.min(thi / thresholdsCount), 1)
+    .concat(1);
+}

package/src/hooks/useLink.ts

@@ -1,6 +1,6 @@
 import type { LinkProps } from '../model/LinkProps';
 import { adjustHref } from '../utils/adjustHref';
-import { isURL } from '../utils/url';
+import { isHash, isURL } from '../utils/url';
 import { handlerDecorator } from './handlerDecorator';
 import { useRouter } from './useRouter';
 
@@ -24,7 +24,7 @@ export function useLink(): <L extends Partial<LinkProps & ClickHandler>>(
         props.onClick && props.onClick(ev);
         const isLocalHref = href && !isURL(href);
         const isLocalTarget = !props.target || props.target === '_self';
-        if (isLocalHref && isLocalTarget) {
+        if (isLocalHref && isLocalTarget && !isHash(href)) {
           ev?.preventDefault();
           router.push(href);
         }

package/src/services/sitemap/SitemapProps.ts

@@ -20,13 +20,12 @@ export interface DispositionItem extends LinkProps {
 }
 
 export interface SitemapDataProps {
-  /** @title Основное меню */
   topItems?: TopMenuItem[];
-  /** @title Дополнительное меню */
   dispositions?: DispositionItem[];
   logo?: {
     image?: Picture;
     title?: string;
   };
   defaultLocation?: string;
+  officesLink?: string;
 }

package/src/ui-kit/BlockWrapper.tsx

@@ -11,15 +11,6 @@ interface BlockWrapperProps extends UniBlockProps {
   role?: string;
 }
 
-const THRESHOLD_ACCURACY = 100; // Decimals number (100 is for two decimals number, 0.**)
-const THRESHOLD_ARRAY_LENGTH = 18;
-const THRESHOLD_ARRAY_START_VALUE =
-  (THRESHOLD_ACCURACY - THRESHOLD_ARRAY_LENGTH) / THRESHOLD_ACCURACY;
-
-const OBSERVER_OPTIONS = {
-  threshold: new Array(THRESHOLD_ARRAY_LENGTH).fill(0).map(getIntersectionThreshold),
-};
-
 export const BlockWrapper = JSX<BlockWrapperProps>(
   ({ className, block, tag = 'section', role, children }) => {
     const Tag: any = tag;
@@ -33,7 +24,7 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
       () => changeHashOnObserve({ anchor, anchorClickRef }),
       [anchor],
     );
-    const ref = useIntersectionObserver(observerCallback, OBSERVER_OPTIONS);
+    const ref = useIntersectionObserver(observerCallback, { sensitivity: 1 });
 
     useEffect(
       () =>
@@ -65,12 +56,6 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
   },
 );
 
-function getIntersectionThreshold(_: number, i: number): number {
-  const value = (i + 1) / THRESHOLD_ACCURACY + THRESHOLD_ARRAY_START_VALUE;
-
-  return Math.round(value * THRESHOLD_ACCURACY) / THRESHOLD_ACCURACY;
-}
-
 function changeHash(label?: string) {
   if (label) {
     globalThis.document.location.hash = label;

package/src/ui-kit/Button/ArrowButton.tsx

@@ -24,3 +24,16 @@ export const ArrowButton = JSX<ButtonProps>(({ className, disabled, ...rest }) =
     />
   </Button>
 ));
+
+export const ScrollLeftButton = JSX<ButtonProps>((props) => (
+  <ArrowButton {...props} ariaLabel="Пролистать влево" data-block-control="scroll-left" />
+));
+
+export const ScrollRightButton = JSX<ButtonProps>((props) => (
+  <ArrowButton
+    {...props}
+    className={`${props.className || ''} rotate-180`}
+    ariaLabel="Пролистать вправо"
+    data-block-control="scroll-right"
+  />
+));

package/src/ui-kit/Foldable/FoldableSection.tsx

@@ -21,7 +21,9 @@ export const FoldableSection = JSX<FoldableSectionProps>(
     return (
       <div
         ref={containerRef}
-        className={`transition-max-h duration-300 overflow-hidden max-h-0 ${className}`}
+        className={`transition-max-h duration-300 overflow-hidden ${
+          containerRef.current || !isUnfolded ? 'max-h-0' : ''
+        } ${className}`}
       >
         {children}
       </div>

package/src/ui-kit/SwipeListControl/SwipeListContainer.tsx

@@ -0,0 +1,97 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
+import { mapChildren } from '../../utils/mapChildren';
+import type { SwipeContainerProps } from './SwipeListControlProps';
+import { SwipeListItem } from './SwipeListItem';
+
+type ItemsVisibilityList = Array<IntersectionObserverEntry | undefined>;
+
+type SwipeListItemWidthAuto = 0;
+
+/**
+ * @title Список
+ */
+interface SwipeListContainerProps extends SwipeContainerProps {
+  className?: string;
+  containerRef?: { current: HTMLDivElement | null };
+  activeIndex?: number;
+  visibleItemCount?: SwipeListItemWidthAuto | 1 | 2 | 3;
+  snapAlign?: 'snap-start' | 'snap-center' | 'snap-end';
+  onVisibleItemsChange?: (itemsVisibilityList: ItemsVisibilityList) => void;
+  onVisibleIndicesChange?: (indices: number[]) => void;
+}
+
+const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]'];
+
+export const SwipeListContainer = JSX<SwipeListContainerProps>(
+  ({
+    className = '',
+    containerRef,
+    activeIndex,
+    visibleItemCount,
+    gap = 0,
+    padding = 0,
+    snapAlign = 'snap-center',
+    children,
+    onVisibleItemsChange,
+    onVisibleIndicesChange,
+  }) => {
+    const observerOptions: IntersectionObserverOptions = {
+      sensitivity: 1,
+      rootRef: containerRef,
+    };
+
+    const itemsVisibilityListRef = useRef<ItemsVisibilityList>([]);
+    const handleIntersection = useCallback(
+      (idx: number, entry: IntersectionObserverEntry) => {
+        const itemsVisibilityList = [...(itemsVisibilityListRef.current || [])];
+        itemsVisibilityList[idx] = entry;
+        itemsVisibilityListRef.current = itemsVisibilityList;
+
+        onVisibleItemsChange && onVisibleItemsChange(itemsVisibilityList);
+        onVisibleIndicesChange && onVisibleIndicesChange(getVisibleIndices(itemsVisibilityList));
+      },
+      [onVisibleItemsChange, onVisibleIndicesChange],
+    );
+
+    return (
+      <div
+        className={`box-border overflow-auto flex horizontal-list no-scrollbar ${className}`}
+        style={{ ...getContainerStyle(padding), gap: `${gap}px` }}
+        role="list"
+        ref={containerRef}
+      >
+        {mapChildren((child, idx) => (
+          <SwipeListItem
+            key={String(idx)}
+            className={`${snapAlign} ${
+              visibleItemCount ? childStyleMap[visibleItemCount - 1] : ''
+            }`}
+            style={getContainerStyle(padding / 4)}
+            activeIndex={activeIndex}
+            idx={idx}
+            observerOptions={observerOptions}
+            onIntersection={handleIntersection}
+          >
+            {child}
+          </SwipeListItem>
+        ))(children)}
+      </div>
+    );
+  },
+);
+
+// Styles used to compensate outer container padding to get rid of clipping effect
+const getContainerStyle = (padding: number): Record<string, string> => ({
+  marginLeft: `${-padding}px`,
+  marginRight: `${-padding}px`,
+  paddingLeft: `${padding}px`,
+  paddingRight: `${padding}px`,
+});
+
+const getVisibleIndices = (itemsVisibilityList: ItemsVisibilityList) =>
+  itemsVisibilityList
+    .map((_, i): [IntersectionObserverEntry | undefined, number] => [_, i])
+    .filter(([_]) => _ && _.intersectionRatio >= 0.9)
+    .map(([, i]) => i);

package/src/ui-kit/SwipeListControl/SwipeListControl.tsx

@@ -1,12 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+import { SwipeListContainer } from './SwipeListContainer';
 import { SwipeListControlDots } from './SwipeListControlDots';
-import { SwipeListControlList } from './SwipeListControlList';
-import type { SwipeListControlListProps } from './SwipeListControlList';
 import type { SwipeListControlProps } from './SwipeListControlProps';
-import { getIndexParts } from './utils/getIndexParts';
-import { getScrollPoints } from './utils/getScrollPoints';
+import { useSwipeListScroll } from './useSwipeListScroll';
+
+const DEFAULT_GAP = 14;
+
+/*
+  Horizontal padding used on a container above SwipeListControl.
+  Same value used on a SwipeListControlChildren container to compensate it
+  and get rid of a clipping effect caused by overflow: hidden.
+ */
+const DEFAULT_PADDING = 16;
 
 export const SwipeListControl = JSX<SwipeListControlProps>(
   ({
@@ -14,65 +19,36 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     gap = DEFAULT_GAP,
     padding = DEFAULT_PADDING,
     showDots = true,
-    onSlideChange,
     children,
+    onVisibleIndicesChange,
   }) => {
-    const [activeIndex, setActiveIndex] = useState(0);
-    const [indexFraction, setIndexFraction] = useState(0);
-
-    const dotsProps = {
-      activeIndex,
-      indexFraction,
-      showDots,
-      children,
-    };
-
-    const handleScroll: SwipeListControlListProps['onScroll'] = useCallback(
-      (e) => {
-        const {
-          scrollLeft,
-          clientWidth,
-          childElementCount,
-          scrollWidth,
-          children: childrenCollection,
-        } = e?.currentTarget as HTMLElement;
-        if (!childrenCollection[0]) {
-          return;
-        }
+    const itemCount = Array.isArray(children) ? children.length : 0;
 
-        // horizontal PADDING / 2 to compensate padding-margin combo of child container
-        // without CSS calc function, as wrapper element gets bigger in the DOM, remaining same visually
-        const itemWidth = (childrenCollection[0] as HTMLElement).offsetWidth - padding / 2;
-        const scrollPoints = getScrollPoints({
-          gap,
-          padding,
-          clientWidth,
-          scrollWidth,
-          childElementCount,
-          itemWidth,
-        });
-
-        const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
-        if (index !== activeIndex && onSlideChange) {
-          onSlideChange();
-        }
-        setActiveIndex(index);
-        setIndexFraction(fraction);
-      },
-      [gap, padding, activeIndex, onSlideChange],
-    );
+    const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
+      itemCount,
+      onVisibleIndicesChange,
+    });
+    const [activeIndex] = scroll.visibleIndicesRange;
 
     return (
       <div className={className}>
-        <SwipeListControlList
+        <SwipeListContainer
+          containerRef={containerRef}
+          activeIndex={activeIndex}
+          visibleItemCount={1}
           gap={gap}
           padding={padding}
-          activeIndex={activeIndex}
-          onScroll={handleScroll}
+          onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
         >
           {children}
-        </SwipeListControlList>
-        <SwipeListControlDots {...dotsProps} />
+        </SwipeListContainer>
+        {showDots ? (
+          <SwipeListControlDots
+            containerRef={containerRef}
+            activeIndex={activeIndex}
+            dotCount={itemCount}
+          />
+        ) : null}
       </div>
     );
   },

package/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -1,70 +1,36 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 
-const DOT_STYLES = 'bg-primary-main opacity-30 w-1.5 h-1.5 min-w-1.5 min-h-1.5 rounded-full';
-const BASE_DOT_WIDTH = 6;
-const ACTIVE_DOT_WIDTH_CHANGE = 16;
-const BASE_DOT_OPACITY = 0.3;
-const ACTIVE_DOT_OPACITY_CHANGE = 0.7;
+const dotStyle = 'cursor-pointer bg-primary-main h-2 rounded-full transition-width duration-300';
 
-export interface SwipeListControlDotsProps {
-  activeIndex: number;
-  indexFraction: number;
-  showDots?: boolean;
+interface SwipeListControlDotsProps {
+  containerRef?: { current: HTMLDivElement | null };
+  activeIndex?: number;
+  dotCount?: number;
 }
 
 export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
-  ({ children, activeIndex, indexFraction, showDots }) => {
-    const handleClick = useCallback(
-      (idx: number) => (e) => {
-        if (idx === activeIndex) {
-          return;
-        }
-
-        const contentContainer = (e.currentTarget as HTMLElement).parentElement
-          ?.previousElementSibling;
-
-        contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-      },
-      [activeIndex],
-    );
-
-    return showDots && children ? (
+  ({ containerRef, activeIndex, dotCount = 0 }) => {
+    const handleClick = (idx: number) => {
+      if (idx !== activeIndex && containerRef?.current) {
+        containerRef.current.children[idx]?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+        });
+      }
+    };
+
+    return dotCount ? (
       <div className="flex gap-2 mx-auto mt-5 w-fit">
-        {children.length && children.map ? (
-          children.map((_, idx: number) => (
-            <div
-              key={String(idx)}
-              onClick={handleClick(idx)}
-              className={DOT_STYLES}
-              style={getDotStyles(idx, activeIndex, indexFraction)}
-              aria-hidden
-            />
-          ))
-        ) : (
-          <div className={DOT_STYLES} style={createDotStyle(1)} />
-        )}
+        {new Array(dotCount).fill(null).map((_, idx: number) => (
+          <div
+            key={String(idx)}
+            className={`${dotStyle} ${idx === activeIndex ? 'w-6' : 'w-2 opacity-30'}`}
+            role="button"
+            aria-hidden
+            onClick={() => handleClick(idx)}
+          />
+        ))}
       </div>
     ) : null;
   },
 );
-
-const getDotStyles = (
-  currentIdx: number,
-  activeIndex: number,
-  indexFraction: number,
-): Record<string, string> | undefined => {
-  if (currentIdx < activeIndex || currentIdx > activeIndex + 1) {
-    return undefined;
-  }
-
-  const leftIndexMod = 1 - indexFraction;
-  const rightIndexMod = indexFraction;
-
-  return createDotStyle(currentIdx === activeIndex ? leftIndexMod : rightIndexMod);
-};
-
-const createDotStyle = (indexModifier: number): Record<string, string> => ({
-  opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * indexModifier}`,
-  width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * indexModifier}px`,
-});

package/src/ui-kit/SwipeListControl/SwipeListControlProps.ts

@@ -1,7 +1,7 @@
 /**
  * @title Контейнер
  */
-export interface SwipeContainer {
+export interface SwipeContainerProps {
   /** @title Расстояние между элементами */
   gap?: number;
   /** @title Отступы */
@@ -11,9 +11,9 @@ export interface SwipeContainer {
 /**
  * @title Swipe-контроллер
  */
-export interface SwipeListControlProps extends SwipeContainer {
+export interface SwipeListControlProps extends SwipeContainerProps {
   className?: string;
   /** @title Точки-индикаторы */
   showDots?: boolean;
-  onSlideChange?: () => void;
+  onVisibleIndicesChange?: (indices: number[]) => void;
 }

package/src/ui-kit/SwipeListControl/SwipeListItem.tsx

@@ -0,0 +1,44 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import {
+  useIntersectionObserver,
+  type IntersectionObserverOptions,
+} from '../../hooks/useIntersectionObserver';
+
+/**
+ * @title Элемент списка
+ */
+interface SwipeListControlItemProps {
+  className?: string;
+  style?: Record<string, string>;
+  idx?: number;
+  activeIndex?: number;
+  observerOptions?: IntersectionObserverOptions;
+  onIntersection?: (idx: number, entry: IntersectionObserverEntry) => void;
+}
+
+export const SwipeListItem = JSX<SwipeListControlItemProps>(
+  ({ className = '', style, idx, activeIndex, observerOptions, children, onIntersection }) => {
+    const observerCallback = useCallback(
+      (entries: IntersectionObserverEntry[]) => {
+        if (entries.length && onIntersection) {
+          onIntersection(idx || 0, entries[entries.length - 1]);
+        }
+      },
+      [onIntersection, idx],
+    );
+    const ref = useIntersectionObserver<HTMLDivElement>(observerCallback, observerOptions);
+
+    return (
+      <div
+        className={`inline-block snap-always box-border ${className}`}
+        style={style}
+        role="listitem"
+        aria-current={Boolean(idx === activeIndex)}
+        ref={ref}
+      >
+        {children}
+      </div>
+    );
+  },
+);

package/src/ui-kit/SwipeListControl/scrollBy.ts

@@ -0,0 +1,10 @@
+const getItemWidth =
+  (container: HTMLElement) =>
+  (itemCount: number): number =>
+    container.scrollWidth / itemCount;
+
+export const scrollBy =
+  (container: HTMLElement) =>
+  (itemCount: number, delta: -1 | 1): void => {
+    container.scrollBy({ left: delta * getItemWidth(container)(itemCount), behavior: 'smooth' });
+  };

package/src/ui-kit/SwipeListControl/scrollToEnd.ts

@@ -0,0 +1,3 @@
+export const scrollToEnd = (container: HTMLElement): void => {
+  container.scrollTo({ left: container.scrollWidth, behavior: 'smooth' });
+};

package/src/ui-kit/SwipeListControl/scrollToStart.ts

@@ -0,0 +1,3 @@
+export const scrollToStart = (container: HTMLElement): void => {
+  container.scrollTo({ left: 0, behavior: 'smooth' });
+};