@helpwave/hightide 0.1.18 → 0.1.19

package/dist/hooks/useSearch.mjs

@@ -1,14 +1,14 @@
 // src/hooks/useSearch.ts
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 // src/util/simpleSearch.ts
-var MultiSearchWithMapping = (search, objects, mapping) => {
+var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
   return objects.filter((object) => {
     const mappedSearchKeywords = mapping(object)?.map((value) => value.toLowerCase().trim());
     if (!mappedSearchKeywords) {
       return true;
     }
-    return !!mappedSearchKeywords.find((value) => value.includes(search.toLowerCase().trim()));
+    return search.every((searchValue) => !!mappedSearchKeywords.find((value) => !!value && value.includes(searchValue.toLowerCase().trim())));
   });
 };
 
@@ -16,22 +16,51 @@ var MultiSearchWithMapping = (search, objects, mapping) => {
 var useSearch = ({
   list,
   initialSearch,
-  searchMapping
+  searchMapping,
+  additionalSearchTags,
+  isSearchInstant = true,
+  sortingFunction,
+  filter,
+  disabled = false
 }) => {
-  const [items, setItems] = useState(list);
-  const [search, setSearch] = useState(initialSearch);
+  const [search, setSearch] = useState(initialSearch ?? "");
+  const [result, setResult] = useState(list);
+  const searchTags = useMemo(() => additionalSearchTags ?? [], [additionalSearchTags]);
+  const updateSearch = useCallback((newSearch) => {
+    const usedSearch = newSearch ?? search;
+    if (newSearch) {
+      setSearch(search);
+    }
+    setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
+  }, [searchTags, list, search, searchMapping]);
   useEffect(() => {
-    setItems(list);
-  }, [list]);
-  const result = useMemo(
-    () => MultiSearchWithMapping(search, items, searchMapping),
-    [search, items, searchMapping]
-  );
+    if (isSearchInstant) {
+      setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
+    }
+  }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
+  const filteredResult = useMemo(() => {
+    if (!filter) {
+      return result;
+    }
+    return result.filter(filter);
+  }, [result, filter]);
+  const sortedAndFilteredResult = useMemo(() => {
+    if (!sortingFunction) {
+      return filteredResult;
+    }
+    return filteredResult.sort(sortingFunction);
+  }, [filteredResult, sortingFunction]);
+  const usedResult = useMemo(() => {
+    if (!disabled) {
+      return sortedAndFilteredResult;
+    }
+    return list;
+  }, [disabled, list, sortedAndFilteredResult]);
   return {
-    result,
-    hasResult: result.length > 0,
-    allItems: items,
-    setItems,
+    result: usedResult,
+    hasResult: usedResult.length > 0,
+    allItems: list,
+    updateSearch,
     search,
     setSearch
   };

package/dist/hooks/useSearch.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useSearch.ts","../../src/util/simpleSearch.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\nimport { MultiSearchWithMapping } from '../util/simpleSearch'\n\nexport type UseSearchProps<T> = {\n  list: T[],\n  searchMapping: (item: T) => string[],\n  initialSearch?: string,\n}\n\nexport const useSearch = <T>({\n                               list,\n                               initialSearch,\n                               searchMapping,\n                             }: UseSearchProps<T>) => {\n  const [items, setItems] = useState<T[]>(list)\n  const [search, setSearch] = useState<string>(initialSearch)\n\n  useEffect(() => {\n    setItems(list)\n  }, [list])\n\n  const result: T[] = useMemo(\n    () => MultiSearchWithMapping(search, items, searchMapping),\n    [search, items, searchMapping]\n  )\n\n  return {\n    result,\n    hasResult: result.length > 0,\n    allItems: items,\n    setItems,\n    search,\n    setSearch,\n  }\n}","/**\n *  Finds all values matching the search values by first mapping the values to a string array and then checking each entry for matches.\n *  Returns the list of all matches.\n *\n *  @param search The list of search strings e.g. `[name, type]`\n *\n *  @param objects The list of objects to be searched in\n *\n *  @param mapping The mapping of objects to the string properties they fulfil\n *\n *  @return The list of objects that match all search strings\n */\nexport const MultiSubjectSearchWithMapping = <T>(search: string[], objects: T[], mapping: (value: T) => (string | undefined)[]) => {\n  return objects.filter(object => {\n    const mappedSearchKeywords = mapping(object).map(value => value ? value.toLowerCase().trim() : undefined)\n    return search.every(searchValue => !!mappedSearchKeywords.find(value => !!value && value.includes(searchValue.toLowerCase().trim())))\n  })\n}\n\n/**\n *  Finds all values matching the search value by first mapping the values to a string array and then checking each entry for matches.\n *  Returns the list of all matches.\n *\n *  @param search The search string e.g `name`\n *\n *  @param objects The list of objects to be searched in\n *\n *  @param mapping The mapping of objects to the string properties they fulfil, if undefined it is always fulfilled\n *\n *  @return The list of objects that match the search string\n */\nexport const MultiSearchWithMapping = <T>(search: string, objects: T[], mapping: (value: T) => (string[] | undefined)) => {\n  return objects.filter(object => {\n    const mappedSearchKeywords = mapping(object)?.map(value => value.toLowerCase().trim())\n    if(!mappedSearchKeywords) {\n      return true\n    }\n    return !!mappedSearchKeywords.find(value => value.includes(search.toLowerCase().trim()))\n  })\n}\n\n/**\n *  Finds all values matching the search value by first mapping the values to a string and returns the list of all matches.\n *\n *  @param search The search string e.g `name`\n *\n *  @param objects The list of objects to be searched in\n *\n *  @param mapping The mapping of objects to a string that is compared to the search\n *\n *  @return The list of objects that match the search string\n */\nexport const SimpleSearchWithMapping = <T>(search: string, objects: T[], mapping: (value: T) => string) => {\n  return MultiSearchWithMapping(search, objects, value => [mapping(value)])\n}\n\n/**\n *  Finds all values matching the search value and returns the list of all matches.\n *\n *  @param search The search string e.g `name`\n *\n *  @param objects The list of objects to be searched in\n *\n *  @return The list of objects that match the search string\n */\nexport const SimpleSearch = (search: string, objects: string[]) => {\n  return SimpleSearchWithMapping(search, objects, value => value)\n}\n"],"mappings":";AAAA,SAAS,WAAW,SAAS,gBAAgB;;;AC+BtC,IAAM,yBAAyB,CAAI,QAAgB,SAAc,YAAkD;AACxH,SAAO,QAAQ,OAAO,YAAU;AAC9B,UAAM,uBAAuB,QAAQ,MAAM,GAAG,IAAI,WAAS,MAAM,YAAY,EAAE,KAAK,CAAC;AACrF,QAAG,CAAC,sBAAsB;AACxB,aAAO;AAAA,IACT;AACA,WAAO,CAAC,CAAC,qBAAqB,KAAK,WAAS,MAAM,SAAS,OAAO,YAAY,EAAE,KAAK,CAAC,CAAC;AAAA,EACzF,CAAC;AACH;;;AD9BO,IAAM,YAAY,CAAI;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACpD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAc,IAAI;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiB,aAAa;AAE1D,YAAU,MAAM;AACd,aAAS,IAAI;AAAA,EACf,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,SAAc;AAAA,IAClB,MAAM,uBAAuB,QAAQ,OAAO,aAAa;AAAA,IACzD,CAAC,QAAQ,OAAO,aAAa;AAAA,EAC/B;AAEA,SAAO;AAAA,IACL;AAAA,IACA,WAAW,OAAO,SAAS;AAAA,IAC3B,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../src/hooks/useSearch.ts","../../src/util/simpleSearch.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { MultiSubjectSearchWithMapping } from '../util/simpleSearch'\n\nexport type UseSearchProps<T> = {\n  list: T[],\n  searchMapping: (item: T) => string[],\n  initialSearch?: string,\n  additionalSearchTags?: string[],\n  isSearchInstant?: boolean,\n  sortingFunction?: (a: T, b: T) => number,\n  filter?: (item: T) => boolean,\n  disabled?: boolean,\n}\n\nexport const useSearch = <T>({\n                               list,\n                               initialSearch,\n                               searchMapping,\n                               additionalSearchTags,\n                               isSearchInstant = true,\n                               sortingFunction,\n                               filter,\n                               disabled = false,\n                             }: UseSearchProps<T>) => {\n  const [search, setSearch] = useState<string>(initialSearch ?? '')\n  const [result, setResult] = useState<T[]>(list)\n  const searchTags = useMemo(() => additionalSearchTags ?? [], [additionalSearchTags])\n\n  const updateSearch = useCallback((newSearch?: string) => {\n    const usedSearch = newSearch ?? search\n    if (newSearch) {\n      setSearch(search)\n    }\n    setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping))\n  }, [searchTags, list, search, searchMapping])\n\n  useEffect(() => {\n    if (isSearchInstant) {\n      setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping))\n    }\n  }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags])\n\n  const filteredResult: T[] = useMemo(() => {\n    if (!filter) {\n      return result\n    }\n    return result.filter(filter)\n  }, [result, filter])\n\n  const sortedAndFilteredResult: T[] = useMemo(() => {\n    if (!sortingFunction) {\n      return filteredResult\n    }\n    return filteredResult.sort(sortingFunction)\n  }, [filteredResult, sortingFunction])\n\n  const usedResult = useMemo(() => {\n    if (!disabled) {\n      return sortedAndFilteredResult\n    }\n    return list\n  }, [disabled, list, sortedAndFilteredResult])\n\n  return {\n    result: usedResult,\n    hasResult: usedResult.length > 0,\n    allItems: list,\n    updateSearch,\n    search,\n    setSearch,\n  }\n}","/**\n *  Finds all values matching the search values by first mapping the values to a string array and then checking each entry for matches.\n *  Returns the list of all matches.\n *\n *  @param search The list of search strings e.g. `[name, type]`\n *\n *  @param objects The list of objects to be searched in\n *\n *  @param mapping The mapping of objects to the string properties they fulfil\n *\n *  @return The list of objects that match all search strings\n */\nexport const MultiSubjectSearchWithMapping = <T>(search: string[], objects: T[], mapping: (value: T) => (string[] | undefined)) => {\n  return objects.filter(object => {\n    const mappedSearchKeywords = mapping(object)?.map(value => value.toLowerCase().trim())\n    if(!mappedSearchKeywords) {\n      return true\n    }\n    return search.every(searchValue => !!mappedSearchKeywords.find(value => !!value && value.includes(searchValue.toLowerCase().trim())))\n  })\n}\n\n/**\n *  Finds all values matching the search value by first mapping the values to a string array and then checking each entry for matches.\n *  Returns the list of all matches.\n *\n *  @param search The search string e.g `name`\n *\n *  @param objects The list of objects to be searched in\n *\n *  @param mapping The mapping of objects to the string properties they fulfil, if undefined it is always fulfilled\n *\n *  @return The list of objects that match the search string\n */\nexport const MultiSearchWithMapping = <T>(search: string, objects: T[], mapping: (value: T) => (string[] | undefined)) => {\n  return objects.filter(object => {\n    const mappedSearchKeywords = mapping(object)?.map(value => value.toLowerCase().trim())\n    if(!mappedSearchKeywords) {\n      return true\n    }\n    return !!mappedSearchKeywords.find(value => value.includes(search.toLowerCase().trim()))\n  })\n}\n\n/**\n *  Finds all values matching the search value by first mapping the values to a string and returns the list of all matches.\n *\n *  @param search The search string e.g `name`\n *\n *  @param objects The list of objects to be searched in\n *\n *  @param mapping The mapping of objects to a string that is compared to the search\n *\n *  @return The list of objects that match the search string\n */\nexport const SimpleSearchWithMapping = <T>(search: string, objects: T[], mapping: (value: T) => string) => {\n  return MultiSearchWithMapping(search, objects, value => [mapping(value)])\n}\n\n/**\n *  Finds all values matching the search value and returns the list of all matches.\n *\n *  @param search The search string e.g `name`\n *\n *  @param objects The list of objects to be searched in\n *\n *  @return The list of objects that match the search string\n */\nexport const SimpleSearch = (search: string, objects: string[]) => {\n  return SimpleSearchWithMapping(search, objects, value => value)\n}\n"],"mappings":";AAAA,SAAS,aAAa,WAAW,SAAS,gBAAgB;;;ACYnD,IAAM,gCAAgC,CAAI,QAAkB,SAAc,YAAkD;AACjI,SAAO,QAAQ,OAAO,YAAU;AAC9B,UAAM,uBAAuB,QAAQ,MAAM,GAAG,IAAI,WAAS,MAAM,YAAY,EAAE,KAAK,CAAC;AACrF,QAAG,CAAC,sBAAsB;AACxB,aAAO;AAAA,IACT;AACA,WAAO,OAAO,MAAM,iBAAe,CAAC,CAAC,qBAAqB,KAAK,WAAS,CAAC,CAAC,SAAS,MAAM,SAAS,YAAY,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC;AAAA,EACtI,CAAC;AACH;;;ADNO,IAAM,YAAY,CAAI;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,WAAW;AACb,MAAyB;AACpD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiB,iBAAiB,EAAE;AAChE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAc,IAAI;AAC9C,QAAM,aAAa,QAAQ,MAAM,wBAAwB,CAAC,GAAG,CAAC,oBAAoB,CAAC;AAEnF,QAAM,eAAe,YAAY,CAAC,cAAuB;AACvD,UAAM,aAAa,aAAa;AAChC,QAAI,WAAW;AACb,gBAAU,MAAM;AAAA,IAClB;AACA,cAAU,8BAA8B,CAAC,YAAY,GAAG,UAAU,GAAG,MAAM,aAAa,CAAC;AAAA,EAC3F,GAAG,CAAC,YAAY,MAAM,QAAQ,aAAa,CAAC;AAE5C,YAAU,MAAM;AACd,QAAI,iBAAiB;AACnB,gBAAU,8BAA8B,CAAC,QAAQ,GAAG,UAAU,GAAG,MAAM,aAAa,CAAC;AAAA,IACvF;AAAA,EACF,GAAG,CAAC,YAAY,iBAAiB,MAAM,QAAQ,eAAe,oBAAoB,CAAC;AAEnF,QAAM,iBAAsB,QAAQ,MAAM;AACxC,QAAI,CAAC,QAAQ;AACX,aAAO;AAAA,IACT;AACA,WAAO,OAAO,OAAO,MAAM;AAAA,EAC7B,GAAG,CAAC,QAAQ,MAAM,CAAC;AAEnB,QAAM,0BAA+B,QAAQ,MAAM;AACjD,QAAI,CAAC,iBAAiB;AACpB,aAAO;AAAA,IACT;AACA,WAAO,eAAe,KAAK,eAAe;AAAA,EAC5C,GAAG,CAAC,gBAAgB,eAAe,CAAC;AAEpC,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,CAAC,UAAU;AACb,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,MAAM,uBAAuB,CAAC;AAE5C,SAAO;AAAA,IACL,QAAQ;AAAA,IACR,WAAW,WAAW,SAAS;AAAA,IAC/B,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/index.d.mts

@@ -16,7 +16,7 @@ export { BreadCrumb, Crumb } from './components/layout-and-navigation/BreadCrumb
 export { Carousel, CarouselProps } from './components/layout-and-navigation/Carousel.mjs';
 export { Chip, ChipColor, ChipList, ChipListProps, ChipProps } from './components/layout-and-navigation/Chip.mjs';
 export { DividerInserter, DividerInserterProps } from './components/layout-and-navigation/DividerInserter.mjs';
-export { Expandable, ExpandableProps, ExpandableUncontrolled } from './components/layout-and-navigation/Expandable.mjs';
+export { Expandable, ExpandableProps, ExpandableUncontrolled, ExpansionIcon, ExpansionIconProps } from './components/layout-and-navigation/Expandable.mjs';
 export { FAQItem, FAQSection, FAQSectionProps } from './components/layout-and-navigation/FAQSection.mjs';
 export { ASTNodeInterpreter, ASTNodeInterpreterProps, MarkdownInterpreter, MarkdownInterpreterProps } from './components/layout-and-navigation/MarkdownInterpreter.mjs';
 export { Dialog, DialogProps, Modal, ModalProps, Overlay, OverlayHeader, OverlayHeaderProps, OverlayProps } from './components/layout-and-navigation/Overlay.mjs';
@@ -55,10 +55,11 @@ export { CopyToClipboardWrapper, CopyToClipboardWrapperProps } from './component
 export { DateTimePicker, DateTimePickerMode, DateTimePickerProps } from './components/user-action/DateAndTimePicker.mjs';
 export { EditCompleteOptions, EditCompleteOptionsResolved, FormInput, FormInputProps, Input, InputProps, InputUncontrolled } from './components/user-action/Input.mjs';
 export { Label, LabelProps, LabelType } from './components/user-action/Label.mjs';
-export { Menu, MenuItem, MenuItemProps, MenuProps } from './components/user-action/Menu.mjs';
-export { MultiSelect, MultiSelectOption, MultiSelectProps, MultiSelectUncontrolled } from './components/user-action/MultiSelect.mjs';
+export { Menu, MenuBag, MenuItem, MenuItemProps, MenuProps } from './components/user-action/Menu.mjs';
+export { MultiSelect, MultiSelectBag, MultiSelectOption, MultiSelectProps, MultiSelectUncontrolled } from './components/user-action/MultiSelect.mjs';
 export { ScrollPicker, ScrollPickerProps } from './components/user-action/ScrollPicker.mjs';
-export { Select, SelectOption, SelectProps, SelectUncontrolled } from './components/user-action/Select.mjs';
+export { SearchBar, SearchBarProps } from './components/user-action/SearchBar.mjs';
+export { Select, SelectBag, SelectOption, SelectProps, SelectTile, SelectTileProps, SelectUncontrolled } from './components/user-action/Select.mjs';
 export { Textarea, TextareaProps, TextareaUncontrolled } from './components/user-action/Textarea.mjs';
 export { ToggleableInput, ToggleableInputUncontrolled } from './components/user-action/ToggleableInput.mjs';
 export { Tooltip, TooltipProps } from './components/user-action/Tooltip.mjs';
@@ -68,6 +69,7 @@ export { useFocusOnceVisible } from './hooks/useFocusOnceVisible.mjs';
 export { useHoverState } from './hooks/useHoverState.mjs';
 export { useLocalStorage } from './hooks/useLocalStorage.mjs';
 export { useOutsideClick } from './hooks/useOutsideClick.mjs';
+export { PopoverHorizontalAlignment, PopoverVerticalAlignment, usePopoverPosition } from './hooks/usePopoverPosition.mjs';
 export { useRerender } from './hooks/useRerender.mjs';
 export { useResizeCallbackWrapper } from './hooks/useResizeCallbackWrapper.mjs';
 export { UseSearchProps, useSearch } from './hooks/useSearch.mjs';

package/dist/index.d.ts

@@ -16,7 +16,7 @@ export { BreadCrumb, Crumb } from './components/layout-and-navigation/BreadCrumb
 export { Carousel, CarouselProps } from './components/layout-and-navigation/Carousel.js';
 export { Chip, ChipColor, ChipList, ChipListProps, ChipProps } from './components/layout-and-navigation/Chip.js';
 export { DividerInserter, DividerInserterProps } from './components/layout-and-navigation/DividerInserter.js';
-export { Expandable, ExpandableProps, ExpandableUncontrolled } from './components/layout-and-navigation/Expandable.js';
+export { Expandable, ExpandableProps, ExpandableUncontrolled, ExpansionIcon, ExpansionIconProps } from './components/layout-and-navigation/Expandable.js';
 export { FAQItem, FAQSection, FAQSectionProps } from './components/layout-and-navigation/FAQSection.js';
 export { ASTNodeInterpreter, ASTNodeInterpreterProps, MarkdownInterpreter, MarkdownInterpreterProps } from './components/layout-and-navigation/MarkdownInterpreter.js';
 export { Dialog, DialogProps, Modal, ModalProps, Overlay, OverlayHeader, OverlayHeaderProps, OverlayProps } from './components/layout-and-navigation/Overlay.js';
@@ -55,10 +55,11 @@ export { CopyToClipboardWrapper, CopyToClipboardWrapperProps } from './component
 export { DateTimePicker, DateTimePickerMode, DateTimePickerProps } from './components/user-action/DateAndTimePicker.js';
 export { EditCompleteOptions, EditCompleteOptionsResolved, FormInput, FormInputProps, Input, InputProps, InputUncontrolled } from './components/user-action/Input.js';
 export { Label, LabelProps, LabelType } from './components/user-action/Label.js';
-export { Menu, MenuItem, MenuItemProps, MenuProps } from './components/user-action/Menu.js';
-export { MultiSelect, MultiSelectOption, MultiSelectProps, MultiSelectUncontrolled } from './components/user-action/MultiSelect.js';
+export { Menu, MenuBag, MenuItem, MenuItemProps, MenuProps } from './components/user-action/Menu.js';
+export { MultiSelect, MultiSelectBag, MultiSelectOption, MultiSelectProps, MultiSelectUncontrolled } from './components/user-action/MultiSelect.js';
 export { ScrollPicker, ScrollPickerProps } from './components/user-action/ScrollPicker.js';
-export { Select, SelectOption, SelectProps, SelectUncontrolled } from './components/user-action/Select.js';
+export { SearchBar, SearchBarProps } from './components/user-action/SearchBar.js';
+export { Select, SelectBag, SelectOption, SelectProps, SelectTile, SelectTileProps, SelectUncontrolled } from './components/user-action/Select.js';
 export { Textarea, TextareaProps, TextareaUncontrolled } from './components/user-action/Textarea.js';
 export { ToggleableInput, ToggleableInputUncontrolled } from './components/user-action/ToggleableInput.js';
 export { Tooltip, TooltipProps } from './components/user-action/Tooltip.js';
@@ -68,6 +69,7 @@ export { useFocusOnceVisible } from './hooks/useFocusOnceVisible.js';
 export { useHoverState } from './hooks/useHoverState.js';
 export { useLocalStorage } from './hooks/useLocalStorage.js';
 export { useOutsideClick } from './hooks/useOutsideClick.js';
+export { PopoverHorizontalAlignment, PopoverVerticalAlignment, usePopoverPosition } from './hooks/usePopoverPosition.js';
 export { useRerender } from './hooks/useRerender.js';
 export { useResizeCallbackWrapper } from './hooks/useResizeCallbackWrapper.js';
 export { UseSearchProps, useSearch } from './hooks/useSearch.js';