@react-md/core 1.0.0-next.13 → 1.0.0-next.14

package/src/autocomplete/__tests__/Autocomplete.tsx

@@ -0,0 +1,458 @@
+import { describe, expect, it, jest } from "@jest/globals";
+import { createRef, useEffect, useState, type ReactElement } from "react";
+import { Button } from "../../button/Button.js";
+import { fuzzySearch } from "../../searching/fuzzy.js";
+import { act, rmdRender, screen, userEvent } from "../../test-utils/index.js";
+import { SrOnly } from "../../typography/SrOnly.js";
+import { Autocomplete, type AutocompleteProps } from "../Autocomplete.js";
+
+const FRUITS = [
+  "Apple",
+  "Apricot",
+  "Banana",
+  "Blueberry",
+  "Cranberry",
+  "Kiwi",
+  "Mango",
+  "Orange",
+  "Peach",
+  "Plum",
+  "Strawberry",
+];
+
+const OBJECT_LIST = [
+  { name: "Apple", value: 1 },
+  { name: "Apricot", value: 2 },
+  { name: "Banana", value: 3 },
+];
+
+const FRUIT_PROPS = {
+  label: "Field",
+  menuLabel: "Fruits",
+  options: FRUITS,
+} satisfies AutocompleteProps<string>;
+
+describe("Autocomplete", () => {
+  it("should apply the correct styling, HTML attributes, and allow a ref", () => {
+    const inputRef = createRef<HTMLInputElement>();
+    const props = {
+      ...FRUIT_PROPS,
+      inputRef,
+      containerProps: {
+        "data-testid": "container",
+      },
+    } satisfies AutocompleteProps<string>;
+    const { rerender } = rmdRender(<Autocomplete {...props} />);
+
+    const field = screen.getByRole("combobox", { name: "Field" });
+    const container = screen.getByTestId("container");
+    expect(inputRef.current).toBeInstanceOf(HTMLInputElement);
+    expect(inputRef.current).toBe(field);
+    expect(container).toMatchSnapshot();
+
+    rerender(
+      <Autocomplete
+        {...props}
+        style={{ color: "white" }}
+        className="custom-class-name"
+      />
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("should toggle the visibility when the text field is clicked", async () => {
+    const user = userEvent.setup();
+    rmdRender(<Autocomplete {...FRUIT_PROPS} />);
+    const autocomplete = screen.getByRole("combobox", { name: "Field" });
+    expect(autocomplete).toHaveAttribute("aria-expanded", "false");
+    expect(autocomplete).toHaveAttribute("aria-activedescendant", "");
+
+    expect(() => screen.getByRole("listbox")).toThrow();
+    await user.click(autocomplete);
+
+    const listbox = screen.getByRole("listbox", { name: "Fruits" });
+    expect(autocomplete).toHaveAttribute("aria-expanded", "true");
+    expect(autocomplete).toHaveAttribute("aria-activedescendant", "");
+
+    await user.click(autocomplete);
+    expect(listbox).not.toBeInTheDocument();
+    expect(autocomplete).toHaveAttribute("aria-expanded", "false");
+    expect(autocomplete).toHaveAttribute("aria-activedescendant", "");
+  });
+
+  it("should filter the options as the user types", async () => {
+    const user = userEvent.setup();
+    rmdRender(<Autocomplete {...FRUIT_PROPS} />);
+
+    const autocomplete = screen.getByRole("combobox", { name: "Field" });
+    await user.tab();
+    expect(document.activeElement).toBe(autocomplete);
+    expect(() => screen.getByRole("listbox")).toThrow();
+
+    // the listbox should appear if the user types
+    await user.type(autocomplete, "a", { skipClick: true });
+    const listbox = screen.getByRole("listbox", { name: "Fruits" });
+    const options = screen.getAllByRole("option");
+    expect(options).toHaveLength(2);
+    expect(options[0]).toBe(screen.getByRole("option", { name: "Apple" }));
+    expect(options[1]).toBe(screen.getByRole("option", { name: "Apricot" }));
+
+    await user.click(screen.getByRole("option", { name: "Apricot" }));
+    expect(listbox).not.toBeInTheDocument();
+    expect(autocomplete).toHaveValue("Apricot");
+  });
+
+  it("should allow for a custom filter function", async () => {
+    const user = userEvent.setup();
+    rmdRender(<Autocomplete {...FRUIT_PROPS} filter={fuzzySearch} />);
+
+    const autocomplete = screen.getByRole("combobox", { name: "Field" });
+    await user.type(autocomplete, "ae");
+
+    const options = screen.getAllByRole("option");
+    expect(options).toHaveLength(4);
+    expect(options[0]).toBe(screen.getByRole("option", { name: "Apple" }));
+    expect(options[1]).toBe(screen.getByRole("option", { name: "Cranberry" }));
+    expect(options[2]).toBe(screen.getByRole("option", { name: "Orange" }));
+    expect(options[3]).toBe(screen.getByRole("option", { name: "Strawberry" }));
+  });
+
+  it("should allow the filtering to be disabled by enabling the disableFilter prop to manually filter instead", async () => {
+    const user = userEvent.setup();
+
+    // this is how you can manually resolve a promise using events
+    const instance = new EventTarget();
+    function Test(): ReactElement {
+      const [options, setOptions] = useState(FRUITS);
+      useEffect(() => {
+        instance.addEventListener("fake-filter", () => {
+          setOptions(FRUITS.slice(3));
+        });
+      }, []);
+
+      return <Autocomplete {...FRUIT_PROPS} options={options} disableFilter />;
+    }
+
+    rmdRender(<Test />);
+    const autocomplete = screen.getByRole("combobox", { name: "Field" });
+
+    await user.type(autocomplete, "Hello, world!");
+    expect(screen.getAllByRole("option")).toHaveLength(FRUITS.length);
+
+    act(() => {
+      // resolve the promise
+      instance.dispatchEvent(new Event("fake-filter"));
+    });
+    expect(screen.getAllByRole("option")).toHaveLength(FRUITS.slice(3).length);
+  });
+
+  // If the value is changed externally, the user **must** disable the filter
+  // behavior and filter themselves since it means doing a lot of funky stuff
+  // with useEffect
+  it("should allow the value to be controlled but will not update the filtered list automatically", async () => {
+    function Test(): ReactElement {
+      const [value, setValue] = useState("");
+
+      return (
+        <>
+          <Autocomplete
+            {...FRUIT_PROPS}
+            value={value}
+            onChange={(event) => setValue(event.currentTarget.value)}
+          />
+          <Button onClick={() => setValue("plu")}>Set Value</Button>
+        </>
+      );
+    }
+
+    const user = userEvent.setup();
+    rmdRender(<Test />);
+    const autocomplete = screen.getByRole("combobox", { name: "Field" });
+    const button = screen.getByRole("button", { name: "Set Value" });
+
+    await user.type(autocomplete, "BA");
+    expect(autocomplete).toHaveValue("BA");
+    expect(screen.getAllByRole("option")).toHaveLength(1);
+    expect(() => screen.getByRole("option", { name: "Banana" })).not.toThrow();
+
+    await user.click(button);
+    await user.click(autocomplete);
+    expect(autocomplete).toHaveValue("plu");
+    expect(screen.getAllByRole("option")).toHaveLength(1);
+    expect(() => screen.getByRole("option", { name: "Plum" })).not.toThrow();
+  });
+
+  it("should be able to render a CircularProgress bar when the loading prop is enabled", () => {
+    const { rerender } = rmdRender(<Autocomplete {...FRUIT_PROPS} />);
+
+    expect(() => screen.getByRole("progressbar")).toThrow();
+
+    rerender(<Autocomplete {...FRUIT_PROPS} loading />);
+    const progressbar = screen.getByRole("progressbar", { name: "Loading" });
+    expect(progressbar).toMatchSnapshot();
+  });
+
+  it("should allow the CircularProgress bar props to be configured with loadingProps", () => {
+    rmdRender(
+      <>
+        <SrOnly id="label-id">Wait</SrOnly>
+        <Autocomplete
+          {...FRUIT_PROPS}
+          loading
+          loadingProps={{
+            "aria-labelledby": "label-id",
+            dense: false,
+            theme: "primary",
+            className: "custom-class-name",
+          }}
+        />
+      </>
+    );
+    const progressbar = screen.getByRole("progressbar", { name: "Wait" });
+    expect(progressbar).toMatchSnapshot();
+  });
+
+  describe("keyboard support", () => {
+    it("should allow the listbox to be closed with the escape key while visible or clear out the textbox", async () => {
+      const user = userEvent.setup();
+      rmdRender(<Autocomplete {...FRUIT_PROPS} defaultValue={FRUITS.at(0)} />);
+      const autocomplete = screen.getByRole("combobox", { name: "Field" });
+
+      expect(autocomplete).toHaveValue(FRUITS.at(0));
+      await user.click(autocomplete);
+
+      const listbox = screen.getByRole("listbox", { name: "Fruits" });
+      await user.keyboard("[Escape]");
+      expect(listbox).not.toBeInTheDocument();
+      expect(autocomplete).toHaveValue(FRUITS.at(0));
+
+      await user.keyboard("[Escape]");
+      expect(autocomplete).toHaveValue("");
+    });
+
+    it("should allow keyboard users to force the menu to appear with ArrowDown and focus the first item", async () => {
+      const user = userEvent.setup();
+      rmdRender(<Autocomplete {...FRUIT_PROPS} />);
+      const autocomplete = screen.getByRole("combobox", { name: "Field" });
+      expect(autocomplete).toHaveAttribute("aria-expanded", "false");
+      expect(autocomplete).toHaveAttribute("aria-activedescendant", "");
+
+      await user.tab();
+      expect(document.activeElement).toBe(autocomplete);
+      expect(() => screen.getByRole("listbox")).toThrow();
+      expect(autocomplete).toHaveAttribute("aria-expanded", "false");
+      expect(autocomplete).toHaveAttribute("aria-activedescendant", "");
+
+      await user.keyboard("[ArrowDown]");
+      expect(() =>
+        screen.getByRole("listbox", { name: "Fruits" })
+      ).not.toThrow();
+      expect(autocomplete).toHaveAttribute("aria-expanded", "true");
+      expect(autocomplete).toHaveAttribute(
+        "aria-activedescendant",
+        screen.getByRole("option", { name: FRUITS.at(0) }).id
+      );
+    });
+
+    it("should allow keyboard users to force the menu to appear with alt+ArrowDown without focusing the first item", async () => {
+      const user = userEvent.setup();
+      rmdRender(<Autocomplete {...FRUIT_PROPS} />);
+      const autocomplete = screen.getByRole("combobox", { name: "Field" });
+      expect(autocomplete).toHaveAttribute("aria-expanded", "false");
+      expect(autocomplete).toHaveAttribute("aria-activedescendant", "");
+
+      await user.tab();
+      expect(document.activeElement).toBe(autocomplete);
+      expect(() => screen.getByRole("listbox")).toThrow();
+      expect(autocomplete).toHaveAttribute("aria-expanded", "false");
+      expect(autocomplete).toHaveAttribute("aria-activedescendant", "");
+
+      await user.keyboard("{Alt>}[ArrowDown]{/Alt}");
+      expect(() =>
+        screen.getByRole("listbox", { name: "Fruits" })
+      ).not.toThrow();
+      expect(autocomplete).toHaveAttribute("aria-expanded", "true");
+      expect(autocomplete).toHaveAttribute("aria-activedescendant", "");
+    });
+
+    it("should allow keyboard users to force the menu to appear with ArrowUp and focus the last item", async () => {
+      const user = userEvent.setup();
+      rmdRender(<Autocomplete {...FRUIT_PROPS} />);
+      const autocomplete = screen.getByRole("combobox", { name: "Field" });
+      expect(autocomplete).toHaveAttribute("aria-expanded", "false");
+      expect(autocomplete).toHaveAttribute("aria-activedescendant", "");
+
+      await user.tab();
+      expect(document.activeElement).toBe(autocomplete);
+      expect(() => screen.getByRole("listbox")).toThrow();
+      expect(autocomplete).toHaveAttribute("aria-expanded", "false");
+      expect(autocomplete).toHaveAttribute("aria-activedescendant", "");
+
+      await user.keyboard("[ArrowUp]");
+      expect(() =>
+        screen.getByRole("listbox", { name: "Fruits" })
+      ).not.toThrow();
+      expect(autocomplete).toHaveAttribute("aria-expanded", "true");
+      expect(autocomplete).toHaveAttribute(
+        "aria-activedescendant",
+        screen.getByRole("option", { name: FRUITS.at(-1) }).id
+      );
+    });
+
+    it("should allow the alt+ArrowUp key to move focus to the combobox and close the listbox while the combobox is focused", async () => {
+      const user = userEvent.setup();
+      rmdRender(<Autocomplete {...FRUIT_PROPS} />);
+      const autocomplete = screen.getByRole("combobox", { name: "Field" });
+      expect(autocomplete).toHaveAttribute("aria-expanded", "false");
+      expect(autocomplete).toHaveAttribute("aria-activedescendant", "");
+
+      await user.click(autocomplete);
+      const listbox = screen.getByRole("listbox", { name: "Fruits" });
+
+      await user.keyboard("[ArrowDown][ArrowDown]");
+      expect(autocomplete).toHaveAttribute(
+        "aria-activedescendant",
+        screen.getByRole("option", { name: FRUITS.at(1) }).id
+      );
+
+      await user.keyboard("{Alt>}[ArrowUp]{/Alt}");
+      expect(autocomplete).toHaveAttribute("aria-activedescendant", "");
+      expect(listbox).toBeInTheDocument();
+
+      await user.keyboard("{Alt>}[ArrowUp]{/Alt}");
+      expect(autocomplete).toHaveAttribute("aria-activedescendant", "");
+      expect(listbox).not.toBeInTheDocument();
+    });
+
+    it("should reset the keyboard focus when the user types or uses the Home/End/ArrowLeft/ArrowRight keys", async () => {
+      const user = userEvent.setup();
+      rmdRender(<Autocomplete {...FRUIT_PROPS} />);
+      const autocomplete = screen.getByRole<HTMLInputElement>("combobox", {
+        name: "Field",
+      });
+
+      await user.tab();
+      await user.keyboard("[ArrowDown]");
+      const option1 = screen.getByRole("option", { name: FRUITS.at(0) });
+
+      expect(autocomplete).toHaveAttribute("aria-activedescendant", option1.id);
+
+      await user.keyboard("ap");
+      expect(autocomplete).toHaveAttribute("aria-activedescendant", "");
+
+      await user.keyboard("[ArrowDown]");
+      expect(autocomplete).toHaveAttribute("aria-activedescendant", option1.id);
+      await user.keyboard("[ArrowLeft]");
+      expect(autocomplete).toHaveAttribute("aria-activedescendant", "");
+      expect(autocomplete.selectionStart).toBe(1);
+
+      await user.keyboard("[ArrowDown]");
+      expect(autocomplete.selectionStart).toBe(1);
+      expect(autocomplete).toHaveAttribute("aria-activedescendant", option1.id);
+      await user.keyboard("[ArrowRight]");
+      expect(autocomplete).toHaveAttribute("aria-activedescendant", "");
+      expect(autocomplete.selectionStart).toBe(2);
+
+      await user.keyboard("[ArrowDown]");
+      expect(autocomplete).toHaveAttribute("aria-activedescendant", option1.id);
+      await user.keyboard("[Home]");
+      expect(autocomplete).toHaveAttribute("aria-activedescendant", "");
+      expect(autocomplete.selectionStart).toBe(0);
+
+      await user.keyboard("[ArrowDown]");
+      expect(autocomplete).toHaveAttribute("aria-activedescendant", option1.id);
+      await user.keyboard("[End]");
+      expect(autocomplete).toHaveAttribute("aria-activedescendant", "");
+      expect(autocomplete.selectionStart).toBe(2);
+    });
+
+    it("should not allow the dropdown button to be tab focused", async () => {
+      const user = userEvent.setup();
+      rmdRender(<Autocomplete {...FRUIT_PROPS} />);
+      const autocomplete = screen.getByRole("combobox", { name: "Field" });
+      const dropdown = screen.getByRole("button", { name: "Fruits" });
+
+      await user.tab();
+      expect(document.activeElement).toBe(autocomplete);
+
+      await user.tab();
+      expect(document.activeElement).not.toBe(dropdown);
+      expect(document.activeElement).toBe(document.body);
+    });
+  });
+
+  describe("type safety", () => {
+    it("should require the extractor for when the options are not a list of strings or a list of objects with a label", async () => {
+      const user = userEvent.setup();
+      const error = jest.spyOn(console, "error").mockImplementation(() => {});
+      const errorMessage = `A \`TextExtractor\` must be provided to \`Autocomplete\` for lists that do not contain strings`;
+      const { rerender } = rmdRender(
+        // @ts-expect-error
+        <Autocomplete menuLabel="Options" options={[0, 1, 2, 3]} />
+      );
+      await expect(
+        user.click(screen.getByRole("button", { name: "Options" }))
+      ).rejects.toThrow(errorMessage);
+
+      rerender(
+        // @ts-expect-error
+        <Autocomplete
+          menuLabel="Options"
+          options={[{ children: "A" }, { children: "B" }]}
+        />
+      );
+      await expect(
+        user.click(screen.getByRole("button", { name: "Options" }))
+      ).rejects.toThrow(errorMessage);
+      rerender(
+        // @ts-expect-error
+        <Autocomplete menuLabel="Options" options={["One", "Two", 3, "Four"]} />
+      );
+      await expect(
+        user.click(screen.getByRole("button", { name: "Options" }))
+      ).rejects.toThrow(errorMessage);
+
+      error.mockRestore();
+    });
+
+    it("should infer the option type correctly", () => {
+      expect(() =>
+        rmdRender(
+          <Autocomplete
+            options={["a", "b", "c"]}
+            onAutocomplete={(option) => {
+              if (option !== null) {
+                // should not error since it is a string
+                option.charAt(0);
+              }
+            }}
+            menuLabel="Label"
+          />
+        )
+      ).not.toThrow();
+
+      expect(() =>
+        rmdRender(
+          <Autocomplete
+            menuLabel="Label"
+            options={OBJECT_LIST}
+            extractor={(option) => {
+              // @ts-expect-error
+              option.label;
+
+              return option.name;
+            }}
+            onAutocomplete={(option) => {
+              if (option !== null) {
+                // should not error since it is a string
+                option.name.charAt(0);
+                // should not error since it is a number
+                option.value.toFixed(0);
+              }
+            }}
+          />
+        )
+      ).not.toThrow();
+    });
+  });
+});

package/src/autocomplete/__tests__/__snapshots__/Autocomplete.tsx.snap

@@ -0,0 +1,144 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Autocomplete should allow the CircularProgress bar props to be configured with loadingProps 1`] = `
+<span
+  aria-labelledby="label-id"
+  aria-valuemax="100"
+  aria-valuemin="0"
+  class="rmd-circular-progress rmd-circular-progress--centered rmd-primary-color custom-class-name"
+  id="circular-progress-:r3g:"
+  role="progressbar"
+>
+  <svg
+    class="rmd-circular-progress__svg rmd-circular-progress__svg--indeterminate"
+    viewBox="0 0 66 66"
+  >
+    <circle
+      class="rmd-circular-progress__circle rmd-circular-progress__circle--indeterminate"
+      cx="33"
+      cy="33"
+      r="30"
+    />
+  </svg>
+</span>
+`;
+
+exports[`Autocomplete should apply the correct styling, HTML attributes, and allow a ref 1`] = `
+<div
+  class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--hoverable rmd-text-field-container--label rmd-text-field-container--outline-right rmd-autocomplete rmd-autocomplete--ra1"
+  data-testid="container"
+>
+  <input
+    aria-activedescendant=""
+    aria-autocomplete="list"
+    aria-controls="autocomplete-listbox-:r1:"
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    class="rmd-text-field rmd-text-field--placeholder-hidden"
+    id="autocomplete-:r0:"
+    placeholder=" "
+    role="combobox"
+    tabindex="0"
+    type="text"
+    value=""
+  />
+  <label
+    class="rmd-label rmd-label--floating"
+    for="autocomplete-:r0:"
+  >
+    Field
+  </label>
+  <span
+    class="rmd-text-field-addon rmd-text-field-addon--after rmd-box rmd-box--wrap rmd-autocomplete__right-addon rmd-background-container"
+  >
+    <button
+      aria-controls="autocomplete-:r0:"
+      aria-expanded="false"
+      aria-label="Fruits"
+      class="rmd-button rmd-button--icon rmd-interaction-surface"
+      id="autocomplete-dropdown-:r5:"
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        aria-hidden="true"
+        class="rmd-icon rmd-icon--font material-icons rmd-icon-rotator rmd-icon-rotator--animate"
+      >
+        arrow_drop_down
+      </span>
+    </button>
+  </span>
+</div>
+`;
+
+exports[`Autocomplete should apply the correct styling, HTML attributes, and allow a ref 2`] = `
+<div
+  class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--hoverable rmd-text-field-container--label rmd-text-field-container--outline-right rmd-autocomplete rmd-autocomplete--ra1 custom-class-name"
+  data-testid="container"
+  style="color: white;"
+>
+  <input
+    aria-activedescendant=""
+    aria-autocomplete="list"
+    aria-controls="autocomplete-listbox-:r1:"
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    class="rmd-text-field rmd-text-field--placeholder-hidden"
+    id="autocomplete-:r0:"
+    placeholder=" "
+    role="combobox"
+    tabindex="0"
+    type="text"
+    value=""
+  />
+  <label
+    class="rmd-label rmd-label--floating"
+    for="autocomplete-:r0:"
+  >
+    Field
+  </label>
+  <span
+    class="rmd-text-field-addon rmd-text-field-addon--after rmd-box rmd-box--wrap rmd-autocomplete__right-addon rmd-background-container"
+  >
+    <button
+      aria-controls="autocomplete-:r0:"
+      aria-expanded="false"
+      aria-label="Fruits"
+      class="rmd-button rmd-button--icon rmd-interaction-surface"
+      id="autocomplete-dropdown-:r5:"
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        aria-hidden="true"
+        class="rmd-icon rmd-icon--font material-icons rmd-icon-rotator rmd-icon-rotator--animate"
+      >
+        arrow_drop_down
+      </span>
+    </button>
+  </span>
+</div>
+`;
+
+exports[`Autocomplete should be able to render a CircularProgress bar when the loading prop is enabled 1`] = `
+<span
+  aria-label="Loading"
+  aria-valuemax="100"
+  aria-valuemin="0"
+  class="rmd-circular-progress rmd-circular-progress--centered"
+  id="circular-progress-:r3a:"
+  role="progressbar"
+>
+  <svg
+    class="rmd-circular-progress__svg rmd-circular-progress__svg--indeterminate"
+    viewBox="0 0 66 66"
+  >
+    <circle
+      class="rmd-circular-progress__circle rmd-circular-progress__circle--indeterminate"
+      cx="33"
+      cy="33"
+      r="30"
+    />
+  </svg>
+</span>
+`;

package/src/autocomplete/_autocomplete.scss

@@ -0,0 +1,75 @@
+@use "sass:list";
+@use "sass:map";
+@use "../utils";
+@use "../button/button";
+@use "../form/form";
+@use "../progress/progress";
+
+$disable-everything: false !default;
+$disable-dropdown-button: false !default;
+$disable-circular-progress: false !default;
+
+$button-size: button.$icon-small-size !default;
+$circular-progress-size: progress.$circular-dense-size !default;
+
+$dropdown-button-calc: calc(button.get-var(icon-font-size) * 2) !default;
+$dropdown-button-only-calc: calc(
+  form.get-var(addon-spacing) + $dropdown-button-calc
+) !default;
+$circular-progress-only-calc: calc(
+  form.get-var(addon-spacing) + progress.get-var(circular-size)
+) !default;
+$circular-progress-and-dropdown-button-calc: calc(
+  calc(form.get-var(addon-spacing) * 2) + progress.get-var(circular-size) +
+    $dropdown-button-calc
+) !default;
+
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(autocomplete, $disable-layer) {
+      .rmd-autocomplete {
+        @if not $disable-dropdown-button {
+          @include button.set-var(icon-font-size, $button-size);
+        }
+        @if not $disable-circular-progress {
+          @include progress.set-var(circular-size, $circular-progress-size);
+        }
+
+        @if not $disable-dropdown-button {
+          // right-addon-1: dropdown button
+          &--ra1 {
+            @include form.set-var(
+              text-field-padding-right,
+              $dropdown-button-only-calc
+            );
+          }
+
+          @if not $disable-circular-progress {
+            // right-addon-2: circular progress and dropdown button
+            &--ra2 {
+              @include form.set-var(
+                text-field-padding-right,
+                $circular-progress-and-dropdown-button-calc
+              );
+            }
+          }
+        }
+
+        @if not $disable-circular-progress {
+          // right-addon-3: circular progress
+          &--ra3 {
+            @include form.set-var(
+              text-field-padding-right,
+              $circular-progress-only-calc
+            );
+          }
+        }
+
+        &__right-addon {
+          @include utils.auto-rtl(right, 0);
+          @include utils.auto-rtl(padding-left, form.get-var(addon-spacing), 0);
+        }
+      }
+    }
+  }
+}