@artsy/palette 17.7.2 → 17.7.3

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# v17.7.3 (Wed Sep 22 2021)
+
+#### 🐛  Bug Fix
+
+- fix(hooks): improves focus lock and mutation observer hooks [#1045](https://github.com/artsy/palette/pull/1045) ([@dzucconi](https://github.com/dzucconi))
+- fix(usefocuslock): handles clicks ([@dzucconi](https://github.com/dzucconi))
+- fix(usemutationobserver): simply return if undefined ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
 # v17.7.2 (Tue Sep 21 2021)
 
 #### 🐛  Bug Fix

package/dist/utils/useFocusLock.js

@@ -37,8 +37,10 @@ var useFocusLock = function useFocusLock(ref) {
   var updateFocusableEls = (0, _react.useCallback)(function () {
     if (ref.current === null) return;
     setFocusableEls(Array.from(ref.current.querySelectorAll(FOCUSABLE_SELECTOR))); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  (0, _react.useEffect)(updateFocusableEls, [updateFocusableEls]);
+  }, []); // Set initial focusable elements on mount
+
+  (0, _react.useEffect)(updateFocusableEls, [updateFocusableEls]); // Detects when DOM changes and updates focusable elements
+
   (0, _useMutationObserver.useMutationObserver)({
     ref: ref,
     onMutate: function onMutate(mutations) {
@@ -58,13 +60,15 @@ var useFocusLock = function useFocusLock(ref) {
   }),
       focusableIndex = _useCursor.index,
       handlePrev = _useCursor.handlePrev,
-      handleNext = _useCursor.handleNext;
+      handleNext = _useCursor.handleNext,
+      setCursor = _useCursor.setCursor; // Moves focus when index changes
 
-  (0, _react.useEffect)(function () {
-    if (!focusableEls.length) return; // Moves focus when index changes
 
+  (0, _react.useEffect)(function () {
+    if (!focusableEls.length) return;
     focusableEls[focusableIndex].focus();
-  }, [focusableEls, focusableIndex]);
+  }, [focusableEls, focusableIndex]); // Handle keyboard navigation
+
   (0, _react.useEffect)(function () {
     var handleKeydown = function handleKeydown(event) {
       switch (event.key) {
@@ -89,6 +93,37 @@ var useFocusLock = function useFocusLock(ref) {
       document.removeEventListener("keydown", handleKeydown);
     };
   }, [handleNext, handlePrev]);
+  (0, _react.useEffect)(function () {
+    // Update the index when any focusable is clicked
+    var handleClick = function handleClick(event) {
+      if (event.target !== document.activeElement) return;
+      var index = focusableEls.findIndex(function (node) {
+        return node === event.target;
+      });
+      if (index === -1) return;
+      setCursor(index);
+    }; // If focus escapes the trap, pull it back in
+
+
+    var handleFocusIn = function handleFocusIn(event) {
+      var index = focusableEls.findIndex(function (node) {
+        return node === event.target;
+      });
+
+      if (index === -1) {
+        event.stopImmediatePropagation();
+        focusableEls[focusableIndex].focus();
+        return;
+      }
+    };
+
+    document.addEventListener("click", handleClick);
+    document.addEventListener("focusin", handleFocusIn);
+    return function () {
+      document.removeEventListener("click", handleClick);
+      document.removeEventListener("focusin", handleFocusIn);
+    };
+  }, [focusableEls, focusableIndex, setCursor]);
 };
 
 exports.useFocusLock = useFocusLock;

package/dist/utils/useFocusLock.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/useFocusLock.ts"],"names":["FOCUSABLE_SELECTOR","join","useFocusLock","ref","focusableEls","setFocusableEls","updateFocusableEls","current","Array","from","querySelectorAll","onMutate","mutations","hasMeaningfullyMutated","some","mutation","addedNodes","length","removedNodes","max","focusableIndex","index","handlePrev","handleNext","focus","handleKeydown","event","key","preventDefault","stopPropagation","shiftKey","focusedElPriorToOpen","document","activeElement","addEventListener","removeEventListener"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;AAEA,IAAMA,kBAAkB,GAAG,CACzB,SADyB,EAEzB,YAFyB,EAGzB,uBAHyB,EAIzB,wBAJyB,EAKzB,0BALyB,EAMzB,wBANyB,EAOzB,gBAPyB,EAQzBC,IARyB,CAQpB,IARoB,CAA3B;AAUA;AACA;AACA;;AACO,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAC1BC,GAD0B,EAEvB;AAAA,kBACqC,qBAAwB,EAAxB,CADrC;AAAA;AAAA,MACIC,YADJ;AAAA,MACkBC,eADlB;;AAGH,MAAMC,kBAAkB,GAAG,wBAAY,YAAM;AAC3C,QAAIH,GAAG,CAACI,OAAJ,KAAgB,IAApB,EAA0B;AAE1BF,IAAAA,eAAe,CACbG,KAAK,CAACC,IAAN,CAAWN,GAAG,CAACI,OAAJ,CAAYG,gBAAZ,CAA0CV,kBAA1C,CAAX,CADa,CAAf,CAH2C,CAM3C;AACD,GAP0B,EAOxB,EAPwB,CAA3B;AASA,wBAAUM,kBAAV,EAA8B,CAACA,kBAAD,CAA9B;AAEA,gDAAoB;AAClBH,IAAAA,GAAG,EAAHA,GADkB;AAElBQ,IAAAA,QAAQ,EAAE,kBAACC,SAAD,EAAe;AACvB;AACA,UAAMC,sBAAsB,GAAGD,SAAS,CAACE,IAAV,CAAe,UAACC,QAAD,EAAc;AAC1D,eACEA,QAAQ,CAACC,UAAT,CAAoBC,MAApB,GAA6B,CAA7B,IAAkCF,QAAQ,CAACG,YAAT,CAAsBD,MAAtB,GAA+B,CADnE;AAGD,OAJ8B,CAA/B;;AAMA,UAAIJ,sBAAJ,EAA4B;AAC1BP,QAAAA,kBAAkB;AACnB;AACF;AAbiB,GAApB;;AAdG,mBA8BuD,2BAAU;AAClEa,IAAAA,GAAG,EAAEf,YAAY,CAACa;AADgD,GAAV,CA9BvD;AAAA,MA8BYG,cA9BZ,cA8BKC,KA9BL;AAAA,MA8B4BC,UA9B5B,cA8B4BA,UA9B5B;AAAA,MA8BwCC,UA9BxC,cA8BwCA,UA9BxC;;AAkCH,wBAAU,YAAM;AACd,QAAI,CAACnB,YAAY,CAACa,MAAlB,EAA0B,OADZ,CAGd;;AACAb,IAAAA,YAAY,CAACgB,cAAD,CAAZ,CAA6BI,KAA7B;AACD,GALD,EAKG,CAACpB,YAAD,EAAegB,cAAf,CALH;AAOA,wBAAU,YAAM;AACd,QAAMK,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA0B;AAC9C,cAAQA,KAAK,CAACC,GAAd;AACE,aAAK,KAAL;AACE;AACAD,UAAAA,KAAK,CAACE,cAAN;AACAF,UAAAA,KAAK,CAACG,eAAN,GAHF,CAKE;;AACAH,UAAAA,KAAK,CAACI,QAAN,GAAiBR,UAAU,EAA3B,GAAgCC,UAAU,EAA1C;AACA;;AACF;AACE;AAVJ;AAYD,KAbD;;AAeA,QAAMQ,oBAAoB,GAAGC,QAAQ,CAACC,aAAtC;AAEAD,IAAAA,QAAQ,CAACE,gBAAT,CAA0B,SAA1B,EAAqCT,aAArC;AAEA,WAAO,YAAM;AACX;AACAM,MAAAA,oBAAoB,CAACP,KAArB;AAEAQ,MAAAA,QAAQ,CAACG,mBAAT,CAA6B,SAA7B,EAAwCV,aAAxC;AACD,KALD;AAMD,GA1BD,EA0BG,CAACF,UAAD,EAAaD,UAAb,CA1BH;AA2BD,CAtEM","sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\"\nimport { useCursor } from \"use-cursor\"\nimport { useMutationObserver } from \"./useMutationObserver\"\n\nconst FOCUSABLE_SELECTOR = [\n  \"a[href]\",\n  \"area[href]\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"button:not([disabled])\",\n  '[tabindex=\"0\"]',\n].join(\", \")\n\n/**\n * Locks focus within the given element\n */\nexport const useFocusLock = (\n  ref: React.MutableRefObject<HTMLElement | null>\n) => {\n  const [focusableEls, setFocusableEls] = useState<HTMLElement[]>([])\n\n  const updateFocusableEls = useCallback(() => {\n    if (ref.current === null) return\n\n    setFocusableEls(\n      Array.from(ref.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))\n    )\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(updateFocusableEls, [updateFocusableEls])\n\n  useMutationObserver({\n    ref,\n    onMutate: (mutations) => {\n      // Check to see if any of the mutations has either added or removed nodes\n      const hasMeaningfullyMutated = mutations.some((mutation) => {\n        return (\n          mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0\n        )\n      })\n\n      if (hasMeaningfullyMutated) {\n        updateFocusableEls()\n      }\n    },\n  })\n\n  const { index: focusableIndex, handlePrev, handleNext } = useCursor({\n    max: focusableEls.length,\n  })\n\n  useEffect(() => {\n    if (!focusableEls.length) return\n\n    // Moves focus when index changes\n    focusableEls[focusableIndex].focus()\n  }, [focusableEls, focusableIndex])\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      switch (event.key) {\n        case \"Tab\":\n          // Lock focus within element\n          event.preventDefault()\n          event.stopPropagation()\n\n          // Move focus up or down\n          event.shiftKey ? handlePrev() : handleNext()\n          break\n        default:\n          break\n      }\n    }\n\n    const focusedElPriorToOpen = document.activeElement as HTMLElement\n\n    document.addEventListener(\"keydown\", handleKeydown)\n\n    return () => {\n      // Return the focus\n      focusedElPriorToOpen.focus()\n\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [handleNext, handlePrev])\n}\n"],"file":"useFocusLock.js"}
+{"version":3,"sources":["../../src/utils/useFocusLock.ts"],"names":["FOCUSABLE_SELECTOR","join","useFocusLock","ref","focusableEls","setFocusableEls","updateFocusableEls","current","Array","from","querySelectorAll","onMutate","mutations","hasMeaningfullyMutated","some","mutation","addedNodes","length","removedNodes","max","focusableIndex","index","handlePrev","handleNext","setCursor","focus","handleKeydown","event","key","preventDefault","stopPropagation","shiftKey","focusedElPriorToOpen","document","activeElement","addEventListener","removeEventListener","handleClick","target","findIndex","node","handleFocusIn","stopImmediatePropagation"],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\"\nimport { useCursor } from \"use-cursor\"\nimport { useMutationObserver } from \"./useMutationObserver\"\n\nconst FOCUSABLE_SELECTOR = [\n  \"a[href]\",\n  \"area[href]\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"button:not([disabled])\",\n  '[tabindex=\"0\"]',\n].join(\", \")\n\n/**\n * Locks focus within the given element\n */\nexport const useFocusLock = (\n  ref: React.MutableRefObject<HTMLElement | null>\n) => {\n  const [focusableEls, setFocusableEls] = useState<HTMLElement[]>([])\n\n  const updateFocusableEls = useCallback(() => {\n    if (ref.current === null) return\n\n    setFocusableEls(\n      Array.from(ref.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))\n    )\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  // Set initial focusable elements on mount\n  useEffect(updateFocusableEls, [updateFocusableEls])\n\n  // Detects when DOM changes and updates focusable elements\n  useMutationObserver({\n    ref,\n    onMutate: (mutations) => {\n      // Check to see if any of the mutations has either added or removed nodes\n      const hasMeaningfullyMutated = mutations.some((mutation) => {\n        return (\n          mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0\n        )\n      })\n\n      if (hasMeaningfullyMutated) {\n        updateFocusableEls()\n      }\n    },\n  })\n\n  const {\n    index: focusableIndex,\n    handlePrev,\n    handleNext,\n    setCursor,\n  } = useCursor({\n    max: focusableEls.length,\n  })\n\n  // Moves focus when index changes\n  useEffect(() => {\n    if (!focusableEls.length) return\n    focusableEls[focusableIndex].focus()\n  }, [focusableEls, focusableIndex])\n\n  // Handle keyboard navigation\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      switch (event.key) {\n        case \"Tab\":\n          // Lock focus within element\n          event.preventDefault()\n          event.stopPropagation()\n\n          // Move focus up or down\n          event.shiftKey ? handlePrev() : handleNext()\n          break\n        default:\n          break\n      }\n    }\n\n    const focusedElPriorToOpen = document.activeElement as HTMLElement\n\n    document.addEventListener(\"keydown\", handleKeydown)\n\n    return () => {\n      // Return the focus\n      focusedElPriorToOpen.focus()\n\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [handleNext, handlePrev])\n\n  useEffect(() => {\n    // Update the index when any focusable is clicked\n    const handleClick = (event: MouseEvent) => {\n      if (event.target !== document.activeElement) return\n\n      const index = focusableEls.findIndex((node) => node === event.target)\n\n      if (index === -1) return\n\n      setCursor(index)\n    }\n\n    // If focus escapes the trap, pull it back in\n    const handleFocusIn = (event: FocusEvent) => {\n      const index = focusableEls.findIndex((node) => node === event.target)\n\n      if (index === -1) {\n        event.stopImmediatePropagation()\n        focusableEls[focusableIndex].focus()\n        return\n      }\n    }\n\n    document.addEventListener(\"click\", handleClick)\n    document.addEventListener(\"focusin\", handleFocusIn)\n    return () => {\n      document.removeEventListener(\"click\", handleClick)\n      document.removeEventListener(\"focusin\", handleFocusIn)\n    }\n  }, [focusableEls, focusableIndex, setCursor])\n}\n"],"file":"useFocusLock.js"}

package/dist/utils/useFocusLock.story.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => JSX.Element;

package/dist/utils/useFocusLock.story.js

@@ -0,0 +1,44 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useFocusLock = require("./useFocusLock");
+
+var _Input = require("../elements/Input");
+
+var _Button = require("../elements/Button");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = {
+  title: "Hooks/useFocusLock"
+};
+exports.default = _default;
+
+var Default = function Default() {
+  var ref = (0, _react.useRef)(null);
+  (0, _useFocusLock.useFocusLock)(ref);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    placeholder: "Not focusable"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    placeholder: "Focusable"
+  }), /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    placeholder: "Focusable"
+  }), /*#__PURE__*/_react.default.createElement(_Button.Button, null, "Focusable")), /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    placeholder: "Not focusable"
+  }));
+};
+
+exports.Default = Default;
+//# sourceMappingURL=useFocusLock.story.js.map

package/dist/utils/useFocusLock.story.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/useFocusLock.story.tsx"],"names":["title","Default","ref"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,MAAMC,GAAG,GAAG,mBAA8B,IAA9B,CAAZ;AAEA,kCAAaA,GAAb;AAEA,sBACE,yEACE,6BAAC,YAAD;AAAO,IAAA,WAAW,EAAC;AAAnB,IADF,eAEE;AAAK,IAAA,GAAG,EAAEA;AAAV,kBACE,6BAAC,YAAD;AAAO,IAAA,WAAW,EAAC;AAAnB,IADF,eAEE,6BAAC,YAAD;AAAO,IAAA,WAAW,EAAC;AAAnB,IAFF,eAGE,6BAAC,cAAD,oBAHF,CAFF,eAOE,6BAAC,YAAD;AAAO,IAAA,WAAW,EAAC;AAAnB,IAPF,CADF;AAWD,CAhBM","sourcesContent":["import React, { useRef } from \"react\"\nimport { useFocusLock } from \"./useFocusLock\"\nimport { Input } from \"../elements/Input\"\nimport { Button } from \"../elements/Button\"\n\nexport default {\n  title: \"Hooks/useFocusLock\",\n}\n\nexport const Default = () => {\n  const ref = useRef<HTMLDivElement | null>(null)\n\n  useFocusLock(ref)\n\n  return (\n    <>\n      <Input placeholder=\"Not focusable\" />\n      <div ref={ref}>\n        <Input placeholder=\"Focusable\" />\n        <Input placeholder=\"Focusable\" />\n        <Button>Focusable</Button>\n      </div>\n      <Input placeholder=\"Not focusable\" />\n    </>\n  )\n}\n"],"file":"useFocusLock.story.js"}

package/dist/utils/useMutationObserver.js

@@ -21,6 +21,10 @@ var useMutationObserver = function useMutationObserver(_ref) {
   } : _ref$options,
       ref = _ref.ref;
   (0, _react.useEffect)(function () {
+    if (typeof MutationObserver === "undefined") {
+      return;
+    }
+
     if (ref.current) {
       var observer = new MutationObserver(onMutate); // Start observing the target node for configured mutations
 

package/dist/utils/useMutationObserver.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/useMutationObserver.ts"],"names":["useMutationObserver","onMutate","options","attributes","characterData","childList","subtree","ref","current","observer","MutationObserver","observe","disconnect"],"mappings":";;;;;;;AACA;;AAQA;AACA;AACA;AACO,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,OASR;AAAA,MARzBC,QAQyB,QARzBA,QAQyB;AAAA,0BAPzBC,OAOyB;AAAA,MAPzBA,OAOyB,6BAPf;AACRC,IAAAA,UAAU,EAAE,IADJ;AAERC,IAAAA,aAAa,EAAE,IAFP;AAGRC,IAAAA,SAAS,EAAE,IAHH;AAIRC,IAAAA,OAAO,EAAE;AAJD,GAOe;AAAA,MADzBC,GACyB,QADzBA,GACyB;AACzB,wBAAU,YAAM;AACd,QAAIA,GAAG,CAACC,OAAR,EAAiB;AACf,UAAMC,QAAQ,GAAG,IAAIC,gBAAJ,CAAqBT,QAArB,CAAjB,CADe,CAGf;;AACAQ,MAAAA,QAAQ,CAACE,OAAT,CAAiBJ,GAAG,CAACC,OAArB,EAA8BN,OAA9B;AAEA,aAAO,YAAM;AACXO,QAAAA,QAAQ,CAACG,UAAT;AACD,OAFD;AAGD,KAVa,CAWd;;AACD,GAZD,EAYG,CAACX,QAAD,EAAWC,OAAX,CAZH;AAaD,CAvBM","sourcesContent":["import type { MutableRefObject } from \"react\"\nimport { useEffect } from \"react\"\n\ninterface UseMutationObserver {\n  onMutate: MutationCallback\n  options?: MutationObserverInit\n  ref: MutableRefObject<HTMLElement | null>\n}\n\n/**\n * Accepts a ref and calls the `onMutate` callback when mutations are observed.\n */\nexport const useMutationObserver = ({\n  onMutate,\n  options = {\n    attributes: true,\n    characterData: true,\n    childList: true,\n    subtree: true,\n  },\n  ref,\n}: UseMutationObserver) => {\n  useEffect(() => {\n    if (ref.current) {\n      const observer = new MutationObserver(onMutate)\n\n      // Start observing the target node for configured mutations\n      observer.observe(ref.current, options)\n\n      return () => {\n        observer.disconnect()\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [onMutate, options])\n}\n"],"file":"useMutationObserver.js"}
+{"version":3,"sources":["../../src/utils/useMutationObserver.ts"],"names":["useMutationObserver","onMutate","options","attributes","characterData","childList","subtree","ref","MutationObserver","current","observer","observe","disconnect"],"mappings":";;;;;;;AACA;;AAQA;AACA;AACA;AACO,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,OASR;AAAA,MARzBC,QAQyB,QARzBA,QAQyB;AAAA,0BAPzBC,OAOyB;AAAA,MAPzBA,OAOyB,6BAPf;AACRC,IAAAA,UAAU,EAAE,IADJ;AAERC,IAAAA,aAAa,EAAE,IAFP;AAGRC,IAAAA,SAAS,EAAE,IAHH;AAIRC,IAAAA,OAAO,EAAE;AAJD,GAOe;AAAA,MADzBC,GACyB,QADzBA,GACyB;AACzB,wBAAU,YAAM;AACd,QAAI,OAAOC,gBAAP,KAA4B,WAAhC,EAA6C;AAC3C;AACD;;AAED,QAAID,GAAG,CAACE,OAAR,EAAiB;AACf,UAAMC,QAAQ,GAAG,IAAIF,gBAAJ,CAAqBP,QAArB,CAAjB,CADe,CAGf;;AACAS,MAAAA,QAAQ,CAACC,OAAT,CAAiBJ,GAAG,CAACE,OAArB,EAA8BP,OAA9B;AAEA,aAAO,YAAM;AACXQ,QAAAA,QAAQ,CAACE,UAAT;AACD,OAFD;AAGD,KAda,CAed;;AACD,GAhBD,EAgBG,CAACX,QAAD,EAAWC,OAAX,CAhBH;AAiBD,CA3BM","sourcesContent":["import type { MutableRefObject } from \"react\"\nimport { useEffect } from \"react\"\n\ninterface UseMutationObserver {\n  onMutate: MutationCallback\n  options?: MutationObserverInit\n  ref: MutableRefObject<HTMLElement | null>\n}\n\n/**\n * Accepts a ref and calls the `onMutate` callback when mutations are observed.\n */\nexport const useMutationObserver = ({\n  onMutate,\n  options = {\n    attributes: true,\n    characterData: true,\n    childList: true,\n    subtree: true,\n  },\n  ref,\n}: UseMutationObserver) => {\n  useEffect(() => {\n    if (typeof MutationObserver === \"undefined\") {\n      return\n    }\n\n    if (ref.current) {\n      const observer = new MutationObserver(onMutate)\n\n      // Start observing the target node for configured mutations\n      observer.observe(ref.current, options)\n\n      return () => {\n        observer.disconnect()\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [onMutate, options])\n}\n"],"file":"useMutationObserver.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "17.7.2",
+  "version": "17.7.3",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -175,5 +175,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "457386f7444ed5be3058964165411cc4aa67999e"
+  "gitHead": "c5b11add7b8b28ae210473956532c84d318bd947"
 }