@gympass/yoga 7.87.1 → 7.88.1

package/cjs/Input/web/Input.js

@@ -1,245 +1,340 @@
 "use strict";
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _propTypes = require("prop-types");
-
-var _yogaIcons = require("@gympass/yoga-icons");
-
-var _Theme = require("../../Theme");
-
-var _Field = _interopRequireDefault(require("./Field"));
-
-var _Helper = _interopRequireDefault(require("./Helper"));
-
-var _Fieldset = _interopRequireDefault(require("./Fieldset"));
-
-var _Legend = _interopRequireDefault(require("./Legend"));
-
-var _Label = _interopRequireDefault(require("./Label"));
-
-var _excluded = ["cleanable", "children", "disabled", "error", "full", "helper", "label", "maxLength", "readOnly", "style", "value", "onChange", "onClean", "hideMaxLength", "rightIcon", "a11yId", "includeAriaAttributes", "leftElement"];
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
-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 Control = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  width: ", ";\n"])), function (_ref) {
-  var full = _ref.full;
-  return full ? '100%' : (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n          ", "px\n        "])), _Theme.theme.components.input.width);
-});
-
-var IconWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
-  var disabled = _ref2.disabled,
-      _ref2$hasIconRight = _ref2.hasIconRight,
-      hasIconRight = _ref2$hasIconRight === void 0 ? false : _ref2$hasIconRight,
-      _ref2$theme$yoga = _ref2.theme.yoga,
-      colors = _ref2$theme$yoga.colors,
-      spacing = _ref2$theme$yoga.spacing,
-      input = _ref2$theme$yoga.components.input;
-  return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    position: absolute;\n    top: 0;\n    right: ", "px;\n\n    padding-right: ", "px;\n    padding-left: ", "px;\n\n    height: ", "px;\n    cursor: pointer;\n\n    outline: none;\n\n    &:hover svg,\n    &:focus svg {\n      fill: ", ";\n    }\n\n    svg {\n      height: ", "px;\n      width: 20px;\n      fill: ", ";\n    }\n\n    ", "\n  "])), hasIconRight ? spacing.large : 0, spacing.small, spacing.xxsmall, input.height, input.font.color.focus, input.height, input.font.color["default"], disabled ? "\n      cursor: not-allowed;\n      pointer-events: none;\n      svg {\n        fill: " + colors.text.disabled + ";\n      }\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 Input_exports = {};
+__export(Input_exports, {
+  default: () => Input_default
 });
+module.exports = __toCommonJS(Input_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_Theme = require("../../Theme");
+var import_Field = __toESM(require("./Field"));
+var import_Helper = __toESM(require("./Helper"));
+var import_Fieldset = __toESM(require("./Fieldset"));
+var import_Legend = __toESM(require("./Legend"));
+var import_Label = __toESM(require("./Label"));
+const Control = import_styled_components.default.div`
+  box-sizing: border-box;
+  width: ${({ full }) => full ? "100%" : import_styled_components.css`
+          ${import_Theme.theme.components.input.width}px
+        `};
+`;
+const IconWrapper = import_styled_components.default.div`
+  ${({
+  disabled,
+  hasIconRight = false,
+  theme: {
+    yoga: {
+      colors,
+      spacing,
+      components: { input }
+    }
+  }
+}) => import_styled_components.css`
+    position: absolute;
+    top: 0;
+    right: ${hasIconRight ? spacing.large : 0}px;
 
-var LeftElementWrapper = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref3) {
-  var spacing = _ref3.theme.yoga.spacing;
-  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    position: absolute;\n    left: ", "px;\n    top: 50%;\n    transform: translateY(-50%);\n  "])), spacing.xxsmall);
-});
+    padding-right: ${spacing.small}px;
+    padding-left: ${spacing.xxsmall}px;
 
-var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref4, ref) {
-  var cleanable = _ref4.cleanable,
-      children = _ref4.children,
-      disabled = _ref4.disabled,
-      error = _ref4.error,
-      full = _ref4.full,
-      helper = _ref4.helper,
-      label = _ref4.label,
-      maxLength = _ref4.maxLength,
-      readOnly = _ref4.readOnly,
-      style = _ref4.style,
-      value = _ref4.value,
-      onChange = _ref4.onChange,
-      onClean = _ref4.onClean,
-      hideMaxLength = _ref4.hideMaxLength,
-      rightIcon = _ref4.rightIcon,
-      a11yId = _ref4.a11yId,
-      includeAriaAttributes = _ref4.includeAriaAttributes,
-      leftElement = _ref4.leftElement,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded);
+    height: ${input.height}px;
+    cursor: pointer;
 
-  var inputRef = ref || (0, _react.useRef)(null);
+    outline: none;
 
-  var cleanField = function cleanField(e) {
-    if (e.type === 'click' || e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      onClean('');
-      inputRef.current.focus();
+    &:hover svg,
+    &:focus svg {
+      fill: ${input.font.color.focus};
     }
-  };
 
-  var hasHelper = helper || maxLength || error;
-  var helperA11yId = includeAriaAttributes && a11yId && a11yId + "-helper";
-  var labelA11yId = includeAriaAttributes && a11yId && a11yId + "-label";
-  var a11yFieldProps;
+    svg {
+      height: ${input.height}px;
+      width: 20px;
+      fill: ${input.font.color.default};
+    }
 
-  if (includeAriaAttributes) {
-    a11yFieldProps = a11yId ? _extends({}, hasHelper && {
-      'aria-describedby': helperA11yId
-    }, label && {
-      'aria-labelledby': labelA11yId
-    }) : _extends({}, label && {
-      'aria-label': label
-    });
-    a11yFieldProps['aria-invalid'] = !!error;
-  } else {
-    a11yFieldProps = {};
+    ${disabled ? `
+      cursor: not-allowed;
+      pointer-events: none;
+      svg {
+        fill: ${colors.text.disabled};
+      }
+    ` : ""}
+  `}
+`;
+const LeftElementWrapper = import_styled_components.default.div`
+  ${({
+  theme: {
+    yoga: { spacing }
   }
-
-  var leftElementRef = (0, _react.useRef)(null);
-
-  var _useState = (0, _react.useState)(0),
-      leftElementTextIndent = _useState[0],
-      setLeftElementTextIndent = _useState[1];
-
-  (0, _react.useLayoutEffect)(function () {
-    if (leftElementRef.current) {
-      setLeftElementTextIndent(leftElementRef.current.offsetWidth + "px");
+}) => import_styled_components.css`
+    position: absolute;
+    left: ${spacing.xxsmall}px;
+    top: 50%;
+    transform: translateY(-50%);
+  `}
+`;
+const Input = import_react.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      cleanable,
+      children,
+      disabled,
+      error,
+      full,
+      helper,
+      label,
+      maxLength,
+      readOnly,
+      style,
+      value,
+      onChange,
+      onClean,
+      hideMaxLength,
+      rightIcon,
+      a11yId,
+      includeAriaAttributes,
+      leftElement
+    } = _b, props = __objRest(_b, [
+      "cleanable",
+      "children",
+      "disabled",
+      "error",
+      "full",
+      "helper",
+      "label",
+      "maxLength",
+      "readOnly",
+      "style",
+      "value",
+      "onChange",
+      "onClean",
+      "hideMaxLength",
+      "rightIcon",
+      "a11yId",
+      "includeAriaAttributes",
+      "leftElement"
+    ]);
+    const inputRef = ref || (0, import_react.useRef)(null);
+    const cleanField = (e) => {
+      if (e.type === "click" || e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onClean("");
+        inputRef.current.focus();
+      }
+    };
+    const hasHelper = helper || maxLength || error;
+    const helperA11yId = includeAriaAttributes && a11yId && `${a11yId}-helper`;
+    const labelA11yId = includeAriaAttributes && a11yId && `${a11yId}-label`;
+    let a11yFieldProps;
+    if (includeAriaAttributes) {
+      a11yFieldProps = a11yId ? __spreadValues(__spreadValues({}, hasHelper && { "aria-describedby": helperA11yId }), label && { "aria-labelledby": labelA11yId }) : __spreadValues({}, label && { "aria-label": label });
+      a11yFieldProps["aria-invalid"] = !!error;
+    } else {
+      a11yFieldProps = {};
     }
-  }, [leftElement]);
-  return /*#__PURE__*/_react["default"].createElement(Control, {
-    full: full
-  }, /*#__PURE__*/_react["default"].createElement(_Fieldset["default"], {
-    disabled: disabled,
-    error: error,
-    full: full,
-    label: label,
-    style: style,
-    value: value
-  }, leftElement && /*#__PURE__*/_react["default"].createElement(LeftElementWrapper, {
-    ref: leftElementRef
-  }, leftElement), !children ? /*#__PURE__*/_react["default"].createElement(_Field["default"], _extends({}, props, {
-    label: label,
-    cleanable: cleanable,
-    disabled: disabled,
-    error: error,
-    full: full,
-    readOnly: readOnly,
-    maxLength: maxLength,
-    ref: inputRef,
-    value: value,
-    onChange: onChange
-  }, a11yFieldProps, {
-    style: leftElement ? {
-      textIndent: leftElementTextIndent
-    } : {}
-  })) : children, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
-    error: error,
-    disabled: disabled
-  }, labelA11yId && {
-    id: labelA11yId
-  }), label), label && /*#__PURE__*/_react["default"].createElement(_Legend["default"], null, label), cleanable && !readOnly && value && /*#__PURE__*/_react["default"].createElement(IconWrapper, {
-    tabIndex: 0,
-    disabled: disabled,
-    onClick: cleanField,
-    onKeyDown: cleanField,
-    width: 20,
-    height: 20,
-    role: "button",
-    hasIconRight: !!rightIcon
-  }, /*#__PURE__*/_react["default"].createElement(_yogaIcons.Close, {
-    "aria-label": "Clear"
-  })), !!rightIcon && !readOnly && /*#__PURE__*/_react["default"].createElement(IconWrapper, {
-    tabIndex: 0,
-    disabled: disabled,
-    width: 20,
-    height: 20,
-    role: "button"
-  }, rightIcon)), hasHelper && /*#__PURE__*/_react["default"].createElement(_Helper["default"], {
-    error: error,
-    helper: helper,
-    maxLength: maxLength,
-    length: value.length,
-    disabled: disabled,
-    hideMaxLength: hideMaxLength,
-    a11yId: helperA11yId
-  }));
-});
-
+    const leftElementRef = (0, import_react.useRef)(null);
+    const [leftElementTextIndent, setLeftElementTextIndent] = (0, import_react.useState)(0);
+    (0, import_react.useLayoutEffect)(() => {
+      if (leftElementRef.current) {
+        setLeftElementTextIndent(`${leftElementRef.current.offsetWidth}px`);
+      }
+    }, [leftElement]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Control, { full, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_Fieldset.default,
+        {
+          disabled,
+          error,
+          full,
+          label,
+          style,
+          value,
+          children: [
+            leftElement && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LeftElementWrapper, { ref: leftElementRef, children: leftElement }),
+            !children ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Field.default,
+              __spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, props), {
+                label,
+                cleanable,
+                disabled,
+                error,
+                full,
+                readOnly,
+                maxLength
+              }), {
+                ref: inputRef,
+                value,
+                onChange
+              }), a11yFieldProps), {
+                style: leftElement ? { textIndent: leftElementTextIndent } : {}
+              })
+            ) : children,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Label.default,
+              __spreadProps(__spreadValues({
+                error,
+                disabled
+              }, labelA11yId && { id: labelA11yId }), {
+                children: label
+              })
+            ),
+            label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Legend.default, { children: label }),
+            cleanable && !readOnly && value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              IconWrapper,
+              {
+                tabIndex: 0,
+                disabled,
+                onClick: cleanField,
+                onKeyDown: cleanField,
+                width: 20,
+                height: 20,
+                role: "button",
+                hasIconRight: !!rightIcon,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga_icons.Close, { "aria-label": "Clear" })
+              }
+            ),
+            !!rightIcon && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              IconWrapper,
+              {
+                tabIndex: 0,
+                disabled,
+                width: 20,
+                height: 20,
+                role: "button",
+                children: rightIcon
+              }
+            )
+          ]
+        }
+      ),
+      hasHelper && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Helper.default,
+        {
+          error,
+          helper,
+          maxLength,
+          length: value.length,
+          disabled,
+          hideMaxLength,
+          a11yId: helperA11yId
+        }
+      )
+    ] });
+  }
+);
 Input.propTypes = {
-  className: _propTypes.string,
-
+  className: import_prop_types.string,
   /** a children node to override default input component */
-  children: (0, _propTypes.oneOfType)([(0, _propTypes.arrayOf)(_propTypes.node), _propTypes.node]),
-
+  children: (0, import_prop_types.oneOfType)([(0, import_prop_types.arrayOf)(import_prop_types.node), import_prop_types.node]),
   /** display a close icon to clean the field */
-  cleanable: _propTypes.bool,
-  disabled: _propTypes.bool,
-  error: _propTypes.string,
-  full: _propTypes.bool,
-
+  cleanable: import_prop_types.bool,
+  disabled: import_prop_types.bool,
+  error: import_prop_types.string,
+  full: import_prop_types.bool,
   /** a helper text to be displayed below field */
-  helper: _propTypes.string,
-  label: _propTypes.string,
-
+  helper: import_prop_types.string,
+  label: import_prop_types.string,
   /** maximum length (number of characters) of value */
-  maxLength: _propTypes.number,
-  readOnly: _propTypes.bool,
-  style: (0, _propTypes.shape)({}),
-  value: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number]),
-  onChange: _propTypes.func,
-
+  maxLength: import_prop_types.number,
+  readOnly: import_prop_types.bool,
+  style: (0, import_prop_types.shape)({}),
+  value: (0, import_prop_types.oneOfType)([import_prop_types.string, import_prop_types.number]),
+  onChange: import_prop_types.func,
   /** callback invoked when close icon is clicked, it returns a empty string to update your state */
-  onClean: _propTypes.func,
-
+  onClean: import_prop_types.func,
   /** when max length helper is unnecessary to appear */
-  hideMaxLength: _propTypes.bool,
-  placeholder: _propTypes.string,
-  rightIcon: _propTypes.node,
-
+  hideMaxLength: import_prop_types.bool,
+  placeholder: import_prop_types.string,
+  rightIcon: import_prop_types.node,
   /** a unique prefix to generate HTML IDs to be used for aria-labelledby and aria-describedby */
-  a11yId: _propTypes.string,
-
+  a11yId: import_prop_types.string,
   /** useful for components that extend the Input component and have their own ARIA attributes implementation (e.g. Dropdown) */
-  includeAriaAttributes: _propTypes.bool,
-
+  includeAriaAttributes: import_prop_types.bool,
   /** element on the left */
-  leftElement: _propTypes.node
+  leftElement: import_prop_types.node
 };
 Input.defaultProps = {
-  className: undefined,
-  children: undefined,
+  className: void 0,
+  children: void 0,
   cleanable: true,
   disabled: false,
-  error: undefined,
+  error: void 0,
   full: false,
-  helper: undefined,
-  label: 'Label',
-  maxLength: undefined,
+  helper: void 0,
+  label: "Label",
+  maxLength: void 0,
   readOnly: false,
-  style: undefined,
-  value: '',
-  onChange: function onChange() {},
-  onClean: function onClean() {},
+  style: void 0,
+  value: "",
+  onChange: () => {
+  },
+  onClean: () => {
+  },
   hideMaxLength: false,
-  placeholder: undefined,
-  rightIcon: undefined,
-  a11yId: undefined,
+  placeholder: void 0,
+  rightIcon: void 0,
+  a11yId: void 0,
   includeAriaAttributes: true,
-  leftElement: undefined
+  leftElement: void 0
 };
-var _default = Input;
-exports["default"] = _default;
+var Input_default = Input;