react-bootstrap - npm Package Compare versions

Comparing version 2.4.0 to 2.5.0-beta.0

cjs/Col.js

@@ -29,2 +29,3 @@ "use strict";
   const breakpoints = (0, _ThemeProvider.useBootstrapBreakpoints)();
+  const minBreakpoint = (0, _ThemeProvider.useBootstrapMinBreakpoint)();
   const spans = [];
@@ -49,3 +50,3 @@ const classes = [];
 
-    const infix = brkPoint !== 'xs' ? `-${brkPoint}` : '';
+    const infix = brkPoint !== minBreakpoint ? `-${brkPoint}` : '';
     if (span) spans.push(span === true ? `${bsPrefix}${infix}` : `${bsPrefix}${infix}-${span}`);
@@ -52,0 +53,0 @@ if (order != null) classes.push(`order${infix}-${order}`);

cjs/createUtilityClasses.d.ts

@@ -11,2 +11,2 @@ import PropTypes from 'prop-types';
 export declare function responsivePropType(propType: any): PropTypes.Requireable<any>;
-export default function createUtilityClassName(utilityValues: Record<string, ResponsiveUtilityValue<unknown>>, breakpoints?: string[]): string[];
+export default function createUtilityClassName(utilityValues: Record<string, ResponsiveUtilityValue<unknown>>, breakpoints?: string[], minBreakpoint?: string): string[];

cjs/createUtilityClasses.js

@@ -24,3 +24,3 @@ "use strict";
 
-function createUtilityClassName(utilityValues, breakpoints = _ThemeProvider.DEFAULT_BREAKPOINTS) {
+function createUtilityClassName(utilityValues, breakpoints = _ThemeProvider.DEFAULT_BREAKPOINTS, minBreakpoint = _ThemeProvider.DEFAULT_MIN_BREAKPOINT) {
   const classes = [];
@@ -34,3 +34,3 @@ Object.entries(utilityValues).forEach(([utilName, utilValue]) => {
           if (bpValue != null) {
-            const infix = brkPoint !== 'xs' ? `-${brkPoint}` : '';
+            const infix = brkPoint !== minBreakpoint ? `-${brkPoint}` : '';
             classes.push(`${utilName}${infix}-${bpValue}`);
@@ -37,0 +37,0 @@ }

cjs/Form.d.ts

@@ -294,2 +294,3 @@ import * as React from 'react';
         width?: string | number | undefined;
+        reverse?: boolean | undefined;
         size?: number | undefined;
@@ -296,0 +297,0 @@ multiple?: boolean | undefined;

cjs/FormCheck.d.ts

@@ -7,2 +7,3 @@ import * as React from 'react';
     inline?: boolean;
+    reverse?: boolean;
     disabled?: boolean;
@@ -9,0 +10,0 @@ label?: React.ReactNode;

cjs/FormCheck.js

@@ -35,2 +35,3 @@ "use strict";
   inline = false,
+  reverse = false,
   disabled = false,
@@ -73,3 +74,3 @@ isValid = false,
       style: style,
-      className: (0, _classnames.default)(className, hasLabel && bsPrefix, inline && `${bsPrefix}-inline`, type === 'switch' && bsSwitchPrefix),
+      className: (0, _classnames.default)(className, hasLabel && bsPrefix, inline && `${bsPrefix}-inline`, reverse && `${bsPrefix}-reverse`, type === 'switch' && bsSwitchPrefix),
       children: children || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -76,0 +77,0 @@ children: [input, hasLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormCheckLabel.default, {

cjs/NavbarOffcanvas.js

@@ -10,8 +10,2 @@ "use strict";
 
-var _useBreakpoint = _interopRequireDefault(require("@restart/hooks/useBreakpoint"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _ThemeProvider = require("./ThemeProvider");
-
 var _Offcanvas = _interopRequireDefault(require("./Offcanvas"));
@@ -27,55 +21,7 @@
 
-const NavbarOffcanvas = /*#__PURE__*/React.forwardRef(({
-  className,
-  bsPrefix,
-  backdrop,
-  backdropClassName,
-  keyboard,
-  scroll,
-  placement,
-  autoFocus,
-  enforceFocus,
-  restoreFocus,
-  restoreFocusOptions,
-  onShow,
-  onHide,
-  onEscapeKeyDown,
-  onEnter,
-  onEntering,
-  onEntered,
-  onExit,
-  onExiting,
-  onExited,
-  ...props
-}, ref) => {
+const NavbarOffcanvas = /*#__PURE__*/React.forwardRef((props, ref) => {
   const context = (0, React.useContext)(_NavbarContext.default);
-  bsPrefix = (0, _ThemeProvider.useBootstrapPrefix)(bsPrefix, 'offcanvas');
-  const hasExpandProp = typeof (context == null ? void 0 : context.expand) === 'string';
-  const shouldExpand = (0, _useBreakpoint.default)(hasExpandProp ? context.expand : 'xs', 'up');
-  return hasExpandProp && shouldExpand ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default, {
     ref: ref,
-    ...props,
-    className: (0, _classnames.default)(className, bsPrefix, `${bsPrefix}-${placement}`)
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.default, {
-    ref: ref,
     show: !!(context != null && context.expanded),
-    bsPrefix: bsPrefix,
-    backdrop: backdrop,
-    backdropClassName: backdropClassName,
-    keyboard: keyboard,
-    scroll: scroll,
-    placement: placement,
-    autoFocus: autoFocus,
-    enforceFocus: enforceFocus,
-    restoreFocus: restoreFocus,
-    restoreFocusOptions: restoreFocusOptions,
-    onShow: onShow,
-    onHide: onHide,
-    onEscapeKeyDown: onEscapeKeyDown,
-    onEnter: onEnter,
-    onEntering: onEntering,
-    onEntered: onEntered,
-    onExit: onExit,
-    onExiting: onExiting,
-    onExited: onExited,
     ...props
@@ -82,0 +28,0 @@ });

cjs/Offcanvas.d.ts

@@ -10,2 +10,3 @@ import * as React from 'react';
     placement?: OffcanvasPlacement;
+    responsive?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | string;
 }
@@ -12,0 +13,0 @@ declare const _default: BsPrefixRefForwardingComponent<"div", OffcanvasProps> & {

cjs/Offcanvas.js

@@ -67,2 +67,3 @@ "use strict";
   placement,
+  responsive,
 
@@ -134,7 +135,5 @@ /* BaseModal props */
 
-  const renderDialog = dialogProps => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    role: "dialog",
-    ...dialogProps,
+  const renderDialog = dialogProps => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", { ...dialogProps,
     ...props,
-    className: (0, _classnames.default)(className, bsPrefix, `${bsPrefix}-${placement}`),
+    className: (0, _classnames.default)(className, responsive ? `${bsPrefix}-${responsive}` : bsPrefix, `${bsPrefix}-${placement}`),
     "aria-labelledby": ariaLabelledby,
@@ -144,29 +143,31 @@ children: children
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalContext.default.Provider, {
-    value: modalContext,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
-      show: show,
-      ref: ref,
-      backdrop: backdrop,
-      container: container,
-      keyboard: keyboard,
-      autoFocus: autoFocus,
-      enforceFocus: enforceFocus && !scroll,
-      restoreFocus: restoreFocus,
-      restoreFocusOptions: restoreFocusOptions,
-      onEscapeKeyDown: onEscapeKeyDown,
-      onShow: onShow,
-      onHide: handleHide,
-      onEnter: handleEnter,
-      onEntering: onEntering,
-      onEntered: onEntered,
-      onExit: onExit,
-      onExiting: onExiting,
-      onExited: handleExited,
-      manager: getModalManager(),
-      transition: DialogTransition,
-      backdropTransition: BackdropTransition,
-      renderBackdrop: renderBackdrop,
-      renderDialog: renderDialog
-    })
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [!show && renderDialog({}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalContext.default.Provider, {
+      value: modalContext,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
+        show: show,
+        ref: ref,
+        backdrop: backdrop,
+        container: container,
+        keyboard: keyboard,
+        autoFocus: autoFocus,
+        enforceFocus: enforceFocus && !scroll,
+        restoreFocus: restoreFocus,
+        restoreFocusOptions: restoreFocusOptions,
+        onEscapeKeyDown: onEscapeKeyDown,
+        onShow: onShow,
+        onHide: handleHide,
+        onEnter: handleEnter,
+        onEntering: onEntering,
+        onEntered: onEntered,
+        onExit: onExit,
+        onExiting: onExiting,
+        onExited: handleExited,
+        manager: getModalManager(),
+        transition: DialogTransition,
+        backdropTransition: BackdropTransition,
+        renderBackdrop: renderBackdrop,
+        renderDialog: renderDialog
+      })
+    })]
   });
@@ -173,0 +174,0 @@ });

cjs/Overlay.d.ts

 import * as React from 'react';
 import { OverlayProps as BaseOverlayProps, OverlayArrowProps } from '@restart/ui/Overlay';
 import { TransitionType } from './helpers';
-import { Placement, RootCloseEvent } from './types';
+import { Placement, PopperRef, RootCloseEvent } from './types';
 export interface OverlayInjectedProps {
@@ -12,8 +12,3 @@ ref: React.RefCallback<HTMLElement>;
     placement: Placement | undefined;
-    popper: {
-        state: any;
-        outOfBoundaries: boolean;
-        placement: Placement | undefined;
-        scheduleUpdate?: () => void;
-    };
+    popper: PopperRef;
     [prop: string]: any;
@@ -20,0 +15,0 @@ }

cjs/Overlay.js

@@ -14,2 +14,8 @@ "use strict";
 
+var _useCallbackRef = _interopRequireDefault(require("@restart/hooks/useCallbackRef"));
+
+var _useEventCallback = _interopRequireDefault(require("@restart/hooks/useEventCallback"));
+
+var _useIsomorphicEffect = _interopRequireDefault(require("@restart/hooks/useIsomorphicEffect"));
+
 var _useMergedRefs = _interopRequireDefault(require("@restart/hooks/useMergedRefs"));
@@ -56,9 +62,20 @@
   const popperRef = (0, React.useRef)({});
+  const [firstRenderedState, setFirstRenderedState] = (0, _useCallbackRef.default)();
   const [ref, modifiers] = (0, _useOverlayOffset.default)(outerProps.offset);
   const mergedRef = (0, _useMergedRefs.default)(outerRef, ref);
   const actualTransition = transition === true ? _Fade.default : transition || undefined;
+  const handleFirstUpdate = (0, _useEventCallback.default)(state => {
+    setFirstRenderedState(state);
+    popperConfig == null ? void 0 : popperConfig.onFirstUpdate == null ? void 0 : popperConfig.onFirstUpdate(state);
+  });
+  (0, _useIsomorphicEffect.default)(() => {
+    if (firstRenderedState) {
+      popperRef.current.scheduleUpdate == null ? void 0 : popperRef.current.scheduleUpdate();
+    }
+  }, [firstRenderedState]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Overlay.default, { ...outerProps,
     ref: mergedRef,
     popperConfig: { ...popperConfig,
-      modifiers: modifiers.concat(popperConfig.modifiers || [])
+      modifiers: modifiers.concat(popperConfig.modifiers || []),
+      onFirstUpdate: handleFirstUpdate
     },
@@ -65,0 +82,0 @@ transition: actualTransition,

cjs/Popover.d.ts

 import * as React from 'react';
 import { OverlayArrowProps } from '@restart/ui/Overlay';
-import { Placement } from './types';
+import { Placement, PopperRef } from './types';
 import { BsPrefixProps } from './helpers';
@@ -10,3 +10,3 @@ export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement>, BsPrefixProps {
     body?: boolean;
-    popper?: any;
+    popper?: PopperRef;
     show?: boolean;
@@ -13,0 +13,0 @@ }

cjs/Row.js

@@ -29,2 +29,3 @@ "use strict";
   const breakpoints = (0, _ThemeProvider.useBootstrapBreakpoints)();
+  const minBreakpoint = (0, _ThemeProvider.useBootstrapMinBreakpoint)();
   const sizePrefix = `${decoratedBsPrefix}-cols`;
@@ -45,3 +46,3 @@ const classes = [];
 
-    const infix = brkPoint !== 'xs' ? `-${brkPoint}` : '';
+    const infix = brkPoint !== minBreakpoint ? `-${brkPoint}` : '';
     if (cols != null) classes.push(`${sizePrefix}${infix}-${cols}`);
@@ -48,0 +49,0 @@ });

cjs/Stack.js

@@ -32,2 +32,3 @@ "use strict";
   const breakpoints = (0, _ThemeProvider.useBootstrapBreakpoints)();
+  const minBreakpoint = (0, _ThemeProvider.useBootstrapMinBreakpoint)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, { ...props,
@@ -37,3 +38,4 @@ ref: ref,
       gap,
-      breakpoints
+      breakpoints,
+      minBreakpoint
     }))
@@ -40,0 +42,0 @@ });

cjs/Table.d.ts

 import * as React from 'react';
 import { BsPrefixOnlyProps } from './helpers';
 export interface TableProps extends BsPrefixOnlyProps, React.TableHTMLAttributes<HTMLTableElement> {
-    striped?: boolean;
+    striped?: boolean | string;
     bordered?: boolean;
@@ -6,0 +6,0 @@ borderless?: boolean;

cjs/Table.js

@@ -33,3 +33,3 @@ "use strict";
   const decoratedBsPrefix = (0, _ThemeProvider.useBootstrapPrefix)(bsPrefix, 'table');
-  const classes = (0, _classnames.default)(className, decoratedBsPrefix, variant && `${decoratedBsPrefix}-${variant}`, size && `${decoratedBsPrefix}-${size}`, striped && `${decoratedBsPrefix}-striped`, bordered && `${decoratedBsPrefix}-bordered`, borderless && `${decoratedBsPrefix}-borderless`, hover && `${decoratedBsPrefix}-hover`);
+  const classes = (0, _classnames.default)(className, decoratedBsPrefix, variant && `${decoratedBsPrefix}-${variant}`, size && `${decoratedBsPrefix}-${size}`, striped && `${decoratedBsPrefix}-${typeof striped === 'string' ? `striped-${striped}` : 'striped'}`, bordered && `${decoratedBsPrefix}-bordered`, borderless && `${decoratedBsPrefix}-borderless`, hover && `${decoratedBsPrefix}-hover`);
   const table = /*#__PURE__*/(0, _jsxRuntime.jsx)("table", { ...props,
@@ -36,0 +36,0 @@ className: classes,

cjs/ThemeProvider.d.ts

 import * as React from 'react';
 export declare const DEFAULT_BREAKPOINTS: string[];
+export declare const DEFAULT_MIN_BREAKPOINT = "xs";
 export interface ThemeContextValue {
     prefixes: Record<string, string>;
     breakpoints: string[];
+    minBreakpoint?: string;
     dir?: string;
@@ -12,3 +14,3 @@ }
 declare const Consumer: React.Consumer<ThemeContextValue>;
-declare function ThemeProvider({ prefixes, breakpoints, dir, children, }: ThemeProviderProps): JSX.Element;
+declare function ThemeProvider({ prefixes, breakpoints, minBreakpoint, dir, children, }: ThemeProviderProps): JSX.Element;
 declare namespace ThemeProvider {
@@ -19,2 +21,3 @@ var propTypes: any;
 export declare function useBootstrapBreakpoints(): string[];
+export declare function useBootstrapMinBreakpoint(): string | undefined;
 export declare function useIsRTL(): boolean;
@@ -21,0 +24,0 @@ declare function createBootstrapComponent(Component: any, opts: any): React.ForwardRefExoticComponent<{

cjs/ThemeProvider.js

 "use strict";
 
 exports.__esModule = true;
-exports.ThemeConsumer = exports.DEFAULT_BREAKPOINTS = void 0;
+exports.ThemeConsumer = exports.DEFAULT_MIN_BREAKPOINT = exports.DEFAULT_BREAKPOINTS = void 0;
 exports.createBootstrapComponent = createBootstrapComponent;
 exports.default = void 0;
 exports.useBootstrapBreakpoints = useBootstrapBreakpoints;
+exports.useBootstrapMinBreakpoint = useBootstrapMinBreakpoint;
 exports.useBootstrapPrefix = useBootstrapPrefix;
@@ -21,5 +22,8 @@ exports.useIsRTL = useIsRTL;
 exports.DEFAULT_BREAKPOINTS = DEFAULT_BREAKPOINTS;
+const DEFAULT_MIN_BREAKPOINT = 'xs';
+exports.DEFAULT_MIN_BREAKPOINT = DEFAULT_MIN_BREAKPOINT;
 const ThemeContext = /*#__PURE__*/React.createContext({
   prefixes: {},
-  breakpoints: DEFAULT_BREAKPOINTS
+  breakpoints: DEFAULT_BREAKPOINTS,
+  minBreakpoint: DEFAULT_MIN_BREAKPOINT
 });
@@ -35,2 +39,3 @@ const {
   breakpoints = DEFAULT_BREAKPOINTS,
+  minBreakpoint = DEFAULT_MIN_BREAKPOINT,
   dir,
@@ -43,4 +48,5 @@ children
     breakpoints,
+    minBreakpoint,
     dir
-  }), [prefixes, breakpoints, dir]);
+  }), [prefixes, breakpoints, minBreakpoint, dir]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
@@ -66,2 +72,9 @@ value: contextValue,
 
+function useBootstrapMinBreakpoint() {
+  const {
+    minBreakpoint
+  } = (0, React.useContext)(ThemeContext);
+  return minBreakpoint;
+}
+
 function useIsRTL() {
@@ -68,0 +81,0 @@ const {

cjs/ToggleButtonGroup.js

@@ -55,3 +55,3 @@ "use strict";
     if (type === 'radio') {
-      if (!isActive && onChange) onChange(inputVal, event);
+      if (!isActive) onChange(inputVal, event);
       return;
@@ -58,0 +58,0 @@ }

cjs/Tooltip.d.ts

 import * as React from 'react';
 import { OverlayArrowProps } from '@restart/ui/Overlay';
-import { Placement } from './types';
+import { Placement, PopperRef } from './types';
 import { BsPrefixProps } from './helpers';
@@ -9,5 +9,5 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement>, BsPrefixProps {
     show?: boolean;
-    popper?: any;
+    popper?: PopperRef;
 }
 declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
 export default Tooltip;

cjs/types.d.ts

 import PropTypes from 'prop-types';
+import { State } from '@restart/ui/usePopper';
 export declare type Variant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string;
@@ -22,1 +23,7 @@ export declare type ButtonVariant = Variant | 'link' | 'outline-primary' | 'outline-secondary' | 'outline-success' | 'outline-danger' | 'outline-warning' | 'outline-info' | 'outline-dark' | 'outline-light';
 export declare type GapValue = 0 | 1 | 2 | 3 | 4 | 5;
+export interface PopperRef {
+    state: State | undefined;
+    outOfBoundaries: boolean;
+    placement: Placement | undefined;
+    scheduleUpdate?: () => void;
+}

esm/Col.js

 import classNames from 'classnames';
 import * as React from 'react';
-import { useBootstrapPrefix, useBootstrapBreakpoints } from './ThemeProvider';
+import { useBootstrapPrefix, useBootstrapBreakpoints, useBootstrapMinBreakpoint } from './ThemeProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -13,2 +13,3 @@ export function useCol({
   const breakpoints = useBootstrapBreakpoints();
+  const minBreakpoint = useBootstrapMinBreakpoint();
   const spans = [];
@@ -33,3 +34,3 @@ const classes = [];
 
-    const infix = brkPoint !== 'xs' ? `-${brkPoint}` : '';
+    const infix = brkPoint !== minBreakpoint ? `-${brkPoint}` : '';
     if (span) spans.push(span === true ? `${bsPrefix}${infix}` : `${bsPrefix}${infix}-${span}`);
@@ -36,0 +37,0 @@ if (order != null) classes.push(`order${infix}-${order}`);

esm/createUtilityClasses.d.ts

@@ -11,2 +11,2 @@ import PropTypes from 'prop-types';
 export declare function responsivePropType(propType: any): PropTypes.Requireable<any>;
-export default function createUtilityClassName(utilityValues: Record<string, ResponsiveUtilityValue<unknown>>, breakpoints?: string[]): string[];
+export default function createUtilityClassName(utilityValues: Record<string, ResponsiveUtilityValue<unknown>>, breakpoints?: string[], minBreakpoint?: string): string[];

esm/createUtilityClasses.js

 import PropTypes from 'prop-types';
-import { DEFAULT_BREAKPOINTS } from './ThemeProvider';
+import { DEFAULT_BREAKPOINTS, DEFAULT_MIN_BREAKPOINT } from './ThemeProvider';
 export function responsivePropType(propType) {
@@ -13,3 +13,3 @@ return PropTypes.oneOfType([propType, PropTypes.shape({
 }
-export default function createUtilityClassName(utilityValues, breakpoints = DEFAULT_BREAKPOINTS) {
+export default function createUtilityClassName(utilityValues, breakpoints = DEFAULT_BREAKPOINTS, minBreakpoint = DEFAULT_MIN_BREAKPOINT) {
   const classes = [];
@@ -23,3 +23,3 @@ Object.entries(utilityValues).forEach(([utilName, utilValue]) => {
           if (bpValue != null) {
-            const infix = brkPoint !== 'xs' ? `-${brkPoint}` : '';
+            const infix = brkPoint !== minBreakpoint ? `-${brkPoint}` : '';
             classes.push(`${utilName}${infix}-${bpValue}`);
@@ -26,0 +26,0 @@ }

esm/Form.d.ts

@@ -294,2 +294,3 @@ import * as React from 'react';
         width?: string | number | undefined;
+        reverse?: boolean | undefined;
         size?: number | undefined;
@@ -296,0 +297,0 @@ multiple?: boolean | undefined;

esm/FormCheck.d.ts

@@ -7,2 +7,3 @@ import * as React from 'react';
     inline?: boolean;
+    reverse?: boolean;
     disabled?: boolean;
@@ -9,0 +10,0 @@ label?: React.ReactNode;

esm/FormCheck.js

@@ -18,2 +18,3 @@ import classNames from 'classnames';
   inline = false,
+  reverse = false,
   disabled = false,
@@ -58,3 +59,3 @@ isValid = false,
       style: style,
-      className: classNames(className, hasLabel && bsPrefix, inline && `${bsPrefix}-inline`, type === 'switch' && bsSwitchPrefix),
+      className: classNames(className, hasLabel && bsPrefix, inline && `${bsPrefix}-inline`, reverse && `${bsPrefix}-reverse`, type === 'switch' && bsSwitchPrefix),
       children: children || /*#__PURE__*/_jsxs(_Fragment, {
@@ -61,0 +62,0 @@ children: [input, hasLabel && /*#__PURE__*/_jsx(FormCheckLabel, {

esm/NavbarOffcanvas.js

 import * as React from 'react';
 import { useContext } from 'react';
-import useBreakpoint from '@restart/hooks/useBreakpoint';
-import classNames from 'classnames';
-import { useBootstrapPrefix } from './ThemeProvider';
 import Offcanvas from './Offcanvas';
 import NavbarContext from './NavbarContext';
 import { jsx as _jsx } from "react/jsx-runtime";
-const NavbarOffcanvas = /*#__PURE__*/React.forwardRef(({
-  className,
-  bsPrefix,
-  backdrop,
-  backdropClassName,
-  keyboard,
-  scroll,
-  placement,
-  autoFocus,
-  enforceFocus,
-  restoreFocus,
-  restoreFocusOptions,
-  onShow,
-  onHide,
-  onEscapeKeyDown,
-  onEnter,
-  onEntering,
-  onEntered,
-  onExit,
-  onExiting,
-  onExited,
-  ...props
-}, ref) => {
+const NavbarOffcanvas = /*#__PURE__*/React.forwardRef((props, ref) => {
   const context = useContext(NavbarContext);
-  bsPrefix = useBootstrapPrefix(bsPrefix, 'offcanvas');
-  const hasExpandProp = typeof (context == null ? void 0 : context.expand) === 'string';
-  const shouldExpand = useBreakpoint(hasExpandProp ? context.expand : 'xs', 'up');
-  return hasExpandProp && shouldExpand ? /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Offcanvas, {
     ref: ref,
-    ...props,
-    className: classNames(className, bsPrefix, `${bsPrefix}-${placement}`)
-  }) : /*#__PURE__*/_jsx(Offcanvas, {
-    ref: ref,
     show: !!(context != null && context.expanded),
-    bsPrefix: bsPrefix,
-    backdrop: backdrop,
-    backdropClassName: backdropClassName,
-    keyboard: keyboard,
-    scroll: scroll,
-    placement: placement,
-    autoFocus: autoFocus,
-    enforceFocus: enforceFocus,
-    restoreFocus: restoreFocus,
-    restoreFocusOptions: restoreFocusOptions,
-    onShow: onShow,
-    onHide: onHide,
-    onEscapeKeyDown: onEscapeKeyDown,
-    onEnter: onEnter,
-    onEntering: onEntering,
-    onEntered: onEntered,
-    onExit: onExit,
-    onExiting: onExiting,
-    onExited: onExited,
     ...props
@@ -63,0 +12,0 @@ });

esm/Offcanvas.d.ts

@@ -10,2 +10,3 @@ import * as React from 'react';
     placement?: OffcanvasPlacement;
+    responsive?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | string;
 }
@@ -12,0 +13,0 @@ declare const _default: BsPrefixRefForwardingComponent<"div", OffcanvasProps> & {

esm/Offcanvas.js

@@ -16,2 +16,4 @@ import classNames from 'classnames';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const defaultProps = {
@@ -44,2 +46,3 @@ show: false,
   placement,
+  responsive,
 
@@ -111,7 +114,5 @@ /* BaseModal props */
 
-  const renderDialog = dialogProps => /*#__PURE__*/_jsx("div", {
-    role: "dialog",
-    ...dialogProps,
+  const renderDialog = dialogProps => /*#__PURE__*/_jsx("div", { ...dialogProps,
     ...props,
-    className: classNames(className, bsPrefix, `${bsPrefix}-${placement}`),
+    className: classNames(className, responsive ? `${bsPrefix}-${responsive}` : bsPrefix, `${bsPrefix}-${placement}`),
     "aria-labelledby": ariaLabelledby,
@@ -121,29 +122,31 @@ children: children
 
-  return /*#__PURE__*/_jsx(ModalContext.Provider, {
-    value: modalContext,
-    children: /*#__PURE__*/_jsx(BaseModal, {
-      show: show,
-      ref: ref,
-      backdrop: backdrop,
-      container: container,
-      keyboard: keyboard,
-      autoFocus: autoFocus,
-      enforceFocus: enforceFocus && !scroll,
-      restoreFocus: restoreFocus,
-      restoreFocusOptions: restoreFocusOptions,
-      onEscapeKeyDown: onEscapeKeyDown,
-      onShow: onShow,
-      onHide: handleHide,
-      onEnter: handleEnter,
-      onEntering: onEntering,
-      onEntered: onEntered,
-      onExit: onExit,
-      onExiting: onExiting,
-      onExited: handleExited,
-      manager: getModalManager(),
-      transition: DialogTransition,
-      backdropTransition: BackdropTransition,
-      renderBackdrop: renderBackdrop,
-      renderDialog: renderDialog
-    })
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!show && renderDialog({}), /*#__PURE__*/_jsx(ModalContext.Provider, {
+      value: modalContext,
+      children: /*#__PURE__*/_jsx(BaseModal, {
+        show: show,
+        ref: ref,
+        backdrop: backdrop,
+        container: container,
+        keyboard: keyboard,
+        autoFocus: autoFocus,
+        enforceFocus: enforceFocus && !scroll,
+        restoreFocus: restoreFocus,
+        restoreFocusOptions: restoreFocusOptions,
+        onEscapeKeyDown: onEscapeKeyDown,
+        onShow: onShow,
+        onHide: handleHide,
+        onEnter: handleEnter,
+        onEntering: onEntering,
+        onEntered: onEntered,
+        onExit: onExit,
+        onExiting: onExiting,
+        onExited: handleExited,
+        manager: getModalManager(),
+        transition: DialogTransition,
+        backdropTransition: BackdropTransition,
+        renderBackdrop: renderBackdrop,
+        renderDialog: renderDialog
+      })
+    })]
   });
@@ -150,0 +153,0 @@ });

esm/Overlay.d.ts

 import * as React from 'react';
 import { OverlayProps as BaseOverlayProps, OverlayArrowProps } from '@restart/ui/Overlay';
 import { TransitionType } from './helpers';
-import { Placement, RootCloseEvent } from './types';
+import { Placement, PopperRef, RootCloseEvent } from './types';
 export interface OverlayInjectedProps {
@@ -12,8 +12,3 @@ ref: React.RefCallback<HTMLElement>;
     placement: Placement | undefined;
-    popper: {
-        state: any;
-        outOfBoundaries: boolean;
-        placement: Placement | undefined;
-        scheduleUpdate?: () => void;
-    };
+    popper: PopperRef;
     [prop: string]: any;
@@ -20,0 +15,0 @@ }

esm/Overlay.js

@@ -5,2 +5,5 @@ import * as React from 'react';
 import BaseOverlay from '@restart/ui/Overlay';
+import useCallbackRef from '@restart/hooks/useCallbackRef';
+import useEventCallback from '@restart/hooks/useEventCallback';
+import useIsomorphicEffect from '@restart/hooks/useIsomorphicEffect';
 import useMergedRefs from '@restart/hooks/useMergedRefs';
@@ -38,9 +41,20 @@ import useOverlayOffset from './useOverlayOffset';
   const popperRef = useRef({});
+  const [firstRenderedState, setFirstRenderedState] = useCallbackRef();
   const [ref, modifiers] = useOverlayOffset(outerProps.offset);
   const mergedRef = useMergedRefs(outerRef, ref);
   const actualTransition = transition === true ? Fade : transition || undefined;
+  const handleFirstUpdate = useEventCallback(state => {
+    setFirstRenderedState(state);
+    popperConfig == null ? void 0 : popperConfig.onFirstUpdate == null ? void 0 : popperConfig.onFirstUpdate(state);
+  });
+  useIsomorphicEffect(() => {
+    if (firstRenderedState) {
+      popperRef.current.scheduleUpdate == null ? void 0 : popperRef.current.scheduleUpdate();
+    }
+  }, [firstRenderedState]);
   return /*#__PURE__*/_jsx(BaseOverlay, { ...outerProps,
     ref: mergedRef,
     popperConfig: { ...popperConfig,
-      modifiers: modifiers.concat(popperConfig.modifiers || [])
+      modifiers: modifiers.concat(popperConfig.modifiers || []),
+      onFirstUpdate: handleFirstUpdate
     },
@@ -47,0 +61,0 @@ transition: actualTransition,

esm/Popover.d.ts

 import * as React from 'react';
 import { OverlayArrowProps } from '@restart/ui/Overlay';
-import { Placement } from './types';
+import { Placement, PopperRef } from './types';
 import { BsPrefixProps } from './helpers';
@@ -10,3 +10,3 @@ export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement>, BsPrefixProps {
     body?: boolean;
-    popper?: any;
+    popper?: PopperRef;
     show?: boolean;
@@ -13,0 +13,0 @@ }

esm/Row.js

 import classNames from 'classnames';
 import * as React from 'react';
-import { useBootstrapPrefix, useBootstrapBreakpoints } from './ThemeProvider';
+import { useBootstrapPrefix, useBootstrapBreakpoints, useBootstrapMinBreakpoint } from './ThemeProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,2 +14,3 @@ const Row = /*#__PURE__*/React.forwardRef(({
   const breakpoints = useBootstrapBreakpoints();
+  const minBreakpoint = useBootstrapMinBreakpoint();
   const sizePrefix = `${decoratedBsPrefix}-cols`;
@@ -30,3 +31,3 @@ const classes = [];
 
-    const infix = brkPoint !== 'xs' ? `-${brkPoint}` : '';
+    const infix = brkPoint !== minBreakpoint ? `-${brkPoint}` : '';
     if (cols != null) classes.push(`${sizePrefix}${infix}-${cols}`);
@@ -33,0 +34,0 @@ });

esm/Stack.js

 import classNames from 'classnames';
 import * as React from 'react';
-import { useBootstrapPrefix, useBootstrapBreakpoints } from './ThemeProvider';
+import { useBootstrapPrefix, useBootstrapBreakpoints, useBootstrapMinBreakpoint } from './ThemeProvider';
 import createUtilityClassName, { responsivePropType } from './createUtilityClasses';
@@ -16,2 +16,3 @@ import { jsx as _jsx } from "react/jsx-runtime";
   const breakpoints = useBootstrapBreakpoints();
+  const minBreakpoint = useBootstrapMinBreakpoint();
   return /*#__PURE__*/_jsx(Component, { ...props,
@@ -21,3 +22,4 @@ ref: ref,
       gap,
-      breakpoints
+      breakpoints,
+      minBreakpoint
     }))
@@ -24,0 +26,0 @@ });

esm/Table.d.ts

 import * as React from 'react';
 import { BsPrefixOnlyProps } from './helpers';
 export interface TableProps extends BsPrefixOnlyProps, React.TableHTMLAttributes<HTMLTableElement> {
-    striped?: boolean;
+    striped?: boolean | string;
     bordered?: boolean;
@@ -6,0 +6,0 @@ borderless?: boolean;

esm/Table.js

@@ -18,3 +18,3 @@ import classNames from 'classnames';
   const decoratedBsPrefix = useBootstrapPrefix(bsPrefix, 'table');
-  const classes = classNames(className, decoratedBsPrefix, variant && `${decoratedBsPrefix}-${variant}`, size && `${decoratedBsPrefix}-${size}`, striped && `${decoratedBsPrefix}-striped`, bordered && `${decoratedBsPrefix}-bordered`, borderless && `${decoratedBsPrefix}-borderless`, hover && `${decoratedBsPrefix}-hover`);
+  const classes = classNames(className, decoratedBsPrefix, variant && `${decoratedBsPrefix}-${variant}`, size && `${decoratedBsPrefix}-${size}`, striped && `${decoratedBsPrefix}-${typeof striped === 'string' ? `striped-${striped}` : 'striped'}`, bordered && `${decoratedBsPrefix}-bordered`, borderless && `${decoratedBsPrefix}-borderless`, hover && `${decoratedBsPrefix}-hover`);
 
@@ -21,0 +21,0 @@ const table = /*#__PURE__*/_jsx("table", { ...props,

esm/ThemeProvider.d.ts

 import * as React from 'react';
 export declare const DEFAULT_BREAKPOINTS: string[];
+export declare const DEFAULT_MIN_BREAKPOINT = "xs";
 export interface ThemeContextValue {
     prefixes: Record<string, string>;
     breakpoints: string[];
+    minBreakpoint?: string;
     dir?: string;
@@ -12,3 +14,3 @@ }
 declare const Consumer: React.Consumer<ThemeContextValue>;
-declare function ThemeProvider({ prefixes, breakpoints, dir, children, }: ThemeProviderProps): JSX.Element;
+declare function ThemeProvider({ prefixes, breakpoints, minBreakpoint, dir, children, }: ThemeProviderProps): JSX.Element;
 declare namespace ThemeProvider {
@@ -19,2 +21,3 @@ var propTypes: any;
 export declare function useBootstrapBreakpoints(): string[];
+export declare function useBootstrapMinBreakpoint(): string | undefined;
 export declare function useIsRTL(): boolean;
@@ -21,0 +24,0 @@ declare function createBootstrapComponent(Component: any, opts: any): React.ForwardRefExoticComponent<{

esm/ThemeProvider.js

@@ -5,5 +5,7 @@ import * as React from 'react';
 export const DEFAULT_BREAKPOINTS = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+export const DEFAULT_MIN_BREAKPOINT = 'xs';
 const ThemeContext = /*#__PURE__*/React.createContext({
   prefixes: {},
-  breakpoints: DEFAULT_BREAKPOINTS
+  breakpoints: DEFAULT_BREAKPOINTS,
+  minBreakpoint: DEFAULT_MIN_BREAKPOINT
 });
@@ -18,2 +20,3 @@ const {
   breakpoints = DEFAULT_BREAKPOINTS,
+  minBreakpoint = DEFAULT_MIN_BREAKPOINT,
   dir,
@@ -26,4 +29,5 @@ children
     breakpoints,
+    minBreakpoint,
     dir
-  }), [prefixes, breakpoints, dir]);
+  }), [prefixes, breakpoints, minBreakpoint, dir]);
   return /*#__PURE__*/_jsx(Provider, {
@@ -47,2 +51,8 @@ value: contextValue,
 }
+export function useBootstrapMinBreakpoint() {
+  const {
+    minBreakpoint
+  } = useContext(ThemeContext);
+  return minBreakpoint;
+}
 export function useIsRTL() {
@@ -49,0 +59,0 @@ const {

esm/ToggleButtonGroup.js

@@ -36,3 +36,3 @@ import * as React from 'react';
     if (type === 'radio') {
-      if (!isActive && onChange) onChange(inputVal, event);
+      if (!isActive) onChange(inputVal, event);
       return;
@@ -39,0 +39,0 @@ }

esm/Tooltip.d.ts

 import * as React from 'react';
 import { OverlayArrowProps } from '@restart/ui/Overlay';
-import { Placement } from './types';
+import { Placement, PopperRef } from './types';
 import { BsPrefixProps } from './helpers';
@@ -9,5 +9,5 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement>, BsPrefixProps {
     show?: boolean;
-    popper?: any;
+    popper?: PopperRef;
 }
 declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
 export default Tooltip;

esm/types.d.ts

 import PropTypes from 'prop-types';
+import { State } from '@restart/ui/usePopper';
 export declare type Variant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string;
@@ -22,1 +23,7 @@ export declare type ButtonVariant = Variant | 'link' | 'outline-primary' | 'outline-secondary' | 'outline-success' | 'outline-danger' | 'outline-warning' | 'outline-info' | 'outline-dark' | 'outline-light';
 export declare type GapValue = 0 | 1 | 2 | 3 | 4 | 5;
+export interface PopperRef {
+    state: State | undefined;
+    outOfBoundaries: boolean;
+    placement: Placement | undefined;
+    scheduleUpdate?: () => void;
+}

package.json

 {
   "name": "react-bootstrap",
-  "version": "2.4.0",
+  "version": "2.5.0-beta.0",
   "description": "Bootstrap 5 components built with React",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

1365878

decreased by-0.32%

Lines of code

29143

decreased by-0.66%

Number of low quality alerts

2

increased by100%

No dependency changes