@griffel/react 1.7.3 → 1.7.4

package/LICENSE.md

@@ -0,0 +1,21 @@
+    MIT License
+
+    Copyright (c) Microsoft Corporation.
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE

package/lib/RendererContext.cjs

@@ -0,0 +1,46 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get RendererProvider () {
+        return RendererProvider;
+    },
+    get useRenderer () {
+        return useRenderer;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _core = require("@griffel/core");
+const _react = require("react");
+const _canUseDOM = require("./utils/canUseDOM.cjs");
+/**
+ * @private
+ */ const RendererContext = /*#__PURE__*/ (0, _react.createContext)(/*#__PURE__*/ (0, _core.createDOMRenderer)());
+const RendererProvider = ({ children, renderer, targetDocument })=>{
+    // "rehydrateCache()" can't be called in effects as it needs to be called before any component will be rendered to
+    // avoid double insertion of classes — useMemo runs synchronously before render, useEffect would be too late.
+    // eslint-disable-next-line react-x/use-memo, react-hooks/void-use-memo
+    (0, _react.useMemo)(()=>{
+        if ((0, _canUseDOM.canUseDOM)()) {
+            (0, _core.rehydrateRendererCache)(renderer, targetDocument);
+        }
+    }, [
+        renderer,
+        targetDocument
+    ]);
+    return (0, _jsxruntime.jsx)(RendererContext.Provider, {
+        value: renderer,
+        children: children
+    });
+};
+function useRenderer() {
+    return (0, _react.useContext)(RendererContext);
+} //# sourceMappingURL=RendererContext.js.map

package/lib/TextDirectionContext.cjs

@@ -0,0 +1,33 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get TextDirectionProvider () {
+        return TextDirectionProvider;
+    },
+    get useTextDirection () {
+        return useTextDirection;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+/**
+ * @private
+ */ const TextDirectionContext = /*#__PURE__*/ (0, _react.createContext)('ltr');
+const TextDirectionProvider = ({ children, dir })=>{
+    return (0, _jsxruntime.jsx)(TextDirectionContext.Provider, {
+        value: dir,
+        children: children
+    });
+};
+function useTextDirection() {
+    return (0, _react.useContext)(TextDirectionContext);
+} //# sourceMappingURL=TextDirectionContext.js.map

package/lib/__css.cjs

@@ -0,0 +1,22 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "__css", {
+    enumerable: true,
+    get: function() {
+        return __css;
+    }
+});
+const _core = require("@griffel/core");
+const _TextDirectionContext = require("./TextDirectionContext.cjs");
+function __css(classesMapBySlot) {
+    const getStyles = (0, _core.__css)(classesMapBySlot);
+    return function useClasses() {
+        const dir = (0, _TextDirectionContext.useTextDirection)();
+        return getStyles({
+            dir
+        });
+    };
+} //# sourceMappingURL=__css.js.map

package/lib/__resetCSS.cjs

@@ -0,0 +1,22 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "__resetCSS", {
+    enumerable: true,
+    get: function() {
+        return __resetCSS;
+    }
+});
+const _core = require("@griffel/core");
+const _TextDirectionContext = require("./TextDirectionContext.cjs");
+function __resetCSS(ltrClassName, rtlClassName) {
+    const getStyles = (0, _core.__resetCSS)(ltrClassName, rtlClassName);
+    return function useClasses() {
+        const dir = (0, _TextDirectionContext.useTextDirection)();
+        return getStyles({
+            dir
+        });
+    };
+} //# sourceMappingURL=__resetCSS.js.map

package/lib/__resetStyles.cjs

@@ -0,0 +1,26 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "__resetStyles", {
+    enumerable: true,
+    get: function() {
+        return __resetStyles;
+    }
+});
+const _core = require("@griffel/core");
+const _insertionFactory = require("./insertionFactory.cjs");
+const _RendererContext = require("./RendererContext.cjs");
+const _TextDirectionContext = require("./TextDirectionContext.cjs");
+function __resetStyles(ltrClassName, rtlClassName, cssRules) {
+    const getStyles = (0, _core.__resetStyles)(ltrClassName, rtlClassName, cssRules, _insertionFactory.insertionFactory);
+    return function useClasses() {
+        const dir = (0, _TextDirectionContext.useTextDirection)();
+        const renderer = (0, _RendererContext.useRenderer)();
+        return getStyles({
+            dir,
+            renderer
+        });
+    };
+} //# sourceMappingURL=__resetStyles.js.map

package/lib/__staticCSS.cjs

@@ -0,0 +1,18 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "__staticCSS", {
+    enumerable: true,
+    get: function() {
+        return __staticCSS;
+    }
+});
+const _core = require("@griffel/core");
+function __staticCSS() {
+    const getStyles = (0, _core.__staticCSS)();
+    return function useStaticStyles() {
+        return getStyles();
+    };
+} //# sourceMappingURL=__staticCSS.js.map

package/lib/__staticStyles.cjs

@@ -0,0 +1,23 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "__staticStyles", {
+    enumerable: true,
+    get: function() {
+        return __staticStyles;
+    }
+});
+const _core = require("@griffel/core");
+const _insertionFactory = require("./insertionFactory.cjs");
+const _RendererContext = require("./RendererContext.cjs");
+function __staticStyles(cssRules) {
+    const getStyles = (0, _core.__staticStyles)(cssRules, _insertionFactory.insertionFactory);
+    return function useStaticStyles() {
+        const renderer = (0, _RendererContext.useRenderer)();
+        return getStyles({
+            renderer
+        });
+    };
+} //# sourceMappingURL=__staticStyles.js.map

package/lib/__styles.cjs

@@ -0,0 +1,26 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "__styles", {
+    enumerable: true,
+    get: function() {
+        return __styles;
+    }
+});
+const _core = require("@griffel/core");
+const _insertionFactory = require("./insertionFactory.cjs");
+const _RendererContext = require("./RendererContext.cjs");
+const _TextDirectionContext = require("./TextDirectionContext.cjs");
+function __styles(classesMapBySlot, cssRules) {
+    const getStyles = (0, _core.__styles)(classesMapBySlot, cssRules, _insertionFactory.insertionFactory);
+    return function useClasses() {
+        const dir = (0, _TextDirectionContext.useTextDirection)();
+        const renderer = (0, _RendererContext.useRenderer)();
+        return getStyles({
+            dir,
+            renderer
+        });
+    };
+} //# sourceMappingURL=__styles.js.map

package/lib/index.cjs

@@ -0,0 +1,78 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get RESET () {
+        return _core.RESET;
+    },
+    get RendererProvider () {
+        return _RendererContext.RendererProvider;
+    },
+    get TextDirectionProvider () {
+        return _TextDirectionContext.TextDirectionProvider;
+    },
+    get __css () {
+        return __css.__css;
+    },
+    get __resetCSS () {
+        return __resetCSS.__resetCSS;
+    },
+    get __resetStyles () {
+        return __resetStyles.__resetStyles;
+    },
+    get __staticCSS () {
+        return __staticCSS.__staticCSS;
+    },
+    get __staticStyles () {
+        return __staticStyles.__staticStyles;
+    },
+    get __styles () {
+        return __styles.__styles;
+    },
+    get createDOMRenderer () {
+        return _core.createDOMRenderer;
+    },
+    get makeResetStyles () {
+        return _makeResetStyles.makeResetStyles;
+    },
+    get makeStaticStyles () {
+        return _makeStaticStyles.makeStaticStyles;
+    },
+    get makeStyles () {
+        return _makeStyles.makeStyles;
+    },
+    get mergeClasses () {
+        return _core.mergeClasses;
+    },
+    get renderToStyleElements () {
+        return _renderToStyleElements.renderToStyleElements;
+    },
+    get shorthands () {
+        return _core.shorthands;
+    },
+    get useRenderer_unstable () {
+        return _RendererContext.useRenderer;
+    }
+});
+const _core = require("@griffel/core");
+const _makeStyles = require("./makeStyles.cjs");
+const _makeResetStyles = require("./makeResetStyles.cjs");
+const _makeStaticStyles = require("./makeStaticStyles.cjs");
+const _renderToStyleElements = require("./renderToStyleElements.cjs");
+const _RendererContext = require("./RendererContext.cjs");
+const _TextDirectionContext = require("./TextDirectionContext.cjs");
+const __css = require("./__css.cjs");
+const __styles = require("./__styles.cjs");
+const __resetCSS = require("./__resetCSS.cjs");
+const __resetStyles = require("./__resetStyles.cjs");
+const __staticCSS = require("./__staticCSS.cjs");
+const __staticStyles = require("./__staticStyles.cjs");
+ //# sourceMappingURL=index.js.map

package/lib/insertionFactory.cjs

@@ -0,0 +1,33 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "insertionFactory", {
+    enumerable: true,
+    get: function() {
+        return insertionFactory;
+    }
+});
+const _canUseDOM = require("./utils/canUseDOM.cjs");
+const _useInsertionEffect = require("./useInsertionEffect.cjs");
+const insertionFactory = ()=>{
+    const insertionCache = {};
+    return function insert(renderer, cssRules) {
+        // Even if `useInsertionEffect` is available, we can use it on a client only as it will not be executed in SSR
+        if (_useInsertionEffect.useInsertionEffect && (0, _canUseDOM.canUseDOM)()) {
+            // eslint-disable-next-line react-x/rules-of-hooks
+            (0, _useInsertionEffect.useInsertionEffect)(()=>{
+                renderer.insertCSSRules(cssRules);
+            }, [
+                renderer,
+                cssRules
+            ]);
+            return;
+        }
+        if (insertionCache[renderer.id] === undefined) {
+            renderer.insertCSSRules(cssRules);
+            insertionCache[renderer.id] = true;
+        }
+    };
+}; //# sourceMappingURL=insertionFactory.js.map

package/lib/makeResetStyles.cjs

@@ -0,0 +1,35 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "makeResetStyles", {
+    enumerable: true,
+    get: function() {
+        return makeResetStyles;
+    }
+});
+const _core = require("@griffel/core");
+const _insertionFactory = require("./insertionFactory.cjs");
+const _RendererContext = require("./RendererContext.cjs");
+const _TextDirectionContext = require("./TextDirectionContext.cjs");
+const _isInsideComponent = require("./utils/isInsideComponent.cjs");
+function makeResetStyles(styles) {
+    const getStyles = (0, _core.makeResetStyles)(styles, _insertionFactory.insertionFactory);
+    if (process.env.NODE_ENV !== 'production') {
+        if ((0, _isInsideComponent.isInsideComponent)()) {
+            throw new Error([
+                "makeResetStyles(): this function cannot be called in component's scope.",
+                'All makeResetStyles() calls should be top level i.e. in a root scope of a file.'
+            ].join(' '));
+        }
+    }
+    return function useClassName() {
+        const dir = (0, _TextDirectionContext.useTextDirection)();
+        const renderer = (0, _RendererContext.useRenderer)();
+        return getStyles({
+            dir,
+            renderer
+        });
+    };
+} //# sourceMappingURL=makeResetStyles.js.map

package/lib/makeStaticStyles.cjs

@@ -0,0 +1,28 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "makeStaticStyles", {
+    enumerable: true,
+    get: function() {
+        return makeStaticStyles;
+    }
+});
+const _core = require("@griffel/core");
+const _insertionFactory = require("./insertionFactory.cjs");
+const _RendererContext = require("./RendererContext.cjs");
+function makeStaticStyles(styles) {
+    const getStyles = (0, _core.makeStaticStyles)(styles, _insertionFactory.insertionFactory);
+    if (process.env.NODE_ENV === 'test') {
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        return ()=>{};
+    }
+    return function useStaticStyles() {
+        const renderer = (0, _RendererContext.useRenderer)();
+        const options = {
+            renderer
+        };
+        return getStyles(options);
+    };
+} //# sourceMappingURL=makeStaticStyles.js.map

package/lib/makeStyles.cjs

@@ -0,0 +1,35 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "makeStyles", {
+    enumerable: true,
+    get: function() {
+        return makeStyles;
+    }
+});
+const _core = require("@griffel/core");
+const _insertionFactory = require("./insertionFactory.cjs");
+const _RendererContext = require("./RendererContext.cjs");
+const _TextDirectionContext = require("./TextDirectionContext.cjs");
+const _isInsideComponent = require("./utils/isInsideComponent.cjs");
+function makeStyles(stylesBySlots) {
+    const getStyles = (0, _core.makeStyles)(stylesBySlots, _insertionFactory.insertionFactory);
+    if (process.env.NODE_ENV !== 'production') {
+        if ((0, _isInsideComponent.isInsideComponent)()) {
+            throw new Error([
+                "makeStyles(): this function cannot be called in component's scope.",
+                'All makeStyles() calls should be top level i.e. in a root scope of a file.'
+            ].join(' '));
+        }
+    }
+    return function useClasses() {
+        const dir = (0, _TextDirectionContext.useTextDirection)();
+        const renderer = (0, _RendererContext.useRenderer)();
+        return getStyles({
+            dir,
+            renderer
+        });
+    };
+} //# sourceMappingURL=makeStyles.js.map

package/lib/renderToStyleElements.cjs

@@ -0,0 +1,50 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderToStyleElements", {
+    enumerable: true,
+    get: function() {
+        return renderToStyleElements;
+    }
+});
+const _core = require("@griffel/core");
+const _react = require("react");
+function renderToStyleElements(renderer) {
+    const stylesheets = Object.values(renderer.stylesheets)// first sort: bucket by order [data-priority]
+    .sort((a, b)=>{
+        return Number(a.elementAttributes['data-priority']) - Number(b.elementAttributes['data-priority']);
+    })// second sort: bucket by bucket name
+    .sort((a, b)=>{
+        return _core.styleBucketOrdering.indexOf(a.bucketName) - _core.styleBucketOrdering.indexOf(b.bucketName);
+    })// third sort: media queries
+    .sort((a, b)=>{
+        const mediaA = a.elementAttributes['media'];
+        const mediaB = b.elementAttributes['media'];
+        if (mediaA && mediaB) {
+            return renderer.compareMediaQueries(mediaA, mediaB);
+        }
+        if (mediaA || mediaB) {
+            return mediaA ? 1 : -1;
+        }
+        return 0;
+    });
+    return stylesheets.map((stylesheet)=>{
+        const cssRules = stylesheet.cssRules();
+        // don't want to create any empty style elements
+        if (!cssRules.length) {
+            return null;
+        }
+        return (0, _react.createElement)('style', {
+            key: stylesheet.bucketName,
+            // TODO: support "nonce"
+            // ...renderer.styleNodeAttributes,
+            ...stylesheet.elementAttributes,
+            'data-make-styles-rehydration': 'true',
+            dangerouslySetInnerHTML: {
+                __html: cssRules.join('')
+            }
+        });
+    }).filter(Boolean);
+} //# sourceMappingURL=renderToStyleElements.js.map

package/lib/useInsertionEffect.cjs

@@ -0,0 +1,20 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useInsertionEffect", {
+    enumerable: true,
+    get: function() {
+        return useInsertionEffect;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const useInsertionEffect = // @ts-expect-error Hack to make sure that `useInsertionEffect` will not cause bundling issues in older React versions
+// eslint-disable-next-line no-useless-concat
+_react.default['useInsertion' + 'Effect'] ? _react.default['useInsertion' + 'Effect'] : undefined; //# sourceMappingURL=useInsertionEffect.js.map

package/lib/utils/canUseDOM.cjs

@@ -0,0 +1,17 @@
+/**
+ * Verifies if an application can use DOM.
+ *
+ * @internal
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "canUseDOM", {
+    enumerable: true,
+    get: function() {
+        return canUseDOM;
+    }
+});
+function canUseDOM() {
+    return typeof window !== 'undefined' && !!(window.document && window.document.createElement);
+} //# sourceMappingURL=canUseDOM.js.map

package/lib/utils/isInsideComponent.cjs

@@ -0,0 +1,46 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "isInsideComponent", {
+    enumerable: true,
+    get: function() {
+        return isInsideComponent;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function getDispatcher() {
+    try {
+        return _react.default[''.concat('__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE')].H;
+    } catch  {
+    // React 19+
+    }
+    try {
+        return _react.default[''.concat('__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')].ReactCurrentDispatcher.current;
+    } catch  {
+    // React 18 and below
+    }
+}
+function isInsideComponent() {
+    // React 18 always logs errors if a dispatcher is not present:
+    // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36
+    try {
+        const dispatcher = getDispatcher();
+        // Before any React component was rendered "dispatcher" will be "null"
+        if (dispatcher === null || dispatcher === undefined) {
+            return false;
+        }
+        // A check with hooks call (i.e. call "React.useContext()" outside a component) will always produce errors, but
+        // a call on the dispatcher wont
+        dispatcher.useContext({});
+        return true;
+    } catch  {
+        return false;
+    }
+} //# sourceMappingURL=isInsideComponent.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@griffel/react",
-  "version": "1.7.3",
+  "version": "1.7.4",
   "description": "React implementation of Atomic CSS-in-JS",
   "license": "MIT",
   "repository": {
@@ -27,10 +27,10 @@
     }
   },
   "dependencies": {
-    "@griffel/core": "^1.21.1",
+    "@griffel/core": "^1.21.2",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
     "react": ">=16.14.0 <20.0.0"
   }
-}
+}

package/src/RendererContext.d.ts

@@ -0,0 +1,24 @@
+import type { GriffelRenderer } from '@griffel/core';
+import { type FC, type ReactNode } from 'react';
+export interface RendererProviderProps {
+    /** An instance of Griffel renderer. */
+    renderer: GriffelRenderer;
+    /**
+     * Document used to insert CSS variables to head
+     */
+    targetDocument?: Document;
+    /**
+     * Content wrapped by the RendererProvider
+     */
+    children: ReactNode;
+}
+/**
+ * @public
+ */
+export declare const RendererProvider: FC<RendererProviderProps>;
+/**
+ * Returns an instance of current makeStyles() renderer.
+ *
+ * @private Exported as "useRenderer_unstable" use it on own risk. Can be changed or removed without a notice.
+ */
+export declare function useRenderer(): GriffelRenderer;