@carbon/react 1.56.0-rc.1 → 1.56.0

package/es/components/ExpandableSearch/ExpandableSearch.d.ts

@@ -6,9 +6,5 @@
  */
 import React from 'react';
 import { type SearchProps } from '../Search';
-declare function ExpandableSearch({ onBlur, onChange, onExpand, onKeyDown, defaultValue, isExpanded, ...props }: SearchProps): import("react/jsx-runtime").JSX.Element;
-declare namespace ExpandableSearch {
-    var propTypes: React.WeakValidationMap<SearchProps & React.RefAttributes<HTMLInputElement>> | undefined;
-    var displayName: string;
-}
+declare const ExpandableSearch: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<HTMLInputElement>>;
 export default ExpandableSearch;

package/es/components/ExpandableSearch/ExpandableSearch.js

@@ -12,10 +12,11 @@ import Search from '../Search/Search.js';
 import '../Search/Search.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { composeEventHandlers } from '../../tools/events.js';
+import mergeRefs from '../../tools/mergeRefs.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape } from '../../internal/keyboard/keys.js';
 
-function ExpandableSearch(_ref) {
+const ExpandableSearch = /*#__PURE__*/React__default.forwardRef(function ExpandableSearch(_ref, forwardedRef) {
   let {
     onBlur,
     onChange,
@@ -61,14 +62,14 @@ function ExpandableSearch(_ref) {
   return /*#__PURE__*/React__default.createElement(Search, _extends({}, props, {
     defaultValue: defaultValue,
     isExpanded: expanded,
-    ref: searchRef,
+    ref: mergeRefs(searchRef, forwardedRef),
     className: classes,
     onBlur: composeEventHandlers([onBlur, handleBlur]),
     onChange: composeEventHandlers([onChange, handleChange]),
     onExpand: composeEventHandlers([onExpand, handleExpand]),
     onKeyDown: composeEventHandlers([onKeyDown, handleKeyDown])
   }));
-}
+});
 ExpandableSearch.propTypes = Search.propTypes;
 ExpandableSearch.displayName = 'ExpandableSearch';
 

package/es/components/Slider/Slider.js

@@ -427,6 +427,10 @@ class Slider extends PureComponent {
       }
     });
     _defineProperty(this, "processNewInputValue", input => {
+      this.setState({
+        correctedValue: null,
+        correctedPosition: null
+      });
       const targetValue = Number.parseFloat(input.value);
       const validity = !isNaN(targetValue);
 
@@ -978,8 +982,8 @@ class Slider extends PureComponent {
       correctedPosition,
       isRtl
     } = this.state;
-    const showWarning = !readOnly && warn && isValid || typeof correctedValue !== null && correctedPosition === HandlePosition.LOWER;
-    const showWarningUpper = !readOnly && warn && (twoHandles ? isValidUpper : isValid) || typeof correctedValue !== null && correctedPosition === (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER);
+    const showWarning = !readOnly && warn || typeof correctedValue !== null && correctedPosition === HandlePosition.LOWER && isValid;
+    const showWarningUpper = !readOnly && warn || typeof correctedValue !== null && correctedPosition === (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER) && (twoHandles ? isValidUpper : isValid);
     return /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, prefix => {
       const labelId = `${id}-label`;
       const labelClasses = cx(`${prefix}--label`, {

package/es/components/TextInput/PasswordInput.js

@@ -14,6 +14,8 @@ import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.
 import { textInputProps } from './util.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
+import '../Tooltip/DefinitionTooltip.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
@@ -38,7 +40,7 @@ const PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordIn
     size = 'md',
     showPasswordLabel = 'Show password',
     tooltipPosition = 'bottom',
-    tooltipAlignment = 'center',
+    tooltipAlignment = 'end',
     type = 'password',
     warn = false,
     warnText,
@@ -127,11 +129,25 @@ const PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordIn
   }) : /*#__PURE__*/React__default.createElement(View, {
     className: `${prefix}--icon-visibility-on`
   });
-  const passwordVisibilityToggleClasses = cx(`${prefix}--text-input--password__visibility__toggle`, `${prefix}--btn`, `${prefix}--btn--icon-only`, `${prefix}--tooltip__trigger`, `${prefix}--tooltip--a11y`, {
-    [`${prefix}--btn--disabled`]: disabled,
+  const passwordVisibilityToggleClasses = cx(`${prefix}--text-input--password__visibility__toggle`, `${prefix}--btn`, `${prefix}--tooltip__trigger`, `${prefix}--tooltip--a11y`, {
     [`${prefix}--tooltip--${tooltipPosition}`]: tooltipPosition,
     [`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
   });
+  let align = undefined;
+  if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
+    if (tooltipAlignment === 'center') {
+      align = tooltipPosition;
+    }
+    if (tooltipAlignment === 'end') {
+      align = `${tooltipPosition}-right`;
+    }
+    if (tooltipAlignment === 'start') {
+      align = `${tooltipPosition}-left`;
+    }
+  }
+  if (tooltipPosition === 'right' || tooltipPosition === 'left') {
+    align = tooltipPosition;
+  }
   const input = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("input", _extends({}, textInputProps({
     sharedTextInputProps,
     invalid: normalizedProps.invalid,
@@ -145,14 +161,16 @@ const PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordIn
     "data-toggle-password-visibility": inputType === 'password'
   })), isFluid && /*#__PURE__*/React__default.createElement("hr", {
     className: `${prefix}--text-input__divider`
-  }), /*#__PURE__*/React__default.createElement("button", {
+  }), /*#__PURE__*/React__default.createElement(Tooltip, {
+    align: align,
+    className: `${prefix}--toggle-password-tooltip`,
+    label: passwordIsVisible ? hidePasswordLabel : showPasswordLabel
+  }, /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: passwordVisibilityToggleClasses,
     disabled: disabled,
     onClick: handleTogglePasswordVisibility
-  }, !disabled && /*#__PURE__*/React__default.createElement("span", {
-    className: `${prefix}--assistive-text`
-  }, passwordIsVisible ? hidePasswordLabel : showPasswordLabel), passwordVisibilityIcon));
+  }, passwordVisibilityIcon)));
   useEffect(() => {
     setInputType(type);
   }, [type]);

package/lib/components/ExpandableSearch/ExpandableSearch.d.ts

@@ -6,9 +6,5 @@
  */
 import React from 'react';
 import { type SearchProps } from '../Search';
-declare function ExpandableSearch({ onBlur, onChange, onExpand, onKeyDown, defaultValue, isExpanded, ...props }: SearchProps): import("react/jsx-runtime").JSX.Element;
-declare namespace ExpandableSearch {
-    var propTypes: React.WeakValidationMap<SearchProps & React.RefAttributes<HTMLInputElement>> | undefined;
-    var displayName: string;
-}
+declare const ExpandableSearch: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<HTMLInputElement>>;
 export default ExpandableSearch;

package/lib/components/ExpandableSearch/ExpandableSearch.js

@@ -16,6 +16,7 @@ var Search = require('../Search/Search.js');
 require('../Search/Search.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var events = require('../../tools/events.js');
+var mergeRefs = require('../../tools/mergeRefs.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -24,7 +25,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function ExpandableSearch(_ref) {
+const ExpandableSearch = /*#__PURE__*/React__default["default"].forwardRef(function ExpandableSearch(_ref, forwardedRef) {
   let {
     onBlur,
     onChange,
@@ -70,14 +71,14 @@ function ExpandableSearch(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(Search["default"], _rollupPluginBabelHelpers["extends"]({}, props, {
     defaultValue: defaultValue,
     isExpanded: expanded,
-    ref: searchRef,
+    ref: mergeRefs["default"](searchRef, forwardedRef),
     className: classes,
     onBlur: events.composeEventHandlers([onBlur, handleBlur]),
     onChange: events.composeEventHandlers([onChange, handleChange]),
     onExpand: events.composeEventHandlers([onExpand, handleExpand]),
     onKeyDown: events.composeEventHandlers([onKeyDown, handleKeyDown])
   }));
-}
+});
 ExpandableSearch.propTypes = Search["default"].propTypes;
 ExpandableSearch.displayName = 'ExpandableSearch';
 

package/lib/components/Slider/Slider.js

@@ -438,6 +438,10 @@ class Slider extends React.PureComponent {
       }
     });
     _rollupPluginBabelHelpers.defineProperty(this, "processNewInputValue", input => {
+      this.setState({
+        correctedValue: null,
+        correctedPosition: null
+      });
       const targetValue = Number.parseFloat(input.value);
       const validity = !isNaN(targetValue);
 
@@ -989,8 +993,8 @@ class Slider extends React.PureComponent {
       correctedPosition,
       isRtl
     } = this.state;
-    const showWarning = !readOnly && warn && isValid || typeof correctedValue !== null && correctedPosition === HandlePosition.LOWER;
-    const showWarningUpper = !readOnly && warn && (twoHandles ? isValidUpper : isValid) || typeof correctedValue !== null && correctedPosition === (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER);
+    const showWarning = !readOnly && warn || typeof correctedValue !== null && correctedPosition === HandlePosition.LOWER && isValid;
+    const showWarningUpper = !readOnly && warn || typeof correctedValue !== null && correctedPosition === (twoHandles ? HandlePosition.UPPER : HandlePosition.LOWER) && (twoHandles ? isValidUpper : isValid);
     return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, prefix => {
       const labelId = `${id}-label`;
       const labelClasses = cx__default["default"](`${prefix}--label`, {

package/lib/components/TextInput/PasswordInput.js

@@ -18,6 +18,8 @@ var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js
 var util = require('./util.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
+require('../Tooltip/DefinitionTooltip.js');
+var Tooltip = require('../Tooltip/Tooltip.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 
@@ -48,7 +50,7 @@ const PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function
     size = 'md',
     showPasswordLabel = 'Show password',
     tooltipPosition = 'bottom',
-    tooltipAlignment = 'center',
+    tooltipAlignment = 'end',
     type = 'password',
     warn = false,
     warnText,
@@ -137,11 +139,25 @@ const PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function
   }) : /*#__PURE__*/React__default["default"].createElement(iconsReact.View, {
     className: `${prefix}--icon-visibility-on`
   });
-  const passwordVisibilityToggleClasses = cx__default["default"](`${prefix}--text-input--password__visibility__toggle`, `${prefix}--btn`, `${prefix}--btn--icon-only`, `${prefix}--tooltip__trigger`, `${prefix}--tooltip--a11y`, {
-    [`${prefix}--btn--disabled`]: disabled,
+  const passwordVisibilityToggleClasses = cx__default["default"](`${prefix}--text-input--password__visibility__toggle`, `${prefix}--btn`, `${prefix}--tooltip__trigger`, `${prefix}--tooltip--a11y`, {
     [`${prefix}--tooltip--${tooltipPosition}`]: tooltipPosition,
     [`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
   });
+  let align = undefined;
+  if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
+    if (tooltipAlignment === 'center') {
+      align = tooltipPosition;
+    }
+    if (tooltipAlignment === 'end') {
+      align = `${tooltipPosition}-right`;
+    }
+    if (tooltipAlignment === 'start') {
+      align = `${tooltipPosition}-left`;
+    }
+  }
+  if (tooltipPosition === 'right' || tooltipPosition === 'left') {
+    align = tooltipPosition;
+  }
   const input = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, util.textInputProps({
     sharedTextInputProps,
     invalid: normalizedProps.invalid,
@@ -155,14 +171,16 @@ const PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function
     "data-toggle-password-visibility": inputType === 'password'
   })), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
     className: `${prefix}--text-input__divider`
-  }), /*#__PURE__*/React__default["default"].createElement("button", {
+  }), /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
+    align: align,
+    className: `${prefix}--toggle-password-tooltip`,
+    label: passwordIsVisible ? hidePasswordLabel : showPasswordLabel
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     className: passwordVisibilityToggleClasses,
     disabled: disabled,
     onClick: handleTogglePasswordVisibility
-  }, !disabled && /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--assistive-text`
-  }, passwordIsVisible ? hidePasswordLabel : showPasswordLabel), passwordVisibilityIcon));
+  }, passwordVisibilityIcon)));
   React.useEffect(() => {
     setInputType(type);
   }, [type]);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.56.0-rc.1",
+  "version": "1.56.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -49,9 +49,9 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.19.0",
-    "@carbon/icons-react": "^11.40.0-rc.1",
+    "@carbon/icons-react": "^11.40.0",
     "@carbon/layout": "^11.21.0",
-    "@carbon/styles": "^1.55.1-rc.0",
+    "@carbon/styles": "^1.56.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.4.0",
     "classnames": "2.5.1",
@@ -141,5 +141,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "c6ef02eb0fa5b2dcaccbbe60d45f26884a167948"
+  "gitHead": "7d883c90790c14c76ce131a62121a533ffe6af6f"
 }