@rarui/components 1.15.0 → 1.16.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 `@rarui/components` components is a component library built with [Lit](https://lit.dev/).
 
+## 2025-06-30 `1.16.0`
+
+#### 🎉 New features
+
+- Added new input `Dropdown` component. ([#124](https://git.rarolabs.com.br/frontend/rarui/-/merge_requests/124) by [@junior](https://git.rarolabs.com.br/junior))
+
 ## 2025-06-27 `1.15.0`
 
 #### 🎉 New features

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.14.0",
+  "version": "1.15.0",
   "tags": [
     {
       "name": "rarui-avatar",
@@ -2091,7 +2091,7 @@
         {
           "name": "position",
           "default": "bottom",
-          "description": "Position of the popover.\n\n- bottom\n- bottom-end\n- bottom-start\n- left\n- left-end\n- left-start\n- right\n- right-end\n- right-start\n- top\n- top-end\n- top-start",
+          "description": "Position of the tooltip.\n\n- bottom\n- bottom-end\n- bottom-start\n- left\n- left-end\n- left-start\n- right\n- right-end\n- right-start\n- top\n- top-end\n- top-start",
           "type": "string",
           "values": [
             {
@@ -2691,6 +2691,223 @@
         }
       ]
     },
+    {
+      "name": "rarui-dropdown",
+      "description": "## Rarui Dropdown\n---\nAn suspended menu displays a list of options on a temporary surface.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/dropdown) for more details.",
+      "attributes": [
+        {
+          "name": "padding",
+          "default": "base",
+          "description": "Specifies the padding inside the dropdown menu. This prop accepts one of the following values: \"base\" or \"none\".\n\n- base\n- none",
+          "type": "string",
+          "values": [
+            {
+              "name": "base",
+              "description": "(default)"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "width",
+          "description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"auto\",\n  \"md\": \"fit-content\",\n  \"lg\": \"intrinsic\",\n  \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "fit-content"
+            },
+            {
+              "name": "intrinsic"
+            },
+            {
+              "name": "max-content"
+            },
+            {
+              "name": "min-content"
+            },
+            {
+              "name": "min-intrinsic"
+            },
+            {
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "max-width",
+          "description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"fit-content\",\n  \"md\": \"intrinsic\",\n  \"lg\": \"max-content\",\n  \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
+          "values": [
+            {
+              "name": "fit-content"
+            },
+            {
+              "name": "intrinsic"
+            },
+            {
+              "name": "max-content"
+            },
+            {
+              "name": "min-content"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "stretch"
+            }
+          ]
+        },
+        {
+          "name": "match-reference-width",
+          "default": false,
+          "description": "A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents.",
+          "type": "boolean"
+        },
+        {
+          "name": "enabled-dismiss",
+          "default": true,
+          "description": "Adds listeners that dismiss (close) the floating element.",
+          "type": "boolean"
+        },
+        {
+          "name": "enabled-click",
+          "default": true,
+          "description": "Adds click event listeners that change the open state.",
+          "type": "boolean"
+        },
+        {
+          "name": "enabled-flip",
+          "default": true,
+          "description": "Determines whether the dropdown should enable flipping the options' dropdown when there is not enough space to display it in its default direction.\nThis can help ensure the dropdown is always visible on the screen.",
+          "type": "boolean"
+        },
+        {
+          "name": "offset",
+          "default": 10,
+          "description": "Offest displaces the floating element from its core placement along the specified axes.",
+          "type": "number"
+        },
+        {
+          "name": "visible",
+          "description": "If true, the component is shown.",
+          "type": "boolean"
+        },
+        {
+          "name": "z-index",
+          "description": "The zIndex property specifies the stack order of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$100\"`.\n\n Or an object like:\n \n ```\n{\n  \"xs\": \"$100\",\n  \"md\": \"$200\",\n  \"lg\": \"$300\",\n  \"xl\": \"$400\"\n}\n```\n\n- $100\n- $200\n- $300\n- $400\n- $500\n- $600\n- $700\n- $800\n- $900",
+          "values": [
+            {
+              "name": "$100"
+            },
+            {
+              "name": "$200"
+            },
+            {
+              "name": "$300"
+            },
+            {
+              "name": "$400"
+            },
+            {
+              "name": "$500"
+            },
+            {
+              "name": "$600"
+            },
+            {
+              "name": "$700"
+            },
+            {
+              "name": "$800"
+            },
+            {
+              "name": "$900"
+            }
+          ]
+        },
+        {
+          "name": "position",
+          "default": "bottom-start",
+          "description": "Position of the dropdown.\n\n- bottom\n- bottom-end\n- bottom-start\n- left\n- left-end\n- left-start\n- right\n- right-end\n- right-start\n- top\n- top-end\n- top-start",
+          "type": "string",
+          "values": [
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "bottom-end"
+            },
+            {
+              "name": "bottom-start",
+              "description": "(default)"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "left-end"
+            },
+            {
+              "name": "left-start"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "right-end"
+            },
+            {
+              "name": "right-start"
+            },
+            {
+              "name": "top"
+            },
+            {
+              "name": "top-end"
+            },
+            {
+              "name": "top-start"
+            }
+          ]
+        },
+        {
+          "name": "strategy",
+          "default": "fixed",
+          "description": "CSS positioning strategy used for the tooltip.\n\n- `\"fixed\"` (default) positions the tooltip relative to the viewport,\n  so it stays in the same place even when the page is scrolled.\n- `\"absolute\"` positions the tooltip relative to the nearest positioned ancestor,\n  which can be useful when you want the tooltip to move with page content.\n\nUse `\"fixed\"` for tooltips that should remain visible on scroll,\nand `\"absolute\"` when tooltips need to be positioned within scrollable containers.\n\n- absolute\n- fixed",
+          "type": "string",
+          "values": [
+            {
+              "name": "absolute"
+            },
+            {
+              "name": "fixed",
+              "description": "(default)"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "rarui-dropdown-item",
+      "description": "## Rarui Dropdown Item\n---\nAn suspended menu displays a list of options on a temporary surface.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/dropdown) for more details.",
+      "attributes": [
+        {
+          "name": "selected",
+          "default": false,
+          "description": "Indicates if the item is selected.\nThis affects the visual style, such as highlight or marking.",
+          "type": "boolean"
+        },
+        {
+          "name": "name",
+          "description": "The name of the dropdown item. This is typically the text that is displayed for the item.",
+          "type": "string"
+        }
+      ]
+    },
     {
       "name": "rarui-icon-button",
       "description": "## Rarui Icon Button\n---\nButton allows the user to perform actions, such as sending a file, advancing a form, sharing a document, or making a comment.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/button) for more details.",

package/dist/index.d.ts

@@ -16141,6 +16141,17 @@ declare const fontWeightProperties: {
     semiBold: `var(--${string})` | `var(--${string}, ${string})`;
     bold: `var(--${string})` | `var(--${string}, ${string})`;
 };
+declare const zIndexProperties: {
+    "100": `var(--${string})` | `var(--${string}, ${string})`;
+    "200": `var(--${string})` | `var(--${string}, ${string})`;
+    "300": `var(--${string})` | `var(--${string}, ${string})`;
+    "400": `var(--${string})` | `var(--${string}, ${string})`;
+    "500": `var(--${string})` | `var(--${string}, ${string})`;
+    "600": `var(--${string})` | `var(--${string}, ${string})`;
+    "700": `var(--${string})` | `var(--${string}, ${string})`;
+    "800": `var(--${string})` | `var(--${string}, ${string})`;
+    "900": `var(--${string})` | `var(--${string}, ${string})`;
+};
 declare const colorProperties: {
     currentColor: string;
     brand: `var(--${string})` | `var(--${string}, ${string})`;
@@ -16967,6 +16978,48 @@ declare const styles$3: {
 
 type RadioButtonVariants = NonNullable<RecipeVariants<typeof styles$3.radioButton>>;
 
+declare const dropdownStyles: {
+    dropdown: RuntimeFn<{
+        /**
+         * Specifies the padding inside the dropdown menu. This prop accepts one of the following values: "base" or "none".
+         * @default base
+         */
+        padding: {
+            base: {
+                padding: `var(--${string})` | `var(--${string}, ${string})`;
+            };
+            none: {
+                padding: number;
+            };
+        };
+    }>;
+    item: RuntimeFn<{
+        /**
+         * Indicates if the item is selected.
+         * This affects the visual style, such as highlight or marking.
+         *
+         * @default false
+         */
+        selected: {
+            true: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                ":hover": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
+                };
+            };
+        };
+    }>;
+};
+
+type DropdownVariants = NonNullable<RecipeVariants<typeof dropdownStyles.dropdown> & RecipeVariants<typeof dropdownStyles.item>>;
+type DropdownDynamicProperties = Pick<StandardLonghandProperties, "width" | "maxWidth">;
+interface DropdownSprinkle extends DropdownDynamicProperties {
+    /**
+     * The zIndex property specifies the stack order of the box.
+     */
+    zIndex?: AddDollar<keyof typeof zIndexProperties> | Conditions<AddDollar<keyof typeof zIndexProperties>>;
+}
+
 declare const statusStyles: {
     status: RuntimeFn<{
         /**
@@ -17621,6 +17674,58 @@ interface ChipTyping extends ChipSprinkle {
 }
 type ChipProps = ChipTyping & ChipVariants;
 
+interface DropdownTyping {
+    /**
+     * A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents.
+     * @default false
+     */
+    matchReferenceWidth?: boolean;
+    /**
+     * Adds listeners that dismiss (close) the floating element.
+     * @default true
+     */
+    enabledDismiss?: boolean;
+    /**
+     * Adds click event listeners that change the open state.
+     * @default true
+     */
+    enabledClick?: boolean;
+    /**
+     * Determines whether the dropdown should enable flipping the options' dropdown when there is not enough space to display it in its default direction.
+     * This can help ensure the dropdown is always visible on the screen.
+     * @default true
+     */
+    enabledFlip?: boolean;
+    /**
+     * Offest displaces the floating element from its core placement along the specified axes.
+     * @default 10
+     */
+    offset?: number;
+    /**
+     * Specifies the ID of the portal element where the dropdown should be rendered.
+     * This can be useful for rendering the dropdown in a different part of the DOM, such as a modal or overlay.
+     */
+    portalId?: string;
+    /**
+     * If true, the component is shown.
+     */
+    visible?: boolean;
+    /**
+     * Function to control dropdown opening and closing.
+     * @TJS-type (visible: boolean) => void;
+     */
+    onVisibility?: (visible: boolean) => void;
+}
+type DropdownProps = DropdownTyping & DropdownSprinkle & Pick<DropdownVariants, "padding">;
+
+interface DropdownItemTyping {
+    /**
+     * The name of the dropdown item. This is typically the text that is displayed for the item.
+     */
+    name?: string;
+}
+type DropdownItemProps = DropdownItemTyping & Pick<DropdownVariants, "selected">;
+
 interface IconButtonTyping {
     /**
      * Disables the button, disallowing user interaction.
@@ -17969,7 +18074,7 @@ declare global {
  */
 type TooltipProperties = Partial<Omit<TooltipProps, "visible" | "onVisibility" | "portalId">> & {
     /**
-     * Position of the popover.
+     * Position of the tooltip.
      * @default bottom
      */
     position?: Placement;
@@ -18181,6 +18286,91 @@ declare class RaruiChip extends LitElement {
     render(): TemplateResult<1>;
 }
 
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-dropdown": RaruiDropdown;
+    }
+}
+/**
+ * ## Rarui Dropdown
+ * ---
+ * An suspended menu displays a list of options on a temporary surface.
+ *
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/input/dropdown) for more details.
+ */
+type DropdownProperties = Omit<Partial<DropdownProps>, "onVisibility" | "portalId"> & {
+    /**
+     * Position of the dropdown.
+     * @default bottom-start
+     */
+    position?: Placement;
+    /**
+     * CSS positioning strategy used for the tooltip.
+     *
+     * - `"fixed"` (default) positions the tooltip relative to the viewport,
+     *   so it stays in the same place even when the page is scrolled.
+     * - `"absolute"` positions the tooltip relative to the nearest positioned ancestor,
+     *   which can be useful when you want the tooltip to move with page content.
+     *
+     * Use `"fixed"` for tooltips that should remain visible on scroll,
+     * and `"absolute"` when tooltips need to be positioned within scrollable containers.
+     * @default fixed
+     */
+    strategy?: "fixed" | "absolute";
+};
+
+declare class RaruiDropdown extends LitElement {
+    sprinkleAttrs: Record<string, string>;
+    offset: DropdownProperties["offset"];
+    padding: DropdownProperties["padding"];
+    position: DropdownProperties["position"];
+    strategy: DropdownProperties["strategy"];
+    matchReferenceWidth?: DropdownProperties["matchReferenceWidth"];
+    enabledFlip?: DropdownProperties["enabledFlip"];
+    enabledClick: DropdownProperties["enabledClick"];
+    enabledDismiss: DropdownProperties["enabledDismiss"];
+    open: boolean;
+    set visible(value: boolean | undefined);
+    get visible(): boolean | undefined;
+    private _visible?;
+    reference: HTMLElement;
+    floating: HTMLElement;
+    static styles: CSSResult;
+    cleanupAutoUpdate?: () => void;
+    private updatePositionDebounceId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, any>): void;
+    private scheduleUpdatePosition;
+    private handleClickOutside;
+    private handleClick;
+    updatePosition(): Promise<void>;
+    private getMiddleware;
+    computePosition(): Promise<void>;
+    render(): TemplateResult<1>;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "rarui-dropdown-item": RaruiDropdownItem;
+    }
+}
+/**
+ * ## Rarui Dropdown Item
+ * ---
+ * An suspended menu displays a list of options on a temporary surface.
+ *
+ See [a complete document](https://rarui.rarolabs.com.br/docs/components-web-components/surface/dropdown) for more details.
+ */
+type DropdownItemProperties = Omit<DropdownItemProps, "icon">;
+
+declare class RaruiDropdownItem extends LitElement {
+    name: DropdownItemProperties["name"];
+    selected: DropdownItemProperties["selected"];
+    static styles: CSSResult;
+    render(): TemplateResult<1>;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         "rarui-icon-button": RaruiIconButton;