@telefonica/mistica 10.22.0 → 10.23.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [10.23.0](https://github.com/Telefonica/mistica-web/compare/v10.22.3...v10.23.0) (2022-02-10)
+
+
+### Features
+
+* **Dialog:** allow disable history update in dialogs ([#412](https://github.com/Telefonica/mistica-web/issues/412)) ([178bc55](https://github.com/Telefonica/mistica-web/commit/178bc55abc19f0d9117d0a51bbcb5a8a2353f68e))
+
+## [10.22.3](https://github.com/Telefonica/mistica-web/compare/v10.22.2...v10.22.3) (2022-02-08)
+
+
+### Bug Fixes
+
+* **Form:** handle undefined rawValue ([#410](https://github.com/Telefonica/mistica-web/issues/410)) ([6363328](https://github.com/Telefonica/mistica-web/commit/63633288d1a9a1781b9bf350c4923af101a72312))
+
+## [10.22.2](https://github.com/Telefonica/mistica-web/compare/v10.22.1...v10.22.2) (2022-02-07)
+
+
+### Bug Fixes
+
+* **Select:** set rawValue on init ([#409](https://github.com/Telefonica/mistica-web/issues/409)) ([d72cbd1](https://github.com/Telefonica/mistica-web/commit/d72cbd179e930712ef54c5e483e08c922a857059))
+
+## [10.22.1](https://github.com/Telefonica/mistica-web/compare/v10.22.0...v10.22.1) (2022-02-03)
+
+
+### Bug Fixes
+
+* **Form fields:** use rawValue to check if a form field is empty ([#408](https://github.com/Telefonica/mistica-web/issues/408)) ([50a5d37](https://github.com/Telefonica/mistica-web/commit/50a5d37179903ed69f1aa33ac6b7e5d6b1f10a6f))
+
 # [10.22.0](https://github.com/Telefonica/mistica-web/compare/v10.21.0...v10.22.0) (2022-02-02)
 
 

package/dist/dialog.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { Theme } from './theme';
 interface DialogProps {
     className?: string;
     title?: string;
@@ -20,6 +21,7 @@ declare type DialogRootState = {
     instanceNumber: number;
 };
 export default class DialogRoot extends React.Component<DialogRootProps, DialogRootState> {
+    static contextType: React.Context<Theme | null>;
     state: DialogRootState;
     componentDidMount(): void;
     componentWillUnmount(): void;

package/dist/dialog.js

@@ -560,7 +560,9 @@ var DialogRoot = /*#__PURE__*/ function(_Component) {
                 dialogRootInstances++;
                 if (dialogRootInstances === 1) {
                     dialogInstance = this;
-                    window.addEventListener('popstate', this.handleBack);
+                    if (!this.context.unstable_disableHistoryUpdateInDialogs) {
+                        window.addEventListener('popstate', this.handleBack);
+                    }
                 }
             }
         },
@@ -570,7 +572,9 @@ var DialogRoot = /*#__PURE__*/ function(_Component) {
                 dialogRootInstances--;
                 if (dialogRootInstances === 0) {
                     dialogInstance = null;
-                    window.removeEventListener('popstate', this.handleBack);
+                    if (!this.context.unstable_disableHistoryUpdateInDialogs) {
+                        window.removeEventListener('popstate', this.handleBack);
+                    }
                 }
             }
         },
@@ -580,8 +584,10 @@ var DialogRoot = /*#__PURE__*/ function(_Component) {
                 if (this.state.dialogProps) {
                     throw Error('Tried to show a dialog on top of another dialog. This functionality is not currently supported.');
                 }
-                // We add an additional entry to history with the same page, so the first time back is pressed we only close the Dialog
-                window.history.pushState(null, document.title, window.location.href);
+                if (!this.context.unstable_disableHistoryUpdateInDialogs) {
+                    // We add an additional entry to history with the same page, so the first time back is pressed we only close the Dialog
+                    window.history.pushState(null, document.title, window.location.href);
+                }
                 this.setState({
                     dialogProps: props,
                     isClosing: false
@@ -591,8 +597,12 @@ var DialogRoot = /*#__PURE__*/ function(_Component) {
         {
             key: "close",
             value: function close() {
-                // Here we have to remove the additional entry added to history when we created the Dialog
-                window.history.back();
+                if (!this.context.unstable_disableHistoryUpdateInDialogs) {
+                    // Here we have to remove the additional entry added to history when we created the Dialog
+                    window.history.back();
+                } else {
+                    this.handleBack();
+                }
             }
         },
         {
@@ -651,6 +661,7 @@ var DialogRoot = /*#__PURE__*/ function(_Component) {
     ]);
     return DialogRoot;
 }(React.Component);
+DialogRoot.contextType = _themeContext.default;
 exports.default = DialogRoot;
 var showDialog = function showDialog(param) {
     var showCancel = param === void 0 ? false : param;

package/dist/dialog.js.flow

@@ -1,6 +1,7 @@
 // @flow
 
 import * as React from "react";
+import type { Theme } from "./theme";
 declare type DialogProps = {
   className?: string,
   title?: string,
@@ -24,6 +25,7 @@ declare type DialogRootState = {
 declare export default class DialogRoot
   mixins React.Component<DialogRootProps, DialogRootState>
 {
+  static contextType: React.Context<Theme | null>;
   state: DialogRootState;
   componentDidMount(): void;
   componentWillUnmount(): void;

package/dist/form.js

@@ -179,10 +179,11 @@ var Form = function Form(param) {
             for(var _iterator = fieldRegistrations.current[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
                 var _value = _slicedToArray(_step.value, 2), name = _value[0], ref = _value[1], input = ref.input, validator = ref.validator;
                 if (input) {
+                    var ref;
                     if (input.disabled) {
                         continue;
                     }
-                    if (input.required && !input.value.trim()) {
+                    if (input.required && !((ref = rawValues[name]) === null || ref === void 0 ? void 0 : ref.trim())) {
                         errors[name] = texts.formFieldErrorIsMandatory;
                     } else {
                         var error = validator === null || validator === void 0 ? void 0 : validator(values[name], rawValues[name]);

package/dist/package-version.js

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

package/dist/select.js

@@ -354,6 +354,21 @@ var Select = function Select(param) {
     };
     var focusableElement = focusableRef.current;
     var inputElement = inputRef.current;
+    React.useEffect(function() {
+        setRawValue({
+            name: name,
+            value: value
+        });
+        formSetValue({
+            name: name,
+            value: value
+        });
+    }, [
+        name,
+        setRawValue,
+        formSetValue,
+        value
+    ]);
     React.useEffect(function() {
         register(name, {
             input: inputRef.current,

package/dist/theme-context-provider.js

@@ -197,7 +197,8 @@ var ThemeContextProvider = function ThemeContextProvider(param) {
             Link: (_Link = theme.Link) !== null && _Link !== void 0 ? _Link : _theme.AnchorLink,
             isDarkMode: isDarkModeEnabled,
             isIos: (0, _platform).getPlatform(platformOverrides) === 'ios',
-            useHrefDecorator: (_useHrefDecorator = theme.useHrefDecorator) !== null && _useHrefDecorator !== void 0 ? _useHrefDecorator : useDefaultHrefDecorator
+            useHrefDecorator: (_useHrefDecorator = theme.useHrefDecorator) !== null && _useHrefDecorator !== void 0 ? _useHrefDecorator : useDefaultHrefDecorator,
+            unstable_disableHistoryUpdateInDialogs: !!theme.unstable_disableHistoryUpdateInDialogs
         };
     }, [
         theme,

package/dist/theme.d.ts

@@ -100,6 +100,7 @@ export declare type ThemeConfig = {
     Link?: LinkComponent;
     useHrefDecorator?: () => (href: string) => string;
     enableTabFocus?: boolean;
+    unstable_disableHistoryUpdateInDialogs?: boolean;
 };
 export declare type Theme = {
     skinName: SkinName;
@@ -134,5 +135,6 @@ export declare type Theme = {
     isDarkMode: boolean;
     isIos: boolean;
     useHrefDecorator: () => (href: string) => string;
+    unstable_disableHistoryUpdateInDialogs: boolean;
 };
 export {};

package/dist/theme.js.flow

@@ -104,6 +104,7 @@ export type ThemeConfig = {
   Link?: LinkComponent,
   useHrefDecorator?: () => (href: string) => string,
   enableTabFocus?: boolean,
+  unstable_disableHistoryUpdateInDialogs?: boolean,
 };
 export type Theme = {
   skinName: SkinName,
@@ -138,6 +139,7 @@ export type Theme = {
   isDarkMode: boolean,
   isIos: boolean,
   useHrefDecorator: () => (href: string) => string,
+  unstable_disableHistoryUpdateInDialogs: boolean,
 };
 declare export {};
 

package/dist-es/dialog.js

@@ -518,7 +518,9 @@ var DialogRoot = /*#__PURE__*/ function(_Component) {
                 dialogRootInstances++;
                 if (dialogRootInstances === 1) {
                     dialogInstance = this;
-                    window.addEventListener('popstate', this.handleBack);
+                    if (!this.context.unstable_disableHistoryUpdateInDialogs) {
+                        window.addEventListener('popstate', this.handleBack);
+                    }
                 }
             }
         },
@@ -528,7 +530,9 @@ var DialogRoot = /*#__PURE__*/ function(_Component) {
                 dialogRootInstances--;
                 if (dialogRootInstances === 0) {
                     dialogInstance = null;
-                    window.removeEventListener('popstate', this.handleBack);
+                    if (!this.context.unstable_disableHistoryUpdateInDialogs) {
+                        window.removeEventListener('popstate', this.handleBack);
+                    }
                 }
             }
         },
@@ -538,8 +542,10 @@ var DialogRoot = /*#__PURE__*/ function(_Component) {
                 if (this.state.dialogProps) {
                     throw Error('Tried to show a dialog on top of another dialog. This functionality is not currently supported.');
                 }
-                // We add an additional entry to history with the same page, so the first time back is pressed we only close the Dialog
-                window.history.pushState(null, document.title, window.location.href);
+                if (!this.context.unstable_disableHistoryUpdateInDialogs) {
+                    // We add an additional entry to history with the same page, so the first time back is pressed we only close the Dialog
+                    window.history.pushState(null, document.title, window.location.href);
+                }
                 this.setState({
                     dialogProps: props,
                     isClosing: false
@@ -549,8 +555,12 @@ var DialogRoot = /*#__PURE__*/ function(_Component) {
         {
             key: "close",
             value: function close() {
-                // Here we have to remove the additional entry added to history when we created the Dialog
-                window.history.back();
+                if (!this.context.unstable_disableHistoryUpdateInDialogs) {
+                    // Here we have to remove the additional entry added to history when we created the Dialog
+                    window.history.back();
+                } else {
+                    this.handleBack();
+                }
             }
         },
         {
@@ -606,6 +616,7 @@ var DialogRoot = /*#__PURE__*/ function(_Component) {
     ]);
     return DialogRoot;
 }(React.Component);
+DialogRoot.contextType = ThemeContext;
 export { DialogRoot as default };
 var showDialog = function(param) {
     var showCancel = param === void 0 ? false : param;

package/dist-es/form.js

@@ -143,10 +143,11 @@ var Form = function(param) {
             for(var _iterator = fieldRegistrations.current[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
                 var _value = _slicedToArray(_step.value, 2), name = _value[0], ref = _value[1], input = ref.input, validator = ref.validator;
                 if (input) {
+                    var ref;
                     if (input.disabled) {
                         continue;
                     }
-                    if (input.required && !input.value.trim()) {
+                    if (input.required && !((ref = rawValues[name]) === null || ref === void 0 ? void 0 : ref.trim())) {
                         errors[name] = texts.formFieldErrorIsMandatory;
                     } else {
                         var error = validator === null || validator === void 0 ? void 0 : validator(values[name], rawValues[name]);

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.22.0';
+export var PACKAGE_VERSION = '10.23.0';

package/dist-es/select.js

@@ -320,6 +320,21 @@ var Select = function(param) {
     };
     var focusableElement = focusableRef.current;
     var inputElement = inputRef.current;
+    React.useEffect(function() {
+        setRawValue({
+            name: name,
+            value: value
+        });
+        formSetValue({
+            name: name,
+            value: value
+        });
+    }, [
+        name,
+        setRawValue,
+        formSetValue,
+        value
+    ]);
     React.useEffect(function() {
         register(name, {
             input: inputRef.current,

package/dist-es/theme-context-provider.js

@@ -163,7 +163,8 @@ var ThemeContextProvider = function(param) {
             Link: (_Link = theme.Link) !== null && _Link !== void 0 ? _Link : AnchorLink,
             isDarkMode: isDarkModeEnabled,
             isIos: getPlatform(platformOverrides) === 'ios',
-            useHrefDecorator: (_useHrefDecorator = theme.useHrefDecorator) !== null && _useHrefDecorator !== void 0 ? _useHrefDecorator : useDefaultHrefDecorator
+            useHrefDecorator: (_useHrefDecorator = theme.useHrefDecorator) !== null && _useHrefDecorator !== void 0 ? _useHrefDecorator : useDefaultHrefDecorator,
+            unstable_disableHistoryUpdateInDialogs: !!theme.unstable_disableHistoryUpdateInDialogs
         };
     }, [
         theme,

package/package.json

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