@react-md/core 1.0.0-next.5 → 1.0.0-next.6

package/dist/expansion-panel/_expansion-panel.scss

@@ -16,74 +16,91 @@ $rotate-to: icon.$rotate-to !default;
 $box-shadow-overlay-height: 10px !default;
 $box-shadow-overlay-bottom: -6px !default;
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    // does not require custom styles
-    .rmd-expansion-panel {
-      @if not $disable-margin-top-transition and $spacing {
-        &--animate {
-          transition: margin-top transition.$linear-duration;
+    @include utils.optional-layer(expansion-panel, $disable-layer) {
+      // does not require custom styles
+      .rmd-expansion-panel {
+        @if not $disable-margin-top-transition and $spacing {
+          &--animate {
+            transition: margin-top transition.$linear-duration;
+          }
         }
-      }
 
-      @if $spacing {
-        &--expanded + .rmd-expansion-panel {
-          margin-top: $spacing;
+        @if $spacing {
+          &--expanded + .rmd-expansion-panel {
+            margin-top: $spacing;
+          }
         }
-      }
 
-      @if not utils.$disable-has-selectors {
-        // this makes it so that the box-shadow between closed panels is not
-        // visible by covering it in a small overlay of the current
-        // background-color
-        &:where(:not(.rmd-expansion-panel--expanded)):has(
-            + .rmd-expansion-panel
-          ) {
-          position: relative;
+        @if not utils.$disable-has-selectors {
+          // this makes it so that the box-shadow between closed panels is not
+          // visible by covering it in a small overlay of the current
+          // background-color
+          &:where(:not(.rmd-expansion-panel--expanded)):has(
+              + .rmd-expansion-panel
+            ) {
+            position: relative;
 
-          &::after {
-            @include theme.theme-use-var(background-color);
+            &::after {
+              @include theme.theme-use-var(background-color);
 
-            bottom: $box-shadow-overlay-bottom;
-            content: "";
-            height: $box-shadow-overlay-height;
-            left: 0;
-            position: absolute;
-            right: 0;
-            z-index: 1;
+              bottom: $box-shadow-overlay-bottom;
+              content: "";
+              height: $box-shadow-overlay-height;
+              left: 0;
+              position: absolute;
+              right: 0;
+              z-index: 1;
+            }
           }
         }
       }
-    }
 
-    // .rmd-expansion-panel__header {
-    // }
+      // .rmd-expansion-panel__header {
+      // }
 
-    .rmd-expansion-panel__button {
-      @if $rotate-from != icon.$rotate-from {
-        @include icon.set-var(rotate-from, $rotate-from);
-      }
+      .rmd-expansion-panel__button {
+        @if $rotate-from != icon.$rotate-from {
+          @include icon.set-var(rotate-from, $rotate-from);
+        }
 
-      @if $rotate-to != icon.$rotate-to {
-        @include icon.set-var(rotate-to, $rotate-to);
-      }
+        @if $rotate-to != icon.$rotate-to {
+          @include icon.set-var(rotate-to, $rotate-to);
+        }
 
-      @if button.$disable-unstyled-utility-class {
-        @include button.unstyled;
-      }
-      @include utils.auto-rtl(text-align, left);
+        @if button.$disable-unstyled-utility-class {
+          @include button.unstyled;
+        }
+        @include utils.auto-rtl(text-align, left);
 
-      align-items: center;
-      color: inherit;
-      font: inherit;
-      gap: $button-spacing;
-      justify-content: space-between;
-      letter-spacing: inherit;
-      padding: $padding;
-      width: 100%;
+        align-items: center;
+        color: inherit;
+        font: inherit;
+        gap: $button-spacing;
+        justify-content: space-between;
+        letter-spacing: inherit;
+        padding: $padding;
+        width: 100%;
 
-      &[aria-disabled="true"] {
-        cursor: auto;
+        &[aria-disabled="true"] {
+          cursor: auto;
+        }
+
+        // need to raise the focus outline z-index so it is above the box-shadow
+        @if not utils.$disable-has-selectors {
+          @if not utils.$disable-focus-visible {
+            &::before {
+              z-index: 2;
+            }
+          } @else {
+            @include utils.keyboard-only {
+              &::before {
+                z-index: 2;
+              }
+            }
+          }
+        }
       }
     }
   }

package/dist/form/Form.d.ts

@@ -10,7 +10,7 @@ export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
     disablePreventDefault?: boolean;
 }
 /**
- * **Server Component**
+ * **Client Component**
  *
  * This is probably one of the least useful components available as it doesn't
  * do much styling or logic. All this form component will do is add basic flex

package/dist/form/Form.js

@@ -1,10 +1,11 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const noop = ()=>{
 // do nothing
 };
 /**
- * **Server Component**
+ * **Client Component**
  *
  * This is probably one of the least useful components available as it doesn't
  * do much styling or logic. All this form component will do is add basic flex

package/dist/form/Form.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Form.tsx"],"sourcesContent":["import { forwardRef, type FormHTMLAttributes } from \"react\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nexport interface FormProps extends FormHTMLAttributes<HTMLFormElement> {\n  /**\n   * Boolean if the form should no longer prevent default submit behavior. If\n   * you enable this prop you should honestly just use a `<form>` element\n   * instead\n   *\n   * @defaultValue `false`\n   */\n  disablePreventDefault?: boolean;\n}\n\n/**\n * **Server Component**\n *\n * This is probably one of the least useful components available as it doesn't\n * do much styling or logic. All this form component will do is add basic flex\n * behavior and prevent the default form submit behavior.\n */\nexport const Form = forwardRef<HTMLFormElement, FormProps>(\n  function Form(props, ref) {\n    const {\n      children,\n      onSubmit = noop,\n      disablePreventDefault = false,\n      ...remaining\n    } = props;\n\n    return (\n      <form\n        {...remaining}\n        onSubmit={(event) => {\n          if (!disablePreventDefault) {\n            event.preventDefault();\n          }\n\n          onSubmit(event);\n        }}\n        ref={ref}\n      >\n        {children}\n      </form>\n    );\n  }\n);\n"],"names":["forwardRef","noop","Form","props","ref","children","onSubmit","disablePreventDefault","remaining","form","event","preventDefault"],"mappings":";AAAA,SAASA,UAAU,QAAiC,QAAQ;AAE5D,MAAMC,OAAO;AACX,aAAa;AACf;AAaA;;;;;;CAMC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,QAAQ,EACRC,WAAWL,IAAI,EACfM,wBAAwB,KAAK,EAC7B,GAAGC,WACJ,GAAGL;IAEJ,qBACE,KAACM;QACE,GAAGD,SAAS;QACbF,UAAU,CAACI;YACT,IAAI,CAACH,uBAAuB;gBAC1BG,MAAMC,cAAc;YACtB;YAEAL,SAASI;QACX;QACAN,KAAKA;kBAEJC;;AAGP,GACA"}
+{"version":3,"sources":["../../src/form/Form.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type FormHTMLAttributes } from \"react\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nexport interface FormProps extends FormHTMLAttributes<HTMLFormElement> {\n  /**\n   * Boolean if the form should no longer prevent default submit behavior. If\n   * you enable this prop you should honestly just use a `<form>` element\n   * instead\n   *\n   * @defaultValue `false`\n   */\n  disablePreventDefault?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This is probably one of the least useful components available as it doesn't\n * do much styling or logic. All this form component will do is add basic flex\n * behavior and prevent the default form submit behavior.\n */\nexport const Form = forwardRef<HTMLFormElement, FormProps>(\n  function Form(props, ref) {\n    const {\n      children,\n      onSubmit = noop,\n      disablePreventDefault = false,\n      ...remaining\n    } = props;\n\n    return (\n      <form\n        {...remaining}\n        onSubmit={(event) => {\n          if (!disablePreventDefault) {\n            event.preventDefault();\n          }\n\n          onSubmit(event);\n        }}\n        ref={ref}\n      >\n        {children}\n      </form>\n    );\n  }\n);\n"],"names":["forwardRef","noop","Form","props","ref","children","onSubmit","disablePreventDefault","remaining","form","event","preventDefault"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAiC,QAAQ;AAE5D,MAAMC,OAAO;AACX,aAAa;AACf;AAaA;;;;;;CAMC,GACD,OAAO,MAAMC,qBAAOF,WAClB,SAASE,KAAKC,KAAK,EAAEC,GAAG;IACtB,MAAM,EACJC,QAAQ,EACRC,WAAWL,IAAI,EACfM,wBAAwB,KAAK,EAC7B,GAAGC,WACJ,GAAGL;IAEJ,qBACE,KAACM;QACE,GAAGD,SAAS;QACbF,UAAU,CAACI;YACT,IAAI,CAACH,uBAAuB;gBAC1BG,MAAMC,cAAc;YACtB;YAEAL,SAASI;QACX;QACAN,KAAKA;kBAEJC;;AAGP,GACA"}