material-plus-ui 1.4.0 → 1.6.0

package/dist/tailwind.css

@@ -128,7 +128,27 @@
      * `outline`, and a focus ring then reads as no change at all.
      */
     --mp-source-color: #00639b;
+  }
 
+  /*
+   * The light scheme's own tone stops, on `:root` and on anything that asks for
+   * light by name.
+   *
+   * The second selector is what makes forcing light **scoped** work. The dark
+   * block below applies to any element carrying the attribute, so a dark region
+   * inside a light page has always been one attribute; the reverse was not, and
+   * the documentation said it was. Under a system preference of dark, a
+   * `[data-mp-scheme='light']` on a section matched no rule at all — the media
+   * query had already retuned `:root`, the section inherited it, and nothing
+   * put the light stops back. It came out dark.
+   *
+   * `--mp-source-color` stays on `:root` alone and above this, deliberately.
+   * Repeating it here would freeze it: a consumer scoping a different source
+   * colour to a section would find this rule overriding theirs on any element
+   * that also asked for light.
+   */
+  :root,
+  [data-mp-scheme='light'] {
     /*
      * Tone stops.
      *
@@ -1194,6 +1214,11 @@
  * `min(span, columns)` is the clamp: `span={99}` fills its row instead of
  * running off the page, which is what the caller meant.
  *
+ * `span="grow"` is the one width that is not this arithmetic. It is the row's
+ * remainder, which nothing here can compute — only the flex algorithm knows what
+ * is left after the other items have been laid out — so a growing item is given
+ * a width of nought and a `flex-grow` of one, and takes the rest.
+ *
  * Every slot cascades upward — each window size class falls back through the
  * ones below it — so `span={{ expanded: 6 }}` sets one custom property and not
  * five. The chains get long at `extra-large`; that is the cost of keeping the
@@ -1213,23 +1238,71 @@
   --_mp-cols: var(--_mp-cols-compact, 12);
   --_mp-gap-x: var(--_mp-gap-x-compact, 0px);
   --_mp-gap-y: var(--_mp-gap-y-compact, 0px);
+
+  /* The boundary, and the reason it has to exist.
+   *
+   * An item's slots are inline custom properties, and a custom property
+   * *inherits*. So a grid nested inside an item — which is how nesting is spelled
+   * — sits inside that item's `--_mp-span-large`, and an inner item that only
+   * declared `--_mp-span-compact` resolves the outer one at every class above
+   * compact: `span={12}` comes out a sixth of the row it is actually in, and the
+   * card whose title it holds wraps a letter at a time.
+   *
+   * A grid is where a span stops meaning anything, so a grid is where the slots
+   * are put back to nothing. `initial` on a custom property is the guaranteed-
+   * invalid value, which is what makes the `var()` fallbacks below take over
+   * rather than a number from two levels up. Fifteen declarations, once per
+   * grid, and the arithmetic under them is the same as it was.
+   *
+   * Written on `.mp-grid` rather than on `.mp-grid-item` because an item that
+   * reset its own slots would be resetting the ones it had just been given. */
+  --_mp-span-compact: initial;
+  --_mp-span-medium: initial;
+  --_mp-span-expanded: initial;
+  --_mp-span-large: initial;
+  --_mp-span-extra-large: initial;
+  --_mp-offset-compact: initial;
+  --_mp-offset-medium: initial;
+  --_mp-offset-expanded: initial;
+  --_mp-offset-large: initial;
+  --_mp-offset-extra-large: initial;
+  --_mp-grow-compact: initial;
+  --_mp-grow-medium: initial;
+  --_mp-grow-expanded: initial;
+  --_mp-grow-large: initial;
+  --_mp-grow-extra-large: initial;
 }
 
 .mp-grid-item {
   --_mp-span: var(--_mp-span-compact, var(--_mp-cols, 12));
   --_mp-offset: var(--_mp-offset-compact, 0);
+  --_mp-grow: var(--_mp-grow-compact, 0);
 
   /* One column plus one gutter. `--_mp-cols` and `--_mp-gap-x` are inherited
      from the grid, so this re-resolves on its own at every window class. */
   --_mp-track: calc((100% + var(--_mp-gap-x, 0px)) / var(--_mp-cols, 12));
 
-  /* Inseparable from the width under them: `flex` stops the row resizing the
-     item, `min-width` stops a long unbroken word doing the same, and
-     `box-sizing` is what makes the percentage mean the whole item. */
+  /* Inseparable from the width under them: the three `flex` longhands stop the
+     row resizing the item, `min-width` stops a long unbroken word doing the
+     same, and `box-sizing` is what makes the percentage mean the whole item.
+
+     Longhands rather than `flex: 0 0 auto` because `--_mp-grow` is the one part
+     of the shorthand that varies, and a shorthand cannot be half a variable. */
   box-sizing: border-box;
-  flex: 0 0 auto;
+  flex-grow: var(--_mp-grow);
+  flex-shrink: 0;
+  flex-basis: auto;
   min-width: 0;
-  width: calc(var(--_mp-track) * min(var(--_mp-span), var(--_mp-cols, 12)) - var(--_mp-gap-x, 0px));
+
+  /* `1 - grow` is the switch, and it is arithmetic rather than a second
+     declaration because a custom property cannot choose between two rules.
+     A growing item measures nought and is then handed the row's remainder by
+     `flex-grow`, which is the only place that remainder is known; every other
+     item multiplies its column count by one and is the width it always was. */
+  width: calc(
+    (1 - var(--_mp-grow)) *
+      (var(--_mp-track) * min(var(--_mp-span), var(--_mp-cols, 12)) - var(--_mp-gap-x, 0px))
+  );
   margin-inline-start: calc(var(--_mp-track) * min(var(--_mp-offset), var(--_mp-cols, 12)));
 }
 
@@ -1243,6 +1316,7 @@
   .mp-grid-item {
     --_mp-span: var(--_mp-span-medium, var(--_mp-span-compact, var(--_mp-cols, 12)));
     --_mp-offset: var(--_mp-offset-medium, var(--_mp-offset-compact, 0));
+    --_mp-grow: var(--_mp-grow-medium, var(--_mp-grow-compact, 0));
   }
 }
 
@@ -1262,6 +1336,7 @@
       --_mp-offset-expanded,
       var(--_mp-offset-medium, var(--_mp-offset-compact, 0))
     );
+    --_mp-grow: var(--_mp-grow-expanded, var(--_mp-grow-medium, var(--_mp-grow-compact, 0)));
   }
 }
 
@@ -1290,6 +1365,10 @@
       --_mp-offset-large,
       var(--_mp-offset-expanded, var(--_mp-offset-medium, var(--_mp-offset-compact, 0)))
     );
+    --_mp-grow: var(
+      --_mp-grow-large,
+      var(--_mp-grow-expanded, var(--_mp-grow-medium, var(--_mp-grow-compact, 0)))
+    );
   }
 }
 
@@ -1336,6 +1415,13 @@
         var(--_mp-offset-expanded, var(--_mp-offset-medium, var(--_mp-offset-compact, 0)))
       )
     );
+    --_mp-grow: var(
+      --_mp-grow-extra-large,
+      var(
+        --_mp-grow-large,
+        var(--_mp-grow-expanded, var(--_mp-grow-medium, var(--_mp-grow-compact, 0)))
+      )
+    );
   }
 }
 

package/dist/types.d.ts

@@ -152,6 +152,70 @@ export interface MPStyleProps {
     /** Stretches the control to the width of its container. */
     fullWidth?: boolean;
 }
+/**
+ * The raw events a control produces, for the handling its own callbacks do not
+ * cover.
+ *
+ * Every control here reports what it is *for* — an `MPTextField` hands over its
+ * text, an `MPSelect` its choice, an `MPDatePicker` its day — and that named
+ * callback is what a caller should reach for first. These are the other half:
+ * the keystroke that was not a change, the combination that means something to
+ * the page rather than to the field, the right-click that opens a menu of your
+ * own.
+ *
+ * ## They go on the control, not on the box
+ *
+ * Which is the opposite of where `className` goes, and for the reason that
+ * makes them different questions: a class describes the whole thing, and an
+ * event came from one element. So `onKeyDown` is a keystroke that landed in the
+ * field and never one that landed on the reveal toggle beside it, and `onFocus`
+ * is the control taking focus rather than anything in the row taking it.
+ *
+ * A `<div onKeyDown>` wrapped around a control gets some of this by bubbling,
+ * and that is what a caller had to write before. What it cannot do is go
+ * *first*.
+ *
+ * ## Yours runs first
+ *
+ * And a control that has its own answer for a key checks `defaultPrevented`
+ * before giving it. That is what makes `event.preventDefault()` a real answer
+ * rather than a suggestion: Ctrl+Enter can send a message without the field
+ * also reporting the plain submission it would otherwise have seen.
+ *
+ * `Element` is whichever element the component says it puts these on — an
+ * `<input>`, a trigger button — so `event.currentTarget` is typed as the thing
+ * it actually is.
+ */
+export interface MPControlEventProps<Element extends HTMLElement = HTMLElement> {
+    /**
+     * Every keystroke that reaches the control, modifiers included — which makes
+     * this the one to reach for for a combination. It is also the only one of
+     * these where `preventDefault` still means anything.
+     */
+    onKeyDown?: React.KeyboardEventHandler<Element>;
+    /** The same keystroke released. */
+    onKeyUp?: React.KeyboardEventHandler<Element>;
+    /**
+     * The control took the focus.
+     *
+     * On the control itself rather than on the row, so it does not fire again for
+     * the button beside it — and it is what a form library wants for its "touched"
+     * bookkeeping, together with `onBlur`.
+     */
+    onFocus?: React.FocusEventHandler<Element>;
+    /** The control lost it. */
+    onBlur?: React.FocusEventHandler<Element>;
+    /** A press. The component's own answer to a press still happens. */
+    onClick?: React.MouseEventHandler<Element>;
+    /** Two presses. Selecting a field's whole value is the usual reason. */
+    onDoubleClick?: React.MouseEventHandler<Element>;
+    /**
+     * The right-click, or whatever opens a context menu on the platform.
+     * `event.preventDefault()` is how the browser's own menu is replaced with one
+     * of yours.
+     */
+    onContextMenu?: React.MouseEventHandler<Element>;
+}
 /**
  * The props a glyph component is handed when Material Plus renders one.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-plus-ui",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "A React component library implementing Material Design 3 — the components other Material libraries do not ship, and wider versions of the ones they do. Built on Base UI and Tailwind CSS v4, themed with CSS custom properties so it can coexist with an existing Material setup. ESM only, types included.",
   "type": "module",
   "sideEffects": [
@@ -54,6 +54,11 @@
       "module": "./dist/constants/icons.js",
       "default": "./dist/constants/icons.js"
     },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "module": "./dist/hooks/index.js",
+      "default": "./dist/hooks/index.js"
+    },
     "./components/*": {
       "types": "./dist/components/*/index.d.ts",
       "module": "./dist/components/*/index.js",