@allxsmith/bestax-bulma 5.25.0 → 5.26.0

package/dist/index.cjs

@@ -15300,17 +15300,20 @@ function cssVarToProp(varName) {
         .join('');
 }
 /**
- * Prop names `cssVarToProp` would mint that are already `BulmaOtherProps`
- * helper props: `--bulma-shadow` becomes `shadow` and `--bulma-radius` becomes
- * `radius`. They stay out of `bulmaVarPropMap`, so on Theme each is the helper
- * prop it is on every other component, and both variables are still reachable
- * through `bulmaVars`.
+ * Prop names `cssVarToProp` would mint that are already helper props:
+ * `--bulma-shadow` becomes `shadow`, `--bulma-radius` becomes `radius` and
+ * `--bulma-column-gap` becomes `columnGap`. They stay out of
+ * `bulmaVarPropMap`, so on Theme each is the helper prop it is on every other
+ * component, and every one of those variables is still reachable through
+ * `bulmaVars`.
  *
  * `radius` was missed here once and set `--bulma-radius` while typed as the
  * helper (#694). It still writes that variable, so what it did then keeps
- * working; see `themeRadiusVar`.
+ * working; see `themeRadiusVar`. `columnGap` joined when the gap helpers
+ * became shared helper props, and keeps its old variable route the same way;
+ * see `themeColumnGapVar`.
  */
-const helperPropNames = ['shadow', 'radius'];
+const helperPropNames = ['shadow', 'radius', 'columnGap'];
 /**
  * Mapping of camelCase prop names to their Bulma CSS variable counterparts,
  * minus the `helperPropNames` above.
@@ -15372,6 +15375,36 @@ const themeRadiusVar = (radius) => {
         `bulmaVars={{ '--bulma-radius': '${radius}' }} instead.`);
     return radius;
 };
+/**
+ * What `columnGap` writes to `--bulma-column-gap` on a Theme, or `undefined`
+ * when it writes nothing.
+ *
+ * Until the gap helpers were shared helper props, `columnGap` on Theme was
+ * the camelCase prop Theme mints for `--bulma-column-gap`. It was never in
+ * `ThemeProps`, so only untyped code reached it, but that code got the
+ * columns gutter it asked for. It is the column gap helper now, as on every
+ * other component, so a gap step goes to the helper and writes nothing here.
+ * Any other non-empty string is still written as given, so a length such as
+ * `'1rem'` keeps working, with a development warning pointing at `bulmaVars`.
+ *
+ * Only a string writes anything, for the reason `themeRadiusVar` gives: a
+ * number or a boolean was never a usable length.
+ */
+const themeColumnGapVar = (columnGap) => {
+    if (typeof columnGap !== 'string' || columnGap === '') {
+        return undefined;
+    }
+    if (validGaps.includes(columnGap)) {
+        return undefined;
+    }
+    warnOnce('Theme:column-gap-variable', `[bestax-bulma] <Theme columnGap="${columnGap}">: setting ` +
+        '--bulma-column-gap through the columnGap prop is deprecated and will ' +
+        'stop working in a future major version. On Theme, as on every other ' +
+        'component, columnGap is the column gap helper ' +
+        `("${validGaps.join('", "')}"). Set the variable with ` +
+        `bulmaVars={{ '--bulma-column-gap': '${columnGap}' }} instead.`);
+    return columnGap;
+};
 /** The one `<style>` element every `isRoot` Theme writes into. */
 const ROOT_STYLE_ID = 'bestax-bulma-theme-vars';
 /**
@@ -15449,8 +15482,9 @@ const setRootThemeRules = (order, rules) => {
  *   <Button color="primary">Themed</Button>
  * </Theme>
  */
-const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode, radius, ...restProps }) => {
+const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode, radius, columnGap, ...restProps }) => {
     const radiusVar = themeRadiusVar(radius);
+    const columnGapVar = themeColumnGapVar(columnGap);
     const radiusHelper = validRadii.includes(radius)
         ? radius
         : undefined;
@@ -15464,6 +15498,18 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode,
             `element, put radius="${radiusHelper}" on it. To change the radius ` +
             "across the page, set bulmaVars={{ '--bulma-radius': '…' }} instead.");
     }
+    // The same for a gap step in `columnGap`, which reads like the columns
+    // gutter it once set and, at the root, has no element for its class.
+    const columnGapStep = typeof columnGap === 'number' ? String(columnGap) : columnGap;
+    if (isRoot &&
+        columnGapStep !== undefined &&
+        validGaps.includes(columnGapStep)) {
+        warnOnce('Theme:root-column-gap', `[bestax-bulma] <Theme isRoot columnGap="${columnGapStep}">: a root ` +
+            `Theme has no wrapper element for is-column-gap-${columnGapStep}, ` +
+            'and a gap step sets no variable, so this does nothing. To change ' +
+            'the columns gutter across the page, set ' +
+            "bulmaVars={{ '--bulma-column-gap': '…' }} instead.");
+    }
     // Extract Bulma variable props from restProps
     const { bulmaVarProps, otherProps } = React.useMemo(() => {
         const varProps = {};
@@ -15483,6 +15529,7 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode,
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...otherProps,
         radius: radiusHelper,
+        columnGap,
     });
     // Merge bulmaVars and individual props, with props taking precedence
     const mergedVars = React.useMemo(() => {
@@ -15495,8 +15542,11 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode,
         if (radiusVar !== undefined) {
             vars['--bulma-radius'] = radiusVar;
         }
+        if (columnGapVar !== undefined) {
+            vars['--bulma-column-gap'] = columnGapVar;
+        }
         return vars;
-    }, [bulmaVars, bulmaVarProps, radiusVar]);
+    }, [bulmaVars, bulmaVarProps, radiusVar, columnGapVar]);
     // This Theme's place among root Themes; see `rootThemeRules`.
     const [rootOrder] = React.useState(() => nextRootOrder++);
     // The `:root` rules this Theme contributes, or '' when it contributes none.