@dash-ui/react
Version:
React components and hooks for dash-ui
210 lines (186 loc) • 6.63 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@dash-ui/styles'), require('react')) :
typeof define === 'function' && define.amd ? define(['exports', '@dash-ui/styles', 'react'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.DashReact = {}, global.Dash, global.React));
})(this, (function (exports, styles, React) { 'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var usePassiveLayoutEffect = React__default["default"][typeof document !== 'undefined' && document.createElement !== void 0 ? 'useLayoutEffect' : 'useEffect'];
var useLayoutEffect = usePassiveLayoutEffect;
var __reactCreateElement__ = React__namespace.createElement;
var IS_BROWSER = typeof document !== "undefined";
var useInsertionEffect = typeof React__namespace.useInsertionEffect === "function" ? React__namespace.useInsertionEffect : useLayoutEffect;
/**
* A component for creating an inline `<style>` tag that is unmounted when
* the component unmounts.
*
* @param root0
* @param root0.css
* @param root0.styles
*/
function Inline(_ref) {
var styles = _ref.styles,
input = _ref.css;
var css = styles.one(input).css();
return !css ? null :
/*#__PURE__*/
// We don't want data-cache, data-dash props here because
// we don't want this to be moved into the head of the document
// during SSR hydration
__reactCreateElement__("style", {
dangerouslySetInnerHTML: {
__html: css
},
nonce: styles.dash.sheet.nonce ? styles.dash.sheet.nonce : void 0
});
}
/**
* A hook for inserting transient global styles into the DOM. These styles
* will be injected when the hook mounts and flushed when the hook unmounts.
*
* @param styles - A Dash `styles` instance
* @param value - Global CSS to inject into the DOM and flush when the hook unmounts
* @param deps - A dependency array that will force the hook to re-insert global styles
* @example
* const Component = () => {
* const [userFontSize, setUserFontSize] = React.useState('100%')
*
* useGlobal(
* `
* html {
* font-size: ${userFontSize};
* }
* `,
* [userFontSize]
* )
* }
*/
function useGlobal(styles, value, deps) {
// inserts global styles into the dom and cleans up its
// styles when the component is unmounted
useInsertionEffect(function () {
return value ? styles.insertGlobal(value) : noop;
}, deps = deps && deps.concat(styles));
if (!IS_BROWSER && value) {
styles.insertGlobal(value);
}
}
/**
* A hook for inserting transient CSS tokens into the DOM. These tokens
* will be injected when the hook mounts and flushed when the hook unmounts.
*
* @param styles - A Dash `styles` instance
* @param value - CSS tokens to inject into the DOM and flush when the hook unmounts
* @param deps - A dependency array that will force the hook to re-insert tokens
* @example
* const Component = () => {
* const [userFontSize, setUserFontSize] = React.useState('100%')
*
* useTokens(
* styles,
* {fontSize: userFontSize},
* [userFontSize]
* )
* }
*/
function useTokens(styles, value, deps) {
useInsertionEffect(function () {
return value ? styles.insertTokens(value) : noop;
}, deps = deps && deps.concat(styles));
if (!IS_BROWSER && value) {
styles.insertTokens(value);
}
}
/**
* A hook for inserting transient CSS theme tokens into the DOM. These tokens
* will be injected when the hook mounts and flushed when the hook unmounts.
*
* @param styles - A Dash `styles` instance
* @param value - Themes to inject into the DOM and flush when the hook unmounts
* @param deps - A dependency array that will force the hook to re-insert themes
* @example
* const Component = () => {
* const [color, setColor] = React.useState('aliceblue')
*
* useThemes(
* styles,
* {
* dark: {color}
* },
* [color]
* )
* }
*/
function useThemes(styles, value, deps) {
useInsertionEffect(function () {
return value ? styles.insertThemes(value) : noop;
}, deps = deps && deps.concat(styles));
if (!IS_BROWSER && value) {
styles.insertThemes(value);
}
}
/**
* A hook for performantly and reliably inserting CSS into the DOM in React 18 using the
* `useInsertionEffect` hook.
*
* @param styles - A Dash `styles` instance
* @param classNames - A map of class names to CSS generators
* @see https://github.com/reactwg/react-18/discussions/110
* @example
* ```tsx
* const classes = useCSS(styles, {
* root: styles.one({ display: 'flex' })
* })
*
* return <div className={classes.root}/>
* ```
*/
function useCSS(styles$1, classNames) {
function insertClasses() {
for (var className in classNames) {
var style = classNames[className];
if (typeof style === "function" && "css" in style) {
style();
} else {
styles$1.cls(style);
}
}
}
useInsertionEffect(insertClasses);
if (!IS_BROWSER) {
insertClasses();
}
var classes = {};
for (var className in classNames) {
var style = classNames[className];
classes[className] = styles$1.dash.key + "-" + styles$1.hash(typeof style === "function" && "css" in style ? style.css() : styles.compileStyles(style, styles$1.tokens));
}
return classes;
}
function noop() {}
exports.Inline = Inline;
exports.useCSS = useCSS;
exports.useGlobal = useGlobal;
exports.useThemes = useThemes;
exports.useTokens = useTokens;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=dash-react.dev.js.map