react-responsive-tools 2.5.1 → 2.6.0

package/dist/breakpoints.config.d.ts

@@ -1,3 +1,5 @@
+import { TAdaptiveVariant } from "./interfaces/TAdaptiveVariant";
+export declare const PREFERRED_VARIANT: TAdaptiveVariant;
 declare const HORIZONTAL_BREAKPOINTS: Record<string, string>;
 declare const VERTICAL_BREAKPOINTS: Record<string, string>;
 export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS };

package/dist/breakpoints.config.js

@@ -1,4 +1,5 @@
 // src/breakpoints.config.ts
+export const PREFERRED_VARIANT = 'DtF'; // DESKTOP_TO_FIRST
 const HORIZONTAL_BREAKPOINTS = {
     "xs": "320px",
     "sm": "576px",

package/dist/components/horizontal.d.ts

@@ -5,10 +5,14 @@ import React from "react";
 import { TBreakpoint } from '../interfaces/TBreakpoint';
 interface Props {
     children: React.ReactNode;
-}
-interface ForComponentProps extends Props {
     p: TBreakpoint | number;
 }
-export declare function For({ children, p }: ForComponentProps): import("react/jsx-runtime").JSX.Element | null;
-export declare function Before({ children, p }: ForComponentProps): import("react/jsx-runtime").JSX.Element | null;
+interface BetweenProps {
+    children: React.ReactNode;
+    max: TBreakpoint | number;
+    min: TBreakpoint | number;
+}
+export declare function For({ children, p }: Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function Before({ children, p }: Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function Between({ children, min, max }: BetweenProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/horizontal.js

@@ -3,15 +3,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Created by westp on 15.05.2023
  */
 import { Fragment } from "react";
-import { useBreakpointDF, useBreakpointMF } from '../hooks/useBreakpoint.js';
+import { useBreakpoint, useBreakpointBetween } from '../hooks/useBreakpoint.js';
 export function For({ children, p }) {
-    const is = useBreakpointMF(p);
+    const is = useBreakpoint(p, 'MtF');
     if (is)
         return _jsx(Fragment, { children: children });
     return null;
 }
 export function Before({ children, p }) {
-    const is = useBreakpointDF(p);
+    const is = useBreakpoint(p, 'DtF');
+    if (is)
+        return _jsx(Fragment, { children: children });
+    return null;
+}
+export function Between({ children, min, max }) {
+    const is = useBreakpointBetween(min, max);
     if (is)
         return _jsx(Fragment, { children: children });
     return null;

package/dist/default.config.d.ts

@@ -1,3 +1,5 @@
+import { TAdaptiveVariant } from "./interfaces/TAdaptiveVariant";
+declare const PREFERRED_VARIANT: TAdaptiveVariant;
 declare const HORIZONTAL_BREAKPOINTS: Record<string, string>;
 declare const VERTICAL_BREAKPOINTS: Record<string, string>;
-export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS };
+export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS, PREFERRED_VARIANT };

package/dist/default.config.js

@@ -1,4 +1,5 @@
 // breakpointConfig.js
+const PREFERRED_VARIANT = 'DtF'; // DESKTOP_TO_FIRST
 const HORIZONTAL_BREAKPOINTS = {
     xs: '320px',
     sm: '576px',
@@ -19,4 +20,4 @@ const VERTICAL_BREAKPOINTS = {
     xl: '1600px',
     xxl: '1601px',
 };
-export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS };
+export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS, PREFERRED_VARIANT };

package/dist/functions/getBreakpoint.d.ts

@@ -1,3 +1,3 @@
 import { TBreakpoint, TVerticalBreakpoint } from '../interfaces/TBreakpoint.js';
-export default function getBreakpoint(b: TBreakpoint): string;
+export declare function getBreakpoint(b: TBreakpoint): string;
 export declare function getVBreakpoint(b: TVerticalBreakpoint): string;

package/dist/functions/getBreakpoint.js

@@ -1,5 +1,5 @@
 import { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS } from '../breakpoints.config.js';
-export default function getBreakpoint(b) {
+export function getBreakpoint(b) {
     return HORIZONTAL_BREAKPOINTS[b];
 }
 export function getVBreakpoint(b) {

package/dist/hooks/useBreakpoint.d.ts

@@ -1,5 +1,4 @@
-import { TBreakpoint } from '../interfaces/TBreakpoint.js';
-import { TAdaptiveVariant } from '../interfaces/TAdaptiveVariant.js';
-export declare function useBreakpoint(b: TBreakpoint | number, variant?: TAdaptiveVariant): boolean;
-export declare function useBreakpointMF(b: TBreakpoint | number): boolean;
-export declare function useBreakpointDF(b: TBreakpoint | number): boolean;
+import { TBreakpoint } from '../interfaces/TBreakpoint';
+import { TAdaptiveVariant } from '../interfaces/TAdaptiveVariant';
+export declare function useBreakpoint(b: TBreakpoint | number, variant?: TAdaptiveVariant): boolean | null;
+export declare function useBreakpointBetween(min: TBreakpoint | number, max: TBreakpoint | number, preferredVariant?: TAdaptiveVariant): boolean;

package/dist/hooks/useBreakpoint.js

@@ -1,14 +1,24 @@
 import { useMediaQuery } from 'react-responsive';
-import useVariant from './useVariant.js';
-import getBreakpoint from "../functions/getBreakpoint.js";
-export function useBreakpoint(b, variant = 'MtF') {
-    const _bp = typeof b === 'number' ? b + 'px' : getBreakpoint(b);
+import { PREFERRED_VARIANT } from '../breakpoints.config';
+import useVariant from './useVariant';
+import { getBreakpoint } from "../functions/getBreakpoint";
+export function useBreakpoint(b, variant = PREFERRED_VARIANT) {
+    let _bp = typeof b === 'number' ? b : +getBreakpoint(b);
     const v = useVariant(variant);
-    return useMediaQuery({ query: `(${v}-width: ${_bp})` });
+    if (variant !== PREFERRED_VARIANT)
+        _bp = _bp - 1;
+    return useMediaQuery({ query: `(${v}-width: ${_bp}px)` });
 }
-export function useBreakpointMF(b) {
-    return useBreakpoint(b, 'MtF');
-}
-export function useBreakpointDF(b) {
-    return useBreakpoint(b, 'DtF');
+export function useBreakpointBetween(min, max, preferredVariant = PREFERRED_VARIANT) {
+    let _min = typeof min === 'number' ? min : +getBreakpoint(min);
+    let _max = typeof max === 'number' ? max : +getBreakpoint(max);
+    switch (preferredVariant) {
+        case 'MtF':
+            _max = _max - 1;
+            break;
+        case 'DtF':
+            _min = _min - 1;
+            break;
+    }
+    return useMediaQuery({ minWidth: _min, maxWidth: _max });
 }

package/dist/hooks/useBreakpoint.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/useBreakpoint.test.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { useBreakpoint, useBreakpointBetween } from './useBreakpoint';
+// Mock external dependencies
+jest.mock('react-responsive', () => ({
+    useMediaQuery: jest.fn(),
+}));
+jest.mock('./useVariant', () => ({
+    __esModule: true,
+    default: jest.fn(),
+}));
+jest.mock('../functions/getBreakpoint', () => ({
+    __esModule: true,
+    getBreakpoint: jest.fn(),
+}));
+jest.mock('../breakpoints.config', () => ({
+    __esModule: true,
+    PREFERRED_VARIANT: 'MtF', // adjust to your real preferred variant if needed
+}));
+import { useMediaQuery } from 'react-responsive';
+import useVariant from './useVariant';
+import { getBreakpoint } from '../functions/getBreakpoint';
+import { PREFERRED_VARIANT } from '../breakpoints.config';
+const mockedUseMediaQuery = useMediaQuery;
+const mockedUseVariant = useVariant;
+const mockedGetBreakpoint = getBreakpoint;
+// Small test components to use hooks inside React
+function BreakpointTestComponent(props) {
+    const value = useBreakpoint(props.b, props.variant);
+    return _jsx("div", { "data-testid": "value", children: String(value) });
+}
+function BreakpointBetweenTestComponent(props) {
+    const value = useBreakpointBetween(props.min, props.max, props.preferredVariant);
+    return _jsx("div", { "data-testid": "value", children: String(value) });
+}
+describe('useBreakpoint', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        mockedUseVariant.mockReturnValue('min');
+    });
+    it('should call useMediaQuery with numeric breakpoint as-is when variant === PREFERRED_VARIANT', () => {
+        mockedUseMediaQuery.mockReturnValue(true);
+        const { getByTestId } = render(_jsx(BreakpointTestComponent, { b: 768, variant: PREFERRED_VARIANT }));
+        expect(mockedUseVariant).toHaveBeenCalledWith(PREFERRED_VARIANT);
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
+            query: '(min-width: 768px)',
+        });
+        expect(getByTestId('value').textContent).toBe('true');
+    });
+    it('should convert named breakpoint using getBreakpoint', () => {
+        mockedGetBreakpoint.mockReturnValue('1024');
+        mockedUseMediaQuery.mockReturnValue(false);
+        const { getByTestId } = render(_jsx(BreakpointTestComponent, { b: 'lg', variant: PREFERRED_VARIANT }));
+        expect(mockedGetBreakpoint).toHaveBeenCalledWith('lg');
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
+            query: '(min-width: 1024px)',
+        });
+        expect(getByTestId('value').textContent).toBe('false');
+    });
+    it('should decrease breakpoint by 1px when variant !== PREFERRED_VARIANT (numeric)', () => {
+        mockedUseVariant.mockReturnValue('max');
+        mockedUseMediaQuery.mockReturnValue(true);
+        const { getByTestId } = render(_jsx(BreakpointTestComponent, { b: 500, variant: 'DtF' }));
+        expect(mockedUseVariant).toHaveBeenCalledWith('DtF');
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
+            query: '(max-width: 499px)',
+        });
+        expect(getByTestId('value').textContent).toBe('true');
+    });
+    it('should also decrease named breakpoint by 1px when variant !== PREFERRED_VARIANT', () => {
+        mockedGetBreakpoint.mockReturnValue('600');
+        mockedUseVariant.mockReturnValue('max');
+        mockedUseMediaQuery.mockReturnValue(false);
+        const { getByTestId } = render(_jsx(BreakpointTestComponent, { b: 'md', variant: 'DtF' }));
+        expect(mockedGetBreakpoint).toHaveBeenCalledWith('md');
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
+            query: '(max-width: 599px)',
+        });
+        expect(getByTestId('value').textContent).toBe('false');
+    });
+});
+describe('useBreakpointBetween', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should use min and max as-is when preferredVariant === PREFERRED_VARIANT (numeric)', () => {
+        mockedUseMediaQuery.mockReturnValue(true);
+        const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 320, max: 768, preferredVariant: PREFERRED_VARIANT }));
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
+            minWidth: 320,
+            maxWidth: 767, // 768 - 1 because PREFERRED_VARIANT === 'MtF'
+        });
+        expect(getByTestId('value').textContent).toBe('true');
+    });
+    it('should convert named min and max via getBreakpoint when preferredVariant === PREFERRED_VARIANT', () => {
+        mockedGetBreakpoint
+            .mockReturnValueOnce('320') // for min
+            .mockReturnValueOnce('768'); // for max
+        mockedUseMediaQuery.mockReturnValue(false);
+        const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 'sm', max: 'md', preferredVariant: PREFERRED_VARIANT }));
+        expect(mockedGetBreakpoint).toHaveBeenNthCalledWith(1, 'sm');
+        expect(mockedGetBreakpoint).toHaveBeenNthCalledWith(2, 'md');
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
+            minWidth: 320,
+            maxWidth: 767, // 768 - 1 because PREFERRED_VARIANT === 'MtF'
+        });
+        expect(getByTestId('value').textContent).toBe('false');
+    });
+    it('for preferredVariant === "MtF" should decrease max by 1px', () => {
+        mockedUseMediaQuery.mockReturnValue(true);
+        const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 320, max: 768, preferredVariant: 'MtF' }));
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
+            minWidth: 320,
+            maxWidth: 767,
+        });
+        expect(getByTestId('value').textContent).toBe('true');
+    });
+    it('for preferredVariant === "DtF" should decrease min by 1px', () => {
+        mockedUseMediaQuery.mockReturnValue(false);
+        const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 320, max: 768, preferredVariant: 'DtF' }));
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
+            minWidth: 319,
+            maxWidth: 768,
+        });
+        expect(getByTestId('value').textContent).toBe('false');
+    });
+    it('MtF + named values: should decrease max after getBreakpoint', () => {
+        mockedGetBreakpoint
+            .mockReturnValueOnce('400') // min
+            .mockReturnValueOnce('900'); // max
+        mockedUseMediaQuery.mockReturnValue(true);
+        const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 'sm', max: 'xl', preferredVariant: 'MtF' }));
+        expect(mockedGetBreakpoint).toHaveBeenNthCalledWith(1, 'sm');
+        expect(mockedGetBreakpoint).toHaveBeenNthCalledWith(2, 'xl');
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
+            minWidth: 400,
+            maxWidth: 899,
+        });
+        expect(getByTestId('value').textContent).toBe('true');
+    });
+    it('DtF + named values: should decrease min after getBreakpoint', () => {
+        mockedGetBreakpoint
+            .mockReturnValueOnce('400') // min
+            .mockReturnValueOnce('900'); // max
+        mockedUseMediaQuery.mockReturnValue(false);
+        const { getByTestId } = render(_jsx(BreakpointBetweenTestComponent, { min: 'sm', max: 'xl', preferredVariant: 'DtF' }));
+        expect(mockedUseMediaQuery).toHaveBeenCalledWith({
+            minWidth: 399,
+            maxWidth: 900,
+        });
+        expect(getByTestId('value').textContent).toBe('false');
+    });
+});

package/dist/hooks/useVBreakpoint.d.ts

@@ -1,5 +1,3 @@
 import { TVerticalBreakpoint } from '../interfaces/TBreakpoint';
 import { TAdaptiveVariant } from '../interfaces/TAdaptiveVariant';
-export default function useVBreakpoint(b: TVerticalBreakpoint | number, variant?: TAdaptiveVariant): boolean;
-export declare function useVBreakpointMF(b: TVerticalBreakpoint | number): boolean;
-export declare function useVBreakpointDF(b: TVerticalBreakpoint | number): boolean;
+export declare function useVBreakpoint(b: TVerticalBreakpoint | number, variant?: TAdaptiveVariant): boolean;

package/dist/hooks/useVBreakpoint.js

@@ -1,14 +1,8 @@
 import { useMediaQuery } from 'react-responsive';
 import useVariant from './useVariant.js';
 import { getVBreakpoint } from "../functions/getBreakpoint.js";
-export default function useVBreakpoint(b, variant = 'MtF') {
+export function useVBreakpoint(b, variant = 'MtF') {
     const _bp = typeof b === 'number' ? b + 'px' : getVBreakpoint(b);
     const v = useVariant(variant);
     return useMediaQuery({ query: `(${v}-height: ${_bp})` });
 }
-export function useVBreakpointMF(b) {
-    return useVBreakpoint(b, 'MtF');
-}
-export function useVBreakpointDF(b) {
-    return useVBreakpoint(b, 'DtF');
-}

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 import { TBreakpoint, TVerticalBreakpoint } from './interfaces/TBreakpoint';
 import { TBreakpoints, TVerticalBreakpoints } from './interfaces/TBreakpoints';
-export * from './hooks/useBreakpoint.js';
-export * from './hooks/useVBreakpoint.js';
+import { useBreakpointBetween, useBreakpoint } from './hooks/useBreakpoint.js';
+import { useVBreakpoint } from './hooks/useVBreakpoint.js';
+import { getBreakpoint, getVBreakpoint } from './functions/getBreakpoint.js';
 export type { TBreakpoints, TBreakpoint, TVerticalBreakpoint, TVerticalBreakpoints, };
+export { useBreakpointBetween, useBreakpoint, useVBreakpoint, getBreakpoint, getVBreakpoint, };
 export * from './components/horizontal.js';

package/dist/index.js

@@ -1,3 +1,5 @@
-export * from './hooks/useBreakpoint.js';
-export * from './hooks/useVBreakpoint.js';
+import { useBreakpointBetween, useBreakpoint } from './hooks/useBreakpoint.js';
+import { useVBreakpoint } from './hooks/useVBreakpoint.js';
+import { getBreakpoint, getVBreakpoint } from './functions/getBreakpoint.js';
+export { useBreakpointBetween, useBreakpoint, useVBreakpoint, getBreakpoint, getVBreakpoint, };
 export * from './components/horizontal.js';

package/dist/scripts/createConfig.mjs

@@ -1 +1 @@
-import o from"fs";import n from"path";import{fileURLToPath as e}from"url";import{HORIZONTAL_BREAKPOINTS as r,VERTICAL_BREAKPOINTS as i}from"../default.config.js";const s=e(import.meta.url),l=n.dirname(s),t=n.resolve(l,"../../../../breakpoints.config.js");(async()=>{let e=r,s=i;if(o.existsSync(t))try{console.log(`User config file found at: ${t}`);const o=await import(t);console.log(`Loaded user config: ${JSON.stringify(o,null,2)}`),o.HORIZONTAL_BREAKPOINTS?(e=o.HORIZONTAL_BREAKPOINTS,console.log("Using user provided horizontal breakpoints.")):console.log("Using default horizontal breakpoints."),o.VERTICAL_BREAKPOINTS?(s=o.VERTICAL_BREAKPOINTS,console.log("Using user provided vertical breakpoints.")):console.log("Using default vertical breakpoints.")}catch(o){console.error("Error loading user config:",o)}else console.log(`User config file not found at: ${t}. Using default breakpoints.`);const c=`\n// breakpoints.config.mjs\nconst HORIZONTAL_BREAKPOINTS = ${JSON.stringify(e,null,2)};\n\nconst VERTICAL_BREAKPOINTS = ${JSON.stringify(s,null,2)};\n\nexport { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS };\n`;try{o.writeFileSync(n.resolve(l,"../breakpoints.config.js"),c),console.log("Config file has been generated successfully.")}catch(o){console.error("Error writing merged config file:",o)}})();
+import o from"fs";import n from"path";import{fileURLToPath as e}from"url";import{HORIZONTAL_BREAKPOINTS as r,VERTICAL_BREAKPOINTS as s,PREFERRED_VARIANT as i}from"../default.config.js";const l=e(import.meta.url),t=n.dirname(l),R=n.resolve(t,"../../../../breakpoints.config.js");(async()=>{let e=r,l=s,a=i;if(o.existsSync(R))try{console.log(`User config file found at: ${R}`);const o=await import(R);console.log(`Loaded user config: ${JSON.stringify(o,null,2)}`),o.HORIZONTAL_BREAKPOINTS?(e=o.HORIZONTAL_BREAKPOINTS,console.log("Using user provided horizontal breakpoints.")):console.log("Using default horizontal breakpoints."),o.VERTICAL_BREAKPOINTS?(l=o.VERTICAL_BREAKPOINTS,console.log("Using user provided vertical breakpoints.")):console.log("Using default vertical breakpoints."),o.PREFERRED_VARIANT?(a=o.PREFERRED_VARIANT,console.log("Using user provided preferred variant.")):console.log("Using default preferred variant.")}catch(o){console.error("Error loading user config:",o)}else console.log(`User config file not found at: ${R}. Using default breakpoints.`);const c=`\n    // breakpoints.config.mjs\n    const HORIZONTAL_BREAKPOINTS = ${JSON.stringify(e,null,2)};\n\n    const VERTICAL_BREAKPOINTS = ${JSON.stringify(l,null,2)};\n\n    const PREFERRED_VARIANT = ${JSON.stringify(a)};\n\n    export { HORIZONTAL_BREAKPOINTS, VERTICAL_BREAKPOINTS, PREFERRED_VARIANT };\n    `;try{o.writeFileSync(n.resolve(t,"../breakpoints.config.js"),c),console.log("Config file has been generated successfully.")}catch(o){console.error("Error writing merged config file:",o)}})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-responsive-tools",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -43,11 +43,13 @@
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.12",
     "@types/node": "^22.5.4",
+    "@types/react": "^19.1.8",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^8.5.0",
     "@typescript-eslint/parser": "^8.5.0",
@@ -69,6 +71,7 @@
     "glob": "^11.0.0",
     "husky": "^9.1.5",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^30.2.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-responsive": "^10.0.1",
@@ -83,10 +86,13 @@
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4"
   },
+  "resolutions": {
+    "string-width": "4.2.3",
+    "string-length": "4.0.2",
+    "strip-ansi": "6.0.1",
+    "wrap-ansi": "7.0.0"
+  },
   "bin": {
     "react-responsive-tools": "bin/react-responsive-tools.mjs"
-  },
-  "dependencies": {
-    "@types/react": "^19.1.8"
   }
 }