@clayui/tooltip 3.35.1 → 4.0.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.0.0](https://github.com/liferay/clay/compare/v3.36.0...v4.0.0) (2021-10-06)
+
+**Note:** Version bump only for package @clayui/tooltip
+
+# [3.36.0](https://github.com/liferay/clay/compare/v3.35.3...v3.36.0) (2021-09-23)
+
+### Bug Fixes
+
+-   **@clayui/tooltip:** forces tooltip to be repositioned when the x-axis is modified ([b62313c](https://github.com/liferay/clay/commit/b62313c))
+-   **@clayui/tooltip:** stop the always showing warnings ([3858bfe](https://github.com/liferay/clay/commit/3858bfe))
+-   **@clyaui/tooltip:** fixes error when not forcing Tooltip repositioning when X axis is modified ([187f1ef](https://github.com/liferay/clay/commit/187f1ef))
+
+## [3.35.3](https://github.com/liferay/clay/compare/v3.35.2...v3.35.3) (2021-09-09)
+
+**Note:** Version bump only for package @clayui/tooltip
+
+## [3.35.2](https://github.com/liferay/clay/compare/v3.35.1...v3.35.2) (2021-08-30)
+
+**Note:** Version bump only for package @clayui/tooltip
+
 ## [3.35.1](https://github.com/liferay/clay/compare/v3.35.0...v3.35.1) (2021-08-30)
 
 **Note:** Version bump only for package @clayui/tooltip

package/lib/TooltipProvider.js

@@ -33,16 +33,16 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 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; }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var ALIGNMENTS = ['top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left'];
 var ALIGNMENTS_MAP = {
   bottom: ['tc', 'bc'],
@@ -64,6 +64,12 @@ var ALIGNMENTS_INVERSE_MAP = {
   tlbl: 'bottom-left',
   trbr: 'bottom-right'
 };
+
+var ALIGNMENTS_FORCE_MAP = _objectSpread(_objectSpread({}, ALIGNMENTS_INVERSE_MAP), {}, {
+  bctc: 'top-left',
+  tcbc: 'bottom-left'
+});
+
 var initialState = {
   align: 'top',
   message: '',
@@ -274,7 +280,7 @@ var TooltipProvider = function TooltipProvider(_ref2) {
   _react.default.useEffect(function () {
     if (titleNodeRef.current && tooltipRef.current) {
       var points = ALIGNMENTS_MAP[align || 'top'];
-      var newAlignmentString = (0, _shared.doAlign)({
+      var alignment = (0, _shared.doAlign)({
         overflow: {
           adjustX: autoAlign,
           adjustY: autoAlign
@@ -282,20 +288,26 @@ var TooltipProvider = function TooltipProvider(_ref2) {
         points: points,
         sourceElement: tooltipRef.current,
         targetElement: titleNodeRef.current
-      }).points.join('');
+      });
+      var alignmentString = alignment.points.join('');
       var pointsString = points.join('');
 
-      if (pointsString !== newAlignmentString) {
+      if (alignment.overflow.adjustX) {
+        dispatch({
+          align: ALIGNMENTS_FORCE_MAP[alignmentString],
+          type: 'align'
+        });
+      } else if (pointsString !== alignmentString) {
         dispatch({
-          align: ALIGNMENTS_INVERSE_MAP[newAlignmentString],
+          align: ALIGNMENTS_INVERSE_MAP[alignmentString],
           type: 'align'
         });
       }
     }
   }, [align, show]);
 
-  "production" !== "production" ? (0, _warning.default)(!children && !scope, '<TooltipProvider />: You must use at least one of the following props: `children` or `scope`.') : void 0;
-  "production" !== "production" ? (0, _warning.default)(children && scope, '<TooltipProvider />: If you want to use `scope`, use <TooltipProvider /> as a singleton and do not pass `children`.') : void 0;
+  "production" !== "production" ? (0, _warning.default)(typeof children === 'undefined' && typeof scope !== 'undefined' || typeof scope === 'undefined' && typeof children !== 'undefined', '<TooltipProvider />: You must use at least one of the following props: `children` or `scope`.') : void 0;
+  "production" !== "production" ? (0, _warning.default)(typeof children !== 'undefined' || typeof scope !== 'undefined', '<TooltipProvider />: If you want to use `scope`, use <TooltipProvider /> as a singleton and do not pass `children`.') : void 0;
   "production" !== "production" ? (0, _warning.default)((children === null || children === void 0 ? void 0 : children.type) !== _react.default.Fragment, '<TooltipProvider />: React Fragment is not allowed as a child to TooltipProvider. Child must be a single HTML element that accepts `onMouseOver` and `onMouseOut`.') : void 0;
   var titleContent = contentRenderer({
     targetNode: targetRef.current,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@clayui/tooltip",
-	"version": "3.35.1",
+	"version": "4.0.0",
 	"description": "ClayTooltip component",
 	"license": "BSD-3-Clause",
 	"repository": "https://github.com/liferay/clay",
@@ -26,7 +26,7 @@
 		"react"
 	],
 	"dependencies": {
-		"@clayui/shared": "^3.35.1",
+		"@clayui/shared": "^4.0.0",
 		"classnames": "^2.2.6",
 		"warning": "^4.0.3"
 	},
@@ -38,5 +38,5 @@
 	"browserslist": [
 		"extends browserslist-config-clay"
 	],
-	"gitHead": "986bb1acce9efef75fdc1bcd8af7b9c0b9daff7a"
+	"gitHead": "0d285c26936b985e7be90e61b6c21e04734a0ad9"
 }

package/src/TooltipProvider.tsx

@@ -48,6 +48,12 @@ const ALIGNMENTS_INVERSE_MAP = {
 	trbr: 'bottom-right',
 } as const;
 
+const ALIGNMENTS_FORCE_MAP = {
+	...ALIGNMENTS_INVERSE_MAP,
+	bctc: 'top-left',
+	tcbc: 'bottom-left',
+} as const;
+
 interface IState {
 	align?: typeof ALIGNMENTS[number];
 	message?: string;
@@ -335,7 +341,7 @@ const TooltipProvider: React.FunctionComponent<
 		) {
 			const points = ALIGNMENTS_MAP[align || 'top'] as [string, string];
 
-			const newAlignmentString = doAlign({
+			const alignment = doAlign({
 				overflow: {
 					adjustX: autoAlign,
 					adjustY: autoAlign,
@@ -344,13 +350,22 @@ const TooltipProvider: React.FunctionComponent<
 				sourceElement: (tooltipRef as React.RefObject<HTMLDivElement>)
 					.current!,
 				targetElement: titleNodeRef.current,
-			}).points.join('') as keyof typeof ALIGNMENTS_INVERSE_MAP;
+			});
+
+			const alignmentString = alignment.points.join(
+				''
+			) as keyof typeof ALIGNMENTS_INVERSE_MAP;
 
 			const pointsString = points.join('');
 
-			if (pointsString !== newAlignmentString) {
+			if (alignment.overflow.adjustX) {
+				dispatch({
+					align: ALIGNMENTS_FORCE_MAP[alignmentString],
+					type: 'align',
+				});
+			} else if (pointsString !== alignmentString) {
 				dispatch({
-					align: ALIGNMENTS_INVERSE_MAP[newAlignmentString],
+					align: ALIGNMENTS_INVERSE_MAP[alignmentString],
 					type: 'align',
 				});
 			}
@@ -358,12 +373,13 @@ const TooltipProvider: React.FunctionComponent<
 	}, [align, show]);
 
 	warning(
-		!children && !scope,
+		(typeof children === 'undefined' && typeof scope !== 'undefined') ||
+			(typeof scope === 'undefined' && typeof children !== 'undefined'),
 		'<TooltipProvider />: You must use at least one of the following props: `children` or `scope`.'
 	);
 
 	warning(
-		children && scope,
+		typeof children !== 'undefined' || typeof scope !== 'undefined',
 		'<TooltipProvider />: If you want to use `scope`, use <TooltipProvider /> as a singleton and do not pass `children`.'
 	);