@dash-ui/react/dist/module/index.js

React components and hooks for dash-ui

import { compileStyles } from "@dash-ui/styles";
import useLayoutEffect from "@react-hook/passive-layout-effect";
import * as React from "react";
var __reactCreateElement__ = React.createElement;
var IS_BROWSER = typeof document !== "undefined";
var useInsertionEffect = typeof React.useInsertionEffect === "function" ? React.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
 */

export 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]
 *   )
 * }
 */
export 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]
 *   )
 * }
 */

export 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]
 *   )
 * }
 */

export 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}/>
 * ```
 */

export function useCSS(styles, classNames) {
  function insertClasses() {
    for (var className in classNames) {
      var style = classNames[className];

      if (typeof style === "function" && "css" in style) {
        style();
      } else {
        styles.cls(style);
      }
    }
  }

  useInsertionEffect(insertClasses);

  if (!IS_BROWSER) {
    insertClasses();
  }

  var classes = {};

  for (var className in classNames) {
    var style = classNames[className];
    classes[className] = styles.dash.key + "-" + styles.hash(typeof style === "function" && "css" in style ? style.css() : compileStyles(style, styles.tokens));
  }

  return classes;
}

function noop() {}