@commercetools-uikit/hooks 15.11.2 → 15.13.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 (7) hide show
  1. package/dist/commercetools-uikit-hooks.cjs.dev.js +102 -6
  2. package/dist/commercetools-uikit-hooks.cjs.prod.js +102 -6
  3. package/dist/commercetools-uikit-hooks.esm.js +96 -5
  4. package/dist/declarations/src/index.d.ts +1 -0
  5. package/dist/declarations/src/use-mutation-observer/index.d.ts +1 -0
  6. package/dist/declarations/src/use-mutation-observer/use-mutation-observer.d.ts +4 -0
  7. package/package.json +7 -5
package/dist/commercetools-uikit-hooks.cjs.dev.js CHANGED
@@ -2,18 +2,22 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
5
+ var _Map = require('@babel/runtime-corejs3/core-js-stable/map');
6
+ var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
7
+ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
8
+ var _indexOfInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
9
+ var _spliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/splice');
6
10
  var react = require('react');
11
+ var rafSchd = require('raf-schd');
12
+ var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
7
13
  var utils = require('@commercetools-uikit/utils');
8
14
  var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
9
15
  var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
10
16
  var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
11
- var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
12
17
  var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
13
18
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
14
19
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
15
20
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
16
- var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
17
21
  var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
18
22
  var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
19
23
  var _reverseInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reverse');
@@ -22,14 +26,18 @@ var isNil = require('lodash/isNil');
22
26
 
23
27
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
24
28
 
29
+ var _Map__default = /*#__PURE__*/_interopDefault(_Map);
30
+ var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
31
+ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
32
+ var _indexOfInstanceProperty__default = /*#__PURE__*/_interopDefault(_indexOfInstanceProperty);
33
+ var _spliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_spliceInstanceProperty);
34
+ var rafSchd__default = /*#__PURE__*/_interopDefault(rafSchd);
25
35
  var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
26
36
  var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
27
37
  var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
28
- var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
29
38
  var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
30
39
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
31
40
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
32
- var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
33
41
  var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
34
42
  var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
35
43
  var _reverseInstanceProperty__default = /*#__PURE__*/_interopDefault(_reverseInstanceProperty);
@@ -82,6 +90,93 @@ var useFieldId = function useFieldId(id, createIdFn) {
82
90
 
83
91
  var useFieldId$1 = useFieldId;
84
92
 
93
+ var _mutationObserver;
94
+
95
+ var useLatest = function useLatest(current) {
96
+ var storedValue = react.useRef(current);
97
+ react.useEffect(function () {
98
+ storedValue.current = current;
99
+ });
100
+ return storedValue;
101
+ };
102
+
103
+ function createMutationObserver() {
104
+ var callbacks = new _Map__default["default"]();
105
+ var observer = new MutationObserver(rafSchd__default["default"](function (mutationsList, observer) {
106
+ var mutationsByTarget = _reduceInstanceProperty__default["default"](mutationsList).call(mutationsList, function (_mutationsByTarget, mutation) {
107
+ var _mutationsByTarget$ge;
108
+
109
+ var callbacksForTarget = (_mutationsByTarget$ge = _mutationsByTarget.get(mutation.target)) !== null && _mutationsByTarget$ge !== void 0 ? _mutationsByTarget$ge : [];
110
+ callbacksForTarget.push(mutation);
111
+
112
+ _mutationsByTarget.set(mutation.target, callbacksForTarget);
113
+
114
+ return _mutationsByTarget;
115
+ }, new _Map__default["default"]());
116
+
117
+ _forEachInstanceProperty__default["default"](mutationsByTarget).call(mutationsByTarget, function (mutations, target) {
118
+ var targetCallbacks = callbacks.get(target);
119
+ targetCallbacks === null || targetCallbacks === void 0 ? void 0 : _forEachInstanceProperty__default["default"](targetCallbacks).call(targetCallbacks, function (cb) {
120
+ return cb(mutations, observer);
121
+ });
122
+ });
123
+ }));
124
+ return {
125
+ observer: observer,
126
+ subscribe: function subscribe(target, callback, options) {
127
+ var _callbacks$get;
128
+
129
+ observer.observe(target, options);
130
+ var targetCallbacks = (_callbacks$get = callbacks.get(target)) !== null && _callbacks$get !== void 0 ? _callbacks$get : [];
131
+ targetCallbacks.push(callback);
132
+ callbacks.set(target, targetCallbacks);
133
+ },
134
+ unsubscribe: function unsubscribe(target, callback) {
135
+ var _callbacks$get2;
136
+
137
+ var targetCallbacks = (_callbacks$get2 = callbacks.get(target)) !== null && _callbacks$get2 !== void 0 ? _callbacks$get2 : [];
138
+
139
+ if (targetCallbacks.length === 1) {
140
+ observer.disconnect();
141
+ callbacks.delete(target);
142
+ return;
143
+ }
144
+
145
+ var tcIndex = _indexOfInstanceProperty__default["default"](targetCallbacks).call(targetCallbacks, callback);
146
+
147
+ if (tcIndex !== -1) _spliceInstanceProperty__default["default"](targetCallbacks).call(targetCallbacks, tcIndex, 1);
148
+ callbacks.set(target, targetCallbacks);
149
+ }
150
+ };
151
+ }
152
+
153
+ var getMutationObserver = function getMutationObserver() {
154
+ return !_mutationObserver ? _mutationObserver = createMutationObserver() : _mutationObserver;
155
+ };
156
+
157
+ function useMutationObserver(target, callback, options) {
158
+ var mutationObserver = getMutationObserver();
159
+ var storedCallback = useLatest(callback);
160
+ var storedOptions = useLatest(options);
161
+ react.useLayoutEffect(function () {
162
+ var didUnsubscribe = false;
163
+ var targetEl = target && 'current' in target ? target.current : target;
164
+ if (!targetEl) return function () {};
165
+
166
+ function cb(mutationsList, observer) {
167
+ if (didUnsubscribe) return;
168
+ storedCallback.current(mutationsList, observer);
169
+ }
170
+
171
+ mutationObserver.subscribe(targetEl, cb, storedOptions.current);
172
+ return function () {
173
+ didUnsubscribe = true;
174
+ mutationObserver.unsubscribe(targetEl, cb);
175
+ };
176
+ }, [target, mutationObserver, storedCallback, storedOptions]);
177
+ return mutationObserver.observer;
178
+ }
179
+
85
180
  function ownKeys$2(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; }
86
181
 
87
182
  function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$2(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$2(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
@@ -353,10 +448,11 @@ var useDataTableSortingState = function useDataTableSortingState() {
353
448
  var useDataTableSortingState$1 = useDataTableSortingState;
354
449
 
355
450
  // NOTE: This string will be replaced on build time with the package version.
356
- var version = "15.11.2";
451
+ var version = "15.13.0";
357
452
 
358
453
  exports.useDataTableSortingState = useDataTableSortingState$1;
359
454
  exports.useFieldId = useFieldId$1;
455
+ exports.useMutationObserver = useMutationObserver;
360
456
  exports.usePaginationState = usePaginationState$1;
361
457
  exports.usePrevious = usePrevious$1;
362
458
  exports.useRowSelection = useRowSelection$1;
package/dist/commercetools-uikit-hooks.cjs.prod.js CHANGED
@@ -2,18 +2,22 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
5
+ var _Map = require('@babel/runtime-corejs3/core-js-stable/map');
6
+ var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
7
+ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
8
+ var _indexOfInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
9
+ var _spliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/splice');
6
10
  var react = require('react');
11
+ var rafSchd = require('raf-schd');
12
+ var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
7
13
  var utils = require('@commercetools-uikit/utils');
8
14
  var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
9
15
  var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
10
16
  var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
11
- var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
12
17
  var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
13
18
  var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
14
19
  var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
15
20
  var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
16
- var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
17
21
  var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
18
22
  var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
19
23
  var _reverseInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reverse');
@@ -22,14 +26,18 @@ var isNil = require('lodash/isNil');
22
26
 
23
27
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
24
28
 
29
+ var _Map__default = /*#__PURE__*/_interopDefault(_Map);
30
+ var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
31
+ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
32
+ var _indexOfInstanceProperty__default = /*#__PURE__*/_interopDefault(_indexOfInstanceProperty);
33
+ var _spliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_spliceInstanceProperty);
34
+ var rafSchd__default = /*#__PURE__*/_interopDefault(rafSchd);
25
35
  var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
26
36
  var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
27
37
  var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
28
- var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
29
38
  var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
30
39
  var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
31
40
  var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
32
- var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
33
41
  var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
34
42
  var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
35
43
  var _reverseInstanceProperty__default = /*#__PURE__*/_interopDefault(_reverseInstanceProperty);
@@ -82,6 +90,93 @@ var useFieldId = function useFieldId(id, createIdFn) {
82
90
 
83
91
  var useFieldId$1 = useFieldId;
84
92
 
93
+ var _mutationObserver;
94
+
95
+ var useLatest = function useLatest(current) {
96
+ var storedValue = react.useRef(current);
97
+ react.useEffect(function () {
98
+ storedValue.current = current;
99
+ });
100
+ return storedValue;
101
+ };
102
+
103
+ function createMutationObserver() {
104
+ var callbacks = new _Map__default["default"]();
105
+ var observer = new MutationObserver(rafSchd__default["default"](function (mutationsList, observer) {
106
+ var mutationsByTarget = _reduceInstanceProperty__default["default"](mutationsList).call(mutationsList, function (_mutationsByTarget, mutation) {
107
+ var _mutationsByTarget$ge;
108
+
109
+ var callbacksForTarget = (_mutationsByTarget$ge = _mutationsByTarget.get(mutation.target)) !== null && _mutationsByTarget$ge !== void 0 ? _mutationsByTarget$ge : [];
110
+ callbacksForTarget.push(mutation);
111
+
112
+ _mutationsByTarget.set(mutation.target, callbacksForTarget);
113
+
114
+ return _mutationsByTarget;
115
+ }, new _Map__default["default"]());
116
+
117
+ _forEachInstanceProperty__default["default"](mutationsByTarget).call(mutationsByTarget, function (mutations, target) {
118
+ var targetCallbacks = callbacks.get(target);
119
+ targetCallbacks === null || targetCallbacks === void 0 ? void 0 : _forEachInstanceProperty__default["default"](targetCallbacks).call(targetCallbacks, function (cb) {
120
+ return cb(mutations, observer);
121
+ });
122
+ });
123
+ }));
124
+ return {
125
+ observer: observer,
126
+ subscribe: function subscribe(target, callback, options) {
127
+ var _callbacks$get;
128
+
129
+ observer.observe(target, options);
130
+ var targetCallbacks = (_callbacks$get = callbacks.get(target)) !== null && _callbacks$get !== void 0 ? _callbacks$get : [];
131
+ targetCallbacks.push(callback);
132
+ callbacks.set(target, targetCallbacks);
133
+ },
134
+ unsubscribe: function unsubscribe(target, callback) {
135
+ var _callbacks$get2;
136
+
137
+ var targetCallbacks = (_callbacks$get2 = callbacks.get(target)) !== null && _callbacks$get2 !== void 0 ? _callbacks$get2 : [];
138
+
139
+ if (targetCallbacks.length === 1) {
140
+ observer.disconnect();
141
+ callbacks.delete(target);
142
+ return;
143
+ }
144
+
145
+ var tcIndex = _indexOfInstanceProperty__default["default"](targetCallbacks).call(targetCallbacks, callback);
146
+
147
+ if (tcIndex !== -1) _spliceInstanceProperty__default["default"](targetCallbacks).call(targetCallbacks, tcIndex, 1);
148
+ callbacks.set(target, targetCallbacks);
149
+ }
150
+ };
151
+ }
152
+
153
+ var getMutationObserver = function getMutationObserver() {
154
+ return !_mutationObserver ? _mutationObserver = createMutationObserver() : _mutationObserver;
155
+ };
156
+
157
+ function useMutationObserver(target, callback, options) {
158
+ var mutationObserver = getMutationObserver();
159
+ var storedCallback = useLatest(callback);
160
+ var storedOptions = useLatest(options);
161
+ react.useLayoutEffect(function () {
162
+ var didUnsubscribe = false;
163
+ var targetEl = target && 'current' in target ? target.current : target;
164
+ if (!targetEl) return function () {};
165
+
166
+ function cb(mutationsList, observer) {
167
+ if (didUnsubscribe) return;
168
+ storedCallback.current(mutationsList, observer);
169
+ }
170
+
171
+ mutationObserver.subscribe(targetEl, cb, storedOptions.current);
172
+ return function () {
173
+ didUnsubscribe = true;
174
+ mutationObserver.unsubscribe(targetEl, cb);
175
+ };
176
+ }, [target, mutationObserver, storedCallback, storedOptions]);
177
+ return mutationObserver.observer;
178
+ }
179
+
85
180
  function ownKeys$2(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; }
86
181
 
87
182
  function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$2(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$2(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
@@ -353,10 +448,11 @@ var useDataTableSortingState = function useDataTableSortingState() {
353
448
  var useDataTableSortingState$1 = useDataTableSortingState;
354
449
 
355
450
  // NOTE: This string will be replaced on build time with the package version.
356
- var version = "15.11.2";
451
+ var version = "15.13.0";
357
452
 
358
453
  exports.useDataTableSortingState = useDataTableSortingState$1;
359
454
  exports.useFieldId = useFieldId$1;
455
+ exports.useMutationObserver = useMutationObserver;
360
456
  exports.usePaginationState = usePaginationState$1;
361
457
  exports.usePrevious = usePrevious$1;
362
458
  exports.useRowSelection = useRowSelection$1;
package/dist/commercetools-uikit-hooks.esm.js CHANGED
@@ -1,15 +1,19 @@
1
+ import _Map from '@babel/runtime-corejs3/core-js-stable/map';
2
+ import _reduceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/reduce';
3
+ import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
4
+ import _indexOfInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/index-of';
5
+ import _spliceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/splice';
6
+ import { useState, useCallback, useRef, useEffect, useLayoutEffect, useReducer, useDebugValue } from 'react';
7
+ import rafSchd from 'raf-schd';
1
8
  import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
2
- import { useState, useCallback, useRef, useEffect, useReducer, useDebugValue } from 'react';
3
9
  import { getFieldId } from '@commercetools-uikit/utils';
4
10
  import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
5
11
  import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
6
12
  import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
7
- import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
8
13
  import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
9
14
  import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
10
15
  import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
11
16
  import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
12
- import _reduceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/reduce';
13
17
  import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
14
18
  import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
15
19
  import _reverseInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/reverse';
@@ -62,6 +66,93 @@ var useFieldId = function useFieldId(id, createIdFn) {
62
66
 
63
67
  var useFieldId$1 = useFieldId;
64
68
 
69
+ var _mutationObserver;
70
+
71
+ var useLatest = function useLatest(current) {
72
+ var storedValue = useRef(current);
73
+ useEffect(function () {
74
+ storedValue.current = current;
75
+ });
76
+ return storedValue;
77
+ };
78
+
79
+ function createMutationObserver() {
80
+ var callbacks = new _Map();
81
+ var observer = new MutationObserver(rafSchd(function (mutationsList, observer) {
82
+ var mutationsByTarget = _reduceInstanceProperty(mutationsList).call(mutationsList, function (_mutationsByTarget, mutation) {
83
+ var _mutationsByTarget$ge;
84
+
85
+ var callbacksForTarget = (_mutationsByTarget$ge = _mutationsByTarget.get(mutation.target)) !== null && _mutationsByTarget$ge !== void 0 ? _mutationsByTarget$ge : [];
86
+ callbacksForTarget.push(mutation);
87
+
88
+ _mutationsByTarget.set(mutation.target, callbacksForTarget);
89
+
90
+ return _mutationsByTarget;
91
+ }, new _Map());
92
+
93
+ _forEachInstanceProperty(mutationsByTarget).call(mutationsByTarget, function (mutations, target) {
94
+ var targetCallbacks = callbacks.get(target);
95
+ targetCallbacks === null || targetCallbacks === void 0 ? void 0 : _forEachInstanceProperty(targetCallbacks).call(targetCallbacks, function (cb) {
96
+ return cb(mutations, observer);
97
+ });
98
+ });
99
+ }));
100
+ return {
101
+ observer: observer,
102
+ subscribe: function subscribe(target, callback, options) {
103
+ var _callbacks$get;
104
+
105
+ observer.observe(target, options);
106
+ var targetCallbacks = (_callbacks$get = callbacks.get(target)) !== null && _callbacks$get !== void 0 ? _callbacks$get : [];
107
+ targetCallbacks.push(callback);
108
+ callbacks.set(target, targetCallbacks);
109
+ },
110
+ unsubscribe: function unsubscribe(target, callback) {
111
+ var _callbacks$get2;
112
+
113
+ var targetCallbacks = (_callbacks$get2 = callbacks.get(target)) !== null && _callbacks$get2 !== void 0 ? _callbacks$get2 : [];
114
+
115
+ if (targetCallbacks.length === 1) {
116
+ observer.disconnect();
117
+ callbacks.delete(target);
118
+ return;
119
+ }
120
+
121
+ var tcIndex = _indexOfInstanceProperty(targetCallbacks).call(targetCallbacks, callback);
122
+
123
+ if (tcIndex !== -1) _spliceInstanceProperty(targetCallbacks).call(targetCallbacks, tcIndex, 1);
124
+ callbacks.set(target, targetCallbacks);
125
+ }
126
+ };
127
+ }
128
+
129
+ var getMutationObserver = function getMutationObserver() {
130
+ return !_mutationObserver ? _mutationObserver = createMutationObserver() : _mutationObserver;
131
+ };
132
+
133
+ function useMutationObserver(target, callback, options) {
134
+ var mutationObserver = getMutationObserver();
135
+ var storedCallback = useLatest(callback);
136
+ var storedOptions = useLatest(options);
137
+ useLayoutEffect(function () {
138
+ var didUnsubscribe = false;
139
+ var targetEl = target && 'current' in target ? target.current : target;
140
+ if (!targetEl) return function () {};
141
+
142
+ function cb(mutationsList, observer) {
143
+ if (didUnsubscribe) return;
144
+ storedCallback.current(mutationsList, observer);
145
+ }
146
+
147
+ mutationObserver.subscribe(targetEl, cb, storedOptions.current);
148
+ return function () {
149
+ didUnsubscribe = true;
150
+ mutationObserver.unsubscribe(targetEl, cb);
151
+ };
152
+ }, [target, mutationObserver, storedCallback, storedOptions]);
153
+ return mutationObserver.observer;
154
+ }
155
+
65
156
  function ownKeys$2(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; }
66
157
 
67
158
  function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys$2(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys$2(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -333,6 +424,6 @@ var useDataTableSortingState = function useDataTableSortingState() {
333
424
  var useDataTableSortingState$1 = useDataTableSortingState;
334
425
 
335
426
  // NOTE: This string will be replaced on build time with the package version.
336
- var version = "15.11.2";
427
+ var version = "15.13.0";
337
428
 
338
- export { useDataTableSortingState$1 as useDataTableSortingState, useFieldId$1 as useFieldId, usePaginationState$1 as usePaginationState, usePrevious$1 as usePrevious, useRowSelection$1 as useRowSelection, useSorting$1 as useSorting, useToggleState$1 as useToggleState, version };
429
+ export { useDataTableSortingState$1 as useDataTableSortingState, useFieldId$1 as useFieldId, useMutationObserver, usePaginationState$1 as usePaginationState, usePrevious$1 as usePrevious, useRowSelection$1 as useRowSelection, useSorting$1 as useSorting, useToggleState$1 as useToggleState, version };
package/dist/declarations/src/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export { default as useToggleState } from './use-toggle-state';
2
2
  export { default as usePrevious } from './use-previous';
3
3
  export { default as useFieldId } from './use-field-id';
4
+ export { default as useMutationObserver } from './use-mutation-observer';
4
5
  export { default as useRowSelection } from './use-row-selection';
5
6
  export { default as useSorting } from './use-sorting';
6
7
  export { default as usePaginationState } from './use-pagination-state';
package/dist/declarations/src/use-mutation-observer/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './use-mutation-observer';
package/dist/declarations/src/use-mutation-observer/use-mutation-observer.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ type TUseMutationObserverCallback = (mutationsList: MutationRecord[], observer: MutationObserver) => void;
3
+ declare function useMutationObserver<T extends HTMLElement>(target: React.RefObject<T> | T | null, callback: TUseMutationObserverCallback, options?: MutationObserverInit): MutationObserver;
4
+ export default useMutationObserver;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/hooks",
3
3
  "description": "A collection of React hooks used across some of the UI-Kit components.",
4
- "version": "15.11.2",
4
+ "version": "15.13.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -19,10 +19,12 @@
19
19
  "module": "dist/commercetools-uikit-hooks.esm.js",
20
20
  "files": ["dist"],
21
21
  "dependencies": {
22
- "@babel/runtime": "^7.19.0",
23
- "@babel/runtime-corejs3": "^7.19.1",
24
- "@commercetools-uikit/utils": "15.11.2",
25
- "lodash": "4.17.21"
22
+ "@babel/runtime": "^7.20.13",
23
+ "@babel/runtime-corejs3": "^7.20.13",
24
+ "@commercetools-uikit/utils": "15.13.0",
25
+ "@types/raf-schd": "^4.0.1",
26
+ "lodash": "4.17.21",
27
+ "raf-schd": "^4.0.3"
26
28
  },
27
29
  "devDependencies": {
28
30
  "@testing-library/react": "12.1.5",