@dash-ui/react/dist/esm/index.dev.mjs.map

React components and hooks for dash-ui

{"version":3,"file":"index.dev.mjs","sources":["../../src/index.tsx"],"sourcesContent":["import type {\n  DashThemes,\n  DashTokens,\n  Falsy,\n  StyleCallback,\n  StyleObject,\n  Styles,\n  StyleValue,\n} from \"@dash-ui/styles\";\nimport { compileStyles } from \"@dash-ui/styles\";\nimport useLayoutEffect from \"@react-hook/passive-layout-effect\";\nimport * as React from \"react\";\n\nconst IS_BROWSER = typeof document !== \"undefined\";\nconst useInsertionEffect =\n  typeof React.useInsertionEffect === \"function\"\n    ? React.useInsertionEffect\n    : useLayoutEffect;\n\n/**\n * A component for creating an inline `<style>` tag that is unmounted when\n * the component unmounts.\n *\n * @param root0\n * @param root0.css\n * @param root0.styles\n */\nexport function Inline<Tokens extends DashTokens, Themes extends DashThemes>({\n  styles,\n  css: input,\n}: InlineProps<Tokens, Themes>): JSX.Element | null {\n  const css = styles.one(input).css();\n\n  return !css ? null : (\n    // We don't want data-cache, data-dash props here because\n    // we don't want this to be moved into the head of the document\n    // during SSR hydration\n    <style\n      dangerouslySetInnerHTML={{ __html: css }}\n      nonce={styles.dash.sheet.nonce ? styles.dash.sheet.nonce : void 0}\n    />\n  );\n}\n\nexport interface InlineProps<\n  Tokens extends DashTokens,\n  Themes extends DashThemes\n> {\n  /**\n   * A Dash `styles` instance\n   */\n  styles: Styles<Tokens, Themes>;\n  /**\n   * The CSS you want to inline in the DOM.\n   *\n   * @example\n   * const Component => <Inline css={({color}) => `html { color: ${color.text}; }`}/>\n   */\n  css: string | StyleCallback<Tokens, Themes> | StyleObject;\n}\n\n/**\n * A hook for inserting transient global styles into the DOM. These styles\n * will be injected when the hook mounts and flushed when the hook unmounts.\n *\n * @param styles - A Dash `styles` instance\n * @param value - Global CSS to inject into the DOM and flush when the hook unmounts\n * @param deps - A dependency array that will force the hook to re-insert global styles\n * @example\n * const Component = () => {\n *   const [userFontSize, setUserFontSize] = React.useState('100%')\n *\n *   useGlobal(\n *     `\n *       html {\n *         font-size: ${userFontSize};\n *       }\n *     `,\n *     [userFontSize]\n *   )\n * }\n */\nexport function useGlobal<Tokens extends DashTokens, Themes extends DashThemes>(\n  styles: Styles<Tokens, Themes>,\n  value:\n    | string\n    | StyleCallback<Tokens, Themes>\n    | StyleObject\n    | null\n    | 0\n    | undefined\n    | false,\n  deps?: React.DependencyList\n): void {\n  // inserts global styles into the dom and cleans up its\n  // styles when the component is unmounted\n  useInsertionEffect(\n    () => (value ? styles.insertGlobal(value) : noop),\n    (deps = deps && deps.concat(styles))\n  );\n\n  if (!IS_BROWSER && value) {\n    styles.insertGlobal(value);\n  }\n}\n\n/**\n * A hook for inserting transient CSS tokens into the DOM. These tokens\n * will be injected when the hook mounts and flushed when the hook unmounts.\n *\n * @param styles - A Dash `styles` instance\n * @param value - CSS tokens to inject into the DOM and flush when the hook unmounts\n * @param deps - A dependency array that will force the hook to re-insert tokens\n * @example\n * const Component = () => {\n *   const [userFontSize, setUserFontSize] = React.useState('100%')\n *\n *   useTokens(\n *     styles,\n *     {fontSize: userFontSize},\n *     [userFontSize]\n *   )\n * }\n */\nexport function useTokens<Tokens extends DashTokens, Themes extends DashThemes>(\n  styles: Styles<Tokens, Themes>,\n  value: Parameters<Styles<Tokens, Themes>[\"insertTokens\"]>[0] | Falsy,\n  deps?: React.DependencyList\n): void {\n  useInsertionEffect(\n    () => (value ? styles.insertTokens(value) : noop),\n    (deps = deps && deps.concat(styles))\n  );\n\n  if (!IS_BROWSER && value) {\n    styles.insertTokens(value);\n  }\n}\n\n/**\n * A hook for inserting transient CSS theme tokens into the DOM. These tokens\n * will be injected when the hook mounts and flushed when the hook unmounts.\n *\n * @param styles - A Dash `styles` instance\n * @param value - Themes to inject into the DOM and flush when the hook unmounts\n * @param deps - A dependency array that will force the hook to re-insert themes\n * @example\n * const Component = () => {\n *   const [color, setColor] = React.useState('aliceblue')\n *\n *   useThemes(\n *     styles,\n *     {\n *       dark: {color}\n *     },\n *     [color]\n *   )\n * }\n */\nexport function useThemes<Tokens extends DashTokens, Themes extends DashThemes>(\n  styles: Styles<Tokens, Themes>,\n  value: Parameters<Styles<Tokens, Themes>[\"insertThemes\"]>[0] | Falsy,\n  deps?: React.DependencyList\n): void {\n  useInsertionEffect(\n    () => (value ? styles.insertThemes(value) : noop),\n    (deps = deps && deps.concat(styles))\n  );\n\n  if (!IS_BROWSER && value) {\n    styles.insertThemes(value);\n  }\n}\n\n/**\n * A hook for performantly and reliably inserting CSS into the DOM in React 18 using the\n * `useInsertionEffect` hook.\n *\n * @param styles - A Dash `styles` instance\n * @param classNames - A map of class names to CSS generators\n * @see https://github.com/reactwg/react-18/discussions/110\n * @example\n * ```tsx\n * const classes = useCSS(styles, {\n *  root: styles.one({ display: 'flex' })\n * })\n *\n * return <div className={classes.root}/>\n * ```\n */\nexport function useCSS<\n  ClassNames extends string,\n  Tokens extends DashTokens,\n  Themes extends DashThemes\n>(\n  styles: Styles<Tokens, Themes>,\n  classNames: ClassNamesStyleMap<ClassNames, Tokens, Themes>\n): UseCSSResult<ClassNames> {\n  function insertClasses(): void {\n    for (const className in classNames) {\n      const style = classNames[className];\n\n      if (typeof style === \"function\" && \"css\" in style) {\n        style();\n      } else {\n        styles.cls(style);\n      }\n    }\n  }\n\n  useInsertionEffect(insertClasses);\n\n  if (!IS_BROWSER) {\n    insertClasses();\n  }\n\n  const classes = {} as Record<ClassNames, string>;\n\n  for (const className in classNames) {\n    const style = classNames[className];\n    classes[className] =\n      styles.dash.key +\n      \"-\" +\n      styles.hash(\n        typeof style === \"function\" && \"css\" in style\n          ? style.css()\n          : compileStyles(style, styles.tokens)\n      );\n  }\n\n  return classes;\n}\n\nexport type ClassNamesStyleMap<\n  ClassNames extends string,\n  Tokens extends DashTokens,\n  Themes extends DashThemes\n> = Record<\n  ClassNames,\n  | {\n      (): string;\n      css(): string;\n    }\n  | StyleValue<Tokens, Themes>\n>;\n\nexport type UseCSSResult<ClassNames extends string> = Record<\n  ClassNames,\n  string\n>;\n\nfunction noop(): void {}\n"],"names":["IS_BROWSER","document","useInsertionEffect","React","useLayoutEffect","Inline","styles","css","input","one","__html","dash","sheet","nonce","useGlobal","value","deps","insertGlobal","noop","concat","useTokens","insertTokens","useThemes","insertThemes","useCSS","classNames","insertClasses","className","style","cls","classes","key","hash","compileStyles","tokens"],"mappings":"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"}