@addev-be/ui 0.7.0 → 0.7.1

package/dist/components/data/VirtualScroller/hooks.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVirtualScrolling = exports.VIRTUAL_SCROLL_TOLERANCE = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../../hooks");
+exports.VIRTUAL_SCROLL_TOLERANCE = 20;
+var useVirtualScrolling = function (_a) {
+    var _b;
+    var scrollableElement = _a.scrollableElement, rowHeightInPx = _a.rowHeightInPx, items = _a.items, _c = _a.itemsPerRow, itemsPerRow = _c === void 0 ? 1 : _c, _d = _a.tolerance, tolerance = _d === void 0 ? exports.VIRTUAL_SCROLL_TOLERANCE : _d;
+    var height = (0, hooks_1.useElementSize)(scrollableElement).height;
+    var _e = (0, react_1.useState)(0), scrollTop = _e[0], setScrollTop = _e[1];
+    var _f = [
+        Math.floor(scrollTop / rowHeightInPx),
+        Math.ceil(height / rowHeightInPx),
+    ], rowIndex = _f[0], rowLength = _f[1];
+    var _g = [rowIndex * itemsPerRow, rowLength * itemsPerRow], index = _g[0], length = _g[1];
+    var rowTolerance = Math.ceil(tolerance / itemsPerRow);
+    var totalRows = Math.ceil(((_b = items === null || items === void 0 ? void 0 : items.length) !== null && _b !== void 0 ? _b : 0) / itemsPerRow);
+    var totalHeight = totalRows * rowHeightInPx;
+    var topPadding = Math.max(0, rowIndex - rowTolerance) * rowHeightInPx;
+    var onScroll = (0, react_1.useCallback)(function () {
+        if (scrollableElement) {
+            setScrollTop(scrollableElement.scrollTop);
+        }
+    }, [scrollableElement]);
+    (0, react_1.useEffect)(function () {
+        var scrollable = scrollableElement;
+        if (scrollable) {
+            scrollable.addEventListener('scroll', onScroll);
+            return function () {
+                scrollable.removeEventListener('scroll', onScroll);
+            };
+        }
+    }, [onScroll, scrollableElement]);
+    var rowIndexWithTolerance = Math.max(0, rowIndex - rowTolerance);
+    var rowLengthWithTolerance = rowLength + 2 * rowTolerance;
+    var indexWithTolerance = rowIndexWithTolerance * itemsPerRow;
+    var lengthWithTolerance = rowLengthWithTolerance * itemsPerRow;
+    var visibleItems = items.slice(indexWithTolerance, indexWithTolerance + lengthWithTolerance);
+    return {
+        index: index,
+        length: length,
+        indexWithTolerance: indexWithTolerance,
+        lengthWithTolerance: lengthWithTolerance,
+        visibleItems: visibleItems,
+        totalHeight: totalHeight,
+        topPadding: topPadding,
+    };
+};
+exports.useVirtualScrolling = useVirtualScrolling;

package/dist/components/data/VirtualScroller/index.d.ts

@@ -0,0 +1,14 @@
+import { VirtualScrollerTemplateFC } from './types';
+type VirtualScrollerProps<R, P extends object> = {
+    gridTemplateColumns: string;
+    items: R[];
+    itemTemplate: VirtualScrollerTemplateFC<R, P>;
+    rowHeightInPx?: number;
+    gap?: string;
+    itemsPerRow?: number;
+    tolerance?: number;
+    itemProps: P;
+    onRangeChanged?: (index: number, length: number) => void;
+};
+export declare const VirtualScroller: <R, P extends object>({ gridTemplateColumns, items, rowHeightInPx, itemTemplate: ItemTemplate, itemProps, onRangeChanged, gap, itemsPerRow, tolerance, }: VirtualScrollerProps<R, P>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/data/VirtualScroller/index.js

@@ -0,0 +1,58 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VirtualScroller = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+var styles = __importStar(require("./styles"));
+var react_1 = require("react");
+var hooks_1 = require("./hooks");
+var VirtualScroller = function (_a) {
+    var gridTemplateColumns = _a.gridTemplateColumns, items = _a.items, _b = _a.rowHeightInPx, rowHeightInPx = _b === void 0 ? styles.DEFAULT_ROW_HEIGHT : _b, ItemTemplate = _a.itemTemplate, itemProps = _a.itemProps, onRangeChanged = _a.onRangeChanged, gap = _a.gap, itemsPerRow = _a.itemsPerRow, tolerance = _a.tolerance;
+    var _c = (0, react_1.useState)(null), scrollableElement = _c[0], setScrollableElement = _c[1];
+    var _d = (0, hooks_1.useVirtualScrolling)({
+        scrollableElement: scrollableElement,
+        rowHeightInPx: rowHeightInPx,
+        items: items,
+        itemsPerRow: itemsPerRow,
+        tolerance: tolerance,
+    }), indexWithTolerance = _d.indexWithTolerance, lengthWithTolerance = _d.lengthWithTolerance, visibleItems = _d.visibleItems, topPadding = _d.topPadding, totalHeight = _d.totalHeight;
+    (0, react_1.useEffect)(function () {
+        onRangeChanged === null || onRangeChanged === void 0 ? void 0 : onRangeChanged(indexWithTolerance, lengthWithTolerance);
+    }, [indexWithTolerance, lengthWithTolerance, onRangeChanged]);
+    return ((0, jsx_runtime_1.jsx)(styles.VirtualScrollerContainer, { "$height": totalHeight, ref: function (element) { var _a; return setScrollableElement((_a = element === null || element === void 0 ? void 0 : element.parentElement) !== null && _a !== void 0 ? _a : null); }, children: (0, jsx_runtime_1.jsx)(styles.VirtualScrollerItemsContainer, { "$gridTemplateColumns": gridTemplateColumns, "$topPadding": topPadding, "$itemHeight": rowHeightInPx, "$gap": gap, children: visibleItems.map(function (item, currentIndex) { return ((0, jsx_runtime_1.jsx)(ItemTemplate, __assign({ item: item, index: currentIndex }, itemProps), indexWithTolerance + currentIndex)); }) }) }));
+};
+exports.VirtualScroller = VirtualScroller;

package/dist/components/data/VirtualScroller/styles.d.ts

@@ -0,0 +1,16 @@
+export declare const DEFAULT_ROW_HEIGHT = 32;
+export declare const TopPaddingItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BottomPaddingItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VirtualScrollerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, {
+    $height: number;
+}>, never>> & string;
+export declare const VirtualScrollerItemsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, {
+    $gridTemplateColumns: string;
+    $gap?: string;
+    $topPadding: number;
+    $itemHeight: number;
+}>, never>> & string;

package/dist/components/data/VirtualScroller/styles.js

@@ -0,0 +1,39 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VirtualScrollerItemsContainer = exports.VirtualScrollerContainer = exports.BottomPaddingItem = exports.TopPaddingItem = exports.DEFAULT_ROW_HEIGHT = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.DEFAULT_ROW_HEIGHT = 32;
+exports.TopPaddingItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+exports.BottomPaddingItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+exports.VirtualScrollerContainer = styled_components_1.default.div.attrs(function (_a) {
+    var $height = _a.$height;
+    return ({
+        className: 'VirtualScrollerFiller',
+        style: {
+            height: "".concat($height, "px"),
+        },
+    });
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  overflow: visible;\n"], ["\n  position: relative;\n  overflow: visible;\n"])));
+exports.VirtualScrollerItemsContainer = styled_components_1.default.div.attrs(function (_a) {
+    var $gridTemplateColumns = _a.$gridTemplateColumns, $topPadding = _a.$topPadding, $itemHeight = _a.$itemHeight;
+    var itemHeightValue = "".concat($itemHeight, "px");
+    return {
+        className: 'VirtualScrollerItemsContainer',
+        style: {
+            top: "".concat($topPadding, "px"),
+            gridTemplateColumns: $gridTemplateColumns,
+            gridAutoItems: itemHeightValue,
+        },
+    };
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: grid;\n  position: absolute;\n  min-width: 100%;\n  grid-gap: ", ";\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 1;\n  }\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: -1;\n  }\n"], ["\n  display: grid;\n  position: absolute;\n  min-width: 100%;\n  grid-gap: ", ";\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 1;\n  }\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: -1;\n  }\n"])), function (_a) {
+    var $gap = _a.$gap;
+    return $gap;
+}, exports.TopPaddingItem, exports.BottomPaddingItem);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/data/VirtualScroller/types.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export type VirtualScrollerTemplateProps<R, P extends object = {}> = P & {
+    item: R | null;
+    index: number;
+};
+export type VirtualScrollerTemplateFC<R, P extends object = {}> = FC<VirtualScrollerTemplateProps<R, P>>;

package/dist/components/data/VirtualScroller/types.js

@@ -0,0 +1,3 @@
+"use strict";
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/data/index.d.ts

@@ -1,8 +1,13 @@
 export * from './DataGrid';
 export * from './DataGrid/helpers';
 export * from './DataGrid/styles';
+export * from './DataGrid/types';
 export * from './AdvancedRequestDataGrid';
+export * from './AdvancedRequestDataGrid/helpers';
 export * from './SqlRequestDataGrid';
 export * from './SqlRequestDataGrid/helpers';
 export * from './SqlRequestDataGrid/types';
-export * from './AdvancedRequestDataGrid/helpers';
+export * from './SqlRequestGrid';
+export * from './SqlRequestGrid/types';
+export * from './VirtualScroller';
+export * from './VirtualScroller/types';

package/dist/components/data/index.js

@@ -17,8 +17,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./DataGrid"), exports);
 __exportStar(require("./DataGrid/helpers"), exports);
 __exportStar(require("./DataGrid/styles"), exports);
+__exportStar(require("./DataGrid/types"), exports);
 __exportStar(require("./AdvancedRequestDataGrid"), exports);
+__exportStar(require("./AdvancedRequestDataGrid/helpers"), exports);
 __exportStar(require("./SqlRequestDataGrid"), exports);
 __exportStar(require("./SqlRequestDataGrid/helpers"), exports);
 __exportStar(require("./SqlRequestDataGrid/types"), exports);
-__exportStar(require("./AdvancedRequestDataGrid/helpers"), exports);
+__exportStar(require("./SqlRequestGrid"), exports);
+__exportStar(require("./SqlRequestGrid/types"), exports);
+__exportStar(require("./VirtualScroller"), exports);
+__exportStar(require("./VirtualScroller/types"), exports);

package/dist/components/forms/Button.d.ts

@@ -7,4 +7,4 @@ export type ButtonProps = {
     icon?: IconFC;
     rounded?: boolean;
 };
-export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof ButtonProps> & ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const Button: (props: import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof ButtonProps> & ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").JSX.Element | null;

package/dist/components/forms/IconButton.d.ts

@@ -1,7 +1,7 @@
 import { ButtonProps } from './Button';
 import { ButtonHTMLAttributes } from 'react';
 import { IconFC } from '../../Icons';
-export declare const IconButton: import("react").ForwardRefExoticComponent<ButtonProps & {
+export declare const IconButton: (props: ButtonProps & {
     icon: IconFC;
     $iconSize?: string;
-} & ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+} & ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>) => import("react").JSX.Element | null;

package/dist/components/forms/VerticalLabel.d.ts

@@ -0,0 +1,6 @@
+import { FC, HTMLAttributes } from 'react';
+type StackedLabelProps = HTMLAttributes<HTMLDivElement> & {
+    label: string;
+};
+export declare const StackedLabel: FC<StackedLabelProps>;
+export {};

package/dist/components/forms/VerticalLabel.js

@@ -0,0 +1,32 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackedLabel = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles_1 = require("./styles");
+var StackedLabel = function (_a) {
+    var label = _a.label, children = _a.children, props = __rest(_a, ["label", "children"]);
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StackedLabelContainer, __assign({}, props, { children: [(0, jsx_runtime_1.jsx)("label", { children: label }), children] })));
+};
+exports.StackedLabel = StackedLabel;

package/dist/components/forms/index.d.ts

@@ -2,4 +2,4 @@ export * from './Button';
 export * from './Select';
 export * from './IconButton';
 export * from './IndeterminateCheckbox';
-export { Input } from './styles';
+export * from './styles';

package/dist/components/forms/index.js

@@ -14,10 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = void 0;
 __exportStar(require("./Button"), exports);
 __exportStar(require("./Select"), exports);
 __exportStar(require("./IconButton"), exports);
 __exportStar(require("./IndeterminateCheckbox"), exports);
-var styles_1 = require("./styles");
-Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return styles_1.Input; } });
+__exportStar(require("./styles"), exports);

package/dist/components/forms/styles.d.ts

@@ -1,2 +1,7 @@
 export declare const inputStyle: import("styled-components").RuleSet<object>;
-export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}>, never>, never>> & string;
+export declare const StackedLabelContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;

package/dist/components/forms/styles.js

@@ -27,8 +27,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = exports.inputStyle = void 0;
+exports.StackedLabelContainer = exports.Input = exports.inputStyle = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 exports.inputStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: inherit;\n  font-size: inherit;\n  color: inherit;\n  border: 1px solid var(--color-gray-300);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1);\n  width: 100%;\n  box-sizing: border-box;\n\n  &:focus {\n    outline: 2px solid var(--color-primary-500);\n  }\n"], ["\n  font-family: inherit;\n  font-size: inherit;\n  color: inherit;\n  border: 1px solid var(--color-gray-300);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1);\n  width: 100%;\n  box-sizing: border-box;\n\n  &:focus {\n    outline: 2px solid var(--color-primary-500);\n  }\n"])));
-exports.Input = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.inputStyle);
-var templateObject_1, templateObject_2;
+exports.Input = styled_components_1.default.input.attrs({
+    className: 'Input',
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.inputStyle);
+exports.StackedLabelContainer = styled_components_1.default.div.attrs({
+    className: 'StackedLabelContainer',
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  color: var(--color-gray-900);\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  color: var(--color-gray-900);\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/index.d.ts

@@ -1,3 +1,6 @@
+export * from './auth';
 export * from './data';
 export * from './forms';
 export * from './layout';
+export * from './search';
+export * from './ui';

package/dist/components/index.js

@@ -14,6 +14,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./auth"), exports);
 __exportStar(require("./data"), exports);
 __exportStar(require("./forms"), exports);
 __exportStar(require("./layout"), exports);
+__exportStar(require("./search"), exports);
+__exportStar(require("./ui"), exports);

package/dist/components/layout/Dropdown/index.js

@@ -74,12 +74,12 @@ var getDropdownStyle = function (dropdown) {
     return dropdownStyle;
 };
 var Dropdown = function (_a) {
-    var children = _a.children, onClose = _a.onClose, props = __rest(_a, ["children", "onClose"]);
+    var children = _a.children, onClose = _a.onClose, $backdropAlpha = _a.$backdropAlpha, props = __rest(_a, ["children", "onClose", "$backdropAlpha"]);
     var createPortal = (0, providers_1.usePortals)().createPortal;
     var style = (0, react_1.useMemo)(function () { return getDropdownStyle(props); }, [props]);
     var modalPortal = (0, react_1.useMemo)(function () {
-        return createPortal((0, jsx_runtime_1.jsx)(styles.DropdownBackdrop, { onClick: onClose, children: (0, jsx_runtime_1.jsx)(styles.DropdownContainer, __assign({}, props, { style: style, children: children })) }));
-    }, [children, createPortal, onClose, props, style]);
+        return createPortal((0, jsx_runtime_1.jsx)(styles.DropdownBackdrop, { onClick: onClose, "$alpha": $backdropAlpha, children: (0, jsx_runtime_1.jsx)(styles.DropdownContainer, __assign({}, props, { style: style, children: children })) }));
+    }, [$backdropAlpha, children, createPortal, onClose, props, style]);
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: modalPortal });
 };
 exports.Dropdown = Dropdown;

package/dist/components/layout/Dropdown/styles.d.ts

@@ -1,10 +1,13 @@
-export declare const DropdownBackdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const DropdownBackdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}>, never>, never>> & string;
+}>, {
+    $alpha?: number;
+}>, never>> & string;
 export type DropdownContainerProps = {
     $width: number;
     $height: number | number[];
     $zIndex?: number;
+    $backdropAlpha?: number;
 };
 export declare const DropdownContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;

package/dist/components/layout/Dropdown/styles.js

@@ -31,7 +31,10 @@ exports.DropdownContainer = exports.DropdownBackdrop = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 exports.DropdownBackdrop = styled_components_1.default.div.attrs({
     className: 'DropdownBackdrop',
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: absolute;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, ", ");\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: absolute;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, ", ");\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])), function (_a) {
+    var _b = _a.$alpha, $alpha = _b === void 0 ? 0.5 : _b;
+    return $alpha;
+});
 exports.DropdownContainer = styled_components_1.default.div.attrs({
     className: 'DropdownContainer',
 })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: var(--color-neutral-0);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-lg);\n  outline: 1px solid var(--color-neutral-200);\n\n  position: absolute;\n  z-index: 1001;\n  ", ";\n  ", "\n"], ["\n  background: var(--color-neutral-0);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-lg);\n  outline: 1px solid var(--color-neutral-200);\n\n  position: absolute;\n  z-index: 1001;\n  ", ";\n  ", "\n"])), function (_a) {

package/dist/components/layout/Modal/styles.d.ts

@@ -1,3 +1,4 @@
+import { ThemeColor } from '../../../providers';
 export declare const ModalBackdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }>, never>, never>> & string;
@@ -6,6 +7,7 @@ export type ModalContainerProps = {
     $height?: number;
     $zIndex?: number;
     $fullscreen?: boolean;
+    $color?: ThemeColor;
 };
 export declare const ModalContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;

package/dist/components/layout/Modal/styles.js

@@ -34,19 +34,23 @@ exports.ModalBackdrop = styled_components_1.default.div.attrs({
 })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: fixed;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
 exports.ModalContainer = styled_components_1.default.div.attrs({
     className: 'ModalContainer',
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: var(--color-neutral-100);\n  border-radius: var(--rounded-lg);\n  box-shadow: var(--shadow-lg);\n  display: flex;\n  flex-direction: column;\n  max-height: 100vh;\n  overflow: hidden;\n\n  position: fixed;\n  z-index: 1001;\n  ", "\n"], ["\n  background: var(--color-neutral-100);\n  border-radius: var(--rounded-lg);\n  box-shadow: var(--shadow-lg);\n  display: flex;\n  flex-direction: column;\n  max-height: 100vh;\n  overflow: hidden;\n\n  position: fixed;\n  z-index: 1001;\n  ", "\n"])), function (_a) {
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background: var(--color-neutral-100);\n  border-radius: var(--rounded-lg);\n  box-shadow: var(--shadow-lg);\n  display: flex;\n  flex-direction: column;\n  max-height: 100vh;\n  overflow: hidden;\n\n  position: fixed;\n  z-index: 1001;\n  ", "\n\n  ", "\n"], ["\n  background: var(--color-neutral-100);\n  border-radius: var(--rounded-lg);\n  box-shadow: var(--shadow-lg);\n  display: flex;\n  flex-direction: column;\n  max-height: 100vh;\n  overflow: hidden;\n\n  position: fixed;\n  z-index: 1001;\n  ", "\n\n  ", "\n"])), function (_a) {
     var $fullscreen = _a.$fullscreen, $width = _a.$width, $height = _a.$height;
     return $fullscreen
         ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          margin: var(--space-4);\n        "], ["\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          margin: var(--space-4);\n        "]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n          width: ", ";\n          height: ", ";\n        "], ["\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n          width: ", ";\n          height: ", ";\n        "])), $width ? "".concat($width, "px") : 'auto', $height ? "".concat($height, "px") : 'auto');
+}, function (_a) {
+    var $color = _a.$color;
+    return $color
+        ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          border: 1px solid var(--color-", "-500);\n          box-shadow: 0 0 var(--space-3) var(--color-", "-500);\n        "], ["\n          border: 1px solid var(--color-", "-500);\n          box-shadow: 0 0 var(--space-3) var(--color-", "-500);\n        "])), $color, $color) : null;
 });
-exports.ModalHeader = styled_components_1.default.div.attrs({ className: 'ModalHeader' })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-weight: bold;\n  font-size: var(--text-lg);\n  padding: var(--space-2);\n  background-color: var(--color-neutral-200);\n  padding: var(--space-4);\n"], ["\n  font-weight: bold;\n  font-size: var(--text-lg);\n  padding: var(--space-2);\n  background-color: var(--color-neutral-200);\n  padding: var(--space-4);\n"])));
-exports.ModalMessage = styled_components_1.default.p.attrs({ className: 'ModalMessage' })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-bottom: 1rem;\n"], ["\n  margin-bottom: 1rem;\n"])));
-exports.ModalContent = styled_components_1.default.div.attrs({ className: 'ModalContent' })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: auto;\n  padding: var(--space-4);\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: auto;\n  padding: var(--space-4);\n"])));
+exports.ModalHeader = styled_components_1.default.div.attrs({ className: 'ModalHeader' })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-weight: bold;\n  font-size: var(--text-lg);\n  padding: var(--space-2);\n  background-color: var(--color-neutral-200);\n  padding: var(--space-4);\n"], ["\n  font-weight: bold;\n  font-size: var(--text-lg);\n  padding: var(--space-2);\n  background-color: var(--color-neutral-200);\n  padding: var(--space-4);\n"])));
+exports.ModalMessage = styled_components_1.default.p.attrs({ className: 'ModalMessage' })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin-bottom: 1rem;\n"], ["\n  margin-bottom: 1rem;\n"])));
+exports.ModalContent = styled_components_1.default.div.attrs({ className: 'ModalContent' })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: auto;\n  padding: var(--space-4);\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: auto;\n  padding: var(--space-4);\n"])));
 exports.ModalContentWithIcon = styled_components_1.default.div.attrs({
     className: 'ModalContentWithIcon',
-})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: var(--space-4);\n  gap: var(--space-2);\n\n  & > svg {\n    margin: var(--space-2);\n    width: var(--space-8);\n    height: var(--space-8);\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: var(--space-4);\n  gap: var(--space-2);\n\n  & > svg {\n    margin: var(--space-2);\n    width: var(--space-8);\n    height: var(--space-8);\n  }\n"])));
-exports.ModalFooter = styled_components_1.default.div.attrs({ className: 'ModalFooter' })(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding: var(--space-2);\n  background-color: var(--color-neutral-200);\n  padding: var(--space-4);\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding: var(--space-2);\n  background-color: var(--color-neutral-200);\n  padding: var(--space-4);\n"])));
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: var(--space-4);\n  gap: var(--space-2);\n\n  & > svg {\n    margin: var(--space-2);\n    width: var(--space-8);\n    height: var(--space-8);\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: var(--space-4);\n  gap: var(--space-2);\n\n  & > svg {\n    margin: var(--space-2);\n    width: var(--space-8);\n    height: var(--space-8);\n  }\n"])));
+exports.ModalFooter = styled_components_1.default.div.attrs({ className: 'ModalFooter' })(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding: var(--space-2);\n  background-color: var(--color-neutral-200);\n  padding: var(--space-4);\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding: var(--space-2);\n  background-color: var(--color-neutral-200);\n  padding: var(--space-4);\n"])));
 exports.ModalButtons = (0, styled_components_1.default)(exports.ModalFooter).attrs({
     className: 'ModalButtons',
-})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: var(--space-2);\n\n  button.right:first-of-type {\n    margin-left: auto;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: var(--space-2);\n\n  button.right:first-of-type {\n    margin-left: auto;\n  }\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: var(--space-2);\n\n  button.right:first-of-type {\n    margin-left: auto;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: var(--space-2);\n\n  button.right:first-of-type {\n    margin-left: auto;\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/dist/components/search/HighlightedText.d.ts

@@ -0,0 +1,5 @@
+import { FC, HTMLAttributes } from 'react';
+export declare const HighlightedText: FC<{
+    text: string;
+    highlight?: string;
+} & HTMLAttributes<HTMLSpanElement>>;

package/dist/components/search/HighlightedText.js

@@ -0,0 +1,43 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HighlightedText = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var helpers_1 = require("../../helpers");
+var HighlightedText = function (_a) {
+    var _b;
+    var text = _a.text, highlight = _a.highlight, props = __rest(_a, ["text", "highlight"]);
+    var textWithoutHtml = (0, react_1.useMemo)(function () { return (0, helpers_1.extractTextFromHTML)(text); }, [text]);
+    console.log('textWithoutHtml', textWithoutHtml);
+    if (!highlight)
+        return (0, jsx_runtime_1.jsx)("span", __assign({}, props, { children: textWithoutHtml }));
+    var parts = (_b = textWithoutHtml === null || textWithoutHtml === void 0 ? void 0 : textWithoutHtml.split(new RegExp("(".concat((0, helpers_1.escapeForRegExp)(highlight), ")"), 'gi'))) !== null && _b !== void 0 ? _b : [];
+    return ((0, jsx_runtime_1.jsx)("span", __assign({}, props, { children: parts
+            .filter(function (part) { return !!part; })
+            .map(function (part, index) { return ((0, jsx_runtime_1.jsx)("span", { style: part.toLowerCase() === highlight.toLowerCase()
+                ? { backgroundColor: 'gold' }
+                : {}, children: part }, index)); }) })));
+};
+exports.HighlightedText = HighlightedText;

package/dist/components/search/QuickSearchBar.d.ts

@@ -0,0 +1,6 @@
+import { SearchTypeDefinitions } from './types';
+type QuickSearchBarProps<R> = {
+    definitions: SearchTypeDefinitions<R>;
+};
+export declare const QuickSearchBar: <R>({ definitions }: QuickSearchBarProps<R>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/search/QuickSearchBar.js

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickSearchBar = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles = __importStar(require("./styles"));
+var react_1 = require("react");
+var layout_1 = require("../layout");
+var forms_1 = require("../forms");
+var QuickSearchResults_1 = require("./QuickSearchResults");
+var usehooks_1 = require("@uidotdev/usehooks");
+var services_1 = require("../../services");
+var QuickSearchBar = function (_a) {
+    var _b, _c;
+    var definitions = _a.definitions;
+    var _d = (0, react_1.useState)(''), term = _d[0], setTerm = _d[1];
+    var _e = (0, react_1.useState)(false), dropdownVisible = _e[0], setDropdownVisible = _e[1];
+    var debouncedTerm = (0, usehooks_1.useDebounce)(term, 300);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var _f = (0, react_1.useState)(null), results = _f[0], setResults = _f[1];
+    var fakeInputRef = (0, react_1.useRef)(null);
+    var inputRef = (0, react_1.useRef)(null);
+    var rect = (_c = (_b = fakeInputRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) !== null && _c !== void 0 ? _c : new DOMRect();
+    var destRect = new DOMRect(rect.x, rect.y, rect.width, 0);
+    var globalSearch = (0, services_1.useGlobalSearchRequestHandler)();
+    (0, react_1.useEffect)(function () {
+        if (debouncedTerm) {
+            globalSearch({
+                types: ['Customer', 'ScanGroup'],
+                searchTerm: debouncedTerm,
+                limit: 5,
+            }).then(function (response) {
+                setResults(response.data);
+                setDropdownVisible(true);
+            });
+        }
+    }, [globalSearch, debouncedTerm]);
+    var onFocus = (0, react_1.useCallback)(function () {
+        setDropdownVisible(true);
+        requestAnimationFrame(function () {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(forms_1.Input, { type: "text", ref: fakeInputRef, value: term, onFocus: onFocus }), dropdownVisible && rect && ((0, jsx_runtime_1.jsx)(layout_1.Dropdown, { "$sourceRect": destRect, onClose: function () { return setDropdownVisible(false); }, "$width": rect.width, "$height": [results ? 250 : rect.height, 400], "$autoPositionY": false, children: (0, jsx_runtime_1.jsxs)(styles.QuickSearchDropdownContainer, { children: [(0, jsx_runtime_1.jsx)(forms_1.Input, { type: "text", ref: inputRef, value: term, onChange: function (e) { return setTerm(e.target.value); }, onClick: function (e) { return e.stopPropagation(); } }), results && ((0, jsx_runtime_1.jsx)(QuickSearchResults_1.QuickSearchResults, { results: results, definitions: definitions, term: debouncedTerm }))] }) }))] }));
+};
+exports.QuickSearchBar = QuickSearchBar;

package/dist/components/search/QuickSearchResults.d.ts

@@ -0,0 +1,8 @@
+import { SearchResults, SearchTypeDefinitions } from './types';
+type QuickSearchResultsProps<R> = {
+    definitions: SearchTypeDefinitions<R>;
+    results: SearchResults<R>;
+    term: string;
+};
+export declare const QuickSearchResults: <R>(props: QuickSearchResultsProps<R>) => import("react/jsx-runtime").JSX.Element;
+export {};