@allxsmith/bestax-bulma 5.24.0 → 5.26.0

package/dist/index.esm.js

@@ -267,6 +267,35 @@ const validSchemeColors = [
  * @example '0', '1', 'auto'
  */
 const validSizes$1 = ['0', '1', '2', '3', '4', '5', '6', 'auto'];
+/**
+ * Valid Bulma gap steps, taken by `gap`, `columnGap` and `rowGap`. Each whole
+ * step is 0.5rem, so `2` is 1rem and `8` is 4rem, and the half steps sit
+ * between them. They render `is-gap-<value>`, `is-column-gap-<value>` and
+ * `is-row-gap-<value>`.
+ *
+ * This is a different scale from `validSizes`: `gap="2"` is 1rem where
+ * `m="2"` is 0.5rem.
+ * @example '0', '0.5', '2', '8'
+ */
+const validGaps = [
+    '0',
+    '0.5',
+    '1',
+    '1.5',
+    '2',
+    '2.5',
+    '3',
+    '3.5',
+    '4',
+    '4.5',
+    '5',
+    '5.5',
+    '6',
+    '6.5',
+    '7',
+    '7.5',
+    '8',
+];
 /**
  * Valid Bulma text size classes.
  * @example '1', '2', '3'
@@ -649,7 +678,13 @@ const useColorStyles = (props) => {
 };
 
 /**
- * A hook that generates Bulma margin and padding helper classes.
+ * A gap step as the class reads it. Numbers are accepted for the steps, so
+ * `2` and `'2'` both become `'2'`; anything else is checked against
+ * `validGaps` by the caller.
+ */
+const gapValue = (value) => typeof value === 'number' ? String(value) : value;
+/**
+ * A hook that generates Bulma margin, padding and gap helper classes.
  *
  * @function useSpacingClasses
  * @param props - Spacing-related Bulma helper props.
@@ -660,9 +695,9 @@ const useColorStyles = (props) => {
  */
 const useSpacingClasses = (props) => {
     const { classPrefix } = useConfig();
-    const { m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py } = props;
+    const { m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, gap, columnGap, rowGap, gapless, } = props;
     return useMemo(() => {
-        const { classes, addClassNoViewport } = createBulmaClassHelpers(classPrefix);
+        const { classes, addClassNoViewport, addPrefixedClass } = createBulmaClassHelpers(classPrefix);
         // Spacing (no viewport support in Bulma)
         addClassNoViewport('m', m, validSizes$1);
         addClassNoViewport('mt', mt, validSizes$1);
@@ -678,8 +713,42 @@ const useSpacingClasses = (props) => {
         addClassNoViewport('pl', pl, validSizes$1);
         addClassNoViewport('px', px, validSizes$1);
         addClassNoViewport('py', py, validSizes$1);
+        // Gap (no viewport support in Bulma). `gapless` and `is-gap-*` both set
+        // the `gap` shorthand at one class of specificity, so beside each other
+        // the stylesheet's rule order would decide. A valid `gap` settles it on
+        // its own. The axis props need no such care: Bulma declares every
+        // `is-column-gap-*` and `is-row-gap-*` after the shorthands, so each wins
+        // its own axis over `gap` and `gapless` alike.
+        const gapStep = gapValue(gap);
+        const hasGap = validGaps.some(v => v === gapStep);
+        addClassNoViewport('is-gap', gapStep, validGaps);
+        if (gapless && !hasGap) {
+            addPrefixedClass('is-gapless');
+        }
+        addClassNoViewport('is-column-gap', gapValue(columnGap), validGaps);
+        addClassNoViewport('is-row-gap', gapValue(rowGap), validGaps);
         return classNames(classes);
-    }, [classPrefix, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py]);
+    }, [
+        classPrefix,
+        m,
+        mt,
+        mr,
+        mb,
+        ml,
+        mx,
+        my,
+        p,
+        pt,
+        pr,
+        pb,
+        pl,
+        px,
+        py,
+        gap,
+        columnGap,
+        rowGap,
+        gapless,
+    ]);
 };
 
 /**
@@ -1111,7 +1180,7 @@ const useOtherClasses = (props) => {
  * // rest: { className: 'custom-class' }
  */
 const useBulmaClasses = (props) => {
-    const { color, backgroundColor, colorShade, backgroundColorShade, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, textSize, textAlign, textTransform, textWeight, fontFamily, display, visibility, flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, float, overflow, overflowX, overflowY, overlay, interaction, cursor, radius, shadow, responsive, viewport, displayMobile, displayTablet, displayTabletOnly, displayTouch, displayDesktop, displayDesktopOnly, displayWidescreen, displayWidescreenOnly, displayFullhd, textSizeMobile, textSizeTablet, textSizeDesktop, textSizeWidescreen, textSizeFullhd, textAlignMobile, textAlignTablet, textAlignDesktop, textAlignWidescreen, textAlignFullhd, visibilityMobile, visibilityTablet, visibilityTabletOnly, visibilityTouch, visibilityDesktop, visibilityDesktopOnly, visibilityWidescreen, visibilityWidescreenOnly, visibilityFullhd, skeleton, clearfix, pos, relative, fullHeight, aspectRatio, ...rest } = props;
+    const { color, backgroundColor, colorShade, backgroundColorShade, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, gap, columnGap, rowGap, gapless, textSize, textAlign, textTransform, textWeight, fontFamily, display, visibility, flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, float, overflow, overflowX, overflowY, overlay, interaction, cursor, radius, shadow, responsive, viewport, displayMobile, displayTablet, displayTabletOnly, displayTouch, displayDesktop, displayDesktopOnly, displayWidescreen, displayWidescreenOnly, displayFullhd, textSizeMobile, textSizeTablet, textSizeDesktop, textSizeWidescreen, textSizeFullhd, textAlignMobile, textAlignTablet, textAlignDesktop, textAlignWidescreen, textAlignFullhd, visibilityMobile, visibilityTablet, visibilityTabletOnly, visibilityTouch, visibilityDesktop, visibilityDesktopOnly, visibilityWidescreen, visibilityWidescreenOnly, visibilityFullhd, skeleton, clearfix, pos, relative, fullHeight, aspectRatio, ...rest } = props;
     const colorClasses = useColorClasses({
         color,
         colorShade,
@@ -1134,6 +1203,10 @@ const useBulmaClasses = (props) => {
         pl,
         px,
         py,
+        gap,
+        columnGap,
+        rowGap,
+        gapless,
     });
     const typographyClasses = useTypographyClasses({
         textSize,
@@ -1302,10 +1375,13 @@ const ColumnsComponent = ({ className, textColor, color: _fieldColor, bgColor, i
     const resolvedGapDesktop = gapDesktop ?? gapSizeDesktop;
     const resolvedGapWidescreen = gapWidescreen ?? gapSizeWidescreen;
     const resolvedGapFullhd = gapFullhd ?? gapSizeFullhd;
+    // Untyped code can still pass the gap helpers ColumnsProps leaves out. They
+    // are dropped here, so they render no class and never reach the DOM.
+    const { columnGap: _columnGap, rowGap: _rowGap, ...helperProps } = props;
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
-        ...props,
+        ...helperProps,
     });
     const mainClass = usePrefixedClassNames('columns');
     // Build gap classes with prefixes
@@ -15222,17 +15298,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.
@@ -15294,6 +15373,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';
 /**
@@ -15371,8 +15480,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;
@@ -15386,6 +15496,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 } = useMemo(() => {
         const varProps = {};
@@ -15405,6 +15527,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 = useMemo(() => {
@@ -15417,8 +15540,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] = useState(() => nextRootOrder++);
     // The `:root` rules this Theme contributes, or '' when it contributes none.
@@ -15863,5 +15989,5 @@ const Section = ({ size, className, children, color, bgColor, textColor, style,
     return (jsx("section", { className: sectionClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 
-export { Autocomplete, Avatar, Avatars, Badge, Block, Box, Breadcrumb, Button, Buttons, Card, Carousel, CarouselItem, Cell, Checkbox, Checkboxes, ClientOnly, Code, Collapse, Collapses, Column, Columns, ConfigProvider, Container, Content, Control, DateInput, DateInputBase, DateTimeInput, DateTimeInputBase, Delete, Dialog, DialogContainer, Divider, Dropdown, DropdownDivider, DropdownItem, Emphasis, Field, FieldBody, FieldLabel, Figure, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, InputBase, Level, LevelItem, LevelLeft, LevelRight, Link, LinkButton, ListItem, Loader, Loading, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarLink, NavbarMenu, NavbarStart, Notification, NotificationContainer, NumberInput, Numberinput, OrderedList, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Paragraph, Popover, PopoverBody, PopoverClose, PopoverFooter, PopoverHeader, Portal, Pre, Progress, Radio, Radios, Rate, Reveal, Section, Select, SelectBase, Sidebar, Skeleton, Slider, Span, Step, Steps, Strong, SubTitle, Switch, Tab, TabContentItem, TabItem, TabList, Table, Tabs, TabsContent, Tag, TagInput, Taginput, Tags, Tbody, Td, TextArea, TextAreaBase, Tfoot, Th, Thead, Theme, TimeInput, TimeInputBase, Title, Toast, ToastContainer, Tooltip, Tr, UnorderedList, checkboxColors, checkboxSizes, classNames, createPrefixedClassNames, dialog, isBrowser$1 as isBrowser, mergeBulmaStyles, notification, prefixedClassNames, radioColors, radioSizes, switchColors, switchSizes, toast, useBulmaClasses, useClassPrefix, useColorClasses, useColorStyles, useConfig, useFlexboxClasses, useFocusTrap, useIconLibrary, useInsideControl, useInsideField, useIsHydrated, useOtherClasses, usePrefixedClass, usePrefixedClassNames, useSpacingClasses, useTypographyClasses, useVisibilityClasses, validAlignContents, validAlignItems, validAlignSelfs, validAlignments$1 as validAlignments, validAspectRatios, validAxisOverflows, validColorShades, validColors, validCursors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFloats, validFontFamilies, validInteractions, validJustifyContents, validOverflows, validPositions, validRadii, validResponsives, validSchemeColors, validShadows, validSizes$1 as validSizes, validTableColors, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities };
+export { Autocomplete, Avatar, Avatars, Badge, Block, Box, Breadcrumb, Button, Buttons, Card, Carousel, CarouselItem, Cell, Checkbox, Checkboxes, ClientOnly, Code, Collapse, Collapses, Column, Columns, ConfigProvider, Container, Content, Control, DateInput, DateInputBase, DateTimeInput, DateTimeInputBase, Delete, Dialog, DialogContainer, Divider, Dropdown, DropdownDivider, DropdownItem, Emphasis, Field, FieldBody, FieldLabel, Figure, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, InputBase, Level, LevelItem, LevelLeft, LevelRight, Link, LinkButton, ListItem, Loader, Loading, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarLink, NavbarMenu, NavbarStart, Notification, NotificationContainer, NumberInput, Numberinput, OrderedList, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Paragraph, Popover, PopoverBody, PopoverClose, PopoverFooter, PopoverHeader, Portal, Pre, Progress, Radio, Radios, Rate, Reveal, Section, Select, SelectBase, Sidebar, Skeleton, Slider, Span, Step, Steps, Strong, SubTitle, Switch, Tab, TabContentItem, TabItem, TabList, Table, Tabs, TabsContent, Tag, TagInput, Taginput, Tags, Tbody, Td, TextArea, TextAreaBase, Tfoot, Th, Thead, Theme, TimeInput, TimeInputBase, Title, Toast, ToastContainer, Tooltip, Tr, UnorderedList, checkboxColors, checkboxSizes, classNames, createPrefixedClassNames, dialog, isBrowser$1 as isBrowser, mergeBulmaStyles, notification, prefixedClassNames, radioColors, radioSizes, switchColors, switchSizes, toast, useBulmaClasses, useClassPrefix, useColorClasses, useColorStyles, useConfig, useFlexboxClasses, useFocusTrap, useIconLibrary, useInsideControl, useInsideField, useIsHydrated, useOtherClasses, usePrefixedClass, usePrefixedClassNames, useSpacingClasses, useTypographyClasses, useVisibilityClasses, validAlignContents, validAlignItems, validAlignSelfs, validAlignments$1 as validAlignments, validAspectRatios, validAxisOverflows, validColorShades, validColors, validCursors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFloats, validFontFamilies, validGaps, validInteractions, validJustifyContents, validOverflows, validPositions, validRadii, validResponsives, validSchemeColors, validShadows, validSizes$1 as validSizes, validTableColors, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities };
 //# sourceMappingURL=index.esm.js.map