periplo-ui 4.4.1 → 4.4.2

package/dist/components/Combobox/Combobox.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { X } from '@phosphor-icons/react/dist/ssr/X';
 import { useRef, useEffect } from 'react';
 import { cn } from '../../lib/utils.js';
 import { Command, CommandInput } from '../Command/Command.js';
@@ -63,40 +64,59 @@ const Combobox = (props) => {
   const hasMultipleRenderLabel = !!(multiple && "renderLabel" in props && props.renderLabel);
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-1", children: [
     /* @__PURE__ */ jsxs(PopoverRoot, { open, onOpenChange: setOpen, modal, children: [
-      /* @__PURE__ */ jsx(
-        PopoverTrigger,
+      /* @__PURE__ */ jsxs(
+        "div",
         {
-          asChild: true,
-          onPointerDown: (event) => {
-            event.stopPropagation();
-            if (open) {
-              setOpen(false);
-              event.preventDefault();
-            } else {
-              setOpen(true);
-            }
-          },
-          onClick: (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-          },
-          children: /* @__PURE__ */ jsx(
-            ComboboxTrigger,
-            {
-              id,
-              disabled,
-              open,
-              error,
-              hasValue,
-              showClearButton,
-              showClearIcon: !!onClear,
-              isMultilineLabel: hasMultipleRenderLabel,
-              displayValue,
-              className,
-              onHoverChange: setIsHovered,
-              onClear: handleClear
-            }
-          )
+          className: cn("relative", className),
+          onMouseEnter: () => setIsHovered(true),
+          onMouseLeave: () => setIsHovered(false),
+          children: [
+            /* @__PURE__ */ jsx(
+              PopoverTrigger,
+              {
+                asChild: true,
+                onPointerDown: (event) => {
+                  event.stopPropagation();
+                  if (open) {
+                    setOpen(false);
+                    event.preventDefault();
+                  } else {
+                    setOpen(true);
+                  }
+                },
+                onClick: (event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                },
+                children: /* @__PURE__ */ jsx(
+                  ComboboxTrigger,
+                  {
+                    id,
+                    disabled,
+                    open,
+                    error,
+                    hasValue,
+                    showClearButton,
+                    isMultilineLabel: hasMultipleRenderLabel,
+                    displayValue,
+                    className: "w-full"
+                  }
+                )
+              }
+            ),
+            !!onClear && hasValue && /* @__PURE__ */ jsx(
+              X,
+              {
+                "data-testid": "clear-button",
+                className: cn(
+                  "absolute right-4 top-1/2 z-10 h-4 w-4 -translate-y-1/2 cursor-pointer transition-opacity duration-150",
+                  showClearButton ? "opacity-100 hover:opacity-70" : "opacity-0"
+                ),
+                onPointerDown: (event) => event.stopPropagation(),
+                onClick: handleClear
+              }
+            )
+          ]
         }
       ),
       /* @__PURE__ */ jsx(

package/dist/components/Combobox/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nimport { cn } from '../../lib/utils'\nimport { Command, CommandInput } from '../Command'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\n\nimport { ComboboxTrigger } from './ComboboxTrigger'\nimport { StaticComboboxList } from './StaticComboboxList'\nimport { useCombobox } from './useCombobox'\nimport { VirtualizedComboboxList } from './VirtualizedComboboxList'\n\ntype ComboboxBaseProps<T> = {\n  /** Unique identifier for the combobox */\n  id?: string\n  /** Array of options to display in the combobox (static mode). */\n  options?: Array<T>\n  /** Function to get the unique identifier from an option. */\n  getOptionValue: (option: T) => string\n  /** Function to get the display text from an option. */\n  getOptionLabel: (option: T) => string\n  /** Custom render function for options. If not provided, defaults to showing a checkmark and label */\n  renderOption?: (option: T, isSelected: boolean) => React.ReactNode\n  /** Placeholder text shown when no option is selected */\n  placeholder?: string\n  /** Placeholder text for the search input field */\n  searchPlaceholder?: string\n  /** Message shown when no options match the search query */\n  emptyMessage?: string\n  /** Additional CSS classes to apply to the combobox trigger */\n  className?: string\n  /** Additional CSS classes to apply to the popover content */\n  contentClassName?: string\n  /** Whether the combobox is disabled */\n  disabled?: boolean\n  /** Maximum height of the options list. Can be any valid CSS height value */\n  maxHeight?: string | number\n  /** Whether to close the dropdown when an option is selected. Defaults to `true` for single select and `false` for multi-select. */\n  closeOnSelect?: boolean\n  /** Whether the combobox is in a loading state */\n  loading?: boolean\n  /** Message to show when in loading state */\n  loadingPlaceholder?: string\n  /** Whether the combobox has an error */\n  error?: boolean | string\n  /** Custom function to filter options based on search term (static mode only) */\n  filterOptions?: (options: Array<T>, searchTerm: string) => Array<T>\n  /** Callback function executed when the clear button is clicked. When provided, an X button will appear on hover to clear the selection. */\n  onClear?: boolean | (() => void)\n  /** Whether the selection can be cleared */\n  clearable?: boolean\n  /** Whether the combobox is inside a modal */\n  modal?: boolean\n  /** Placeholder text for the selected multiple options */\n  selectedMultiplePlaceholder?: string\n  /** Placeholder text for the multiple options */\n  multipleOptionsPlaceholder?: string\n  /** Special options that appear at the top with their own title. When selected, the combobox switches to single-select mode. */\n  specialOptions?: Array<T>\n  /** Title for the special options group */\n  specialOptionsTitle?: string\n  /** Container element to position the combobox relative to. */\n  container?: HTMLElement\n  /** Alignment of the dropdown relative to the trigger. Defaults to 'center'. */\n  align?: 'start' | 'center' | 'end'\n  /** Auto-focus the search input when the dropdown opens. */\n  onOpenAutoFocus?: boolean\n}\n\nexport type ComboboxSingleProps<T> = ComboboxBaseProps<T> & {\n  virtualized?: false\n  multiple?: false\n  value?: string\n  onChange: (value: string) => void\n  /** Custom render function for the selected value display. */\n  renderLabel?: (selectedOption: T) => React.ReactNode\n}\n\nexport type ComboboxMultipleProps<T> = ComboboxBaseProps<T> & {\n  virtualized?: false\n  multiple: true\n  value?: Array<string>\n  onChange: (value: Array<string>) => void\n  /** Custom render function for the selected value(s) display. */\n  renderLabel?: (selectedOptions: Array<T>, onRemove: (value: string) => void) => React.ReactNode\n}\n\nexport type ComboboxVirtualizedProps<T> = ComboboxBaseProps<T> & {\n  virtualized: true\n  multiple?: false\n  value?: string\n  onChange: (value: string) => void\n  /** Custom render function for the selected value display. */\n  renderLabel?: (selectedOption: T) => React.ReactNode\n  /** The accumulated, flattened list of loaded items. */\n  items: Array<T>\n  /** The resolved selected item, fetched independently of the list. Used for the trigger label. */\n  selectedItem?: T\n  /** Whether more pages can be loaded. */\n  hasNextPage: boolean\n  /** Whether the next page is currently being fetched. */\n  isFetchingNextPage: boolean\n  /** Request the next page (triggered near the end of the list). */\n  onLoadMore: () => void\n  /** Emitted (debounced) when the search term changes. The consumer refetches. */\n  onSearchChange: (search: string) => void\n}\n\nexport type ComboboxProps<T> = ComboboxSingleProps<T> | ComboboxMultipleProps<T> | ComboboxVirtualizedProps<T>\n\n/**\n * A searchable combobox component with support for custom rendering, keyboard navigation, and search filtering.\n *\n * @example Basic usage\n * ```tsx\n * <Combobox<User>\n *   options={users}\n *   value={selectedUserId}\n *   onChange={setSelectedUserId}\n *   getOptionValue={(user) => user.id}\n *   getOptionLabel={(user) => user.name}\n * />\n * ```\n */\nexport const Combobox = <T extends object>(props: ComboboxProps<T>) => {\n  const {\n    id,\n    options = [],\n    getOptionValue,\n    getOptionLabel,\n    searchPlaceholder = 'Search...',\n    emptyMessage = 'No results found.',\n    className = 'w-60',\n    contentClassName,\n    disabled = false,\n    maxHeight = '300px',\n    renderOption,\n    loading = false,\n    loadingPlaceholder = 'Cargando...',\n    error = false,\n    multiple,\n    onClear,\n    modal = false,\n    selectedMultiplePlaceholder = 'Selected',\n    multipleOptionsPlaceholder = 'Options',\n    specialOptions,\n    specialOptionsTitle,\n    container,\n    align,\n    onOpenAutoFocus = false,\n  } = props\n\n  const searchInputRef = useRef<HTMLInputElement>(null)\n\n  const normalizedMaxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight\n  const boundedListMaxHeight = `min(${normalizedMaxHeight}, max(120px, calc(var(--radix-popover-content-available-height, 100dvh) - 68px)))`\n\n  const {\n    open,\n    setOpen,\n    searchTerm,\n    setSearchTerm,\n    setIsHovered,\n    hasNextPage,\n    loadingMore,\n    isVirtualized,\n    filteredOptions,\n    displayValue,\n    hasValue,\n    showClearButton,\n    handleSelect,\n    handleClear,\n    loadNextPage,\n  } = useCombobox(props)\n\n  useEffect(() => {\n    if (!open || !onOpenAutoFocus) return\n    const timeoutId = globalThis.setTimeout(() => searchInputRef.current?.focus(), 0)\n    return () => globalThis.clearTimeout(timeoutId)\n  }, [open, onOpenAutoFocus])\n\n  const hasMultipleRenderLabel = !!(multiple && 'renderLabel' in props && props.renderLabel)\n\n  return (\n    <div className=\"flex w-full flex-col gap-1\">\n      <PopoverRoot open={open} onOpenChange={setOpen} modal={modal}>\n        <PopoverTrigger\n          asChild\n          onPointerDown={(event) => {\n            event.stopPropagation()\n            if (open) {\n              setOpen(false)\n              event.preventDefault()\n            } else {\n              setOpen(true)\n            }\n          }}\n          onClick={(event) => {\n            event.preventDefault()\n            event.stopPropagation()\n          }}\n        >\n          <ComboboxTrigger\n            id={id}\n            disabled={disabled}\n            open={open}\n            error={error}\n            hasValue={hasValue}\n            showClearButton={showClearButton}\n            showClearIcon={!!onClear}\n            isMultilineLabel={hasMultipleRenderLabel}\n            displayValue={displayValue}\n            className={className}\n            onHoverChange={setIsHovered}\n            onClear={handleClear}\n          />\n        </PopoverTrigger>\n        <PopoverContent\n          className={cn('overflow-hidden p-0', contentClassName)}\n          container={container}\n          side=\"bottom\"\n          align={align}\n          onOpenAutoFocus={onOpenAutoFocus ? (event) => event.preventDefault() : undefined}\n        >\n          <Command shouldFilter={false}>\n            <CommandInput\n              ref={searchInputRef}\n              placeholder={searchPlaceholder}\n              disabled={loading}\n              value={searchTerm}\n              onValueChange={setSearchTerm}\n            />\n            {isVirtualized ? (\n              <VirtualizedComboboxList\n                localOptions={filteredOptions}\n                loading={loading}\n                loadingPlaceholder={loadingPlaceholder}\n                emptyMessage={emptyMessage}\n                value={props.value as string}\n                getOptionValue={getOptionValue}\n                getOptionLabel={getOptionLabel}\n                handleSelect={handleSelect}\n                renderOption={renderOption}\n                maxHeight={boundedListMaxHeight}\n                hasNextPage={hasNextPage}\n                loadingMore={loadingMore}\n                onLoadMore={loadNextPage}\n              />\n            ) : (\n              <StaticComboboxList\n                filteredOptions={filteredOptions}\n                loading={loading}\n                loadingPlaceholder={loadingPlaceholder}\n                emptyMessage={emptyMessage}\n                multiple={!!multiple}\n                value={props.value}\n                getOptionValue={getOptionValue}\n                getOptionLabel={getOptionLabel}\n                handleSelect={handleSelect}\n                renderOption={renderOption}\n                maxHeight={boundedListMaxHeight}\n                selectedMultiplePlaceholder={selectedMultiplePlaceholder}\n                multipleOptionsPlaceholder={multipleOptionsPlaceholder}\n                options={options}\n                specialOptions={specialOptions}\n                specialOptionsTitle={specialOptionsTitle}\n              />\n            )}\n          </Command>\n        </PopoverContent>\n      </PopoverRoot>\n      {typeof error === 'string' && <span className=\"text-error-500 text-sm\">{error}</span>}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { X } from '@phosphor-icons/react/dist/ssr/X'\nimport { useEffect, useRef } from 'react'\n\nimport { cn } from '../../lib/utils'\nimport { Command, CommandInput } from '../Command'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\n\nimport { ComboboxTrigger } from './ComboboxTrigger'\nimport { StaticComboboxList } from './StaticComboboxList'\nimport { useCombobox } from './useCombobox'\nimport { VirtualizedComboboxList } from './VirtualizedComboboxList'\n\ntype ComboboxBaseProps<T> = {\n  /** Unique identifier for the combobox */\n  id?: string\n  /** Array of options to display in the combobox (static mode). */\n  options?: Array<T>\n  /** Function to get the unique identifier from an option. */\n  getOptionValue: (option: T) => string\n  /** Function to get the display text from an option. */\n  getOptionLabel: (option: T) => string\n  /** Custom render function for options. If not provided, defaults to showing a checkmark and label */\n  renderOption?: (option: T, isSelected: boolean) => React.ReactNode\n  /** Placeholder text shown when no option is selected */\n  placeholder?: string\n  /** Placeholder text for the search input field */\n  searchPlaceholder?: string\n  /** Message shown when no options match the search query */\n  emptyMessage?: string\n  /** Additional CSS classes to apply to the combobox trigger */\n  className?: string\n  /** Additional CSS classes to apply to the popover content */\n  contentClassName?: string\n  /** Whether the combobox is disabled */\n  disabled?: boolean\n  /** Maximum height of the options list. Can be any valid CSS height value */\n  maxHeight?: string | number\n  /** Whether to close the dropdown when an option is selected. Defaults to `true` for single select and `false` for multi-select. */\n  closeOnSelect?: boolean\n  /** Whether the combobox is in a loading state */\n  loading?: boolean\n  /** Message to show when in loading state */\n  loadingPlaceholder?: string\n  /** Whether the combobox has an error */\n  error?: boolean | string\n  /** Custom function to filter options based on search term (static mode only) */\n  filterOptions?: (options: Array<T>, searchTerm: string) => Array<T>\n  /** Callback function executed when the clear button is clicked. When provided, an X button will appear on hover to clear the selection. */\n  onClear?: boolean | (() => void)\n  /** Whether the selection can be cleared */\n  clearable?: boolean\n  /** Whether the combobox is inside a modal */\n  modal?: boolean\n  /** Placeholder text for the selected multiple options */\n  selectedMultiplePlaceholder?: string\n  /** Placeholder text for the multiple options */\n  multipleOptionsPlaceholder?: string\n  /** Special options that appear at the top with their own title. When selected, the combobox switches to single-select mode. */\n  specialOptions?: Array<T>\n  /** Title for the special options group */\n  specialOptionsTitle?: string\n  /** Container element to position the combobox relative to. */\n  container?: HTMLElement\n  /** Alignment of the dropdown relative to the trigger. Defaults to 'center'. */\n  align?: 'start' | 'center' | 'end'\n  /** Auto-focus the search input when the dropdown opens. */\n  onOpenAutoFocus?: boolean\n}\n\nexport type ComboboxSingleProps<T> = ComboboxBaseProps<T> & {\n  virtualized?: false\n  multiple?: false\n  value?: string\n  onChange: (value: string) => void\n  /** Custom render function for the selected value display. */\n  renderLabel?: (selectedOption: T) => React.ReactNode\n}\n\nexport type ComboboxMultipleProps<T> = ComboboxBaseProps<T> & {\n  virtualized?: false\n  multiple: true\n  value?: Array<string>\n  onChange: (value: Array<string>) => void\n  /** Custom render function for the selected value(s) display. */\n  renderLabel?: (selectedOptions: Array<T>, onRemove: (value: string) => void) => React.ReactNode\n}\n\nexport type ComboboxVirtualizedProps<T> = ComboboxBaseProps<T> & {\n  virtualized: true\n  multiple?: false\n  value?: string\n  onChange: (value: string) => void\n  /** Custom render function for the selected value display. */\n  renderLabel?: (selectedOption: T) => React.ReactNode\n  /** The accumulated, flattened list of loaded items. */\n  items: Array<T>\n  /** The resolved selected item, fetched independently of the list. Used for the trigger label. */\n  selectedItem?: T\n  /** Whether more pages can be loaded. */\n  hasNextPage: boolean\n  /** Whether the next page is currently being fetched. */\n  isFetchingNextPage: boolean\n  /** Request the next page (triggered near the end of the list). */\n  onLoadMore: () => void\n  /** Emitted (debounced) when the search term changes. The consumer refetches. */\n  onSearchChange: (search: string) => void\n}\n\nexport type ComboboxProps<T> = ComboboxSingleProps<T> | ComboboxMultipleProps<T> | ComboboxVirtualizedProps<T>\n\n/**\n * A searchable combobox component with support for custom rendering, keyboard navigation, and search filtering.\n *\n * @example Basic usage\n * ```tsx\n * <Combobox<User>\n *   options={users}\n *   value={selectedUserId}\n *   onChange={setSelectedUserId}\n *   getOptionValue={(user) => user.id}\n *   getOptionLabel={(user) => user.name}\n * />\n * ```\n */\nexport const Combobox = <T extends object>(props: ComboboxProps<T>) => {\n  const {\n    id,\n    options = [],\n    getOptionValue,\n    getOptionLabel,\n    searchPlaceholder = 'Search...',\n    emptyMessage = 'No results found.',\n    className = 'w-60',\n    contentClassName,\n    disabled = false,\n    maxHeight = '300px',\n    renderOption,\n    loading = false,\n    loadingPlaceholder = 'Cargando...',\n    error = false,\n    multiple,\n    onClear,\n    modal = false,\n    selectedMultiplePlaceholder = 'Selected',\n    multipleOptionsPlaceholder = 'Options',\n    specialOptions,\n    specialOptionsTitle,\n    container,\n    align,\n    onOpenAutoFocus = false,\n  } = props\n\n  const searchInputRef = useRef<HTMLInputElement>(null)\n\n  const normalizedMaxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight\n  const boundedListMaxHeight = `min(${normalizedMaxHeight}, max(120px, calc(var(--radix-popover-content-available-height, 100dvh) - 68px)))`\n\n  const {\n    open,\n    setOpen,\n    searchTerm,\n    setSearchTerm,\n    setIsHovered,\n    hasNextPage,\n    loadingMore,\n    isVirtualized,\n    filteredOptions,\n    displayValue,\n    hasValue,\n    showClearButton,\n    handleSelect,\n    handleClear,\n    loadNextPage,\n  } = useCombobox(props)\n\n  useEffect(() => {\n    if (!open || !onOpenAutoFocus) return\n    const timeoutId = globalThis.setTimeout(() => searchInputRef.current?.focus(), 0)\n    return () => globalThis.clearTimeout(timeoutId)\n  }, [open, onOpenAutoFocus])\n\n  const hasMultipleRenderLabel = !!(multiple && 'renderLabel' in props && props.renderLabel)\n\n  return (\n    <div className=\"flex w-full flex-col gap-1\">\n      <PopoverRoot open={open} onOpenChange={setOpen} modal={modal}>\n        <div\n          className={cn('relative', className)}\n          onMouseEnter={() => setIsHovered(true)}\n          onMouseLeave={() => setIsHovered(false)}\n        >\n          <PopoverTrigger\n            asChild\n            onPointerDown={(event) => {\n              event.stopPropagation()\n              if (open) {\n                setOpen(false)\n                event.preventDefault()\n              } else {\n                setOpen(true)\n              }\n            }}\n            onClick={(event) => {\n              event.preventDefault()\n              event.stopPropagation()\n            }}\n          >\n            <ComboboxTrigger\n              id={id}\n              disabled={disabled}\n              open={open}\n              error={error}\n              hasValue={hasValue}\n              showClearButton={showClearButton}\n              isMultilineLabel={hasMultipleRenderLabel}\n              displayValue={displayValue}\n              className=\"w-full\"\n            />\n          </PopoverTrigger>\n          {!!onClear && hasValue && (\n            <X\n              data-testid=\"clear-button\"\n              className={cn(\n                'absolute right-4 top-1/2 z-10 h-4 w-4 -translate-y-1/2 cursor-pointer transition-opacity duration-150',\n                showClearButton ? 'opacity-100 hover:opacity-70' : 'opacity-0',\n              )}\n              onPointerDown={(event) => event.stopPropagation()}\n              onClick={handleClear}\n            />\n          )}\n        </div>\n        <PopoverContent\n          className={cn('overflow-hidden p-0', contentClassName)}\n          container={container}\n          side=\"bottom\"\n          align={align}\n          onOpenAutoFocus={onOpenAutoFocus ? (event) => event.preventDefault() : undefined}\n        >\n          <Command shouldFilter={false}>\n            <CommandInput\n              ref={searchInputRef}\n              placeholder={searchPlaceholder}\n              disabled={loading}\n              value={searchTerm}\n              onValueChange={setSearchTerm}\n            />\n            {isVirtualized ? (\n              <VirtualizedComboboxList\n                localOptions={filteredOptions}\n                loading={loading}\n                loadingPlaceholder={loadingPlaceholder}\n                emptyMessage={emptyMessage}\n                value={props.value as string}\n                getOptionValue={getOptionValue}\n                getOptionLabel={getOptionLabel}\n                handleSelect={handleSelect}\n                renderOption={renderOption}\n                maxHeight={boundedListMaxHeight}\n                hasNextPage={hasNextPage}\n                loadingMore={loadingMore}\n                onLoadMore={loadNextPage}\n              />\n            ) : (\n              <StaticComboboxList\n                filteredOptions={filteredOptions}\n                loading={loading}\n                loadingPlaceholder={loadingPlaceholder}\n                emptyMessage={emptyMessage}\n                multiple={!!multiple}\n                value={props.value}\n                getOptionValue={getOptionValue}\n                getOptionLabel={getOptionLabel}\n                handleSelect={handleSelect}\n                renderOption={renderOption}\n                maxHeight={boundedListMaxHeight}\n                selectedMultiplePlaceholder={selectedMultiplePlaceholder}\n                multipleOptionsPlaceholder={multipleOptionsPlaceholder}\n                options={options}\n                specialOptions={specialOptions}\n                specialOptionsTitle={specialOptionsTitle}\n              />\n            )}\n          </Command>\n        </PopoverContent>\n      </PopoverRoot>\n      {typeof error === 'string' && <span className=\"text-error-500 text-sm\">{error}</span>}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Combobox/ComboboxTrigger.d.ts

@@ -5,10 +5,7 @@ export declare const ComboboxTrigger: import('react').ForwardRefExoticComponent<
     error?: boolean | string;
     hasValue: boolean;
     showClearButton: unknown;
-    showClearIcon: boolean;
     isMultilineLabel: boolean;
     displayValue: React.ReactNode;
     className?: string;
-    onHoverChange: (hovered: boolean) => void;
-    onClear: (event: React.MouseEvent) => void;
 }> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Combobox/ComboboxTrigger.js

@@ -1,26 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { CaretDown } from '@phosphor-icons/react/dist/ssr/CaretDown';
-import { X } from '@phosphor-icons/react/dist/ssr/X';
 import { forwardRef } from 'react';
 import { cn } from '../../lib/utils.js';
 import { Button, buttonVariants } from '../Button/Button.js';
 
 const ComboboxTrigger = forwardRef(
-  ({
-    id,
-    disabled,
-    open,
-    error,
-    hasValue,
-    showClearButton,
-    showClearIcon,
-    isMultilineLabel,
-    displayValue,
-    className,
-    onHoverChange,
-    onClear,
-    ...rest
-  }, ref) => /* @__PURE__ */ jsxs(
+  ({ id, disabled, open, error, hasValue, showClearButton, isMultilineLabel, displayValue, className, ...rest }, ref) => /* @__PURE__ */ jsxs(
     Button,
     {
       ref,
@@ -39,30 +24,17 @@ const ComboboxTrigger = forwardRef(
       ),
       "aria-expanded": open,
       "aria-haspopup": "listbox",
-      onMouseEnter: () => onHoverChange(true),
-      onMouseLeave: () => onHoverChange(false),
       ...rest,
       children: [
-        /* @__PURE__ */ jsx("span", { className: cn("block", !hasValue && "text-neutral-300", !isMultilineLabel && "truncate"), children: displayValue }),
+        /* @__PURE__ */ jsx("span", { className: cn("block pr-2", !hasValue && "text-neutral-300", !isMultilineLabel && "truncate"), children: displayValue }),
         /* @__PURE__ */ jsx(
           CaretDown,
           {
             className: cn(
-              "h-4 w-4 shrink-0 opacity-50 transition-opacity duration-150",
+              "absolute right-4 h-4 w-4 shrink-0 transition-opacity duration-150",
               showClearButton ? "opacity-0" : "opacity-50"
             )
           }
-        ),
-        showClearIcon && hasValue && /* @__PURE__ */ jsx(
-          X,
-          {
-            "data-testid": "clear-button",
-            className: cn(
-              "absolute right-4 z-10 h-4 w-4 shrink-0 cursor-pointer transition-opacity duration-150",
-              showClearButton ? "opacity-100 hover:opacity-70" : "opacity-0"
-            ),
-            onClick: onClear
-          }
         )
       ]
     }

package/dist/components/Combobox/ComboboxTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxTrigger.js","sources":["../../../src/components/Combobox/ComboboxTrigger.tsx"],"sourcesContent":["import { CaretDown } from '@phosphor-icons/react/dist/ssr/CaretDown'\nimport { X } from '@phosphor-icons/react/dist/ssr/X'\nimport { forwardRef } from 'react'\n\nimport { cn } from '../../lib/utils'\nimport { Button, buttonVariants } from '../Button'\n\ntype ComboboxTriggerProps = Readonly<{\n  id?: string\n  disabled?: boolean\n  open: boolean\n  error?: boolean | string\n  hasValue: boolean\n  showClearButton: unknown\n  showClearIcon: boolean\n  isMultilineLabel: boolean\n  displayValue: React.ReactNode\n  className?: string\n  onHoverChange: (hovered: boolean) => void\n  onClear: (event: React.MouseEvent) => void\n}>\n\nexport const ComboboxTrigger = forwardRef<HTMLButtonElement, ComboboxTriggerProps>(\n  (\n    {\n      id,\n      disabled,\n      open,\n      error,\n      hasValue,\n      showClearButton,\n      showClearIcon,\n      isMultilineLabel,\n      displayValue,\n      className,\n      onHoverChange,\n      onClear,\n      ...rest\n    },\n    ref,\n  ) => (\n    <Button\n      ref={ref}\n      id={id}\n      type=\"button\"\n      disabled={disabled}\n      variant=\"text\"\n      className={cn(\n        buttonVariants({ variant: 'input', size: 'lg' }),\n        'relative flex justify-between rounded-lg',\n        isMultilineLabel ? 'h-auto min-h-12' : 'h-12',\n        open && 'border-neutral-950',\n        disabled && 'cursor-not-allowed',\n        error && 'border-error-400 focus-visible:border-error-700',\n        className,\n      )}\n      aria-expanded={open}\n      aria-haspopup=\"listbox\"\n      onMouseEnter={() => onHoverChange(true)}\n      onMouseLeave={() => onHoverChange(false)}\n      {...rest}\n    >\n      <span className={cn('block', !hasValue && 'text-neutral-300', !isMultilineLabel && 'truncate')}>\n        {displayValue}\n      </span>\n      <CaretDown\n        className={cn(\n          'h-4 w-4 shrink-0 opacity-50 transition-opacity duration-150',\n          showClearButton ? 'opacity-0' : 'opacity-50',\n        )}\n      />\n      {showClearIcon && hasValue && (\n        <X\n          data-testid=\"clear-button\"\n          className={cn(\n            'absolute right-4 z-10 h-4 w-4 shrink-0 cursor-pointer transition-opacity duration-150',\n            showClearButton ? 'opacity-100 hover:opacity-70' : 'opacity-0',\n          )}\n          onClick={onClear}\n        />\n      )}\n    </Button>\n  ),\n)\n\nComboboxTrigger.displayName = 'ComboboxTrigger'\n"],"names":[],"mappings":";;;;;;;AAsBO,MAAM,eAAA,GAAkB,UAAA;AAAA,EAC7B,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAA;AAAA,IACA,aAAA;AAAA,IACA,gBAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,qBAEA,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,EAAA;AAAA,MACA,IAAA,EAAK,QAAA;AAAA,MACL,QAAA;AAAA,MACA,OAAA,EAAQ,MAAA;AAAA,MACR,SAAA,EAAW,EAAA;AAAA,QACT,eAAe,EAAE,OAAA,EAAS,OAAA,EAAS,IAAA,EAAM,MAAM,CAAA;AAAA,QAC/C,0CAAA;AAAA,QACA,mBAAmB,iBAAA,GAAoB,MAAA;AAAA,QACvC,IAAA,IAAQ,oBAAA;AAAA,QACR,QAAA,IAAY,oBAAA;AAAA,QACZ,KAAA,IAAS,iDAAA;AAAA,QACT;AAAA,OACF;AAAA,MACA,eAAA,EAAe,IAAA;AAAA,MACf,eAAA,EAAc,SAAA;AAAA,MACd,YAAA,EAAc,MAAM,aAAA,CAAc,IAAI,CAAA;AAAA,MACtC,YAAA,EAAc,MAAM,aAAA,CAAc,KAAK,CAAA;AAAA,MACtC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,EAAA,CAAG,OAAA,EAAS,CAAC,QAAA,IAAY,kBAAA,EAAoB,CAAC,gBAAA,IAAoB,UAAU,CAAA,EAC1F,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,6DAAA;AAAA,cACA,kBAAkB,WAAA,GAAc;AAAA;AAClC;AAAA,SACF;AAAA,QACC,iBAAiB,QAAA,oBAChB,GAAA;AAAA,UAAC,CAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAY,cAAA;AAAA,YACZ,SAAA,EAAW,EAAA;AAAA,cACT,uFAAA;AAAA,cACA,kBAAkB,8BAAA,GAAiC;AAAA,aACrD;AAAA,YACA,OAAA,EAAS;AAAA;AAAA;AACX;AAAA;AAAA;AAIR;AAEA,eAAA,CAAgB,WAAA,GAAc,iBAAA;;;;"}
+{"version":3,"file":"ComboboxTrigger.js","sources":["../../../src/components/Combobox/ComboboxTrigger.tsx"],"sourcesContent":["import { CaretDown } from '@phosphor-icons/react/dist/ssr/CaretDown'\nimport { forwardRef } from 'react'\n\nimport { cn } from '../../lib/utils'\nimport { Button, buttonVariants } from '../Button'\n\ntype ComboboxTriggerProps = Readonly<{\n  id?: string\n  disabled?: boolean\n  open: boolean\n  error?: boolean | string\n  hasValue: boolean\n  showClearButton: unknown\n  isMultilineLabel: boolean\n  displayValue: React.ReactNode\n  className?: string\n}>\n\nexport const ComboboxTrigger = forwardRef<HTMLButtonElement, ComboboxTriggerProps>(\n  ({ id, disabled, open, error, hasValue, showClearButton, isMultilineLabel, displayValue, className, ...rest }, ref) => (\n    <Button\n      ref={ref}\n      id={id}\n      type=\"button\"\n      disabled={disabled}\n      variant=\"text\"\n      className={cn(\n        buttonVariants({ variant: 'input', size: 'lg' }),\n        'relative flex justify-between rounded-lg',\n        isMultilineLabel ? 'h-auto min-h-12' : 'h-12',\n        open && 'border-neutral-950',\n        disabled && 'cursor-not-allowed',\n        error && 'border-error-400 focus-visible:border-error-700',\n        className,\n      )}\n      aria-expanded={open}\n      aria-haspopup=\"listbox\"\n      {...rest}\n    >\n      <span className={cn('block pr-2', !hasValue && 'text-neutral-300', !isMultilineLabel && 'truncate')}>\n        {displayValue}\n      </span>\n      <CaretDown\n        className={cn(\n          'absolute right-4 h-4 w-4 shrink-0 transition-opacity duration-150',\n          showClearButton ? 'opacity-0' : 'opacity-50',\n        )}\n      />\n    </Button>\n  ),\n)\n\nComboboxTrigger.displayName = 'ComboboxTrigger'\n"],"names":[],"mappings":";;;;;;AAkBO,MAAM,eAAA,GAAkB,UAAA;AAAA,EAC7B,CAAC,EAAE,EAAA,EAAI,QAAA,EAAU,MAAM,KAAA,EAAO,QAAA,EAAU,eAAA,EAAiB,gBAAA,EAAkB,YAAA,EAAc,SAAA,EAAW,GAAG,IAAA,IAAQ,GAAA,qBAC7G,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,EAAA;AAAA,MACA,IAAA,EAAK,QAAA;AAAA,MACL,QAAA;AAAA,MACA,OAAA,EAAQ,MAAA;AAAA,MACR,SAAA,EAAW,EAAA;AAAA,QACT,eAAe,EAAE,OAAA,EAAS,OAAA,EAAS,IAAA,EAAM,MAAM,CAAA;AAAA,QAC/C,0CAAA;AAAA,QACA,mBAAmB,iBAAA,GAAoB,MAAA;AAAA,QACvC,IAAA,IAAQ,oBAAA;AAAA,QACR,QAAA,IAAY,oBAAA;AAAA,QACZ,KAAA,IAAS,iDAAA;AAAA,QACT;AAAA,OACF;AAAA,MACA,eAAA,EAAe,IAAA;AAAA,MACf,eAAA,EAAc,SAAA;AAAA,MACb,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,EAAA,CAAG,YAAA,EAAc,CAAC,QAAA,IAAY,kBAAA,EAAoB,CAAC,gBAAA,IAAoB,UAAU,CAAA,EAC/F,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,mEAAA;AAAA,cACA,kBAAkB,WAAA,GAAc;AAAA;AAClC;AAAA;AACF;AAAA;AAAA;AAGN;AAEA,eAAA,CAAgB,WAAA,GAAc,iBAAA;;;;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "periplo-ui",
   "description": "IATI UI library",
   "private": false,
-  "version": "4.4.1",
+  "version": "4.4.2",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",