@adamosuiteservices/ui 1.6.6 → 1.7.7

package/dist/components/ui/combobox/combobox.d.ts

@@ -51,19 +51,22 @@ type ComboboxClassNames = {
 /**
  * Render prop functions for customizing component rendering.
  * Each render prop receives relevant data and allows complete control over that part of the UI.
+ * All render props also receive an 'Original' component that renders the default implementation,
+ * allowing you to wrap or enhance the default behavior without reimplementing it.
  */
 type ComboboxRenderProps = {
     /**
      * Custom renderer for the entire trigger button.
+     * @param props.Original - Default trigger button component
      * @param props.open - Whether the popover is open
      * @param props.value - Current selected value(s)
      * @param props.displayText - Formatted display text for selected value(s)
      * @param props.placeholder - Placeholder text
      * @param props.hasValue - Whether any value is selected
      * @param props.icon - Optional icon component
-     * @param props.showIcon - Whether to show the icon
      */
     trigger?: (props: {
+        Original: ComponentType;
         open: boolean;
         value: string | string[];
         displayText: string | null;
@@ -72,74 +75,89 @@ type ComboboxRenderProps = {
         icon?: ComponentType<{
             className?: string;
         }>;
-        showIcon?: boolean;
     }) => ReactNode;
     /**
      * Custom renderer for the trigger dropdown icon.
+     * @param props.Original - Default chevron icon component
      * @param props.open - Whether the popover is open
      */
     triggerIcon?: (props: {
+        Original: ComponentType;
         open: boolean;
     }) => ReactNode;
     /**
      * Custom renderer for the placeholder text.
+     * @param props.Original - Default placeholder component
      * @param props.text - The placeholder text
      * @param props.hasValue - Whether any value is selected
      */
     placeholder?: (props: {
+        Original: ComponentType;
         text: string;
         hasValue: boolean;
     }) => ReactNode;
     /**
      * Custom renderer for displaying selected value(s).
+     * @param props.Original - Default display value component
      * @param props.text - Formatted display text
      * @param props.value - Current selected value(s)
      */
     displayValue?: (props: {
+        Original: ComponentType;
         text: string | null;
         value: string | string[];
     }) => ReactNode;
     /**
      * Custom renderer for an entire option item.
+     * @param props.Original - Default option item component
      * @param props.option - The option data
      * @param props.isSelected - Whether this option is currently selected
      * @param props.selectedFeedback - Type of selection feedback ("checkbox" or "check")
      */
     option?: (props: {
+        Original: ComponentType;
         option: ComboboxOption;
         isSelected: boolean;
         selectedFeedback: "checkbox" | "check";
     }) => ReactNode;
     /**
      * Custom renderer for just the option label text.
+     * @param props.Original - Default option label component
      * @param props.option - The option data
      */
     optionLabel?: (props: {
+        Original: ComponentType;
         option: ComboboxOption;
     }) => ReactNode;
     /**
      * Custom renderer for the selection feedback indicator (checkbox or check).
+     * @param props.Original - Default feedback indicator component
      * @param props.option - The option data
      * @param props.isSelected - Whether this option is currently selected
      * @param props.type - Type of feedback indicator
      */
     selectedFeedback?: (props: {
+        Original: ComponentType;
         option: ComboboxOption;
         isSelected: boolean;
         type: "checkbox" | "check";
     }) => ReactNode;
     /**
      * Custom renderer for the empty state when no options match.
+     * @param props.Original - Default empty state component
      * @param props.text - The "no items found" message
      */
     empty?: (props: {
+        Original: ComponentType;
         text: string;
     }) => ReactNode;
     /**
      * Custom renderer for the search input field.
+     * @param props.Original - Default search input component
      * @param props.placeholder - Placeholder text for the search input
      */
     searchInput?: (props: {
+        Original: ComponentType;
         placeholder: string;
     }) => ReactNode;
 };
@@ -155,8 +173,6 @@ type ComboboxProps = Readonly<{
     icon?: ComponentType<{
         className?: string;
     }>;
-    /** Whether to show the icon in the trigger */
-    showIcon?: boolean;
     /** Controlled value for the combobox. Can be a single value or array of values for multiple selection. */
     value?: string | string[];
     /** Callback fired when the selected value changes */
@@ -171,6 +187,8 @@ type ComboboxProps = Readonly<{
     selectedFeedback?: "checkbox" | "check";
     /** Always show the placeholder text even when a value is selected. When enabled, both placeholder and value are displayed. */
     alwaysShowPlaceholder?: boolean;
+    /** Position where the selected value is displayed when alwaysShowPlaceholder is true ("left" next to placeholder or "right" next to trigger icon) */
+    valuePosition?: "left" | "right";
     /** Render prop functions for customizing component rendering */
     renders?: ComboboxRenderProps;
 }>;
@@ -227,5 +245,5 @@ type ComboboxProps = Readonly<{
  * />
  * ```
  */
-declare function Combobox({ searchable, multiple, icon: Icon, showIcon, value: controlledValue, onValueChange, labels, options, classNames, selectedFeedback, alwaysShowPlaceholder, renders, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+declare function Combobox({ searchable, multiple, icon: Icon, value: controlledValue, onValueChange, labels, options, classNames, selectedFeedback, alwaysShowPlaceholder, valuePosition, renders, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
 export { Combobox };

package/dist/components/ui/combobox/combobox.stories.d.ts

@@ -33,3 +33,9 @@ export declare const CustomTrigger: Story;
 export declare const CustomEmptyState: Story;
 export declare const CustomSelectedFeedback: Story;
 export declare const WithIconAndPlaceholder: Story;
+export declare const ValuePositionLeft: Story;
+export declare const WrappedTrigger: Story;
+export declare const EnhancedDisplayValue: Story;
+export declare const ConditionalFallback: Story;
+export declare const WrappedOptions: Story;
+export declare const EnhancedEmptyState: Story;