@telefonica/mistica 10.14.2 → 10.15.0

package/dist/text-field-base.js

@@ -171,10 +171,6 @@ var commonInputStyles = function commonInputStyles(theme) {
                 opacity: 0.5
             }
         },
-        '&:disabled': {
-            color: theme.colors.textDisabled,
-            cursor: 'not-allowed'
-        },
         boxShadow: 'none'
     };
 };
@@ -288,11 +284,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             paddingRight: 16,
             display: 'flex',
             alignItems: 'center',
-            alignSelf: 'center',
-            opacity: function opacity(param) {
-                var disabled = param.disabled;
-                return disabled ? 0.3 : 1;
-            }
+            alignSelf: 'center'
         },
         startIcon: {
             pointerEvents: 'none',
@@ -301,11 +293,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             display: 'flex',
             alignItems: 'center',
             height: '100%',
-            position: 'absolute',
-            opacity: function opacity(param) {
-                var disabled = param.disabled;
-                return disabled ? 0.3 : 1;
-            }
+            position: 'absolute'
         },
         prefix: (_obj2 = {
             alignSelf: 'baseline',
@@ -426,7 +414,6 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
         width: "calc(((100% - ".concat(_textFieldComponents.LABEL_LEFT_POSITION + (startIcon ? 48 : _textFieldComponents.LABEL_LEFT_POSITION), "px)) / ").concat(scale, ")"),
         paddingRight: endIcon && !isShrinked ? 36 : 0
     };
-    var prefixColor = rest.disabled ? colors.textDisabled : colors.textSecondary;
     return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_textFieldComponents.FieldContainer, {
         disabled: rest.disabled,
         helperText: /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldComponents.HelperText, {
@@ -445,7 +432,7 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
             prefix && /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                 className: classes.prefix,
                 children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
-                    color: prefixColor,
+                    color: colors.textSecondary,
                     regular: true,
                     children: prefix
                 })
@@ -495,7 +482,6 @@ var TextFieldBaseComponent = /*#__PURE__*/ React.forwardRef(function(_param, ref
                 forId: id,
                 inputState: inputState,
                 shrinkLabel: shrinkLabel,
-                disabled: rest.disabled,
                 optional: !rest.required,
                 children: label
             }),

package/dist/text-field-components.d.ts

@@ -10,7 +10,6 @@ declare type LabelProps = {
     inputState: InputState;
     error?: boolean;
     children: string;
-    disabled?: boolean;
     style?: React.CSSProperties;
     optional?: boolean;
 };

package/dist/text-field-components.js

@@ -123,10 +123,7 @@ var useLabelStyles = (0, _jss).createUseStyles(function(theme) {
             fontSize: 18,
             lineHeight: '24px',
             color: function color(param) {
-                var inputState = param.inputState, error = param.error, disabled = param.disabled;
-                if (inputState === 'default' && disabled) {
-                    return theme.colors.textDisabled;
-                }
+                var inputState = param.inputState, error = param.error;
                 if (error && inputState !== 'default') {
                     return theme.colors.error;
                 }
@@ -162,13 +159,11 @@ var useLabelStyles = (0, _jss).createUseStyles(function(theme) {
     };
 });
 var Label = function Label(param) {
-    var shrinkLabel = param.shrinkLabel, forId = param.forId, inputState = param.inputState, error = param.error, children = param.children, disabled = param.disabled, style = param.style, optional = param.optional;
+    var shrinkLabel = param.shrinkLabel, forId = param.forId, inputState = param.inputState, error = param.error, children = param.children, style = param.style, optional = param.optional;
     var isShrinked = shrinkLabel || inputState === 'focused' || inputState === 'filled';
     var classes = useLabelStyles({
-        isShrinked: isShrinked,
         inputState: inputState,
-        error: error,
-        disabled: disabled
+        error: error
     });
     var ref = _slicedToArray(React.useState(''), 2), transitionStyle = ref[0], setTransitionStyle = ref[1];
     var ref1 = (0, _hooks).useTheme(), texts = ref1.texts;
@@ -264,6 +259,10 @@ var _obj1, _obj2;
 var useFieldContainerStyles = (0, _jss).createUseStyles(function(theme) {
     return {
         fieldContainer: (_obj1 = {
+            opacity: function opacity(param) {
+                var disabled = param.disabled;
+                return disabled ? 0.5 : 1;
+            },
             display: 'flex',
             flexDirection: 'column',
             minWidth: 96
@@ -288,13 +287,7 @@ var useFieldContainerStyles = (0, _jss).createUseStyles(function(theme) {
                 var multiline = param.multiline;
                 return multiline ? 152 : 56;
             }
-        }), _defineProperty(_obj2, "display", 'flex'), _defineProperty(_obj2, "position", 'relative'), _defineProperty(_obj2, "backgroundColor", function(param) {
-            var disabled = param.disabled;
-            return disabled ? theme.colors.backgroundAlternative : theme.colors.backgroundContainer;
-        }), _defineProperty(_obj2, "cursor", function(param) {
-            var disabled = param.disabled;
-            return disabled ? 'not-allowed' : 'initial';
-        }), _obj2)
+        }), _defineProperty(_obj2, "display", 'flex'), _defineProperty(_obj2, "position", 'relative'), _defineProperty(_obj2, "backgroundColor", theme.colors.backgroundContainer), _obj2)
     };
 });
 var FieldContainer = function FieldContainer(param) {

package/dist/text-field-components.js.flow

@@ -12,7 +12,6 @@ declare type LabelProps = {
   inputState: InputState,
   error?: boolean,
   children: string,
-  disabled?: boolean,
   style?: CssStyle,
   optional?: boolean,
 };

package/dist/text-link.d.ts

@@ -8,6 +8,7 @@ interface CommonProps {
         [className: string]: string;
     };
     small?: boolean;
+    disabled?: boolean;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
     dataAttributes?: DataAttributes;

package/dist/text-link.js

@@ -8,6 +8,7 @@ var _jss = require("./jss");
 var _touchable = _interopRequireDefault(require("./touchable"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _themeVariantContext = require("./theme-variant-context");
+var _formContext = require("./form-context");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -73,19 +74,22 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
+var _obj;
 var useStyles = (0, _jss).createUseStyles(function(theme) {
     return {
-        textLink: _defineProperty({
+        textLink: (_obj = {
             width: 'auto',
             lineHeight: 'inherit',
             display: 'inline-block',
             color: theme.colors.textLink,
             wordBreak: 'break-word'
-        }, theme.mq.supportsHover, {
-            '&:hover': {
+        }, _defineProperty(_obj, theme.mq.supportsHover, {
+            '&:hover:not([disabled])': {
                 textDecoration: 'underline'
             }
-        }),
+        }), _defineProperty(_obj, '&[disabled]', {
+            opacity: 0.5
+        }), _obj),
         inverse: {
             color: theme.colors.textLinkInverse
         },
@@ -94,19 +98,22 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         }
     };
 });
-var _obj;
+var _obj1;
 var TextLink = function TextLink(_param) {
-    var children = _param.children, _className = _param.className, className = _className === void 0 ? '' : _className, small = _param.small, props = _objectWithoutProperties(_param, [
+    var children = _param.children, _className = _param.className, className = _className === void 0 ? '' : _className, small = _param.small, disabled = _param.disabled, props = _objectWithoutProperties(_param, [
         "children",
         "className",
-        "small"
+        "small",
+        "disabled"
     ]);
     var classes = useStyles();
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
+    var ref = (0, _formContext).useForm(), formStatus = ref.formStatus;
     return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, _objectSpread({
     }, props, {
-        className: (0, _classnames).default(classes.textLink, className, (_obj = {
-        }, _defineProperty(_obj, classes.small, small), _defineProperty(_obj, classes.inverse, isInverse), _obj)),
+        disabled: disabled || formStatus === 'sending',
+        className: (0, _classnames).default(classes.textLink, className, (_obj1 = {
+        }, _defineProperty(_obj1, classes.small, small), _defineProperty(_obj1, classes.inverse, isInverse), _obj1)),
         children: children
     })));
 };

package/dist/text-link.js.flow

@@ -10,6 +10,7 @@ declare type CommonProps = {
     [className: string]: string,
   },
   small?: boolean,
+  disabled?: boolean,
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
 
   /**

package/dist/touchable.js

@@ -102,8 +102,7 @@ var useStyles = (0, _jss).createUseStyles(function() {
                 border: 'none'
             },
             '&[disabled]': {
-                cursor: 'auto',
-                pointerEvents: 'none'
+                cursor: 'default'
             },
             '&:active, &:hover': {
                 textDecoration: 'none'
@@ -207,7 +206,7 @@ var Touchable = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             "aria-labelledby": props['aria-labelledby'],
             onClick: handleHrefClick,
             onKeyDown: handleKeyDown,
-            href: props.disabled ? '' : getHref(),
+            href: props.disabled ? undefined : getHref(),
             target: openNewTab ? '_blank' : undefined,
             rel: openNewTab ? 'noopener noreferrer' : undefined,
             ref: ref,

package/dist-es/button.js

@@ -88,7 +88,7 @@ var commonClasses = function() {
             border: "".concat(BORDER_PX, "px solid transparent"),
             borderRadius: 4,
             overflow: 'hidden',
-            '&:hover': {
+            '&:hover:not([disabled])': {
                 transition: "background-color ".concat(transitionTiming, ", color ").concat(transitionTiming, ", border-color ").concat(transitionTiming)
             }
         },
@@ -143,6 +143,9 @@ var commonClasses = function() {
         }
     };
 };
+var disabledStyle = {
+    opacity: 0.5
+};
 var usePrimaryButtonStyles = createUseStyles(function(theme) {
     return _objectSpread({
     }, commonClasses(), {
@@ -152,10 +155,7 @@ var usePrimaryButtonStyles = createUseStyles(function(theme) {
             '&:enabled:active': {
                 backgroundColor: theme.colors.buttonPrimaryBackgroundSelected
             },
-            '&[disabled]:not($isLoading)': {
-                color: theme.colors.textButtonPrimaryDisabled,
-                backgroundColor: theme.colors.buttonPrimaryBackgroundDisabled
-            },
+            '&[disabled]:not($isLoading)': disabledStyle,
             // Next media queries were added in each button style, because a pair of bugs in mobile devices (related to: https://jira.tuenti.io/jira/browse/APPS-1882):
             // - When tapping on a button that takes you to next screen and then go back to the previous one, button still have the focus styles
             // - Same behavior if you do long press on the button
@@ -163,7 +163,7 @@ var usePrimaryButtonStyles = createUseStyles(function(theme) {
             // - Make sure that in FF hover still has it's proper styles
             // - Media query with "coarse" (mobile), avoids that in devices that have coarse implemented, focus style doesn't get stuck
             // Must be always declared for Firefox
-            '&:hover': {
+            '&:hover:not([disabled])': {
                 backgroundColor: theme.colors.buttonPrimaryBackgroundHover,
                 '@media (pointer: coarse)': {
                     // Revert hover background in touch devices
@@ -178,11 +178,8 @@ var usePrimaryButtonStyles = createUseStyles(function(theme) {
                 backgroundColor: theme.colors.buttonPrimaryBackgroundSelectedInverse,
                 color: theme.colors.textButtonPrimaryInverseSelected
             },
-            '&[disabled]:not($isLoading)': {
-                backgroundColor: theme.colors.buttonPrimaryBackgroundDisabledInverse,
-                color: theme.colors.textButtonPrimaryInverseDisabled
-            },
-            '&:hover': {
+            '&[disabled]:not($isLoading)': disabledStyle,
+            '&:hover:not([disabled])': {
                 color: theme.colors.textButtonPrimaryInverseSelected,
                 backgroundColor: theme.colors.buttonPrimaryBackgroundSelectedInverse,
                 '@media (pointer: coarse)': {
@@ -213,11 +210,8 @@ var useSecondaryButtonStyles = createUseStyles(function(theme) {
         }, buttonSecondaryLightStyle(theme), {
             '&:enabled:active': _objectSpread({
             }, buttonSecondaryHoverLightStyle(theme)),
-            '&[disabled]:not($isLoading)': {
-                color: theme.colors.textButtonSecondaryDisabled,
-                borderColor: theme.colors.buttonSecondaryBackgroundDisabled
-            },
-            '&:hover': _objectSpread({
+            '&[disabled]:not($isLoading)': disabledStyle,
+            '&:hover:not([disabled])': _objectSpread({
             }, buttonSecondaryHoverLightStyle(theme), {
                 '@media (pointer: coarse)': _objectSpread({
                 }, buttonSecondaryLightStyle(theme))
@@ -230,11 +224,8 @@ var useSecondaryButtonStyles = createUseStyles(function(theme) {
                 borderColor: theme.colors.buttonSecondaryBorderSelectedInverse,
                 color: theme.colors.textButtonSecondaryInverseSelected
             },
-            '&[disabled]:not($isLoading)': {
-                color: theme.colors.textButtonSecondaryInverseDisabled,
-                borderColor: theme.colors.buttonSecondaryBorderDisabledInverse
-            },
-            '&:hover': {
+            '&[disabled]:not($isLoading)': disabledStyle,
+            '&:hover:not([disabled])': {
                 borderColor: theme.colors.buttonSecondaryBorderSelectedInverse,
                 color: theme.colors.textButtonSecondaryInverseSelected,
                 '@media (pointer: coarse)': {
@@ -253,10 +244,9 @@ var dangerButtonStyles = function(theme) {
             backgroundColor: theme.colors.buttonDangerBackgroundSelected
         },
         '&[disabled]:not($isLoading)': {
-            color: theme.colors.textButtonPrimaryDisabled,
-            backgroundColor: theme.colors.buttonDangerBackgroundDisabled
+            opacity: 0.5
         },
-        '&:hover': {
+        '&:hover:not([disabled])': {
             backgroundColor: theme.colors.buttonDangerBackgroundHover,
             '@media (pointer: coarse)': {
                 // Revert hover background in touch devices
@@ -426,7 +416,7 @@ var useButtonLinkStyles = createUseStyles(function(theme) {
             '&:enabled:active': {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelected
             },
-            '&:hover': {
+            '&:hover:not([disabled])': {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelected,
                 '@media (pointer: coarse)': {
                     backgroundColor: 'initial'
@@ -438,7 +428,7 @@ var useButtonLinkStyles = createUseStyles(function(theme) {
             '&:enabled:active': {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse
             },
-            '&:hover': {
+            '&:hover:not([disabled])': {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse,
                 '@media (pointer: coarse)': {
                     backgroundColor: 'initial'

package/dist-es/checkbox.js

@@ -96,11 +96,15 @@ var useIconCheckboxStyles = createUseStyles(function(param) {
         },
         checkChecked: {
             transform: 'scale(1, 1)'
+        },
+        disabled: {
+            opacity: 0.5
         }
     };
 });
+var _obj;
 var IconCheckbox = function(param) {
-    var isChecked = param.isChecked;
+    var isChecked = param.isChecked, disabled = param.disabled;
     var classes = useIconCheckboxStyles();
     var ref = useTheme(), isIos = ref.isIos, colors = ref.colors;
     var icon = isIos ? /*#__PURE__*/ _jsx("svg", {
@@ -125,8 +129,8 @@ var IconCheckbox = function(param) {
         })
     });
     return(/*#__PURE__*/ _jsx("div", {
-        className: classnames(classes.box, _defineProperty({
-        }, classes.boxChecked, isChecked)),
+        className: classnames(classes.box, (_obj = {
+        }, _defineProperty(_obj, classes.boxChecked, isChecked), _defineProperty(_obj, classes.disabled, disabled), _obj)),
         children: icon
     }));
 };
@@ -137,8 +141,7 @@ var useStyles = createUseStyles(function() {
             display: 'inline'
         },
         disabled: {
-            opacity: 0.5,
-            pointerEvents: 'none'
+            opacity: 0.5
         }
     };
 });
@@ -171,6 +174,7 @@ var Checkbox = function(props) {
         }
     };
     var iconCheckbox = /*#__PURE__*/ _jsx(IconCheckbox, {
+        disabled: disabled,
         isChecked: value !== null && value !== void 0 ? value : checkedState
     });
     return(// When the checkbox is disabled, it shouldn't be focusable
@@ -183,8 +187,7 @@ var Checkbox = function(props) {
         onClick: disabled ? undefined : handleChange,
         tabIndex: disabled ? undefined : 0,
         ref: focusableRef,
-        className: classnames(classes.checkboxContainer, _defineProperty({
-        }, classes.disabled, disabled)),
+        className: classes.checkboxContainer,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabel ? undefined : labelId,
         "aria-disabled": disabled
@@ -209,6 +212,7 @@ var Checkbox = function(props) {
                     id: labelId,
                     role: hasExternalLabel ? 'presentation' : undefined,
                     children: /*#__PURE__*/ _jsx("span", {
+                        className: disabled ? classes.disabled : '',
                         children: props.children
                     })
                 })

package/dist-es/date-time-picker.js

@@ -182,7 +182,7 @@ var useStyles = createUseStyles(function() {
             '& .rdtPicker td.rdtDisabled, & .rdtPicker td.rdtDisabled:hover': {
                 background: 'none',
                 color: '#999999',
-                cursor: 'not-allowed'
+                cursor: 'default'
             },
             '& .rdtPicker td span.rdtOld': {
                 color: '#999999'
@@ -190,7 +190,7 @@ var useStyles = createUseStyles(function() {
             '& .rdtPicker td span.rdtDisabled, & .rdtPicker td span.rdtDisabled:hover': {
                 background: 'none',
                 color: '#999999',
-                cursor: 'not-allowed'
+                cursor: 'default'
             },
             '& .rdtPicker th': {
                 borderBottom: '1px solid #f9f9f9',
@@ -215,7 +215,7 @@ var useStyles = createUseStyles(function() {
             '& .rdtPicker th.rdtDisabled, & .rdtPicker th.rdtDisabled:hover': {
                 background: 'none',
                 color: '#999999',
-                cursor: 'not-allowed'
+                cursor: 'default'
             },
             '& .rdtPicker thead tr:first-of-type th': {
                 cursor: 'pointer'
@@ -291,11 +291,16 @@ var useStyles = createUseStyles(function() {
 });
 var DateTimePicker = function(_param) {
     var withTime = _param.withTime, mode = _param.mode, isValidDate = _param.isValidDate, optional = _param.optional, rest = _objectWithoutProperties(_param, ["withTime", "mode", "isValidDate", "optional"]);
-    var ref = _slicedToArray(React.useState(false), 2), showPicker = ref[0], setShowPicker = ref[1];
+    var ref = _slicedToArray(React.useState(false), 2), showPicker = ref[0], realSetShowPicker = ref[1];
     var classes = useStyles();
     var ref1 = useTheme(), texts = ref1.texts;
     var fieldRef = React.useRef(null);
     var ref2 = useElementDimensions(), pickerContainerHeight = ref2.height, pickerContainerRef = ref2.ref;
+    var setShowPicker = function(show) {
+        if (!rest.disabled) {
+            realSetShowPicker(show);
+        }
+    };
     var getPickerContainerStyles = function() {
         var ref;
         var ref3 = ((ref = fieldRef.current) === null || ref === void 0 ? void 0 : ref.getBoundingClientRect()) || {
@@ -350,6 +355,7 @@ var DateTimePicker = function(_param) {
             }));
         }
         return(/*#__PURE__*/ _jsx(IconButton, {
+            disabled: rest.disabled,
             "aria-label": "",
             size: 32,
             onPress: function() {