@tedi-design-system/react 14.4.0-rc.8 → 14.4.0-rc.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "14.4.0-rc.8",
+  "version": "14.4.0-rc.9",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/tedi/components/form/search/search.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),l=require("../../../../../external/classnames/index.cjs.js"),x=require("react"),h=require("../../buttons/button/button.cjs.js"),q=require("../textfield/textfield.cjs.js"),i=require("./search.module.scss.cjs.js"),r=x.forwardRef(({placeholder:d,isClearable:u=!0,searchIcon:c="search",onSearch:e,onChange:n,button:t,...s},f)=>{const o=p=>{p.key==="Enter"&&(e==null||e(s.value))},m=()=>{e==null||e(s.value)},_={...s,ref:f,inputClassName:l.default(i.default["tedi-search__input"],t&&i.default["tedi-search__input--has-button"]),placeholder:d,isClearable:u,onKeyPress:o,onChange:n,...t?{}:{icon:c}};return a.jsxs("div",{className:l.default(i.default["tedi-search__wrapper"],s.className),children:[a.jsx(q.TextField,{..._}),t&&a.jsx(h.Button,{...t,onClick:m,className:l.default(i.default["tedi-search__button"],t.className),children:t.children})]})});r.displayName="Search";exports.Search=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),r=require("../../../../../external/classnames/index.cjs.js"),y=require("react"),N=require("../../buttons/button/button.cjs.js"),j=require("../textfield/textfield.cjs.js"),t=require("./search.module.scss.cjs.js"),v=require("../../../providers/label-provider/use-labels.cjs.js"),u=y.forwardRef(({placeholder:c,isClearable:d=!0,searchIcon:n="search",onSearch:a,onChange:o,button:e,ariaLabel:f,...s},h)=>{const{getLabel:l}=v.useLabels(),m=q=>{q.key==="Enter"&&(a==null||a(s.value))},_=()=>{a==null||a(s.value)},x={...s,ref:h,inputClassName:r.default(t.default["tedi-search__input"],e&&t.default["tedi-search__input--has-button"]),placeholder:c,isClearable:d,onKeyDown:m,onChange:o,...e?{}:{icon:n}},b=c||l("search"),p=f??b;return i.jsxs("div",{className:r.default(t.default["tedi-search__wrapper"],s.className),role:"search","aria-label":p,children:[i.jsx(j.TextField,{...x}),e&&i.jsx(N.Button,{...e,onClick:_,className:r.default(t.default["tedi-search__button"],e.className),"aria-label":e.children?void 0:l("search"),children:e.children??l("search")})]})});u.displayName="Search";exports.Search=u;

package/src/tedi/components/form/search/search.d.ts

@@ -15,5 +15,10 @@ export interface SearchProps extends Omit<TextFieldProps, 'isTextArea' | 'icon'
      * Optional button properties.
      */
     button?: Partial<ButtonProps>;
+    /**
+     * For accessibility: search field name (accessible name). Recommended to always set.
+     * E.g., "Search products" or "Search site".
+     */
+    ariaLabel?: string;
 }
 export declare const Search: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<TextFieldForwardRef>>;

package/src/tedi/components/form/search/search.es.js

@@ -1,40 +1,42 @@
-import { jsxs as N, jsx as a } from "react/jsx-runtime";
-import t from "../../../../../external/classnames/index.es.js";
-import { forwardRef as u } from "react";
-import { Button as x } from "../../buttons/button/button.es.js";
-import { TextField as y } from "../textfield/textfield.es.js";
+import { jsxs as y, jsx as c } from "react/jsx-runtime";
+import l from "../../../../../external/classnames/index.es.js";
+import { forwardRef as v } from "react";
+import { Button as w } from "../../buttons/button/button.es.js";
+import { TextField as L } from "../textfield/textfield.es.js";
 import r from "./search.module.scss.es.js";
-const h = u(
-  ({ placeholder: l, isClearable: m = !0, searchIcon: d = "search", onSearch: s, onChange: p, button: e, ...i }, c) => {
-    const o = (n) => {
-      n.key === "Enter" && (s == null || s(i.value));
-    }, f = () => {
-      s == null || s(i.value);
+import { useLabels as k } from "../../../providers/label-provider/use-labels.es.js";
+const C = v(
+  ({ placeholder: t, isClearable: m = !0, searchIcon: o = "search", onSearch: s, onChange: d, button: e, ariaLabel: p, ...a }, n) => {
+    const { getLabel: i } = k(), f = (x) => {
+      x.key === "Enter" && (s == null || s(a.value));
+    }, h = () => {
+      s == null || s(a.value);
     }, _ = {
-      ...i,
-      ref: c,
-      inputClassName: t(r["tedi-search__input"], e && r["tedi-search__input--has-button"]),
-      placeholder: l,
+      ...a,
+      ref: n,
+      inputClassName: l(r["tedi-search__input"], e && r["tedi-search__input--has-button"]),
+      placeholder: t,
       isClearable: m,
-      onKeyPress: o,
-      onChange: p,
-      ...e ? {} : { icon: d }
-    };
-    return /* @__PURE__ */ N("div", { className: t(r["tedi-search__wrapper"], i.className), children: [
-      /* @__PURE__ */ a(y, { ..._ }),
-      e && /* @__PURE__ */ a(
-        x,
+      onKeyDown: f,
+      onChange: d,
+      ...e ? {} : { icon: o }
+    }, u = t || i("search"), N = p ?? u;
+    return /* @__PURE__ */ y("div", { className: l(r["tedi-search__wrapper"], a.className), role: "search", "aria-label": N, children: [
+      /* @__PURE__ */ c(L, { ..._ }),
+      e && /* @__PURE__ */ c(
+        w,
         {
           ...e,
-          onClick: f,
-          className: t(r["tedi-search__button"], e.className),
-          children: e.children
+          onClick: h,
+          className: l(r["tedi-search__button"], e.className),
+          "aria-label": e.children ? void 0 : i("search"),
+          children: e.children ?? i("search")
         }
       )
     ] });
   }
 );
-h.displayName = "Search";
+C.displayName = "Search";
 export {
-  h as Search
+  C as Search
 };