@telefonica/mistica 10.13.0 → 10.14.0

package/dist-es/list.js

@@ -261,15 +261,15 @@ var useControlState = function(param) {
         toggle
     ];
 };
-var RowContent = function(props) {
+var RowContent = /*#__PURE__*/ React.forwardRef(function(props, ref5) {
     var titleId = useAriaId();
     var isInverse = useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse
     });
     var asset = props.asset, headline = props.headline, title = props.title, titleLinesMax = props.titleLinesMax, subtitle = props.subtitle, subtitleLinesMax = props.subtitleLinesMax, description = props.description, descriptionLinesMax = props.descriptionLinesMax, badge = props.badge, role = props.role, extra = props.extra, dataAttributes = props.dataAttributes;
-    var ref4 = _slicedToArray(useControlState(props.switch || props.checkbox || {
-    }), 2), isChecked = ref4[0], toggle = ref4[1];
+    var ref1 = _slicedToArray(useControlState(props.switch || props.checkbox || {
+    }), 2), isChecked = ref1[0], toggle = ref1[1];
     var renderContent = function(param) {
         var type = param.type, right = param.right, labelId = param.labelId;
         /*#__PURE__*/ return React.createElement(Content, {
@@ -297,7 +297,8 @@ var RowContent = function(props) {
             type = 'custom';
         }
         return(/*#__PURE__*/ React.createElement(Box, {
-            paddingX: 16
+            paddingX: 16,
+            ref: ref5
         }, renderContent({
             type: type,
             right: props.right
@@ -305,6 +306,7 @@ var RowContent = function(props) {
     };
     if (props.onPress && props.switch === undefined && props.radioValue === undefined && props.checkbox === undefined) {
         return(/*#__PURE__*/ React.createElement(Touchable, {
+            ref: ref5,
             className: classNames(classes.rowContent, classes.hover),
             trackingEvent: props.trackingEvent,
             onPress: props.onPress,
@@ -333,9 +335,9 @@ var RowContent = function(props) {
         }, renderTouchableContent(props)));
     }
     var renderRowWithControl = function(Control) {
-        var ref, ref1;
-        var ref2, ref3;
-        var name = (ref3 = (ref2 = (ref = props.switch) === null || ref === void 0 ? void 0 : ref.name) !== null && ref2 !== void 0 ? ref2 : (ref1 = props.checkbox) === null || ref1 === void 0 ? void 0 : ref1.name) !== null && ref3 !== void 0 ? ref3 : titleId;
+        var ref, ref2;
+        var ref3, ref4;
+        var name = (ref4 = (ref3 = (ref = props.switch) === null || ref === void 0 ? void 0 : ref.name) !== null && ref3 !== void 0 ? ref3 : (ref2 = props.checkbox) === null || ref2 === void 0 ? void 0 : ref2.name) !== null && ref4 !== void 0 ? ref4 : titleId;
         return props.onPress ? /*#__PURE__*/ React.createElement("div", {
             className: classes.dualActionContainer
         }, /*#__PURE__*/ React.createElement(Touchable, {
@@ -352,7 +354,10 @@ var RowContent = function(props) {
         }, /*#__PURE__*/ React.createElement(Control, {
             name: name,
             checked: isChecked,
-            "aria-labelledby": titleId
+            "aria-labelledby": titleId,
+            render: function(check) {
+                return check;
+            }
         }))) : /*#__PURE__*/ React.createElement("div", {
             className: classNames(classes.rowContent, classes.hover)
         }, /*#__PURE__*/ React.createElement(Control, {
@@ -383,7 +388,8 @@ var RowContent = function(props) {
     if (props.radioValue) {
         return(/*#__PURE__*/ React.createElement("div", {
             className: classNames(classes.rowContent, classes.hover),
-            role: role
+            role: role,
+            ref: ref5
         }, /*#__PURE__*/ React.createElement(RadioButton, {
             dataAttributes: dataAttributes,
             value: props.radioValue,
@@ -410,11 +416,13 @@ var RowContent = function(props) {
     }) : renderContent({
         type: 'basic'
     })));
-};
-export var Row = function(props) {
+});
+export var Row = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     /*#__PURE__*/ return React.createElement(RowContent, _extends({
-    }, props));
-};
+    }, props, {
+        ref: ref
+    }));
+});
 export var RowList = function(param) {
     var children = param.children, ariaLabelledby = param.ariaLabelledby, role = param.role, dataAttributes = param.dataAttributes;
     /*#__PURE__*/ return React.createElement("div", _extends({
@@ -428,12 +436,13 @@ export var RowList = function(param) {
         }, /*#__PURE__*/ React.createElement(Divider, null)));
     }));
 };
-export var BoxedRow = function(props) {
+export var BoxedRow = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     /*#__PURE__*/ return React.createElement(Boxed, {
-        isInverse: props.isInverse
+        isInverse: props.isInverse,
+        ref: ref
     }, /*#__PURE__*/ React.createElement(RowContent, _extends({
     }, props)));
-};
+});
 export var BoxedRowList = function(param) {
     var children = param.children, ariaLabelledby = param.ariaLabelledby, role = param.role, dataAttributes = param.dataAttributes;
     /*#__PURE__*/ return React.createElement(Stack, {

package/dist-es/radio-button.js

@@ -209,9 +209,16 @@ var RadioButton = function(_param) {
         onKeyDown: disabled ? undefined : handleKeyDown,
         className: classes.radioButton
     }, getPrefixedDataAttributes(dataAttributes)), rest.render ? rest.render(radio, disabled) : /*#__PURE__*/ React.createElement(Inline, {
-        space: 16,
-        alignItems: "center"
-    }, radio, /*#__PURE__*/ React.createElement(Text3, {
+        space: 16
+    }, /*#__PURE__*/ React.createElement(Text3, {
+        regular: true,
+        as: "div"
+    }, /*#__PURE__*/ React.createElement("div", {
+        style: {
+            position: 'relative',
+            top: -2
+        }
+    }, radio)), /*#__PURE__*/ React.createElement(Text3, {
         regular: true,
         as: "div"
     }, rest.children))));

package/dist-es/touchable.js

@@ -93,8 +93,8 @@ var useStyles = createUseStyles(function() {
         }
     };
 });
-var Touchable = function(props) {
-    var ref = useTheme(), texts = ref.texts, analytics = ref.analytics, platformOverrides = ref.platformOverrides, Link = ref.Link;
+var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
+    var ref1 = useTheme(), texts = ref1.texts, analytics = ref1.analytics, platformOverrides = ref1.platformOverrides, Link = ref1.Link;
     var classes = useStyles();
     var isClicked = React.useRef(false);
     var trackingEvents = [];
@@ -188,15 +188,17 @@ var Touchable = function(props) {
             onKeyDown: handleKeyDown,
             href: props.disabled ? '' : getHref(),
             target: openNewTab ? '_blank' : undefined,
-            rel: openNewTab ? 'noopener noreferrer' : undefined
+            rel: openNewTab ? 'noopener noreferrer' : undefined,
+            ref: ref
         }), children, openNewTab && /*#__PURE__*/ React.createElement(ScreenReaderOnly, null, /*#__PURE__*/ React.createElement("span", null, texts.linkOpensInNewTab))));
     }
     if (props.to) {
+        var ref2;
         return(/*#__PURE__*/ React.createElement(Link, _extends({
         }, commonProps, {
             "aria-label": props['aria-label'],
             "aria-labelledby": props['aria-labelledby'],
-            innerRef: props.elementRef,
+            innerRef: (ref2 = props.elementRef) !== null && ref2 !== void 0 ? ref2 : ref,
             to: props.disabled ? '' : props.to,
             replace: props.replace,
             onClick: trackEvent,
@@ -204,6 +206,7 @@ var Touchable = function(props) {
         }), children));
     }
     if (props.onPress) {
+        var ref2;
         return(/*#__PURE__*/ React.createElement("button", _extends({
         }, commonProps, {
             // this "form" attribute is useful when the form's submit button
@@ -214,14 +217,15 @@ var Touchable = function(props) {
             "aria-label": props['aria-label'],
             "aria-labelledby": props['aria-labelledby'],
             type: type,
-            ref: props.elementRef,
+            ref: (ref2 = props.elementRef) !== null && ref2 !== void 0 ? ref2 : ref,
             onClick: handleButtonClick
         }), children));
     }
+    var ref2;
     return(/*#__PURE__*/ React.createElement("div", _extends({
     }, commonProps, {
-        ref: props.elementRef,
+        ref: (ref2 = props.elementRef) !== null && ref2 !== void 0 ? ref2 : ref,
         className: classnames(commonProps.className, classes.notTouchable)
     }), children));
-};
+});
 export default Touchable;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "10.13.0",
+    "version": "10.14.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -22,7 +22,7 @@
         "ts-check": "tsc --project tsconfig.json --noEmit",
         "build": "yarn clean && node scripts/build.js",
         "clean": "rimraf dist && rimraf dist-es && rimraf dist-ts && rimraf node_modules/.cache",
-        "ci": "yarn lint && yarn prettier-check && yarn circular-dependencies && yarn build && yarn storybook-static && yarn test --ci && yarn test-acceptance --ci",
+        "ci": "yarn lint && yarn prettier-check && yarn ts-check && yarn circular-dependencies && yarn build && yarn storybook-static && yarn test --ci && yarn test-acceptance --ci",
         "prepublishOnly": "node scripts/prepublish-only.js",
         "prepack": "yarn build",
         "storybook": "start-storybook -p 6006",
@@ -75,11 +75,11 @@
         "@swc/cli": "^0.1.51",
         "@swc/core": "^1.2.93",
         "@swc/jest": "^0.2.4",
-        "@telefonica/acceptance-testing": "^2.0.0",
+        "@telefonica/acceptance-testing": "^2.5.0",
         "@telefonica/eslint-plugin-async-await": "^1.1.0",
         "@telefonica/eslint-plugin-react-element-interface": "^1.0.0",
         "@telefonica/prettier-config": "^1.1.0",
-        "@telefonica/ts-to-flow": "1.1.0",
+        "@telefonica/ts-to-flow": "1.1.5",
         "@testing-library/jest-dom": "^5.12.0",
         "@testing-library/react": "^11.2.7",
         "@testing-library/user-event": "^13.1.9",

package/dist/generated/mistica-icons/icon-file-filled.js.flow

@@ -1,6 +0,0 @@
-// @flow
-
-import * as React from "react";
-import type { IconProps } from "../../utils/types";
-declare var IconFileFilled: React.ComponentType<IconProps>;
-declare export default typeof IconFileFilled;

package/dist/generated/mistica-icons/icon-file-ilustrator-light.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import type { IconProps } from '../../utils/types';
-declare const IconFileIlustratorLight: React.FC<IconProps>;
-export default IconFileIlustratorLight;

package/dist/generated/mistica-icons/icon-file-ilustrator-light.js.flow

@@ -1,6 +0,0 @@
-// @flow
-
-import * as React from "react";
-import type { IconProps } from "../../utils/types";
-declare var IconFileIlustratorLight: React.ComponentType<IconProps>;
-declare export default typeof IconFileIlustratorLight;

package/dist/generated/mistica-icons/icon-file-ilustrator-regular.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import type { IconProps } from '../../utils/types';
-declare const IconFileIlustratorRegular: React.FC<IconProps>;
-export default IconFileIlustratorRegular;

package/dist/generated/mistica-icons/icon-file-ilustrator-regular.js.flow

@@ -1,6 +0,0 @@
-// @flow
-
-import * as React from "react";
-import type { IconProps } from "../../utils/types";
-declare var IconFileIlustratorRegular: React.ComponentType<IconProps>;
-declare export default typeof IconFileIlustratorRegular;