@react-md/core 1.0.0-next.16 → 1.0.0-next.18

package/dist/window-splitter/_window-splitter.scss

@@ -42,17 +42,6 @@ $variables: (top, right, bottom, left, opacity, position);
     @include utils.optional-layer(window-splitter, $disable-layer) {
       .rmd-window-splitter {
         @include use-var(opacity);
-        @include utils.mouse-hover {
-          @include set-var(opacity, 1);
-        }
-        @include utils.keyboard-only {
-          // Do not use `:focus-visible` here since since it'll still be active
-          // after dragging with a mouse until the user clicks something else. The
-          // `--dragging` state handles that part
-          &:focus {
-            @include set-var(opacity, 1);
-          }
-        }
 
         background-color: transparent;
         border: 0;
@@ -71,8 +60,8 @@ $variables: (top, right, bottom, left, opacity, position);
 
         @if not $disable-horizontal {
           &--h {
-            @include utils.auto-rtl(left, get-var(position));
             @include use-var(bottom);
+            @include use-var(left, position);
             @include use-var(top);
 
             cursor: col-resize;
@@ -81,16 +70,33 @@ $variables: (top, right, bottom, left, opacity, position);
             &::after {
               width: $background-size;
             }
+
+            @include utils.rtl {
+              @include use-var(right, position);
+
+              left: auto;
+            }
           }
 
           @if not $disable-reversed {
             &--hr {
-              @include utils.auto-rtl(right, get-var(position));
+              @include use-var(right, position);
 
               left: auto;
 
               &::after {
-                @include utils.auto-rtl(margin-left, auto);
+                margin-left: auto;
+              }
+
+              @include utils.rtl {
+                @include use-var(left, position);
+
+                right: auto;
+
+                &::after {
+                  margin-left: 0;
+                  margin-right: auto;
+                }
               }
             }
           }
@@ -137,6 +143,18 @@ $variables: (top, right, bottom, left, opacity, position);
           // window splitter
           pointer-events: auto !important;
         }
+
+        @include utils.mouse-hover {
+          @include set-var(opacity, 1);
+        }
+        @include utils.keyboard-only {
+          // Do not use `:focus-visible` here since since it'll still be active
+          // after dragging with a mouse until the user clicks something else. The
+          // `--dragging` state handles that part
+          &:focus {
+            @include set-var(opacity, 1);
+          }
+        }
       }
     }
   }

package/dist/window-splitter/styles.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @since 6.0.0
+ */
+export interface WindowSplitterClassNameOptions {
+    className?: string;
+    dragging?: boolean;
+    reversed?: boolean;
+    vertical?: boolean;
+    disableFixed?: boolean;
+}
+/**
+ * @since 6.0.0
+ */
+export declare function windowSplitter(options?: WindowSplitterClassNameOptions): string;

package/dist/window-splitter/styles.js

@@ -0,0 +1,18 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-window-splitter");
+/**
+ * @since 6.0.0
+ */ export function windowSplitter(options = {}) {
+    const { vertical = false, dragging, reversed, disableFixed, className } = options;
+    return cnb(styles({
+        h: !vertical,
+        hr: !vertical && reversed,
+        v: vertical,
+        vr: vertical && reversed,
+        a: disableFixed,
+        dragging
+    }), className);
+}
+
+//# sourceMappingURL=styles.js.map

package/dist/window-splitter/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/window-splitter/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-window-splitter\");\n\n/**\n * @since 6.0.0\n */\nexport interface WindowSplitterClassNameOptions {\n  className?: string;\n  dragging?: boolean;\n  reversed?: boolean;\n  vertical?: boolean;\n  disableFixed?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function windowSplitter(\n  options: WindowSplitterClassNameOptions = {}\n): string {\n  const {\n    vertical = false,\n    dragging,\n    reversed,\n    disableFixed,\n    className,\n  } = options;\n\n  return cnb(\n    styles({\n      h: !vertical,\n      hr: !vertical && reversed,\n      v: vertical,\n      vr: vertical && reversed,\n      a: disableFixed,\n      dragging,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","windowSplitter","options","vertical","dragging","reversed","disableFixed","className","h","hr","v","vr","a"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAanB;;CAEC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EACJC,WAAW,KAAK,EAChBC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZC,SAAS,EACV,GAAGL;IAEJ,OAAOJ,IACLE,OAAO;QACLQ,GAAG,CAACL;QACJM,IAAI,CAACN,YAAYE;QACjBK,GAAGP;QACHQ,IAAIR,YAAYE;QAChBO,GAAGN;QACHF;IACF,IACAG;AAEJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-md/core",
-  "version": "1.0.0-next.16",
+  "version": "1.0.0-next.18",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -53,26 +53,27 @@
   "license": "MIT",
   "dependencies": {
     "cnbuilder": "^3.1.0",
-    "nanoid": "^5.0.7"
+    "nanoid": "^5.0.9"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
-    "@microsoft/api-extractor": "^7.47.2",
-    "@swc/cli": "^0.4.0",
-    "@swc/core": "^1.7.0",
-    "@swc/jest": "^0.2.36",
-    "@testing-library/dom": "^10.3.2",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^16.0.0",
+    "@microsoft/api-extractor": "^7.48.1",
+    "@mlaursen/eslint-config": "^6.0.0",
+    "@swc/cli": "^0.5.2",
+    "@swc/core": "^1.10.1",
+    "@swc/jest": "^0.2.37",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/lodash": "^4.17.7",
-    "@types/node": "^20.14.11",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "chokidar": "^3.6.0",
-    "eslint": "^8.57.0",
-    "filesize": "^10.1.4",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^22.10.2",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "chokidar": "^4.0.3",
+    "eslint": "^9.17.0",
+    "filesize": "^10.1.6",
     "glob": "11.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -80,18 +81,18 @@
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.39",
+    "postcss": "^8.4.49",
     "postcss-scss": "^4.0.9",
-    "prettier": "^3.3.3",
-    "stylelint": "^16.7.0",
+    "prettier": "^3.4.2",
+    "stylelint": "^16.12.0",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-order": "^6.0.4",
-    "stylelint-scss": "^6.4.1",
-    "ts-morph": "^23.0.0",
+    "stylelint-scss": "^6.10.0",
+    "ts-morph": "^24.0.0",
     "ts-node": "^10.9.2",
-    "tsx": "^4.16.2",
-    "typescript": "^5.5.3"
+    "tsx": "^4.19.2",
+    "typescript": "^5.5.4"
   },
   "peerDependencies": {
     "@jest/globals": "^29.7.0",
@@ -134,7 +135,7 @@
   },
   "volta": {
     "node": "20.12.2",
-    "pnpm": "9.5.0"
+    "pnpm": "9.14.1"
   },
   "scripts": {
     "run-script": "tsx --tsconfig scripts/tsconfig.json",

package/src/app-bar/AppBar.tsx

@@ -1,179 +1,10 @@
-import { cnb } from "cnbuilder";
 import {
   forwardRef,
   type ElementType,
   type HTMLAttributes,
   type Ref,
 } from "react";
-import { box, type BoxOptions } from "../box/styles.js";
-import {
-  cssUtils,
-  type BackgroundColor,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  type CssUtilsOptions,
-} from "../cssUtils.js";
-import { type CssPosition } from "../types.js";
-import { bem } from "../utils/bem.js";
-
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-app-bar-height"?: string | number;
-    "--rmd-app-bar-background-color"?: string;
-    "--rmd-app-bar-color"?: string;
-    "--rmd-app-bar-surface-background-color"?: string;
-    "--rmd-app-bar-surface-color"?: string;
-  }
-}
-
-const styles = bem("rmd-app-bar");
-
-export type AppBarPosition = "top" | "bottom";
-
-/**
- * - `"clear"` - the background color will be transparent
- * - `"primary"` - defaults to the current primary theme color
- * - `"secondary"` - defaults to the current secondary theme color
- * - `"surface"` - this will use the current surface background color which
- *   defaults to `#fff` for light themes, `#242424` for dark themes, and
- *   `#424242` for dark themes when the `$disable-dark-elevation` is set to
- *   `true`
- *
- * The default dark theme surface color also depends on the `$fixed-elevation`
- * value.
- */
-export type AppBarTheme = BackgroundColor | "clear";
-
-/**
- * - `"auto"` - the height will be determined by the height of the content
- * - `"normal"` - defaults to `3.5rem` (`$height`)
- * - `"prominent"` - defaults to `7rem` (`$prominent-height`)
- * - `"dense"` - defaults to `3rem` (`$dense-height`)
- * - `"prominent-dense"` - defaults to `6rem` (`$prominent-dense-height`)
- */
-export type AppBarHeight =
-  | "auto"
-  | "normal"
-  | "prominent"
-  | "dense"
-  | "prominent-dense";
-
-/** @since 6.0.0 */
-export interface AppBarClassNameOptions extends Omit<BoxOptions, "fullWidth"> {
-  className?: string;
-
-  /**
-   * Set this to `"fixed"` or `"sticky"` to set `position: fixed;` or
-   * `position: sticky;` to the app bar. The default position will be static and
-   * inline with other content.
-   *
-   * @defaultValue `'static'`
-   */
-  position?: CssPosition;
-
-  /**
-   * The position within the page to "fix" the `AppBar` when the `fixed` prop is
-   * enabled.
-   *
-   * @defaultValue `"top"`
-   */
-  pagePosition?: AppBarPosition;
-
-  /**
-   * Set this to `true` to remove the box-shadow.
-   *
-   * @defaultValue `false`
-   */
-  disableElevation?: boolean;
-
-  /**
-   * The theme to apply to the `AppBar`.
-   *
-   * @defaultValue `"primary"`
-   * @see {@link AppBarTheme}
-   */
-  theme?: AppBarTheme;
-
-  /**
-   * @defaultValue `stacked ? "auto" : "normal"`
-   * @see {@link AppBarHeight}
-   */
-  height?: AppBarHeight;
-
-  /** @see {@link CssUtilsOptions.surfaceColor} */
-  surfaceColor?: "light" | "dark";
-
-  /**
-   * Set this to `true` if the app bar's positioning and width should be
-   * changed whenever the scrollbar is visible on the page. This defaults to
-   * `true` when the {@link position} prop is `true` so that once dialogs and menus
-   * become visible the contents in the app bar do not need to be repainted.
-   *
-   * @since 6.0.0
-   * @defaultValue `position === "fixed"`
-   */
-  scrollbarOffset?: boolean;
-}
-
-/**
- * Apply the `className`s for a tree component. This will be type-safe if using
- * typescript.
- *
- * @since 6.0.0
- */
-export function appBar(options: AppBarClassNameOptions = {}): string {
-  const {
-    className,
-    theme = "primary",
-    stacked,
-    height = stacked ? "auto" : "normal",
-    position = "static",
-    pagePosition = "top",
-    scrollbarOffset = position === "fixed",
-    align,
-    grid,
-    gridColumns,
-    gridName,
-    justify,
-    reversed,
-    surfaceColor,
-    disableWrap = true,
-    disablePadding,
-    disableElevation,
-  } = options;
-  const surface = theme === "surface";
-  const clear = theme === "clear";
-
-  return cnb(
-    styles({
-      surface,
-      [height]: height !== "normal",
-      fixed: position !== "static",
-      stacked,
-      sticky: position === "sticky",
-      [pagePosition]: position !== "static",
-      elevated: position !== "static" && !disableElevation,
-      "scrollbar-offset": scrollbarOffset,
-      "static-scrollbar-offset": position === "static" && scrollbarOffset,
-    }),
-    box({
-      align,
-      stacked,
-      fullWidth: true,
-      grid,
-      gridColumns,
-      gridName,
-      justify,
-      reversed,
-      disableWrap,
-      disablePadding,
-    }),
-    cssUtils({
-      backgroundColor: !surface && !clear ? theme : undefined,
-      surfaceColor,
-    }),
-    className
-  );
-}
+import { appBar, type AppBarClassNameOptions } from "./styles.js";
 
 /** @since 6.0.0 */
 export type CustomAppBarComponent = ElementType<

package/src/app-bar/AppBarTitle.tsx

@@ -1,51 +1,8 @@
-import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
 import { type TextOverflow } from "../cssUtils.js";
 import { Typography, type TypographyProps } from "../typography/Typography.js";
 import { type TypographyType } from "../typography/typographyStyles.js";
-import { bem } from "../utils/bem.js";
-
-const styles = bem("rmd-app-bar-title");
-
-/**
- * - `"small"` - the first character in the title will be `1rem` (`$keyline`)
- *   from the edge of the app bar horizontally
- * - `"nav"` - this should be set when there is a nav button before the title so
- *   that the first character in the title will be `4.5rem` (`title-keyline`)
- * - `"list"` - this should be used when the title should align with the list
- *   item keyline and there is no nav icon before.
- *
- * @since 6.0.0
- */
-export type AppBarTitleKeyline = "small" | "nav" | "list";
-
-/** @since 6.0.0 */
-export interface AppBarTitleClassNameOptions {
-  className?: string;
-
-  /**
-   * @defaultValue `"small"`
-   * @see {@link AppBarTitleKeyline}
-   */
-  keyline?: AppBarTitleKeyline;
-}
-
-/**
- * Apply the `className`s for a `AppBarTitle` component. This will be type-safe
- * if using typescript.
- *
- * @since 6.0.0
- */
-export function appBarTitle(options: AppBarTitleClassNameOptions = {}): string {
-  const { className, keyline = "small" } = options;
-  return cnb(
-    styles({
-      keyline: keyline == "list",
-      "nav-keyline": keyline === "nav",
-    }),
-    className
-  );
-}
+import { type AppBarTitleClassNameOptions, appBarTitle } from "./styles.js";
 
 /**
  * @since 6.0.0 The `keyline` prop was changed from a boolean to a type

package/src/app-bar/styles.ts

@@ -0,0 +1,206 @@
+import { cnb } from "cnbuilder";
+import { type BoxOptions, box } from "../box/styles.js";
+import { type BackgroundColor, cssUtils } from "../cssUtils.js";
+import { type CssPosition } from "../types.js";
+import { bem } from "../utils/bem.js";
+
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-app-bar-height"?: string | number;
+    "--rmd-app-bar-background-color"?: string;
+    "--rmd-app-bar-color"?: string;
+    "--rmd-app-bar-surface-background-color"?: string;
+    "--rmd-app-bar-surface-color"?: string;
+  }
+}
+
+const styles = bem("rmd-app-bar");
+const titleStyles = bem("rmd-app-bar-title");
+
+export type AppBarPosition = "top" | "bottom";
+
+/**
+ * - `"clear"` - the background color will be transparent
+ * - `"primary"` - defaults to the current primary theme color
+ * - `"secondary"` - defaults to the current secondary theme color
+ * - `"surface"` - this will use the current surface background color which
+ *   defaults to `#fff` for light themes, `#242424` for dark themes, and
+ *   `#424242` for dark themes when the `$disable-dark-elevation` is set to
+ *   `true`
+ *
+ * The default dark theme surface color also depends on the `$fixed-elevation`
+ * value.
+ */
+export type AppBarTheme = BackgroundColor | "clear";
+
+/**
+ * - `"auto"` - the height will be determined by the height of the content
+ * - `"normal"` - defaults to `3.5rem` (`$height`)
+ * - `"prominent"` - defaults to `7rem` (`$prominent-height`)
+ * - `"dense"` - defaults to `3rem` (`$dense-height`)
+ * - `"prominent-dense"` - defaults to `6rem` (`$prominent-dense-height`)
+ */
+export type AppBarHeight =
+  | "auto"
+  | "normal"
+  | "prominent"
+  | "dense"
+  | "prominent-dense";
+
+/** @since 6.0.0 */
+export interface AppBarClassNameOptions extends Omit<BoxOptions, "fullWidth"> {
+  className?: string;
+
+  /**
+   * Set this to `"fixed"` or `"sticky"` to set `position: fixed;` or
+   * `position: sticky;` to the app bar. The default position will be static and
+   * inline with other content.
+   *
+   * @defaultValue `'static'`
+   */
+  position?: CssPosition;
+
+  /**
+   * The position within the page to "fix" the `AppBar` when the `fixed` prop is
+   * enabled.
+   *
+   * @defaultValue `"top"`
+   */
+  pagePosition?: AppBarPosition;
+
+  /**
+   * Set this to `true` to remove the box-shadow.
+   *
+   * @defaultValue `false`
+   */
+  disableElevation?: boolean;
+
+  /**
+   * The theme to apply to the `AppBar`.
+   *
+   * @defaultValue `"primary"`
+   * @see {@link AppBarTheme}
+   */
+  theme?: AppBarTheme;
+
+  /**
+   * @defaultValue `stacked ? "auto" : "normal"`
+   * @see {@link AppBarHeight}
+   */
+  height?: AppBarHeight;
+
+  /** @see {@link CssUtilsOptions.surfaceColor} */
+  surfaceColor?: "light" | "dark";
+
+  /**
+   * Set this to `true` if the app bar's positioning and width should be
+   * changed whenever the scrollbar is visible on the page. This defaults to
+   * `true` when the {@link position} prop is `true` so that once dialogs and menus
+   * become visible the contents in the app bar do not need to be repainted.
+   *
+   * @since 6.0.0
+   * @defaultValue `position === "fixed"`
+   */
+  scrollbarOffset?: boolean;
+}
+
+/**
+ * Apply the `className`s for a tree component. This will be type-safe if using
+ * typescript.
+ *
+ * @since 6.0.0
+ */
+export function appBar(options: AppBarClassNameOptions = {}): string {
+  const {
+    className,
+    theme = "primary",
+    stacked,
+    height = stacked ? "auto" : "normal",
+    position = "static",
+    pagePosition = "top",
+    scrollbarOffset = position === "fixed",
+    align,
+    grid,
+    gridColumns,
+    gridName,
+    justify,
+    reversed,
+    surfaceColor,
+    disableWrap = true,
+    disablePadding,
+    disableElevation,
+  } = options;
+  const surface = theme === "surface";
+  const clear = theme === "clear";
+
+  return cnb(
+    styles({
+      surface,
+      [height]: height !== "normal",
+      fixed: position !== "static",
+      stacked,
+      sticky: position === "sticky",
+      [pagePosition]: position !== "static",
+      elevated: position !== "static" && !disableElevation,
+      "scrollbar-offset": scrollbarOffset,
+      "static-scrollbar-offset": position === "static" && scrollbarOffset,
+    }),
+    box({
+      align,
+      stacked,
+      fullWidth: true,
+      grid,
+      gridColumns,
+      gridName,
+      justify,
+      reversed,
+      disableWrap,
+      disablePadding,
+    }),
+    cssUtils({
+      backgroundColor: !surface && !clear ? theme : undefined,
+      surfaceColor,
+    }),
+    className
+  );
+}
+
+/**
+ * - `"small"` - the first character in the title will be `1rem` (`$keyline`)
+ *   from the edge of the app bar horizontally
+ * - `"nav"` - this should be set when there is a nav button before the title so
+ *   that the first character in the title will be `4.5rem` (`title-keyline`)
+ * - `"list"` - this should be used when the title should align with the list
+ *   item keyline and there is no nav icon before.
+ *
+ * @since 6.0.0
+ */
+export type AppBarTitleKeyline = "small" | "nav" | "list";
+
+/** @since 6.0.0 */
+export interface AppBarTitleClassNameOptions {
+  className?: string;
+
+  /**
+   * @defaultValue `"small"`
+   * @see {@link AppBarTitleKeyline}
+   */
+  keyline?: AppBarTitleKeyline;
+}
+
+/**
+ * Apply the `className`s for a `AppBarTitle` component. This will be type-safe
+ * if using typescript.
+ *
+ * @since 6.0.0
+ */
+export function appBarTitle(options: AppBarTitleClassNameOptions = {}): string {
+  const { className, keyline = "small" } = options;
+  return cnb(
+    titleStyles({
+      keyline: keyline == "list",
+      "nav-keyline": keyline === "nav",
+    }),
+    className
+  );
+}