@telefonica/mistica 10.15.0 → 10.16.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [10.16.0](https://github.com/Telefonica/mistica-web/compare/v10.15.0...v10.16.0) (2022-01-17)
+
+
+### Features
+
+* **Form:** improvements to be able to build custom fields ([cf5de03](https://github.com/Telefonica/mistica-web/commit/cf5de0398c441d943ee417123293450595aa95f5))
+
 # [10.15.0](https://github.com/Telefonica/mistica-web/compare/v10.14.2...v10.15.0) (2022-01-12)
 
 

package/dist/index.d.ts

@@ -73,7 +73,7 @@ export { default as DecimalField } from './decimal-field';
 export { default as PasswordField } from './password-field';
 export { default as DoubleField } from './double-field';
 export { default as IbanField } from './iban-field';
-export { useForm } from './form-context';
+export { useForm, useFieldProps } from './form-context';
 export { default as IconClose } from './icons/icon-close';
 export { default as IconInfo } from './icons/icon-info';
 export { default as IconArrowDown } from './icons/icon-arrow-down';

package/dist/index.js

@@ -680,6 +680,12 @@ Object.defineProperty(exports, "useForm", {
         return _formContext.useForm;
     }
 });
+Object.defineProperty(exports, "useFieldProps", {
+    enumerable: true,
+    get: function() {
+        return _formContext.useFieldProps;
+    }
+});
 Object.defineProperty(exports, "IconClose", {
     enumerable: true,
     get: function() {

package/dist/index.js.flow

@@ -116,7 +116,7 @@ declare export { default as DecimalField } from "./decimal-field";
 declare export { default as PasswordField } from "./password-field";
 declare export { default as DoubleField } from "./double-field";
 declare export { default as IbanField } from "./iban-field";
-declare export { useForm } from "./form-context";
+declare export { useForm, useFieldProps } from "./form-context";
 declare export { default as IconClose } from "./icons/icon-close";
 declare export { default as IconInfo } from "./icons/icon-info";
 declare export { default as IconArrowDown } from "./icons/icon-arrow-down";

package/dist/menu.d.ts

@@ -6,7 +6,7 @@ declare type MenuRenderProps = {
 };
 declare type TargetRenderProps = {
     ref: (element: HTMLElement | null) => void;
-    onPress: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    onPress: () => void;
     isMenuOpen: boolean;
 };
 export declare type MenuProps = {

package/dist/menu.js.flow

@@ -8,7 +8,7 @@ declare type MenuRenderProps = {
 };
 declare type TargetRenderProps = {
   ref: (element: HTMLElement | null) => void,
-  onPress: (event: SyntheticMouseEvent<> | SyntheticKeyboardEvent<>) => void,
+  onPress: () => void,
   isMenuOpen: boolean,
 };
 export type MenuProps = {

package/dist/package-version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.PACKAGE_VERSION = void 0;
-var PACKAGE_VERSION = '10.15.0';
+var PACKAGE_VERSION = '10.16.0';
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/text-field-base.js

@@ -315,10 +315,6 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         }), _defineProperty(_obj2, "transition", 'opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms'), _obj2)
     };
 });
-// Chrome ignores 'off': https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164
-var fixAutoComplete = function fixAutoComplete(platformOverrides, autoComplete) {
-    return autoComplete === 'off' && (0, _platform).isChrome(platformOverrides) ? 'nope' : autoComplete;
-};
 var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     var error = _param.error, helperText = _param.helperText, label = _param.label, inputProps = _param.inputProps, inputRef = _param.inputRef, defaultValue = _param.defaultValue, value = _param.value, onFocus = _param.onFocus, onBlur = _param.onBlur, inputComponent = _param.inputComponent, prefix = _param.prefix, startIcon = _param.startIcon, endIcon = _param.endIcon, endIconOverlay = _param.endIconOverlay, shrinkLabelProp = _param.shrinkLabel, _multiline = _param.multiline, multiline = _multiline === void 0 ? false : _multiline, focus = _param.focus, fieldRef = _param.fieldRef, maxLength = _param.maxLength, idProp = _param.id, autoCompleteProp = _param.autoComplete, fullWidth = _param.fullWidth, rest = _objectWithoutProperties(_param, [
         "error",
@@ -346,7 +342,7 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
     ]);
     var id = (0, _hooks).useAriaId(idProp);
     var ref1 = _slicedToArray(React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) || (value === null || value === void 0 ? void 0 : value.length) ? 'filled' : 'default'), 2), inputState = ref1[0], setInputState = ref1[1];
-    var ref2 = (0, _hooks).useTheme(), platformOverrides = ref2.platformOverrides, colors = ref2.colors;
+    var ref2 = (0, _hooks).useTheme(), colors = ref2.colors;
     var ref3 = (0, _hooks).useScreenSize(), isTabletOrSmaller = ref3.isTabletOrSmaller;
     var ref4;
     var ref5 = _slicedToArray(React.useState((ref4 = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) !== null && ref4 !== void 0 ? ref4 : 0), 2), characterCount = ref5[0], setCharacterCount = ref5[1];
@@ -403,7 +399,7 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
     var props = _objectSpread({
     }, rest, {
         maxLength: maxLength,
-        autoComplete: fixAutoComplete(platformOverrides, autoCompleteProp)
+        autoComplete: autoCompleteProp
     }, inputProps);
     var isShrinked = shrinkLabel || inputState === 'focused' || inputState === 'filled';
     var scale = isShrinked ? isTabletOrSmaller ? _textFieldComponents.LABEL_SCALE_MOBILE : _textFieldComponents.LABEL_SCALE_DESKTOP : 1;
@@ -548,7 +544,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
             // while the test is typing, the component could be remounted.
             // By hiding the label, we ensure that the test selects the loaded component
             label: (0, _platform).isRunningAcceptanceTest(platformOverrides) ? '' : props.label,
-            autoComplete: fixAutoComplete(platformOverrides, 'off'),
+            autoComplete: "off",
             ref: ref,
             id: id
         })),
@@ -557,7 +553,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
             inputProps: _objectSpread({
             }, props, {
                 id: id,
-                autoComplete: fixAutoComplete(platformOverrides, 'off'),
+                autoComplete: 'off',
                 // @ts-expect-error Autosuggest expects slightly different types
                 onChange: function onChange(e, param) {
                     var newValue = param.newValue;

package/dist/text-field.d.ts

@@ -2,10 +2,11 @@ import * as React from 'react';
 import type { CommonFormFieldProps } from './text-field-base';
 export interface TextFieldProps extends CommonFormFieldProps {
     onChangeValue?: (value: string, rawValue: string) => void;
+    onPress?: (event: React.MouseEvent) => void;
     multiline?: boolean;
     prefix?: React.ReactNode;
     endIcon?: React.ReactNode;
     getSuggestions?: (value: string) => Array<string>;
 }
-declare const TextField: React.FC<TextFieldProps>;
+declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 export default TextField;

package/dist/text-field.js

@@ -7,6 +7,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
 var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _common = require("./utils/common");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -95,8 +96,8 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-var TextField = function TextField(_param) {
-    var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validate = _param.validate, onChangeValue = _param.onChangeValue, onChange = _param.onChange, value = _param.value, defaultValue = _param.defaultValue, onBlurProp = _param.onBlur, onFocusProp = _param.onFocus, rest = _objectWithoutProperties(_param, [
+var TextField = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validate = _param.validate, onChangeValue = _param.onChangeValue, onChange = _param.onChange, value = _param.value, defaultValue = _param.defaultValue, onBlurProp = _param.onBlur, onFocusProp = _param.onFocus, onPress = _param.onPress, rest = _objectWithoutProperties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -108,7 +109,8 @@ var TextField = function TextField(_param) {
         "value",
         "defaultValue",
         "onBlur",
-        "onFocus"
+        "onFocus",
+        "onPress"
     ]);
     var inputRef = React.useRef(null);
     var processValue = function processValue(v) {
@@ -150,16 +152,13 @@ var TextField = function TextField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var setInputRef = function setInputRef(field) {
-        inputRef.current = field;
-        fieldProps.inputRef(field);
-    };
     return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
     }, rest, fieldProps, {
-        inputRef: setInputRef,
+        onClick: onPress,
+        inputRef: (0, _common).combineRefs(inputRef, fieldProps.inputRef, ref),
         onFocus: onFocus,
         type: "text"
     })));
-};
+});
 var _default = TextField;
 exports.default = _default;

package/dist/text-field.js.flow

@@ -6,10 +6,14 @@ export type TextFieldProps = {
   ...$Exact<CommonFormFieldProps>,
 
   onChangeValue?: (value: string, rawValue: string) => void,
+  onPress?: (event: SyntheticMouseEvent<>) => void,
   multiline?: boolean,
   prefix?: React.Node,
   endIcon?: React.Node,
   getSuggestions?: (value: string) => Array<string>,
 };
-declare var TextField: React.ComponentType<TextFieldProps>;
+declare var TextField: React.ComponentType<{
+  ...TextFieldProps,
+  ref?: React.Ref<HTMLInputElement>,
+}>;
 declare export default typeof TextField;

package/dist-es/index.js

@@ -75,7 +75,7 @@ export { default as DecimalField } from './decimal-field';
 export { default as PasswordField } from './password-field';
 export { default as DoubleField } from './double-field';
 export { default as IbanField } from './iban-field';
-export { useForm } from './form-context';
+export { useForm, useFieldProps } from './form-context';
 // Icons
 // @deprecated use IconCloseRegular instead
 export { default as IconClose } from './icons/icon-close';

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export var PACKAGE_VERSION = '10.15.0';
+export var PACKAGE_VERSION = '10.16.0';

package/dist-es/text-field-base.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { createUseStyles } from './jss';
 import { Label, HelperText, FieldContainer, LABEL_LEFT_POSITION, LABEL_SCALE_MOBILE, LABEL_SCALE_DESKTOP } from './text-field-components';
 import { Text3 } from './text';
-import { isIos, isRunningAcceptanceTest, isChrome, isFirefox } from './utils/platform';
+import { isIos, isRunningAcceptanceTest, isFirefox } from './utils/platform';
 import { useAriaId, useTheme, useScreenSize } from './hooks';
 import classNames from 'classnames';
 import { combineRefs } from './utils/common';
@@ -281,16 +281,12 @@ var useStyles = createUseStyles(function(theme) {
         }), _defineProperty(_obj2, "transition", 'opacity 150ms cubic-bezier(0.0, 0, 0.2, 1) 0ms'), _obj2)
     };
 });
-// Chrome ignores 'off': https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164
-var fixAutoComplete = function(platformOverrides, autoComplete) {
-    return autoComplete === 'off' && isChrome(platformOverrides) ? 'nope' : autoComplete;
-};
 var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     var error = _param.error, helperText = _param.helperText, label = _param.label, inputProps = _param.inputProps, inputRef = _param.inputRef, defaultValue = _param.defaultValue, value = _param.value, onFocus = _param.onFocus, onBlur = _param.onBlur, inputComponent = _param.inputComponent, prefix = _param.prefix, startIcon = _param.startIcon, endIcon = _param.endIcon, endIconOverlay = _param.endIconOverlay, shrinkLabelProp = _param.shrinkLabel, _multiline = _param.multiline, multiline = _multiline === void 0 ? false : _multiline, focus = _param.focus, fieldRef = _param.fieldRef, maxLength = _param.maxLength, idProp = _param.id, autoCompleteProp = _param.autoComplete, fullWidth = _param.fullWidth, rest = _objectWithoutProperties(_param, ["error", "helperText", "label", "inputProps", "inputRef", "defaultValue", "value", "onFocus", "onBlur", "inputComponent", "prefix", "startIcon", "endIcon", "endIconOverlay", "shrinkLabel", "multiline", "focus", "fieldRef", "maxLength", "id",
         "autoComplete", "fullWidth"]);
     var id = useAriaId(idProp);
     var ref1 = _slicedToArray(React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) || (value === null || value === void 0 ? void 0 : value.length) ? 'filled' : 'default'), 2), inputState = ref1[0], setInputState = ref1[1];
-    var ref2 = useTheme(), platformOverrides = ref2.platformOverrides, colors = ref2.colors;
+    var ref2 = useTheme(), colors = ref2.colors;
     var ref3 = useScreenSize(), isTabletOrSmaller = ref3.isTabletOrSmaller;
     var ref4;
     var ref5 = _slicedToArray(React.useState((ref4 = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) !== null && ref4 !== void 0 ? ref4 : 0), 2), characterCount = ref5[0], setCharacterCount = ref5[1];
@@ -347,7 +343,7 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
     var props = _objectSpread({
     }, rest, {
         maxLength: maxLength,
-        autoComplete: fixAutoComplete(platformOverrides, autoCompleteProp)
+        autoComplete: autoCompleteProp
     }, inputProps);
     var isShrinked = shrinkLabel || inputState === 'focused' || inputState === 'filled';
     var scale = isShrinked ? isTabletOrSmaller ? LABEL_SCALE_MOBILE : LABEL_SCALE_DESKTOP : 1;
@@ -488,7 +484,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
             // while the test is typing, the component could be remounted.
             // By hiding the label, we ensure that the test selects the loaded component
             label: isRunningAcceptanceTest(platformOverrides) ? '' : props.label,
-            autoComplete: fixAutoComplete(platformOverrides, 'off'),
+            autoComplete: "off",
             ref: ref,
             id: id
         })),
@@ -497,7 +493,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
             inputProps: _objectSpread({
             }, props, {
                 id: id,
-                autoComplete: fixAutoComplete(platformOverrides, 'off'),
+                autoComplete: 'off',
                 // @ts-expect-error Autosuggest expects slightly different types
                 onChange: function(e, param) {
                     var newValue = param.newValue;

package/dist-es/text-field.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useFieldProps } from './form-context';
 import TextFieldBase from './text-field-base';
+import { combineRefs } from './utils/common';
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -61,10 +62,9 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-var TextField = function(_param) {
-    var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validate = _param.validate, onChangeValue = _param.onChangeValue, onChange = _param.onChange, value = _param.value, defaultValue = _param.defaultValue, onBlurProp = _param.onBlur, onFocusProp = _param.onFocus, rest = _objectWithoutProperties(_param, ["disabled", "error", "helperText", "name", "optional", "validate", "onChangeValue", "onChange", "value", "defaultValue", "onBlur",
-        "onFocus"
-    ]);
+var TextField = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var disabled = _param.disabled, error = _param.error, helperText = _param.helperText, name = _param.name, optional = _param.optional, validate = _param.validate, onChangeValue = _param.onChangeValue, onChange = _param.onChange, value = _param.value, defaultValue = _param.defaultValue, onBlurProp = _param.onBlur, onFocusProp = _param.onFocus, onPress = _param.onPress, rest = _objectWithoutProperties(_param, ["disabled", "error", "helperText", "name", "optional", "validate", "onChangeValue", "onChange", "value", "defaultValue", "onBlur",
+        "onFocus", "onPress"]);
     var inputRef = React.useRef(null);
     var processValue = function(v) {
         return v;
@@ -105,15 +105,12 @@ var TextField = function(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var setInputRef = function(field) {
-        inputRef.current = field;
-        fieldProps.inputRef(field);
-    };
     return(/*#__PURE__*/ _jsx(TextFieldBase, _objectSpread({
     }, rest, fieldProps, {
-        inputRef: setInputRef,
+        onClick: onPress,
+        inputRef: combineRefs(inputRef, fieldProps.inputRef, ref),
         onFocus: onFocus,
         type: "text"
     })));
-};
+});
 export default TextField;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "10.15.0",
+    "version": "10.16.0",
     "license": "MIT",
     "repository": {
         "type": "git",