@allxsmith/bestax-bulma 5.15.3 → 5.16.0

package/dist/index.cjs.js

@@ -211,6 +211,8 @@ const validColors = [
     'grey-light',
     'grey-lighter',
     'white',
+    'white-bis',
+    'white-ter',
     'light',
     'dark',
 ];
@@ -421,6 +423,57 @@ const validViewports = [
     'widescreen-only',
     'fullhd',
 ];
+/**
+ * Valid Bulma float classes.
+ * @example 'left', 'right'
+ */
+const validFloats = ['left', 'right'];
+/**
+ * Valid Bulma overflow classes.
+ * @example 'clipped'
+ */
+const validOverflows = ['clipped'];
+/**
+ * Valid Bulma interaction classes.
+ * @example 'unselectable', 'clickable'
+ */
+const validInteractions = ['unselectable', 'clickable'];
+/**
+ * Valid Bulma cursor helper values.
+ *
+ * These share no class stem: `pointer` renders `is-clickable` and `help`
+ * renders `is-cursor-help`, so the class each one emits lives in
+ * `cursorClasses` rather than being built from the value.
+ * @example 'pointer', 'help'
+ */
+const validCursors = ['pointer', 'help'];
+/**
+ * Cursor helper value to the class it renders.
+ *
+ * A `Record` over `validCursors` on purpose: TypeScript then rejects a value
+ * added to the tuple with no class for it, and a class for a value the tuple
+ * does not carry, so the accepted set and the rendered classes cannot drift
+ * apart.
+ */
+const cursorClasses = {
+    pointer: 'is-clickable',
+    help: 'is-cursor-help',
+};
+/**
+ * Valid Bulma border-radius helper classes.
+ * @example 'radiusless'
+ */
+const validRadii = ['radiusless'];
+/**
+ * Valid Bulma shadow helper classes.
+ * @example 'shadowless'
+ */
+const validShadows = ['shadowless'];
+/**
+ * Valid Bulma responsive helper classes.
+ * @example 'mobile', 'narrow'
+ */
+const validResponsives = ['mobile', 'narrow'];
 /**
  * Creates the shared class-building helpers used by the Bulma helper hooks.
  *
@@ -887,33 +940,28 @@ const useOtherClasses = (props) => {
         const { classes, addPrefixedClass, addClassNoViewport } = createBulmaClassHelpers(classPrefix);
         // Other Helpers (no viewport support)
         if (float) {
-            addClassNoViewport('is-pulled', float, ['left', 'right']);
+            addClassNoViewport('is-pulled', float, validFloats);
         }
         if (overflow) {
-            addClassNoViewport('is', overflow, ['clipped']);
+            addClassNoViewport('is', overflow, validOverflows);
         }
         if (overlay) {
             addPrefixedClass('is-overlay');
         }
         if (interaction) {
-            addClassNoViewport('is', interaction, ['unselectable', 'clickable']);
+            addClassNoViewport('is', interaction, validInteractions);
         }
-        if (cursor) {
-            if (cursor === 'pointer') {
-                addPrefixedClass('is-clickable');
-            }
-            else if (cursor === 'help') {
-                addPrefixedClass('is-cursor-help');
-            }
+        if (cursor && validCursors.includes(cursor)) {
+            addPrefixedClass(cursorClasses[cursor]);
         }
         if (radius) {
-            addClassNoViewport('is', radius, ['radiusless']);
+            addClassNoViewport('is', radius, validRadii);
         }
         if (shadow) {
-            addClassNoViewport('is', shadow, ['shadowless']);
+            addClassNoViewport('is', shadow, validShadows);
         }
         if (responsive) {
-            addClassNoViewport('is', responsive, ['mobile', 'narrow']);
+            addClassNoViewport('is', responsive, validResponsives);
         }
         // Bulma Skeleton Helper
         if (skeleton) {
@@ -1781,6 +1829,75 @@ const Card = withSubComponents(CardComponent, {
 /** Internal test-only exports. Not part of the public API. */
 const __test_exports__ = { renderFooter };
 
+/**
+ * The runtime mirror of `AnchorOnlyAttributes`, keyed so the two cannot drift.
+ *
+ * `Record<keyof …, true>` is what links them: the day React adds an anchor
+ * attribute, every component deriving its props from `as` accepts it and this
+ * object stops compiling until it is named here. A plain array beside a derived
+ * type drifts in the one direction that matters — the type accepts the new
+ * attribute and the filter lets it leak onto a `<div>`.
+ */
+const ANCHOR_ONLY_ATTRS = {
+    href: true,
+    target: true,
+    download: true,
+    hrefLang: true,
+    ping: true,
+    referrerPolicy: true,
+    media: true,
+    type: true,
+};
+/**
+ * `props` without the keys named in `strip`.
+ *
+ * The SET is per component and deliberately not shared, because the right
+ * answer differs and the differences are principled: how open the component's
+ * `as` is, and which of these attributes its own tags legitimately take. What
+ * IS shared is the derived source of truth above and this function. Each caller
+ * declares its delta next to the set it passes, which is the only place that
+ * stays true when a component's `as` changes.
+ */
+function omitAttrs(props, strip) {
+    const out = {};
+    // `Reflect.ownKeys`, not `Object.entries`: the latter drops symbol-keyed props.
+    // React enumerates props with `for...in`, which never reports a symbol, so
+    // nothing renders differently either way. It is not the same change for all
+    // three callers: Menu filtered by rest-destructure and kept them already,
+    // while Dropdown and Level filtered through `Object.entries` and did not, so
+    // this restores one and widens two. Symbols are the only shape where those
+    // two disagreed, and keeping them is the side a spread is on.
+    for (const key of Reflect.ownKeys(props)) {
+        // Enumerability, for the same reason in the other direction: `Reflect.ownKeys`
+        // also reports NON-enumerable own props, which every filter this replaced left
+        // behind. Copying one out would both add a prop the old code dropped and make
+        // it enumerable on the way, so widening the key source must not widen this.
+        if (!Object.prototype.propertyIsEnumerable.call(props, key))
+            continue;
+        const value = props[key];
+        // `hasOwnProperty`, not `key in strip`: `in` walks the prototype chain, so a
+        // prop named `toString`, `valueOf`, `constructor` or `hasOwnProperty` was
+        // stripped although no caller named it — and anything written to
+        // `Object.prototype` would start deleting props that share its keys.
+        if (typeof key === 'symbol' ||
+            !Object.prototype.hasOwnProperty.call(strip, key)) {
+            // `defineProperty`, not `out[key] = value`: assignment consults the
+            // prototype chain for a setter, and `__proto__` has one. A prop named
+            // `__proto__` would be swallowed by it — dropped from the result AND
+            // replacing the result's prototype with its value. A spread and a rest
+            // destructure both DEFINE, which is what makes them immune, so this has
+            // to define too.
+            Object.defineProperty(out, key, {
+                value,
+                writable: true,
+                enumerable: true,
+                configurable: true,
+            });
+        }
+    }
+    return out;
+}
+
 /**
  * Checks if code is running in a browser environment.
  * @param win - Window object.
@@ -2003,32 +2120,25 @@ const DropdownComponent = React.forwardRef(function DropdownComponent({ label, c
     return (jsxRuntime.jsxs("div", { className: dropdownClasses, ref: setRefs, id: id, "data-testid": "dropdown-root", ...rest, children: [jsxRuntime.jsx("div", { className: usePrefixedClassNames('dropdown-trigger'), children: jsxRuntime.jsxs("button", { ref: triggerRef, className: buttonClass, "aria-haspopup": "true", "aria-controls": id ? `${id}-menu` : undefined, "aria-expanded": active, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, disabled: disabled, type: "button", children: [jsxRuntime.jsx("span", { children: label }), jsxRuntime.jsx("span", { className: usePrefixedClassNames('icon', 'is-small'), "aria-hidden": "true", children: jsxRuntime.jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('dropdown-menu'), menuClassName), id: id ? `${id}-menu` : undefined, role: "menu", "data-testid": "dropdown-menu", onKeyDown: handleMenuKeyDown, children: jsxRuntime.jsx("div", { className: usePrefixedClassNames('dropdown-content'), onClick: handleMenuClick, tabIndex: -1, children: children }) })] }));
 });
 /**
- * The anchor-only attributes, withheld from a `<div>` or a `<button>`.
- *
- * Mirrors `LINK_ATTRS` in `bestax-migrate/src/sources/_shared/polymorphic.ts`,
- * which drops the same set when a migration lands one on a non-anchor. `rel` is
- * absent from both on purpose: React declares it on `HTMLAttributes<T>` — every
- * element — so withholding it would diverge from React's own typing, the same
- * call #641 recorded for `Navbar.Link`.
- */
-const LINK_ONLY_ATTRS = [
-    'href',
-    'target',
-    'download',
-    'hrefLang',
-    'ping',
-    'referrerPolicy',
-    'media',
-];
-/** `props` without any attribute only an anchor can carry. */
-function omitLinkAttrs(props) {
-    const out = {};
-    for (const [key, value] of Object.entries(props)) {
-        if (!LINK_ONLY_ATTRS.includes(key))
-            out[key] = value;
-    }
-    return out;
-}
+ * The anchor's attributes, minus the one a `<button>` legitimately takes.
+ *
+ * `type` stays: `as="button"` is a supported form and `type="submit"` is valid
+ * there, so stripping it would remove a working attribute. The exclusion is per
+ * COMPONENT where the reason is per TAG, so it also lets a `type` reach a
+ * `<div>`; selecting the set from the rendered element would close that, and
+ * moves output.
+ *
+ * This set differs from `Level.Item`'s in both directions, not just one. The
+ * `type` above, which Level strips and this component keeps, and `rel`, which
+ * Level adds and this component does not: React declares `rel` on
+ * `HTMLAttributes` for every element, so withholding it would diverge from
+ * React's own typing — the call #641 recorded for `Navbar.Link`. Level
+ * withholds it anyway, because it always has.
+ */
+const STRIP_FROM_NON_ANCHOR$1 = (() => {
+    const { type: _type, ...rest } = ANCHOR_ONLY_ATTRS;
+    return rest;
+})();
 /**
  * Bulma Dropdown item.
  *
@@ -2046,16 +2156,18 @@ const DropdownItem = ((itemProps) => {
     // plain-JS one, a loose `{...props}` spread, and the genericity a wrapping HOC
     // erases.
     //
-    // The whole link set, not `href` alone. Menu strips only `href` because its
-    // props never gained the rest; here they all arrive together under `as="a"`,
-    // and `bestax-migrate` already removes exactly this set (`LINK_ATTRS`) when it
-    // migrates onto a non-anchor — so stripping less would leave the codemod
-    // stricter than the component it migrates to.
+    // The whole link set, not `href` alone: they all arrive together under
+    // `as="a"`. Menu strips `href` only, because its `as` is open and a flat set
+    // would delete attributes legal on the element a caller named.
+    //
+    // `bestax-migrate` tracks the same question from the other side, per attribute
+    // per element (`LINK_ATTR_ELEMENTS`) rather than as one set — so the two lists
+    // are not interchangeable and neither derives from the other.
     //
     // Menu's condition also admits a custom component and a custom element, which
     // own their prop contracts. `as` is closed to three intrinsic tags here, so
     // neither can arrive and the anchor test is the whole rule.
-    const forwarded = Component === 'a' ? rest : omitLinkAttrs(rest);
+    const forwarded = Component === 'a' ? rest : omitAttrs(rest, STRIP_FROM_NON_ANCHOR$1);
     return (jsxRuntime.jsx(Component, { className: classNames(usePrefixedClassNames('dropdown-item', {
             'is-active': active,
         }), bulmaHelperClasses, className), tabIndex: 0, role: "menuitem", "data-testid": "dropdown-item", ...forwarded, ...(Component === 'button'
@@ -2120,6 +2232,11 @@ const MenuList = ({ className, children, ...props }) => {
     // Increment level for nested MenuLists
     return (jsxRuntime.jsx(MenuListLevelContext.Provider, { value: level + 1, children: jsxRuntime.jsx("ul", { className: ulClass, ...rest, children: children }) }));
 };
+/**
+ * `href` alone — annotated so a typo is a compile error rather than a silent
+ * no-op, the way both siblings' sets are.
+ */
+const STRIP_FROM_NON_LINK = { href: true };
 /**
  * MenuItem supports `as` prop for custom link components, e.g., react-router-dom Link.
  *
@@ -2139,8 +2256,20 @@ const MenuItem = React.forwardRef(function MenuItem(itemProps, ref) {
     const isLinkLike = Component === 'a' ||
         typeof Component !== 'string' ||
         isCustomElement(Component);
-    const { href: _href, ...withoutHref } = forwarded;
-    const linkProps = isLinkLike ? forwarded : withoutHref;
+    // `href` ALONE. `Dropdown.Item` strips every anchor-only attribute except
+    // `type`; `Level.Item` strips all of them, plus `rel`.
+    //
+    // Not because nothing else can arrive: `as` here is an open `React.ElementType`,
+    // and a non-fresh spread skips excess-property checking, so a typed caller
+    // CAN deliver `target` or `download` and they are forwarded. The set stays at
+    // `href` because widening it would be wrong for an open `as` — `referrerPolicy`
+    // on `as="img"`, `target` on `as="form"` and `media` on `as="source"` are all
+    // legal, and a flat strip would delete them. Getting that right needs a
+    // per-attribute-per-element rule, which `bestax-migrate` already models in
+    // `LINK_ATTR_ELEMENTS`.
+    const linkProps = isLinkLike
+        ? forwarded
+        : omitAttrs(forwarded, STRIP_FROM_NON_LINK);
     const itemClass = classNames({ [usePrefixedClassNames('is-active')]: active }, bulmaHelperClasses);
     // Split children into label and nested MenuList(s)
     const labelChildren = [];
@@ -2886,6 +3015,8 @@ const Navbar = withSubComponents(NavbarComponent, {
 const UNSTYLED_MODIFIER_COLORS = [
     'black-bis',
     'black-ter',
+    'white-bis',
+    'white-ter',
     'grey-darker',
     'grey-dark',
     'grey',
@@ -12662,8 +12793,8 @@ function cssVarToProp(varName) {
  * Mapping of camelCase prop names to their Bulma CSS variable counterparts.
  *
  * `--bulma-shadow` is excluded: `cssVarToProp` would mint it as `shadow`,
- * which already exists as a `BulmaOtherProps` prop (`shadow?: 'shadowless'`,
- * applied via `useBulmaClasses`) — keeping it out of this map means that
+ * which already exists as a `BulmaOtherProps` prop applied via
+ * `useBulmaClasses` — keeping it out of this map means that
  * prop keeps its existing class-based meaning, while `--bulma-shadow` is
  * still reachable through the `bulmaVars` object.
  */
@@ -12989,6 +13120,18 @@ const LevelRight = ({ className, children, color, bgColor, textColor, ...props }
     const levelRightClasses = classNames(mainClass, bulmaHelperClasses, className);
     return (jsxRuntime.jsx("div", { className: levelRightClasses, ...rest, children: children }));
 };
+/**
+ * The derived set plus `rel`.
+ *
+ * `rel` is not an anchor-only attribute — React declares it on every element, so
+ * `AnchorOnlyAttributes` excludes it — but this component has always withheld it
+ * from a non-anchor, so it is named separately rather than folded into the shared
+ * set. That separation is what says which names come from where.
+ *
+ * The annotation is load-bearing: without it a typo adds a key nobody strips, and
+ * widening the key type to `string` also erases `omitAttrs`'s return type.
+ */
+const STRIP_FROM_NON_ANCHOR = { ...ANCHOR_ONLY_ATTRS, rel: true };
 /**
  * Individual item, can be rendered as `div`, `p`, or `a`.
  *
@@ -13011,32 +13154,11 @@ const LevelItem = ({ as = 'div', hasTextCentered, className, children, color, bg
     // declares them at every `as` — narrowing that is source-breaking (#672) — so
     // the runtime is what keeps `<Level.Item as="p" download>` from rendering a
     // dead attribute.
-    //
-    // Keyed off `AnchorOnlyAttributes` rather than repeated as a list, because a
-    // hand list beside a derived type drifts in the one direction that matters:
-    // the day React adds an anchor attribute, the type would accept it at every
-    // `as` while the list let it leak onto a `<div>`. `Record` makes that a
-    // compile error here until this object catches up. #682 is the issue for
-    // sharing the rule with the two components that keep their own copies.
-    const ANCHOR_ONLY = {
-        href: true,
-        target: true,
-        download: true,
-        hrefLang: true,
-        ping: true,
-        referrerPolicy: true,
-        media: true,
-        type: true,
-        // `rel` is NOT in the subtraction: React declares it on `HTMLAttributes`,
-        // for every element. It is here because this component has always withheld
-        // it from a non-anchor, and it is named separately so the key set above
-        // stays honest about where each name comes from.
-        rel: true,
-    };
+    // `STRIP_FROM_NON_ANCHOR` above names the set and why `rel` is in it.
     if (Tag === 'a') {
         return (jsxRuntime.jsx("a", { className: levelItemClasses, ...rest, children: children }));
     }
-    const withoutAnchorAttrs = Object.fromEntries(Object.entries(rest).filter(([key]) => !(key in ANCHOR_ONLY)));
+    const withoutAnchorAttrs = omitAttrs(rest, STRIP_FROM_NON_ANCHOR);
     return (jsxRuntime.jsx(Tag, { className: levelItemClasses, ...withoutAnchorAttrs, children: children }));
 };
 const Level = withSubComponents(LevelComponent, {
@@ -13326,13 +13448,20 @@ exports.validAlignSelfs = validAlignSelfs;
 exports.validAlignments = validAlignments$1;
 exports.validColorShades = validColorShades;
 exports.validColors = validColors;
+exports.validCursors = validCursors;
 exports.validDisplays = validDisplays;
 exports.validFlexDirections = validFlexDirections;
 exports.validFlexGrowShrink = validFlexGrowShrink;
 exports.validFlexWraps = validFlexWraps;
+exports.validFloats = validFloats;
 exports.validFontFamilies = validFontFamilies;
+exports.validInteractions = validInteractions;
 exports.validJustifyContents = validJustifyContents;
+exports.validOverflows = validOverflows;
+exports.validRadii = validRadii;
+exports.validResponsives = validResponsives;
 exports.validSchemeColors = validSchemeColors;
+exports.validShadows = validShadows;
 exports.validSizes = validSizes$1;
 exports.validTableColors = validTableColors;
 exports.validTextSizes = validTextSizes;