@websolutespa/bom-mixer-hooks 1.7.1 → 1.7.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @websolutespa/bom-mixer-hooks
 
+## 1.7.3
+
+### Patch Changes
+
+- Modified: useIntersectionObserver
+
+## 1.7.2
+
+### Patch Changes
+
+- Updating: dependencies
+- Updated dependencies
+  - @websolutespa/bom-mixer-models@1.7.2
+  - @websolutespa/bom-mixer-store@1.7.3
+  - @websolutespa/bom-core@1.7.3
+
 ## 1.7.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import react__default, { RefObject, Dispatch, SetStateAction, MutableRefObject, ComponentProps, useEffect } from 'react';
+import react__default, { RefObject, Dispatch, SetStateAction, CSSProperties, MutableRefObject, ComponentProps, useEffect } from 'react';
 import { ApiRequestOptions } from '@websolutespa/bom-mixer-store';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as zustand_middleware from 'zustand/middleware';
@@ -42,7 +42,8 @@ type Breakpoint = {
     min: number;
     max: number;
 };
-declare function useBreakpoint(): Breakpoint;
+type MediaQuery = Record<BreakpointType, CSSProperties['width']>;
+declare function useBreakpoint(mediaQuery?: MediaQuery): Breakpoint;
 
 type CartProps = {
     hydrated: boolean;
@@ -300,7 +301,7 @@ declare function useIdle(delay?: number, immediate?: boolean): boolean;
 
 declare function useInfiniteLoader<T = any>(items: T[], perPage?: number, delayInMs?: number): [T[], () => void, boolean];
 
-declare function useIntersectionObserver(ref: MutableRefObject<Node | undefined>, options?: IntersectionObserverInit): boolean;
+declare function useIntersectionObserver(ref: MutableRefObject<Node | null>, options?: IntersectionObserverInit): boolean;
 declare function isElement(node?: Node): node is Element;
 
 declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/index.js

@@ -401,14 +401,15 @@ function useWindowSize() {
 }
 
 // src/useBreakpoint/useBreakpoint.ts
-function useBreakpoint() {
+function useBreakpoint(mediaQuery) {
   const windowSize = useWindowSize();
   const theme = (0, import_react7.useContext)(import_styled_components.ThemeContext);
-  if (!theme) {
+  if (!theme && !mediaQuery) {
     throw new Error("useBreakpoint must be used within ThemeProvider");
   }
-  const breakpoints = Object.keys(theme.mediaQuery);
-  const values = Object.values(theme.mediaQuery).map((x) => parseInt(String(x)));
+  const queries = mediaQuery || theme.mediaQuery;
+  const breakpoints = Object.keys(queries);
+  const values = Object.values(queries).map((x) => parseInt(String(x)));
   const breakpoint = (0, import_react7.useMemo)(() => {
     const breakpoint2 = values.reduce((p, c, i) => {
       if (c < windowSize.width) {

package/dist/index.mjs

@@ -257,14 +257,15 @@ function useWindowSize() {
 }
 
 // src/useBreakpoint/useBreakpoint.ts
-function useBreakpoint() {
+function useBreakpoint(mediaQuery) {
   const windowSize = useWindowSize();
   const theme = useContext2(ThemeContext);
-  if (!theme) {
+  if (!theme && !mediaQuery) {
     throw new Error("useBreakpoint must be used within ThemeProvider");
   }
-  const breakpoints = Object.keys(theme.mediaQuery);
-  const values = Object.values(theme.mediaQuery).map((x) => parseInt(String(x)));
+  const queries = mediaQuery || theme.mediaQuery;
+  const breakpoints = Object.keys(queries);
+  const values = Object.values(queries).map((x) => parseInt(String(x)));
   const breakpoint = useMemo(() => {
     const breakpoint2 = values.reduce((p, c, i) => {
       if (c < windowSize.width) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websolutespa/bom-mixer-hooks",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "description": "Mixer Hooks module of the BOM Repository",
   "keywords": [
     "bom",
@@ -29,7 +29,7 @@
     "@websolutespa/bom-mixer-store": "*",
     "framer-motion": ">= 7.2.1",
     "iron-session": ">= 6.2.1",
-    "next": ">= 13.4.19",
+    "next": ">= 14.1.4",
     "react-dom": ">= 18.2.0",
     "react": ">= 18.2.0",
     "styled-components": ">= 5.3.11 <6.x.x",
@@ -37,21 +37,21 @@
     "zustand": ">= 4.4.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.18",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.2.75",
+    "@types/react-dom": "^18.2.24",
     "@types/styled-components": "^5.1.26",
     "@websolutespa/bom-cli": "*",
     "@websolutespa/test": "*",
     "@websolutespa/tsconfig": "*",
-    "eslint": "^8.46.0",
+    "eslint": "^9.0.0",
     "eslint-config-websolute": "*",
     "npm-run-all": "^4.1.5",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "styled-components": "^5.3.11",
-    "ts-node": "^10.9.1",
+    "ts-node": "^10.9.2",
     "tsup": "^6.7.0",
-    "typescript": "^5.1.6"
+    "typescript": "^5.4.5"
   },
   "publishConfig": {
     "access": "public"

package/src/useBreakpoint/useBreakpoint.ts

@@ -1,4 +1,4 @@
-import { useContext, useMemo } from 'react';
+import { CSSProperties, useContext, useMemo } from 'react';
 import { ThemeContext } from 'styled-components';
 import { useWindowSize } from '../useWindowSize/useWindowSize';
 
@@ -10,19 +10,21 @@ type Breakpoint = {
   max: number;
 };
 
-export function useBreakpoint(): Breakpoint {
-  // todo
-  const windowSize = useWindowSize();
+type MediaQuery = Record<BreakpointType, CSSProperties['width']>;
 
-  // const [breakpoint, setBreakpoint] = useState<Breakpoint>({ key: 'xs', min: 0, max: 0 });
+export function useBreakpoint(mediaQuery?: MediaQuery): Breakpoint {
+  const windowSize = useWindowSize();
 
   const theme = useContext(ThemeContext);
-  if (!theme) {
+
+  if (!theme && !mediaQuery) {
     throw new Error('useBreakpoint must be used within ThemeProvider');
   }
 
-  const breakpoints: BreakpointType[] = Object.keys(theme.mediaQuery) as BreakpointType[];
-  const values: number[] = Object.values(theme.mediaQuery).map(x => parseInt(String(x)));
+  const queries: MediaQuery = mediaQuery || theme.mediaQuery;
+
+  const breakpoints: BreakpointType[] = Object.keys(queries) as BreakpointType[];
+  const values: number[] = Object.values(queries).map(x => parseInt(String(x)));
 
   const breakpoint = useMemo(() => {
     const breakpoint = values.reduce((p, c, i) => {

package/src/useCollectionApi/useCollectionApi.ts

@@ -1,6 +1,7 @@
 import { QueryParams, qsSerialize } from '@websolutespa/bom-core';
-import { useApiFetch, useLayout } from '@websolutespa/bom-mixer-hooks';
 import { ApiRequestOptions } from '@websolutespa/bom-mixer-store';
+import { useApiFetch } from '../useApi/useApi';
+import { useLayout } from '../useLayout/useLayout';
 import { localCollectionDelete, localCollectionGet, localCollectionPatch, localCollectionPost, localCollectionPut } from './local.collection';
 
 type CollectionApi = {

package/src/useIntersectionObserver/useIntersectionObserver.ts

@@ -1,7 +1,7 @@
 import { MutableRefObject, useCallback, useEffect, useRef, useState } from 'react';
 
 export function useIntersectionObserver(
-  ref: MutableRefObject<Node | undefined>,
+  ref: MutableRefObject<Node | null>,
   options: IntersectionObserverInit = {}): boolean {
   const {
     threshold = 1,

package/src/useLazyModules/useLazyModules.tsx

@@ -1,6 +1,6 @@
-import { createGenericContext } from '@websolutespa/bom-mixer-hooks';
 import { ILazyModules } from '@websolutespa/bom-mixer-models';
 import React from 'react';
+import { createGenericContext } from '../useGenericContext/useGenericContext';
 
 export type ILazyModulesContext = ILazyModules;