@gympass/yoga 7.120.1 → 7.121.0

package/cjs/Input/web/Helper.js

@@ -96,7 +96,7 @@ const Helper = ({
   a11yId
 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, { disabled, error, children: [
   (error || helper) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Info, __spreadProps(__spreadValues({ as: "span", "aria-live": "polite" }, a11yId && { id: a11yId }), { children: error || helper })),
-  maxLength && !hideMaxLength && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Info, { as: "span", children: [
+  maxLength && !hideMaxLength && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Info, { as: "span", "aria-hidden": true, children: [
     length,
     "/",
     maxLength

package/cjs/Input/web/Input.js

@@ -152,6 +152,7 @@ const Input = import_react.default.forwardRef(
       hideMaxLength,
       rightIcon,
       a11yId,
+      closeAriaLabel,
       includeAriaAttributes,
       leftElement
     } = _b, props = __objRest(_b, [
@@ -171,6 +172,7 @@ const Input = import_react.default.forwardRef(
       "hideMaxLength",
       "rightIcon",
       "a11yId",
+      "closeAriaLabel",
       "includeAriaAttributes",
       "leftElement"
     ]);
@@ -250,7 +252,7 @@ const Input = import_react.default.forwardRef(
                 height: 20,
                 role: "button",
                 hasIconRight: !!rightIcon,
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga_icons.Close, { "aria-label": "Clear" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga_icons.Close, { "aria-label": closeAriaLabel })
               }
             ),
             !!rightIcon && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -310,6 +312,8 @@ Input.propTypes = {
   a11yId: import_prop_types.string,
   /** useful for components that extend the Input component and have their own ARIA attributes implementation (e.g. Dropdown) */
   includeAriaAttributes: import_prop_types.bool,
+  /** this prop will be used in the aria-label of the clear input button. */
+  closeAriaLabel: import_prop_types.string,
   /** element on the left */
   leftElement: import_prop_types.node
 };
@@ -334,6 +338,7 @@ Input.defaultProps = {
   placeholder: void 0,
   rightIcon: void 0,
   a11yId: void 0,
+  closeAriaLabel: "Clear",
   includeAriaAttributes: true,
   leftElement: void 0
 };

package/cjs/Input/web/Password.js

@@ -130,7 +130,21 @@ const IconWrapper = import_styled_components.default.div`
   `}
 `;
 const Password = (_a) => {
-  var _b = _a, { disabled, style, className, full } = _b, props = __objRest(_b, ["disabled", "style", "className", "full"]);
+  var _b = _a, {
+    disabled,
+    style,
+    className,
+    full,
+    showPasswordAriaLabel,
+    hidePasswordAriaLabel
+  } = _b, props = __objRest(_b, [
+    "disabled",
+    "style",
+    "className",
+    "full",
+    "showPasswordAriaLabel",
+    "hidePasswordAriaLabel"
+  ]);
   const [showPassword, toggleShowPassword] = (0, import_react.useState)(false);
   const inputRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
@@ -167,6 +181,7 @@ const Password = (_a) => {
         onKeyDown: togglePassword,
         disabled,
         role: "button",
+        "aria-label": showPassword ? showPasswordAriaLabel : hidePasswordAriaLabel,
         children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga_icons.Visibility, { width: 20, height: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga_icons.VisibilityOff, { width: 20, height: 20 })
       }
     )
@@ -176,12 +191,16 @@ Password.propTypes = {
   className: import_prop_types.string,
   disabled: import_prop_types.bool,
   full: import_prop_types.bool,
+  showPasswordAriaLabel: import_prop_types.string,
+  hidePasswordAriaLabel: import_prop_types.string,
   style: (0, import_prop_types.shape)({})
 };
 Password.defaultProps = {
   className: void 0,
   disabled: false,
   full: false,
-  style: void 0
+  style: void 0,
+  showPasswordAriaLabel: void 0,
+  hidePasswordAriaLabel: void 0
 };
 var Password_default = Password;

package/esm/Input/web/Helper.js

@@ -64,7 +64,7 @@ const Helper = ({
   a11yId
 }) => /* @__PURE__ */ jsxs(Wrapper, { disabled, error, children: [
   (error || helper) && /* @__PURE__ */ jsx(Info, __spreadProps(__spreadValues({ as: "span", "aria-live": "polite" }, a11yId && { id: a11yId }), { children: error || helper })),
-  maxLength && !hideMaxLength && /* @__PURE__ */ jsxs(Info, { as: "span", children: [
+  maxLength && !hideMaxLength && /* @__PURE__ */ jsxs(Info, { as: "span", "aria-hidden": true, children: [
     length,
     "/",
     maxLength

package/esm/Input/web/Input.js

@@ -130,6 +130,7 @@ const Input = React.forwardRef(
       hideMaxLength,
       rightIcon,
       a11yId,
+      closeAriaLabel,
       includeAriaAttributes,
       leftElement
     } = _b, props = __objRest(_b, [
@@ -149,6 +150,7 @@ const Input = React.forwardRef(
       "hideMaxLength",
       "rightIcon",
       "a11yId",
+      "closeAriaLabel",
       "includeAriaAttributes",
       "leftElement"
     ]);
@@ -228,7 +230,7 @@ const Input = React.forwardRef(
                 height: 20,
                 role: "button",
                 hasIconRight: !!rightIcon,
-                children: /* @__PURE__ */ jsx(Close, { "aria-label": "Clear" })
+                children: /* @__PURE__ */ jsx(Close, { "aria-label": closeAriaLabel })
               }
             ),
             !!rightIcon && !readOnly && /* @__PURE__ */ jsx(
@@ -288,6 +290,8 @@ Input.propTypes = {
   a11yId: string,
   /** useful for components that extend the Input component and have their own ARIA attributes implementation (e.g. Dropdown) */
   includeAriaAttributes: bool,
+  /** this prop will be used in the aria-label of the clear input button. */
+  closeAriaLabel: string,
   /** element on the left */
   leftElement: node
 };
@@ -312,6 +316,7 @@ Input.defaultProps = {
   placeholder: void 0,
   rightIcon: void 0,
   a11yId: void 0,
+  closeAriaLabel: "Clear",
   includeAriaAttributes: true,
   leftElement: void 0
 };

package/esm/Input/web/Password.js

@@ -99,7 +99,21 @@ const IconWrapper = styled.div`
   `}
 `;
 const Password = (_a) => {
-  var _b = _a, { disabled, style, className, full } = _b, props = __objRest(_b, ["disabled", "style", "className", "full"]);
+  var _b = _a, {
+    disabled,
+    style,
+    className,
+    full,
+    showPasswordAriaLabel,
+    hidePasswordAriaLabel
+  } = _b, props = __objRest(_b, [
+    "disabled",
+    "style",
+    "className",
+    "full",
+    "showPasswordAriaLabel",
+    "hidePasswordAriaLabel"
+  ]);
   const [showPassword, toggleShowPassword] = useState(false);
   const inputRef = useRef(null);
   useEffect(() => {
@@ -136,6 +150,7 @@ const Password = (_a) => {
         onKeyDown: togglePassword,
         disabled,
         role: "button",
+        "aria-label": showPassword ? showPasswordAriaLabel : hidePasswordAriaLabel,
         children: showPassword ? /* @__PURE__ */ jsx(Visibility, { width: 20, height: 20 }) : /* @__PURE__ */ jsx(VisibilityOff, { width: 20, height: 20 })
       }
     )
@@ -145,13 +160,17 @@ Password.propTypes = {
   className: string,
   disabled: bool,
   full: bool,
+  showPasswordAriaLabel: string,
+  hidePasswordAriaLabel: string,
   style: shape({})
 };
 Password.defaultProps = {
   className: void 0,
   disabled: false,
   full: false,
-  style: void 0
+  style: void 0,
+  showPasswordAriaLabel: void 0,
+  hidePasswordAriaLabel: void 0
 };
 var Password_default = Password;
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.120.1",
+  "version": "7.121.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "types": "./typings/index.d.ts",
@@ -58,7 +58,7 @@
     "react-native": "0.72.3",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "5c9b87033561fb19b6f4ceab7092c3c9340ac720",
+  "gitHead": "fa860d8aeb60bf924787fcabc93a8cdbe52cd416",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"