@orangesk/orange-design-system 2.0.0-beta.47 → 2.0.0-beta.48

package/src/components/Forms/Autocomplete/Autocomplete.static.ts

@@ -6,6 +6,8 @@ export interface AutocompleteConfig {
   optionClassName: string;
   customInputClassName: string;
   displayMenu: string;
+  onConfirm?: (value: unknown) => void;
+  tClearButton: () => string;
   tAssistiveHint: () => string;
 }
 
@@ -16,25 +18,39 @@ export const defaultConfig: AutocompleteConfig = {
   optionClassName: "",
   customInputClassName: "",
   displayMenu: "overlay",
+  tClearButton: () => "Vymazať text",
   tAssistiveHint: () =>
     "Pre prezeranie výsledkov automatického dopĺňania použite šípky nahor a nadol a pre výber konkrétneho výsledku použite tlačidlo Enter. Pri dotykových zariadeniach použite dotyk alebo potiahnutie prstom do strany.",
 };
 
+const addClassToken = (className: string, token: string) => {
+  const classTokens = className.split(/\s+/).filter(Boolean);
+
+  if (classTokens.includes(token)) {
+    return className;
+  }
+
+  return [...classTokens, token].join(" ");
+};
+
 export default class Autocomplete {
   private element: HTMLElement;
   private config: AutocompleteConfig;
   private instance: any;
+  private teardownClearButton: (() => void) | null;
 
   constructor(element: HTMLElement, config?: Partial<AutocompleteConfig>) {
     this.element = element;
     this.config = { ...defaultConfig, ...config };
     this.onPageshow = this.onPageshow.bind(this);
+    this.onClearButtonClick = this.onClearButtonClick.bind(this);
     this.instance = null;
+    this.teardownClearButton = null;
 
     (this.element as any).ODS_Autocomplete = this;
 
     // Initialize asynchronously to handle dynamic imports
-    this.init().catch(console.error);
+    this.init().catch(() => undefined);
 
     return this;
   }
@@ -55,11 +71,19 @@ export default class Autocomplete {
     const customInputClassTokens = customInputClassName
       .split(/\s+/)
       .filter(Boolean);
+    const wrapperClassTokens = this.config.wrapperClassName
+      .split(/\s+/)
+      .filter(Boolean);
 
-    const hasSearchIcon = customInputClassTokens.includes("input--search-icon");
-    const hasSearchIconWithPlaceholder = customInputClassTokens.includes(
-      "input--search-icon-with-placeholder",
-    );
+    const hasSearchIcon =
+      customInputClassTokens.includes("input--search-icon") ||
+      wrapperClassTokens.includes("autocomplete__wrapper--search-icon");
+    const hasSearchIconWithPlaceholder =
+      customInputClassTokens.includes("input--search-icon-with-placeholder") ||
+      wrapperClassTokens.includes(
+        "autocomplete__wrapper--search-icon-with-placeholder",
+      );
+    const isInvalid = this.element.classList.contains("is-invalid");
 
     this.config.customInputClassName = customInputClassTokens
       .filter(
@@ -69,22 +93,25 @@ export default class Autocomplete {
       )
       .join(" ");
 
+    if (isInvalid) {
+      this.config.customInputClassName = addClassToken(
+        this.config.customInputClassName,
+        "is-invalid",
+      );
+    }
+
     if (hasSearchIcon) {
-      this.config.wrapperClassName = [
+      this.config.wrapperClassName = addClassToken(
         this.config.wrapperClassName,
         "autocomplete__wrapper--search-icon",
-      ]
-        .filter(Boolean)
-        .join(" ");
+      );
     }
 
     if (hasSearchIconWithPlaceholder) {
-      this.config.wrapperClassName = [
+      this.config.wrapperClassName = addClassToken(
         this.config.wrapperClassName,
         "autocomplete__wrapper--search-icon-with-placeholder",
-      ]
-        .filter(Boolean)
-        .join(" ");
+      );
     }
 
     // Dynamic import to avoid SSR issues
@@ -104,9 +131,156 @@ export default class Autocomplete {
       });
     }
 
+    this.initEnhancedControls(hasSearchIconWithPlaceholder);
+
     window.addEventListener("pageshow", this.onPageshow);
   }
 
+  private getWrapper(): HTMLElement | null {
+    if (this.element.tagName === "SELECT") {
+      const rootElement = this.element.previousElementSibling;
+      if (!(rootElement instanceof HTMLElement)) {
+        return null;
+      }
+
+      if (rootElement.classList.contains("autocomplete__wrapper")) {
+        return rootElement;
+      }
+
+      return rootElement.querySelector(".autocomplete__wrapper");
+    }
+
+    return this.element.querySelector(".autocomplete__wrapper");
+  }
+
+  private getInput(): HTMLInputElement | null {
+    return this.getWrapper()?.querySelector(".autocomplete__input") ?? null;
+  }
+
+  private initEnhancedControls(
+    hasSearchIconWithPlaceholder: boolean,
+    retries = 10,
+  ): void {
+    if (!this.getInput()) {
+      if (retries > 0) {
+        window.setTimeout(
+          () =>
+            this.initEnhancedControls(
+              hasSearchIconWithPlaceholder,
+              retries - 1,
+            ),
+          0,
+        );
+      }
+
+      return;
+    }
+
+    this.syncInputState();
+
+    if (hasSearchIconWithPlaceholder) {
+      this.initClearButton();
+    }
+  }
+
+  private syncInputState(): void {
+    const input = this.getInput();
+    if (!input) {
+      return;
+    }
+
+    if (this.element.classList.contains("is-invalid")) {
+      input.classList.add("is-invalid");
+      input.setAttribute("aria-invalid", "true");
+    }
+
+    if (this.element instanceof HTMLSelectElement && this.element.disabled) {
+      input.disabled = true;
+    }
+  }
+
+  private initClearButton(): void {
+    this.teardownClearButton?.();
+
+    const wrapper = this.getWrapper();
+    const input = this.getInput();
+
+    if (!wrapper || !input) {
+      return;
+    }
+
+    const clearButton = document.createElement("button");
+    clearButton.type = "button";
+    clearButton.className = "autocomplete__clear";
+    clearButton.setAttribute("aria-label", this.config.tClearButton());
+
+    const updateClearButton = () => {
+      clearButton.hidden = input.disabled || input.value.length === 0;
+    };
+    const scheduleUpdateClearButton = () => {
+      window.setTimeout(updateClearButton, 0);
+    };
+
+    clearButton.addEventListener("mousedown", this.preventDefault);
+    clearButton.addEventListener("keydown", this.stopPropagation);
+    clearButton.addEventListener("click", this.onClearButtonClick);
+    input.addEventListener("input", updateClearButton);
+    input.addEventListener("change", updateClearButton);
+    wrapper.addEventListener("click", scheduleUpdateClearButton);
+    wrapper.addEventListener("keyup", scheduleUpdateClearButton);
+
+    updateClearButton();
+    wrapper.appendChild(clearButton);
+
+    this.teardownClearButton = () => {
+      clearButton.removeEventListener("mousedown", this.preventDefault);
+      clearButton.removeEventListener("keydown", this.stopPropagation);
+      clearButton.removeEventListener("click", this.onClearButtonClick);
+      input.removeEventListener("input", updateClearButton);
+      input.removeEventListener("change", updateClearButton);
+      wrapper.removeEventListener("click", scheduleUpdateClearButton);
+      wrapper.removeEventListener("keyup", scheduleUpdateClearButton);
+      clearButton.remove();
+    };
+  }
+
+  private preventDefault(event: Event): void {
+    event.preventDefault();
+  }
+
+  private stopPropagation(event: Event): void {
+    event.stopPropagation();
+  }
+
+  private onClearButtonClick(): void {
+    const input = this.getInput();
+
+    if (!input) {
+      return;
+    }
+
+    input.value = "";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+
+    if (this.element instanceof HTMLSelectElement) {
+      const emptyOption = Array.from(this.element.options).find(
+        (option) => option.value === "",
+      );
+
+      if (emptyOption) {
+        emptyOption.selected = true;
+      } else {
+        this.element.selectedIndex = -1;
+      }
+
+      this.element.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+
+    this.config.onConfirm?.("");
+    input.focus();
+  }
+
   private onPageshow(e: PageTransitionEvent): void {
     if (e.persisted && window) {
       window.location.reload();
@@ -114,13 +288,15 @@ export default class Autocomplete {
   }
 
   public destroy(): void {
+    this.teardownClearButton?.();
+    this.teardownClearButton = null;
     window.removeEventListener("pageshow", this.onPageshow);
     (this.element as any).ODS_Autocomplete = null;
   }
 
   public update(): void {
     this.destroy();
-    this.init().catch(console.error);
+    this.init().catch(() => undefined);
   }
 
   static getInstance(el: HTMLElement): Autocomplete | null {

package/src/components/Forms/Autocomplete/styles/style.scss

@@ -26,16 +26,32 @@
           content: "";
           position: absolute;
           top: 50%;
-          left: convert.to-rem(8px);
+          left: convert.to-rem(10px);
           width: convert.to-rem(20px);
           height: convert.to-rem(20px);
           transform: translateY(-50%);
-          background-image: textConfig.$background-image-search-icon;
-          background-repeat: no-repeat;
+          background-color: var(--color-icon-brand);
+          mask-image: textConfig.$mask-image-search-icon;
+          mask-position: center;
+          mask-repeat: no-repeat;
+          mask-size: contain;
           pointer-events: none;
           z-index: 3;
         }
 
+        &:has(.autocomplete__input:not(:placeholder-shown))::before {
+          background-color: var(--color-icon-default);
+        }
+
+        &:has(.autocomplete__input:disabled)::before {
+          background-color: var(--color-icon-disabled);
+        }
+
+        &:has(.autocomplete__input.is-invalid)::before,
+        &:has(.autocomplete__input[aria-invalid="true"])::before {
+          background-color: var(--color-icon-negative);
+        }
+
         .autocomplete__input {
           background-image: none !important;
           padding-left: convert.to-rem(40px);
@@ -48,17 +64,54 @@
         }
       }
 
-      &--search-icon {
-        &::before {
-          opacity: 0;
+      &--search-icon-with-placeholder {
+        .autocomplete__input {
+          padding-right: convert.to-rem(44px);
         }
 
-        &:has(.autocomplete__input:not(:focus):placeholder-shown)::before {
-          opacity: 1;
+        .autocomplete__hint {
+          padding-right: convert.to-rem(44px);
         }
       }
     }
 
+    &__clear {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      z-index: 4;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: convert.to-rem(44px);
+      height: convert.to-rem(36px);
+      padding: 0;
+      background: transparent;
+      border: 0;
+      transform: translateY(-50%);
+      cursor: pointer;
+
+      &::before {
+        content: "";
+        width: convert.to-rem(24px);
+        height: convert.to-rem(24px);
+        background-color: var(--color-icon-default);
+        mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 20L10 12L18 4L20 6L14 12L20 18L18 20Z" fill="%23000"/><path d="M6 4L14 12L6 20L4 18L10 12L4 6L6 4Z" fill="%23000"/></svg>');
+        mask-position: center;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--color-border-contrast);
+        outline-offset: -2px;
+      }
+
+      &[hidden] {
+        display: none;
+      }
+    }
+
     &__input {
       @include textMixins.base();
       @include textMixins.states();

package/src/components/Forms/Autocomplete/tests/Autocomplete.static.test.ts

@@ -0,0 +1,187 @@
+import { fireEvent, waitFor } from "@testing-library/dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import AutocompleteStatic from "../Autocomplete.static";
+
+const renderAutocomplete = (options: any) => {
+  const wrapper = document.createElement("div");
+  wrapper.className = ["autocomplete__wrapper", options.wrapperClassName]
+    .filter(Boolean)
+    .join(" ");
+
+  const input = document.createElement("input");
+  input.className = ["autocomplete__input", options.customInputClassName]
+    .filter(Boolean)
+    .join(" ");
+  input.value = options.defaultValue ?? "";
+
+  wrapper.appendChild(input);
+  options.element.appendChild(wrapper);
+};
+
+const renderAutocompleteAsync = (options: any) => {
+  window.setTimeout(() => renderAutocomplete(options), 0);
+};
+
+const accessibleAutocompleteMock: any = vi.fn(renderAutocompleteAsync);
+
+accessibleAutocompleteMock.enhanceSelectElement = vi.fn((options: any) => {
+  const element = document.createElement("div");
+  const selectedOption =
+    options.selectElement.options[options.selectElement.selectedIndex];
+
+  options.selectElement.parentNode.insertBefore(element, options.selectElement);
+
+  renderAutocompleteAsync({
+    ...options,
+    element,
+    defaultValue: selectedOption?.textContent ?? "",
+  });
+});
+
+vi.mock("@orangesk/accessible-autocomplete", () => ({
+  default: accessibleAutocompleteMock,
+}));
+
+describe("Autocomplete.static", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    vi.clearAllMocks();
+  });
+
+  it("moves search icon classes from input config to wrapper config", async () => {
+    const select = document.createElement("select");
+    document.body.appendChild(select);
+
+    new AutocompleteStatic(select, {
+      customInputClassName: "input--search-icon-with-placeholder custom-class",
+    });
+
+    await waitFor(() => {
+      expect(
+        accessibleAutocompleteMock.enhanceSelectElement,
+      ).toHaveBeenCalled();
+    });
+
+    const config =
+      accessibleAutocompleteMock.enhanceSelectElement.mock.calls[0][0];
+
+    expect(config.wrapperClassName).toContain(
+      "autocomplete__wrapper--search-icon-with-placeholder",
+    );
+    expect(config.customInputClassName).toBe("custom-class");
+  });
+
+  it("passes invalid state to generated input", async () => {
+    const select = document.createElement("select");
+    select.className = "autocomplete is-invalid";
+    document.body.appendChild(select);
+
+    new AutocompleteStatic(select, {
+      customInputClassName: "input--search-icon-with-placeholder",
+    });
+
+    await waitFor(() => {
+      expect(document.querySelector(".autocomplete__input")).toHaveClass(
+        "is-invalid",
+      );
+      expect(document.querySelector(".autocomplete__input")).toHaveAttribute(
+        "aria-invalid",
+        "true",
+      );
+    });
+  });
+
+  it("passes disabled state to generated input and hides clear button", async () => {
+    const select = document.createElement("select");
+    const appleOption = new Option("apple", "apple", true, true);
+
+    select.append(appleOption);
+    select.disabled = true;
+    document.body.appendChild(select);
+
+    new AutocompleteStatic(select, {
+      customInputClassName: "input--search-icon-with-placeholder",
+    });
+
+    await waitFor(() => {
+      expect(document.querySelector(".autocomplete__input")).toBeDisabled();
+      expect(document.querySelector(".autocomplete__clear")).not.toBeVisible();
+    });
+  });
+
+  it("clears input and select value from search icon autocomplete", async () => {
+    const select = document.createElement("select");
+    const emptyOption = new Option("", "");
+    const appleOption = new Option("apple", "apple", true, true);
+
+    select.append(emptyOption, appleOption);
+    document.body.appendChild(select);
+
+    const onConfirm = vi.fn();
+
+    new AutocompleteStatic(select, {
+      customInputClassName: "input--search-icon-with-placeholder",
+      onConfirm,
+    });
+
+    await waitFor(() => {
+      expect(document.querySelector(".autocomplete__clear")).toBeVisible();
+    });
+
+    expect(
+      document
+        .querySelector(".autocomplete__wrapper")
+        ?.contains(document.querySelector(".autocomplete__clear")),
+    ).toBe(true);
+
+    const input = document.querySelector<HTMLInputElement>(
+      ".autocomplete__input",
+    );
+    const clearButton = document.querySelector<HTMLButtonElement>(
+      ".autocomplete__clear",
+    );
+
+    expect(input?.value).toBe("apple");
+
+    fireEvent.click(clearButton as HTMLButtonElement);
+
+    expect(input?.value).toBe("");
+    expect(select.value).toBe("");
+    expect(clearButton).not.toBeVisible();
+    expect(onConfirm).toHaveBeenCalledWith("");
+  });
+
+  it("keeps clear button keyboard events from reaching autocomplete wrapper", async () => {
+    const select = document.createElement("select");
+    const emptyOption = new Option("", "");
+    const appleOption = new Option("apple", "apple", true, true);
+
+    select.append(emptyOption, appleOption);
+    document.body.appendChild(select);
+
+    new AutocompleteStatic(select, {
+      customInputClassName: "input--search-icon-with-placeholder",
+    });
+
+    await waitFor(() => {
+      expect(document.querySelector(".autocomplete__clear")).toBeVisible();
+    });
+
+    const wrapper = document.querySelector(".autocomplete__wrapper");
+    const clearButton = document.querySelector<HTMLButtonElement>(
+      ".autocomplete__clear",
+    );
+    const onWrapperKeydown = vi.fn();
+
+    wrapper?.addEventListener("keydown", onWrapperKeydown);
+
+    fireEvent.keyDown(clearButton as HTMLButtonElement, {
+      key: " ",
+      code: "Space",
+      keyCode: 32,
+    });
+
+    expect(onWrapperKeydown).not.toHaveBeenCalled();
+  });
+});

package/src/components/Forms/DatePicker/styles/style.scss

@@ -70,7 +70,7 @@
       border-color: var(--color-surface-moderate);
     }
   }
-  .bg-black .daypickr__select,
+
   .is-dark .daypickr__select {
     background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 10L12 18L4 10L6 8L12 14L18 8L20 10Z'/%3E%3C/svg%3E%0A");
   }
@@ -109,7 +109,6 @@
     }
   }
 
-  .bg-black .daypickr__button--pagination,
   .is-dark .daypickr__button--pagination {
     &-prev::before {
       background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='white' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 20L6 12L14 4L16 6L10 12L16 18L14 20Z'/%3E%3C/svg%3E%0A");

package/src/components/Forms/Group/Group.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
 import React, { HTMLAttributes, ReactNode } from "react";
+import { Autocomplete } from "../Autocomplete/Autocomplete";
 import { Select } from "../Select/Select";
 import { TextInput } from "../TextInput/TextInput";
 
@@ -8,7 +9,7 @@ import { Item } from "./Item";
 const CLASS_ROOT = "control-group";
 
 interface ControlShape {
-  type: "text" | "select";
+  type: "autocomplete" | "text" | "select";
   [key: string]: any;
 }
 
@@ -35,6 +36,8 @@ const Group: React.FC<GroupProps> = ({
 
   const ControlElement = (props: any) => {
     switch (type) {
+      case "autocomplete":
+        return <Autocomplete {...props} />;
       case "select":
         return <Select {...props} />;
       default:

package/src/components/Forms/Group/styles/config.scss

@@ -2,7 +2,7 @@
 @use "../../TextInput/styles/config" as TextInputConfig;
 
 $item: (
-  border: 2px solid var(--color-surface-moderate),
+  border: 2px solid var(--color-border-strong),
   background: var(--color-surface-subtle),
 );
 

package/src/components/Forms/Group/styles/mixins.scss

@@ -39,15 +39,32 @@
     border-radius: 0 !important;
   }
 
+  > *:not(:first-child):not(:last-child) .autocomplete__input {
+    border-radius: 0 !important;
+  }
+
   > *:first-child:not(:last-child) {
     border-top-right-radius: 0 !important;
     border-bottom-right-radius: 0 !important;
   }
 
+  > *:first-child:not(:last-child) .autocomplete__input,
+  > *:has(+ .autocomplete[style*="display: none"] + *) .autocomplete__input {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
   > *:last-child:not(:first-child) {
     border-top-left-radius: 0 !important;
     border-bottom-left-radius: 0 !important;
   }
+
+  > *:last-child:not(:first-child) .autocomplete__input,
+  > *:not(:first-child):has(+ .autocomplete[style*="display: none"])
+    .autocomplete__input {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
 }
 
 @mixin item($config: config.$item) {

package/src/components/Forms/Group/tests/Group.unit.test.jsx

@@ -109,6 +109,15 @@ describe("rendering Group", () => {
       );
       expect(container.getElementsByClassName("select").length).toBe(1);
     });
+    it("renders Autocomplete component (autocomplete class) when control type is set to autocomplete", () => {
+      const { container } = render(
+        <Group
+          data-testid="test-id"
+          control={{ type: "autocomplete", options: ["", "apple"] }}
+        />,
+      );
+      expect(container.getElementsByClassName("autocomplete").length).toBe(1);
+    });
     it("addonPrefix Item has class control-group__item--large when size is set to large", () => {
       const { container } = render(
         <Group

package/src/components/Forms/TextArea/styles/config.scss

@@ -13,6 +13,7 @@ $states: (
   disabled: commonConfig.$disabled,
   readonly: commonConfig.$readonly,
   invalid: commonConfig.$invalid,
+  placeholder: commonConfig.$placeholder,
 );
 
 $sizes: (

package/src/components/Forms/TextArea/styles/mixins.scss

@@ -22,7 +22,7 @@
     @include generate.css-map($config, "disabled");
   }
 
-  &:read-only {
+  &:read-only:not(:disabled) {
     @include generate.css-map($config, "readonly");
   }
 
@@ -30,6 +30,12 @@
     @include generate.css-map($config, "invalid");
   }
 
+  &::placeholder {
+    @include generate.css-map($config, "placeholder");
+
+    opacity: 1;
+  }
+
   &.is-valid {
     padding-right: 36px;
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Cpath d='M7.5,15 C3.35786438,15 0,11.6421356 0,7.5 C0,3.35786438 3.35786438,0 7.5,0 C11.6421356,0 15,3.35786438 15,7.5 C15,11.6421356 11.6421356,15 7.5,15 Z M3.40550597,6.68901229 C2.99100286,7.0539857 2.95085113,7.6858763 3.31582458,8.1003794 L5.77477826,10.8930318 C6.1397517,11.3075349 6.7716423,11.3476866 7.18614541,10.9827132 C7.20478962,10.9662968 7.22281563,10.9491914 7.24018594,10.9314326 L11.8941565,6.17336831 C12.2803381,5.7785491 12.2733359,5.14542284 11.8785167,4.75924123 C11.4836975,4.37305961 10.8505712,4.38006176 10.4643896,4.77488097 L7.31720124,7.9924615 C6.93101963,8.3872807 6.29789337,8.3942828 5.90307416,8.0081012 C5.88531533,7.9907309 5.86820993,7.9727049 5.85179355,7.9540607 L4.81687313,6.77869369 C4.45189969,6.36419058 3.82000909,6.32403885 3.40550597,6.68901229 Z' fill='%2332c832' /%3E%3C/svg%3E");