@uxf/core-react 11.125.0 → 11.126.0

package/README.md

@@ -1,28 +1,27 @@
 # UXF Core-React
 
 ## Components
+
 ---
 
 ### Hide
 
 Conditionally hide some jsx content.
+
 ```tsx
 import { Hide } from "@uxf/core-react/components/hide";
 
-<Hide when={SOME_CONDITION}>
-    ...some content
-</Hide>
+<Hide when={SOME_CONDITION}>...some content</Hide>;
 ```
 
 ### Show
 
 Conditionally show some jsx content.
+
 ```tsx
 import { Show } from "@uxf/core-react/components/show";
 
-<Show when={SOME_CONDITION}>
-    ...some content
-</Show>
+<Show when={SOME_CONDITION}>...some content</Show>;
 ```
 
 ### ViewportHeightPolyfill
@@ -30,13 +29,15 @@ import { Show } from "@uxf/core-react/components/show";
 Polyfill for custom css variable `--viewport-height` to mimic functionality of browser's [dynamic viewport height](https://web.dev/blog/viewport-units).
 
 Add component to react app root (eg. `_app.tsx`).
+
 ```tsx
 import { ViewportHeightPolyfill } from "@uxf/core-react/components/viewport-height-polyfill";
 
-<ViewportHeightPolyfill />
+<ViewportHeightPolyfill />;
 ```
 
 Add css variable declaration with fallback to app global styles (eg. `base.css`) if already not there.
+
 ```css
 :root {
     --viewport-height: 100vh;
@@ -48,10 +49,13 @@ Add css variable declaration with fallback to app global styles (eg. `base.css`)
 ```
 
 ## Hooks
+
 ---
+
 ### useBodyScrollLock
 
 Lock scrolling on body element. Useful for modals, popovers, etc.
+
 ```tsx
 import { useBodyScrollLock } from "@uxf/core-react/hooks/use-body-scroll-lock";
 import { useState } from "react";
@@ -62,32 +66,49 @@ const [isOpen, setIsOpen] = useState<boolean>();
 const clearAllOnclose = false;
 
 useBodyScrollLock<HTMLDivElement>(innerRef, isOpen, {
-  allowTouchMove: undefined, // https://github.com/willmcpo/body-scroll-lock#allowtouchmove
-  clearAllOnClose: false, // optionally call clearAllBodyScrollLocks method on unmount
-  reserveScrollBarGap: undefined, // https://github.com/willmcpo/body-scroll-lock#reservescrollbargap
+    allowTouchMove: undefined, // https://github.com/willmcpo/body-scroll-lock#allowtouchmove
+    clearAllOnClose: false, // optionally call clearAllBodyScrollLocks method on unmount
+    reserveScrollBarGap: undefined, // https://github.com/willmcpo/body-scroll-lock#reservescrollbargap
 });
 
-<div ref={innerRef}>Element which activates scroll lock on its parent elements.</div>
+<div ref={innerRef}>Element which activates scroll lock on its parent elements.</div>;
 ```
+
 ---
+
 ### isMounted
+
 Check if component is mounted.
+
 ```tsx
 import { useIsMounted } from "@uxf/core-react/hooks/use-is-mounted";
 
 const isMounted = useIsMounted();
 ```
+
 ---
+
 ### useIsomorphicLayoutEffect
+
 Returns `useEffect` on client and `useLayoutEffect` on server.
+
 ```tsx
 import { useIsomorphicLayoutEffect } from "@uxf/core-react/hooks/use-isomorphic-layout-effect";
 
-useIsomorphicLayoutEffect(() => {/* code */}, [/* deps */]);
+useIsomorphicLayoutEffect(
+    () => {
+        /* code */
+    },
+    [/* deps */],
+);
 ```
+
 ---
+
 ### useKey
+
 Trigger callback on given key.
+
 ```tsx
 import { useKey } from "@uxf/core-react/hooks/use-key";
 import { useRef } from "react";
@@ -96,19 +117,24 @@ const targetRef = useRef<HTMLDivElement>(null);
 const disabled = false; // eg. for passing disabled state
 
 useKey<HTMLDivElement>("Enter", () => console.log("callback"), {
-  disabled,
-  targetRef, // if not provided, then `document` will be used
-  type: "keydown"
+    disabled,
+    targetRef, // if not provided, then `document` will be used
+    type: "keydown",
 });
 
-<div ref={targetRef} tabIndex={0}>Element with callback triggerable by enter key.</div>
+<div ref={targetRef} tabIndex={0}>
+    Element with callback triggerable by enter key.
+</div>;
 ```
+
 ---
+
 ### useMinWindowWidth
 
 > **Deprecated** — Use `useMediaQuery` instead.
 
 Returns boolean if window width is equal or greater than given value.
+
 ```tsx
 import { useMinWindowWidth } from "@uxf/core-react/hooks/use-min-window-width";
 
@@ -118,25 +144,37 @@ const isDesktopWithDebounce = useMinWindowWidth(1200, 200); // will be updated e
 const example = isDesktop ? "desktop" : "tablet";
 const debouncedExample = isDesktopWithDebounce ? "debouncedDesktop" : "debouncedTablet";
 ```
+
 ---
+
 ### usePagination
+
 Returns array of pagination items.
+
 ```ts
 import { usePagination } from "@uxf/core-react/hooks/use-pagination";
 
-const paginationItems = usePagination({ page: 1, count: 10 })
+const paginationItems = usePagination({ page: 1, count: 10 });
 ```
+
 ---
+
 ### useRafState
+
 Updates state only in the callback of `requestAnimationFrame`.
+
 ```tsx
 import { useRafState } from "@uxf/core-react/hooks/use-raf-state";
 
 const [state, setState] = useRafState<boolean>(false);
 ```
+
 ---
+
 ### useOnMount
+
 Calls the callback on component mount.
+
 ```tsx
 import { useOnUnmount } from "@uxf/core-react/hooks/use-on-unmount";
 
@@ -144,17 +182,30 @@ const exampleCallback = () => {};
 
 useOnUnmount(exampleCallback());
 ```
+
 ---
+
 ### useOnUpdate
+
 Calls the callback only on component update, except initial mount.
+
 ```tsx
 import { useOnUpdate } from "@uxf/core-react/hooks/use-on-update";
 
-useOnUpdate(() => {/* code */}, [/* deps */]);
+useOnUpdate(
+    () => {
+        /* code */
+    },
+    [/* deps */],
+);
 ```
+
 ---
+
 ### useWindowScroll
+
 Returns x and y scroll coordinates of window on scroll.
+
 ```tsx
 import { useWindowScroll } from "@uxf/core-react/hooks/use-window-scroll";
 
@@ -162,9 +213,13 @@ const windowScroll = useWindowScroll();
 
 const example = windowScroll && windowScroll.y > 100 ? "scroled" : "on top";
 ```
+
 ---
+
 ### useWindowSize
+
 Returns window width and height.
+
 ```tsx
 import { useWindowSize } from "@uxf/core-react/hooks/use-window-size";
 
@@ -172,9 +227,13 @@ const windowSize = useWindowSize();
 
 const example = windowSize && windowSize.width > 1200 ? "desktop" : "tablet";
 ```
+
 ---
+
 ### useFocusTrap
+
 Locks focus inside given element.
+
 ```tsx
 import { useFocusTrap } from "@uxf/core-react/hooks/use-focus-trap";
 import { useState } from "react";
@@ -183,11 +242,15 @@ const [active, setActive] = useState<boolean>();
 
 const focusTrapRef = useFocusTrap(active);
 
-<div ref={focusTrapRef}>Element which trap focus inside if `active` is truthy.</div>
+<div ref={focusTrapRef}>Element which trap focus inside if `active` is truthy.</div>;
 ```
+
 ---
+
 ### useFocusReturn
+
 Returns focus to last active element.
+
 ```tsx
 import { useFocusReturn } from "@uxf/core-react/hooks/use-focus-return";
 import { useState } from "react";
@@ -197,113 +260,128 @@ const [active, setActive] = useState<boolean>();
 // Returns focus to last active element, e.g. in Modal or Popover
 useFocusReturn(active);
 ```
+
 ---
+
 ### useAnchorProps
+
 Returns props for anchor element.
+
 ```tsx
 import { useAnchorProps } from "@uxf/core-react/clickable/use-anchor-props";
 import { AnchorHTMLAttributes } from "react";
 
 // extends <a /> by `analyticsCallback`, `disabled`, `loading`, `submit` props
 const anchorProps = useAnchorProps<AnchorHTMLAttributes<HTMLAnchorElement>>({
-  analyticsCallback: () => console.log("analytics"),
-  disabled: false,
-  href: "https://www.google.com/",
-  loading: false,
-  onClick: () => console.log("success"),
-  type: "submit", // simulate <button type="submit" /> function
+    analyticsCallback: () => console.log("analytics"),
+    disabled: false,
+    href: "https://www.google.com/",
+    loading: false,
+    onClick: () => console.log("success"),
+    type: "submit", // simulate <button type="submit" /> function
 });
 
-<a {...anchorProps}>Click me</a>
+<a {...anchorProps}>Click me</a>;
 
 // example with generics
 import { UseAnchorProps, useAnchorProps } from "@uxf/core-react/clickable/use-anchor-props";
 import { AnchorHTMLAttributes } from "react";
 
 interface Props extends UseAnchorProps, AnchorHTMLAttributes<HTMLAnchorElement> {
-  customProp?: boolean;
+    customProp?: boolean;
 }
 
 const anchorProps = useAnchorProps<Props>({
-  customProp: true,
-  loading: false,
-  href: "https://www.google.com/",
+    customProp: true,
+    loading: false,
+    href: "https://www.google.com/",
 });
 
-<a {...anchorProps}>Click me</a>
-
+<a {...anchorProps}>Click me</a>;
 ```
+
 ---
+
 ### useButtonProps
+
 Returns props for button element.
+
 ```tsx
 import { useButtonProps } from "@uxf/core-react/clickable/use-button-props";
 import { ButtonHTMLAttributes } from "react";
 
 // extends <button /> by `analyticsCallback` and `loading` props
 const buttonProps = useButtonProps<ButtonHTMLAttributes<HTMLButtonElement>>({
-  analyticsCallback: () => console.log("analytics"),
-  disabled: false,
-  loading: false,
-  onClick: () => console.log("success"),
-  type: "submit",
+    analyticsCallback: () => console.log("analytics"),
+    disabled: false,
+    loading: false,
+    onClick: () => console.log("success"),
+    type: "submit",
 });
 
-<button {...buttonProps}>Click me</button>
+<button {...buttonProps}>Click me</button>;
 
 // example with generics
 import { UseButtonProps, useButtonProps } from "@uxf/core-react/clickable/use-button-props";
 import { ButtonHTMLAttributes } from "react";
 
 interface Props extends UseButtonProps, ButtonHTMLAttributes<HTMLButtonElement> {
-  customProp?: boolean;
+    customProp?: boolean;
 }
 
 const buttonProps = useButtonProps<Props>({
-  customProp: true,
-  loading: false,
-  type: "submit",
+    customProp: true,
+    loading: false,
+    type: "submit",
 });
 
-<button {...buttonProps}>Click me</button>
+<button {...buttonProps}>Click me</button>;
 ```
+
 ---
+
 ### useClickableProps
+
 Returns props for clickable element.
+
 ```tsx
 import { useClickableProps } from "@uxf/core-react/clickable/use-clickable-props";
 import { HTMLAttributes } from "react";
 
 // extends any HTML element by `analyticsCallback`, `disabled`, `loading`, `submit` props
 const clickableProps = useClickableProps<HTMLAttributes<HTMLDivElement>>({
-  analyticsCallback: () => console.log("analytics"),
-  disabled: false,
-  loading: false,
-  onClick: () => console.log("success"),
-  type: "submit", // simulate <button type="submit" /> function
+    analyticsCallback: () => console.log("analytics"),
+    disabled: false,
+    loading: false,
+    onClick: () => console.log("success"),
+    type: "submit", // simulate <button type="submit" /> function
 });
 
-<div {...clickableProps}>Click me</div>
+<div {...clickableProps}>Click me</div>;
 
 // example with generics
 import { UseClickableProps, useClickableProps } from "@uxf/core-react/clickable/use-clickable-props";
 import { HTMLAttributes } from "react";
 
 interface Props extends UseClickableProps, HTMLAttributes<HTMLDivElement> {
-  customProp?: boolean;
+    customProp?: boolean;
 }
 
 const buttonProps = useClickableProps<Props>({
-  customProp: true,
-  hidden: false,
-  loading: false,
+    customProp: true,
+    hidden: false,
+    loading: false,
 });
 
-<button {...buttonProps}>Click me</button>
+<button {...buttonProps}>Click me</button>;
 ```
+
 ---
+
 ### useMouseDragToScroll
+
 Allow to scroll element by dragging mouse.
+
 ```tsx
 import { useMouseDragToScroll } from "@uxf/core-react/hooks/use-mouse-drag-to-scroll";
 
@@ -311,11 +389,15 @@ const targetRef = useRef<HTMLDivElement>(null);
 
 const style = useMouseDragToScroll(scrollRef);
 
-<div style={style}>Drag to scroll</div>
+<div style={style}>Drag to scroll</div>;
 ```
+
 ---
+
 ### useInputFocus
+
 Manage focus states of input element.
+
 ```tsx
 import { useInputFocus } from "@uxf/core-react/hooks/use-input-focus";
 
@@ -328,53 +410,73 @@ const input = useInputFocus(focusRef, onBlur, onFocus);
 <button onClick={input.focus}>Focus input</button>
 <input onBlur={input.onBlur} onFocus={input.onFocus} ref={focusRef} />
 ```
+
 ---
+
 ### useLatest
+
 Allways returns latest value of given variable.
+
 ```tsx
 import { useLatest } from "@uxf/core-react/hooks/use-latest";
 
 const latestState = useLatest(someUnstableWhatever);
 
 useEffect(() => {
-  latestState.current(); // use newest state of 'someUnstableWhatever' without affecting this effetct update
-}, [latestState])
+    latestState.current(); // use newest state of 'someUnstableWhatever' without affecting this effetct update
+}, [latestState]);
 ```
+
 ---
+
 ### usePrevious
+
 Returns previous value of given variable.
+
 ```tsx
 import { usePrevious } from "@uxf/core-react/hooks/use-previous";
 
 const previousState = usePrevious(someUnstableWhatever);
 
 useEffect(() => {
-  previousState.current(); // use state of 'someUnstableWhatever' from previous render without affecting this effetct update
-}, [previousState])
+    previousState.current(); // use state of 'someUnstableWhatever' from previous render without affecting this effetct update
+}, [previousState]);
 ```
+
 ---
+
 ### useToggle
+
 Returns boolean state and methods to toggle it.
+
 ```tsx
 import { useToggle } from "@uxf/core-react/hooks/use-toggle";
 
 const [isVisible, toggleIsVisible, setVisible, setInvisible] = useToggle(false);
 
-<button onClick={toggleIsVisible}>Toggle visibility</button>
+<button onClick={toggleIsVisible}>Toggle visibility</button>;
 ```
+
 ---
+
 ### useIncrement
+
 Returns number state and methods to increment, decrement and reset.
+
 ```tsx
 import { useIncrement } from "@uxf/core-react/hooks/use-increment";
 
 const [count, increment, decrement, reset] = useIncrement(5, 1);
 
-<button onClick={increment}>Toggle visibility</button>
+<button onClick={increment}>Toggle visibility</button>;
 ```
+
 ---
+
 ### useDebounce
+
 Returns the latest value after given delay.
+
 ```tsx
 import { useDebounce } from "@uxf/core-react/hooks/use-debounce";
 
@@ -386,10 +488,13 @@ const debouncedValue = useDebounce<string>("some value", 300);
 ```tsx
 import { nl2br } from "@uxf/core-react/string/nl2br";
 
-<div>{nl2br("Hello\nWorld")}</div>
+<div>{nl2br("Hello\nWorld")}</div>;
 ```
+
 ---
+
 ### useMediaQuery
+
 Returns whether the given media query is currently matched. Optionally accepts a callback that is called on every change.
 
 Uses `window.matchMedia` with a `change` event listener (via `AbortController`) for efficient updates.
@@ -415,9 +520,10 @@ const isDesktopClientOnly = useMediaQuery(`(min-width: ${twScreens.sm})`, undefi
 ```
 
 **Parameters:**
+
 - `mediaQueryString` – CSS media query string
-- `callback` *(optional)* – called with `(isMatching, mediaQueryString)` on every match change
-- `isSSR` *(optional, default: `true`)* – when `true`, initial state is `false` to avoid SSR/hydration mismatch; when `false`, initial state is read directly from `window.matchMedia` (use only in client-only components)
+- `callback` _(optional)_ – called with `(isMatching, mediaQueryString)` on every match change
+- `isSSR` _(optional, default: `true`)_ – when `true`, initial state is `false` to avoid SSR/hydration mismatch; when `false`, initial state is read directly from `window.matchMedia` (use only in client-only components)
 
 ## Drag and Drop (DND) Hooks
 
@@ -431,16 +537,17 @@ Low-level hook that provides the core drag-and-drop functionality. Used as a bui
 import { useSortableCore } from "@uxf/core-react/dnd/hooks/use-sortable-core";
 
 const {
-  activeElement,      // Currently dragged element
-  setActiveElement,   // Set active element manually
-  onDragStart,        // Drag start handler
-  onDragCancel,       // Drag cancel handler
-  sensors,            // DND sensors (pointer, keyboard)
-  dropAnimationConfig // Animation configuration for drop
+    activeElement, // Currently dragged element
+    setActiveElement, // Set active element manually
+    onDragStart, // Drag start handler
+    onDragCancel, // Drag cancel handler
+    sensors, // DND sensors (pointer, keyboard)
+    dropAnimationConfig, // Animation configuration for drop
 } = useSortableCore();
 ```
 
 ---
+
 ### useSortableSingle
 
 Hook for implementing drag-and-drop sorting within a single list. Manages item reordering and state internally.
@@ -452,58 +559,51 @@ import { useSortableSingle } from "@uxf/core-react/dnd/hooks/use-sortable-single
 import { SortableItem } from "./sortable-item"; // Your sortable item component
 
 interface Task {
-  id: string;
-  title: string;
+    id: string;
+    title: string;
 }
 
 function TaskList() {
-  const initialTasks: Task[] = [
-    { id: "1", title: "Write documentation" },
-    { id: "2", title: "Review PR" },
-    { id: "3", title: "Deploy to production" }
-  ];
-
-  const {
-    items,              // Current items state
-    setItems,           // Update items manually
-    activeItem,         // Currently dragged item
-    onDragStart,
-    onDragEnd,
-    onDragCancel,
-    sensors,
-    dropAnimationConfig
-  } = useSortableSingle(
-    initialTasks,
-    (fromIndex, toIndex, updatedList) => {
-      // Optional callback when items are reordered
-      console.log(`Moved from ${fromIndex} to ${toIndex}`, updatedList);
-    }
-  );
-
-  return (
-    <DndContext
-      sensors={sensors}
-      onDragStart={onDragStart}
-      onDragEnd={onDragEnd}
-      onDragCancel={onDragCancel}
-    >
-      <SortableContext items={items.map(item => item.id)} strategy={verticalListSortingStrategy}>
-        {items.map(task => (
-          <SortableItem key={task.id} id={task.id}>
-            {task.title}
-          </SortableItem>
-        ))}
-      </SortableContext>
-
-      <DragOverlay dropAnimation={dropAnimationConfig}>
-        {activeItem ? <div>{activeItem.title}</div> : null}
-      </DragOverlay>
-    </DndContext>
-  );
+    const initialTasks: Task[] = [
+        { id: "1", title: "Write documentation" },
+        { id: "2", title: "Review PR" },
+        { id: "3", title: "Deploy to production" },
+    ];
+
+    const {
+        items, // Current items state
+        setItems, // Update items manually
+        activeItem, // Currently dragged item
+        onDragStart,
+        onDragEnd,
+        onDragCancel,
+        sensors,
+        dropAnimationConfig,
+    } = useSortableSingle(initialTasks, (fromIndex, toIndex, updatedList) => {
+        // Optional callback when items are reordered
+        console.log(`Moved from ${fromIndex} to ${toIndex}`, updatedList);
+    });
+
+    return (
+        <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd} onDragCancel={onDragCancel}>
+            <SortableContext items={items.map((item) => item.id)} strategy={verticalListSortingStrategy}>
+                {items.map((task) => (
+                    <SortableItem key={task.id} id={task.id}>
+                        {task.title}
+                    </SortableItem>
+                ))}
+            </SortableContext>
+
+            <DragOverlay dropAnimation={dropAnimationConfig}>
+                {activeItem ? <div>{activeItem.title}</div> : null}
+            </DragOverlay>
+        </DndContext>
+    );
 }
 ```
 
 ---
+
 ### useSortableMulti
 
 Hook for implementing drag-and-drop between multiple sections/lists. Ideal for kanban boards, categorized lists, or visible/hidden column management.
@@ -515,89 +615,80 @@ import { useSortableMulti } from "@uxf/core-react/dnd/hooks/use-sortable-multi";
 import { SortableItem } from "./sortable-item"; // Your sortable item component
 
 interface Task {
-  id: string;
-  title: string;
+    id: string;
+    title: string;
 }
 
 interface Sections {
-  todo: Task[];
-  inProgress: Task[];
-  done: Task[];
+    todo: Task[];
+    inProgress: Task[];
+    done: Task[];
 }
 
 function KanbanBoard() {
-  const [sections, setSections] = useState<Sections>({
-    todo: [
-      { id: "1", title: "Design UI" },
-      { id: "2", title: "Write tests" }
-    ],
-    inProgress: [
-      { id: "3", title: "Implement feature" }
-    ],
-    done: [
-      { id: "4", title: "Setup project" }
-    ]
-  });
-
-  const {
-    getSectionItemsIds, // Get IDs for a section (handles empty sections)
-    activeItem,         // Currently dragged item
-    onDragStart,
-    onDragEnd,
-    onDragCancel,
-    sensors,
-    dropAnimationConfig
-  } = useSortableMulti<Task, Sections>(
-    sections,
-    setSections,
-    (sourceKey, destKey, fromIndex, toIndex, nextState) => {
-      // Optional callback when items are moved between sections
-      console.log(`Moved from ${String(sourceKey)} to ${String(destKey)}`);
-      // Save to backend, analytics, etc.
-    }
-  );
-
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={rectIntersection}
-      onDragStart={onDragStart}
-      onDragEnd={onDragEnd}
-      onDragCancel={onDragCancel}
-    >
-      <div className="kanban-board">
-        {(Object.keys(sections) as Array<keyof Sections>).map((sectionKey) => (
-          <div key={sectionKey} className="kanban-column">
-            <h3>{sectionKey}</h3>
-            <SortableContext
-              items={getSectionItemsIds(sectionKey)}
-              strategy={verticalListSortingStrategy}
-            >
-              {sections[sectionKey].map(task => (
-                <SortableItem key={task.id} id={task.id}>
-                  {task.title}
-                </SortableItem>
-              ))}
-            </SortableContext>
-          </div>
-        ))}
-      </div>
-
-      <DragOverlay dropAnimation={dropAnimationConfig}>
-        {activeItem ? <div>{activeItem.title}</div> : null}
-      </DragOverlay>
-    </DndContext>
-  );
+    const [sections, setSections] = useState<Sections>({
+        todo: [
+            { id: "1", title: "Design UI" },
+            { id: "2", title: "Write tests" },
+        ],
+        inProgress: [{ id: "3", title: "Implement feature" }],
+        done: [{ id: "4", title: "Setup project" }],
+    });
+
+    const {
+        getSectionItemsIds, // Get IDs for a section (handles empty sections)
+        activeItem, // Currently dragged item
+        onDragStart,
+        onDragEnd,
+        onDragCancel,
+        sensors,
+        dropAnimationConfig,
+    } = useSortableMulti<Task, Sections>(sections, setSections, (sourceKey, destKey, fromIndex, toIndex, nextState) => {
+        // Optional callback when items are moved between sections
+        console.log(`Moved from ${String(sourceKey)} to ${String(destKey)}`);
+        // Save to backend, analytics, etc.
+    });
+
+    return (
+        <DndContext
+            sensors={sensors}
+            collisionDetection={rectIntersection}
+            onDragStart={onDragStart}
+            onDragEnd={onDragEnd}
+            onDragCancel={onDragCancel}
+        >
+            <div className="kanban-board">
+                {(Object.keys(sections) as Array<keyof Sections>).map((sectionKey) => (
+                    <div key={sectionKey} className="kanban-column">
+                        <h3>{sectionKey}</h3>
+                        <SortableContext items={getSectionItemsIds(sectionKey)} strategy={verticalListSortingStrategy}>
+                            {sections[sectionKey].map((task) => (
+                                <SortableItem key={task.id} id={task.id}>
+                                    {task.title}
+                                </SortableItem>
+                            ))}
+                        </SortableContext>
+                    </div>
+                ))}
+            </div>
+
+            <DragOverlay dropAnimation={dropAnimationConfig}>
+                {activeItem ? <div>{activeItem.title}</div> : null}
+            </DragOverlay>
+        </DndContext>
+    );
 }
 ```
 
 **Notes:**
+
 - Items must have an `id: string` property
 - `getSectionItemsIds` automatically handles empty sections by returning placeholder IDs
 - Use `rectIntersection` collision detection for better multi-section behavior
 - The hook manages item movement between sections automatically
 
 ---
+
 ### useSortableItems
 
 Legacy hook for drag-and-drop sorting. Consider using `useSortableSingle` for new implementations.
@@ -605,20 +696,13 @@ Legacy hook for drag-and-drop sorting. Consider using `useSortableSingle` for ne
 ```tsx
 import { useSortableItems } from "@uxf/core-react/dnd/hooks/use-sortable-items";
 
-const {
-  memoizedSensors,
-  dropAnimationConfig,
-  itemsIds,
-  activeItem,
-  onDragStart,
-  onDragEnd,
-  onDragCancel
-} = useSortableItems({
-  items: myItems,
-  handleDragEnd: (activeIndex, overIndex) => {
-    // Handle reorder
-  }
-});
+const { memoizedSensors, dropAnimationConfig, itemsIds, activeItem, onDragStart, onDragEnd, onDragCancel } =
+    useSortableItems({
+        items: myItems,
+        handleDragEnd: (activeIndex, overIndex) => {
+            // Handle reorder
+        },
+    });
 ```
 
 ---
@@ -686,16 +770,12 @@ import formTranslations from "@uxf/form/translations/cs.json";
 // Create a translation function for your language
 const t = createDefaultT({
     ...uiTranslations,
-    ...formTranslations
+    ...formTranslations,
 });
 
 // Provide the translation function to your app
 function App() {
-  return (
-    <TranslationsProvider value={t}>
-      {/* Your app content */}
-    </TranslationsProvider>
-  );
+    return <TranslationsProvider value={t}>{/* Your app content */}</TranslationsProvider>;
 }
 ```
 
@@ -708,14 +788,10 @@ import { TranslationsProvider } from "@uxf/core-react/translations";
 import useTranslation from "next-translate/useTranslation"; // Or any other translation library
 
 function App() {
-  // Get the translation function from your translation library
-  const { t } = useTranslation();
-
-  return (
-    <TranslationsProvider value={t}>
-      {/* Your app content */}
-    </TranslationsProvider>
-  );
+    // Get the translation function from your translation library
+    const { t } = useTranslation();
+
+    return <TranslationsProvider value={t}>{/* Your app content */}</TranslationsProvider>;
 }
 ```
 
@@ -727,13 +803,8 @@ To use translations in your components, use the `useUxfTranslation` hook:
 import { useUxfTranslation } from "@uxf/core-react/translations";
 
 function MyComponent() {
-  const t = useUxfTranslation();
+    const t = useUxfTranslation();
 
-  return (
-    <div>
-      {t("form:validation.required")}
-    </div>
-  );
+    return <div>{t("form:validation.required")}</div>;
 }
 ```
-

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/core-react",
-    "version": "11.125.0",
+    "version": "11.126.0",
     "description": "UXF Core",
     "author": "UX Fans s.r.o",
     "license": "MIT",
@@ -14,7 +14,7 @@
     "peerDependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
-        "@uxf/core": "11.124.0",
+        "@uxf/core": "11.126.0",
         "react": ">=18.2.0",
         "react-dom": ">=18.2.0"
     },
@@ -23,7 +23,7 @@
         "@dnd-kit/sortable": "^10.0.0",
         "@types/react": "18.3.31",
         "@types/react-dom": "18.3.7",
-        "@uxf/core": "11.124.0",
+        "@uxf/core": "11.126.0",
         "react": "18.3.1",
         "react-dom": "18.3.1"
     }

package/swipeable/types.d.ts

@@ -134,8 +134,8 @@ export interface ConfigurationOptions {
 export type SwipeableProps = Partial<SwipeableCallbacks & ConfigurationOptions>;
 export type SwipeablePropsWithDefaultOptions = Partial<SwipeableCallbacks> & ConfigurationOptions;
 export interface SwipeableHandlers {
-    ref(element: HTMLElement | null): void;
-    onMouseDown?(event: React.MouseEvent): void;
+    ref: (element: HTMLElement | null) => void;
+    onMouseDown?: (event: React.MouseEvent) => void;
 }
 export type SwipeableState = {
     cleanUpTouch?: () => void;