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

package/src/components/DocumentationSidebar/DocumentationSidebar.tsx

@@ -381,7 +381,7 @@ export const DocumentationSidebar: React.FC<DocumentationSidebarProps> = (
       >
         <Image src="/logo.svg" alt="logo" />
 
-        <div className={`${CLASS_ROOT}__search-container`}>
+        <div className="mb">
           <TextInput
             id="search-documentation"
             htmlType="search"
@@ -393,42 +393,29 @@ export const DocumentationSidebar: React.FC<DocumentationSidebarProps> = (
             aria-label="Search documentation"
             ref={searchInputRef}
           />
-          {searchQuery && (
-            <button
-              type="button"
-              className={`${CLASS_ROOT}__search-clear`}
-              onClick={() => {
-                setSearchQuery("");
-                setSearchResults([]);
-              }}
-              aria-label="Clear search"
-            >
-              ✕
-            </button>
+
+          {searchResults.length > 0 && (
+            <div className={`${CLASS_ROOT}__search-results`}>
+              <ul className={`${CLASS_ROOT}__search-list`}>
+                {searchResults.map((result, index) => (
+                  <li key={result.id}>
+                    <Link
+                      href={result.href}
+                      className={cx(`${CLASS_ROOT}__search-result-link`, {
+                        [`${CLASS_ROOT}__search-result-link--active`]:
+                          index === activeSearchIndex,
+                      })}
+                      onClick={() => handleSelect(result.href)}
+                    >
+                      {result.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
           )}
         </div>
 
-        {searchResults.length > 0 && (
-          <div className={`${CLASS_ROOT}__search-results`}>
-            <ul className={`${CLASS_ROOT}__search-list`}>
-              {searchResults.map((result, index) => (
-                <li key={result.id}>
-                  <Link
-                    href={result.href}
-                    className={cx(`${CLASS_ROOT}__search-result-link`, {
-                      [`${CLASS_ROOT}__search-result-link--active`]:
-                        index === activeSearchIndex,
-                    })}
-                    onClick={() => handleSelect(result.href)}
-                  >
-                    {result.label}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
-        )}
-
         <nav
           className={`${CLASS_ROOT}__nav`}
           style={{ display: searchResults.length > 0 ? "none" : "block" }}

package/src/components/DocumentationSidebar/styles/style.scss

@@ -201,12 +201,6 @@
     padding-left: convert.to-rem(15px);
   }
 
-  // Search styles
-  &__search-container {
-    position: relative;
-    margin-bottom: 16px;
-  }
-
   &__search-clear {
     position: absolute;
     right: 8px;

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: