@gympass/yoga 7.87.1 → 7.88.0

package/esm/Input/web/Password.js

@@ -1,92 +1,146 @@
-var _excluded = ["disabled", "style", "className", "full"];
-
-var _templateObject, _templateObject2, _templateObject3;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect } from "react";
+import styled from "styled-components";
+import { bool, string, shape } from "prop-types";
+import { Visibility, VisibilityOff } from "@gympass/yoga-icons";
+import Input from "./Input";
+const ICON_SIZE = 24;
+const StyledInput = styled(Input)`
+  ${({
+  theme: {
+    yoga: {
+      components: { input }
+    }
+  }
+}) => `
+    padding-right: ${ICON_SIZE + input.padding.right}px;
+  `}
+`;
+const Wrapper = styled.div`
+  position: relative;
+  display: inline-block;
 
-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); }
+  ${({ full }) => `
+    ${full ? "width: 100%;" : ""}
+  `}
+`;
+const IconWrapper = styled.div`
+  ${({
+  disabled,
+  theme: {
+    yoga: {
+      colors,
+      spacing,
+      components: { input }
+    }
+  }
+}) => `
+    position: absolute;
+    top: 0;
+    right: 0;
 
-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; }
+    padding-right: ${spacing.small}px;
+    padding-left: ${spacing.xxsmall}px;
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+    height: ${input.height}px;
+    cursor: pointer;
 
-import React, { useState, useRef, useEffect } from 'react';
-import styled from 'styled-components';
-import { bool, string, shape } from 'prop-types';
-import { Visibility, VisibilityOff } from '@gympass/yoga-icons';
-import Input from './Input';
-var ICON_SIZE = 24;
-var StyledInput = styled(Input)(_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 Wrapper = styled.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  ";
-});
-var IconWrapper = styled.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  ";
-});
+    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 = useState(false),
-      showPassword = _useState[0],
-      toggleShowPassword = _useState[1];
+    ${disabled ? `
+      cursor: not-allowed;
+      pointer-events: none;
+    ` : ""}
 
-  var inputRef = useRef(null);
-  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] = useState(false);
+  const inputRef = useRef(null);
+  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.createElement(Wrapper, {
-    style: style,
-    className: className,
-    full: full
-  }, /*#__PURE__*/React.createElement(StyledInput, _extends({}, props, {
-    disabled: disabled,
-    full: full,
-    ref: inputRef,
-    cleanable: false,
-    type: showPassword ? 'text' : 'password'
-  })), /*#__PURE__*/React.createElement(IconWrapper, {
-    tabIndex: disabled ? null : 0,
-    onClick: togglePassword,
-    onKeyDown: togglePassword,
-    disabled: disabled,
-    role: "button"
-  }, showPassword ? /*#__PURE__*/React.createElement(Visibility, {
-    width: 20,
-    height: 20
-  }) : /*#__PURE__*/React.createElement(VisibilityOff, {
-    width: 20,
-    height: 20
-  })));
+  return /* @__PURE__ */ jsxs(Wrapper, { style, className, full, children: [
+    /* @__PURE__ */ jsx(
+      StyledInput,
+      __spreadProps(__spreadValues({}, props), {
+        disabled,
+        full,
+        ref: inputRef,
+        cleanable: false,
+        type: showPassword ? "text" : "password"
+      })
+    ),
+    /* @__PURE__ */ jsx(
+      IconWrapper,
+      {
+        tabIndex: disabled ? null : 0,
+        onClick: togglePassword,
+        onKeyDown: togglePassword,
+        disabled,
+        role: "button",
+        children: showPassword ? /* @__PURE__ */ jsx(Visibility, { width: 20, height: 20 }) : /* @__PURE__ */ jsx(VisibilityOff, { width: 20, height: 20 })
+      }
+    )
+  ] });
 };
-
 Password.propTypes = {
   className: string,
   disabled: bool,
@@ -94,9 +148,12 @@ Password.propTypes = {
   style: shape({})
 };
 Password.defaultProps = {
-  className: undefined,
+  className: void 0,
   disabled: false,
   full: false,
-  style: undefined
+  style: void 0
+};
+var Password_default = Password;
+export {
+  Password_default as default
 };
-export default Password;

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

@@ -1,90 +1,84 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { ThemeProvider, Input } from '../..';
-describe('<Input.Password />', function () {
-  describe('Snapshots', function () {
-    it('should match with default input', function () {
-      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, null))),
-          container = _render.container;
-
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { ThemeProvider, Input } from "../..";
+describe("<Input.Password />", () => {
+  describe("Snapshots", () => {
+    it("should match with default input", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input.Password, {}) })
+      );
       expect(container).toMatchSnapshot();
     });
-    it('should match with disabled input', function () {
-      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
-        disabled: true
-      }))),
-          container = _render2.container;
-
+    it("should match with disabled input", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input.Password, { disabled: true }) })
+      );
       expect(container).toMatchSnapshot();
     });
-    it('should match with full width', function () {
-      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
-        label: "Label",
-        full: true
-      }))),
-          container = _render3.container;
-
+    it("should match with full width", () => {
+      const { container } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input.Password, { label: "Label", full: true }) })
+      );
       expect(container).toMatchSnapshot();
     });
   });
-  describe('Events', function () {
-    it('should call onChange', function () {
-      var onChangeMock = jest.fn();
-
-      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
-        label: "Input",
-        "data-testid": "input",
-        onChange: onChangeMock
-      }))),
-          getByTestId = _render4.getByTestId;
-
-      fireEvent.change(getByTestId('input'), {
-        target: {
-          value: 'foo'
-        }
-      });
+  describe("Events", () => {
+    it("should call onChange", () => {
+      const onChangeMock = jest.fn();
+      const { getByTestId } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+          Input.Password,
+          {
+            label: "Input",
+            "data-testid": "input",
+            onChange: onChangeMock
+          }
+        ) })
+      );
+      fireEvent.change(getByTestId("input"), { target: { value: "foo" } });
       expect(onChangeMock).toHaveBeenCalled();
     });
-    it('should call onFocus', function () {
-      var onFocusMock = jest.fn();
-
-      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
-        label: "Input",
-        "data-testid": "input",
-        onFocus: onFocusMock
-      }))),
-          getByTestId = _render5.getByTestId;
-
-      fireEvent.focus(getByTestId('input'));
+    it("should call onFocus", () => {
+      const onFocusMock = jest.fn();
+      const { getByTestId } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+          Input.Password,
+          {
+            label: "Input",
+            "data-testid": "input",
+            onFocus: onFocusMock
+          }
+        ) })
+      );
+      fireEvent.focus(getByTestId("input"));
       expect(onFocusMock).toHaveBeenCalled();
     });
-    it('should call onBlur', function () {
-      var onBlurMock = jest.fn();
-
-      var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
-        label: "Input",
-        "data-testid": "input",
-        onBlur: onBlurMock
-      }))),
-          getByTestId = _render6.getByTestId;
-
-      fireEvent.focus(getByTestId('input'));
-      fireEvent.blur(getByTestId('input'));
+    it("should call onBlur", () => {
+      const onBlurMock = jest.fn();
+      const { getByTestId } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
+          Input.Password,
+          {
+            label: "Input",
+            "data-testid": "input",
+            onBlur: onBlurMock
+          }
+        ) })
+      );
+      fireEvent.focus(getByTestId("input"));
+      fireEvent.blur(getByTestId("input"));
       expect(onBlurMock).toHaveBeenCalled();
     });
   });
-  describe('visibility button', function () {
-    it('should toggle password visibility when click visibility button', function () {
-      var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
-        label: "Input",
-        "data-testid": "input"
-      }))),
-          getByRole = _render7.getByRole,
-          getByTestId = _render7.getByTestId;
-
-      expect(getByTestId('input').type).toBe('password');
-      fireEvent.click(getByRole('button'));
-      expect(getByTestId('input').type).toBe('text');
+  describe("visibility button", () => {
+    it("should toggle password visibility when click visibility button", () => {
+      const { getByRole, getByTestId } = render(
+        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Input.Password, { label: "Input", "data-testid": "input" }) })
+      );
+      expect(getByTestId("input").type).toBe("password");
+      fireEvent.click(getByRole("button"));
+      expect(getByTestId("input").type).toBe("text");
     });
   });
-});
+});

package/esm/Input/web/Phone.js

@@ -1,124 +1,166 @@
-var _excluded = ["defaultCountry", "disabled", "readOnly", "error", "full", "helper", "label", "placeholder", "value", "onChange"];
-
-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; }
-
-import React, { useRef, useCallback } from 'react';
-import BasePhoneInput from 'react-phone-input-2';
-import PropTypes, { func, string, bool } from 'prop-types';
-import * as S from './Phone.style';
-import Input from './Input';
-import { useCombinedRefs } from '../../hooks';
-var phoneBaseSettings = {
-  onlyCountries: ['ar', 'br', 'cl', 'de', 'es', 'gb', 'ie', 'it', 'mx', 'pt', 'us']
-};
-var Phone = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
-  var defaultCountry = _ref.defaultCountry,
-      disabled = _ref.disabled,
-      readOnly = _ref.readOnly,
-      error = _ref.error,
-      full = _ref.full,
-      helper = _ref.helper,
-      label = _ref.label,
-      placeholder = _ref.placeholder,
-      value = _ref.value,
-      _onChange = _ref.onChange,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  var inputRef = useCombinedRefs(forwardedRef);
-  var currentCountry = useRef(defaultCountry);
-  var onChangeCountry = useCallback(function (countryCode) {
-    if (currentCountry.current !== countryCode) {
-      inputRef.current.focus();
-      currentCountry.current = countryCode;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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 /*#__PURE__*/React.createElement(Input, _extends({}, _extends({
-    disabled: disabled,
-    readOnly: readOnly,
-    error: error,
-    full: full,
-    helper: helper,
-    value: value
-  }, rest), {
-    ref: inputRef,
-    label: "",
-    onClean: function onClean(phoneNumber) {
-      return _onChange(phoneNumber);
+  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];
     }
-  }), /*#__PURE__*/React.createElement(S.Container, {
-    error: error,
-    disabled: disabled,
-    full: full
-  }, /*#__PURE__*/React.createElement(BasePhoneInput, _extends({}, phoneBaseSettings, {
-    ref: function ref(phoneRef) {
-      inputRef.current = phoneRef == null ? void 0 : phoneRef.numberInputRef;
-    },
-    inputProps: {
-      readOnly: readOnly
-    },
-    disabled: disabled,
-    disableDropdown: readOnly,
-    country: defaultCountry,
-    specialLabel: label,
-    placeholder: placeholder,
-    onChange: function onChange(phoneNumber, options) {
-      _onChange(phoneNumber, options);
-
-      onChangeCountry(options.countryCode);
-    },
-    value: value
-  }))));
-});
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import React, { useRef, useCallback } from "react";
+import BasePhoneInput from "react-phone-input-2";
+import PropTypes, { func, string, bool } from "prop-types";
+import * as S from "./Phone.style";
+import Input from "./Input";
+import { useCombinedRefs } from "../../hooks";
+const phoneBaseSettings = {
+  onlyCountries: [
+    "ar",
+    "br",
+    "cl",
+    "de",
+    "es",
+    "gb",
+    "ie",
+    "it",
+    "mx",
+    "pt",
+    "us"
+  ]
+};
+const Phone = React.forwardRef(
+  (_a, forwardedRef) => {
+    var _b = _a, {
+      defaultCountry,
+      disabled,
+      readOnly,
+      error,
+      full,
+      helper,
+      label,
+      placeholder,
+      value,
+      onChange
+    } = _b, rest = __objRest(_b, [
+      "defaultCountry",
+      "disabled",
+      "readOnly",
+      "error",
+      "full",
+      "helper",
+      "label",
+      "placeholder",
+      "value",
+      "onChange"
+    ]);
+    const inputRef = useCombinedRefs(forwardedRef);
+    const currentCountry = useRef(defaultCountry);
+    const onChangeCountry = useCallback((countryCode) => {
+      if (currentCountry.current !== countryCode) {
+        inputRef.current.focus();
+        currentCountry.current = countryCode;
+      }
+    }, []);
+    return /* @__PURE__ */ jsx(
+      Input,
+      __spreadProps(__spreadValues({}, __spreadValues({
+        disabled,
+        readOnly,
+        error,
+        full,
+        helper,
+        value
+      }, rest)), {
+        ref: inputRef,
+        label: "",
+        onClean: (phoneNumber) => onChange(phoneNumber),
+        children: /* @__PURE__ */ jsx(S.Container, { error, disabled, full, children: /* @__PURE__ */ jsx(
+          BasePhoneInput,
+          __spreadProps(__spreadValues({}, phoneBaseSettings), {
+            ref: (phoneRef) => {
+              inputRef.current = phoneRef == null ? void 0 : phoneRef.numberInputRef;
+            },
+            inputProps: { readOnly },
+            disabled,
+            disableDropdown: readOnly,
+            country: defaultCountry,
+            specialLabel: label,
+            placeholder,
+            onChange: (phoneNumber, options) => {
+              onChange(phoneNumber, options);
+              onChangeCountry(options.countryCode);
+            },
+            value
+          })
+        ) })
+      })
+    );
+  }
+);
 Phone.propTypes = {
   className: string,
-
   /** display a close icon to clean the field */
   cleanable: bool,
-
   /** default country to be selected on the dropdown */
   defaultCountry: PropTypes.string,
-
   /** disable the whole input */
   disabled: bool,
-
   /** display a error message and error style */
   error: string,
-
   /** should occupy the whole container width */
   full: bool,
-
   /** a helper text to be displayed below field */
   helper: string,
-
   /** label for the input */
   label: string,
-
   /** make the input read only */
   readOnly: bool,
-
   /** value of the input */
   value: string,
-
   /** callback invoked when value changes, either by typing of selecting a country */
   onChange: func,
-
   /** placeholder to show when the input is cleared */
   placeholder: string
 };
 Phone.defaultProps = {
-  className: undefined,
+  className: void 0,
   cleanable: true,
-  defaultCountry: 'br',
+  defaultCountry: "br",
   disabled: false,
-  error: undefined,
+  error: void 0,
   full: false,
-  helper: undefined,
-  label: '',
+  helper: void 0,
+  label: "",
   readOnly: false,
-  value: '',
-  onChange: function onChange() {},
-  placeholder: '+55 (11) 999999999'
+  value: "",
+  onChange: () => {
+  },
+  placeholder: "+55 (11) 999999999"
+};
+var Phone_default = Phone;
+export {
+  Phone_default as default
 };
-export default Phone;