@helpwave/hightide 0.1.18 → 0.1.19

package/dist/css/uncompiled/globals.css

@@ -27,43 +27,43 @@
 /* Styles that can be overwritten by utils */
 @layer components {
   .btn-sm {
-    @apply row items-center justify-center gap-x-1 px-1.5 py-1 rounded-1.5 h-8 min-h-8;
+    @apply flex-row-1 items-center justify-center px-1.5 py-1 rounded-1.5 h-8 min-h-8;
   }
 
   .btn-md {
-    @apply row items-center justify-center gap-x-2 px-3 py-2 rounded-1.5 h-10 min-h-10;
+    @apply flex-row-2 items-center justify-center px-3 py-2 rounded-1.5 h-10 min-h-10;
   }
 
   .btn-lg {
-    @apply row items-center justify-center gap-x-2 px-4 py-2.5 rounded-1.5 h-12 min-h-12;
+    @apply flex-row-2 items-center justify-center px-4 py-2.5 rounded-1.5 h-12 min-h-12;
   }
 
   .icon-btn-xs {
-    @apply row items-center justify-center gap-x-1 p-1 rounded-1 h-6 min-h-6 w-6 min-w-6;
+    @apply flex-row-0 items-center justify-center p-1 rounded-1 h-6 min-h-6 w-6 min-w-6;
   }
 
   .icon-btn-sm {
-    @apply row items-center justify-center gap-x-1 p-1.5 rounded-1.5 h-8 min-h-8 w-8 min-w-8;
+    @apply flex-row-0 items-center justify-center p-1.5 rounded-1.5 h-8 min-h-8 w-8 min-w-8;
   }
 
   .icon-btn-md {
-    @apply row items-center justify-center gap-x-2 p-2 rounded-1.5 h-10 min-h-10 w-10 min-w-10;
+    @apply flex-row-0 items-center justify-center p-2 rounded-1.5 h-10 min-h-10 w-10 min-w-10;
   }
 
   .icon-btn-lg {
-    @apply row items-center justify-center gap-x-2 p-3 rounded-1.5 h-12 min-h-12 w-12 min-w-12;
+    @apply flex-row-0 items-center justify-center p-3 rounded-1.5 h-12 min-h-12 w-12 min-w-12;
   }
 
   .card-sm {
-    @apply col gap-y-2 bg-surface text-on-surface px-2 py-1 rounded;
+    @apply flex-col-2 bg-surface text-on-surface px-2 py-1 rounded;
   }
 
   .card-md {
-    @apply col gap-y-2 bg-surface text-on-surface px-4 py-2 rounded-md;
+    @apply flex-col-2 bg-surface text-on-surface px-4 py-2 rounded-md;
   }
 
   .card-lg {
-    @apply col gap-y-2 bg-surface text-on-surface px-8 py-4 rounded-lg;
+    @apply flex-col-2 bg-surface text-on-surface px-8 py-4 rounded-lg;
   }
 
   .chip {
@@ -113,7 +113,13 @@
   }
 
   *:focus-visible {
-    @apply ring-2 ring-focus;
+    @apply ring-1 ring-focus;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      @apply !transition-none !animate-none;
+    }
   }
 
   table {
@@ -121,7 +127,7 @@
   }
 
   th {
-    @apply px-3 first:pl-6 last:pr-6 py-2.5 border-y-1 first:border-l-1 last:border-r-1 first:rounded-tl-lg last:rounded-tr-lg bg-tabel-header-background text-text-label font-bold;
+    @apply px-3 first:pl-6 last:pr-6 py-2.5 border-y-1 first:border-l-1 last:border-r-2 first:rounded-tl-lg last:rounded-tr-lg bg-tabel-header-background text-text-label font-bold;
   }
 
   tbody > tr {
@@ -129,7 +135,7 @@
   }
 
   td {
-    @apply px-3 first:pl-6 last:pr-6 py-2.5 border-b-1 first:border-l-1 last:border-r-1 [nth-last-child(1)]:first:rounded-bl-lg [nth-last-child(1)]:last:rounded-br-lg;
+    @apply px-3 first:pl-6 last:pr-6 py-2.5 border-b-1 first:border-l-1 last:border-r-2 [nth-last-child(1)]:first:rounded-bl-lg [nth-last-child(1)]:last:rounded-br-lg;
   }
 
   tbody > tr:last-child > td {

package/dist/css/uncompiled/theme/colors-component.css

@@ -54,14 +54,15 @@
   /* Overlay */
   --color-overlay-background: #FFFFFF;
   --color-overlay-text: var(--color-text-dark);
+  --color-overlay-shadow: #00000039;
 
   /* ProgressIndicator */
   --color-progress-indicator-fill: var(--color-primary);
   --color-progress-indicator-background: var(--color-gray-300);
 
   /* Property */
-  --color-property-title-background: #E6E6E6;
-  --color-property-title-text: var(--color-text-default);
+  --color-property-title-background: #EDEDED;
+  --color-property-title-text: var(--color-text-secondary);
 
   /* Stepper Bar */
   --color-stepperbar-dot-active: var(--color-primary);
@@ -102,7 +103,7 @@
   --color-text-image-dark-text: var(--color-white);
 
   /* Tooltip */
-  --color-tooltip-background: var(--color-overlay-background);
+  --color-tooltip-background: #D9D9D9;
   --color-tooltip-text: var(--color-description);
 }
 
@@ -135,9 +136,17 @@
     /* Overlay */
     --color-overlay-background: #2A2A2A;
     --color-overlay-text: var(--color-text-light);
+    --color-overlay-shadow: #00000055;
 
     /* Table */
     --color-tabel-header-background: #2F2F2F;
     --color-table-row-hover-background: #2f2841;
+
+    /* Tag */
+    --color-tag-dark-background: #1A1A1A;
+
+    /* Tooltip */
+    --color-tooltip-background: #555555;
+    --color-tooltip-text: var(--color-description);
   }
 }

package/dist/css/uncompiled/theme/colors-semantic.css

@@ -56,11 +56,13 @@
   --color-description: #555555;
   --color-outline: #E6E6E6;
   --color-outline-variant: #CCCCCC;
-  --color-disabled-background: #BBBBBB;
-  --color-disabled-text: #555555;
-  --color-disabled-icon: #555555;
-  --color-disabled-border: #999999;
-  --color-disabled-outline: #999999;
+
+  --color-disabled-background: #E2E2E2;
+  --color-disabled-text: #888888;
+  --color-disabled-icon: var(--color-disabled-text);
+  --color-disabled-border: #CFCFCF;
+  --color-disabled-outline: var(--color-disabled-border);
+
   --color-border: #CCCCCC;
 
   --color-focus: var(--color-purple-400);
@@ -93,7 +95,8 @@
     --color-text-highlight: #3272DF;
     --color-description: #999999;
 
-    --color-disabled-background: #555555;
-    --color-disabled-text: #999999;
+    --color-disabled-background: #292929;
+    --color-disabled-text: #666666;
+    --color-disabled-border: #363636;
   }
 }

package/dist/css/uncompiled/utitlity/animation.css

@@ -21,6 +21,14 @@
     }
   }
 
+  @-webkit-keyframes bigLeftUp {
+    0%, 25% {
+      stroke-dashoffset: 1000;
+    }
+    50%, 75%, 100% {
+      stroke-dashoffset: 0;
+    }
+  }
   @keyframes bigLeftUp {
     0%, 25% {
       stroke-dashoffset: 1000;
@@ -30,6 +38,14 @@
     }
   }
 
+  @-webkit-keyframes bigRightDown {
+    0%, 25%, 50% {
+      stroke-dashoffset: 0;
+    }
+    75%, 100% {
+      stroke-dashoffset: -1000;
+    }
+  }
   @keyframes bigRightDown {
     0%, 25%, 50% {
       stroke-dashoffset: 0;
@@ -39,6 +55,14 @@
     }
   }
 
+  @-webkit-keyframes smallLeftUp {
+    0%, 25%, 50% {
+      stroke-dashoffset: 1000;
+    }
+    75%, 100% {
+      stroke-dashoffset: 0;
+    }
+  }
   @keyframes smallLeftUp {
     0%, 25%, 50% {
       stroke-dashoffset: 1000;
@@ -48,6 +72,14 @@
     }
   }
 
+  @-webkit-keyframes smallRightDown {
+    0%, 25% {
+      stroke-dashoffset: 0;
+    }
+    50%, 75%, 100% {
+      stroke-dashoffset: -1000;
+    }
+  }
   @keyframes smallRightDown {
     0%, 25% {
       stroke-dashoffset: 0;
@@ -57,31 +89,68 @@
     }
   }
 
+  @keyframes pop-in {
+    0% {
+      opacity: 0;
+      scale: 80%;
+    }
+    100% {
+      opacity: 1;
+      scale: 100%;
+    }
+  }
+
+  @keyframes pop-out {
+    0% {
+      opacity: 1;
+      scale: 100%;
+    }
+    100% {
+      opacity: 0;
+      scale: 80%;
+    }
+  }
+
+  .animate-pop-in {
+    animation: pop-in 0.2s ease-in-out;
+  }
+
+  .animate-pop-out {
+    animation: pop-out 0.2s ease-in-out forwards;
+  }
+
   .animate-fade {
     animation: fade-out 3s ease-in-out;
   }
 
   .animate-wave-big-left-up {
     animation: bigLeftUp 1.7s ease-in infinite normal;
+    -webkit-animation: bigLeftUp 1.7s ease-in infinite normal;
   }
 
   .animate-wave-big-right-down {
     animation: bigRightDown 1.7s ease-in infinite reverse;
+    -webkit-animation: bigRightDown 1.7s ease-in infinite reverse;
   }
 
   .animate-wave-small-left-up {
     animation: smallLeftUp 1.7s ease-in infinite normal;
+    -webkit-animation: smallLeftUp 1.7s ease-in infinite normal;
   }
 
   .animate-wave-small-right-down {
     animation: smallRightDown 1.7s ease-in infinite reverse;
+    -webkit-animation: smallRightDown 1.7s ease-in infinite reverse;
   }
 
   .animate-tooltip-fade-in {
     animation: fade-in 0.2s ease-in-out forwards;
+    -webkit-animation: fade-in 0.2s ease-in-out forwards;
   }
 
   .animate-tooltip-fade-out {
     animation: fade-in 0.2s ease-in-out forwards;
+    -webkit-animation: fade-in 0.2s ease-in-out forwards;
   }
-}
+}
+

package/dist/css/uncompiled/utitlity/general.css

@@ -2,10 +2,26 @@
   @apply flex flex-col gap-y-2;
 }
 
+@utility flex-col-* {
+  display: flex;
+  flex-direction: column;
+  row-gap: calc(var(--spacing) * --value(number));
+}
+
 @utility row {
   @apply flex flex-row gap-x-2;
 }
 
+@utility flex-row-* {
+  display: flex;
+  flex-direction: row;
+  column-gap: calc(var(--spacing) * --value(number));
+}
+
 @utility input-indicator-hidden {
   @apply appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [-moz-appearance:textfield];
+}
+
+@utility fake-hidden {
+  @apply invisible pointer-events-none touch-none opacity-0;
 }

package/dist/hooks/usePopoverPosition.d.mts

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+
+type PopoverHorizontalAlignment = 'leftOutside' | 'leftInside' | 'rightOutside' | 'rightInside' | 'center';
+type PopoverVerticalAlignment = 'topOutside' | 'topInside' | 'bottomOutside' | 'bottomInside' | 'center';
+type PopoverPositionOptionsResolved = {
+    edgePadding: number;
+    outerGap: number;
+    verticalAlignment: PopoverVerticalAlignment;
+    horizontalAlignment: PopoverHorizontalAlignment;
+    disabled: boolean;
+};
+type PopoverPositionOptions = Partial<PopoverPositionOptionsResolved>;
+declare const usePopoverPosition: (trigger?: DOMRect, options?: PopoverPositionOptions) => CSSProperties;
+
+export { type PopoverHorizontalAlignment, type PopoverVerticalAlignment, usePopoverPosition };

package/dist/hooks/usePopoverPosition.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+
+type PopoverHorizontalAlignment = 'leftOutside' | 'leftInside' | 'rightOutside' | 'rightInside' | 'center';
+type PopoverVerticalAlignment = 'topOutside' | 'topInside' | 'bottomOutside' | 'bottomInside' | 'center';
+type PopoverPositionOptionsResolved = {
+    edgePadding: number;
+    outerGap: number;
+    verticalAlignment: PopoverVerticalAlignment;
+    horizontalAlignment: PopoverHorizontalAlignment;
+    disabled: boolean;
+};
+type PopoverPositionOptions = Partial<PopoverPositionOptionsResolved>;
+declare const usePopoverPosition: (trigger?: DOMRect, options?: PopoverPositionOptions) => CSSProperties;
+
+export { type PopoverHorizontalAlignment, type PopoverVerticalAlignment, usePopoverPosition };

package/dist/hooks/usePopoverPosition.js

@@ -0,0 +1,81 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/usePopoverPosition.ts
+var usePopoverPosition_exports = {};
+__export(usePopoverPosition_exports, {
+  usePopoverPosition: () => usePopoverPosition
+});
+module.exports = __toCommonJS(usePopoverPosition_exports);
+var defaultPopoverPositionOptions = {
+  edgePadding: 16,
+  outerGap: 4,
+  horizontalAlignment: "leftInside",
+  verticalAlignment: "bottomOutside",
+  disabled: false
+};
+var usePopoverPosition = (trigger, options) => {
+  const {
+    edgePadding,
+    outerGap,
+    verticalAlignment,
+    horizontalAlignment,
+    disabled
+  } = { ...defaultPopoverPositionOptions, ...options };
+  if (disabled || !trigger) {
+    return {};
+  }
+  const left = {
+    leftOutside: trigger.left - outerGap,
+    leftInside: trigger.left,
+    rightOutside: trigger.right + outerGap,
+    rightInside: trigger.right,
+    center: trigger.left + trigger.width / 2
+  }[horizontalAlignment];
+  const top = {
+    topOutside: trigger.top - outerGap,
+    topInside: trigger.top,
+    bottomOutside: trigger.bottom + outerGap,
+    bottomInside: trigger.bottom,
+    center: trigger.top + trigger.height / 2
+  }[verticalAlignment];
+  const translateX = {
+    leftOutside: "-100%",
+    leftInside: void 0,
+    rightOutside: void 0,
+    rightInside: "-100%",
+    center: "-50%"
+  }[horizontalAlignment];
+  const translateY = {
+    topOutside: "-100%",
+    topInside: void 0,
+    bottomOutside: void 0,
+    bottomInside: "-100%",
+    center: "-50%"
+  }[verticalAlignment];
+  return {
+    left: Math.max(left, edgePadding),
+    top: Math.max(top, edgePadding),
+    translate: [translateX ?? "0", translateY ?? "0"].join(" ")
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  usePopoverPosition
+});
+//# sourceMappingURL=usePopoverPosition.js.map

package/dist/hooks/usePopoverPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/usePopoverPosition.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\n\nexport type PopoverHorizontalAlignment = 'leftOutside' | 'leftInside' | 'rightOutside' | 'rightInside' | 'center'\nexport type PopoverVerticalAlignment = 'topOutside' | 'topInside' | 'bottomOutside' | 'bottomInside' | 'center'\n\ntype PopoverPositionOptionsResolved = {\n  edgePadding: number,\n  outerGap: number,\n  verticalAlignment: PopoverVerticalAlignment,\n  horizontalAlignment: PopoverHorizontalAlignment,\n  disabled: boolean,\n}\n\ntype PopoverPositionOptions = Partial<PopoverPositionOptionsResolved>\n\nconst defaultPopoverPositionOptions: PopoverPositionOptionsResolved = {\n  edgePadding: 16,\n  outerGap: 4,\n  horizontalAlignment: 'leftInside',\n  verticalAlignment: 'bottomOutside',\n  disabled: false,\n}\n\nexport const usePopoverPosition = (trigger?: DOMRect, options?: PopoverPositionOptions): CSSProperties => {\n  const {\n    edgePadding,\n    outerGap,\n    verticalAlignment,\n    horizontalAlignment,\n    disabled\n  }: PopoverPositionOptionsResolved = { ...defaultPopoverPositionOptions, ...options }\n\n  if (disabled || !trigger) {\n    return {}\n  }\n\n  const left: number = {\n    leftOutside: trigger.left - outerGap,\n    leftInside: trigger.left,\n    rightOutside: trigger.right + outerGap,\n    rightInside: trigger.right,\n    center: trigger.left + trigger.width / 2,\n  }[horizontalAlignment]\n\n  const top: number = {\n    topOutside: trigger.top - outerGap,\n    topInside: trigger.top,\n    bottomOutside: trigger.bottom + outerGap,\n    bottomInside: trigger.bottom,\n    center: trigger.top + trigger.height / 2,\n  }[verticalAlignment]\n\n  const translateX: string | undefined = {\n    leftOutside: '-100%',\n    leftInside: undefined,\n    rightOutside: undefined,\n    rightInside: '-100%',\n    center: '-50%',\n  }[horizontalAlignment]\n\n  const translateY: string | undefined = {\n    topOutside: '-100%',\n    topInside: undefined,\n    bottomOutside: undefined,\n    bottomInside: '-100%',\n    center: '-50%',\n  }[verticalAlignment]\n\n  return {\n    left: Math.max(left, edgePadding),\n    top: Math.max(top, edgePadding),\n    translate: [translateX ?? '0', translateY ?? '0'].join(' ')\n  }\n}"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA,IAAM,gCAAgE;AAAA,EACpE,aAAa;AAAA,EACb,UAAU;AAAA,EACV,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEO,IAAM,qBAAqB,CAAC,SAAmB,YAAoD;AACxG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAoC,EAAE,GAAG,+BAA+B,GAAG,QAAQ;AAEnF,MAAI,YAAY,CAAC,SAAS;AACxB,WAAO,CAAC;AAAA,EACV;AAEA,QAAM,OAAe;AAAA,IACnB,aAAa,QAAQ,OAAO;AAAA,IAC5B,YAAY,QAAQ;AAAA,IACpB,cAAc,QAAQ,QAAQ;AAAA,IAC9B,aAAa,QAAQ;AAAA,IACrB,QAAQ,QAAQ,OAAO,QAAQ,QAAQ;AAAA,EACzC,EAAE,mBAAmB;AAErB,QAAM,MAAc;AAAA,IAClB,YAAY,QAAQ,MAAM;AAAA,IAC1B,WAAW,QAAQ;AAAA,IACnB,eAAe,QAAQ,SAAS;AAAA,IAChC,cAAc,QAAQ;AAAA,IACtB,QAAQ,QAAQ,MAAM,QAAQ,SAAS;AAAA,EACzC,EAAE,iBAAiB;AAEnB,QAAM,aAAiC;AAAA,IACrC,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,aAAa;AAAA,IACb,QAAQ;AAAA,EACV,EAAE,mBAAmB;AAErB,QAAM,aAAiC;AAAA,IACrC,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,eAAe;AAAA,IACf,cAAc;AAAA,IACd,QAAQ;AAAA,EACV,EAAE,iBAAiB;AAEnB,SAAO;AAAA,IACL,MAAM,KAAK,IAAI,MAAM,WAAW;AAAA,IAChC,KAAK,KAAK,IAAI,KAAK,WAAW;AAAA,IAC9B,WAAW,CAAC,cAAc,KAAK,cAAc,GAAG,EAAE,KAAK,GAAG;AAAA,EAC5D;AACF;","names":[]}

package/dist/hooks/usePopoverPosition.mjs

@@ -0,0 +1,57 @@
+// src/hooks/usePopoverPosition.ts
+var defaultPopoverPositionOptions = {
+  edgePadding: 16,
+  outerGap: 4,
+  horizontalAlignment: "leftInside",
+  verticalAlignment: "bottomOutside",
+  disabled: false
+};
+var usePopoverPosition = (trigger, options) => {
+  const {
+    edgePadding,
+    outerGap,
+    verticalAlignment,
+    horizontalAlignment,
+    disabled
+  } = { ...defaultPopoverPositionOptions, ...options };
+  if (disabled || !trigger) {
+    return {};
+  }
+  const left = {
+    leftOutside: trigger.left - outerGap,
+    leftInside: trigger.left,
+    rightOutside: trigger.right + outerGap,
+    rightInside: trigger.right,
+    center: trigger.left + trigger.width / 2
+  }[horizontalAlignment];
+  const top = {
+    topOutside: trigger.top - outerGap,
+    topInside: trigger.top,
+    bottomOutside: trigger.bottom + outerGap,
+    bottomInside: trigger.bottom,
+    center: trigger.top + trigger.height / 2
+  }[verticalAlignment];
+  const translateX = {
+    leftOutside: "-100%",
+    leftInside: void 0,
+    rightOutside: void 0,
+    rightInside: "-100%",
+    center: "-50%"
+  }[horizontalAlignment];
+  const translateY = {
+    topOutside: "-100%",
+    topInside: void 0,
+    bottomOutside: void 0,
+    bottomInside: "-100%",
+    center: "-50%"
+  }[verticalAlignment];
+  return {
+    left: Math.max(left, edgePadding),
+    top: Math.max(top, edgePadding),
+    translate: [translateX ?? "0", translateY ?? "0"].join(" ")
+  };
+};
+export {
+  usePopoverPosition
+};
+//# sourceMappingURL=usePopoverPosition.mjs.map

package/dist/hooks/usePopoverPosition.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/usePopoverPosition.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\n\nexport type PopoverHorizontalAlignment = 'leftOutside' | 'leftInside' | 'rightOutside' | 'rightInside' | 'center'\nexport type PopoverVerticalAlignment = 'topOutside' | 'topInside' | 'bottomOutside' | 'bottomInside' | 'center'\n\ntype PopoverPositionOptionsResolved = {\n  edgePadding: number,\n  outerGap: number,\n  verticalAlignment: PopoverVerticalAlignment,\n  horizontalAlignment: PopoverHorizontalAlignment,\n  disabled: boolean,\n}\n\ntype PopoverPositionOptions = Partial<PopoverPositionOptionsResolved>\n\nconst defaultPopoverPositionOptions: PopoverPositionOptionsResolved = {\n  edgePadding: 16,\n  outerGap: 4,\n  horizontalAlignment: 'leftInside',\n  verticalAlignment: 'bottomOutside',\n  disabled: false,\n}\n\nexport const usePopoverPosition = (trigger?: DOMRect, options?: PopoverPositionOptions): CSSProperties => {\n  const {\n    edgePadding,\n    outerGap,\n    verticalAlignment,\n    horizontalAlignment,\n    disabled\n  }: PopoverPositionOptionsResolved = { ...defaultPopoverPositionOptions, ...options }\n\n  if (disabled || !trigger) {\n    return {}\n  }\n\n  const left: number = {\n    leftOutside: trigger.left - outerGap,\n    leftInside: trigger.left,\n    rightOutside: trigger.right + outerGap,\n    rightInside: trigger.right,\n    center: trigger.left + trigger.width / 2,\n  }[horizontalAlignment]\n\n  const top: number = {\n    topOutside: trigger.top - outerGap,\n    topInside: trigger.top,\n    bottomOutside: trigger.bottom + outerGap,\n    bottomInside: trigger.bottom,\n    center: trigger.top + trigger.height / 2,\n  }[verticalAlignment]\n\n  const translateX: string | undefined = {\n    leftOutside: '-100%',\n    leftInside: undefined,\n    rightOutside: undefined,\n    rightInside: '-100%',\n    center: '-50%',\n  }[horizontalAlignment]\n\n  const translateY: string | undefined = {\n    topOutside: '-100%',\n    topInside: undefined,\n    bottomOutside: undefined,\n    bottomInside: '-100%',\n    center: '-50%',\n  }[verticalAlignment]\n\n  return {\n    left: Math.max(left, edgePadding),\n    top: Math.max(top, edgePadding),\n    translate: [translateX ?? '0', translateY ?? '0'].join(' ')\n  }\n}"],"mappings":";AAeA,IAAM,gCAAgE;AAAA,EACpE,aAAa;AAAA,EACb,UAAU;AAAA,EACV,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEO,IAAM,qBAAqB,CAAC,SAAmB,YAAoD;AACxG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAoC,EAAE,GAAG,+BAA+B,GAAG,QAAQ;AAEnF,MAAI,YAAY,CAAC,SAAS;AACxB,WAAO,CAAC;AAAA,EACV;AAEA,QAAM,OAAe;AAAA,IACnB,aAAa,QAAQ,OAAO;AAAA,IAC5B,YAAY,QAAQ;AAAA,IACpB,cAAc,QAAQ,QAAQ;AAAA,IAC9B,aAAa,QAAQ;AAAA,IACrB,QAAQ,QAAQ,OAAO,QAAQ,QAAQ;AAAA,EACzC,EAAE,mBAAmB;AAErB,QAAM,MAAc;AAAA,IAClB,YAAY,QAAQ,MAAM;AAAA,IAC1B,WAAW,QAAQ;AAAA,IACnB,eAAe,QAAQ,SAAS;AAAA,IAChC,cAAc,QAAQ;AAAA,IACtB,QAAQ,QAAQ,MAAM,QAAQ,SAAS;AAAA,EACzC,EAAE,iBAAiB;AAEnB,QAAM,aAAiC;AAAA,IACrC,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,aAAa;AAAA,IACb,QAAQ;AAAA,EACV,EAAE,mBAAmB;AAErB,QAAM,aAAiC;AAAA,IACrC,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,eAAe;AAAA,IACf,cAAc;AAAA,IACd,QAAQ;AAAA,EACV,EAAE,iBAAiB;AAEnB,SAAO;AAAA,IACL,MAAM,KAAK,IAAI,MAAM,WAAW;AAAA,IAChC,KAAK,KAAK,IAAI,KAAK,WAAW;AAAA,IAC9B,WAAW,CAAC,cAAc,KAAK,cAAc,GAAG,EAAE,KAAK,GAAG;AAAA,EAC5D;AACF;","names":[]}

package/dist/hooks/useSearch.d.mts

@@ -4,12 +4,17 @@ type UseSearchProps<T> = {
     list: T[];
     searchMapping: (item: T) => string[];
     initialSearch?: string;
+    additionalSearchTags?: string[];
+    isSearchInstant?: boolean;
+    sortingFunction?: (a: T, b: T) => number;
+    filter?: (item: T) => boolean;
+    disabled?: boolean;
 };
-declare const useSearch: <T>({ list, initialSearch, searchMapping, }: UseSearchProps<T>) => {
+declare const useSearch: <T>({ list, initialSearch, searchMapping, additionalSearchTags, isSearchInstant, sortingFunction, filter, disabled, }: UseSearchProps<T>) => {
     result: T[];
     hasResult: boolean;
     allItems: T[];
-    setItems: react.Dispatch<react.SetStateAction<T[]>>;
+    updateSearch: (newSearch?: string) => void;
     search: string;
     setSearch: react.Dispatch<react.SetStateAction<string>>;
 };

package/dist/hooks/useSearch.d.ts

@@ -4,12 +4,17 @@ type UseSearchProps<T> = {
     list: T[];
     searchMapping: (item: T) => string[];
     initialSearch?: string;
+    additionalSearchTags?: string[];
+    isSearchInstant?: boolean;
+    sortingFunction?: (a: T, b: T) => number;
+    filter?: (item: T) => boolean;
+    disabled?: boolean;
 };
-declare const useSearch: <T>({ list, initialSearch, searchMapping, }: UseSearchProps<T>) => {
+declare const useSearch: <T>({ list, initialSearch, searchMapping, additionalSearchTags, isSearchInstant, sortingFunction, filter, disabled, }: UseSearchProps<T>) => {
     result: T[];
     hasResult: boolean;
     allItems: T[];
-    setItems: react.Dispatch<react.SetStateAction<T[]>>;
+    updateSearch: (newSearch?: string) => void;
     search: string;
     setSearch: react.Dispatch<react.SetStateAction<string>>;
 };

package/dist/hooks/useSearch.js

@@ -25,13 +25,13 @@ module.exports = __toCommonJS(useSearch_exports);
 var import_react = require("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())));
   });
 };
 
@@ -39,22 +39,51 @@ var MultiSearchWithMapping = (search, objects, mapping) => {
 var useSearch = ({
   list,
   initialSearch,
-  searchMapping
+  searchMapping,
+  additionalSearchTags,
+  isSearchInstant = true,
+  sortingFunction,
+  filter,
+  disabled = false
 }) => {
-  const [items, setItems] = (0, import_react.useState)(list);
-  const [search, setSearch] = (0, import_react.useState)(initialSearch);
+  const [search, setSearch] = (0, import_react.useState)(initialSearch ?? "");
+  const [result, setResult] = (0, import_react.useState)(list);
+  const searchTags = (0, import_react.useMemo)(() => additionalSearchTags ?? [], [additionalSearchTags]);
+  const updateSearch = (0, import_react.useCallback)((newSearch) => {
+    const usedSearch = newSearch ?? search;
+    if (newSearch) {
+      setSearch(search);
+    }
+    setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
+  }, [searchTags, list, search, searchMapping]);
   (0, import_react.useEffect)(() => {
-    setItems(list);
-  }, [list]);
-  const result = (0, import_react.useMemo)(
-    () => MultiSearchWithMapping(search, items, searchMapping),
-    [search, items, searchMapping]
-  );
+    if (isSearchInstant) {
+      setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
+    }
+  }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
+  const filteredResult = (0, import_react.useMemo)(() => {
+    if (!filter) {
+      return result;
+    }
+    return result.filter(filter);
+  }, [result, filter]);
+  const sortedAndFilteredResult = (0, import_react.useMemo)(() => {
+    if (!sortingFunction) {
+      return filteredResult;
+    }
+    return filteredResult.sort(sortingFunction);
+  }, [filteredResult, sortingFunction]);
+  const usedResult = (0, import_react.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.js.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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6C;;;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,QAAI,uBAAc,IAAI;AAC5C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAiB,aAAa;AAE1D,8BAAU,MAAM;AACd,aAAS,IAAI;AAAA,EACf,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,aAAc;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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0D;;;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,QAAI,uBAAiB,iBAAiB,EAAE;AAChE,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAc,IAAI;AAC9C,QAAM,iBAAa,sBAAQ,MAAM,wBAAwB,CAAC,GAAG,CAAC,oBAAoB,CAAC;AAEnF,QAAM,mBAAe,0BAAY,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,8BAAU,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,qBAAsB,sBAAQ,MAAM;AACxC,QAAI,CAAC,QAAQ;AACX,aAAO;AAAA,IACT;AACA,WAAO,OAAO,OAAO,MAAM;AAAA,EAC7B,GAAG,CAAC,QAAQ,MAAM,CAAC;AAEnB,QAAM,8BAA+B,sBAAQ,MAAM;AACjD,QAAI,CAAC,iBAAiB;AACpB,aAAO;AAAA,IACT;AACA,WAAO,eAAe,KAAK,eAAe;AAAA,EAC5C,GAAG,CAAC,gBAAgB,eAAe,CAAC;AAEpC,QAAM,iBAAa,sBAAQ,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":[]}