@moda/om 15.9.0 → 15.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moda/om",
-  "version": "15.9.0",
+  "version": "15.10.0",
   "description": "Moda Operandi design system",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -69,7 +69,7 @@
     "@jedmao/semantic-release-npm-github-config": "^1.0.9",
     "@moda/rollup-plugin-postcss": "^4.0.1",
     "@rollup/plugin-babel": "^5.2.3",
-    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@storybook/addon-actions": "^6.2.1",
     "@storybook/addon-essentials": "^6.2.1",

package/src/components/PasswordInput/PasswordInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 import { Clickable } from '../Clickable';
 import { Input, FieldProps } from '../Field';
 import { Text } from '../Text';
@@ -7,26 +7,31 @@ import './PasswordInput.scss';
 
 export type PasswordInputProps = FieldProps;
 
-export const PasswordInput: React.FC<PasswordInputProps> = ({ ...rest }) => {
-  const [passwordShown, setPasswordShown] = useState(false);
-  const togglePasswordVisiblity = () => {
-    setPasswordShown(passwordShown ? false : true);
-  };
+export const PasswordInput = forwardRef(
+  ({ ...rest }: PasswordInputProps, ref: React.Ref<HTMLInputElement>) => {
+    const [passwordShown, setPasswordShown] = useState(false);
+    const togglePasswordVisiblity = () => {
+      setPasswordShown(passwordShown ? false : true);
+    };
 
-  return (
-    <div className='PasswordInput'>
-      <Input type={passwordShown ? 'text' : 'password'} {...rest} />
-      <Clickable
-        className='PasswordInput__password-action'
-        onClick={togglePasswordVisiblity}
-        type='button'
-      >
-        {passwordShown ? (
-          <Text treatment='eyebrow'>HIDE</Text>
-        ) : (
-          <Text treatment='eyebrow'>SHOW</Text>
-        )}
-      </Clickable>
-    </div>
-  );
-};
+    return (
+      <div className='PasswordInput'>
+        <Input type={passwordShown ? 'text' : 'password'} {...rest} ref={ref} />
+
+        <Clickable
+          className='PasswordInput__password-action'
+          onClick={togglePasswordVisiblity}
+          type='button'
+        >
+          {passwordShown ? (
+            <Text treatment='eyebrow'>HIDE</Text>
+          ) : (
+            <Text treatment='eyebrow'>SHOW</Text>
+          )}
+        </Clickable>
+      </div>
+    );
+  }
+);
+
+PasswordInput.displayName = 'PasswordInput';