@synerise/ds-utils 1.6.0 → 1.7.1

package/dist/useScrollContain/useScrollContain.js

@@ -1,19 +1,22 @@
-import { useEffect, useRef } from 'react';
-export var useScrollContain = function useScrollContain() {
-  var elementRef = useRef(null);
-  useEffect(function () {
-    var blockWheel = function blockWheel(event) {
+import { useRef, useEffect } from "react";
+const useScrollContain = () => {
+  const elementRef = useRef(null);
+  useEffect(() => {
+    const blockWheel = (event) => {
       event.stopPropagation();
       event.preventDefault();
     };
-    var element;
+    let element;
     if (elementRef.current) {
       element = elementRef.current;
-      element.addEventListener('wheel', blockWheel);
+      element.addEventListener("wheel", blockWheel);
     }
-    return function () {
-      element && element.removeEventListener('wheel', blockWheel);
+    return () => {
+      element && element.removeEventListener("wheel", blockWheel);
     };
   }, []);
   return elementRef;
-};
+};
+export {
+  useScrollContain
+};

package/dist/useSearchResults/index.js

@@ -1,2 +1,8 @@
-export * from './search.utils';
-export * from './useSearchResults';
+import { getActiveTabGroup, getGroupName, isItemInGroup } from "./search.utils.js";
+import { useSearchResults } from "./useSearchResults.js";
+export {
+  getActiveTabGroup,
+  getGroupName,
+  isItemInGroup,
+  useSearchResults
+};

package/dist/useSearchResults/search.utils.d.ts

@@ -1,4 +1,4 @@
-import { type BaseGroupType } from './types';
+import { BaseGroupType } from './types';
 export declare const isItemInGroup: <GroupType extends BaseGroupType<GroupType>>(groupId?: string | number, currentGroup?: GroupType) => boolean;
 export declare const getActiveTabGroup: <GroupType extends BaseGroupType<GroupType>>(tabIndex: number, groups?: GroupType[]) => GroupType | undefined;
 export declare const getGroupName: <GroupType extends BaseGroupType<GroupType>>(groupId: string | number | undefined, groups: BaseGroupType<GroupType>[]) => string | undefined;

package/dist/useSearchResults/search.utils.js

@@ -1,19 +1,17 @@
-export var isItemInGroup = function isItemInGroup(groupId, currentGroup) {
+const isItemInGroup = (groupId, currentGroup) => {
   if (!currentGroup || !groupId) {
     return true;
   }
-  return currentGroup.subGroups ? (currentGroup == null ? void 0 : currentGroup.subGroups.findIndex(function (group) {
-    return group.id === groupId;
-  })) > -1 : groupId === currentGroup.id;
+  return currentGroup.subGroups ? currentGroup?.subGroups.findIndex((group) => group.id === groupId) > -1 : groupId === currentGroup.id;
 };
-export var getActiveTabGroup = function getActiveTabGroup(tabIndex, groups) {
+const getActiveTabGroup = (tabIndex, groups) => {
   return groups && groups[tabIndex];
 };
-export var getGroupName = function getGroupName(groupId, groups) {
-  var _groups$flatMap$find;
-  return groupId ? (_groups$flatMap$find = groups.flatMap(function (group) {
-    return group.subGroups ? group.subGroups : group;
-  }).find(function (group) {
-    return group.id === groupId;
-  })) == null ? void 0 : _groups$flatMap$find.name : undefined;
-};
+const getGroupName = (groupId, groups) => {
+  return groupId ? groups.flatMap((group) => group.subGroups ? group.subGroups : group).find((group) => group.id === groupId)?.name : void 0;
+};
+export {
+  getActiveTabGroup,
+  getGroupName,
+  isItemInGroup
+};

package/dist/useSearchResults/types.js

@@ -1 +1 @@
-export {};
+

package/dist/useSearchResults/useSearchResults.d.ts

@@ -1,4 +1,4 @@
-import { type BaseGroupType, type BaseItemType } from './types';
+import { BaseGroupType, BaseItemType } from './types';
 export declare const useSearchResults: <ItemType extends BaseItemType, GroupType extends BaseGroupType<GroupType>, GroupedListItemType>(items: ItemType[], groups: GroupType[], activeTab: number, groupByGroupName: (items: ItemType[], max?: number) => GroupedListItemType[], activeGroup?: GroupType, searchQuery?: string, maxSearchResultsInGroup?: number) => {
     searchResults: GroupedListItemType[];
     getActiveTabGroup: <GroupType_1 extends BaseGroupType<GroupType_1>>(tabIndex: number, groups?: GroupType_1[]) => GroupType_1 | undefined;

package/dist/useSearchResults/useSearchResults.js

@@ -1,54 +1,45 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { useMemo } from 'react';
-import { getActiveTabGroup, getGroupName, isItemInGroup } from './search.utils';
-export var useSearchResults = function useSearchResults(items, groups, activeTab, groupByGroupName, activeGroup, searchQuery, maxSearchResultsInGroup) {
-  var showGroupedResults = useMemo(function () {
-    var _getActiveTabGroup;
-    return activeTab && !activeGroup ? Boolean((_getActiveTabGroup = getActiveTabGroup(activeTab, groups)) == null ? void 0 : _getActiveTabGroup.subGroups) : Boolean(activeTab === 0 && !activeGroup);
-  }, [activeTab, activeGroup, groups]);
-  var groupOrder = useMemo(function () {
-    return groups.flatMap(function (group) {
-      return group.subGroups ? group.subGroups.map(function (subgroup) {
-        return subgroup.id;
-      }) : group.id;
-    });
-  }, [groups]);
-  var searchResults = useMemo(function () {
+import { useMemo } from "react";
+import { getActiveTabGroup, isItemInGroup, getGroupName } from "./search.utils.js";
+const useSearchResults = (items, groups, activeTab, groupByGroupName, activeGroup, searchQuery, maxSearchResultsInGroup) => {
+  const showGroupedResults = useMemo(() => activeTab && !activeGroup ? Boolean(getActiveTabGroup(activeTab, groups)?.subGroups) : Boolean(activeTab === 0 && !activeGroup), [activeTab, activeGroup, groups]);
+  const groupOrder = useMemo(() => groups.flatMap((group) => group.subGroups ? group.subGroups.map((subgroup) => subgroup.id) : group.id), [groups]);
+  const searchResults = useMemo(() => {
     if (!searchQuery) {
       return [];
     }
-    var result = [];
-    var itemsNumber = items.length;
-    for (var i = 0; i < itemsNumber; i += 1) {
-      var item = items[i];
-      var itemInTab = !activeTab || isItemInGroup(item.groupId, getActiveTabGroup(activeTab, groups));
-      var itemInGroup = !activeGroup || item.groupId === activeGroup.id;
+    const result = [];
+    const itemsNumber = items.length;
+    for (let i = 0; i < itemsNumber; i += 1) {
+      const item = items[i];
+      const itemInTab = !activeTab || isItemInGroup(item.groupId, getActiveTabGroup(activeTab, groups));
+      const itemInGroup = !activeGroup || item.groupId === activeGroup.id;
       if (itemInGroup && itemInTab) {
-        var _item$name, _item$subtitle;
-        var searchQueryInLowerCase = searchQuery.toLowerCase();
-        var isMatchingName = (_item$name = item.name) == null ? void 0 : _item$name.toLowerCase().includes(searchQueryInLowerCase);
-        var isMatchingSubtitle = (_item$subtitle = item.subtitle) == null ? void 0 : _item$subtitle.toLowerCase().includes(searchQueryInLowerCase);
-        var matching = !searchQuery || isMatchingName || isMatchingSubtitle;
+        const searchQueryInLowerCase = searchQuery.toLowerCase();
+        const isMatchingName = item.name?.toLowerCase().includes(searchQueryInLowerCase);
+        const isMatchingSubtitle = item.subtitle?.toLowerCase().includes(searchQueryInLowerCase);
+        const matching = !searchQuery || isMatchingName || isMatchingSubtitle;
         if (matching) {
-          result.push(_extends({
-            groupName: showGroupedResults && item.groupId ? getGroupName(item.groupId, groups) : undefined
-          }, item));
+          result.push({
+            groupName: showGroupedResults && item.groupId ? getGroupName(item.groupId, groups) : void 0,
+            ...item
+          });
         }
       }
     }
     if (groupOrder && groupOrder.length) {
-      result.sort(function (a, b) {
-        return a.groupId !== undefined && b.groupId !== undefined ? groupOrder.indexOf(a.groupId) - groupOrder.indexOf(b.groupId) : 0;
-      });
+      result.sort((a, b) => a.groupId !== void 0 && b.groupId !== void 0 ? groupOrder.indexOf(a.groupId) - groupOrder.indexOf(b.groupId) : 0);
     }
     return result;
   }, [activeGroup, activeTab, groupOrder, groups, items, searchQuery, showGroupedResults]);
-  var groupedSearchResults = useMemo(function () {
-    return groupByGroupName(searchResults, showGroupedResults ? maxSearchResultsInGroup : undefined);
+  const groupedSearchResults = useMemo(() => {
+    return groupByGroupName(searchResults, showGroupedResults ? maxSearchResultsInGroup : void 0);
   }, [groupByGroupName, searchResults, showGroupedResults, maxSearchResultsInGroup]);
   return {
     searchResults: groupedSearchResults,
-    getActiveTabGroup: getActiveTabGroup,
-    getGroupName: getGroupName
+    getActiveTabGroup,
+    getGroupName
   };
-};
+};
+export {
+  useSearchResults
+};

package/dist/useStableId/useStableId.js

@@ -1,14 +1,12 @@
-import { useRef } from 'react';
-import { v4 as uuid } from 'uuid';
-
-/**
- * Returns a stable UUID that persists for the lifetime
- * of the component instance.
- */
-export var useStableId = function useStableId() {
-  var idRef = useRef();
+import { useRef } from "react";
+import { v4 } from "uuid";
+const useStableId = () => {
+  const idRef = useRef();
   if (!idRef.current) {
-    idRef.current = uuid();
+    idRef.current = v4();
   }
   return idRef.current;
-};
+};
+export {
+  useStableId
+};

package/dist/useStickyScroll/useStickyScroll.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+interface UseStickyScrollOptions {
+    scrollContainerRef: RefObject<HTMLElement>;
+    offsetTop?: number;
+    offsetBottom?: number;
+}
+export declare const useStickyScroll: ({ scrollContainerRef, offsetTop, offsetBottom, }: UseStickyScrollOptions) => RefObject<HTMLDivElement>;
+export {};

package/dist/useStickyScroll/useStickyScroll.js

@@ -0,0 +1,59 @@
+import { useRef, useEffect } from "react";
+const useStickyScroll = ({
+  scrollContainerRef,
+  offsetTop = 0,
+  offsetBottom = 0
+}) => {
+  const stickyRef = useRef(null);
+  const lastScrollTop = useRef(0);
+  const topValue = useRef(0);
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    const sticky = stickyRef.current;
+    if (!container || !sticky) {
+      return;
+    }
+    const containerStyle = getComputedStyle(container);
+    const paddingTop = parseFloat(containerStyle.paddingTop);
+    const paddingBottom = parseFloat(containerStyle.paddingBottom);
+    const stickyOriginTop = sticky.offsetTop - paddingTop;
+    sticky.style.position = "sticky";
+    sticky.style.top = `${offsetTop}px`;
+    topValue.current = offsetTop;
+    lastScrollTop.current = container.scrollTop;
+    const onScroll = () => {
+      const scrollTop = container.scrollTop;
+      const delta = scrollTop - lastScrollTop.current;
+      if (delta === 0) {
+        return;
+      }
+      const engaged = scrollTop >= stickyOriginTop - offsetTop;
+      if (!engaged) {
+        topValue.current = offsetTop;
+        sticky.style.top = `${topValue.current}px`;
+        lastScrollTop.current = scrollTop;
+        return;
+      }
+      const visibleHeight = container.clientHeight - paddingTop - paddingBottom;
+      const stickyHeight = sticky.offsetHeight;
+      if (stickyHeight <= visibleHeight - offsetTop - offsetBottom) {
+        topValue.current = offsetTop;
+      } else if (delta > 0) {
+        const minTop = visibleHeight - stickyHeight - offsetBottom;
+        topValue.current = Math.max(topValue.current - delta, minTop);
+      } else {
+        topValue.current = Math.min(topValue.current - delta, offsetTop);
+      }
+      sticky.style.top = `${topValue.current}px`;
+      lastScrollTop.current = scrollTop;
+    };
+    container.addEventListener("scroll", onScroll, {
+      passive: true
+    });
+    return () => container.removeEventListener("scroll", onScroll);
+  }, [scrollContainerRef, offsetTop, offsetBottom]);
+  return stickyRef;
+};
+export {
+  useStickyScroll
+};

package/dist/useTraceUpdate/index.js

@@ -1,19 +1,19 @@
-import { useEffect, useRef } from 'react';
-export var useTraceUpdate = function useTraceUpdate(props) {
-  var prev = useRef(props);
-  useEffect(function () {
-    var changedProps = Object.entries(props).reduce(function (ps, _ref) {
-      var k = _ref[0],
-        v = _ref[1];
+import { useRef, useEffect } from "react";
+const useTraceUpdate = (props) => {
+  const prev = useRef(props);
+  useEffect(() => {
+    const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
       if (prev.current[k] !== v) {
         ps[k] = [prev.current[k], v];
       }
       return ps;
     }, {});
     if (Object.keys(changedProps).length > 0) {
-      // eslint-disable-next-line no-console
-      console.log('Changed props:', changedProps);
+      console.log("Changed props:", changedProps);
     }
     prev.current = props;
   });
-};
+};
+export {
+  useTraceUpdate
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-utils",
-  "version": "1.6.0",
+  "version": "1.7.1",
   "description": "Utils UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "rm -rf dist/ && pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -42,5 +42,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "ac8decd9736940735bf05198b24b3eeeb5900b18"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }

package/dist/doubleClickListener/__specs__/doubleClickListener.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/focusWithArrowKeys/__specs__/focusWithArrowKeys.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/getInitials/__specs__/getInitials.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/getPopupContainer/getPopupContainer.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/regex/__specs__/regex.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/selectColorByLetter/selectColorByLetter.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/toCamelCase/__specs__/toCamelCase.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/useDelimiterEscape/__specs__/useDelimiterEscape.spec.d.ts

@@ -1 +0,0 @@
-export {};