@telefonica/mistica 10.21.0 → 10.22.3

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [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)
+
+
+### Features
+
+* **Chip:** new component ([#395](https://github.com/Telefonica/mistica-web/issues/395)) ([37f1be2](https://github.com/Telefonica/mistica-web/commit/37f1be2322ad3913b3084fb6a14539629a9a81b4))
+
 # [10.21.0](https://github.com/Telefonica/mistica-web/compare/v10.20.0...v10.21.0) (2022-01-27)
 
 

package/dist/button-layout.js

@@ -270,7 +270,9 @@ var ButtonLayout = function ButtonLayout(param) {
                 isMeasuring: true,
                 buttonWidth: 0
             });
-        }, 50);
+        }, 5, {
+            maxWait: 50
+        });
     }, []);
     useOnChildrenChangeEffect(wrapperElRef.current, calcLayout);
     useOnFontsReadyEffect(calcLayout);

package/dist/chip.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { IconProps } from './utils/types';
+declare type ChipProps = {
+    children: string;
+    Icon?: React.FC<IconProps>;
+    onClose?: () => void;
+};
+declare const Chip: React.FC<ChipProps>;
+export default Chip;

package/dist/chip.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _jss = require("./jss");
+var _hooks = require("./hooks");
+var _box = _interopRequireDefault(require("./box"));
+var _text = require("./text");
+var _iconButton = _interopRequireDefault(require("./icon-button"));
+var _iconCloseRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular"));
+var _css = require("./utils/css");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+var useStyles = (0, _jss).createUseStyles(function(param) {
+    var colors = param.colors, mq = param.mq;
+    return {
+        container: _defineProperty({
+            display: 'inline-flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            border: "1px solid ".concat(colors.border),
+            borderRadius: 20,
+            backgroundColor: colors.backgroundContainer,
+            minHeight: 32,
+            minWidth: 56,
+            cursor: 'default',
+            color: colors.neutralMedium,
+            '& > span': {
+                color: colors.textPrimary
+            }
+        }, mq.supportsHover, {
+            '&:hover': {
+                borderColor: function borderColor(param) {
+                    var isDarkMode = param.isDarkMode;
+                    return isDarkMode ? colors.background : colors.tagBackgroundActive;
+                },
+                color: colors.controlActivated,
+                backgroundColor: colors.tagBackgroundActive
+            },
+            '&:hover > span': {
+                color: colors.textLink
+            }
+        })
+    };
+});
+var Chip = function Chip(param) {
+    var children = param.children, Icon = param.Icon, onClose = param.onClose;
+    var ref = (0, _hooks).useTheme(), texts = ref.texts, isDarkMode = ref.isDarkMode;
+    var classes = useStyles({
+        isDarkMode: isDarkMode
+    });
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_box.default, {
+        className: classes.container,
+        paddingLeft: Icon ? 8 : 12,
+        paddingRight: onClose ? 0 : 12,
+        children: [
+            Icon && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                paddingRight: 4,
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(Icon, {
+                    color: "currentColor",
+                    size: (0, _css).pxToRem(16)
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+                medium: true,
+                truncate: 1,
+                color: "currentColor",
+                children: children
+            }),
+            onClose ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
+                paddingLeft: 4,
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
+                    size: 24,
+                    style: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center'
+                    },
+                    "aria-label": texts.closeButtonLabel,
+                    onPress: function onPress() {
+                        return onClose();
+                    },
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconCloseRegular.default, {
+                        size: 16,
+                        color: "currentColor"
+                    })
+                })
+            }) : null
+        ]
+    }));
+};
+var _default = Chip;
+exports.default = _default;

package/dist/chip.js.flow

@@ -0,0 +1,11 @@
+// @flow
+
+import * as React from "react";
+import type { IconProps } from "./utils/types";
+declare type ChipProps = {
+  children: string,
+  Icon?: React.ComponentType<IconProps>,
+  onClose?: () => void,
+};
+declare var Chip: React.ComponentType<ChipProps>;
+declare export default typeof Chip;

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/index.d.ts

@@ -56,6 +56,7 @@ export { default as Callout } from './callout';
 export { useModalState } from './modal-context-provider';
 export { NavigationBar, MainNavigationBar, FunnelNavigationBar, NavigationBarActionGroup, NavigationBarAction, NavigationBarLogo, } from './navigation-bar';
 export { default as Image } from './image';
+export { default as Chip } from './chip';
 export { default as Video } from './video';
 export { default as Form } from './form';
 export { default as Select } from './select';

package/dist/index.js

@@ -566,6 +566,12 @@ Object.defineProperty(exports, "Image", {
         return _image.default;
     }
 });
+Object.defineProperty(exports, "Chip", {
+    enumerable: true,
+    get: function() {
+        return _chip.default;
+    }
+});
 Object.defineProperty(exports, "Video", {
     enumerable: true,
     get: function() {
@@ -8304,6 +8310,7 @@ var _callout = _interopRequireDefault(require("./callout"));
 var _modalContextProvider = require("./modal-context-provider");
 var _navigationBar = require("./navigation-bar");
 var _image = _interopRequireDefault(require("./image"));
+var _chip = _interopRequireDefault(require("./chip"));
 var _video = _interopRequireDefault(require("./video"));
 var _form = _interopRequireDefault(require("./form"));
 var _select = _interopRequireDefault(require("./select"));

package/dist/index.js.flow

@@ -99,6 +99,7 @@ declare export {
   NavigationBarLogo,
 } from "./navigation-bar";
 declare export { default as Image } from "./image";
+declare export { default as Chip } from "./chip";
 declare export { default as Video } from "./video";
 declare export { default as Form } from "./form";
 declare export { default as Select } from "./select";

package/dist/package-version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.PACKAGE_VERSION = void 0;
-var PACKAGE_VERSION = '10.21.0';
+var PACKAGE_VERSION = '10.22.3';
 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-es/button-layout.js

@@ -237,7 +237,9 @@ var ButtonLayout = function(param) {
                 isMeasuring: true,
                 buttonWidth: 0
             });
-        }, 50);
+        }, 5, {
+            maxWait: 50
+        });
     }, []);
     useOnChildrenChangeEffect(wrapperElRef.current, calcLayout);
     useOnFontsReadyEffect(calcLayout);

package/dist-es/chip.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createUseStyles } from './jss';
+import { useTheme } from './hooks';
+import Box from './box';
+import { Text2 } from './text';
+import IconButton from './icon-button';
+import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
+import { pxToRem } from './utils/css';
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+var useStyles = createUseStyles(function(param) {
+    var colors = param.colors, mq = param.mq;
+    return {
+        container: _defineProperty({
+            display: 'inline-flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            border: "1px solid ".concat(colors.border),
+            borderRadius: 20,
+            backgroundColor: colors.backgroundContainer,
+            minHeight: 32,
+            minWidth: 56,
+            cursor: 'default',
+            color: colors.neutralMedium,
+            '& > span': {
+                color: colors.textPrimary
+            }
+        }, mq.supportsHover, {
+            '&:hover': {
+                borderColor: function(param) {
+                    var isDarkMode = param.isDarkMode;
+                    return isDarkMode ? colors.background : colors.tagBackgroundActive;
+                },
+                color: colors.controlActivated,
+                backgroundColor: colors.tagBackgroundActive
+            },
+            '&:hover > span': {
+                color: colors.textLink
+            }
+        })
+    };
+});
+var Chip = function(param) {
+    var children = param.children, Icon = param.Icon, onClose = param.onClose;
+    var ref = useTheme(), texts = ref.texts, isDarkMode = ref.isDarkMode;
+    var classes = useStyles({
+        isDarkMode: isDarkMode
+    });
+    return(/*#__PURE__*/ _jsxs(Box, {
+        className: classes.container,
+        paddingLeft: Icon ? 8 : 12,
+        paddingRight: onClose ? 0 : 12,
+        children: [
+            Icon && /*#__PURE__*/ _jsx(Box, {
+                paddingRight: 4,
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    color: "currentColor",
+                    size: pxToRem(16)
+                })
+            }),
+            /*#__PURE__*/ _jsx(Text2, {
+                medium: true,
+                truncate: 1,
+                color: "currentColor",
+                children: children
+            }),
+            onClose ? /*#__PURE__*/ _jsx(Box, {
+                paddingLeft: 4,
+                children: /*#__PURE__*/ _jsx(IconButton, {
+                    size: 24,
+                    style: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center'
+                    },
+                    "aria-label": texts.closeButtonLabel,
+                    onPress: function() {
+                        return onClose();
+                    },
+                    children: /*#__PURE__*/ _jsx(IconCloseRegular, {
+                        size: 16,
+                        color: "currentColor"
+                    })
+                })
+            }) : null
+        ]
+    }));
+};
+export default Chip;

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/index.js

@@ -56,6 +56,7 @@ export { default as Callout } from './callout';
 export { useModalState } from './modal-context-provider';
 export { NavigationBar, MainNavigationBar, FunnelNavigationBar, NavigationBarActionGroup, NavigationBarAction, NavigationBarLogo } from './navigation-bar';
 export { default as Image } from './image';
+export { default as Chip } from './chip';
 export { default as Video } from './video';
 // Forms
 export { default as Form } from './form';

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

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/package.json

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