@telefonica/mistica 10.14.1 → 10.17.0

package/CHANGELOG.md

@@ -1,3 +1,37 @@
+# [10.17.0](https://github.com/Telefonica/mistica-web/compare/v10.16.0...v10.17.0) (2022-01-18)
+
+
+### Bug Fixes
+
+* **Menu:** Menu component improvements ([#392](https://github.com/Telefonica/mistica-web/issues/392)) ([d8f1098](https://github.com/Telefonica/mistica-web/commit/d8f10988c7273da71645768c22d3a106dae0f15e))
+
+
+### Features
+
+* **Feedback:** show info/error icons in vivo ([c60e3a3](https://github.com/Telefonica/mistica-web/commit/c60e3a391174f0f6ff6e40c5bd795f2f950b5d69))
+* **TextFieldBase:** expose internal TextFieldBase component for advanced usage ([e917a99](https://github.com/Telefonica/mistica-web/commit/e917a99379d5f7fedddb0d5727cffd88af5a1d0f))
+
+# [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)
+
+
+### Features
+
+* **Form fields:** review disabled state ([#386](https://github.com/Telefonica/mistica-web/issues/386)) ([615f90d](https://github.com/Telefonica/mistica-web/commit/615f90de59ec647121f1c8c2cb6c342ace5df396))
+
+## [10.14.2](https://github.com/Telefonica/mistica-web/compare/v10.14.1...v10.14.2) (2022-01-03)
+
+
+### Bug Fixes
+
+* **release:** commit updated package-version.tsx file on release ([#389](https://github.com/Telefonica/mistica-web/issues/389)) ([61e384a](https://github.com/Telefonica/mistica-web/commit/61e384a0cd93f32bae691c15b209b5e6f3e42485))
+
 ## [10.14.1](https://github.com/Telefonica/mistica-web/compare/v10.14.0...v10.14.1) (2022-01-03)
 
 

package/dist/button.js

@@ -123,7 +123,7 @@ var commonClasses = function commonClasses() {
             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)
             }
         },
@@ -178,6 +178,9 @@ var commonClasses = function commonClasses() {
         }
     };
 };
+var disabledStyle = {
+    opacity: 0.5
+};
 var usePrimaryButtonStyles = (0, _jss).createUseStyles(function(theme) {
     return _objectSpread({
     }, commonClasses(), {
@@ -187,10 +190,7 @@ var usePrimaryButtonStyles = (0, _jss).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
@@ -198,7 +198,7 @@ var usePrimaryButtonStyles = (0, _jss).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
@@ -213,11 +213,8 @@ var usePrimaryButtonStyles = (0, _jss).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)': {
@@ -248,11 +245,8 @@ var useSecondaryButtonStyles = (0, _jss).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))
@@ -265,11 +259,8 @@ var useSecondaryButtonStyles = (0, _jss).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)': {
@@ -288,10 +279,9 @@ var dangerButtonStyles = function dangerButtonStyles(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
@@ -461,7 +451,7 @@ var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
             '&:enabled:active': {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelected
             },
-            '&:hover': {
+            '&:hover:not([disabled])': {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelected,
                 '@media (pointer: coarse)': {
                     backgroundColor: 'initial'
@@ -473,7 +463,7 @@ var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
             '&:enabled:active': {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse
             },
-            '&:hover': {
+            '&:hover:not([disabled])': {
                 backgroundColor: theme.colors.buttonLinkBackgroundSelectedInverse,
                 '@media (pointer: coarse)': {
                     backgroundColor: 'initial'

package/dist/checkbox.js

@@ -130,11 +130,15 @@ var useIconCheckboxStyles = (0, _jss).createUseStyles(function(param) {
         },
         checkChecked: {
             transform: 'scale(1, 1)'
+        },
+        disabled: {
+            opacity: 0.5
         }
     };
 });
+var _obj;
 var IconCheckbox = function IconCheckbox(param) {
-    var isChecked = param.isChecked;
+    var isChecked = param.isChecked, disabled = param.disabled;
     var classes = useIconCheckboxStyles();
     var ref = (0, _hooks).useTheme(), isIos = ref.isIos, colors = ref.colors;
     var icon = isIos ? /*#__PURE__*/ (0, _jsxRuntime).jsx("svg", {
@@ -159,8 +163,8 @@ var IconCheckbox = function IconCheckbox(param) {
         })
     });
     return(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-        className: (0, _classnames).default(classes.box, _defineProperty({
-        }, classes.boxChecked, isChecked)),
+        className: (0, _classnames).default(classes.box, (_obj = {
+        }, _defineProperty(_obj, classes.boxChecked, isChecked), _defineProperty(_obj, classes.disabled, disabled), _obj)),
         children: icon
     }));
 };
@@ -171,8 +175,7 @@ var useStyles = (0, _jss).createUseStyles(function() {
             display: 'inline'
         },
         disabled: {
-            opacity: 0.5,
-            pointerEvents: 'none'
+            opacity: 0.5
         }
     };
 });
@@ -205,6 +208,7 @@ var Checkbox = function Checkbox(props) {
         }
     };
     var iconCheckbox = /*#__PURE__*/ (0, _jsxRuntime).jsx(IconCheckbox, {
+        disabled: disabled,
         isChecked: value !== null && value !== void 0 ? value : checkedState
     });
     return(// eslint-disable-next-line jsx-a11y/interactive-supports-focus
@@ -216,8 +220,7 @@ var Checkbox = function Checkbox(props) {
         onClick: disabled ? undefined : handleChange,
         tabIndex: disabled ? undefined : 0,
         ref: focusableRef,
-        className: (0, _classnames).default(classes.checkboxContainer, _defineProperty({
-        }, classes.disabled, disabled)),
+        className: classes.checkboxContainer,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabel ? undefined : labelId,
         "aria-disabled": disabled
@@ -242,6 +245,7 @@ var Checkbox = function Checkbox(props) {
                     id: labelId,
                     role: hasExternalLabel ? 'presentation' : undefined,
                     children: /*#__PURE__*/ (0, _jsxRuntime).jsx("span", {
+                        className: disabled ? classes.disabled : '',
                         children: props.children
                     })
                 })

package/dist/credit-card-expiration-field.js

@@ -7,12 +7,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
 var _hooks = require("./hooks");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
+var _textFieldBase = require("./text-field-base");
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -243,7 +238,7 @@ var CreditCardExpirationField = function CreditCardExpirationField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         onChange: function onChange(event) {
             fieldProps.onChange(event);

package/dist/credit-card-number-field.js

@@ -8,7 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
 var _hooks = require("./hooks");
 var _creditCard = require("./utils/credit-card");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _iconCreditcard = _interopRequireDefault(require("./icons/icon-creditcard"));
 var _iconVisa = _interopRequireDefault(require("./icons/icon-visa"));
 var _iconMastercard = _interopRequireDefault(require("./icons/icon-mastercard"));
@@ -358,7 +358,7 @@ var CreditCardNumberField = function CreditCardNumberField(_param) {
         onChangeValue: onChangeValue
     });
     var ref2;
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         onChange: function onChange(event) {
             fieldProps.onChange(event);

package/dist/cvv-field.js

@@ -12,7 +12,7 @@ var _tooltip = _interopRequireDefault(require("./tooltip"));
 var _iconButton = _interopRequireDefault(require("./icon-button"));
 var _iconInfoCvv = _interopRequireDefault(require("./icons/icon-info-cvv"));
 var _formContext = require("./form-context");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _integerField = require("./integer-field");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -178,7 +178,7 @@ var CvvField = function CvvField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         maxLength: maxLength,
         onChange: function onChange(event) {

package/dist/date-field.js

@@ -6,7 +6,7 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _dom = require("./utils/dom");
 var _environment = require("./utils/environment");
 var _iconCalendarRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-calendar-regular"));
@@ -168,7 +168,7 @@ var DateField = function DateField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var nativePicker = /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    var nativePicker = /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         min: min ? (0, _time).getLocalDateString(min) : undefined,
         max: max ? (0, _time).getLocalDateString(max) : undefined,

package/dist/date-time-field.js

@@ -6,7 +6,7 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _dom = require("./utils/dom");
 var _environment = require("./utils/environment");
 var _time = require("./utils/time");
@@ -169,7 +169,7 @@ var FormDateField = function FormDateField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    var nativePicker = /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    var nativePicker = /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         min: min ? (0, _time).getLocalDateTimeString(min) : undefined,
         max: max ? (0, _time).getLocalDateTimeString(max) : undefined,

package/dist/date-time-picker.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _iconCalendarRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-calendar-regular"));
 var _reactDatetime = _interopRequireDefault(require("react-datetime"));
 var _overlay = _interopRequireDefault(require("./overlay"));
@@ -218,7 +218,7 @@ var useStyles = (0, _jss).createUseStyles(function() {
             '& .rdtPicker td.rdtDisabled, & .rdtPicker td.rdtDisabled:hover': {
                 background: 'none',
                 color: '#999999',
-                cursor: 'not-allowed'
+                cursor: 'default'
             },
             '& .rdtPicker td span.rdtOld': {
                 color: '#999999'
@@ -226,7 +226,7 @@ var useStyles = (0, _jss).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',
@@ -251,7 +251,7 @@ var useStyles = (0, _jss).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'
@@ -332,11 +332,16 @@ var DateTimePicker = function DateTimePicker(_param) {
         "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 = (0, _hooks).useTheme(), texts = ref1.texts;
     var fieldRef = React.useRef(null);
     var ref2 = (0, _hooks).useElementDimensions(), pickerContainerHeight = ref2.height, pickerContainerRef = ref2.ref;
+    var setShowPicker = function setShowPicker(show) {
+        if (!rest.disabled) {
+            realSetShowPicker(show);
+        }
+    };
     var getPickerContainerStyles = function getPickerContainerStyles() {
         var ref;
         var ref3 = ((ref = fieldRef.current) === null || ref === void 0 ? void 0 : ref.getBoundingClientRect()) || {
@@ -391,6 +396,7 @@ var DateTimePicker = function DateTimePicker(_param) {
             }));
         }
         return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
+            disabled: rest.disabled,
             "aria-label": "",
             size: 32,
             onPress: function onPress() {
@@ -402,7 +408,7 @@ var DateTimePicker = function DateTimePicker(_param) {
     };
     return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(_jsxRuntime.Fragment, {
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
             }, rest, {
                 style: {
                     cursor: 'default'

package/dist/decimal-field.js

@@ -7,15 +7,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _formContext = require("./form-context");
 var _hooks = require("./hooks");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _dom = require("./utils/dom");
 var _rifm = require("rifm");
 var _common = require("./utils/common");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -244,7 +239,7 @@ var DecimalField = function DecimalField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         inputComponent: DecimalInput,
         inputProps: {

package/dist/email-field.js

@@ -6,12 +6,7 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _formContext = require("./form-context");
 var _hooks = require("./hooks");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
+var _textFieldBase = require("./text-field-base");
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -116,7 +111,7 @@ var EmailField = function EmailField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         type: "email",
         inputMode: "email",

package/dist/feedback.js

@@ -459,13 +459,12 @@ var ErrorFeedbackScreen = function ErrorFeedbackScreen(_param) {
         "children",
         "errorReference"
     ]);
-    var ref = (0, _hooks).useTheme(), skinName = ref.skinName, colors = ref.colors;
-    var hasIcon = skinName !== _constants.VIVO_SKIN;
+    var ref = (0, _hooks).useTheme(), colors = ref.colors;
     return(/*#__PURE__*/ (0, _jsxRuntime).jsxs(FeedbackScreen, _objectSpread({
     }, otherProps, {
         hapticFeedback: "error",
-        icon: hasIcon ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconError.default, {
-        }) : undefined,
+        icon: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconError.default, {
+        }),
         animateText: true,
         children: [
             children,
@@ -479,12 +478,10 @@ var ErrorFeedbackScreen = function ErrorFeedbackScreen(_param) {
 };
 exports.ErrorFeedbackScreen = ErrorFeedbackScreen;
 var InfoFeedbackScreen = function InfoFeedbackScreen(props) {
-    var ref = (0, _hooks).useTheme(), skinName = ref.skinName;
-    var hasIcon = skinName !== _constants.VIVO_SKIN;
     return(/*#__PURE__*/ (0, _jsxRuntime).jsx(FeedbackScreen, _objectSpread({
     }, props, {
-        icon: hasIcon ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconInfo.default, {
-        }) : undefined
+        icon: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconInfo.default, {
+        })
     })));
 };
 exports.InfoFeedbackScreen = InfoFeedbackScreen;

package/dist/iban-field.js

@@ -7,15 +7,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _rifm = require("rifm");
 var _formContext = require("./form-context");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
+var _textFieldBase = require("./text-field-base");
 var _dom = require("./utils/dom");
 var _common = require("./utils/common");
 var _hooks = require("./hooks");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -297,7 +292,7 @@ var IbanField = function IbanField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         inputComponent: IbanInput
     })));

package/dist/index.d.ts

@@ -58,6 +58,7 @@ export { default as Image } from './image';
 export { default as Form } from './form';
 export { default as Select } from './select';
 export { default as TextField } from './text-field';
+export { TextFieldBase } from './text-field-base';
 export { default as SearchField } from './search-field';
 export { default as EmailField } from './email-field';
 export { default as PhoneNumberField } from './phone-number-field';
@@ -73,7 +74,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

@@ -584,6 +584,12 @@ Object.defineProperty(exports, "TextField", {
         return _textField.default;
     }
 });
+Object.defineProperty(exports, "TextFieldBase", {
+    enumerable: true,
+    get: function() {
+        return _textFieldBase.TextFieldBase;
+    }
+});
 Object.defineProperty(exports, "SearchField", {
     enumerable: true,
     get: function() {
@@ -680,6 +686,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() {
@@ -8289,6 +8301,7 @@ var _image = _interopRequireDefault(require("./image"));
 var _form = _interopRequireDefault(require("./form"));
 var _select = _interopRequireDefault(require("./select"));
 var _textField = _interopRequireDefault(require("./text-field"));
+var _textFieldBase = require("./text-field-base");
 var _searchField = _interopRequireDefault(require("./search-field"));
 var _emailField = _interopRequireDefault(require("./email-field"));
 var _phoneNumberField = _interopRequireDefault(require("./phone-number-field"));

package/dist/index.js.flow

@@ -101,6 +101,7 @@ declare export { default as Image } from "./image";
 declare export { default as Form } from "./form";
 declare export { default as Select } from "./select";
 declare export { default as TextField } from "./text-field";
+declare export { TextFieldBase } from "./text-field-base";
 declare export { default as SearchField } from "./search-field";
 declare export { default as EmailField } from "./email-field";
 declare export { default as PhoneNumberField } from "./phone-number-field";
@@ -116,7 +117,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/integer-field.js

@@ -6,12 +6,7 @@ exports.default = exports.IntegerInput = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _formContext = require("./form-context");
 var _hooks = require("./hooks");
-var _textFieldBase = _interopRequireDefault(require("./text-field-base"));
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
+var _textFieldBase = require("./text-field-base");
 function _defineProperty(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -137,7 +132,7 @@ var IntegerField = function IntegerField(_param) {
         onChange: onChange,
         onChangeValue: onChangeValue
     });
-    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.default, _objectSpread({
+    return(/*#__PURE__*/ (0, _jsxRuntime).jsx(_textFieldBase.TextFieldBaseAutosuggest, _objectSpread({
     }, rest, fieldProps, {
         inputComponent: IntegerInput
     })));

package/dist/list.d.ts

@@ -14,6 +14,7 @@ interface CommonProps {
     role?: string;
     extra?: React.ReactNode;
     dataAttributes?: DataAttributes;
+    disabled?: boolean;
 }
 declare type ControlProps = {
     name?: string;