@commercetools-uikit/tooltip 15.15.0 → 16.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/commercetools-uikit-tooltip.cjs.d.ts +1 -0
  2. package/dist/commercetools-uikit-tooltip.cjs.d.ts.map +1 -0
  3. package/dist/commercetools-uikit-tooltip.cjs.dev.js +53 -55
  4. package/dist/commercetools-uikit-tooltip.cjs.prod.js +53 -55
  5. package/dist/commercetools-uikit-tooltip.esm.js +53 -55
  6. package/package.json +5 -5
package/dist/commercetools-uikit-tooltip.cjs.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from "./declarations/src/index";
2
2
  export { default } from "./declarations/src/index";
3
+ //# sourceMappingURL=commercetools-uikit-tooltip.cjs.d.ts.map
package/dist/commercetools-uikit-tooltip.cjs.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"commercetools-uikit-tooltip.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}
package/dist/commercetools-uikit-tooltip.cjs.dev.js CHANGED
@@ -47,9 +47,9 @@ function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) {
47
47
 
48
48
  function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
49
49
 
50
- var getOffsetMargin = function getOffsetMargin(_ref) {
51
- var placement = _ref.placement;
52
- var position = placement && placement.split('-')[0] || '';
50
+ const getOffsetMargin = _ref => {
51
+ let placement = _ref.placement;
52
+ const position = placement && placement.split('-')[0] || '';
53
53
 
54
54
  switch (position) {
55
55
  case 'left':
@@ -65,7 +65,7 @@ var getOffsetMargin = function getOffsetMargin(_ref) {
65
65
  }
66
66
  };
67
67
 
68
- var Body = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
68
+ const Body = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
69
69
  target: "e14le4p1"
70
70
  } : {
71
71
  target: "e14le4p1",
@@ -74,15 +74,15 @@ var Body = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_ENV
74
74
  // with the styles we get from react-popper :D
75
75
  // eslint-disable-next-line import/prefer-default-export
76
76
 
77
- var getBodyStyles = function getBodyStyles(_ref2) {
78
- var constraint = _ref2.constraint,
77
+ const getBodyStyles = _ref2 => {
78
+ let constraint = _ref2.constraint,
79
79
  placement = _ref2.placement,
80
80
  customStyles = _ref2.customStyles;
81
- var constraintTokenName = "constraint".concat(constraint);
81
+ const constraintTokenName = "constraint".concat(constraint);
82
82
  return _objectSpread$1({
83
83
  fontFamily: 'inherit',
84
84
  margin: "".concat(getOffsetMargin({
85
- placement: placement
85
+ placement
86
86
  }), " !important"),
87
87
  maxWidth: constraintTokenName in designSystem.designTokens ? designSystem.designTokens[constraintTokenName] : 'auto',
88
88
  // so hovering over the tooltip when the tooltip overlaps the component
@@ -91,7 +91,7 @@ var getBodyStyles = function getBodyStyles(_ref2) {
91
91
  zIndex: 1000
92
92
  }, customStyles);
93
93
  };
94
- var Wrapper = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
94
+ const Wrapper = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
95
95
  target: "e14le4p0"
96
96
  } : {
97
97
  target: "e14le4p0",
@@ -109,27 +109,25 @@ var Wrapper = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_E
109
109
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
110
110
 
111
111
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
112
- var sequentialId = utils.createSequentialId('tooltip-');
112
+ const sequentialId = utils.createSequentialId('tooltip-');
113
113
 
114
- var TooltipWrapper = function TooltipWrapper(props) {
115
- return jsxRuntime.jsx(jsxRuntime.Fragment, {
116
- children: props.children
117
- });
118
- };
114
+ const TooltipWrapper = props => jsxRuntime.jsx(jsxRuntime.Fragment, {
115
+ children: props.children
116
+ });
119
117
 
120
118
  TooltipWrapper.displayName = 'TooltipWrapperComponent';
121
- var tooltipDefaultProps = {
119
+ const tooltipDefaultProps = {
122
120
  closeAfter: 0,
123
121
  horizontalConstraint: 'scale',
124
122
  off: false,
125
123
  placement: 'top'
126
124
  };
127
125
 
128
- var Tooltip = function Tooltip(props) {
126
+ const Tooltip = props => {
129
127
  var _props$components, _props$components2, _props$components3, _props$components4, _props$components5, _props$components6, _props$styles;
130
128
 
131
- var leaveTimer = react.useRef();
132
- var childrenRef = react.useRef();
129
+ const leaveTimer = react.useRef();
130
+ const childrenRef = react.useRef();
133
131
 
134
132
  if ((_props$components = props.components) !== null && _props$components !== void 0 && _props$components.BodyComponent) {
135
133
  process.env.NODE_ENV !== "production" ? utils.warning(reactIs.isValidElementType(props.components.BodyComponent), "ui-kit/Tooltip: the prop 'components.BodyComponent' is not a valid React element.") : void 0;
@@ -143,37 +141,37 @@ var Tooltip = function Tooltip(props) {
143
141
  process.env.NODE_ENV !== "production" ? utils.warning(reactIs.isValidElementType(props.components.WrapperComponent), "ui-kit/Tooltip: the prop 'components.WrapperComponent' is not a valid React element.") : void 0;
144
142
  }
145
143
 
146
- react.useEffect(function () {
147
- return function () {
144
+ react.useEffect(() => {
145
+ return () => {
148
146
  if (leaveTimer.current) {
149
147
  clearTimeout(leaveTimer.current);
150
148
  }
151
149
  };
152
150
  }, []);
153
151
 
154
- var _usePopper = usePopper__default["default"]({
152
+ const _usePopper = usePopper__default["default"]({
155
153
  placement: props.placement,
156
154
  modifiers: props.modifiers
157
155
  }),
158
- reference = _usePopper.reference,
159
- popper = _usePopper.popper;
156
+ reference = _usePopper.reference,
157
+ popper = _usePopper.popper;
160
158
 
161
- var _useToggleState = hooks.useToggleState(false),
162
- _useToggleState2 = _slicedToArray(_useToggleState, 2),
163
- isOpen = _useToggleState2[0],
164
- toggle = _useToggleState2[1];
159
+ const _useToggleState = hooks.useToggleState(false),
160
+ _useToggleState2 = _slicedToArray(_useToggleState, 2),
161
+ isOpen = _useToggleState2[0],
162
+ toggle = _useToggleState2[1];
165
163
 
166
- var closeTooltip = react.useCallback(function () {
164
+ const closeTooltip = react.useCallback(() => {
167
165
  toggle(false);
168
166
  }, [toggle]);
169
- var openTooltip = react.useCallback(function () {
167
+ const openTooltip = react.useCallback(() => {
170
168
  toggle(true);
171
169
  }, [toggle]);
172
- var isControlled = !isNil__default["default"](props.isOpen);
173
- var tooltipIsOpen = isControlled ? props.isOpen : isOpen;
174
- var id = hooks.useFieldId(props.id, sequentialId);
175
- var onClose = props.onClose;
176
- var handleClose = react.useCallback(function (event) {
170
+ const isControlled = !isNil__default["default"](props.isOpen);
171
+ const tooltipIsOpen = isControlled ? props.isOpen : isOpen;
172
+ const id = hooks.useFieldId(props.id, sequentialId);
173
+ const onClose = props.onClose;
174
+ const handleClose = react.useCallback(event => {
177
175
  if (!isControlled) {
178
176
  closeTooltip();
179
177
  }
@@ -182,11 +180,11 @@ var Tooltip = function Tooltip(props) {
182
180
  onClose(event);
183
181
  }
184
182
  }, [isControlled, closeTooltip, onClose]);
185
- var _props$children$props = props.children.props,
186
- onFocus = _props$children$props.onFocus,
187
- onMouseOver = _props$children$props.onMouseOver;
188
- var onOpen = props.onOpen;
189
- var handleEnter = react.useCallback(function (event) {
183
+ const _props$children$props = props.children.props,
184
+ onFocus = _props$children$props.onFocus,
185
+ onMouseOver = _props$children$props.onMouseOver;
186
+ const onOpen = props.onOpen;
187
+ const handleEnter = react.useCallback(event => {
190
188
  // Remove the title ahead of time.
191
189
  // We don't want to wait for the next render commit.
192
190
  // We would risk displaying two tooltips at the same time (native + this one).
@@ -216,11 +214,11 @@ var Tooltip = function Tooltip(props) {
216
214
  event.stopPropagation();
217
215
  }
218
216
  }, [onFocus, onOpen, onMouseOver, isControlled, isOpen, openTooltip]);
219
- var _props$children$props2 = props.children.props,
220
- onBlur = _props$children$props2.onBlur,
221
- onMouseLeave = _props$children$props2.onMouseLeave;
222
- var closeAfter = props.closeAfter;
223
- var handleLeave = react.useCallback(function (event) {
217
+ const _props$children$props2 = props.children.props,
218
+ onBlur = _props$children$props2.onBlur,
219
+ onMouseLeave = _props$children$props2.onMouseLeave;
220
+ const closeAfter = props.closeAfter;
221
+ const handleLeave = react.useCallback(event => {
224
222
  if (leaveTimer.current) {
225
223
  clearTimeout(leaveTimer.current);
226
224
  }
@@ -234,19 +232,19 @@ var Tooltip = function Tooltip(props) {
234
232
  }
235
233
 
236
234
  if (closeAfter) {
237
- leaveTimer.current = _setTimeout__default["default"](function () {
235
+ leaveTimer.current = _setTimeout__default["default"](() => {
238
236
  handleClose(event);
239
237
  }, closeAfter);
240
238
  } else {
241
239
  handleClose(event);
242
240
  }
243
241
  }, [closeAfter, onBlur, onMouseLeave, handleClose]);
244
- react.useEffect(function () {
242
+ react.useEffect(() => {
245
243
  // if tooltip was open, and then component
246
244
  // updated to be off, we should close the tooltip
247
245
  if (isOpen && props.off) {
248
246
  if (closeAfter) {
249
- leaveTimer.current = _setTimeout__default["default"](function () {
247
+ leaveTimer.current = _setTimeout__default["default"](() => {
250
248
  handleClose();
251
249
  }, closeAfter);
252
250
  } else {
@@ -254,28 +252,28 @@ var Tooltip = function Tooltip(props) {
254
252
  }
255
253
  }
256
254
  }, [props.off, closeAfter, handleClose, toggle, isOpen]);
257
- var childrenProps = {
255
+ const childrenProps = {
258
256
  // don't pass event listeners to children
259
257
  onFocus: null,
260
258
  onMouseOver: null,
261
259
  onMouseLeave: null,
262
260
  onBlur: null
263
261
  };
264
- var tooltipProps = !props.off ? {
262
+ const tooltipProps = !props.off ? {
265
263
  'aria-describedby': tooltipIsOpen ? id : null,
266
264
  // for seo and accessibility, we add the tooltip's title
267
265
  // as a native title when the title is hidden
268
266
  title: !tooltipIsOpen && typeof props.title === 'string' ? props.title : null
269
267
  } : {};
270
- var eventListeners = !props.off ? {
268
+ const eventListeners = !props.off ? {
271
269
  onMouseOver: handleEnter,
272
270
  onMouseLeave: handleLeave,
273
271
  onFocus: handleEnter,
274
272
  onBlur: handleLeave
275
273
  } : {};
276
- var WrapperComponent = ((_props$components4 = props.components) === null || _props$components4 === void 0 ? void 0 : _props$components4.WrapperComponent) || Wrapper;
277
- var BodyComponent = ((_props$components5 = props.components) === null || _props$components5 === void 0 ? void 0 : _props$components5.BodyComponent) || Body;
278
- var TooltipWrapperComponent = ((_props$components6 = props.components) === null || _props$components6 === void 0 ? void 0 : _props$components6.TooltipWrapperComponent) || TooltipWrapper;
274
+ const WrapperComponent = ((_props$components4 = props.components) === null || _props$components4 === void 0 ? void 0 : _props$components4.WrapperComponent) || Wrapper;
275
+ const BodyComponent = ((_props$components5 = props.components) === null || _props$components5 === void 0 ? void 0 : _props$components5.BodyComponent) || Body;
276
+ const TooltipWrapperComponent = ((_props$components6 = props.components) === null || _props$components6 === void 0 ? void 0 : _props$components6.TooltipWrapperComponent) || TooltipWrapper;
279
277
  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
280
278
  children: [jsxRuntime.jsx(WrapperComponent, _objectSpread(_objectSpread({}, eventListeners), {}, {
281
279
  // @ts-expect-error: yes, ref can be undefined
@@ -324,7 +322,7 @@ Tooltip.defaultProps = tooltipDefaultProps;
324
322
  var Tooltip$1 = Tooltip;
325
323
 
326
324
  // NOTE: This string will be replaced on build time with the package version.
327
- var version = "15.15.0";
325
+ var version = "16.0.0";
328
326
 
329
327
  exports["default"] = Tooltip$1;
330
328
  exports.version = version;
package/dist/commercetools-uikit-tooltip.cjs.prod.js CHANGED
@@ -44,9 +44,9 @@ function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["d
44
44
 
45
45
  function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
46
46
 
47
- var getOffsetMargin = function getOffsetMargin(_ref) {
48
- var placement = _ref.placement;
49
- var position = placement && placement.split('-')[0] || '';
47
+ const getOffsetMargin = _ref => {
48
+ let placement = _ref.placement;
49
+ const position = placement && placement.split('-')[0] || '';
50
50
 
51
51
  switch (position) {
52
52
  case 'left':
@@ -62,21 +62,21 @@ var getOffsetMargin = function getOffsetMargin(_ref) {
62
62
  }
63
63
  };
64
64
 
65
- var Body = /*#__PURE__*/_styled__default["default"]("div", {
65
+ const Body = /*#__PURE__*/_styled__default["default"]("div", {
66
66
  target: "e14le4p1"
67
67
  } )("font-family:inherit;border-radius:", designSystem.designTokens.borderRadius6, ";padding:", designSystem.designTokens.paddingForTooltip, ";border:none;box-shadow:", designSystem.designTokens.shadowForTooltip, ";font-size:", designSystem.designTokens.fontSize20, ";opacity:0.95;color:", designSystem.designTokens.colorSurface, ";background-color:", designSystem.designTokens.backgroundColorForTooltip, ";" + ("" )); // here we use object styles so we can spread these
68
68
  // with the styles we get from react-popper :D
69
69
  // eslint-disable-next-line import/prefer-default-export
70
70
 
71
- var getBodyStyles = function getBodyStyles(_ref2) {
72
- var constraint = _ref2.constraint,
71
+ const getBodyStyles = _ref2 => {
72
+ let constraint = _ref2.constraint,
73
73
  placement = _ref2.placement,
74
74
  customStyles = _ref2.customStyles;
75
- var constraintTokenName = "constraint".concat(constraint);
75
+ const constraintTokenName = "constraint".concat(constraint);
76
76
  return _objectSpread$1({
77
77
  fontFamily: 'inherit',
78
78
  margin: "".concat(getOffsetMargin({
79
- placement: placement
79
+ placement
80
80
  }), " !important"),
81
81
  maxWidth: constraintTokenName in designSystem.designTokens ? designSystem.designTokens[constraintTokenName] : 'auto',
82
82
  // so hovering over the tooltip when the tooltip overlaps the component
@@ -85,7 +85,7 @@ var getBodyStyles = function getBodyStyles(_ref2) {
85
85
  zIndex: 1000
86
86
  }, customStyles);
87
87
  };
88
- var Wrapper = /*#__PURE__*/_styled__default["default"]("div", {
88
+ const Wrapper = /*#__PURE__*/_styled__default["default"]("div", {
89
89
  target: "e14le4p0"
90
90
  } )({
91
91
  name: "18fwu9s",
@@ -95,27 +95,25 @@ var Wrapper = /*#__PURE__*/_styled__default["default"]("div", {
95
95
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
96
96
 
97
97
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
98
- var sequentialId = utils.createSequentialId('tooltip-');
98
+ const sequentialId = utils.createSequentialId('tooltip-');
99
99
 
100
- var TooltipWrapper = function TooltipWrapper(props) {
101
- return jsxRuntime.jsx(jsxRuntime.Fragment, {
102
- children: props.children
103
- });
104
- };
100
+ const TooltipWrapper = props => jsxRuntime.jsx(jsxRuntime.Fragment, {
101
+ children: props.children
102
+ });
105
103
 
106
104
  TooltipWrapper.displayName = 'TooltipWrapperComponent';
107
- var tooltipDefaultProps = {
105
+ const tooltipDefaultProps = {
108
106
  closeAfter: 0,
109
107
  horizontalConstraint: 'scale',
110
108
  off: false,
111
109
  placement: 'top'
112
110
  };
113
111
 
114
- var Tooltip = function Tooltip(props) {
112
+ const Tooltip = props => {
115
113
  var _props$components, _props$components2, _props$components3, _props$components4, _props$components5, _props$components6, _props$styles;
116
114
 
117
- var leaveTimer = react.useRef();
118
- var childrenRef = react.useRef();
115
+ const leaveTimer = react.useRef();
116
+ const childrenRef = react.useRef();
119
117
 
120
118
  if ((_props$components = props.components) !== null && _props$components !== void 0 && _props$components.BodyComponent) ;
121
119
 
@@ -123,37 +121,37 @@ var Tooltip = function Tooltip(props) {
123
121
 
124
122
  if ((_props$components3 = props.components) !== null && _props$components3 !== void 0 && _props$components3.WrapperComponent) ;
125
123
 
126
- react.useEffect(function () {
127
- return function () {
124
+ react.useEffect(() => {
125
+ return () => {
128
126
  if (leaveTimer.current) {
129
127
  clearTimeout(leaveTimer.current);
130
128
  }
131
129
  };
132
130
  }, []);
133
131
 
134
- var _usePopper = usePopper__default["default"]({
132
+ const _usePopper = usePopper__default["default"]({
135
133
  placement: props.placement,
136
134
  modifiers: props.modifiers
137
135
  }),
138
- reference = _usePopper.reference,
139
- popper = _usePopper.popper;
136
+ reference = _usePopper.reference,
137
+ popper = _usePopper.popper;
140
138
 
141
- var _useToggleState = hooks.useToggleState(false),
142
- _useToggleState2 = _slicedToArray(_useToggleState, 2),
143
- isOpen = _useToggleState2[0],
144
- toggle = _useToggleState2[1];
139
+ const _useToggleState = hooks.useToggleState(false),
140
+ _useToggleState2 = _slicedToArray(_useToggleState, 2),
141
+ isOpen = _useToggleState2[0],
142
+ toggle = _useToggleState2[1];
145
143
 
146
- var closeTooltip = react.useCallback(function () {
144
+ const closeTooltip = react.useCallback(() => {
147
145
  toggle(false);
148
146
  }, [toggle]);
149
- var openTooltip = react.useCallback(function () {
147
+ const openTooltip = react.useCallback(() => {
150
148
  toggle(true);
151
149
  }, [toggle]);
152
- var isControlled = !isNil__default["default"](props.isOpen);
153
- var tooltipIsOpen = isControlled ? props.isOpen : isOpen;
154
- var id = hooks.useFieldId(props.id, sequentialId);
155
- var onClose = props.onClose;
156
- var handleClose = react.useCallback(function (event) {
150
+ const isControlled = !isNil__default["default"](props.isOpen);
151
+ const tooltipIsOpen = isControlled ? props.isOpen : isOpen;
152
+ const id = hooks.useFieldId(props.id, sequentialId);
153
+ const onClose = props.onClose;
154
+ const handleClose = react.useCallback(event => {
157
155
  if (!isControlled) {
158
156
  closeTooltip();
159
157
  }
@@ -162,11 +160,11 @@ var Tooltip = function Tooltip(props) {
162
160
  onClose(event);
163
161
  }
164
162
  }, [isControlled, closeTooltip, onClose]);
165
- var _props$children$props = props.children.props,
166
- onFocus = _props$children$props.onFocus,
167
- onMouseOver = _props$children$props.onMouseOver;
168
- var onOpen = props.onOpen;
169
- var handleEnter = react.useCallback(function (event) {
163
+ const _props$children$props = props.children.props,
164
+ onFocus = _props$children$props.onFocus,
165
+ onMouseOver = _props$children$props.onMouseOver;
166
+ const onOpen = props.onOpen;
167
+ const handleEnter = react.useCallback(event => {
170
168
  // Remove the title ahead of time.
171
169
  // We don't want to wait for the next render commit.
172
170
  // We would risk displaying two tooltips at the same time (native + this one).
@@ -196,11 +194,11 @@ var Tooltip = function Tooltip(props) {
196
194
  event.stopPropagation();
197
195
  }
198
196
  }, [onFocus, onOpen, onMouseOver, isControlled, isOpen, openTooltip]);
199
- var _props$children$props2 = props.children.props,
200
- onBlur = _props$children$props2.onBlur,
201
- onMouseLeave = _props$children$props2.onMouseLeave;
202
- var closeAfter = props.closeAfter;
203
- var handleLeave = react.useCallback(function (event) {
197
+ const _props$children$props2 = props.children.props,
198
+ onBlur = _props$children$props2.onBlur,
199
+ onMouseLeave = _props$children$props2.onMouseLeave;
200
+ const closeAfter = props.closeAfter;
201
+ const handleLeave = react.useCallback(event => {
204
202
  if (leaveTimer.current) {
205
203
  clearTimeout(leaveTimer.current);
206
204
  }
@@ -214,19 +212,19 @@ var Tooltip = function Tooltip(props) {
214
212
  }
215
213
 
216
214
  if (closeAfter) {
217
- leaveTimer.current = _setTimeout__default["default"](function () {
215
+ leaveTimer.current = _setTimeout__default["default"](() => {
218
216
  handleClose(event);
219
217
  }, closeAfter);
220
218
  } else {
221
219
  handleClose(event);
222
220
  }
223
221
  }, [closeAfter, onBlur, onMouseLeave, handleClose]);
224
- react.useEffect(function () {
222
+ react.useEffect(() => {
225
223
  // if tooltip was open, and then component
226
224
  // updated to be off, we should close the tooltip
227
225
  if (isOpen && props.off) {
228
226
  if (closeAfter) {
229
- leaveTimer.current = _setTimeout__default["default"](function () {
227
+ leaveTimer.current = _setTimeout__default["default"](() => {
230
228
  handleClose();
231
229
  }, closeAfter);
232
230
  } else {
@@ -234,28 +232,28 @@ var Tooltip = function Tooltip(props) {
234
232
  }
235
233
  }
236
234
  }, [props.off, closeAfter, handleClose, toggle, isOpen]);
237
- var childrenProps = {
235
+ const childrenProps = {
238
236
  // don't pass event listeners to children
239
237
  onFocus: null,
240
238
  onMouseOver: null,
241
239
  onMouseLeave: null,
242
240
  onBlur: null
243
241
  };
244
- var tooltipProps = !props.off ? {
242
+ const tooltipProps = !props.off ? {
245
243
  'aria-describedby': tooltipIsOpen ? id : null,
246
244
  // for seo and accessibility, we add the tooltip's title
247
245
  // as a native title when the title is hidden
248
246
  title: !tooltipIsOpen && typeof props.title === 'string' ? props.title : null
249
247
  } : {};
250
- var eventListeners = !props.off ? {
248
+ const eventListeners = !props.off ? {
251
249
  onMouseOver: handleEnter,
252
250
  onMouseLeave: handleLeave,
253
251
  onFocus: handleEnter,
254
252
  onBlur: handleLeave
255
253
  } : {};
256
- var WrapperComponent = ((_props$components4 = props.components) === null || _props$components4 === void 0 ? void 0 : _props$components4.WrapperComponent) || Wrapper;
257
- var BodyComponent = ((_props$components5 = props.components) === null || _props$components5 === void 0 ? void 0 : _props$components5.BodyComponent) || Body;
258
- var TooltipWrapperComponent = ((_props$components6 = props.components) === null || _props$components6 === void 0 ? void 0 : _props$components6.TooltipWrapperComponent) || TooltipWrapper;
254
+ const WrapperComponent = ((_props$components4 = props.components) === null || _props$components4 === void 0 ? void 0 : _props$components4.WrapperComponent) || Wrapper;
255
+ const BodyComponent = ((_props$components5 = props.components) === null || _props$components5 === void 0 ? void 0 : _props$components5.BodyComponent) || Body;
256
+ const TooltipWrapperComponent = ((_props$components6 = props.components) === null || _props$components6 === void 0 ? void 0 : _props$components6.TooltipWrapperComponent) || TooltipWrapper;
259
257
  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
260
258
  children: [jsxRuntime.jsx(WrapperComponent, _objectSpread(_objectSpread({}, eventListeners), {}, {
261
259
  // @ts-expect-error: yes, ref can be undefined
@@ -286,7 +284,7 @@ Tooltip.defaultProps = tooltipDefaultProps;
286
284
  var Tooltip$1 = Tooltip;
287
285
 
288
286
  // NOTE: This string will be replaced on build time with the package version.
289
- var version = "15.15.0";
287
+ var version = "16.0.0";
290
288
 
291
289
  exports["default"] = Tooltip$1;
292
290
  exports.version = version;
package/dist/commercetools-uikit-tooltip.esm.js CHANGED
@@ -27,9 +27,9 @@ function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) {
27
27
 
28
28
  function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
29
29
 
30
- var getOffsetMargin = function getOffsetMargin(_ref) {
31
- var placement = _ref.placement;
32
- var position = placement && placement.split('-')[0] || '';
30
+ const getOffsetMargin = _ref => {
31
+ let placement = _ref.placement;
32
+ const position = placement && placement.split('-')[0] || '';
33
33
 
34
34
  switch (position) {
35
35
  case 'left':
@@ -45,7 +45,7 @@ var getOffsetMargin = function getOffsetMargin(_ref) {
45
45
  }
46
46
  };
47
47
 
48
- var Body = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
48
+ const Body = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
49
49
  target: "e14le4p1"
50
50
  } : {
51
51
  target: "e14le4p1",
@@ -54,15 +54,15 @@ var Body = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
54
54
  // with the styles we get from react-popper :D
55
55
  // eslint-disable-next-line import/prefer-default-export
56
56
 
57
- var getBodyStyles = function getBodyStyles(_ref2) {
58
- var constraint = _ref2.constraint,
57
+ const getBodyStyles = _ref2 => {
58
+ let constraint = _ref2.constraint,
59
59
  placement = _ref2.placement,
60
60
  customStyles = _ref2.customStyles;
61
- var constraintTokenName = "constraint".concat(constraint);
61
+ const constraintTokenName = "constraint".concat(constraint);
62
62
  return _objectSpread$1({
63
63
  fontFamily: 'inherit',
64
64
  margin: "".concat(getOffsetMargin({
65
- placement: placement
65
+ placement
66
66
  }), " !important"),
67
67
  maxWidth: constraintTokenName in designTokens ? designTokens[constraintTokenName] : 'auto',
68
68
  // so hovering over the tooltip when the tooltip overlaps the component
@@ -71,7 +71,7 @@ var getBodyStyles = function getBodyStyles(_ref2) {
71
71
  zIndex: 1000
72
72
  }, customStyles);
73
73
  };
74
- var Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
74
+ const Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
75
75
  target: "e14le4p0"
76
76
  } : {
77
77
  target: "e14le4p0",
@@ -89,27 +89,25 @@ var Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production"
89
89
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
90
90
 
91
91
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
92
- var sequentialId = createSequentialId('tooltip-');
92
+ const sequentialId = createSequentialId('tooltip-');
93
93
 
94
- var TooltipWrapper = function TooltipWrapper(props) {
95
- return jsx(Fragment, {
96
- children: props.children
97
- });
98
- };
94
+ const TooltipWrapper = props => jsx(Fragment, {
95
+ children: props.children
96
+ });
99
97
 
100
98
  TooltipWrapper.displayName = 'TooltipWrapperComponent';
101
- var tooltipDefaultProps = {
99
+ const tooltipDefaultProps = {
102
100
  closeAfter: 0,
103
101
  horizontalConstraint: 'scale',
104
102
  off: false,
105
103
  placement: 'top'
106
104
  };
107
105
 
108
- var Tooltip = function Tooltip(props) {
106
+ const Tooltip = props => {
109
107
  var _props$components, _props$components2, _props$components3, _props$components4, _props$components5, _props$components6, _props$styles;
110
108
 
111
- var leaveTimer = useRef();
112
- var childrenRef = useRef();
109
+ const leaveTimer = useRef();
110
+ const childrenRef = useRef();
113
111
 
114
112
  if ((_props$components = props.components) !== null && _props$components !== void 0 && _props$components.BodyComponent) {
115
113
  process.env.NODE_ENV !== "production" ? warning(isValidElementType(props.components.BodyComponent), "ui-kit/Tooltip: the prop 'components.BodyComponent' is not a valid React element.") : void 0;
@@ -123,37 +121,37 @@ var Tooltip = function Tooltip(props) {
123
121
  process.env.NODE_ENV !== "production" ? warning(isValidElementType(props.components.WrapperComponent), "ui-kit/Tooltip: the prop 'components.WrapperComponent' is not a valid React element.") : void 0;
124
122
  }
125
123
 
126
- useEffect(function () {
127
- return function () {
124
+ useEffect(() => {
125
+ return () => {
128
126
  if (leaveTimer.current) {
129
127
  clearTimeout(leaveTimer.current);
130
128
  }
131
129
  };
132
130
  }, []);
133
131
 
134
- var _usePopper = usePopper({
132
+ const _usePopper = usePopper({
135
133
  placement: props.placement,
136
134
  modifiers: props.modifiers
137
135
  }),
138
- reference = _usePopper.reference,
139
- popper = _usePopper.popper;
136
+ reference = _usePopper.reference,
137
+ popper = _usePopper.popper;
140
138
 
141
- var _useToggleState = useToggleState(false),
142
- _useToggleState2 = _slicedToArray(_useToggleState, 2),
143
- isOpen = _useToggleState2[0],
144
- toggle = _useToggleState2[1];
139
+ const _useToggleState = useToggleState(false),
140
+ _useToggleState2 = _slicedToArray(_useToggleState, 2),
141
+ isOpen = _useToggleState2[0],
142
+ toggle = _useToggleState2[1];
145
143
 
146
- var closeTooltip = useCallback(function () {
144
+ const closeTooltip = useCallback(() => {
147
145
  toggle(false);
148
146
  }, [toggle]);
149
- var openTooltip = useCallback(function () {
147
+ const openTooltip = useCallback(() => {
150
148
  toggle(true);
151
149
  }, [toggle]);
152
- var isControlled = !isNil(props.isOpen);
153
- var tooltipIsOpen = isControlled ? props.isOpen : isOpen;
154
- var id = useFieldId(props.id, sequentialId);
155
- var onClose = props.onClose;
156
- var handleClose = useCallback(function (event) {
150
+ const isControlled = !isNil(props.isOpen);
151
+ const tooltipIsOpen = isControlled ? props.isOpen : isOpen;
152
+ const id = useFieldId(props.id, sequentialId);
153
+ const onClose = props.onClose;
154
+ const handleClose = useCallback(event => {
157
155
  if (!isControlled) {
158
156
  closeTooltip();
159
157
  }
@@ -162,11 +160,11 @@ var Tooltip = function Tooltip(props) {
162
160
  onClose(event);
163
161
  }
164
162
  }, [isControlled, closeTooltip, onClose]);
165
- var _props$children$props = props.children.props,
166
- onFocus = _props$children$props.onFocus,
167
- onMouseOver = _props$children$props.onMouseOver;
168
- var onOpen = props.onOpen;
169
- var handleEnter = useCallback(function (event) {
163
+ const _props$children$props = props.children.props,
164
+ onFocus = _props$children$props.onFocus,
165
+ onMouseOver = _props$children$props.onMouseOver;
166
+ const onOpen = props.onOpen;
167
+ const handleEnter = useCallback(event => {
170
168
  // Remove the title ahead of time.
171
169
  // We don't want to wait for the next render commit.
172
170
  // We would risk displaying two tooltips at the same time (native + this one).
@@ -196,11 +194,11 @@ var Tooltip = function Tooltip(props) {
196
194
  event.stopPropagation();
197
195
  }
198
196
  }, [onFocus, onOpen, onMouseOver, isControlled, isOpen, openTooltip]);
199
- var _props$children$props2 = props.children.props,
200
- onBlur = _props$children$props2.onBlur,
201
- onMouseLeave = _props$children$props2.onMouseLeave;
202
- var closeAfter = props.closeAfter;
203
- var handleLeave = useCallback(function (event) {
197
+ const _props$children$props2 = props.children.props,
198
+ onBlur = _props$children$props2.onBlur,
199
+ onMouseLeave = _props$children$props2.onMouseLeave;
200
+ const closeAfter = props.closeAfter;
201
+ const handleLeave = useCallback(event => {
204
202
  if (leaveTimer.current) {
205
203
  clearTimeout(leaveTimer.current);
206
204
  }
@@ -214,19 +212,19 @@ var Tooltip = function Tooltip(props) {
214
212
  }
215
213
 
216
214
  if (closeAfter) {
217
- leaveTimer.current = _setTimeout(function () {
215
+ leaveTimer.current = _setTimeout(() => {
218
216
  handleClose(event);
219
217
  }, closeAfter);
220
218
  } else {
221
219
  handleClose(event);
222
220
  }
223
221
  }, [closeAfter, onBlur, onMouseLeave, handleClose]);
224
- useEffect(function () {
222
+ useEffect(() => {
225
223
  // if tooltip was open, and then component
226
224
  // updated to be off, we should close the tooltip
227
225
  if (isOpen && props.off) {
228
226
  if (closeAfter) {
229
- leaveTimer.current = _setTimeout(function () {
227
+ leaveTimer.current = _setTimeout(() => {
230
228
  handleClose();
231
229
  }, closeAfter);
232
230
  } else {
@@ -234,28 +232,28 @@ var Tooltip = function Tooltip(props) {
234
232
  }
235
233
  }
236
234
  }, [props.off, closeAfter, handleClose, toggle, isOpen]);
237
- var childrenProps = {
235
+ const childrenProps = {
238
236
  // don't pass event listeners to children
239
237
  onFocus: null,
240
238
  onMouseOver: null,
241
239
  onMouseLeave: null,
242
240
  onBlur: null
243
241
  };
244
- var tooltipProps = !props.off ? {
242
+ const tooltipProps = !props.off ? {
245
243
  'aria-describedby': tooltipIsOpen ? id : null,
246
244
  // for seo and accessibility, we add the tooltip's title
247
245
  // as a native title when the title is hidden
248
246
  title: !tooltipIsOpen && typeof props.title === 'string' ? props.title : null
249
247
  } : {};
250
- var eventListeners = !props.off ? {
248
+ const eventListeners = !props.off ? {
251
249
  onMouseOver: handleEnter,
252
250
  onMouseLeave: handleLeave,
253
251
  onFocus: handleEnter,
254
252
  onBlur: handleLeave
255
253
  } : {};
256
- var WrapperComponent = ((_props$components4 = props.components) === null || _props$components4 === void 0 ? void 0 : _props$components4.WrapperComponent) || Wrapper;
257
- var BodyComponent = ((_props$components5 = props.components) === null || _props$components5 === void 0 ? void 0 : _props$components5.BodyComponent) || Body;
258
- var TooltipWrapperComponent = ((_props$components6 = props.components) === null || _props$components6 === void 0 ? void 0 : _props$components6.TooltipWrapperComponent) || TooltipWrapper;
254
+ const WrapperComponent = ((_props$components4 = props.components) === null || _props$components4 === void 0 ? void 0 : _props$components4.WrapperComponent) || Wrapper;
255
+ const BodyComponent = ((_props$components5 = props.components) === null || _props$components5 === void 0 ? void 0 : _props$components5.BodyComponent) || Body;
256
+ const TooltipWrapperComponent = ((_props$components6 = props.components) === null || _props$components6 === void 0 ? void 0 : _props$components6.TooltipWrapperComponent) || TooltipWrapper;
259
257
  return jsxs(Fragment, {
260
258
  children: [jsx(WrapperComponent, _objectSpread(_objectSpread({}, eventListeners), {}, {
261
259
  // @ts-expect-error: yes, ref can be undefined
@@ -304,6 +302,6 @@ Tooltip.defaultProps = tooltipDefaultProps;
304
302
  var Tooltip$1 = Tooltip;
305
303
 
306
304
  // NOTE: This string will be replaced on build time with the package version.
307
- var version = "15.15.0";
305
+ var version = "16.0.0";
308
306
 
309
307
  export { Tooltip$1 as default, version };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/tooltip",
3
3
  "description": "Tooltips display informative text when users hover over or focus on an element.",
4
- "version": "15.15.0",
4
+ "version": "16.0.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,10 +21,10 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.20.13",
23
23
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/constraints": "15.15.0",
25
- "@commercetools-uikit/design-system": "15.15.0",
26
- "@commercetools-uikit/hooks": "15.15.0",
27
- "@commercetools-uikit/utils": "15.15.0",
24
+ "@commercetools-uikit/constraints": "16.0.0",
25
+ "@commercetools-uikit/design-system": "16.0.0",
26
+ "@commercetools-uikit/hooks": "16.0.0",
27
+ "@commercetools-uikit/utils": "16.0.0",
28
28
  "@emotion/react": "^11.10.5",
29
29
  "@emotion/styled": "^11.10.5",
30
30
  "lodash": "4.17.21",