@sproutsocial/seeds-react-hooks 1.0.0

package/__flow__/index.flow.js

@@ -0,0 +1,8 @@
+// @flow
+
+export * from "./useSelect/useSelect";
+export * from "./useMultiselect/useMultiselect";
+export * from "./useMutationObserver/useMutationObserver";
+export * from "./useTextContent/useTextContent";
+export * from "./useWhyDidYouUpdate/useWhyDidYouUpdate";
+export * from "./useInteractiveColor/useInteractiveColor";

package/__flow__/index.js

@@ -0,0 +1,3 @@
+// @flow
+	export * from './index.flow';
+	

package/__flow__/useInteractiveColor/useInteractiveColor.flow.js

@@ -0,0 +1,3 @@
+//@flow strict-local
+
+declare export var useInteractiveColor: (themeColor: string) => string;

package/__flow__/useMultiselect/useMultiselect.flow.js

@@ -0,0 +1,17 @@
+// @flow
+
+type TypeMultiSelectProps<T: string> = {|
+  initialValue?: T[],
+  onChange?: (value: Array<string | T>) => any,
+|};
+declare var valueReducer: (state: Set<string>, action: {|
+  type: string
+|} | {|
+  type: string,
+  value: string,
+|}) => Set<string>;
+declare export var useMultiselect: <T: string>(props?: TypeMultiSelectProps<T>) => {|
+  onChange: (newValue: string) => void,
+  onClear: () => void,
+  value: Array<string | T>,
+|};

package/__flow__/useMutationObserver/useMutationObserver.flow.js

@@ -0,0 +1,19 @@
+type TypeMutationObserverInitRequired = {|
+  childList: true
+|} | {|
+  attributes: true
+|} | {|
+  characterData: true
+|};
+type TypeMutationObserverInit = {
+  ...TypeMutationObserverInitRequired,
+  subtree?: boolean,
+  attributeOldValue?: boolean,
+  characterDataOldValue?: boolean,
+  attributeFilter?: Array<string>,
+  ...
+};
+type TypeMutationObserverCallback = (mutationList?: MutationRecord[], observer?: MutationObserver) => any;
+declare var defaultCallback: TypeMutationObserverCallback;
+declare export function useMutationObserver(targetNode: ?Node, config: TypeMutationObserverInit, callback?: TypeMutationObserverCallback): void | any;
+declare export function useMutationObserverOnce(targetNode: ?Node, config: TypeMutationObserverInit, callback: TypeMutationObserverCallback): void | any;

package/__flow__/useSelect/useSelect.flow.js

@@ -0,0 +1,10 @@
+// @flow
+
+type TypeSingleSelectProps<T: string> = {|
+  initialValue?: T | "",
+  onChange?: (value: string | T) => any,
+|};
+declare export var useSelect: <T: string>(props?: TypeSingleSelectProps<T>) => {|
+  onChange: (newValue: string) => void,
+  value: T | string,
+|};

package/__flow__/useTextContent/useTextContent.flow.js

@@ -0,0 +1,21 @@
+// @flow
+
+import { useState, useCallback } from "react";
+type ReturnType<F> = $PropertyType<$ObjMap<{
+  x: F,
+  ...
+}, <R>(f: (...any) => R) => R>, "x">;
+const useTextContentClone = (initial: string) => {
+  const [textContent, setTextContent] = useState(initial);
+  const ref = useCallback((node: Node) => {
+    if (node !== null) {
+      setTextContent(node.textContent);
+    }
+  }, []);
+  ref.current = textContent;
+  return ref;
+};
+
+// Couldn't find a way to achieve this with flow type syntax - open to suggestions
+// Tried https://github.com/facebook/flow/issues/2840#issuecomment-452934068 but it didn't work
+declare export function useTextContent(initial: string): ReturnType<typeof useTextContentClone>;

package/__flow__/useWhyDidYouUpdate/useWhyDidYouUpdate.flow.js

@@ -0,0 +1,3 @@
+// @flow
+
+declare export function useWhyDidYouUpdate(name: string, props: any): void;

package/commonjs/index.flow.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useSelect = require("./useSelect/useSelect");
+Object.keys(_useSelect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useSelect[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useSelect[key];
+    }
+  });
+});
+var _useMultiselect = require("./useMultiselect/useMultiselect");
+Object.keys(_useMultiselect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useMultiselect[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useMultiselect[key];
+    }
+  });
+});
+var _useMutationObserver = require("./useMutationObserver/useMutationObserver");
+Object.keys(_useMutationObserver).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useMutationObserver[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useMutationObserver[key];
+    }
+  });
+});
+var _useTextContent = require("./useTextContent/useTextContent");
+Object.keys(_useTextContent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useTextContent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useTextContent[key];
+    }
+  });
+});
+var _useWhyDidYouUpdate = require("./useWhyDidYouUpdate/useWhyDidYouUpdate");
+Object.keys(_useWhyDidYouUpdate).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useWhyDidYouUpdate[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useWhyDidYouUpdate[key];
+    }
+  });
+});
+var _useInteractiveColor = require("./useInteractiveColor/useInteractiveColor");
+Object.keys(_useInteractiveColor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useInteractiveColor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useInteractiveColor[key];
+    }
+  });
+});

package/commonjs/index.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useMeasure = require("./useMeasure/useMeasure");
+Object.keys(_useMeasure).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useMeasure[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useMeasure[key];
+    }
+  });
+});
+var _useSelect = require("./useSelect/useSelect");
+Object.keys(_useSelect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useSelect[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useSelect[key];
+    }
+  });
+});
+var _useMultiselect = require("./useMultiselect/useMultiselect");
+Object.keys(_useMultiselect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useMultiselect[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useMultiselect[key];
+    }
+  });
+});
+var _useMutationObserver = require("./useMutationObserver/useMutationObserver");
+Object.keys(_useMutationObserver).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useMutationObserver[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useMutationObserver[key];
+    }
+  });
+});
+var _useTextContent = require("./useTextContent/useTextContent");
+Object.keys(_useTextContent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useTextContent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useTextContent[key];
+    }
+  });
+});
+var _useWhyDidYouUpdate = require("./useWhyDidYouUpdate/useWhyDidYouUpdate");
+Object.keys(_useWhyDidYouUpdate).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useWhyDidYouUpdate[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useWhyDidYouUpdate[key];
+    }
+  });
+});
+var _useInteractiveColor = require("./useInteractiveColor/useInteractiveColor");
+Object.keys(_useInteractiveColor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useInteractiveColor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useInteractiveColor[key];
+    }
+  });
+});

package/commonjs/index.js.flow

@@ -0,0 +1,3 @@
+// @flow
+	export * from '../__flow__';
+	

package/commonjs/useInteractiveColor/useInteractiveColor.flow.js

@@ -0,0 +1 @@
+"use strict";

package/commonjs/useInteractiveColor/useInteractiveColor.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInteractiveColor = void 0;
+var _polished = require("polished");
+var _styledComponents = require("styled-components");
+/**
+ * The useInteractiveColor hook has context of theme mode (light or dark)
+ * and can be used to lighten or darken a color dynamically
+ *
+ * note: colors are limited to our theme colors
+ */
+var useInteractiveColor = exports.useInteractiveColor = function useInteractiveColor(themeColor) {
+  // Throw error if used outside of a ThemeProvider (styled-components)
+  if (!(0, _styledComponents.useTheme)()) {
+    throw new Error("useInteractiveColor() must be used within a Styled Components ThemeProvider");
+  }
+
+  // Get the current theme mode ie. 'light' or 'dark'
+  var theme = (0, _styledComponents.useTheme)();
+  var themeMode = theme.mode;
+
+  // If the theme mode is dark, return a lightened version of the themeValue
+  if (themeMode === "dark") {
+    return (0, _polished.lighten)(0.2, themeColor);
+  } else {
+    // If the theme mode is light, return a darkened version of the themeValue
+    return (0, _polished.darken)(0.2, themeColor);
+  }
+};

package/commonjs/useMeasure/useMeasure.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMeasure = useMeasure;
+var _react = require("react");
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var initialBounds = Object.freeze({
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+});
+function useMeasure(ref) {
+  var _useState = (0, _react.useState)(initialBounds),
+    _useState2 = _slicedToArray(_useState, 2),
+    bounds = _useState2[0],
+    setContentRect = _useState2[1];
+  (0, _react.useLayoutEffect)(function () {
+    var element = ref.current;
+    if (!element ||
+    // in non-browser environments (e.g. Jest tests) ResizeObserver is not defined
+    !("ResizeObserver" in window)) {
+      return;
+    }
+    var resizeObserver = new ResizeObserver(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 1),
+        entry = _ref2[0];
+      var _entry$contentRect = entry.contentRect,
+        x = _entry$contentRect.x,
+        y = _entry$contentRect.y,
+        width = _entry$contentRect.width,
+        height = _entry$contentRect.height,
+        top = _entry$contentRect.top,
+        right = _entry$contentRect.right,
+        bottom = _entry$contentRect.bottom,
+        left = _entry$contentRect.left;
+      setContentRect({
+        x: x,
+        y: y,
+        width: width,
+        height: height,
+        top: top,
+        right: right,
+        bottom: bottom,
+        left: left
+      });
+    });
+    resizeObserver.observe(ref.current);
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, [ref]);
+  return bounds;
+}

package/commonjs/useMultiselect/useMultiselect.flow.js

@@ -0,0 +1 @@
+"use strict";

package/commonjs/useMultiselect/useMultiselect.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMultiselect = void 0;
+var _react = require("react");
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var valueReducer = function valueReducer(state, action) {
+  var newState = new Set(state);
+  switch (action.type) {
+    case "reset":
+      {
+        return new Set();
+      }
+    case "toggle_item":
+    default:
+      {
+        if (action.value) {
+          if (newState.has(action.value)) {
+            newState.delete(action.value);
+          } else {
+            newState.add(action.value);
+          }
+        }
+        return newState;
+      }
+  }
+};
+var useMultiselect = exports.useMultiselect = function useMultiselect() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      initialValue: [],
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onChange: function onChange() {}
+    },
+    _ref$initialValue = _ref.initialValue,
+    initialValue = _ref$initialValue === void 0 ? [] : _ref$initialValue,
+    _ref$onChange = _ref.onChange,
+    userOnChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+  var _useReducer = (0, _react.useReducer)(valueReducer, new Set(initialValue)),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    value = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var getArrayValue = function getArrayValue(value) {
+    return Array.from(value);
+  };
+  var onChange = (0, _react.useCallback)(function (newValue) {
+    dispatch({
+      type: "toggle_item",
+      value: newValue
+    });
+  }, [dispatch]);
+  var isFirstRun = (0, _react.useRef)(true);
+  (0, _react.useEffect)(function () {
+    if (isFirstRun.current) {
+      isFirstRun.current = false;
+      return;
+    }
+    userOnChange(getArrayValue(value));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userOnChange, value]);
+  var onClear = (0, _react.useCallback)(function () {
+    dispatch({
+      type: "reset"
+    });
+  }, [dispatch]);
+  return {
+    value: getArrayValue(value),
+    onChange: onChange,
+    onClear: onClear
+  };
+};

package/commonjs/useMutationObserver/useMutationObserver.flow.js

@@ -0,0 +1 @@
+"use strict";

package/commonjs/useMutationObserver/useMutationObserver.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMutationObserver = useMutationObserver;
+exports.useMutationObserverOnce = useMutationObserverOnce;
+var _seedsReactUtilities = require("@sproutsocial/seeds-react-utilities");
+var _react = require("react");
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var defaultCallback = function defaultCallback(mutationList) {
+  return mutationList;
+};
+function useMutationObserver(targetNode, config) {
+  var callback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultCallback;
+  if (!(0, _seedsReactUtilities.canUseDOM)()) {
+    return;
+  }
+  /* eslint-disable-next-line */
+  var _useState = (0, _react.useState)(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  /* eslint-disable-next-line */
+  var observer = (0, _react.useMemo)(function () {
+    return new MutationObserver(function (mutationList, observer) {
+      var result = callback(mutationList, observer);
+      setValue(result);
+    });
+  }, [callback]);
+  /* eslint-disable-next-line */
+  (0, _react.useEffect)(function () {
+    if (targetNode) {
+      observer.observe(targetNode, config);
+      return function () {
+        observer.disconnect();
+      };
+    }
+  }, [targetNode, config, observer]);
+  return value;
+}
+function useMutationObserverOnce(targetNode, config, callback) {
+  var _useState3 = (0, _react.useState)(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isObserving = _useState4[0],
+    setObserving = _useState4[1];
+  var node = isObserving ? targetNode : null;
+  var value = useMutationObserver(node, config, callback);
+  if (value !== undefined && isObserving) {
+    setObserving(false);
+  }
+  return value;
+}

package/commonjs/useSelect/useSelect.flow.js

@@ -0,0 +1 @@
+"use strict";

package/commonjs/useSelect/useSelect.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSelect = void 0;
+var _react = require("react");
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var useSelect = exports.useSelect = function useSelect() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      initialValue: "",
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onChange: function onChange() {}
+    },
+    _ref$initialValue = _ref.initialValue,
+    initialValue = _ref$initialValue === void 0 ? "" : _ref$initialValue,
+    _ref$onChange = _ref.onChange,
+    userOnChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+  var _useState = (0, _react.useState)(initialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var onChange = (0, _react.useCallback)(function (newValue) {
+    if (newValue !== value) {
+      setValue(newValue);
+      userOnChange(newValue);
+    }
+  }, [userOnChange, value]);
+  return {
+    value: value,
+    onChange: onChange
+  };
+};

package/commonjs/useTextContent/useTextContent.flow.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _react = require("react");
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var useTextContentClone = function useTextContentClone(initial) {
+  var _useState = (0, _react.useState)(initial),
+    _useState2 = _slicedToArray(_useState, 2),
+    textContent = _useState2[0],
+    setTextContent = _useState2[1];
+  var ref = (0, _react.useCallback)(function (node) {
+    if (node !== null) {
+      setTextContent(node.textContent);
+    }
+  }, []);
+  ref.current = textContent;
+  return ref;
+};
+
+// Couldn't find a way to achieve this with flow type syntax - open to suggestions
+// Tried https://github.com/facebook/flow/issues/2840#issuecomment-452934068 but it didn't work

package/commonjs/useTextContent/useTextContent.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTextContent = useTextContent;
+var _react = require("react");
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function useTextContent(initial) {
+  var _useState = (0, _react.useState)(initial),
+    _useState2 = _slicedToArray(_useState, 2),
+    textContent = _useState2[0],
+    setTextContent = _useState2[1];
+  var ref = (0, _react.useCallback)(function (node) {
+    if (node && node.textContent !== null) {
+      setTextContent(node.textContent);
+    }
+  }, []);
+  ref.current = textContent;
+  return ref;
+}

package/commonjs/useWhyDidYouUpdate/useWhyDidYouUpdate.flow.js

@@ -0,0 +1 @@
+"use strict";

package/commonjs/useWhyDidYouUpdate/useWhyDidYouUpdate.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWhyDidYouUpdate = useWhyDidYouUpdate;
+var _react = require("react");
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function useWhyDidYouUpdate(name, props) {
+  // Get a mutable ref object where we can store props ...
+  // ... for comparison next time this hook runs.
+  var previousProps = (0, _react.useRef)({});
+  (0, _react.useEffect)(function () {
+    if (previousProps.current) {
+      // Get all keys from previous and current props
+      var allKeys = Object.keys(_objectSpread(_objectSpread({}, previousProps.current), props));
+      // Use this object to keep track of changed props
+      var changesObj = {};
+      // Iterate through keys
+      allKeys.forEach(function (key) {
+        // If previous is different from current
+        if (previousProps.current[key] !== props[key]) {
+          // Add to changesObj
+          changesObj[key] = {
+            from: previousProps.current[key],
+            to: props[key]
+          };
+        }
+      });
+
+      // If changesObj not empty then output to console
+      if (Object.keys(changesObj).length) {
+        // eslint-disable-next-line no-console
+        console.log("[why-did-you-update]", name, changesObj);
+      }
+    }
+
+    // Finally update previousProps with current props for next hook call
+    previousProps.current = props;
+  });
+}

package/dist/types/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./useMeasure/useMeasure";
+export * from "./useSelect/useSelect";
+export * from "./useMultiselect/useMultiselect";
+export * from "./useMutationObserver/useMutationObserver";
+export * from "./useTextContent/useTextContent";
+export * from "./useWhyDidYouUpdate/useWhyDidYouUpdate";
+export * from "./useInteractiveColor/useInteractiveColor";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,2CAA2C,CAAC"}

package/dist/types/useInteractiveColor/useInteractiveColor.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The useInteractiveColor hook has context of theme mode (light or dark)
+ * and can be used to lighten or darken a color dynamically
+ *
+ * note: colors are limited to our theme colors
+ */
+declare const useInteractiveColor: (themeColor: string) => string;
+export { useInteractiveColor };
+//# sourceMappingURL=useInteractiveColor.d.ts.map

package/dist/types/useInteractiveColor/useInteractiveColor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInteractiveColor.d.ts","sourceRoot":"","sources":["../../../src/useInteractiveColor/useInteractiveColor.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,QAAA,MAAM,mBAAmB,eAAgB,MAAM,KAAG,MAmBjD,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/types/useMeasure/useMeasure.d.ts

@@ -0,0 +1,14 @@
+import { type RefObject } from "react";
+interface DOMRectObject {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export declare function useMeasure<TElement extends Element>(ref: RefObject<TElement>): Readonly<DOMRectObject>;
+export {};
+//# sourceMappingURL=useMeasure.d.ts.map

package/dist/types/useMeasure/useMeasure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMeasure.d.ts","sourceRoot":"","sources":["../../../src/useMeasure/useMeasure.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,UAAU,aAAa;IACrB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAYD,wBAAgB,UAAU,CAAC,QAAQ,SAAS,OAAO,EAAE,GAAG,EAAE,SAAS,CAAC,QAAQ,CAAC,2BAqC5E"}

package/dist/types/useMultiselect/useMultiselect.d.ts

@@ -0,0 +1,11 @@
+type TypeMultiSelectProps<T extends string> = {
+    initialValue?: T[];
+    onChange?: (value: Array<string | T>) => any;
+};
+export declare const useMultiselect: <T extends string>({ initialValue, onChange: userOnChange, }?: TypeMultiSelectProps<T>) => {
+    value: (string | T)[];
+    onChange: (newValue: string) => void;
+    onClear: () => void;
+};
+export {};
+//# sourceMappingURL=useMultiselect.d.ts.map

package/dist/types/useMultiselect/useMultiselect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMultiselect.d.ts","sourceRoot":"","sources":["../../../src/useMultiselect/useMultiselect.ts"],"names":[],"mappings":"AAEA,KAAK,oBAAoB,CAAC,CAAC,SAAS,MAAM,IAAI;IAC5C,YAAY,CAAC,EAAE,CAAC,EAAE,CAAC;IAEnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC;CAC9C,CAAC;AAyBF,eAAO,MAAM,cAAc;;yBAiBZ,MAAM;;CAsBpB,CAAC"}

package/dist/types/useMutationObserver/useMutationObserver.d.ts

@@ -0,0 +1,18 @@
+type TypeMutationObserverInitRequired = {
+    childList: true;
+} | {
+    attributes: true;
+} | {
+    characterData: true;
+};
+type TypeMutationObserverInit = {
+    subtree?: boolean;
+    attributeOldValue?: boolean;
+    characterDataOldValue?: boolean;
+    attributeFilter?: Array<string>;
+} & TypeMutationObserverInitRequired;
+type TypeMutationObserverCallback = (mutationList?: MutationRecord[], observer?: MutationObserver) => any;
+export declare function useMutationObserver(targetNode: Node | null, config: TypeMutationObserverInit, callback?: TypeMutationObserverCallback): undefined;
+export declare function useMutationObserverOnce(targetNode: Node | null, config: TypeMutationObserverInit, callback: TypeMutationObserverCallback): undefined;
+export {};
+//# sourceMappingURL=useMutationObserver.d.ts.map

package/dist/types/useMutationObserver/useMutationObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMutationObserver.d.ts","sourceRoot":"","sources":["../../../src/useMutationObserver/useMutationObserver.ts"],"names":[],"mappings":"AAGA,KAAK,gCAAgC,GACjC;IACE,SAAS,EAAE,IAAI,CAAC;CACjB,GACD;IACE,UAAU,EAAE,IAAI,CAAC;CAClB,GACD;IACE,aAAa,EAAE,IAAI,CAAC;CACrB,CAAC;AAEN,KAAK,wBAAwB,GAAG;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,eAAe,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CACjC,GAAG,gCAAgC,CAAC;AAErC,KAAK,4BAA4B,GAAG,CAClC,YAAY,CAAC,EAAE,cAAc,EAAE,EAC/B,QAAQ,CAAC,EAAE,gBAAgB,KAExB,GAAG,CAAC;AAKT,wBAAgB,mBAAmB,CACjC,UAAU,EAAE,IAAI,GAAG,IAAI,EACvB,MAAM,EAAE,wBAAwB,EAChC,QAAQ,GAAE,4BAA8C,aA2BzD;AAED,wBAAgB,uBAAuB,CACrC,UAAU,EAAE,IAAI,GAAG,IAAI,EACvB,MAAM,EAAE,wBAAwB,EAChC,QAAQ,EAAE,4BAA4B,aASvC"}

package/dist/types/useSelect/useSelect.d.ts

@@ -0,0 +1,10 @@
+type TypeSingleSelectProps<T extends string> = {
+    initialValue?: T | "";
+    onChange?: (value: string | T) => any;
+};
+export declare const useSelect: <T extends string>({ initialValue, onChange: userOnChange, }?: TypeSingleSelectProps<T>) => {
+    value: string | T;
+    onChange: (newValue: string) => void;
+};
+export {};
+//# sourceMappingURL=useSelect.d.ts.map

package/dist/types/useSelect/useSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../../../src/useSelect/useSelect.ts"],"names":[],"mappings":"AAEA,KAAK,qBAAqB,CAAC,CAAC,SAAS,MAAM,IAAI;IAC7C,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC;IAEtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,KAAK,GAAG,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,SAAS;;yBAcP,MAAM;CAUpB,CAAC"}

package/dist/types/useTextContent/useTextContent.d.ts

@@ -0,0 +1,5 @@
+export type textContentRef = ((node: Node) => void) & {
+    current?: string;
+};
+export declare function useTextContent(initial: string): textContentRef;
+//# sourceMappingURL=useTextContent.d.ts.map

package/dist/types/useTextContent/useTextContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextContent.d.ts","sourceRoot":"","sources":["../../../src/useTextContent/useTextContent.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,cAAc,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAC3E,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,kBAW7C"}

package/dist/types/useWhyDidYouUpdate/useWhyDidYouUpdate.d.ts

@@ -0,0 +1,2 @@
+export declare function useWhyDidYouUpdate(name: string, props: object): void;
+//# sourceMappingURL=useWhyDidYouUpdate.d.ts.map

package/dist/types/useWhyDidYouUpdate/useWhyDidYouUpdate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWhyDidYouUpdate.d.ts","sourceRoot":"","sources":["../../../src/useWhyDidYouUpdate/useWhyDidYouUpdate.ts"],"names":[],"mappings":"AAEA,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,QAiC7D"}

package/lib/index.flow.js

@@ -0,0 +1,6 @@
+export * from "./useSelect/useSelect";
+export * from "./useMultiselect/useMultiselect";
+export * from "./useMutationObserver/useMutationObserver";
+export * from "./useTextContent/useTextContent";
+export * from "./useWhyDidYouUpdate/useWhyDidYouUpdate";
+export * from "./useInteractiveColor/useInteractiveColor";

package/lib/index.js

@@ -0,0 +1,7 @@
+export * from "./useMeasure/useMeasure";
+export * from "./useSelect/useSelect";
+export * from "./useMultiselect/useMultiselect";
+export * from "./useMutationObserver/useMutationObserver";
+export * from "./useTextContent/useTextContent";
+export * from "./useWhyDidYouUpdate/useWhyDidYouUpdate";
+export * from "./useInteractiveColor/useInteractiveColor";

package/lib/index.js.flow

@@ -0,0 +1,3 @@
+// @flow
+	export * from '../__flow__';
+	

package/lib/useInteractiveColor/useInteractiveColor.js

@@ -0,0 +1,27 @@
+import { darken, lighten } from "polished";
+import { useTheme } from "styled-components";
+/**
+ * The useInteractiveColor hook has context of theme mode (light or dark)
+ * and can be used to lighten or darken a color dynamically
+ *
+ * note: colors are limited to our theme colors
+ */
+var useInteractiveColor = function useInteractiveColor(themeColor) {
+  // Throw error if used outside of a ThemeProvider (styled-components)
+  if (!useTheme()) {
+    throw new Error("useInteractiveColor() must be used within a Styled Components ThemeProvider");
+  }
+
+  // Get the current theme mode ie. 'light' or 'dark'
+  var theme = useTheme();
+  var themeMode = theme.mode;
+
+  // If the theme mode is dark, return a lightened version of the themeValue
+  if (themeMode === "dark") {
+    return lighten(0.2, themeColor);
+  } else {
+    // If the theme mode is light, return a darkened version of the themeValue
+    return darken(0.2, themeColor);
+  }
+};
+export { useInteractiveColor };

package/lib/useMeasure/useMeasure.js

@@ -0,0 +1,59 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState, useLayoutEffect } from "react";
+var initialBounds = Object.freeze({
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+});
+export function useMeasure(ref) {
+  var _useState = useState(initialBounds),
+    _useState2 = _slicedToArray(_useState, 2),
+    bounds = _useState2[0],
+    setContentRect = _useState2[1];
+  useLayoutEffect(function () {
+    var element = ref.current;
+    if (!element ||
+    // in non-browser environments (e.g. Jest tests) ResizeObserver is not defined
+    !("ResizeObserver" in window)) {
+      return;
+    }
+    var resizeObserver = new ResizeObserver(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 1),
+        entry = _ref2[0];
+      var _entry$contentRect = entry.contentRect,
+        x = _entry$contentRect.x,
+        y = _entry$contentRect.y,
+        width = _entry$contentRect.width,
+        height = _entry$contentRect.height,
+        top = _entry$contentRect.top,
+        right = _entry$contentRect.right,
+        bottom = _entry$contentRect.bottom,
+        left = _entry$contentRect.left;
+      setContentRect({
+        x: x,
+        y: y,
+        width: width,
+        height: height,
+        top: top,
+        right: right,
+        bottom: bottom,
+        left: left
+      });
+    });
+    resizeObserver.observe(ref.current);
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, [ref]);
+  return bounds;
+}

package/lib/useMultiselect/useMultiselect.js

@@ -0,0 +1,71 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useCallback, useEffect, useReducer, useRef } from "react";
+var valueReducer = function valueReducer(state, action) {
+  var newState = new Set(state);
+  switch (action.type) {
+    case "reset":
+      {
+        return new Set();
+      }
+    case "toggle_item":
+    default:
+      {
+        if (action.value) {
+          if (newState.has(action.value)) {
+            newState.delete(action.value);
+          } else {
+            newState.add(action.value);
+          }
+        }
+        return newState;
+      }
+  }
+};
+export var useMultiselect = function useMultiselect() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      initialValue: [],
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onChange: function onChange() {}
+    },
+    _ref$initialValue = _ref.initialValue,
+    initialValue = _ref$initialValue === void 0 ? [] : _ref$initialValue,
+    _ref$onChange = _ref.onChange,
+    userOnChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+  var _useReducer = useReducer(valueReducer, new Set(initialValue)),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    value = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var getArrayValue = function getArrayValue(value) {
+    return Array.from(value);
+  };
+  var onChange = useCallback(function (newValue) {
+    dispatch({
+      type: "toggle_item",
+      value: newValue
+    });
+  }, [dispatch]);
+  var isFirstRun = useRef(true);
+  useEffect(function () {
+    if (isFirstRun.current) {
+      isFirstRun.current = false;
+      return;
+    }
+    userOnChange(getArrayValue(value));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userOnChange, value]);
+  var onClear = useCallback(function () {
+    dispatch({
+      type: "reset"
+    });
+  }, [dispatch]);
+  return {
+    value: getArrayValue(value),
+    onChange: onChange,
+    onClear: onClear
+  };
+};

package/lib/useMutationObserver/useMutationObserver.js

@@ -0,0 +1,51 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { canUseDOM } from "@sproutsocial/seeds-react-utilities";
+import { useEffect, useMemo, useState } from "react";
+var defaultCallback = function defaultCallback(mutationList) {
+  return mutationList;
+};
+export function useMutationObserver(targetNode, config) {
+  var callback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultCallback;
+  if (!canUseDOM()) {
+    return;
+  }
+  /* eslint-disable-next-line */
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  /* eslint-disable-next-line */
+  var observer = useMemo(function () {
+    return new MutationObserver(function (mutationList, observer) {
+      var result = callback(mutationList, observer);
+      setValue(result);
+    });
+  }, [callback]);
+  /* eslint-disable-next-line */
+  useEffect(function () {
+    if (targetNode) {
+      observer.observe(targetNode, config);
+      return function () {
+        observer.disconnect();
+      };
+    }
+  }, [targetNode, config, observer]);
+  return value;
+}
+export function useMutationObserverOnce(targetNode, config, callback) {
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isObserving = _useState4[0],
+    setObserving = _useState4[1];
+  var node = isObserving ? targetNode : null;
+  var value = useMutationObserver(node, config, callback);
+  if (value !== undefined && isObserving) {
+    setObserving(false);
+  }
+  return value;
+}

package/lib/useSelect/useSelect.js

@@ -0,0 +1,32 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState, useCallback } from "react";
+export var useSelect = function useSelect() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      initialValue: "",
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onChange: function onChange() {}
+    },
+    _ref$initialValue = _ref.initialValue,
+    initialValue = _ref$initialValue === void 0 ? "" : _ref$initialValue,
+    _ref$onChange = _ref.onChange,
+    userOnChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+  var _useState = useState(initialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var onChange = useCallback(function (newValue) {
+    if (newValue !== value) {
+      setValue(newValue);
+      userOnChange(newValue);
+    }
+  }, [userOnChange, value]);
+  return {
+    value: value,
+    onChange: onChange
+  };
+};

package/lib/useTextContent/useTextContent.flow.js

@@ -0,0 +1,23 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState, useCallback } from "react";
+var useTextContentClone = function useTextContentClone(initial) {
+  var _useState = useState(initial),
+    _useState2 = _slicedToArray(_useState, 2),
+    textContent = _useState2[0],
+    setTextContent = _useState2[1];
+  var ref = useCallback(function (node) {
+    if (node !== null) {
+      setTextContent(node.textContent);
+    }
+  }, []);
+  ref.current = textContent;
+  return ref;
+};
+
+// Couldn't find a way to achieve this with flow type syntax - open to suggestions
+// Tried https://github.com/facebook/flow/issues/2840#issuecomment-452934068 but it didn't work

package/lib/useTextContent/useTextContent.js

@@ -0,0 +1,20 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useCallback, useState } from "react";
+export function useTextContent(initial) {
+  var _useState = useState(initial),
+    _useState2 = _slicedToArray(_useState, 2),
+    textContent = _useState2[0],
+    setTextContent = _useState2[1];
+  var ref = useCallback(function (node) {
+    if (node && node.textContent !== null) {
+      setTextContent(node.textContent);
+    }
+  }, []);
+  ref.current = textContent;
+  return ref;
+}

package/lib/useWhyDidYouUpdate/useWhyDidYouUpdate.js

@@ -0,0 +1,40 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useRef, useEffect } from "react";
+export function useWhyDidYouUpdate(name, props) {
+  // Get a mutable ref object where we can store props ...
+  // ... for comparison next time this hook runs.
+  var previousProps = useRef({});
+  useEffect(function () {
+    if (previousProps.current) {
+      // Get all keys from previous and current props
+      var allKeys = Object.keys(_objectSpread(_objectSpread({}, previousProps.current), props));
+      // Use this object to keep track of changed props
+      var changesObj = {};
+      // Iterate through keys
+      allKeys.forEach(function (key) {
+        // If previous is different from current
+        if (previousProps.current[key] !== props[key]) {
+          // Add to changesObj
+          changesObj[key] = {
+            from: previousProps.current[key],
+            to: props[key]
+          };
+        }
+      });
+
+      // If changesObj not empty then output to console
+      if (Object.keys(changesObj).length) {
+        // eslint-disable-next-line no-console
+        console.log("[why-did-you-update]", name, changesObj);
+      }
+    }
+
+    // Finally update previousProps with current props for next hook call
+    previousProps.current = props;
+  });
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@sproutsocial/seeds-react-hooks",
+  "version": "1.0.0",
+  "description": "Seeds React Hooks",
+  "main": "commonjs/index.js",
+  "module": "lib/index.mjs",
+  "types": "dist/types/index.d.ts",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "files": [
+    "__flow__",
+    "commonjs",
+    "dist",
+    "lib"
+  ],
+  "scripts": {
+    "build": "yarn build:ts-declarations && tsx scripts/build.ts",
+    "build:ts-declarations": "tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-utilities": "*",
+    "polished": "^3.4.1"
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "@sproutsocial/seeds-build-flow": "*",
+    "@sproutsocial/seeds-react-theme": "*",
+    "flow-bin": "0.131.0",
+    "react": "^17.0.2",
+    "styled-components": "^5.2.3",
+    "typescript": "^5.1.6",
+    "tsx": "3.13.0"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}