grep-components 1.8.2 → 1.9.0

package/dist/index.js

@@ -318,7 +318,7 @@ var Colors = {
     white: '#fff',
 };
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -762,7 +762,7 @@ var processStyleValue$1 = function processStyleValue(key, value) {
 };
 
 if (process.env.NODE_ENV !== 'production') {
-  var contentValuePattern = /(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
+  var contentValuePattern = /(var|attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
   var contentValues = ['normal', 'none', 'initial', 'inherit', 'unset'];
   var oldProcessStyleValue = processStyleValue$1;
   var msPattern = /^-ms-/;
@@ -1047,7 +1047,7 @@ function getRegisteredStyles(registered, registeredStyles, classNames) {
   });
   return rawClassName;
 }
-var insertStyles = function insertStyles(cache, serialized, isStringTag) {
+var registerStyles = function registerStyles(cache, serialized, isStringTag) {
   var className = cache.key + "-" + serialized.name;
 
   if ( // we only need to add the styles to the registered cache if the
@@ -1062,6 +1062,10 @@ var insertStyles = function insertStyles(cache, serialized, isStringTag) {
   isBrowser$3 === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
     cache.registered[className] = serialized.styles;
   }
+};
+var insertStyles = function insertStyles(cache, serialized, isStringTag) {
+  registerStyles(cache, serialized, isStringTag);
+  var className = cache.key + "-" + serialized.name;
 
   if (cache.inserted[serialized.name] === undefined) {
     var stylesForSSR = '';
@@ -1086,7 +1090,8 @@ var insertStyles = function insertStyles(cache, serialized, isStringTag) {
 var emotionUtils_esm = /*#__PURE__*/Object.freeze({
   __proto__: null,
   getRegisteredStyles: getRegisteredStyles,
-  insertStyles: insertStyles
+  insertStyles: insertStyles,
+  registerStyles: registerStyles
 });
 
 var require$$3$1 = /*@__PURE__*/getAugmentedNamespace(emotionUtils_esm);
@@ -3123,14 +3128,14 @@ var getOwnPropertySymbols = Object.getOwnPropertySymbols;
 var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
 var getPrototypeOf = Object.getPrototypeOf;
 var objectPrototype = Object.prototype;
-function hoistNonReactStatics$1(targetComponent, sourceComponent, blacklist) {
+function hoistNonReactStatics$2(targetComponent, sourceComponent, blacklist) {
   if (typeof sourceComponent !== 'string') {
     // don't hoist over string (html) components
     if (objectPrototype) {
       var inheritedComponent = getPrototypeOf(sourceComponent);
 
       if (inheritedComponent && inheritedComponent !== objectPrototype) {
-        hoistNonReactStatics$1(targetComponent, inheritedComponent, blacklist);
+        hoistNonReactStatics$2(targetComponent, inheritedComponent, blacklist);
       }
     }
 
@@ -3160,7 +3165,7 @@ function hoistNonReactStatics$1(targetComponent, sourceComponent, blacklist) {
   return targetComponent;
 }
 
-var hoistNonReactStatics_cjs = hoistNonReactStatics$1;
+var hoistNonReactStatics_cjs = hoistNonReactStatics$2;
 
 // this file isolates this package that is not tree-shakeable
 // and if this module doesn't actually contain any logic of its own
@@ -3170,6 +3175,8 @@ var hoistNonReactStatics = (function (targetComponent, sourceComponent) {
   return hoistNonReactStatics_cjs(targetComponent, sourceComponent);
 });
 
+var hoistNonReactStatics$1 = hoistNonReactStatics;
+
 var isBrowser$1 = typeof document !== 'undefined';
 var hasOwnProperty = {}.hasOwnProperty;
 
@@ -3283,22 +3290,23 @@ function withTheme(Component) {
 
   var WithTheme = /*#__PURE__*/forwardRef(render);
   WithTheme.displayName = "WithTheme(" + componentName + ")";
-  return hoistNonReactStatics(WithTheme, Component);
+  return hoistNonReactStatics$1(WithTheme, Component);
 }
 
+var getLastPart = function getLastPart(functionName) {
+  // The match may be something like 'Object.createEmotionProps' or
+  // 'Loader.prototype.render'
+  var parts = functionName.split('.');
+  return parts[parts.length - 1];
+};
+
 var getFunctionNameFromStackTraceLine = function getFunctionNameFromStackTraceLine(line) {
   // V8
   var match = /^\s+at\s+([A-Za-z0-9$.]+)\s/.exec(line);
-
-  if (match) {
-    // The match may be something like 'Object.createEmotionProps'
-    var parts = match[1].split('.');
-    return parts[parts.length - 1];
-  } // Safari / Firefox
-
+  if (match) return getLastPart(match[1]); // Safari / Firefox
 
   match = /^([A-Za-z0-9$.]+)@/.exec(line);
-  if (match) return match[1];
+  if (match) return getLastPart(match[1]);
   return undefined;
 };
 
@@ -3328,6 +3336,18 @@ var getLabelFromStackTrace = function getLabelFromStackTrace(stackTrace) {
   return undefined;
 };
 
+var isBrowser$1$1 = typeof document !== 'undefined';
+var useInsertionEffect$1 = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : function useInsertionEffect(create) {
+  create();
+};
+function useInsertionEffectMaybe(create) {
+  if (!isBrowser$1$1) {
+    return create();
+  }
+
+  useInsertionEffect$1(create);
+}
+
 var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
 var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';
 var createEmotionProps = function createEmotionProps(type, props) {
@@ -3355,7 +3375,31 @@ var createEmotionProps = function createEmotionProps(type, props) {
   return newProps;
 };
 
-var Noop$1 = function Noop() {
+var Insertion$1 = function Insertion(_ref) {
+  var cache = _ref.cache,
+      serialized = _ref.serialized,
+      isStringTag = _ref.isStringTag;
+  registerStyles(cache, serialized, isStringTag);
+  var rules = useInsertionEffectMaybe(function () {
+    return insertStyles(cache, serialized, isStringTag);
+  });
+
+  if (!isBrowser$1 && rules !== undefined) {
+    var _ref2;
+
+    var serializedNames = serialized.name;
+    var next = serialized.next;
+
+    while (next !== undefined) {
+      serializedNames += ' ' + next.name;
+      next = next.next;
+    }
+
+    return /*#__PURE__*/createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedNames, _ref2.dangerouslySetInnerHTML = {
+      __html: rules
+    }, _ref2.nonce = cache.sheet.nonce, _ref2));
+  }
+
   return null;
 };
 
@@ -3368,7 +3412,7 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
     cssProp = cache.registered[cssProp];
   }
 
-  var type = props[typePropName];
+  var WrappedComponent = props[typePropName];
   var registeredStyles = [cssProp];
   var className = '';
 
@@ -3388,7 +3432,6 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
     }
   }
 
-  var rules = insertStyles(cache, serialized, typeof type === 'string');
   className += cache.key + "-" + serialized.name;
   var newProps = {};
 
@@ -3400,27 +3443,11 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
 
   newProps.ref = ref;
   newProps.className = className;
-  var ele = /*#__PURE__*/createElement(type, newProps);
-  var possiblyStyleElement = /*#__PURE__*/createElement(Noop$1, null);
-
-  if (!isBrowser$1 && rules !== undefined) {
-    var _ref;
-
-    var serializedNames = serialized.name;
-    var next = serialized.next;
-
-    while (next !== undefined) {
-      serializedNames += ' ' + next.name;
-      next = next.next;
-    }
-
-    possiblyStyleElement = /*#__PURE__*/createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedNames, _ref.dangerouslySetInnerHTML = {
-      __html: rules
-    }, _ref.nonce = cache.sheet.nonce, _ref));
-  } // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
-
-
-  return /*#__PURE__*/createElement(Fragment, null, possiblyStyleElement, ele);
+  return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Insertion$1, {
+    cache: cache,
+    serialized: serialized,
+    isStringTag: typeof WrappedComponent === 'string'
+  }), /*#__PURE__*/createElement(WrappedComponent, newProps));
 });
 
 if (process.env.NODE_ENV !== 'production') {
@@ -3429,7 +3456,7 @@ if (process.env.NODE_ENV !== 'production') {
 
 var pkg = {
 	name: "@emotion/react",
-	version: "11.7.1",
+	version: "11.9.0",
 	main: "dist/emotion-react.cjs.js",
 	module: "dist/emotion-react.esm.js",
 	browser: {
@@ -3449,17 +3476,17 @@ var pkg = {
 		"macro.js.flow"
 	],
 	sideEffects: false,
-	author: "mitchellhamilton <mitchell@mitchellhamilton.me>",
+	author: "Emotion Contributors",
 	license: "MIT",
 	scripts: {
 		"test:typescript": "dtslint types"
 	},
 	dependencies: {
 		"@babel/runtime": "^7.13.10",
+		"@emotion/babel-plugin": "^11.7.1",
 		"@emotion/cache": "^11.7.1",
-		"@emotion/serialize": "^1.0.2",
-		"@emotion/sheet": "^1.1.0",
-		"@emotion/utils": "^1.0.0",
+		"@emotion/serialize": "^1.0.3",
+		"@emotion/utils": "^1.1.0",
 		"@emotion/weak-memoize": "^0.2.5",
 		"hoist-non-react-statics": "^3.3.1"
 	},
@@ -3477,15 +3504,16 @@ var pkg = {
 	},
 	devDependencies: {
 		"@babel/core": "^7.13.10",
-		"@emotion/css": "11.7.1",
+		"@emotion/css": "11.9.0",
 		"@emotion/css-prettifier": "1.0.1",
 		"@emotion/server": "11.4.0",
-		"@emotion/styled": "11.6.0",
+		"@emotion/styled": "11.8.1",
 		"@types/react": "^16.9.11",
-		dtslint: "^0.3.0",
+		dtslint: "^4.2.1",
 		"html-tag-names": "^1.1.2",
 		react: "16.14.0",
-		"svg-tag-names": "^1.1.1"
+		"svg-tag-names": "^1.1.1",
+		typescript: "^4.5.5"
 	},
 	repository: "https://github.com/emotion-js/emotion/tree/main/packages/react",
 	publishConfig: {
@@ -3524,6 +3552,7 @@ var jsx = function jsx(type, props) {
   return createElement.apply(null, createElementArgArray);
 };
 
+var useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : useLayoutEffect;
 var warnedAboutCssPropForGlobal = false; // maintain place over rerenders.
 // initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
 // initial client-side render from SSR, use place of hydrating tag
@@ -3574,9 +3603,10 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
 
 
   var sheetRef = useRef();
-  useLayoutEffect(function () {
-    var key = cache.key + "-global";
-    var sheet = new StyleSheet({
+  useInsertionEffect(function () {
+    var key = cache.key + "-global"; // use case of https://github.com/emotion-js/emotion/issues/2675
+
+    var sheet = new cache.sheet.constructor({
       key: key,
       nonce: cache.sheet.nonce,
       container: cache.sheet.container,
@@ -3602,7 +3632,7 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
       sheet.flush();
     };
   }, [cache]);
-  useLayoutEffect(function () {
+  useInsertionEffect(function () {
     var sheetRefCurrent = sheetRef.current;
     var sheet = sheetRefCurrent[0],
         rehydrating = sheetRefCurrent[1];
@@ -3717,14 +3747,41 @@ function merge(registered, css, className) {
   return rawClassName + css(registeredStyles);
 }
 
-var Noop = function Noop() {
+var Insertion = function Insertion(_ref) {
+  var cache = _ref.cache,
+      serializedArr = _ref.serializedArr;
+  var rules = useInsertionEffectMaybe(function () {
+    var rules = '';
+
+    for (var i = 0; i < serializedArr.length; i++) {
+      var res = insertStyles(cache, serializedArr[i], false);
+
+      if (!isBrowser$1 && res !== undefined) {
+        rules += res;
+      }
+    }
+
+    if (!isBrowser$1) {
+      return rules;
+    }
+  });
+
+  if (!isBrowser$1 && rules.length !== 0) {
+    var _ref2;
+
+    return /*#__PURE__*/createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedArr.map(function (serialized) {
+      return serialized.name;
+    }).join(' '), _ref2.dangerouslySetInnerHTML = {
+      __html: rules
+    }, _ref2.nonce = cache.sheet.nonce, _ref2));
+  }
+
   return null;
 };
 
 var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
-  var rules = '';
-  var serializedHashes = '';
   var hasRendered = false;
+  var serializedArr = [];
 
   var css = function css() {
     if (hasRendered && process.env.NODE_ENV !== 'production') {
@@ -3736,21 +3793,9 @@ var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
     }
 
     var serialized = serializeStyles(args, cache.registered);
+    serializedArr.push(serialized); // registration has to happen here as the result of this might get consumed by `cx`
 
-    if (isBrowser$1) {
-      insertStyles(cache, serialized, false);
-    } else {
-      var res = insertStyles(cache, serialized, false);
-
-      if (res !== undefined) {
-        rules += res;
-      }
-    }
-
-    if (!isBrowser$1) {
-      serializedHashes += " " + serialized.name;
-    }
-
+    registerStyles(cache, serialized, false);
     return cache.key + "-" + serialized.name;
   };
 
@@ -3773,18 +3818,10 @@ var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
   };
   var ele = props.children(content);
   hasRendered = true;
-  var possiblyStyleElement = /*#__PURE__*/createElement(Noop, null);
-
-  if (!isBrowser$1 && rules.length !== 0) {
-    var _ref;
-
-    possiblyStyleElement = /*#__PURE__*/createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + " " + serializedHashes.substring(1), _ref.dangerouslySetInnerHTML = {
-      __html: rules
-    }, _ref.nonce = cache.sheet.nonce, _ref));
-  } // Need to return the same number of siblings or else `React.useId` will cause hydration mismatches.
-
-
-  return /*#__PURE__*/createElement(Fragment, null, possiblyStyleElement, ele);
+  return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Insertion, {
+    cache: cache,
+    serializedArr: serializedArr
+  }), ele);
 });
 
 if (process.env.NODE_ENV !== 'production') {
@@ -5943,6 +5980,8 @@ var rafSchd = function rafSchd(fn) {
   return wrapperFn;
 };
 
+var rafSchd$1 = rafSchd;
+
 var isProduction = process.env.NODE_ENV === 'production';
 var spacesAndTabs = /[ \t]{2,}/g;
 var lineStartWithSpaces = /^[ \t]*/gm;
@@ -9271,7 +9310,7 @@ function getScrollListener(_ref) {
     onWindowScroll(getWindowScroll());
   }
 
-  var scheduled = rafSchd(updateScroll);
+  var scheduled = rafSchd$1(updateScroll);
   var binding = getWindowScrollBinding(scheduled);
   var unbind = noop;
 
@@ -10617,8 +10656,8 @@ var scroll$1 = (function (_ref) {
 var createFluidScroller = (function (_ref) {
   var scrollWindow = _ref.scrollWindow,
       scrollDroppable = _ref.scrollDroppable;
-  var scheduleWindowScroll = rafSchd(scrollWindow);
-  var scheduleDroppableScroll = rafSchd(scrollDroppable);
+  var scheduleWindowScroll = rafSchd$1(scrollWindow);
+  var scheduleDroppableScroll = rafSchd$1(scrollDroppable);
   var dragging = null;
 
   var tryScroll = function tryScroll(state) {
@@ -12582,7 +12621,7 @@ function tryStart(_ref3) {
   }
 
   function fluidLift(clientSelection) {
-    var move$1 = rafSchd(function (client) {
+    var move$1 = rafSchd$1(function (client) {
       tryDispatchWhenDragging(function () {
         return move({
           client: client
@@ -13216,7 +13255,7 @@ function useDroppablePublisher(args) {
     memoizedUpdateScroll(scroll.x, scroll.y);
   }, [getClosestScroll, memoizedUpdateScroll]);
   var scheduleScrollUpdate = useMemo(function () {
-    return rafSchd(updateScroll);
+    return rafSchd$1(updateScroll);
   }, [updateScroll]);
   var onClosestScroll = useCallback(function () {
     var dragging = whileDraggingRef.current;