@react-md/core 1.0.0-next.20 → 1.0.0-next.21

package/dist/chip/_chip.scss

@@ -1,3 +1,7 @@
+////
+/// @group chip
+////
+
 @use "sass:color";
 @use "sass:map";
 @use "../utils";
@@ -12,105 +16,288 @@
 @use "../avatar/avatar";
 @use "../progress/progress";
 
+/// Set to true to disable all the chip styles
+/// @type Boolean
 $disable-everything: false !default;
+
+/// Set to true to disable the icon styles within a chip
+/// @type Boolean
 $disable-icon: false !default;
-$disable-avatar: false !default;
-$disable-progress: false !default;
+
+/// Set to true to disable the avatar styles within a chip
+/// @type Boolean
+$disable-avatar: avatar.$disable-everything !default;
+
+/// Set to true to disable the circular progress styles within a chip
+/// @type Boolean
+$disable-progress: progress.$disable-everything or progress.$disable-circular !default;
+
+/// Set to `true` if all `Chip` components have been updated to enable
+/// `disableContentWrap`
+///
+/// @type Boolean
 $disable-content: false !default;
-$disable-solid-theme: $disable-everything !default;
+
+/// Set to `true` if all `Chip` components will only use `theme="outline"`.
+/// @type Boolean
+$disable-solid-theme: false !default;
+
+/// Set to `true` if all `Chip` components will never enable the `raisable`
+/// prop while the `theme="solid"`.
+///
+/// @type Boolean
 $disable-solid-raisable: false !default;
+
+/// Set to `true` if all `Chip` components will never set `theme="outline"`
+/// @type Boolean
 $disable-outline-theme: $disable-everything !default;
+
+/// Set to `true` if all `Chip` components will never enable the `raisable`
+/// prop while the `theme="outline"`.
+///
+/// @type Boolean
 $disable-outline-raisable: false !default;
+
+/// Set to `true` if the `leftAddon` prop will never be provided to the `Chip`
+/// component.
+///
+/// @type Boolean
 $disable-left-addon: false !default;
+
+/// Set to `true` if the `rightAddon` prop will never be provided to the `Chip`
+/// component.
+///
+/// @type Boolean
 $disable-right-addon: false !default;
+
+/// Set to `true` if the `selectedThemed` prop will never be enabled on the
+/// `Chip` component.
+///
+/// @type Boolean
 $disable-selected-theme: false !default;
+
+/// Set to `true` if the `disableIconTransition` will always be enabled for the
+/// `Chip` component
+///
+/// @type Boolean
 $disable-selected-icon-transition: false !default;
 
+/// The `gap` between items in the `Chip`.
+///
+/// @type Number
 $gap: icon.$spacing !default;
+
+/// The default `Chip` height.
+/// @type Number
 $height: 2rem !default;
+
+/// The default `Chip` border radius.
+///
+/// @type Number
 $border-radius: 1rem !default;
+
+/// The default size for icons that are rendered within a `Chip` normally as
+/// the `leftAddon` or `rightAddon` props.
+///
+/// @type Number
 $icon-size: 1.125rem !default;
+
+/// The default size for avatars that are rendered within a `Chip` normally as
+/// the `leftAddon` or `rightAddon` props.
+///
+/// @type Number
 $avatar-size: 1.5rem !default;
+
+/// The default size for circular progress components that are rendered within
+/// a `Chip` normally as the `leftAddon` or `rightAddon` props.
+///
+/// @type Number
 $progress-size: $icon-size !default;
+
+/// The default `progress.$circular-stroke-width` to apply to circular progress
+/// components rendered within a `Chip` normally as the `leftAddon` or
+/// `rightAddon` props.
+///
+/// @type Number
 $progress-width: 12 !default;
+
+/// The default `Chip` typography
+/// @type Map
 $typography: map.merge(
   typography.$base-font-styles,
   typography.$body-2-styles
 ) !default;
+
+/// The default horizontal padding on `Chip`s.
+///
+/// @type Number
 $horizontal-padding: 0.75rem !default;
+
+/// The default vertical padding on `Chip`s.
+///
+/// @type Number
 $vertical-padding: 0 !default;
+
+/// The amount of `padding-left` to apply to the `Chip` if a `leftAddon` prop
+/// was provided.
+///
+/// @type Number
 $addon-left-padding: 0.25rem !default;
+
+/// The amount of `padding-right` to apply to the `Chip` if a `rightAddon` prop
+/// was provided.
+///
+/// @type Number
 $addon-right-padding: 0.5rem !default;
 
-$selected-transition-duration: transition.$linear-duration;
-$selected-transition-timing-function: transition.$linear-timing-function !default;
+/// The background-color to apply when the `themed` prop is enabled.
+///
+/// @type Color
 $theme-background-color: theme.get-swatch(
   theme.$primary-color,
   300,
   false,
   color.adjust(theme.$primary-color, $lightness: -20%)
 ) !default;
+
+/// The text color to apply when the `themed` prop is enabled.
+///
+/// @type Color
 $theme-color: a11y.contrast-color($theme-background-color) !default;
 
+/// The light theme background color for the `theme="solid"`
+/// @type Color
 $solid-light-background-color: colors.$grey-300 !default;
+
+/// The light theme background color for the `theme="solid"` and the `Chip` is
+/// disabled.
+/// @type Color
 $solid-light-disabled-background-color: colors.$grey-100 !default;
+
+/// The light theme text color for the `theme="solid"`
+/// @type Color
 $solid-light-color: a11y.contrast-color($solid-light-background-color) !default;
+
+/// The dark theme background color for the `theme="solid"`
+/// @type Color
 $solid-dark-background-color: if(
   theme.$disable-dark-elevation,
   colors.$grey-900,
   map.get(theme.$dark-elevation-colors, 12)
 ) !default;
+
+/// The dark theme background color for the `theme="solid"` and the `Chip` is
+/// disabled.
+/// @type Color
 $solid-dark-disabled-background-color: color.adjust(
   colors.$grey-900,
   $lightness: 2%
 ) !default;
+
+/// The dark theme text color for the `theme="solid"`
+/// @type Color
 $solid-dark-color: a11y.contrast-color($solid-dark-background-color) !default;
+
+/// The default `theme="solid"` background-color
+/// @type Color
 $solid-background-color: theme.get-default-color(
   $solid-light-background-color,
   $solid-dark-background-color
 ) !default;
+
+/// The default `theme="solid"` disabled background-color
+/// @type Color
 $solid-disabled-background-color: theme.get-default-color(
   $solid-light-disabled-background-color,
   $solid-dark-disabled-background-color
 ) !default;
+
+/// The default `theme="solid"` text color
+/// @type Color
 $solid-color: theme.get-default-color(
   $solid-light-color,
   $solid-dark-color
 ) !default;
+
+/// A number between 0-24 representing the box-shadow elevation when the user
+/// is pressing the `Chip` with a `theme="solid"` and `raisable`.
+///
+/// @type Color
 $solid-raisable-box-shadow-z-value: 4 !default;
+
+/// The raisable transition duration while `theme="solid"`
+/// @type Number
 $solid-raisable-transition-duration: transition.$linear-duration !default;
 
+/// @type Number
 $outline-width: 0.0625rem !default;
+
+/// A number between 0-24 representing the box-shadow elevation when the user
+/// is pressing the `Chip` with a `theme="outline"` and `raisable`.
+///
+/// @type Number
 $outline-raisable-box-shadow-z-value: 8 !default;
+
+/// The box-shadow color to use in light themes when `theme="outline"`
+/// @type Color
 $outline-light-color: colors.$grey-300 !default;
+
+/// The background-color to use in light themes when `theme="outline"`
+/// @type Color
 $outline-light-background-color: theme.$light-theme-surface-color !default;
+
+/// The text color to use in light themes when `theme="outline"`
+/// @type Color
 $outline-light-text-color: a11y.contrast-color(
   $outline-light-background-color
 ) !default;
+
+/// The box-shadow color to use in dark themes when `theme="outline"`
+/// @type Color
 $outline-dark-color: $outline-light-color !default;
+
+/// The background-color to use in dark themes when `theme="outline"`
+/// @type Color
 $outline-dark-background-color: if(
   theme.$disable-dark-elevation,
   theme.$dark-theme-surface-color,
   map.get(theme.$dark-elevation-colors, $outline-raisable-box-shadow-z-value)
 ) !default;
+
+/// The text color to use in dark themes when `theme="outline"`
+/// @type Color
 $outline-dark-text-color: a11y.contrast-color(
   $outline-dark-background-color
 ) !default;
 
+/// The box-shadow color to use when `theme="outline"`
+/// @type Color
 $outline-color: theme.get-default-color(
   $outline-light-color,
   $outline-dark-color
 ) !default;
+
+/// The background-color to use when `theme="outline"`
+/// @type Color
 $outline-background-color: theme.get-default-color(
   $outline-light-background-color,
   $outline-dark-background-color
 ) !default;
+
+/// The text color to use when `theme="outline"`
+/// @type Color
 $outline-text-color: theme.get-default-color(
   $outline-light-text-color,
   $outline-dark-text-color
 ) !default;
+
+/// The raisable transition duration while `theme="outline"`
+/// @type Number
 $outline-raisable-transition-duration: transition.$linear-duration !default;
 
+/// The available configurable css variables and mostly used internally for the
+/// `get-var`, `set-var`, and `use-var` utils.
+/// @type List
 $variables: (
   gap,
   height,
@@ -128,6 +315,9 @@ $variables: (
   outline-text-color
 );
 
+/// @param {String} name - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value
+/// @returns {String} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "chip");
   @if $fallback {
@@ -137,54 +327,74 @@ $variables: (
   @return var(#{$var});
 }
 
+/// @param {String} name - The supported variable name
+/// @param {any} value - The value to set the variable to. Supports `null` which
+/// will just be a no-op.
 @mixin set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($variables, $name, "chip")}: #{$value};
   }
 }
 
+/// @param {String} property - The css property to apply the variable to
+/// @param {String} name [$property] - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value if the variable
+/// has not been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+/// Applies the light the variables based on feature flags
 @mixin use-light-theme {
-  @if not $disable-solid-theme {
-    @include set-var(solid-background-color, $solid-light-background-color);
-    @include set-var(
-      solid-disabled-background-color,
-      $solid-light-disabled-background-color
-    );
-    @include set-var(solid-color, $solid-light-color);
-  }
+  @if not $disable-everything {
+    @if not $disable-solid-theme {
+      @include set-var(solid-background-color, $solid-light-background-color);
+      @include set-var(
+        solid-disabled-background-color,
+        $solid-light-disabled-background-color
+      );
+      @include set-var(solid-color, $solid-light-color);
+    }
 
-  @if not $disable-outline-theme {
-    @if $outline-light-color != $outline-dark-color {
-      @include set-var(outline-color, $outline-light-color);
+    @if not $disable-outline-theme {
+      @if $outline-light-color != $outline-dark-color {
+        @include set-var(outline-color, $outline-light-color);
+      }
+      @include set-var(
+        outline-background-color,
+        $outline-light-background-color
+      );
+      @include set-var(outline-text-color, $outline-light-text-color);
     }
-    @include set-var(outline-background-color, $outline-light-background-color);
-    @include set-var(outline-text-color, $outline-light-text-color);
   }
 }
 
+/// Applies the dark the variables based on feature flags
 @mixin use-dark-theme {
-  @if not $disable-solid-theme {
-    @include set-var(solid-background-color, $solid-dark-background-color);
-    @include set-var(
-      solid-disabled-background-color,
-      $solid-dark-disabled-background-color
-    );
-    @include set-var(solid-color, $solid-dark-color);
-  }
+  @if not $disable-everything {
+    @if not $disable-solid-theme {
+      @include set-var(solid-background-color, $solid-dark-background-color);
+      @include set-var(
+        solid-disabled-background-color,
+        $solid-dark-disabled-background-color
+      );
+      @include set-var(solid-color, $solid-dark-color);
+    }
 
-  @if not $disable-outline-theme {
-    @if $outline-light-color != $outline-dark-color {
-      @include set-var(outline-color, $outline-dark-color);
+    @if not $disable-outline-theme {
+      @if $outline-light-color != $outline-dark-color {
+        @include set-var(outline-color, $outline-dark-color);
+      }
+      @include set-var(
+        outline-background-color,
+        $outline-dark-background-color
+      );
+      @include set-var(outline-text-color, $outline-dark-text-color);
     }
-    @include set-var(outline-background-color, $outline-dark-background-color);
-    @include set-var(outline-text-color, $outline-dark-text-color);
   }
 }
 
+/// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(solid-background-color, $solid-background-color);
@@ -207,6 +417,10 @@ $variables: (
   }
 }
 
+/// Generates all the styles based on feature flags.
+///
+/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
+/// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
     @include utils.optional-layer(chip, $disable-layer) {
@@ -317,7 +531,7 @@ $variables: (
             padding-left: $addon-left-padding;
 
             @include utils.rtl {
-              padding-left: $horizontal-padding;
+              padding-left: get-var(horizontal-padding);
               padding-right: $addon-left-padding;
             }
           }
@@ -329,7 +543,7 @@ $variables: (
 
             @include utils.rtl {
               padding-left: $addon-right-padding;
-              padding-right: $horizontal-padding;
+              padding-right: get-var(horizontal-padding);
             }
           }
         }

package/dist/cssUtils.d.ts

@@ -37,7 +37,7 @@ export type FontStyle = "italic" | "oblique" | "normal";
  * custom font.
  *
  * @see {@link https://www.google.com/search?q=web+safe+fonts | Web Safe Fonts}
- * @see {@link https://www.google.com/search?q=variable+fonts | Variable FOnts}
+ * @see {@link https://www.google.com/search?q=variable+fonts | Variable Fonts}
  * @since 6.0.0 This was `TextWeight` beforehand.
  */
 export type FontWeight = "thin" | "light" | "regular" | "medium" | "bold" | "semi-bold" | "black";

package/dist/cssUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/cssUtils.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\n/**\n * - `primary -> $primary-color`\n * - `secondary -> $secondary-color`\n * - `warning -> $warning-color`\n * - `success -> $success-color`\n * - `error -> $error-color`\n *\n * @since 6.0.0\n */\nexport type ThemeColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"warning\"\n  | \"success\"\n  | \"error\";\n\n/**\n * - `text-primary -> $text-primary-color`\n * - `text-secondary -> $text-secondary-color`\n * - `text-hint -> $text-hint-color`\n * - `text-disabled -> $text-disabled-color`\n *\n * @since 6.0.0\n */\nexport type TextColor =\n  | \"text-primary\"\n  | \"text-secondary\"\n  | \"text-hint\"\n  | \"text-disabled\"\n  | `on-${ThemeColor}`;\n\n/**\n * @since 6.0.0\n */\nexport type OutlineColor = ThemeColor | \"greyscale\" | \"current-color\";\n\n/**\n * @since 6.0.0\n */\nexport type BackgroundColor = ThemeColor | \"surface\" | \"current-color\";\n\nexport type TextAlign = \"left\" | \"center\" | \"right\";\nexport type TextDecoration = \"underline\" | \"overline\" | \"line-through\" | \"none\";\nexport type TextTransform = \"capitalize\" | \"uppercase\" | \"lowercase\";\nexport type FontStyle = \"italic\" | \"oblique\" | \"normal\";\n\n/**\n * The supported css `font-weight` values.\n *\n * Note: You will need to ensure that you are using a web safe font for all the\n * font weights to work, use variable fonts, or load all font weights for your\n * custom font.\n *\n * @see {@link https://www.google.com/search?q=web+safe+fonts | Web Safe Fonts}\n * @see {@link https://www.google.com/search?q=variable+fonts | Variable FOnts}\n * @since 6.0.0 This was `TextWeight` beforehand.\n */\nexport type FontWeight =\n  | \"thin\"\n  | \"light\"\n  | \"regular\"\n  | \"medium\"\n  | \"bold\"\n  | \"semi-bold\"\n  | \"black\";\n\n/**\n * Since the typography within react-md tries to not modify base elements, the\n * default margin applied to heading tags (h1-h6) and paragraph (p) might have\n * large margin that you don't want applied when using this component. You can\n * disable:\n *\n * - only the top margin by setting this prop to `\"bottom\"`\n * - only the bottom margin by setting this prop to `\"top\"`\n * - top and bottom margin by setting this prop to `\"none\"`\n * - or keep the initial behavior: `\"initial\"`\n *\n * @since 6.0.0\n */\nexport type Margin = \"none\" | \"top\" | \"bottom\" | \"centered\";\n\n/** @since 6.0.0 */\nexport type TextOverflow = \"allow\" | \"nowrap\" | \"ellipsis\";\n\n/** @since 6.0.0 */\nexport interface TextCssUtilsOptions {\n  textColor?: ThemeColor | TextColor | null;\n\n  textAlign?: TextAlign;\n\n  textDecoration?: TextDecoration;\n\n  textTransform?: TextTransform;\n\n  fontWeight?: FontWeight;\n\n  fontStyle?: FontStyle;\n\n  /**\n   * This can be used to remove margin from an element (usually typography\n   * elements since the browser applies default margin for those elements).\n   *\n   * @see {@link Margin}\n   */\n  margin?: Margin;\n\n  /**\n   * Set this to `\"nowrap\"` to only prevent line wrap behavior or `\"ellipsis\"`\n   * to also hide additional text with ellipsis.\n   *\n   * @defaultValue `\"allow\"`\n   */\n  textOverflow?: TextOverflow;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface CssUtilsOptions extends TextCssUtilsOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to allow the content to only be visible for screen\n   * readers. Set this to `\"focusable\"` to allow the content to be visible to\n   * screen readers and once focused. Set this to `\"phone\"` to only render the\n   * the content as screen reader only text on phones.\n   *\n   * @defaultValue `false`\n   */\n  srOnly?: boolean | \"focusable\" | \"phone\";\n\n  /**\n   * Set this to `\"current-color\"` to inherit the current text color or a\n   * specific theme color as the outline `box-shadow`.\n   */\n  outlineColor?: OutlineColor;\n\n  /**\n   * When this is defined, a specific theme background-color will be applied\n   * along with updating the text color be either `#000` or `#fff` depending on\n   * which has the highest contrast ratio.\n   */\n  backgroundColor?: BackgroundColor;\n\n  /**\n   * Set this to `true` if the element should act as an interaction surface\n   * which will:\n   * - display a pointer while hovered\n   * - increase the z-index of children to enable higher contrast when\n   *   `core.$interaction-disable-higher-contrast` is not `true`\n   * - add a `::before` pseudo element that will:\n   *   - gain the focus shadow while `:focus`-ed\n   *   - add a background-color while `:hover`-ed\n   *   - show no hover/focus styles while `:disabled` or `[aria-disabled=\"true\"]`\n   *\n   * @defaultValue `false`\n   */\n  surface?: boolean;\n\n  /**\n   * Set this to `\"light\"` or `\"dark\"` to update the hover, focus, press,\n   * selected, and ripple colors for the surface type. `\"light\"` surfaces will\n   * use `#000` while `\"dark\"` will use `#fff`.\n   */\n  surfaceColor?: \"light\" | \"dark\";\n}\n\n/**\n * This is used to apply css utility functions to any element within your\n * application such as:\n * - specific theme colors as background, text, or outline color\n * - removing margin\n * - screen reader visible only text\n * - text-align, text-decoration, text-transform, font-style, font-weight\n * - disable line wrap\n *\n * @since 6.0.0\n */\nexport function cssUtils(options: CssUtilsOptions): string {\n  const {\n    className,\n    srOnly,\n    textColor,\n    outlineColor,\n    backgroundColor,\n    surface,\n    surfaceColor,\n    margin,\n    fontStyle,\n    fontWeight,\n    textAlign,\n    textDecoration,\n    textTransform,\n    textOverflow,\n  } = options;\n\n  const isMarginTop = margin === \"top\";\n  const isTextColor =\n    textColor === \"text-primary\" ||\n    textColor === \"text-secondary\" ||\n    textColor === \"text-hint\" ||\n    textColor === \"text-disabled\";\n\n  return cnb(\n    !backgroundColor && !isTextColor && textColor && `rmd-${textColor}-color`,\n    !backgroundColor && isTextColor && `rmd-${textColor}-color`,\n    backgroundColor && \"rmd-background-container\",\n    backgroundColor &&\n      backgroundColor !== \"current-color\" &&\n      `rmd-${backgroundColor}-container`,\n    outlineColor && \"rmd-outline\",\n    outlineColor && `rmd-${outlineColor}-outline`,\n    (isMarginTop || margin === \"bottom\") &&\n      `rmd-no-margin-${isMarginTop ? \"bottom\" : \"top\"}`,\n    margin === \"none\" && \"rmd-no-margin\",\n    margin === \"centered\" && \"rmd-centered\",\n    textAlign && `rmd-align-${textAlign}`,\n    textDecoration && `rmd-${textDecoration}`,\n    textTransform && `rmd-${textTransform}`,\n    fontStyle && `rmd-${fontStyle}`,\n    fontWeight && `rmd-${fontWeight}`,\n    srOnly && srOnly !== \"phone\" && \"rmd-sr-only\",\n    srOnly === \"phone\" && \"rmd-phone-sr-only\",\n    srOnly === \"focusable\" && \"rmd-sr-only--focusable\",\n    surfaceColor === \"light\" && \"rmd-light-surface\",\n    surfaceColor === \"dark\" && \"rmd-dark-surface\",\n    textOverflow && textOverflow !== \"allow\" && \"rmd-nowrap\",\n    textOverflow === \"ellipsis\" && \"rmd-ellipsis\",\n    surface && \"rmd-interaction-surface\",\n    className\n  );\n}\n"],"names":["cnb","cssUtils","options","className","srOnly","textColor","outlineColor","backgroundColor","surface","surfaceColor","margin","fontStyle","fontWeight","textAlign","textDecoration","textTransform","textOverflow","isMarginTop","isTextColor"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAyKhC;;;;;;;;;;CAUC,GACD,OAAO,SAASC,SAASC,OAAwB;IAC/C,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,YAAY,EACZC,eAAe,EACfC,OAAO,EACPC,YAAY,EACZC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,YAAY,EACb,GAAGd;IAEJ,MAAMe,cAAcP,WAAW;IAC/B,MAAMQ,cACJb,cAAc,kBACdA,cAAc,oBACdA,cAAc,eACdA,cAAc;IAEhB,OAAOL,IACL,CAACO,mBAAmB,CAACW,eAAeb,aAAa,CAAC,IAAI,EAAEA,UAAU,MAAM,CAAC,EACzE,CAACE,mBAAmBW,eAAe,CAAC,IAAI,EAAEb,UAAU,MAAM,CAAC,EAC3DE,mBAAmB,4BACnBA,mBACEA,oBAAoB,mBACpB,CAAC,IAAI,EAAEA,gBAAgB,UAAU,CAAC,EACpCD,gBAAgB,eAChBA,gBAAgB,CAAC,IAAI,EAAEA,aAAa,QAAQ,CAAC,EAC7C,AAACW,CAAAA,eAAeP,WAAW,QAAO,KAChC,CAAC,cAAc,EAAEO,cAAc,WAAW,OAAO,EACnDP,WAAW,UAAU,iBACrBA,WAAW,cAAc,gBACzBG,aAAa,CAAC,UAAU,EAAEA,WAAW,EACrCC,kBAAkB,CAAC,IAAI,EAAEA,gBAAgB,EACzCC,iBAAiB,CAAC,IAAI,EAAEA,eAAe,EACvCJ,aAAa,CAAC,IAAI,EAAEA,WAAW,EAC/BC,cAAc,CAAC,IAAI,EAAEA,YAAY,EACjCR,UAAUA,WAAW,WAAW,eAChCA,WAAW,WAAW,qBACtBA,WAAW,eAAe,0BAC1BK,iBAAiB,WAAW,qBAC5BA,iBAAiB,UAAU,oBAC3BO,gBAAgBA,iBAAiB,WAAW,cAC5CA,iBAAiB,cAAc,gBAC/BR,WAAW,2BACXL;AAEJ"}
+{"version":3,"sources":["../src/cssUtils.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\n/**\n * - `primary -> $primary-color`\n * - `secondary -> $secondary-color`\n * - `warning -> $warning-color`\n * - `success -> $success-color`\n * - `error -> $error-color`\n *\n * @since 6.0.0\n */\nexport type ThemeColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"warning\"\n  | \"success\"\n  | \"error\";\n\n/**\n * - `text-primary -> $text-primary-color`\n * - `text-secondary -> $text-secondary-color`\n * - `text-hint -> $text-hint-color`\n * - `text-disabled -> $text-disabled-color`\n *\n * @since 6.0.0\n */\nexport type TextColor =\n  | \"text-primary\"\n  | \"text-secondary\"\n  | \"text-hint\"\n  | \"text-disabled\"\n  | `on-${ThemeColor}`;\n\n/**\n * @since 6.0.0\n */\nexport type OutlineColor = ThemeColor | \"greyscale\" | \"current-color\";\n\n/**\n * @since 6.0.0\n */\nexport type BackgroundColor = ThemeColor | \"surface\" | \"current-color\";\n\nexport type TextAlign = \"left\" | \"center\" | \"right\";\nexport type TextDecoration = \"underline\" | \"overline\" | \"line-through\" | \"none\";\nexport type TextTransform = \"capitalize\" | \"uppercase\" | \"lowercase\";\nexport type FontStyle = \"italic\" | \"oblique\" | \"normal\";\n\n/**\n * The supported css `font-weight` values.\n *\n * Note: You will need to ensure that you are using a web safe font for all the\n * font weights to work, use variable fonts, or load all font weights for your\n * custom font.\n *\n * @see {@link https://www.google.com/search?q=web+safe+fonts | Web Safe Fonts}\n * @see {@link https://www.google.com/search?q=variable+fonts | Variable Fonts}\n * @since 6.0.0 This was `TextWeight` beforehand.\n */\nexport type FontWeight =\n  | \"thin\"\n  | \"light\"\n  | \"regular\"\n  | \"medium\"\n  | \"bold\"\n  | \"semi-bold\"\n  | \"black\";\n\n/**\n * Since the typography within react-md tries to not modify base elements, the\n * default margin applied to heading tags (h1-h6) and paragraph (p) might have\n * large margin that you don't want applied when using this component. You can\n * disable:\n *\n * - only the top margin by setting this prop to `\"bottom\"`\n * - only the bottom margin by setting this prop to `\"top\"`\n * - top and bottom margin by setting this prop to `\"none\"`\n * - or keep the initial behavior: `\"initial\"`\n *\n * @since 6.0.0\n */\nexport type Margin = \"none\" | \"top\" | \"bottom\" | \"centered\";\n\n/** @since 6.0.0 */\nexport type TextOverflow = \"allow\" | \"nowrap\" | \"ellipsis\";\n\n/** @since 6.0.0 */\nexport interface TextCssUtilsOptions {\n  textColor?: ThemeColor | TextColor | null;\n\n  textAlign?: TextAlign;\n\n  textDecoration?: TextDecoration;\n\n  textTransform?: TextTransform;\n\n  fontWeight?: FontWeight;\n\n  fontStyle?: FontStyle;\n\n  /**\n   * This can be used to remove margin from an element (usually typography\n   * elements since the browser applies default margin for those elements).\n   *\n   * @see {@link Margin}\n   */\n  margin?: Margin;\n\n  /**\n   * Set this to `\"nowrap\"` to only prevent line wrap behavior or `\"ellipsis\"`\n   * to also hide additional text with ellipsis.\n   *\n   * @defaultValue `\"allow\"`\n   */\n  textOverflow?: TextOverflow;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface CssUtilsOptions extends TextCssUtilsOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to allow the content to only be visible for screen\n   * readers. Set this to `\"focusable\"` to allow the content to be visible to\n   * screen readers and once focused. Set this to `\"phone\"` to only render the\n   * the content as screen reader only text on phones.\n   *\n   * @defaultValue `false`\n   */\n  srOnly?: boolean | \"focusable\" | \"phone\";\n\n  /**\n   * Set this to `\"current-color\"` to inherit the current text color or a\n   * specific theme color as the outline `box-shadow`.\n   */\n  outlineColor?: OutlineColor;\n\n  /**\n   * When this is defined, a specific theme background-color will be applied\n   * along with updating the text color be either `#000` or `#fff` depending on\n   * which has the highest contrast ratio.\n   */\n  backgroundColor?: BackgroundColor;\n\n  /**\n   * Set this to `true` if the element should act as an interaction surface\n   * which will:\n   * - display a pointer while hovered\n   * - increase the z-index of children to enable higher contrast when\n   *   `core.$interaction-disable-higher-contrast` is not `true`\n   * - add a `::before` pseudo element that will:\n   *   - gain the focus shadow while `:focus`-ed\n   *   - add a background-color while `:hover`-ed\n   *   - show no hover/focus styles while `:disabled` or `[aria-disabled=\"true\"]`\n   *\n   * @defaultValue `false`\n   */\n  surface?: boolean;\n\n  /**\n   * Set this to `\"light\"` or `\"dark\"` to update the hover, focus, press,\n   * selected, and ripple colors for the surface type. `\"light\"` surfaces will\n   * use `#000` while `\"dark\"` will use `#fff`.\n   */\n  surfaceColor?: \"light\" | \"dark\";\n}\n\n/**\n * This is used to apply css utility functions to any element within your\n * application such as:\n * - specific theme colors as background, text, or outline color\n * - removing margin\n * - screen reader visible only text\n * - text-align, text-decoration, text-transform, font-style, font-weight\n * - disable line wrap\n *\n * @since 6.0.0\n */\nexport function cssUtils(options: CssUtilsOptions): string {\n  const {\n    className,\n    srOnly,\n    textColor,\n    outlineColor,\n    backgroundColor,\n    surface,\n    surfaceColor,\n    margin,\n    fontStyle,\n    fontWeight,\n    textAlign,\n    textDecoration,\n    textTransform,\n    textOverflow,\n  } = options;\n\n  const isMarginTop = margin === \"top\";\n  const isTextColor =\n    textColor === \"text-primary\" ||\n    textColor === \"text-secondary\" ||\n    textColor === \"text-hint\" ||\n    textColor === \"text-disabled\";\n\n  return cnb(\n    !backgroundColor && !isTextColor && textColor && `rmd-${textColor}-color`,\n    !backgroundColor && isTextColor && `rmd-${textColor}-color`,\n    backgroundColor && \"rmd-background-container\",\n    backgroundColor &&\n      backgroundColor !== \"current-color\" &&\n      `rmd-${backgroundColor}-container`,\n    outlineColor && \"rmd-outline\",\n    outlineColor && `rmd-${outlineColor}-outline`,\n    (isMarginTop || margin === \"bottom\") &&\n      `rmd-no-margin-${isMarginTop ? \"bottom\" : \"top\"}`,\n    margin === \"none\" && \"rmd-no-margin\",\n    margin === \"centered\" && \"rmd-centered\",\n    textAlign && `rmd-align-${textAlign}`,\n    textDecoration && `rmd-${textDecoration}`,\n    textTransform && `rmd-${textTransform}`,\n    fontStyle && `rmd-${fontStyle}`,\n    fontWeight && `rmd-${fontWeight}`,\n    srOnly && srOnly !== \"phone\" && \"rmd-sr-only\",\n    srOnly === \"phone\" && \"rmd-phone-sr-only\",\n    srOnly === \"focusable\" && \"rmd-sr-only--focusable\",\n    surfaceColor === \"light\" && \"rmd-light-surface\",\n    surfaceColor === \"dark\" && \"rmd-dark-surface\",\n    textOverflow && textOverflow !== \"allow\" && \"rmd-nowrap\",\n    textOverflow === \"ellipsis\" && \"rmd-ellipsis\",\n    surface && \"rmd-interaction-surface\",\n    className\n  );\n}\n"],"names":["cnb","cssUtils","options","className","srOnly","textColor","outlineColor","backgroundColor","surface","surfaceColor","margin","fontStyle","fontWeight","textAlign","textDecoration","textTransform","textOverflow","isMarginTop","isTextColor"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAyKhC;;;;;;;;;;CAUC,GACD,OAAO,SAASC,SAASC,OAAwB;IAC/C,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,YAAY,EACZC,eAAe,EACfC,OAAO,EACPC,YAAY,EACZC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,cAAc,EACdC,aAAa,EACbC,YAAY,EACb,GAAGd;IAEJ,MAAMe,cAAcP,WAAW;IAC/B,MAAMQ,cACJb,cAAc,kBACdA,cAAc,oBACdA,cAAc,eACdA,cAAc;IAEhB,OAAOL,IACL,CAACO,mBAAmB,CAACW,eAAeb,aAAa,CAAC,IAAI,EAAEA,UAAU,MAAM,CAAC,EACzE,CAACE,mBAAmBW,eAAe,CAAC,IAAI,EAAEb,UAAU,MAAM,CAAC,EAC3DE,mBAAmB,4BACnBA,mBACEA,oBAAoB,mBACpB,CAAC,IAAI,EAAEA,gBAAgB,UAAU,CAAC,EACpCD,gBAAgB,eAChBA,gBAAgB,CAAC,IAAI,EAAEA,aAAa,QAAQ,CAAC,EAC7C,AAACW,CAAAA,eAAeP,WAAW,QAAO,KAChC,CAAC,cAAc,EAAEO,cAAc,WAAW,OAAO,EACnDP,WAAW,UAAU,iBACrBA,WAAW,cAAc,gBACzBG,aAAa,CAAC,UAAU,EAAEA,WAAW,EACrCC,kBAAkB,CAAC,IAAI,EAAEA,gBAAgB,EACzCC,iBAAiB,CAAC,IAAI,EAAEA,eAAe,EACvCJ,aAAa,CAAC,IAAI,EAAEA,WAAW,EAC/BC,cAAc,CAAC,IAAI,EAAEA,YAAY,EACjCR,UAAUA,WAAW,WAAW,eAChCA,WAAW,WAAW,qBACtBA,WAAW,eAAe,0BAC1BK,iBAAiB,WAAW,qBAC5BA,iBAAiB,UAAU,oBAC3BO,gBAAgBA,iBAAiB,WAAW,cAC5CA,iBAAiB,cAAc,gBAC/BR,WAAW,2BACXL;AAEJ"}

package/dist/dialog/Dialog.d.ts

@@ -131,16 +131,14 @@ export type DialogProps = LabelRequiredForA11y<BaseDialogProps>;
  *
  * @example Simple Example
  * ```tsx
- * import {
- *   Button,
- *   Dialog,
- *   DialogHeader,
- *   DialogTitle,
- *   DialogContent,
- *   DialogFooter,
- *   Typography,
- *   useToggle,
- * } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Dialog } from "@react-md/core/dialog/Dialog";
+ * import { DialogContent } from "@react-md/core/dialog/DialogContent";
+ * import { DialogFooter } from "@react-md/core/dialog/DialogFooter";
+ * import { DialogHeader } from "@react-md/core/dialog/DialogHeader";
+ * import { DialogTitle } from "@react-md/core/dialog/DialogTitle";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { useToggle } from "@react-md/core/useToggle";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -175,6 +173,7 @@ export type DialogProps = LabelRequiredForA11y<BaseDialogProps>;
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/dialog | Dialog Demos}
  * @since 6.0.0 The `Dialog` no longer supports focusing elements
  * within once it becomes visible. You must manually add `autoFocus` to a
  * element instead.

package/dist/dialog/Dialog.js

@@ -19,16 +19,14 @@ const noopBool = ()=>false;
  *
  * @example Simple Example
  * ```tsx
- * import {
- *   Button,
- *   Dialog,
- *   DialogHeader,
- *   DialogTitle,
- *   DialogContent,
- *   DialogFooter,
- *   Typography,
- *   useToggle,
- * } from "@react-md/core";
+ * import { Button } from "@react-md/core/button/Button";
+ * import { Dialog } from "@react-md/core/dialog/Dialog";
+ * import { DialogContent } from "@react-md/core/dialog/DialogContent";
+ * import { DialogFooter } from "@react-md/core/dialog/DialogFooter";
+ * import { DialogHeader } from "@react-md/core/dialog/DialogHeader";
+ * import { DialogTitle } from "@react-md/core/dialog/DialogTitle";
+ * import { Typography } from "@react-md/core/typography/Typography";
+ * import { useToggle } from "@react-md/core/useToggle";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -63,6 +61,7 @@ const noopBool = ()=>false;
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/dialog | Dialog Demos}
  * @since 6.0.0 The `Dialog` no longer supports focusing elements
  * within once it becomes visible. You must manually add `autoFocus` to a
  * element instead.

package/dist/dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport {\n  type FocusContainerComponentProps,\n  useFocusContainer,\n} from \"../focus/useFocusContainer.js\";\nimport { Overlay } from \"../overlay/Overlay.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionComponentProps,\n  type TransitionActions,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  NestedDialogProvider,\n  useNestedDialogContext,\n} from \"./NestedDialogProvider.js\";\nimport {\n  DEFAULT_DIALOG_CLASSNAMES,\n  DEFAULT_DIALOG_TIMEOUT,\n  type DialogType,\n  type DialogWidth,\n  dialog,\n  dialogContainer,\n} from \"./styles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nconst noopBool = (): boolean => false;\n\nexport interface BaseDialogProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CSSTransitionComponentProps,\n    TransitionActions,\n    FocusContainerComponentProps {\n  /**\n   * @defaultValue `\"dialog-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * @defaultValue `\"centered\"`\n   */\n  type?: DialogType;\n\n  /**\n   * @see {@link DialogWidth}\n   * @defaultValue `\"auto\"`\n   */\n  width?: DialogWidth;\n\n  /**\n   * @defaultValue `\"dialog\"`\n   */\n  role?: \"dialog\" | \"alertdialog\" | \"menu\" | \"none\";\n\n  /**\n   * This value controls the visibility of the dialog.\n   */\n  visible: boolean;\n\n  /**\n   * This function should set the {@link visible} prop to false to hide the\n   * modal when:\n   * - the {@link modal} and {@link disableEscapeClose} props are `false` and\n   *   the user presses the `\"Escape\"` key.\n   * - The overlay element is clicked\n   */\n  onRequestClose: () => void;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /** @defaultValue `-1` */\n  tabIndex?: number;\n\n  /**\n   * Set this value to `true` if the dialog should behave as a modal which\n   * prevents the modal from being closed by pressing the `\"Escape\"` key or\n   * clicking the overlay. The user **must** click one of the actions within the\n   * dialog instead.\n   *\n   * @defaultValue `false`\n   */\n  modal?: boolean;\n\n  /**\n   * @internal\n   * @defaultValue `false`\n   */\n  fixed?: boolean;\n\n  /**\n   * Set this to `true` if the dialog should no longer use the `Portal`\n   * behavior.\n   *\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * Set this to `true` if you want the page to still be scrollable while the\n   * dialog is visible. This should normally be `true` for popovers/fixed\n   * dialogs.\n   *\n   * @defaultValue `type === \"custom\"`\n   */\n  disableScrollLock?: boolean;\n\n  /**\n   * Set this to `true` to prevent the dialog from being closed when the\n   * `\"Escape\"` key is pressed. This is `true` by default when the {@link modal}\n   * prop is `true`\n   *\n   * @defaultValue `modal`\n   */\n  disableEscapeClose?: boolean;\n\n  /**\n   * Set this to `true` if an overlay should not appear behind the dialog.\n   *\n   * Note: this was changed from `type === \"full-page\"` to `false` so that you\n   * can change between full-page and centered based on media queries. If the\n   * type changes the overlay would end up rendering above the dialog instead of\n   * behind.\n   *\n   * @see {@link overlayHidden}\n   * @defaultValue `false`\n   */\n  disableOverlay?: boolean;\n\n  /**\n   * Set this to `true` if an overlay should be appear behind the dialog but\n   * have an `opacity: 0`. This is useful if you want to prevent other elements\n   * on the page from being clicked while the dialog is visible, but don't want\n   * a dark background. i.e. popovers/fixed dialogs.\n   *\n   * @defaultValue `false`\n   */\n  overlayHidden?: boolean;\n\n  /**\n   * Any additional props that should be passed to the overlay element if it is\n   * rendered.\n   */\n  overlayProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * Any additional props that should be passed to the container element when\n   * the `type === \"centered\"`.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n\n  /**\n   * @see {@link DEFAULT_DIALOG_TIMEOUT}\n   * @defaultValue `DEFAULT_DIALOG_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   * @see {@link DEFAULT_DIALOG_CLASSNAMES}\n   * @defaultValue `DEFAULT_DIALOG_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n\n  /**\n   * Set this to `true` if the `Dialog` should not gain the normal focus box\n   * shadow while it is focused. The `Dialog` should normally only gain focus\n   * when it becomes visible and no child elements have `autoFocus` enabled.\n   *\n   * @since 6.0.0\n   * @defaultValue `type === \"full-page\"`\n   */\n  disableFocusOutline?: boolean;\n}\n\nexport type DialogProps = LabelRequiredForA11y<BaseDialogProps>;\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import {\n *   Button,\n *   Dialog,\n *   DialogHeader,\n *   DialogTitle,\n *   DialogContent,\n *   DialogFooter,\n *   Typography,\n *   useToggle,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const {\n *     toggle,\n *     disable: onRequestClose,\n *     toggled: visible,\n *   } = useToggle(false);\n *\n *   return (\n *     <>\n *       <Button onClick={toggle}>Toggle</Button>\n *       <Dialog\n *         aria-labelledby=\"dialog-title\"\n *         visible={visible}\n *         onRequestClose={onRequestClose}\n *       >\n *         <DialogHeader>\n *           <DialogTitle id=\"dialog-title\">Simple Dialog</DialogTitle>\n *         </DialogHeader>\n *         <DialogContent>\n *           <Typography margin=\"none\">This is some text in a dialog.</Typography>\n *         </DialogContent>\n *         <DialogFooter>\n *           <Button onClick={onRequestClose}>\n *             Close\n *           </Button>\n *         </DialogFooter>\n *       </Dialog>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 The `Dialog` no longer supports focusing elements\n * within once it becomes visible. You must manually add `autoFocus` to a\n * element instead.\n */\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n  function Dialog(props, ref) {\n    const {\n      id: propId,\n      fixed = false,\n      modal = false,\n      role = modal ? \"alertdialog\" : \"dialog\",\n      type = \"centered\",\n      width,\n      tabIndex = -1,\n      visible,\n      onRequestClose,\n      containerProps,\n      temporary = true,\n      className,\n      timeout = DEFAULT_DIALOG_TIMEOUT,\n      classNames = DEFAULT_DIALOG_CLASSNAMES,\n      disableTransition = false,\n      appear = false,\n      enter = true,\n      exit = true,\n      onEnter = noop,\n      onEntering = noop,\n      onEntered = noop,\n      onExit = noop,\n      onExiting = noop,\n      onExited = noop,\n      exitedHidden = true,\n      disableOverlay = false,\n      overlayProps,\n      overlayHidden,\n      onKeyDown = noop,\n      isFocusTypeDisabled = noopBool,\n      disablePortal: propDisablePortal,\n      disableScrollLock = false,\n      disableEscapeClose = modal,\n      disableFocusOutline = type === \"full-page\",\n      children,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"dialog\");\n\n    const ssr = useSsr();\n    const setChildVisible = useNestedDialogContext();\n\n    // this makes it so that as more non-full page dialogs become visible, the\n    // overlay does not become darker as more and more overlays are stacked upon\n    // each other. only the top-most overlay will have and active background\n    // color.\n    const [isChildVisible, setIsChildVisible] = useState(false);\n    const { eventHandlers, transitionOptions } = useFocusContainer({\n      nodeRef: ref,\n      activate: visible,\n      onEntered(appear) {\n        onEntered(appear);\n        // this needs to be called onEnter and onEntered just in case the\n        // transition is disabled\n        setChildVisible(type !== \"full-page\");\n      },\n      onEntering,\n      onExiting,\n      onExited() {\n        onExited();\n        // this needs to be called onExit and onExited just in case the\n        // transition is disabled\n        setChildVisible(false);\n      },\n      disableTransition,\n      onKeyDown(event) {\n        onKeyDown(event);\n        if (\n          event.isPropagationStopped() ||\n          modal ||\n          disableEscapeClose ||\n          event.key !== \"Escape\"\n        ) {\n          return;\n        }\n\n        // prevent parent dialogs from closing as well\n        event.stopPropagation();\n        onRequestClose();\n      },\n      isFocusTypeDisabled,\n    });\n    const { elementProps, stage, rendered, disablePortal } = useCSSTransition({\n      transitionIn: visible,\n      timeout,\n      classNames,\n      className: dialog({\n        type,\n        width,\n        fixed,\n        outline: !disableFocusOutline,\n        disableBoxShadow: isChildVisible,\n        className,\n      }),\n      appear: appear && !disableTransition && !ssr,\n      enter: enter && !disableTransition,\n      exit: exit && !disableTransition,\n      onEnter(appearing) {\n        onEnter(appearing);\n        setChildVisible(type !== \"full-page\");\n      },\n      onExit() {\n        onExit();\n        setChildVisible(false);\n      },\n      temporary,\n      exitedHidden,\n      disablePortal: propDisablePortal,\n      ...transitionOptions,\n    });\n    useScrollLock(!disableScrollLock && visible);\n\n    return (\n      <NestedDialogProvider value={setIsChildVisible}>\n        {!disableOverlay && (\n          <Overlay\n            visible={visible}\n            disableTransition={disableTransition}\n            temporary={temporary}\n            disablePortal={disablePortal}\n            {...overlayProps}\n            onClick={modal ? noop : onRequestClose}\n            clickable={!modal}\n            noOpacity={overlayHidden || isChildVisible}\n          />\n        )}\n        <Portal disabled={disablePortal}>\n          {rendered && (\n            <div\n              {...containerProps}\n              className={dialogContainer({\n                className: containerProps?.className,\n                centered: type === \"centered\",\n                displayNone: !temporary && exitedHidden && stage === \"exited\",\n              })}\n            >\n              <div\n                aria-modal={modal || undefined}\n                {...remaining}\n                {...elementProps}\n                {...eventHandlers}\n                id={id}\n                role={role}\n                tabIndex={tabIndex}\n              >\n                {children}\n              </div>\n            </div>\n          )}\n        </Portal>\n      </NestedDialogProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useState","useSsr","useFocusContainer","Overlay","Portal","useScrollLock","useCSSTransition","useEnsuredId","NestedDialogProvider","useNestedDialogContext","DEFAULT_DIALOG_CLASSNAMES","DEFAULT_DIALOG_TIMEOUT","dialog","dialogContainer","noop","noopBool","Dialog","props","ref","id","propId","fixed","modal","role","type","width","tabIndex","visible","onRequestClose","containerProps","temporary","className","timeout","classNames","disableTransition","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","disableOverlay","overlayProps","overlayHidden","onKeyDown","isFocusTypeDisabled","disablePortal","propDisablePortal","disableScrollLock","disableEscapeClose","disableFocusOutline","children","remaining","ssr","setChildVisible","isChildVisible","setIsChildVisible","eventHandlers","transitionOptions","nodeRef","activate","event","isPropagationStopped","key","stopPropagation","elementProps","stage","rendered","transitionIn","outline","disableBoxShadow","appearing","value","onClick","clickable","noOpacity","disabled","div","centered","displayNone","aria-modal","undefined"],"mappings":"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"}
+{"version":3,"sources":["../../src/dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef, useState } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport {\n  type FocusContainerComponentProps,\n  useFocusContainer,\n} from \"../focus/useFocusContainer.js\";\nimport { Overlay } from \"../overlay/Overlay.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n  type CSSTransitionClassNames,\n  type CSSTransitionComponentProps,\n  type TransitionActions,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport {\n  NestedDialogProvider,\n  useNestedDialogContext,\n} from \"./NestedDialogProvider.js\";\nimport {\n  DEFAULT_DIALOG_CLASSNAMES,\n  DEFAULT_DIALOG_TIMEOUT,\n  type DialogType,\n  type DialogWidth,\n  dialog,\n  dialogContainer,\n} from \"./styles.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nconst noopBool = (): boolean => false;\n\nexport interface BaseDialogProps\n  extends HTMLAttributes<HTMLDivElement>,\n    CSSTransitionComponentProps,\n    TransitionActions,\n    FocusContainerComponentProps {\n  /**\n   * @defaultValue `\"dialog-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * @defaultValue `\"centered\"`\n   */\n  type?: DialogType;\n\n  /**\n   * @see {@link DialogWidth}\n   * @defaultValue `\"auto\"`\n   */\n  width?: DialogWidth;\n\n  /**\n   * @defaultValue `\"dialog\"`\n   */\n  role?: \"dialog\" | \"alertdialog\" | \"menu\" | \"none\";\n\n  /**\n   * This value controls the visibility of the dialog.\n   */\n  visible: boolean;\n\n  /**\n   * This function should set the {@link visible} prop to false to hide the\n   * modal when:\n   * - the {@link modal} and {@link disableEscapeClose} props are `false` and\n   *   the user presses the `\"Escape\"` key.\n   * - The overlay element is clicked\n   */\n  onRequestClose: () => void;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /** @defaultValue `-1` */\n  tabIndex?: number;\n\n  /**\n   * Set this value to `true` if the dialog should behave as a modal which\n   * prevents the modal from being closed by pressing the `\"Escape\"` key or\n   * clicking the overlay. The user **must** click one of the actions within the\n   * dialog instead.\n   *\n   * @defaultValue `false`\n   */\n  modal?: boolean;\n\n  /**\n   * @internal\n   * @defaultValue `false`\n   */\n  fixed?: boolean;\n\n  /**\n   * Set this to `true` if the dialog should no longer use the `Portal`\n   * behavior.\n   *\n   * @defaultValue `false`\n   */\n  disablePortal?: boolean;\n\n  /**\n   * Set this to `true` if you want the page to still be scrollable while the\n   * dialog is visible. This should normally be `true` for popovers/fixed\n   * dialogs.\n   *\n   * @defaultValue `type === \"custom\"`\n   */\n  disableScrollLock?: boolean;\n\n  /**\n   * Set this to `true` to prevent the dialog from being closed when the\n   * `\"Escape\"` key is pressed. This is `true` by default when the {@link modal}\n   * prop is `true`\n   *\n   * @defaultValue `modal`\n   */\n  disableEscapeClose?: boolean;\n\n  /**\n   * Set this to `true` if an overlay should not appear behind the dialog.\n   *\n   * Note: this was changed from `type === \"full-page\"` to `false` so that you\n   * can change between full-page and centered based on media queries. If the\n   * type changes the overlay would end up rendering above the dialog instead of\n   * behind.\n   *\n   * @see {@link overlayHidden}\n   * @defaultValue `false`\n   */\n  disableOverlay?: boolean;\n\n  /**\n   * Set this to `true` if an overlay should be appear behind the dialog but\n   * have an `opacity: 0`. This is useful if you want to prevent other elements\n   * on the page from being clicked while the dialog is visible, but don't want\n   * a dark background. i.e. popovers/fixed dialogs.\n   *\n   * @defaultValue `false`\n   */\n  overlayHidden?: boolean;\n\n  /**\n   * Any additional props that should be passed to the overlay element if it is\n   * rendered.\n   */\n  overlayProps?: HTMLAttributes<HTMLSpanElement>;\n\n  /**\n   * Any additional props that should be passed to the container element when\n   * the `type === \"centered\"`.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n\n  /**\n   * @see {@link DEFAULT_DIALOG_TIMEOUT}\n   * @defaultValue `DEFAULT_DIALOG_TIMEOUT`\n   */\n  timeout?: TransitionTimeout;\n\n  /**\n   * @see {@link DEFAULT_DIALOG_CLASSNAMES}\n   * @defaultValue `DEFAULT_DIALOG_CLASSNAMES`\n   */\n  classNames?: CSSTransitionClassNames;\n\n  /**\n   * Set this to `true` if the `Dialog` should not gain the normal focus box\n   * shadow while it is focused. The `Dialog` should normally only gain focus\n   * when it becomes visible and no child elements have `autoFocus` enabled.\n   *\n   * @since 6.0.0\n   * @defaultValue `type === \"full-page\"`\n   */\n  disableFocusOutline?: boolean;\n}\n\nexport type DialogProps = LabelRequiredForA11y<BaseDialogProps>;\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Dialog } from \"@react-md/core/dialog/Dialog\";\n * import { DialogContent } from \"@react-md/core/dialog/DialogContent\";\n * import { DialogFooter } from \"@react-md/core/dialog/DialogFooter\";\n * import { DialogHeader } from \"@react-md/core/dialog/DialogHeader\";\n * import { DialogTitle } from \"@react-md/core/dialog/DialogTitle\";\n * import { Typography } from \"@react-md/core/typography/Typography\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const {\n *     toggle,\n *     disable: onRequestClose,\n *     toggled: visible,\n *   } = useToggle(false);\n *\n *   return (\n *     <>\n *       <Button onClick={toggle}>Toggle</Button>\n *       <Dialog\n *         aria-labelledby=\"dialog-title\"\n *         visible={visible}\n *         onRequestClose={onRequestClose}\n *       >\n *         <DialogHeader>\n *           <DialogTitle id=\"dialog-title\">Simple Dialog</DialogTitle>\n *         </DialogHeader>\n *         <DialogContent>\n *           <Typography margin=\"none\">This is some text in a dialog.</Typography>\n *         </DialogContent>\n *         <DialogFooter>\n *           <Button onClick={onRequestClose}>\n *             Close\n *           </Button>\n *         </DialogFooter>\n *       </Dialog>\n *     </>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/dialog | Dialog Demos}\n * @since 6.0.0 The `Dialog` no longer supports focusing elements\n * within once it becomes visible. You must manually add `autoFocus` to a\n * element instead.\n */\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n  function Dialog(props, ref) {\n    const {\n      id: propId,\n      fixed = false,\n      modal = false,\n      role = modal ? \"alertdialog\" : \"dialog\",\n      type = \"centered\",\n      width,\n      tabIndex = -1,\n      visible,\n      onRequestClose,\n      containerProps,\n      temporary = true,\n      className,\n      timeout = DEFAULT_DIALOG_TIMEOUT,\n      classNames = DEFAULT_DIALOG_CLASSNAMES,\n      disableTransition = false,\n      appear = false,\n      enter = true,\n      exit = true,\n      onEnter = noop,\n      onEntering = noop,\n      onEntered = noop,\n      onExit = noop,\n      onExiting = noop,\n      onExited = noop,\n      exitedHidden = true,\n      disableOverlay = false,\n      overlayProps,\n      overlayHidden,\n      onKeyDown = noop,\n      isFocusTypeDisabled = noopBool,\n      disablePortal: propDisablePortal,\n      disableScrollLock = false,\n      disableEscapeClose = modal,\n      disableFocusOutline = type === \"full-page\",\n      children,\n      ...remaining\n    } = props;\n    const id = useEnsuredId(propId, \"dialog\");\n\n    const ssr = useSsr();\n    const setChildVisible = useNestedDialogContext();\n\n    // this makes it so that as more non-full page dialogs become visible, the\n    // overlay does not become darker as more and more overlays are stacked upon\n    // each other. only the top-most overlay will have and active background\n    // color.\n    const [isChildVisible, setIsChildVisible] = useState(false);\n    const { eventHandlers, transitionOptions } = useFocusContainer({\n      nodeRef: ref,\n      activate: visible,\n      onEntered(appear) {\n        onEntered(appear);\n        // this needs to be called onEnter and onEntered just in case the\n        // transition is disabled\n        setChildVisible(type !== \"full-page\");\n      },\n      onEntering,\n      onExiting,\n      onExited() {\n        onExited();\n        // this needs to be called onExit and onExited just in case the\n        // transition is disabled\n        setChildVisible(false);\n      },\n      disableTransition,\n      onKeyDown(event) {\n        onKeyDown(event);\n        if (\n          event.isPropagationStopped() ||\n          modal ||\n          disableEscapeClose ||\n          event.key !== \"Escape\"\n        ) {\n          return;\n        }\n\n        // prevent parent dialogs from closing as well\n        event.stopPropagation();\n        onRequestClose();\n      },\n      isFocusTypeDisabled,\n    });\n    const { elementProps, stage, rendered, disablePortal } = useCSSTransition({\n      transitionIn: visible,\n      timeout,\n      classNames,\n      className: dialog({\n        type,\n        width,\n        fixed,\n        outline: !disableFocusOutline,\n        disableBoxShadow: isChildVisible,\n        className,\n      }),\n      appear: appear && !disableTransition && !ssr,\n      enter: enter && !disableTransition,\n      exit: exit && !disableTransition,\n      onEnter(appearing) {\n        onEnter(appearing);\n        setChildVisible(type !== \"full-page\");\n      },\n      onExit() {\n        onExit();\n        setChildVisible(false);\n      },\n      temporary,\n      exitedHidden,\n      disablePortal: propDisablePortal,\n      ...transitionOptions,\n    });\n    useScrollLock(!disableScrollLock && visible);\n\n    return (\n      <NestedDialogProvider value={setIsChildVisible}>\n        {!disableOverlay && (\n          <Overlay\n            visible={visible}\n            disableTransition={disableTransition}\n            temporary={temporary}\n            disablePortal={disablePortal}\n            {...overlayProps}\n            onClick={modal ? noop : onRequestClose}\n            clickable={!modal}\n            noOpacity={overlayHidden || isChildVisible}\n          />\n        )}\n        <Portal disabled={disablePortal}>\n          {rendered && (\n            <div\n              {...containerProps}\n              className={dialogContainer({\n                className: containerProps?.className,\n                centered: type === \"centered\",\n                displayNone: !temporary && exitedHidden && stage === \"exited\",\n              })}\n            >\n              <div\n                aria-modal={modal || undefined}\n                {...remaining}\n                {...elementProps}\n                {...eventHandlers}\n                id={id}\n                role={role}\n                tabIndex={tabIndex}\n              >\n                {children}\n              </div>\n            </div>\n          )}\n        </Portal>\n      </NestedDialogProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useState","useSsr","useFocusContainer","Overlay","Portal","useScrollLock","useCSSTransition","useEnsuredId","NestedDialogProvider","useNestedDialogContext","DEFAULT_DIALOG_CLASSNAMES","DEFAULT_DIALOG_TIMEOUT","dialog","dialogContainer","noop","noopBool","Dialog","props","ref","id","propId","fixed","modal","role","type","width","tabIndex","visible","onRequestClose","containerProps","temporary","className","timeout","classNames","disableTransition","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","disableOverlay","overlayProps","overlayHidden","onKeyDown","isFocusTypeDisabled","disablePortal","propDisablePortal","disableScrollLock","disableEscapeClose","disableFocusOutline","children","remaining","ssr","setChildVisible","isChildVisible","setIsChildVisible","eventHandlers","transitionOptions","nodeRef","activate","event","isPropagationStopped","key","stopPropagation","elementProps","stage","rendered","transitionIn","outline","disableBoxShadow","appearing","value","onClick","clickable","noOpacity","disabled","div","centered","displayNone","aria-modal","undefined"],"mappings":"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"}

package/dist/dialog/DialogContent.d.ts

@@ -6,5 +6,7 @@ export interface DialogContentProps extends HTMLAttributes<HTMLDivElement>, Dial
  * The `DialogContent` component should be used as a child of the `Dialog`
  * component that applies some reasonable default styles. Look at the `Dialog`
  * or `FixedDialog` components for example usage.
+ *
+ * @see {@link https://next.react-md.dev/components/dialog | Dialog Demos}
  */
 export declare const DialogContent: import("react").ForwardRefExoticComponent<DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;