@adamosuiteservices/ui 1.6.7 → 1.7.8

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;
@@ -75,70 +78,86 @@ type ComboboxRenderProps = {
     }) => 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;
 };

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

@@ -34,3 +34,7 @@ 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 WrappedOptions: Story;
+export declare const EnhancedEmptyState: Story;