@gympass/yoga 7.87.1 → 7.88.1

package/cjs/Input/web/Password.js

@@ -1,121 +1,187 @@
 "use strict";
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _propTypes = require("prop-types");
-
-var _yogaIcons = require("@gympass/yoga-icons");
-
-var _Input = _interopRequireDefault(require("./Input"));
-
-var _excluded = ["disabled", "style", "className", "full"];
-
-var _templateObject, _templateObject2, _templateObject3;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var ICON_SIZE = 24;
-var StyledInput = (0, _styledComponents["default"])(_Input["default"])(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var input = _ref.theme.yoga.components.input;
-  return "\n    padding-right: " + (ICON_SIZE + input.padding.right) + "px;\n  ";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Password_exports = {};
+__export(Password_exports, {
+  default: () => Password_default
 });
+module.exports = __toCommonJS(Password_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_prop_types = require("prop-types");
+var import_yoga_icons = require("@gympass/yoga-icons");
+var import_Input = __toESM(require("./Input"));
+const ICON_SIZE = 24;
+const StyledInput = (0, import_styled_components.default)(import_Input.default)`
+  ${({
+  theme: {
+    yoga: {
+      components: { input }
+    }
+  }
+}) => `
+    padding-right: ${ICON_SIZE + input.padding.right}px;
+  `}
+`;
+const Wrapper = import_styled_components.default.div`
+  position: relative;
+  display: inline-block;
+
+  ${({ full }) => `
+    ${full ? "width: 100%;" : ""}
+  `}
+`;
+const IconWrapper = import_styled_components.default.div`
+  ${({
+  disabled,
+  theme: {
+    yoga: {
+      colors,
+      spacing,
+      components: { input }
+    }
+  }
+}) => `
+    position: absolute;
+    top: 0;
+    right: 0;
 
-var Wrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-block;\n\n  ", "\n"])), function (_ref2) {
-  var full = _ref2.full;
-  return "\n    " + (full ? 'width: 100%;' : '') + "\n  ";
-});
+    padding-right: ${spacing.small}px;
+    padding-left: ${spacing.xxsmall}px;
 
-var IconWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref3) {
-  var disabled = _ref3.disabled,
-      _ref3$theme$yoga = _ref3.theme.yoga,
-      colors = _ref3$theme$yoga.colors,
-      spacing = _ref3$theme$yoga.spacing,
-      input = _ref3$theme$yoga.components.input;
-  return "\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    padding-right: " + spacing.small + "px;\n    padding-left: " + spacing.xxsmall + "px;\n\n    height: " + input.height + "px;\n    cursor: pointer;\n\n    outline: none;\n\n    &:hover svg, &:focus svg {\n      fill: " + input.font.color.focus + ";\n    }\n\n    " + (disabled ? "\n      cursor: not-allowed;\n      pointer-events: none;\n    " : '') + "\n\n    svg {\n      height: " + input.height + "px;\n      width: 20px;\n      fill: " + input.font.color["default"] + ";\n\n      " + (disabled ? "\n            fill: " + colors.elements.backgroundAndDisabled + ";\n            pointer-events: none;" : '') + "\n    }\n  ";
-});
+    height: ${input.height}px;
+    cursor: pointer;
+
+    outline: none;
 
-var Password = function Password(_ref4) {
-  var disabled = _ref4.disabled,
-      style = _ref4.style,
-      className = _ref4.className,
-      full = _ref4.full,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded);
+    &:hover svg, &:focus svg {
+      fill: ${input.font.color.focus};
+    }
 
-  var _useState = (0, _react.useState)(false),
-      showPassword = _useState[0],
-      toggleShowPassword = _useState[1];
+    ${disabled ? `
+      cursor: not-allowed;
+      pointer-events: none;
+    ` : ""}
 
-  var inputRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    var element = inputRef.current;
+    svg {
+      height: ${input.height}px;
+      width: 20px;
+      fill: ${input.font.color.default};
 
+      ${disabled ? `
+            fill: ${colors.elements.backgroundAndDisabled};
+            pointer-events: none;` : ""}
+    }
+  `}
+`;
+const Password = (_a) => {
+  var _b = _a, { disabled, style, className, full } = _b, props = __objRest(_b, ["disabled", "style", "className", "full"]);
+  const [showPassword, toggleShowPassword] = (0, import_react.useState)(false);
+  const inputRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const { current: element } = inputRef;
     if (element.value.length) {
       element.setSelectionRange(element.value.length, element.value.length);
     }
   }, [showPassword]);
-
-  var togglePassword = function togglePassword(e) {
-    if (e.type === 'click' || e.key === 'Enter' || e.key === ' ') {
+  const togglePassword = (e) => {
+    if (e.type === "click" || e.key === "Enter" || e.key === " ") {
       e.preventDefault();
       toggleShowPassword(!showPassword);
     }
-
-    if (e.type === 'click') {
+    if (e.type === "click") {
       inputRef.current.focus();
     }
   };
-
-  return /*#__PURE__*/_react["default"].createElement(Wrapper, {
-    style: style,
-    className: className,
-    full: full
-  }, /*#__PURE__*/_react["default"].createElement(StyledInput, _extends({}, props, {
-    disabled: disabled,
-    full: full,
-    ref: inputRef,
-    cleanable: false,
-    type: showPassword ? 'text' : 'password'
-  })), /*#__PURE__*/_react["default"].createElement(IconWrapper, {
-    tabIndex: disabled ? null : 0,
-    onClick: togglePassword,
-    onKeyDown: togglePassword,
-    disabled: disabled,
-    role: "button"
-  }, showPassword ? /*#__PURE__*/_react["default"].createElement(_yogaIcons.Visibility, {
-    width: 20,
-    height: 20
-  }) : /*#__PURE__*/_react["default"].createElement(_yogaIcons.VisibilityOff, {
-    width: 20,
-    height: 20
-  })));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, { style, className, full, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StyledInput,
+      __spreadProps(__spreadValues({}, props), {
+        disabled,
+        full,
+        ref: inputRef,
+        cleanable: false,
+        type: showPassword ? "text" : "password"
+      })
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      IconWrapper,
+      {
+        tabIndex: disabled ? null : 0,
+        onClick: togglePassword,
+        onKeyDown: togglePassword,
+        disabled,
+        role: "button",
+        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 })
+      }
+    )
+  ] });
 };
-
 Password.propTypes = {
-  className: _propTypes.string,
-  disabled: _propTypes.bool,
-  full: _propTypes.bool,
-  style: (0, _propTypes.shape)({})
+  className: import_prop_types.string,
+  disabled: import_prop_types.bool,
+  full: import_prop_types.bool,
+  style: (0, import_prop_types.shape)({})
 };
 Password.defaultProps = {
-  className: undefined,
+  className: void 0,
   disabled: false,
   full: false,
-  style: undefined
+  style: void 0
 };
-var _default = Password;
-exports["default"] = _default;
+var Password_default = Password;

package/cjs/Input/web/Password.test.js

@@ -0,0 +1,107 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_react2 = require("@testing-library/react");
+var import__ = require("../..");
+describe("<Input.Password />", () => {
+  describe("Snapshots", () => {
+    it("should match with default input", () => {
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Input.Password, {}) })
+      );
+      expect(container).toMatchSnapshot();
+    });
+    it("should match with disabled input", () => {
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Input.Password, { disabled: true }) })
+      );
+      expect(container).toMatchSnapshot();
+    });
+    it("should match with full width", () => {
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Input.Password, { label: "Label", full: true }) })
+      );
+      expect(container).toMatchSnapshot();
+    });
+  });
+  describe("Events", () => {
+    it("should call onChange", () => {
+      const onChangeMock = jest.fn();
+      const { getByTestId } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import__.Input.Password,
+          {
+            label: "Input",
+            "data-testid": "input",
+            onChange: onChangeMock
+          }
+        ) })
+      );
+      import_react2.fireEvent.change(getByTestId("input"), { target: { value: "foo" } });
+      expect(onChangeMock).toHaveBeenCalled();
+    });
+    it("should call onFocus", () => {
+      const onFocusMock = jest.fn();
+      const { getByTestId } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import__.Input.Password,
+          {
+            label: "Input",
+            "data-testid": "input",
+            onFocus: onFocusMock
+          }
+        ) })
+      );
+      import_react2.fireEvent.focus(getByTestId("input"));
+      expect(onFocusMock).toHaveBeenCalled();
+    });
+    it("should call onBlur", () => {
+      const onBlurMock = jest.fn();
+      const { getByTestId } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import__.Input.Password,
+          {
+            label: "Input",
+            "data-testid": "input",
+            onBlur: onBlurMock
+          }
+        ) })
+      );
+      import_react2.fireEvent.focus(getByTestId("input"));
+      import_react2.fireEvent.blur(getByTestId("input"));
+      expect(onBlurMock).toHaveBeenCalled();
+    });
+  });
+  describe("visibility button", () => {
+    it("should toggle password visibility when click visibility button", () => {
+      const { getByRole, getByTestId } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Input.Password, { label: "Input", "data-testid": "input" }) })
+      );
+      expect(getByTestId("input").type).toBe("password");
+      import_react2.fireEvent.click(getByRole("button"));
+      expect(getByTestId("input").type).toBe("text");
+    });
+  });
+});