@ultraviolet/ui 1.55.3 → 1.56.1

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

@@ -1,5 +1,10 @@
 import type { ReactNode, Ref } from 'react';
 type SentimentType = 'neutral' | 'primary';
+declare const SIZES_WIDTH: {
+    small: number;
+    medium: number;
+    large: number;
+};
 /**
  * Popover component is used to display additional information or actions on top of the main content of the page.
  * It is usually triggered by clicking on a button. It includes a title, a close button and a content area.
@@ -8,48 +13,48 @@ export declare const Popover: import("react").ForwardRefExoticComponent<{
     children: ReactNode;
     content: ReactNode;
     title: string;
-    sentiment?: SentimentType | undefined;
-    visible?: boolean | undefined;
-    size?: "large" | "medium" | "small" | undefined;
-    onClose?: (() => void) | undefined;
-    className?: string | undefined;
-    'data-testid'?: string | undefined;
-    maxWidth?: string | undefined;
-    maxHeight?: string | undefined;
+    sentiment?: SentimentType;
+    visible?: boolean;
+    size?: keyof typeof SIZES_WIDTH;
+    onClose?: () => void;
+    className?: string;
+    'data-testid'?: string;
+    maxWidth?: string;
+    maxHeight?: string;
     /**
      * By default, the portal target is children container or document.body if children is a function. You can override this
      * behavior by setting a portalTarget prop.
      */
-    portalTarget?: HTMLElement | undefined;
+    portalTarget?: HTMLElement;
 } & Pick<{
-    id?: string | undefined;
+    id?: string;
     children: ReactNode | ((renderProps: {
-        className?: string | undefined;
+        className?: string;
         onBlur: () => void;
         onFocus: () => void;
         onPointerEnter: () => void;
         onPointerLeave: () => void;
         ref: import("react").RefObject<HTMLDivElement>;
     }) => ReactNode);
-    maxWidth?: string | number | undefined;
-    placement?: import("../Popup/helpers").PopupPlacement | undefined;
+    maxWidth?: number | string;
+    placement?: import("../Popup/helpers").PopupPlacement;
     text?: ReactNode;
-    className?: string | undefined;
-    containerFullWidth?: boolean | undefined;
-    visible?: boolean | undefined;
-    innerRef?: Ref<HTMLDivElement | null> | undefined;
-    role?: string | undefined;
-    'data-testid'?: string | undefined;
-    hasArrow?: boolean | undefined;
-    onClose?: (() => void) | undefined;
-    tabIndex?: number | undefined;
-    onKeyDown?: import("react").KeyboardEventHandler | undefined;
-    'aria-haspopup'?: boolean | "menu" | "dialog" | "grid" | "listbox" | "tree" | "false" | "true" | undefined;
-    hideOnClickOutside?: boolean | undefined;
-    debounceDelay?: number | undefined;
-    maxHeight?: string | number | undefined;
-    disableAnimation?: boolean | undefined;
-    portalTarget?: HTMLElement | undefined;
-    dynamicDomRendering?: boolean | undefined;
+    className?: string;
+    containerFullWidth?: boolean;
+    visible?: boolean;
+    innerRef?: Ref<HTMLDivElement | null>;
+    role?: string;
+    'data-testid'?: string;
+    hasArrow?: boolean;
+    onClose?: () => void;
+    tabIndex?: number;
+    onKeyDown?: import("react").KeyboardEventHandler;
+    'aria-haspopup'?: import("react").HTMLAttributes<HTMLDivElement>["aria-haspopup"];
+    hideOnClickOutside?: boolean;
+    debounceDelay?: number;
+    maxHeight?: string | number;
+    disableAnimation?: boolean;
+    portalTarget?: HTMLElement;
+    dynamicDomRendering?: boolean;
 } & import("react").RefAttributes<HTMLDivElement>, "placement" | "dynamicDomRendering"> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/Popup/index.cjs

@@ -98,13 +98,10 @@ const Popup = React.forwardRef(({
   React.useImperativeHandle(ref, () => innerPopupRef.current);
   const timer = React.useRef();
   const popupPortalTarget = React.useMemo(() => {
-    if (portalTarget)
-      return portalTarget;
+    if (portalTarget) return portalTarget;
     if (role === "dialog") {
-      if (childrenRef.current)
-        return childrenRef.current;
-      if (typeof window !== "undefined")
-        return document.body;
+      if (childrenRef.current) return childrenRef.current;
+      if (typeof window !== "undefined") return document.body;
       return null;
     }
     if (typeof window !== "undefined") {
@@ -286,8 +283,7 @@ const Popup = React.forwardRef(({
     return false;
   }, [dynamicDomRendering, visibleInDom]);
   if (!text) {
-    if (typeof children === "function")
-      return null;
+    if (typeof children === "function") return null;
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
   }
   const stopClickPropagation = (event) => {

package/dist/components/Popup/index.js

@@ -94,13 +94,10 @@ const Popup = forwardRef(({
   useImperativeHandle(ref, () => innerPopupRef.current);
   const timer = useRef();
   const popupPortalTarget = useMemo(() => {
-    if (portalTarget)
-      return portalTarget;
+    if (portalTarget) return portalTarget;
     if (role === "dialog") {
-      if (childrenRef.current)
-        return childrenRef.current;
-      if (typeof window !== "undefined")
-        return document.body;
+      if (childrenRef.current) return childrenRef.current;
+      if (typeof window !== "undefined") return document.body;
       return null;
     }
     if (typeof window !== "undefined") {
@@ -282,8 +279,7 @@ const Popup = forwardRef(({
     return false;
   }, [dynamicDomRendering, visibleInDom]);
   if (!text) {
-    if (typeof children === "function")
-      return null;
+    if (typeof children === "function") return null;
     return /* @__PURE__ */ jsx(Fragment, { children });
   }
   const stopClickPropagation = (event) => {

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

@@ -2,8 +2,8 @@ import type { CSSProperties, ReactNode } from 'react';
 import type { UltravioletUITheme } from '../../theme';
 type StyledRowProps = Pick<RowProps, 'gap' | 'templateColumns' | 'alignItems' | 'justifyContent'>;
 export declare const StyledRow: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
 } & StyledRowProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 type RowProps = {
     className?: string;

package/dist/components/SearchInput/index.cjs

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const _styled = require("@emotion/styled/base");
+const icons = require("@ultraviolet/icons");
+const React = require("react");
+const index = require("../Popup/index.cjs");
+const index$1 = require("../TextInputV2/index.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefaultCompat(_styled);
+const StyledPopup = /* @__PURE__ */ _styled__default.default(index.Popup, process.env.NODE_ENV === "production" ? {
+  target: "eefux4u0"
+} : {
+  target: "eefux4u0",
+  label: "StyledPopup"
+})("width:100%;text-align:initial;min-width:610px;padding:", ({
+  theme
+}) => `${theme.space["2"]} ${theme.space["1"]}`, ";background:", ({
+  theme
+}) => theme.colors.neutral.background, ";box-shadow:", ({
+  theme
+}) => theme.shadows.modal, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NlYXJjaElucHV0L2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRaUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvU2VhcmNoSW5wdXQvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBJY29uIH0gZnJvbSAnQHVsdHJhdmlvbGV0L2ljb25zJ1xuaW1wb3J0IHR5cGUgeyBSZWYgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGZvcndhcmRSZWYsIHVzZUVmZmVjdCwgdXNlUmVkdWNlciwgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgUG9wdXAgfSBmcm9tICcuLi9Qb3B1cCdcbmltcG9ydCB7IFRleHRJbnB1dFYyIH0gZnJvbSAnLi4vVGV4dElucHV0VjInXG5pbXBvcnQgdHlwZSB7IFNlYXJjaElucHV0UHJvcHMgfSBmcm9tICcuL3R5cGVzJ1xuXG5jb25zdCBTdHlsZWRQb3B1cCA9IHN0eWxlZChQb3B1cClgXG4gIHdpZHRoOiAxMDAlO1xuICB0ZXh0LWFsaWduOiBpbml0aWFsO1xuICBtaW4td2lkdGg6IDYxMHB4O1xuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IGAke3RoZW1lLnNwYWNlWycyJ119ICR7dGhlbWUuc3BhY2VbJzEnXX1gfTtcbiAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5iYWNrZ3JvdW5kfTtcbiAgYm94LXNoYWRvdzogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zaGFkb3dzLm1vZGFsfTtcbmBcblxuLyoqXG4gKiBTZWFyY2hJbnB1dCBpcyBhIGNvbXBvbmVudCB0aGF0IGFsbG93cyB1c2VycyB0byBzZWFyY2ggZm9yIGl0ZW1zLiBJdCBpcyBhIGNvbWJpbmF0aW9uIG9mIGEgVGV4dElucHV0VjIgYW5kIGEgUG9wdXAuIFRoZSBQb3B1cCBpcyB1c2VkIHRvIGRpc3BsYXkgc2VhcmNoIHJlc3VsdHMuXG4gKiBDaGlsZHJlbiBvZiB0aGUgU2VhcmNoSW5wdXQgY29tcG9uZW50IGNhbiBiZSBhIGZ1bmN0aW9uIHRoYXQgcmVjZWl2ZXMgYW4gb2JqZWN0IHdpdGggdGhlIGZvbGxvd2luZyBwcm9wZXJ0aWVzOlxuICogLSBgc2VhcmNoVGVybXNgOiB0aGUgY3VycmVudCBzZWFyY2ggdGVybXNcbiAqIC0gYGlzT3BlbmA6IGEgYm9vbGVhbiBpbmRpY2F0aW5nIGlmIHRoZSBwb3B1cCBpcyBvcGVuXG4gKiAtIGB0b2dnbGVJc09wZW5gOiBhIGZ1bmN0aW9uIHRvIHRvZ2dsZSB0aGUgcG9wdXBcbiAqL1xuZXhwb3J0IGNvbnN0IFNlYXJjaElucHV0ID0gZm9yd2FyZFJlZihcbiAgKFxuICAgIHtcbiAgICAgIHBsYWNlaG9sZGVyLFxuICAgICAgbGFiZWwsXG4gICAgICBsb2FkaW5nLFxuICAgICAgc2l6ZSxcbiAgICAgIHN1ZmZpeCxcbiAgICAgIHBvcHVwUGxhY2VtZW50LFxuICAgICAgdGhyZXNob2xkID0gMCxcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgb25TZWFyY2gsXG4gICAgICBvbkNsb3NlLFxuICAgICAgJ2RhdGEtdGVzdGlkJzogZGF0YVRlc3RJZCxcbiAgICB9OiBTZWFyY2hJbnB1dFByb3BzLFxuICAgIHJlZjogUmVmPEhUTUxJbnB1dEVsZW1lbnQ+LFxuICApID0+IHtcbiAgICBjb25zdCBmb2N1c2VkTGlua0luZGV4ID0gdXNlUmVmKDApXG4gICAgY29uc3QgcG9wdXBSZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpXG4gICAgY29uc3QgW2NvbnRhaW5lcldpZHRoLCBzZXRDb250YWluZXJXaWR0aF0gPSB1c2VTdGF0ZSgwKVxuICAgIGNvbnN0IFtzZWFyY2hUZXJtcywgc2V0U2VhcmNoVGVybXNdID0gdXNlU3RhdGUoJycpXG4gICAgY29uc3QgW2lzT3BlbiwgdG9nZ2xlSXNPcGVuXSA9IHVzZVJlZHVjZXIoc3RhdGUgPT4gIXN0YXRlLCBmYWxzZSlcblxuICAgIGNvbnN0IGNvbnRlbnQgPVxuICAgICAgdHlwZW9mIGNoaWxkcmVuID09PSAnZnVuY3Rpb24nXG4gICAgICAgID8gY2hpbGRyZW4oeyBzZWFyY2hUZXJtcywgaXNPcGVuLCB0b2dnbGVJc09wZW4gfSlcbiAgICAgICAgOiBjaGlsZHJlblxuXG4gICAgY29uc3QgcmVzaXplU2VhcmNoQmFyID0gKCkgPT4ge1xuICAgICAgaWYgKHBvcHVwUmVmLmN1cnJlbnQpIHtcbiAgICAgICAgc2V0Q29udGFpbmVyV2lkdGgocG9wdXBSZWYuY3VycmVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS53aWR0aClcbiAgICAgIH1cbiAgICB9XG5cbiAgICBjb25zdCBoYW5kbGVOYXZpZ2F0aW9uID0gKGV2ZW50OiBLZXlib2FyZEV2ZW50KSA9PiB7XG4gICAgICBjb25zdCBsaW5rcyA9IFsuLi4ocG9wdXBSZWYuY3VycmVudD8ucXVlcnlTZWxlY3RvckFsbCgnYScpID8/IFtdKV1cblxuICAgICAgaWYgKFxuICAgICAgICBsaW5rcy5sZW5ndGggPiAwICYmXG4gICAgICAgIGZvY3VzZWRMaW5rSW5kZXguY3VycmVudCA+PSAwICYmXG4gICAgICAgIGZvY3VzZWRMaW5rSW5kZXguY3VycmVudCA8PSBsaW5rcy5sZW5ndGhcbiAgICAgICkge1xuICAgICAgICBpZiAoZXZlbnQua2V5ID09PSAnQXJyb3dVcCcpIHtcbiAgICAgICAgICBpZiAoZm9jdXNlZExpbmtJbmRleC5jdXJyZW50IC0gMSA8IDApIHtcbiAgICAgICAgICAgIGZvY3VzZWRMaW5rSW5kZXguY3VycmVudCA9IGxpbmtzLmxlbmd0aCAtIDFcbiAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgZm9jdXNlZExpbmtJbmRleC5jdXJyZW50IC09IDFcbiAgICAgICAgICB9XG4gICAgICAgICAgbGlua3NbZm9jdXNlZExpbmtJbmRleC5jdXJyZW50XT8uZm9jdXMoKVxuICAgICAgICB9XG5cbiAgICAgICAgaWYgKGV2ZW50LmtleSA9PT0gJ0Fycm93RG93bicpIHtcbiAgICAgICAgICBpZiAoZm9jdXNlZExpbmtJbmRleC5jdXJyZW50ICsgMSA+PSBsaW5rcy5sZW5ndGgpIHtcbiAgICAgICAgICAgIGZvY3VzZWRMaW5rSW5kZXguY3VycmVudCA9IDBcbiAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgZm9jdXNlZExpbmtJbmRleC5jdXJyZW50ICs9IDFcbiAgICAgICAgICB9XG4gICAgICAgICAgbGlua3NbZm9jdXNlZExpbmtJbmRleC5jdXJyZW50XT8uZm9jdXMoKVxuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2tleXVwJywgaGFuZGxlTmF2aWdhdGlvbilcblxuICAgICAgcmV0dXJuICgpID0+IGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2tleXVwJywgaGFuZGxlTmF2aWdhdGlvbilcbiAgICB9LCBbXSlcblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICByZXNpemVTZWFyY2hCYXIoKVxuXG4gICAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcigncmVzaXplJywgcmVzaXplU2VhcmNoQmFyKVxuXG4gICAgICByZXR1cm4gKCkgPT4gd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIHJlc2l6ZVNlYXJjaEJhcilcbiAgICB9LCBbXSlcblxuICAgIGNvbnN0IG9uU2VhcmNoQ2FsbGJhY2sgPSAodmFsdWU6IHN0cmluZykgPT4ge1xuICAgICAgc2V0U2VhcmNoVGVybXModmFsdWUpXG5cbiAgICAgIHRyeSB7XG4gICAgICAgIG9uU2VhcmNoKHZhbHVlKVxuICAgICAgICBpZiAodmFsdWUubGVuZ3RoID49IHRocmVzaG9sZCAmJiAhaXNPcGVuKSB7XG4gICAgICAgICAgdG9nZ2xlSXNPcGVuKClcbiAgICAgICAgfVxuICAgICAgfSBjYXRjaCB7XG4gICAgICAgIHRvZ2dsZUlzT3BlbigpXG4gICAgICB9XG4gICAgfVxuXG4gICAgY29uc3Qgb25DbG9zZUNhbGxiYWNrID0gKCkgPT4ge1xuICAgICAgb25DbG9zZT8uKClcbiAgICAgIGlmIChpc09wZW4pIHtcbiAgICAgICAgdG9nZ2xlSXNPcGVuKClcbiAgICAgIH1cbiAgICB9XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGRpdj5cbiAgICAgICAgPFN0eWxlZFBvcHVwXG4gICAgICAgICAgZGF0YS10ZXN0aWQ9e2Bwb3B1cC0ke2RhdGFUZXN0SWR9YH1cbiAgICAgICAgICByb2xlPVwiZGlhbG9nXCJcbiAgICAgICAgICB2aXNpYmxlPXtpc09wZW59XG4gICAgICAgICAgb25DbG9zZT17b25DbG9zZUNhbGxiYWNrfVxuICAgICAgICAgIHBsYWNlbWVudD17cG9wdXBQbGFjZW1lbnR9XG4gICAgICAgICAgbWF4V2lkdGg9e2NvbnRhaW5lcldpZHRofVxuICAgICAgICAgIGhpZGVPbkNsaWNrT3V0c2lkZVxuICAgICAgICAgIGhhc0Fycm93PXtmYWxzZX1cbiAgICAgICAgICBpbm5lclJlZj17cG9wdXBSZWZ9XG4gICAgICAgICAgdGV4dD17Y29udGVudH1cbiAgICAgICAgICBtYXhIZWlnaHQ9ezQxMH1cbiAgICAgICAgICBkZWJvdW5jZURlbGF5PXswfVxuICAgICAgICA+XG4gICAgICAgICAgPFRleHRJbnB1dFYyXG4gICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgIHByZWZpeD17PEljb24gbmFtZT1cInNlYXJjaFwiIC8+fVxuICAgICAgICAgICAgc3VmZml4PXtzdWZmaXh9XG4gICAgICAgICAgICBkYXRhLXRlc3RpZD17ZGF0YVRlc3RJZH1cbiAgICAgICAgICAgIHZhbHVlPXtzZWFyY2hUZXJtc31cbiAgICAgICAgICAgIHNpemU9e3NpemV9XG4gICAgICAgICAgICBsYWJlbD17bGFiZWx9XG4gICAgICAgICAgICBwbGFjZWhvbGRlcj17cGxhY2Vob2xkZXJ9XG4gICAgICAgICAgICBsb2FkaW5nPXtsb2FkaW5nfVxuICAgICAgICAgICAgb25DaGFuZ2U9e29uU2VhcmNoQ2FsbGJhY2t9XG4gICAgICAgICAgICBjbGVhcmFibGVcbiAgICAgICAgICAvPlxuICAgICAgICA8L1N0eWxlZFBvcHVwPlxuICAgICAgPC9kaXY+XG4gICAgKVxuICB9LFxuKVxuIl19 */"));
+const SearchInput = React.forwardRef(({
+  placeholder,
+  label,
+  loading,
+  size,
+  suffix,
+  popupPlacement,
+  threshold = 0,
+  children,
+  onSearch,
+  onClose,
+  "data-testid": dataTestId
+}, ref) => {
+  const focusedLinkIndex = React.useRef(0);
+  const popupRef = React.useRef(null);
+  const [containerWidth, setContainerWidth] = React.useState(0);
+  const [searchTerms, setSearchTerms] = React.useState("");
+  const [isOpen, toggleIsOpen] = React.useReducer((state) => !state, false);
+  const content = typeof children === "function" ? children({
+    searchTerms,
+    isOpen,
+    toggleIsOpen
+  }) : children;
+  const resizeSearchBar = () => {
+    if (popupRef.current) {
+      setContainerWidth(popupRef.current.getBoundingClientRect().width);
+    }
+  };
+  const handleNavigation = (event) => {
+    const links = [...popupRef.current?.querySelectorAll("a") ?? []];
+    if (links.length > 0 && focusedLinkIndex.current >= 0 && focusedLinkIndex.current <= links.length) {
+      if (event.key === "ArrowUp") {
+        if (focusedLinkIndex.current - 1 < 0) {
+          focusedLinkIndex.current = links.length - 1;
+        } else {
+          focusedLinkIndex.current -= 1;
+        }
+        links[focusedLinkIndex.current]?.focus();
+      }
+      if (event.key === "ArrowDown") {
+        if (focusedLinkIndex.current + 1 >= links.length) {
+          focusedLinkIndex.current = 0;
+        } else {
+          focusedLinkIndex.current += 1;
+        }
+        links[focusedLinkIndex.current]?.focus();
+      }
+    }
+  };
+  React.useEffect(() => {
+    document.addEventListener("keyup", handleNavigation);
+    return () => document.removeEventListener("keyup", handleNavigation);
+  }, []);
+  React.useEffect(() => {
+    resizeSearchBar();
+    window.addEventListener("resize", resizeSearchBar);
+    return () => window.removeEventListener("resize", resizeSearchBar);
+  }, []);
+  const onSearchCallback = (value) => {
+    setSearchTerms(value);
+    try {
+      onSearch(value);
+      if (value.length >= threshold && !isOpen) {
+        toggleIsOpen();
+      }
+    } catch {
+      toggleIsOpen();
+    }
+  };
+  const onCloseCallback = () => {
+    onClose?.();
+    if (isOpen) {
+      toggleIsOpen();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(StyledPopup, { "data-testid": `popup-${dataTestId}`, role: "dialog", visible: isOpen, onClose: onCloseCallback, placement: popupPlacement, maxWidth: containerWidth, hideOnClickOutside: true, hasArrow: false, innerRef: popupRef, text: content, maxHeight: 410, debounceDelay: 0, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.TextInputV2, { ref, prefix: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { name: "search" }), suffix, "data-testid": dataTestId, value: searchTerms, size, label, placeholder, loading, onChange: onSearchCallback, clearable: true }) }) });
+});
+exports.SearchInput = SearchInput;

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

@@ -0,0 +1,36 @@
+import { Popup } from '../Popup';
+/**
+ * SearchInput is a component that allows users to search for items. It is a combination of a TextInputV2 and a Popup. The Popup is used to display search results.
+ * Children of the SearchInput component can be a function that receives an object with the following properties:
+ * - `searchTerms`: the current search terms
+ * - `isOpen`: a boolean indicating if the popup is open
+ * - `toggleIsOpen`: a function to toggle the popup
+ */
+export declare const SearchInput: import("react").ForwardRefExoticComponent<{
+    popupPlacement?: import("react").ComponentProps<typeof Popup>["placement"];
+    threshold?: number;
+    children: import("./types").SearchBarChildrenFunctionProps | import("react").ReactNode;
+    onSearch: (value: string) => void;
+    onClose?: () => void;
+    "data-testid"?: string;
+} & Pick<{
+    className?: string;
+    clearable?: boolean;
+    'data-testid'?: string;
+    error?: string;
+    helper?: import("react").ReactNode;
+    label?: string;
+    labelDescription?: import("react").ReactNode;
+    loading?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    onRandomize?: () => void;
+    onChange?: (newValue: string) => void;
+    prefix?: import("react").ReactNode;
+    size?: "large" | "medium" | "small";
+    success?: string | boolean;
+    suffix?: import("react").ReactNode;
+    tooltip?: string;
+    type?: "text" | "password" | "url" | "email";
+    value?: string;
+} & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "autoFocus" | "id" | "tabIndex" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onKeyDown" | "name" | "disabled" | "autoComplete" | "placeholder" | "readOnly" | "required"> & import("react").RefAttributes<HTMLInputElement>, "label" | "size" | "loading" | "placeholder" | "suffix"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/SearchInput/index.js

@@ -0,0 +1,98 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import _styled from "@emotion/styled/base";
+import { Icon } from "@ultraviolet/icons";
+import { forwardRef, useRef, useState, useReducer, useEffect } from "react";
+import { Popup } from "../Popup/index.js";
+import { TextInputV2 } from "../TextInputV2/index.js";
+const StyledPopup = /* @__PURE__ */ _styled(Popup, process.env.NODE_ENV === "production" ? {
+  target: "eefux4u0"
+} : {
+  target: "eefux4u0",
+  label: "StyledPopup"
+})("width:100%;text-align:initial;min-width:610px;padding:", ({
+  theme
+}) => `${theme.space["2"]} ${theme.space["1"]}`, ";background:", ({
+  theme
+}) => theme.colors.neutral.background, ";box-shadow:", ({
+  theme
+}) => theme.shadows.modal, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NlYXJjaElucHV0L2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRaUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvU2VhcmNoSW5wdXQvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBJY29uIH0gZnJvbSAnQHVsdHJhdmlvbGV0L2ljb25zJ1xuaW1wb3J0IHR5cGUgeyBSZWYgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGZvcndhcmRSZWYsIHVzZUVmZmVjdCwgdXNlUmVkdWNlciwgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgUG9wdXAgfSBmcm9tICcuLi9Qb3B1cCdcbmltcG9ydCB7IFRleHRJbnB1dFYyIH0gZnJvbSAnLi4vVGV4dElucHV0VjInXG5pbXBvcnQgdHlwZSB7IFNlYXJjaElucHV0UHJvcHMgfSBmcm9tICcuL3R5cGVzJ1xuXG5jb25zdCBTdHlsZWRQb3B1cCA9IHN0eWxlZChQb3B1cClgXG4gIHdpZHRoOiAxMDAlO1xuICB0ZXh0LWFsaWduOiBpbml0aWFsO1xuICBtaW4td2lkdGg6IDYxMHB4O1xuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IGAke3RoZW1lLnNwYWNlWycyJ119ICR7dGhlbWUuc3BhY2VbJzEnXX1gfTtcbiAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5iYWNrZ3JvdW5kfTtcbiAgYm94LXNoYWRvdzogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zaGFkb3dzLm1vZGFsfTtcbmBcblxuLyoqXG4gKiBTZWFyY2hJbnB1dCBpcyBhIGNvbXBvbmVudCB0aGF0IGFsbG93cyB1c2VycyB0byBzZWFyY2ggZm9yIGl0ZW1zLiBJdCBpcyBhIGNvbWJpbmF0aW9uIG9mIGEgVGV4dElucHV0VjIgYW5kIGEgUG9wdXAuIFRoZSBQb3B1cCBpcyB1c2VkIHRvIGRpc3BsYXkgc2VhcmNoIHJlc3VsdHMuXG4gKiBDaGlsZHJlbiBvZiB0aGUgU2VhcmNoSW5wdXQgY29tcG9uZW50IGNhbiBiZSBhIGZ1bmN0aW9uIHRoYXQgcmVjZWl2ZXMgYW4gb2JqZWN0IHdpdGggdGhlIGZvbGxvd2luZyBwcm9wZXJ0aWVzOlxuICogLSBgc2VhcmNoVGVybXNgOiB0aGUgY3VycmVudCBzZWFyY2ggdGVybXNcbiAqIC0gYGlzT3BlbmA6IGEgYm9vbGVhbiBpbmRpY2F0aW5nIGlmIHRoZSBwb3B1cCBpcyBvcGVuXG4gKiAtIGB0b2dnbGVJc09wZW5gOiBhIGZ1bmN0aW9uIHRvIHRvZ2dsZSB0aGUgcG9wdXBcbiAqL1xuZXhwb3J0IGNvbnN0IFNlYXJjaElucHV0ID0gZm9yd2FyZFJlZihcbiAgKFxuICAgIHtcbiAgICAgIHBsYWNlaG9sZGVyLFxuICAgICAgbGFiZWwsXG4gICAgICBsb2FkaW5nLFxuICAgICAgc2l6ZSxcbiAgICAgIHN1ZmZpeCxcbiAgICAgIHBvcHVwUGxhY2VtZW50LFxuICAgICAgdGhyZXNob2xkID0gMCxcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgb25TZWFyY2gsXG4gICAgICBvbkNsb3NlLFxuICAgICAgJ2RhdGEtdGVzdGlkJzogZGF0YVRlc3RJZCxcbiAgICB9OiBTZWFyY2hJbnB1dFByb3BzLFxuICAgIHJlZjogUmVmPEhUTUxJbnB1dEVsZW1lbnQ+LFxuICApID0+IHtcbiAgICBjb25zdCBmb2N1c2VkTGlua0luZGV4ID0gdXNlUmVmKDApXG4gICAgY29uc3QgcG9wdXBSZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpXG4gICAgY29uc3QgW2NvbnRhaW5lcldpZHRoLCBzZXRDb250YWluZXJXaWR0aF0gPSB1c2VTdGF0ZSgwKVxuICAgIGNvbnN0IFtzZWFyY2hUZXJtcywgc2V0U2VhcmNoVGVybXNdID0gdXNlU3RhdGUoJycpXG4gICAgY29uc3QgW2lzT3BlbiwgdG9nZ2xlSXNPcGVuXSA9IHVzZVJlZHVjZXIoc3RhdGUgPT4gIXN0YXRlLCBmYWxzZSlcblxuICAgIGNvbnN0IGNvbnRlbnQgPVxuICAgICAgdHlwZW9mIGNoaWxkcmVuID09PSAnZnVuY3Rpb24nXG4gICAgICAgID8gY2hpbGRyZW4oeyBzZWFyY2hUZXJtcywgaXNPcGVuLCB0b2dnbGVJc09wZW4gfSlcbiAgICAgICAgOiBjaGlsZHJlblxuXG4gICAgY29uc3QgcmVzaXplU2VhcmNoQmFyID0gKCkgPT4ge1xuICAgICAgaWYgKHBvcHVwUmVmLmN1cnJlbnQpIHtcbiAgICAgICAgc2V0Q29udGFpbmVyV2lkdGgocG9wdXBSZWYuY3VycmVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS53aWR0aClcbiAgICAgIH1cbiAgICB9XG5cbiAgICBjb25zdCBoYW5kbGVOYXZpZ2F0aW9uID0gKGV2ZW50OiBLZXlib2FyZEV2ZW50KSA9PiB7XG4gICAgICBjb25zdCBsaW5rcyA9IFsuLi4ocG9wdXBSZWYuY3VycmVudD8ucXVlcnlTZWxlY3RvckFsbCgnYScpID8/IFtdKV1cblxuICAgICAgaWYgKFxuICAgICAgICBsaW5rcy5sZW5ndGggPiAwICYmXG4gICAgICAgIGZvY3VzZWRMaW5rSW5kZXguY3VycmVudCA+PSAwICYmXG4gICAgICAgIGZvY3VzZWRMaW5rSW5kZXguY3VycmVudCA8PSBsaW5rcy5sZW5ndGhcbiAgICAgICkge1xuICAgICAgICBpZiAoZXZlbnQua2V5ID09PSAnQXJyb3dVcCcpIHtcbiAgICAgICAgICBpZiAoZm9jdXNlZExpbmtJbmRleC5jdXJyZW50IC0gMSA8IDApIHtcbiAgICAgICAgICAgIGZvY3VzZWRMaW5rSW5kZXguY3VycmVudCA9IGxpbmtzLmxlbmd0aCAtIDFcbiAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgZm9jdXNlZExpbmtJbmRleC5jdXJyZW50IC09IDFcbiAgICAgICAgICB9XG4gICAgICAgICAgbGlua3NbZm9jdXNlZExpbmtJbmRleC5jdXJyZW50XT8uZm9jdXMoKVxuICAgICAgICB9XG5cbiAgICAgICAgaWYgKGV2ZW50LmtleSA9PT0gJ0Fycm93RG93bicpIHtcbiAgICAgICAgICBpZiAoZm9jdXNlZExpbmtJbmRleC5jdXJyZW50ICsgMSA+PSBsaW5rcy5sZW5ndGgpIHtcbiAgICAgICAgICAgIGZvY3VzZWRMaW5rSW5kZXguY3VycmVudCA9IDBcbiAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgZm9jdXNlZExpbmtJbmRleC5jdXJyZW50ICs9IDFcbiAgICAgICAgICB9XG4gICAgICAgICAgbGlua3NbZm9jdXNlZExpbmtJbmRleC5jdXJyZW50XT8uZm9jdXMoKVxuICAgICAgICB9XG4gICAgICB9XG4gICAgfVxuXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2tleXVwJywgaGFuZGxlTmF2aWdhdGlvbilcblxuICAgICAgcmV0dXJuICgpID0+IGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2tleXVwJywgaGFuZGxlTmF2aWdhdGlvbilcbiAgICB9LCBbXSlcblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICByZXNpemVTZWFyY2hCYXIoKVxuXG4gICAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcigncmVzaXplJywgcmVzaXplU2VhcmNoQmFyKVxuXG4gICAgICByZXR1cm4gKCkgPT4gd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIHJlc2l6ZVNlYXJjaEJhcilcbiAgICB9LCBbXSlcblxuICAgIGNvbnN0IG9uU2VhcmNoQ2FsbGJhY2sgPSAodmFsdWU6IHN0cmluZykgPT4ge1xuICAgICAgc2V0U2VhcmNoVGVybXModmFsdWUpXG5cbiAgICAgIHRyeSB7XG4gICAgICAgIG9uU2VhcmNoKHZhbHVlKVxuICAgICAgICBpZiAodmFsdWUubGVuZ3RoID49IHRocmVzaG9sZCAmJiAhaXNPcGVuKSB7XG4gICAgICAgICAgdG9nZ2xlSXNPcGVuKClcbiAgICAgICAgfVxuICAgICAgfSBjYXRjaCB7XG4gICAgICAgIHRvZ2dsZUlzT3BlbigpXG4gICAgICB9XG4gICAgfVxuXG4gICAgY29uc3Qgb25DbG9zZUNhbGxiYWNrID0gKCkgPT4ge1xuICAgICAgb25DbG9zZT8uKClcbiAgICAgIGlmIChpc09wZW4pIHtcbiAgICAgICAgdG9nZ2xlSXNPcGVuKClcbiAgICAgIH1cbiAgICB9XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGRpdj5cbiAgICAgICAgPFN0eWxlZFBvcHVwXG4gICAgICAgICAgZGF0YS10ZXN0aWQ9e2Bwb3B1cC0ke2RhdGFUZXN0SWR9YH1cbiAgICAgICAgICByb2xlPVwiZGlhbG9nXCJcbiAgICAgICAgICB2aXNpYmxlPXtpc09wZW59XG4gICAgICAgICAgb25DbG9zZT17b25DbG9zZUNhbGxiYWNrfVxuICAgICAgICAgIHBsYWNlbWVudD17cG9wdXBQbGFjZW1lbnR9XG4gICAgICAgICAgbWF4V2lkdGg9e2NvbnRhaW5lcldpZHRofVxuICAgICAgICAgIGhpZGVPbkNsaWNrT3V0c2lkZVxuICAgICAgICAgIGhhc0Fycm93PXtmYWxzZX1cbiAgICAgICAgICBpbm5lclJlZj17cG9wdXBSZWZ9XG4gICAgICAgICAgdGV4dD17Y29udGVudH1cbiAgICAgICAgICBtYXhIZWlnaHQ9ezQxMH1cbiAgICAgICAgICBkZWJvdW5jZURlbGF5PXswfVxuICAgICAgICA+XG4gICAgICAgICAgPFRleHRJbnB1dFYyXG4gICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgIHByZWZpeD17PEljb24gbmFtZT1cInNlYXJjaFwiIC8+fVxuICAgICAgICAgICAgc3VmZml4PXtzdWZmaXh9XG4gICAgICAgICAgICBkYXRhLXRlc3RpZD17ZGF0YVRlc3RJZH1cbiAgICAgICAgICAgIHZhbHVlPXtzZWFyY2hUZXJtc31cbiAgICAgICAgICAgIHNpemU9e3NpemV9XG4gICAgICAgICAgICBsYWJlbD17bGFiZWx9XG4gICAgICAgICAgICBwbGFjZWhvbGRlcj17cGxhY2Vob2xkZXJ9XG4gICAgICAgICAgICBsb2FkaW5nPXtsb2FkaW5nfVxuICAgICAgICAgICAgb25DaGFuZ2U9e29uU2VhcmNoQ2FsbGJhY2t9XG4gICAgICAgICAgICBjbGVhcmFibGVcbiAgICAgICAgICAvPlxuICAgICAgICA8L1N0eWxlZFBvcHVwPlxuICAgICAgPC9kaXY+XG4gICAgKVxuICB9LFxuKVxuIl19 */"));
+const SearchInput = forwardRef(({
+  placeholder,
+  label,
+  loading,
+  size,
+  suffix,
+  popupPlacement,
+  threshold = 0,
+  children,
+  onSearch,
+  onClose,
+  "data-testid": dataTestId
+}, ref) => {
+  const focusedLinkIndex = useRef(0);
+  const popupRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [searchTerms, setSearchTerms] = useState("");
+  const [isOpen, toggleIsOpen] = useReducer((state) => !state, false);
+  const content = typeof children === "function" ? children({
+    searchTerms,
+    isOpen,
+    toggleIsOpen
+  }) : children;
+  const resizeSearchBar = () => {
+    if (popupRef.current) {
+      setContainerWidth(popupRef.current.getBoundingClientRect().width);
+    }
+  };
+  const handleNavigation = (event) => {
+    const links = [...popupRef.current?.querySelectorAll("a") ?? []];
+    if (links.length > 0 && focusedLinkIndex.current >= 0 && focusedLinkIndex.current <= links.length) {
+      if (event.key === "ArrowUp") {
+        if (focusedLinkIndex.current - 1 < 0) {
+          focusedLinkIndex.current = links.length - 1;
+        } else {
+          focusedLinkIndex.current -= 1;
+        }
+        links[focusedLinkIndex.current]?.focus();
+      }
+      if (event.key === "ArrowDown") {
+        if (focusedLinkIndex.current + 1 >= links.length) {
+          focusedLinkIndex.current = 0;
+        } else {
+          focusedLinkIndex.current += 1;
+        }
+        links[focusedLinkIndex.current]?.focus();
+      }
+    }
+  };
+  useEffect(() => {
+    document.addEventListener("keyup", handleNavigation);
+    return () => document.removeEventListener("keyup", handleNavigation);
+  }, []);
+  useEffect(() => {
+    resizeSearchBar();
+    window.addEventListener("resize", resizeSearchBar);
+    return () => window.removeEventListener("resize", resizeSearchBar);
+  }, []);
+  const onSearchCallback = (value) => {
+    setSearchTerms(value);
+    try {
+      onSearch(value);
+      if (value.length >= threshold && !isOpen) {
+        toggleIsOpen();
+      }
+    } catch {
+      toggleIsOpen();
+    }
+  };
+  const onCloseCallback = () => {
+    onClose?.();
+    if (isOpen) {
+      toggleIsOpen();
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(StyledPopup, { "data-testid": `popup-${dataTestId}`, role: "dialog", visible: isOpen, onClose: onCloseCallback, placement: popupPlacement, maxWidth: containerWidth, hideOnClickOutside: true, hasArrow: false, innerRef: popupRef, text: content, maxHeight: 410, debounceDelay: 0, children: /* @__PURE__ */ jsx(TextInputV2, { ref, prefix: /* @__PURE__ */ jsx(Icon, { name: "search" }), suffix, "data-testid": dataTestId, value: searchTerms, size, label, placeholder, loading, onChange: onSearchCallback, clearable: true }) }) });
+});
+export {
+  SearchInput
+};

package/dist/components/SearchInput/types.d.ts

@@ -0,0 +1,17 @@
+import type { Popup, TextInputV2 } from '@ultraviolet/ui';
+import type { ComponentProps, DispatchWithoutAction, ReactNode } from 'react';
+type ChildrenProps = {
+    searchTerms: string;
+    isOpen: boolean;
+    toggleIsOpen: DispatchWithoutAction;
+};
+export type SearchBarChildrenFunctionProps = ({ searchTerms, isOpen, toggleIsOpen, }: ChildrenProps) => ReactNode;
+export type SearchInputProps = {
+    popupPlacement?: ComponentProps<typeof Popup>['placement'];
+    threshold?: number;
+    children: SearchBarChildrenFunctionProps | ReactNode;
+    onSearch: (value: string) => void;
+    onClose?: () => void;
+    ['data-testid']?: string;
+} & Pick<ComponentProps<typeof TextInputV2>, 'placeholder' | 'size' | 'label' | 'loading' | 'suffix'>;
+export {};

package/dist/components/SelectInput/index.cjs

@@ -29,10 +29,8 @@ const getControlColor = ({
   error,
   theme
 }) => {
-  if (state.isDisabled)
-    return theme.colors.neutral.textDisabled;
-  if (error)
-    return theme.colors.danger.text;
+  if (state.isDisabled) return theme.colors.neutral.textDisabled;
+  if (error) return theme.colors.danger.text;
   return theme.colors.neutral.text;
 };
 const getPlaceholderColor = ({
@@ -40,10 +38,8 @@ const getPlaceholderColor = ({
   error,
   theme
 }) => {
-  if (state.isDisabled)
-    return theme.colors.neutral.textDisabled;
-  if (error)
-    return theme.colors.danger.text;
+  if (state.isDisabled) return theme.colors.neutral.textDisabled;
+  if (error) return theme.colors.danger.text;
   return theme.colors.neutral.textWeak;
 };
 const getOptionColor = ({

package/dist/components/SelectInput/index.js

@@ -23,10 +23,8 @@ const getControlColor = ({
   error,
   theme
 }) => {
-  if (state.isDisabled)
-    return theme.colors.neutral.textDisabled;
-  if (error)
-    return theme.colors.danger.text;
+  if (state.isDisabled) return theme.colors.neutral.textDisabled;
+  if (error) return theme.colors.danger.text;
   return theme.colors.neutral.text;
 };
 const getPlaceholderColor = ({
@@ -34,10 +32,8 @@ const getPlaceholderColor = ({
   error,
   theme
 }) => {
-  if (state.isDisabled)
-    return theme.colors.neutral.textDisabled;
-  if (error)
-    return theme.colors.danger.text;
+  if (state.isDisabled) return theme.colors.neutral.textDisabled;
+  if (error) return theme.colors.danger.text;
   return theme.colors.neutral.textWeak;
 };
 const getOptionColor = ({