@react-md/core 1.0.0-next.1 → 1.0.0-next.3

package/dist/tree/_tree.scss

@@ -6,13 +6,14 @@
 @use "../typography/typography";
 @use "../interaction/interaction";
 
+$disable-everything: false !default;
 $disable-expander-left: false !default;
 $disable-expander-left-as-media: false !default;
 $disable-expander-left-as-media-offset: false !default;
 $disable-selected-background-color: false !default;
 
-$padding-incrementor: list.$item-horizontal-padding * 1.5 !default;
-$padding-base: list.get-var(item-keyline) !default;
+$item-padding-base: list.$item-horizontal-padding !default;
+$item-padding-incrementor: list.$item-horizontal-padding * 1.5 !default;
 $expander-right-from: icon.$rotate-from !default;
 $expander-right-to: 90deg !default;
 $expander-left-from: 0deg !default;
@@ -22,153 +23,152 @@ $selected-styles: (
   font-weight: typography.$font-weight-bold,
 ) !default;
 
-$var-lookup: (
-  depth: (
-    var: --rmd-tree-depth,
-    value: -1,
-  ),
-  item-padding: (
-    var: --rmd-tree-item-padding,
-    value: 0,
-  ),
-  padding-base: (
-    var: --rmd-tree-item-padding-base,
-    value: $padding-base,
-  ),
-  padding-incrementor: (
-    var: --rmd-tree-item-padding-incrementor,
-    value: $padding-incrementor,
-  ),
-);
+$variables: (depth, item-padding, item-padding-base, item-padding-incrementor);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "tree var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "tree");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "tree var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "tree")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
-@mixin styles {
-  .rmd-tree {
-    display: block;
-    height: 100%;
-    outline-style: none;
-    overflow: auto;
-    // this is mostly for firefox. moving the mouse even 1px while clicking will
-    // select the current item and all items to the tree root
-    user-select: none;
-    width: 100%;
+// must be defined after the `get-var` function
+$item-padding: calc(
+  get-var(depth) * get-var(item-padding-incrementor) +
+    get-var(item-padding-base)
+) !default;
+
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(depth, 0);
+    @include set-var(item-padding, 0);
+    @include set-var(item-padding-base, $item-padding-base);
+    @include set-var(item-padding-incrementor, $item-padding-incrementor);
   }
+}
 
-  .rmd-tree-item {
-    @include icon.set-var(rotate-from, $expander-right-from);
-    @include icon.set-var(rotate-to, $expander-right-to);
-    @include set-var(
-      item-padding,
-      calc(
-        get-var(depth) * get-var(padding-incrementor) + get-var(padding-base)
-      )
-    );
-
-    list-style: none;
-
-    @if not $disable-expander-left {
-      &--expander-left {
-        @include icon.set-var(rotate-from, $expander-left-from);
-        @include icon.set-var(rotate-to, $expander-left-to);
-      }
+@mixin styles {
+  @if not $disable-everything {
+    .rmd-tree {
+      display: block;
+      height: 100%;
+      outline-style: none;
+      overflow: auto;
+      // this is mostly for firefox. moving the mouse even 1px while clicking will
+      // select the current item and all items to the tree root
+      user-select: none;
+      width: 100%;
     }
 
-    &__content {
-      &--disabled {
-        cursor: auto;
+    .rmd-tree-item {
+      @include icon.set-var(rotate-from, $expander-right-from);
+      @include icon.set-var(rotate-to, $expander-right-to);
+      @include set-var(item-padding, $item-padding);
 
-        &:hover::before {
-          @include interaction.set-var(background-color, transparent);
-        }
-      }
+      list-style: none;
 
-      &--link {
-        color: inherit;
-        text-decoration: none;
+      @if not $disable-expander-left {
+        &--expander-left {
+          @include icon.set-var(rotate-from, $expander-left-from);
+          @include icon.set-var(rotate-to, $expander-left-to);
+        }
       }
 
-      &--padded {
+      &__content {
         @include utils.auto-rtl(
           padding-left,
           get-var(item-padding),
           list.get-var(item-horizontal-padding)
         );
-      }
 
-      &--focused::before {
-        .rmd-tree:focus-within & {
-          @include utils.keyboard-only {
-            @include interaction.focus-styles;
+        &--disabled {
+          cursor: auto;
+
+          &:hover::before {
+            @include interaction.set-var(background-color, transparent);
+          }
+        }
+
+        &--link {
+          color: inherit;
+          text-decoration: none;
+        }
+
+        &--focused::before {
+          // Note: Clicking an item and then using the keyboard to move focus
+          // will **not** show the focus outline so might not be ideal. the tree
+          // must be re-focused after a `Tab` keypress for it to appear again
+          @if utils.$disable-focus-visible {
+            .rmd-tree:focus-within & {
+              @include utils.keyboard-only {
+                @include interaction.focus-styles;
+              }
+            }
+          } @else {
+            .rmd-tree:focus-visible & {
+              @include interaction.focus-styles;
+            }
           }
         }
-      }
 
-      @if $selected-styles {
-        &--selected {
-          @if not $disable-selected-background-color {
-            @include interaction.set-var(
-              background-color,
-              interaction.get-var(selected-background-color)
-            );
-
-            @include utils.touch-only {
-              &:hover::before {
-                @include interaction.set-var(
-                  background-color,
-                  interaction.get-var(selected-background-color)
-                );
+        @if $selected-styles {
+          &--selected {
+            @if not $disable-selected-background-color {
+              @include interaction.set-var(
+                background-color,
+                interaction.get-var(selected-background-color)
+              );
+
+              @include utils.touch-only {
+                &:hover::before {
+                  @include interaction.set-var(
+                    background-color,
+                    interaction.get-var(selected-background-color)
+                  );
+                }
               }
             }
+            @include utils.map-to-styles($selected-styles);
           }
-          @include utils.map-to-styles($selected-styles);
         }
       }
-    }
 
-    @if not $disable-expander-left-as-media {
-      &__media {
-        align-items: center;
-        display: flex;
-        justify-content: space-between;
+      @if not $disable-expander-left-as-media {
+        &__media {
+          align-items: center;
+          display: flex;
+          justify-content: space-between;
 
-        @if not $disable-expander-left-as-media-offset {
-          &--single {
-            justify-content: flex-end;
+          @if not $disable-expander-left-as-media-offset {
+            &--single {
+              justify-content: flex-end;
+            }
           }
         }
       }
     }
-  }
 
-  .rmd-tree-group {
-    background-color: inherit;
-    color: inherit;
-    font-size: inherit;
-    line-height: inherit;
+    .rmd-tree-group {
+      background-color: inherit;
+      color: inherit;
+      font-size: inherit;
+      line-height: inherit;
 
-    // remove the list padding to make it more condensed
-    padding-bottom: 0;
-    padding-top: 0;
+      // remove the list padding to make it more condensed
+      padding-bottom: 0;
+      padding-top: 0;
+    }
   }
 }

package/dist/tree/styles.d.ts

@@ -37,12 +37,6 @@ export interface TreeItemContentClassNameOptions extends InternalListItemClassNa
      * @defaultValue `false`
      */
     link?: boolean;
-    /**
-     *
-     *
-     * @defaultValue `false`
-     */
-    padded?: boolean;
     /**
      * Set this to `true` when the tree item is the current keyboard focus with
      * `aria-activedescendant`. This will apply the focus styles only while the

package/dist/tree/styles.js

@@ -28,10 +28,9 @@ const treeGroupStyles = bem("rmd-tree-group");
 /**
  * @remarks \@since 6.0.0
  */ export function treeItemContent(options = {}) {
-    const { className, link = false, padded = false, focused, selected, disabled = false, ...remaining } = options;
+    const { className, link = false, focused, selected, disabled = false, ...remaining } = options;
     return cnb(treeItemStyles("content", {
         link,
-        padded,
         focused,
         selected,
         disabled

package/dist/tree/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tree/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport type { InternalListItemClassNameOptions } from \"../list/listItemStyles.js\";\nimport { listItem } from \"../list/listItemStyles.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst treeStyles = bem(\"rmd-tree\");\nconst treeItemStyles = bem(\"rmd-tree-item\");\nconst treeGroupStyles = bem(\"rmd-tree-group\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface TreeClassNameOptions {\n  className?: string;\n}\n\n/**\n * Apply the `className`s for a tree component. This will be type-safe if using\n * typescript.\n *\n * @remarks \\@since 6.0.0\n */\nexport function tree(options: TreeClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(treeStyles(), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface TreeItemClassNameOptions {\n  className?: string;\n  expander?: boolean;\n\n  /**\n   * Settings this to `true` will update the styles for the expander icon within\n   * the tree item to rotate `down -> right` instead of `down -> left`.\n   *\n   * @defaultValue `false`\n   */\n  expanderLeft?: boolean;\n}\n\n/**\n * Apply the `className`s for a tree item component. This will be type-safe if\n * using typescript.\n *\n * @remarks \\@since 6.0.0\n */\nexport function treeItem(options: TreeItemClassNameOptions = {}): string {\n  const { className, expander = false, expanderLeft = false } = options;\n\n  return cnb(\n    treeItemStyles({\n      \"expander-left\": expander && expanderLeft,\n      \"expander-right\": expander && !expanderLeft,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface TreeItemContentClassNameOptions\n  extends InternalListItemClassNameOptions {\n  /**\n   * Set this\n   *\n   * @defaultValue `false`\n   */\n  link?: boolean;\n\n  /**\n   *\n   *\n   * @defaultValue `false`\n   */\n  padded?: boolean;\n\n  /**\n   * Set this to `true` when the tree item is the current keyboard focus with\n   * `aria-activedescendant`. This will apply the focus styles only while the\n   * parent tree component is focused and the user is in keyboard mode.\n   *\n   *\n   * @defaultValue `false`\n   */\n  focused?: boolean;\n\n  /**\n   * Set this to `true` hen the tree item has been selected by the user. The\n   * default styles just\n   *\n   * @defaultValue `false`\n   */\n  selected?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function treeItemContent(\n  options: TreeItemContentClassNameOptions = {}\n): string {\n  const {\n    className,\n    link = false,\n    padded = false,\n    focused,\n    selected,\n    disabled = false,\n    ...remaining\n  } = options;\n\n  return cnb(\n    treeItemStyles(\"content\", {\n      link,\n      padded,\n      focused,\n      selected,\n      disabled,\n    }),\n    listItem({\n      className,\n      disabled,\n      ...remaining,\n    })\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TreeItemMediaClassNameOptions {\n  className?: string;\n  isLeafNode: boolean;\n  isMediaLeftAddon: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function treeItemMedia(options: TreeItemMediaClassNameOptions): string {\n  const { isLeafNode, isMediaLeftAddon, className } = options;\n\n  return cnb(\n    isMediaLeftAddon && treeItemStyles(\"media\", { single: isLeafNode }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface TreeGroupClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function treeGroup(options: TreeGroupClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(treeGroupStyles(), className);\n}\n"],"names":["cnb","listItem","bem","treeStyles","treeItemStyles","treeGroupStyles","tree","options","className","treeItem","expander","expanderLeft","treeItemContent","link","padded","focused","selected","disabled","remaining","treeItemMedia","isLeafNode","isMediaLeftAddon","single","treeGroup"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,4BAA4B;AACrD,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,aAAaD,IAAI;AACvB,MAAME,iBAAiBF,IAAI;AAC3B,MAAMG,kBAAkBH,IAAI;AAO5B;;;;;CAKC,GACD,OAAO,SAASI,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOP,IAAIG,cAAcK;AAC3B;AAgBA;;;;;CAKC,GACD,OAAO,SAASC,SAASF,UAAoC,CAAC,CAAC;IAC7D,MAAM,EAAEC,SAAS,EAAEE,WAAW,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGJ;IAE9D,OAAOP,IACLI,eAAe;QACb,iBAAiBM,YAAYC;QAC7B,kBAAkBD,YAAY,CAACC;IACjC,IACAH;AAEJ;AAsCA;;CAEC,GACD,OAAO,SAASI,gBACdL,UAA2C,CAAC,CAAC;IAE7C,MAAM,EACJC,SAAS,EACTK,OAAO,KAAK,EACZC,SAAS,KAAK,EACdC,OAAO,EACPC,QAAQ,EACRC,WAAW,KAAK,EAChB,GAAGC,WACJ,GAAGX;IAEJ,OAAOP,IACLI,eAAe,WAAW;QACxBS;QACAC;QACAC;QACAC;QACAC;IACF,IACAhB,SAAS;QACPO;QACAS;QACA,GAAGC,SAAS;IACd;AAEJ;AAWA;;CAEC,GACD,OAAO,SAASC,cAAcZ,OAAsC;IAClE,MAAM,EAAEa,UAAU,EAAEC,gBAAgB,EAAEb,SAAS,EAAE,GAAGD;IAEpD,OAAOP,IACLqB,oBAAoBjB,eAAe,SAAS;QAAEkB,QAAQF;IAAW,IACjEZ;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASe,UAAUhB,UAAqC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOP,IAAIK,mBAAmBG;AAChC"}
+{"version":3,"sources":["../../src/tree/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport type { InternalListItemClassNameOptions } from \"../list/listItemStyles.js\";\nimport { listItem } from \"../list/listItemStyles.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst treeStyles = bem(\"rmd-tree\");\nconst treeItemStyles = bem(\"rmd-tree-item\");\nconst treeGroupStyles = bem(\"rmd-tree-group\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface TreeClassNameOptions {\n  className?: string;\n}\n\n/**\n * Apply the `className`s for a tree component. This will be type-safe if using\n * typescript.\n *\n * @remarks \\@since 6.0.0\n */\nexport function tree(options: TreeClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(treeStyles(), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface TreeItemClassNameOptions {\n  className?: string;\n  expander?: boolean;\n\n  /**\n   * Settings this to `true` will update the styles for the expander icon within\n   * the tree item to rotate `down -> right` instead of `down -> left`.\n   *\n   * @defaultValue `false`\n   */\n  expanderLeft?: boolean;\n}\n\n/**\n * Apply the `className`s for a tree item component. This will be type-safe if\n * using typescript.\n *\n * @remarks \\@since 6.0.0\n */\nexport function treeItem(options: TreeItemClassNameOptions = {}): string {\n  const { className, expander = false, expanderLeft = false } = options;\n\n  return cnb(\n    treeItemStyles({\n      \"expander-left\": expander && expanderLeft,\n      \"expander-right\": expander && !expanderLeft,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface TreeItemContentClassNameOptions\n  extends InternalListItemClassNameOptions {\n  /**\n   * Set this\n   *\n   * @defaultValue `false`\n   */\n  link?: boolean;\n\n  /**\n   * Set this to `true` when the tree item is the current keyboard focus with\n   * `aria-activedescendant`. This will apply the focus styles only while the\n   * parent tree component is focused and the user is in keyboard mode.\n   *\n   *\n   * @defaultValue `false`\n   */\n  focused?: boolean;\n\n  /**\n   * Set this to `true` hen the tree item has been selected by the user. The\n   * default styles just\n   *\n   * @defaultValue `false`\n   */\n  selected?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function treeItemContent(\n  options: TreeItemContentClassNameOptions = {}\n): string {\n  const {\n    className,\n    link = false,\n    focused,\n    selected,\n    disabled = false,\n    ...remaining\n  } = options;\n\n  return cnb(\n    treeItemStyles(\"content\", {\n      link,\n      focused,\n      selected,\n      disabled,\n    }),\n    listItem({\n      className,\n      disabled,\n      ...remaining,\n    })\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TreeItemMediaClassNameOptions {\n  className?: string;\n  isLeafNode: boolean;\n  isMediaLeftAddon: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function treeItemMedia(options: TreeItemMediaClassNameOptions): string {\n  const { isLeafNode, isMediaLeftAddon, className } = options;\n\n  return cnb(\n    isMediaLeftAddon && treeItemStyles(\"media\", { single: isLeafNode }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface TreeGroupClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function treeGroup(options: TreeGroupClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(treeGroupStyles(), className);\n}\n"],"names":["cnb","listItem","bem","treeStyles","treeItemStyles","treeGroupStyles","tree","options","className","treeItem","expander","expanderLeft","treeItemContent","link","focused","selected","disabled","remaining","treeItemMedia","isLeafNode","isMediaLeftAddon","single","treeGroup"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,4BAA4B;AACrD,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,aAAaD,IAAI;AACvB,MAAME,iBAAiBF,IAAI;AAC3B,MAAMG,kBAAkBH,IAAI;AAO5B;;;;;CAKC,GACD,OAAO,SAASI,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOP,IAAIG,cAAcK;AAC3B;AAgBA;;;;;CAKC,GACD,OAAO,SAASC,SAASF,UAAoC,CAAC,CAAC;IAC7D,MAAM,EAAEC,SAAS,EAAEE,WAAW,KAAK,EAAEC,eAAe,KAAK,EAAE,GAAGJ;IAE9D,OAAOP,IACLI,eAAe;QACb,iBAAiBM,YAAYC;QAC7B,kBAAkBD,YAAY,CAACC;IACjC,IACAH;AAEJ;AA+BA;;CAEC,GACD,OAAO,SAASI,gBACdL,UAA2C,CAAC,CAAC;IAE7C,MAAM,EACJC,SAAS,EACTK,OAAO,KAAK,EACZC,OAAO,EACPC,QAAQ,EACRC,WAAW,KAAK,EAChB,GAAGC,WACJ,GAAGV;IAEJ,OAAOP,IACLI,eAAe,WAAW;QACxBS;QACAC;QACAC;QACAC;IACF,IACAf,SAAS;QACPO;QACAQ;QACA,GAAGC,SAAS;IACd;AAEJ;AAWA;;CAEC,GACD,OAAO,SAASC,cAAcX,OAAsC;IAClE,MAAM,EAAEY,UAAU,EAAEC,gBAAgB,EAAEZ,SAAS,EAAE,GAAGD;IAEpD,OAAOP,IACLoB,oBAAoBhB,eAAe,SAAS;QAAEiB,QAAQF;IAAW,IACjEX;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASc,UAAUf,UAAqC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOP,IAAIK,mBAAmBG;AAChC"}

package/dist/types.d.ts

@@ -148,3 +148,10 @@ export type CssPosition = "fixed" | "sticky" | "static";
  * @remarks \@since 6.0.0
  */
 export type AnyFunction = (...args: any[]) => any | void;
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ElementSize {
+    height: number;
+    width: number;
+}

package/dist/types.js

@@ -1,6 +1,5 @@
 /**
  * @remarks \@since 6.0.0
- */ // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export { };
+ */ export { };
 
 //# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { Dispatch, ReactElement, Ref, SetStateAction } from \"react\";\n\n/**\n * A helper type that allows an optional `ref` to also be applied with a props\n * object even though a `ref` isn't a real prop.\n */\nexport type PropsWithRef<\n  Props extends {},\n  Element extends HTMLElement,\n> = Props & {\n  /**\n   * An optional ref that can be applied.\n   */\n  ref?: Ref<Element>;\n};\n\n/**\n * A simple type that can be used for different components that clone a\n * `className` into a child component.\n */\nexport type ClassNameCloneableChild<T = {}> = ReactElement<\n  T & { className?: string }\n>;\n\n/**\n * This type allows you to require at least one of the provided keys. This is\n * super helpful for things like `aria-label` or `aria-labelledby` when it's\n * required for a11y.\n *\n * @see https://stackoverflow.com/questions/40510611/typescript-interface-require-one-of-two-properties-to-exist/49725198#49725198\n */\nexport type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<\n  T,\n  Exclude<keyof T, Keys>\n> &\n  {\n    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;\n  }[Keys];\n\nexport interface LabelA11y {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\n/**\n * A small accessibility helper to ensure that either `aria-label` or\n * `aria-labelledby` have been provided to a component.\n *\n * @example\n * Simple Example\n * ```ts\n * import type { HTMLAttributes, ReactElement } from \"react\";\n * import type { LabelRequiredForA11y } from \"@react-md/core\";\n *\n * type Props = LabelRequiredForA11y<HTMLAttributes<HTMLDivElement>>;\n *\n * function Component(props: Props): ReactElement {\n *   return <div {...props} />;\n * }\n *\n * const test1 = <Component />\n * //            ^ type error\n * const test2 = <Component aria-label=\"Label\" />\n * const test3 = <Component aria-labelledby=\"some-other-id\" />\n * ```\n */\nexport type LabelRequiredForA11y<Props extends LabelA11y> = RequireAtLeastOne<\n  Props,\n  keyof LabelA11y\n>;\n\n/**\n * @remarks \\@since 5.0.0\n * @internal\n */\nexport interface NonNullRef<T> {\n  readonly current: T;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport interface NonNullMutableRef<T> {\n  current: T;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type HtmlTagName = keyof JSX.IntrinsicElements;\n\n/**\n * A function to get a string from a generic item.\n *\n * @example\n * Simple Example\n * ```ts\n * interface Item {\n *   name: string;\n * }\n *\n * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];\n *\n * const extractor: TextExtractor<Item> = (item) => item.name;\n * ```\n * @remarks \\@since 6.0.0\n */\nexport type TextExtractor<T> = (item: T) => string;\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport type UseStateSetter<T> = Dispatch<SetStateAction<T>>;\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport type UseStateInitializer<T> = T | (() => T);\n\n/**\n * @example\n * ```ts\n * type Visibility = UseStateObject<\"visible\", boolean>;\n * // type Visibility = {\n * //   visible: boolean;\n * //   setVisible: UseStateSetter<boolean>\n * // }\n *\n * type AnotherOne = UseStateObject<\"renderAsSheet\", RenderMenuAsSheet>;\n * // type AnotherOne = {\n * //   renderAsSheet: RenderMenuAsSheet;\n * //   setRenderAsSheet: UseStateSetter<RenderMenuAsSheet>;\n * // }\n * ```\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport type UseStateObject<Name extends string, Value> = {\n  [key in Name]: Value;\n} & {\n  [key in `set${Capitalize<Name>}`]: UseStateSetter<Value>;\n};\n\n/**\n * @example\n * ```ts\n * interface Example {\n *   value: number;\n *   setValue: UseStateSetter<number>;\n * }\n *\n * type WithPrefix = RenameKeysWithPrefix<Example, \"thumb1\">;\n * // type WithPrefix = {\n * //   thumb1Value: number;\n * //   thumb1SetValue: UseStateSetter<number>;\n * // }\n * ```\n *\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport type RenameKeysWithPrefix<T, Prefix extends string> = {\n  [Key in keyof T & string as `${Prefix}${Capitalize<Key>}`]: T[Key];\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type CssPosition = \"fixed\" | \"sticky\" | \"static\";\n\n/**\n * @remarks \\@since 6.0.0\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyFunction = (...args: any[]) => any | void;\n"],"names":[],"mappings":"AA2KA;;CAEC,GACD,8DAA8D;AAC9D,WAAyD"}
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { Dispatch, ReactElement, Ref, SetStateAction } from \"react\";\n\n/**\n * A helper type that allows an optional `ref` to also be applied with a props\n * object even though a `ref` isn't a real prop.\n */\nexport type PropsWithRef<\n  Props extends {},\n  Element extends HTMLElement,\n> = Props & {\n  /**\n   * An optional ref that can be applied.\n   */\n  ref?: Ref<Element>;\n};\n\n/**\n * A simple type that can be used for different components that clone a\n * `className` into a child component.\n */\nexport type ClassNameCloneableChild<T = {}> = ReactElement<\n  T & { className?: string }\n>;\n\n/**\n * This type allows you to require at least one of the provided keys. This is\n * super helpful for things like `aria-label` or `aria-labelledby` when it's\n * required for a11y.\n *\n * @see https://stackoverflow.com/questions/40510611/typescript-interface-require-one-of-two-properties-to-exist/49725198#49725198\n */\nexport type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<\n  T,\n  Exclude<keyof T, Keys>\n> &\n  {\n    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;\n  }[Keys];\n\nexport interface LabelA11y {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\n/**\n * A small accessibility helper to ensure that either `aria-label` or\n * `aria-labelledby` have been provided to a component.\n *\n * @example\n * Simple Example\n * ```ts\n * import type { HTMLAttributes, ReactElement } from \"react\";\n * import type { LabelRequiredForA11y } from \"@react-md/core\";\n *\n * type Props = LabelRequiredForA11y<HTMLAttributes<HTMLDivElement>>;\n *\n * function Component(props: Props): ReactElement {\n *   return <div {...props} />;\n * }\n *\n * const test1 = <Component />\n * //            ^ type error\n * const test2 = <Component aria-label=\"Label\" />\n * const test3 = <Component aria-labelledby=\"some-other-id\" />\n * ```\n */\nexport type LabelRequiredForA11y<Props extends LabelA11y> = RequireAtLeastOne<\n  Props,\n  keyof LabelA11y\n>;\n\n/**\n * @remarks \\@since 5.0.0\n * @internal\n */\nexport interface NonNullRef<T> {\n  readonly current: T;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport interface NonNullMutableRef<T> {\n  current: T;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type HtmlTagName = keyof JSX.IntrinsicElements;\n\n/**\n * A function to get a string from a generic item.\n *\n * @example\n * Simple Example\n * ```ts\n * interface Item {\n *   name: string;\n * }\n *\n * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];\n *\n * const extractor: TextExtractor<Item> = (item) => item.name;\n * ```\n * @remarks \\@since 6.0.0\n */\nexport type TextExtractor<T> = (item: T) => string;\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport type UseStateSetter<T> = Dispatch<SetStateAction<T>>;\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport type UseStateInitializer<T> = T | (() => T);\n\n/**\n * @example\n * ```ts\n * type Visibility = UseStateObject<\"visible\", boolean>;\n * // type Visibility = {\n * //   visible: boolean;\n * //   setVisible: UseStateSetter<boolean>\n * // }\n *\n * type AnotherOne = UseStateObject<\"renderAsSheet\", RenderMenuAsSheet>;\n * // type AnotherOne = {\n * //   renderAsSheet: RenderMenuAsSheet;\n * //   setRenderAsSheet: UseStateSetter<RenderMenuAsSheet>;\n * // }\n * ```\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport type UseStateObject<Name extends string, Value> = {\n  [key in Name]: Value;\n} & {\n  [key in `set${Capitalize<Name>}`]: UseStateSetter<Value>;\n};\n\n/**\n * @example\n * ```ts\n * interface Example {\n *   value: number;\n *   setValue: UseStateSetter<number>;\n * }\n *\n * type WithPrefix = RenameKeysWithPrefix<Example, \"thumb1\">;\n * // type WithPrefix = {\n * //   thumb1Value: number;\n * //   thumb1SetValue: UseStateSetter<number>;\n * // }\n * ```\n *\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport type RenameKeysWithPrefix<T, Prefix extends string> = {\n  [Key in keyof T & string as `${Prefix}${Capitalize<Key>}`]: T[Key];\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type CssPosition = \"fixed\" | \"sticky\" | \"static\";\n\n/**\n * @remarks \\@since 6.0.0\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyFunction = (...args: any[]) => any | void;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ElementSize {\n  height: number;\n  width: number;\n}\n"],"names":[],"mappings":"AAiLA;;CAEC,GACD,WAGC"}

package/dist/typography/_typography.scss

@@ -66,11 +66,19 @@ $font-styles: normal italic oblique !default;
 
 /// The base styles for typography.
 /// @type Map
-$base-font-styles: (
+$base-recommended-font-styles: (
   font-family: $font-family,
+  overflow: inherit,
+  overflow-wrap: break-word,
+  text-overflow: inherit,
   -moz-osx-font-smoothing: grayscale,
   -webkit-font-smoothing: antialiased,
 );
+$base-custom-font-styles: () !default;
+$base-font-styles: map.merge(
+  $base-recommended-font-styles,
+  $base-custom-font-styles
+);
 
 $headline-1-recommended-styles: (
   font-size: 6rem,
@@ -220,38 +228,25 @@ $button-styles: map.merge(
 ) !default;
 
 $text-container-padding: 1rem !default;
-$text-line-length: 65ch !default;
-
-$typography-var-lookup: (
-  line-length: (
-    var: --rmd-line-length,
-    value: $text-line-length,
-  ),
-  text-container-padding: (
-    var: --rmd-text-container-padding,
-    value: $text-container-padding,
-  ),
-);
+// since everything has `box-sizing: border-box`, make sure the width is 65
+// characters + left and right padding so the text is _really_ 65ch
+$text-line-length: calc(65ch + $text-container-padding * 2) !default;
 
-@function typography-get-var($name, $fallback: null) {
-  $found: utils.validate($typography-var-lookup, $name, "typography var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
+$typography-variables: (line-length, text-container-padding);
 
-  @if $value {
-    @return var(#{$var}, #{$value});
+@function typography-get-var($name, $fallback: null) {
+  $var: utils.get-var-name($typography-variables, $name, "typography");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin typography-set-var($name, $value) {
-  $var: map.get(
-    utils.validate($typography-var-lookup, $name, "typography var"),
-    var
-  );
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($typography-variables, $name, "typography")}: #{$value};
+  }
 }
 
 @mixin typography-use-var($property, $name: $property, $fallback: null) {
@@ -339,6 +334,16 @@ $typography-var-lookup: (
   display: -webkit-box;
 }
 
+@mixin typography-variables {
+  @if not $disable-text-container {
+    @include typography-set-var(line-length, $text-line-length);
+    @include typography-set-var(
+      text-container-padding,
+      $text-container-padding
+    );
+  }
+}
+
 @mixin typography-styles {
   @include typography-text-container-styles;
   @include typography-base-styles;

package/dist/useElementSize.d.ts

@@ -0,0 +1,40 @@
+import { type RefCallback } from "react";
+import { type ElementSize, type UseStateInitializer } from "./types.js";
+import { type ResizeObserverHookOptions } from "./useResizeObserver.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ElementSizeOptions<E extends HTMLElement> extends Omit<ResizeObserverHookOptions<E>, "onUpdate"> {
+    /** @defaultValue `{ height: 0, width: 0 }` */
+    defaultValue?: UseStateInitializer<ElementSize>;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface ElementSizeImplementation<E extends HTMLElement> extends ElementSize {
+    elementRef: RefCallback<E>;
+}
+/**
+ * A small wrapper around the {@link useResizeObserver} hook to calculate the
+ * element's size.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { useElementSize } from "@react-md/core";
+ * import { type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const { height, width, elementRef } = useElementSize();
+ *
+ *   return (
+ *     <div ref={elementRef}>
+ *       {`height: ${height}, width: ${width}`}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare function useElementSize<E extends HTMLElement>(options?: ElementSizeOptions<E>): ElementSizeImplementation<E>;

package/dist/useElementSize.js

@@ -0,0 +1,53 @@
+"use client";
+import { useCallback, useState } from "react";
+import { useResizeObserver } from "./useResizeObserver.js";
+/**
+ * A small wrapper around the {@link useResizeObserver} hook to calculate the
+ * element's size.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { useElementSize } from "@react-md/core";
+ * import { type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const { height, width, elementRef } = useElementSize();
+ *
+ *   return (
+ *     <div ref={elementRef}>
+ *       {`height: ${height}, width: ${width}`}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */ export function useElementSize(options = {}) {
+    const { defaultValue } = options;
+    const [size, setSize] = useState(()=>{
+        if (typeof defaultValue === "function") {
+            return defaultValue();
+        }
+        return defaultValue ?? {
+            height: 0,
+            width: 0
+        };
+    });
+    const elementRef = useResizeObserver({
+        ...options,
+        onUpdate: useCallback((entry)=>{
+            const size = entry.borderBoxSize[0];
+            setSize({
+                height: size.blockSize,
+                width: size.inlineSize
+            });
+        }, [])
+    });
+    return {
+        ...size,
+        elementRef
+    };
+}
+
+//# sourceMappingURL=useElementSize.js.map

package/dist/useElementSize.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useElementSize.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useState, type RefCallback } from \"react\";\nimport { type ElementSize, type UseStateInitializer } from \"./types.js\";\nimport {\n  useResizeObserver,\n  type ResizeObserverHookOptions,\n} from \"./useResizeObserver.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ElementSizeOptions<E extends HTMLElement>\n  extends Omit<ResizeObserverHookOptions<E>, \"onUpdate\"> {\n  /** @defaultValue `{ height: 0, width: 0 }` */\n  defaultValue?: UseStateInitializer<ElementSize>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ElementSizeImplementation<E extends HTMLElement>\n  extends ElementSize {\n  elementRef: RefCallback<E>;\n}\n\n/**\n * A small wrapper around the {@link useResizeObserver} hook to calculate the\n * element's size.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { useElementSize } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const { height, width, elementRef } = useElementSize();\n *\n *   return (\n *     <div ref={elementRef}>\n *       {`height: ${height}, width: ${width}`}\n *     </div>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useElementSize<E extends HTMLElement>(\n  options: ElementSizeOptions<E> = {}\n): ElementSizeImplementation<E> {\n  const { defaultValue } = options;\n\n  const [size, setSize] = useState<ElementSize>(() => {\n    if (typeof defaultValue === \"function\") {\n      return defaultValue();\n    }\n\n    return (\n      defaultValue ?? {\n        height: 0,\n        width: 0,\n      }\n    );\n  });\n\n  const elementRef = useResizeObserver({\n    ...options,\n    onUpdate: useCallback((entry) => {\n      const size = entry.borderBoxSize[0];\n\n      setSize({\n        height: size.blockSize,\n        width: size.inlineSize,\n      });\n    }, []),\n  });\n\n  return {\n    ...size,\n    elementRef,\n  };\n}\n"],"names":["useCallback","useState","useResizeObserver","useElementSize","options","defaultValue","size","setSize","height","width","elementRef","onUpdate","entry","borderBoxSize","blockSize","inlineSize"],"mappings":"AAAA;AACA,SAASA,WAAW,EAAEC,QAAQ,QAA0B,QAAQ;AAEhE,SACEC,iBAAiB,QAEZ,yBAAyB;AAmBhC;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASC,eACdC,UAAiC,CAAC,CAAC;IAEnC,MAAM,EAAEC,YAAY,EAAE,GAAGD;IAEzB,MAAM,CAACE,MAAMC,QAAQ,GAAGN,SAAsB;QAC5C,IAAI,OAAOI,iBAAiB,YAAY;YACtC,OAAOA;QACT;QAEA,OACEA,gBAAgB;YACdG,QAAQ;YACRC,OAAO;QACT;IAEJ;IAEA,MAAMC,aAAaR,kBAAkB;QACnC,GAAGE,OAAO;QACVO,UAAUX,YAAY,CAACY;YACrB,MAAMN,OAAOM,MAAMC,aAAa,CAAC,EAAE;YAEnCN,QAAQ;gBACNC,QAAQF,KAAKQ,SAAS;gBACtBL,OAAOH,KAAKS,UAAU;YACxB;QACF,GAAG,EAAE;IACP;IAEA,OAAO;QACL,GAAGT,IAAI;QACPI;IACF;AACF"}

package/dist/useResizeListener.d.ts

@@ -17,7 +17,7 @@ export interface ResizeListenerOptions extends AddEventListenerOptions {
     disabled?: boolean;
     /**
      * This function will be called whenever the resize event is fired on the
-     * `window`.
+     * `window`. This should be wrapped in `useCallback`.
      */
     onUpdate(event: Event): void;
 }

package/dist/useResizeListener.js

@@ -53,6 +53,7 @@ import { delegateEvent } from "./delegateEvent.js";
             passive
         });
         eventHandler.add(onUpdate);
+        window.dispatchEvent(new Event("resize"));
         return ()=>{
             eventHandler.remove(onUpdate);
         };

package/dist/useResizeListener.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useResizeListener.ts"],"sourcesContent":["\"use client\";\nimport { useEffect } from \"react\";\nimport { delegateEvent } from \"./delegateEvent.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { useResizeObserver } from \"./useResizeObserver.js\";\n\n/**\n * @remarks \\@since 6.0.0  Updated the API\n */\nexport interface ResizeListenerOptions extends AddEventListenerOptions {\n  /**\n   * Set this to `false` to disable throttling with\n   * `window.requestAnimationFrame`.\n   *\n   * @defaultValue `true`\n   */\n  throttle?: boolean;\n\n  /**\n   * Set this to `true` to disable attaching the resize event handler.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * This function will be called whenever the resize event is fired on the\n   * `window`.\n   */\n  onUpdate(event: Event): void;\n}\n\n/**\n * This hook can be used to listen to the entire window resizing. If you need to\n * observe specific elements resizing, check out the {@link useResizeObserver}\n * hook instead.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { useResizeListener } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [size, setSize] = useState({\n *     height: window.innerHeight,\n *     width: window.innerWidth,\n *   }):\n *\n *   useResizeListener({\n *     onUpdate(event) {\n *       setSize({\n *         height: window.innerHeight,\n *         width: window.innerWidth,\n *       });\n *     },\n *   });\n *\n *   return (\n *     <>\n *       The current window size:\n *       <pre><code>{JSON.stringify(size, null, 2)}</code></pre>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0  Updated the API to match the `useResizeObserver` and\n * `useIntersectionObserver` hooks by having an `onUpdate` callback and include\n * the `AddEventListenerOptions` as part of the hook options.\n */\nexport function useResizeListener(options: ResizeListenerOptions): void {\n  const {\n    once,\n    signal,\n    capture,\n    passive,\n    throttle = true,\n    disabled = false,\n    onUpdate,\n  } = options;\n\n  useEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    const eventHandler = delegateEvent(\"resize\", window, throttle, {\n      once,\n      signal,\n      capture,\n      passive,\n    });\n    eventHandler.add(onUpdate);\n    return () => {\n      eventHandler.remove(onUpdate);\n    };\n  }, [capture, disabled, onUpdate, once, passive, signal, throttle]);\n}\n"],"names":["useEffect","delegateEvent","useResizeListener","options","once","signal","capture","passive","throttle","disabled","onUpdate","eventHandler","window","add","remove"],"mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,QAAQ;AAClC,SAASC,aAAa,QAAQ,qBAAqB;AA8BnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCC,GACD,OAAO,SAASC,kBAAkBC,OAA8B;IAC9D,MAAM,EACJC,IAAI,EACJC,MAAM,EACNC,OAAO,EACPC,OAAO,EACPC,WAAW,IAAI,EACfC,WAAW,KAAK,EAChBC,QAAQ,EACT,GAAGP;IAEJH,UAAU;QACR,IAAIS,UAAU;YACZ;QACF;QAEA,MAAME,eAAeV,cAAc,UAAUW,QAAQJ,UAAU;YAC7DJ;YACAC;YACAC;YACAC;QACF;QACAI,aAAaE,GAAG,CAACH;QACjB,OAAO;YACLC,aAAaG,MAAM,CAACJ;QACtB;IACF,GAAG;QAACJ;QAASG;QAAUC;QAAUN;QAAMG;QAASF;QAAQG;KAAS;AACnE"}
+{"version":3,"sources":["../src/useResizeListener.ts"],"sourcesContent":["\"use client\";\nimport { useEffect } from \"react\";\nimport { delegateEvent } from \"./delegateEvent.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { useResizeObserver } from \"./useResizeObserver.js\";\n\n/**\n * @remarks \\@since 6.0.0  Updated the API\n */\nexport interface ResizeListenerOptions extends AddEventListenerOptions {\n  /**\n   * Set this to `false` to disable throttling with\n   * `window.requestAnimationFrame`.\n   *\n   * @defaultValue `true`\n   */\n  throttle?: boolean;\n\n  /**\n   * Set this to `true` to disable attaching the resize event handler.\n   *\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * This function will be called whenever the resize event is fired on the\n   * `window`. This should be wrapped in `useCallback`.\n   */\n  onUpdate(event: Event): void;\n}\n\n/**\n * This hook can be used to listen to the entire window resizing. If you need to\n * observe specific elements resizing, check out the {@link useResizeObserver}\n * hook instead.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { useResizeListener } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [size, setSize] = useState({\n *     height: window.innerHeight,\n *     width: window.innerWidth,\n *   }):\n *\n *   useResizeListener({\n *     onUpdate(event) {\n *       setSize({\n *         height: window.innerHeight,\n *         width: window.innerWidth,\n *       });\n *     },\n *   });\n *\n *   return (\n *     <>\n *       The current window size:\n *       <pre><code>{JSON.stringify(size, null, 2)}</code></pre>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0  Updated the API to match the `useResizeObserver` and\n * `useIntersectionObserver` hooks by having an `onUpdate` callback and include\n * the `AddEventListenerOptions` as part of the hook options.\n */\nexport function useResizeListener(options: ResizeListenerOptions): void {\n  const {\n    once,\n    signal,\n    capture,\n    passive,\n    throttle = true,\n    disabled = false,\n    onUpdate,\n  } = options;\n\n  useEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    const eventHandler = delegateEvent(\"resize\", window, throttle, {\n      once,\n      signal,\n      capture,\n      passive,\n    });\n    eventHandler.add(onUpdate);\n\n    window.dispatchEvent(new Event(\"resize\"));\n    return () => {\n      eventHandler.remove(onUpdate);\n    };\n  }, [capture, disabled, onUpdate, once, passive, signal, throttle]);\n}\n"],"names":["useEffect","delegateEvent","useResizeListener","options","once","signal","capture","passive","throttle","disabled","onUpdate","eventHandler","window","add","dispatchEvent","Event","remove"],"mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,QAAQ;AAClC,SAASC,aAAa,QAAQ,qBAAqB;AA8BnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCC,GACD,OAAO,SAASC,kBAAkBC,OAA8B;IAC9D,MAAM,EACJC,IAAI,EACJC,MAAM,EACNC,OAAO,EACPC,OAAO,EACPC,WAAW,IAAI,EACfC,WAAW,KAAK,EAChBC,QAAQ,EACT,GAAGP;IAEJH,UAAU;QACR,IAAIS,UAAU;YACZ;QACF;QAEA,MAAME,eAAeV,cAAc,UAAUW,QAAQJ,UAAU;YAC7DJ;YACAC;YACAC;YACAC;QACF;QACAI,aAAaE,GAAG,CAACH;QAEjBE,OAAOE,aAAa,CAAC,IAAIC,MAAM;QAC/B,OAAO;YACLJ,aAAaK,MAAM,CAACN;QACtB;IACF,GAAG;QAACJ;QAASG;QAAUC;QAAUN;QAAMG;QAASF;QAAQG;KAAS;AACnE"}