@uspk-ui/media-query - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

dist/index.cjs.js

@@ -44,111 +44,86 @@ "use strict";
 // src/media-query.tsx
-var import_react_utils2 = require("@uspk-ui/react-utils");
+var import_system = require("@uspk-ui/system");
+var getBreakpoint = (theme, value) => {
+  var _a;
+  return ((_a = theme == null ? void 0 : theme.breakpoints) == null ? void 0 : _a[value]) ?? value;
+};
+function useQuery(props) {
+  const { breakpoint = "", below, above } = props;
+  const theme = (0, import_system.useTheme)();
+  const bpBelow = getBreakpoint(theme, below);
+  const bpAbove = getBreakpoint(theme, above);
+  let query = breakpoint;
+  if (bpBelow) {
+    query = `(max-width: ${bpBelow})`;
+  } else if (bpAbove) {
+    query = `(min-width: ${bpAbove})`;
+  }
+  return query;
+}
 
 // src/use-media-query.ts
 var import_react_env = require("@uspk-ui/react-env");
-var import_react_utils = require("@uspk-ui/react-utils");
-var React2 = __toESM(require("react"));
-var useSafeLayoutEffect = import_react_utils.isBrowser ? React2.useLayoutEffect : React2.useEffect;
-function useMediaQuery(query) {
+var import_react2 = require("react");
+function useMediaQuery(query, options = {}) {
+  const { ssr = true, fallback } = options;
   const env = (0, import_react_env.useEnvironment)();
   const queries = Array.isArray(query) ? query : [query];
-  const isSupported = import_react_utils.isBrowser && "matchMedia" in env.window;
-  const [matches, setMatches] = React2.useState(
-    queries.map(
-      (query2) => isSupported ? !!env.window.matchMedia(query2).matches : false
-    )
-  );
-  useSafeLayoutEffect(() => {
-    if (!isSupported)
-      return void 0;
-    const mediaQueryList = queries.map((query2) => env.window.matchMedia(query2));
-    const listenerList = mediaQueryList.map((_, index) => {
-      const listener = (mqlEvent) => {
-        const queryIndex = mediaQueryList.findIndex(
-          (mediaQuery) => mediaQuery.media === mqlEvent.media
-        );
-        setMatches((matches2) => {
-          const currentMatches = matches2.map((x) => x);
-          currentMatches[queryIndex] = mqlEvent.matches;
-          return currentMatches;
+  let fallbackValues = Array.isArray(fallback) ? fallback : [fallback];
+  fallbackValues = fallbackValues.filter((v) => v != null);
+  const [value, setValue] = (0, import_react2.useState)(() => {
+    return queries.map((query2, index) => ({
+      media: query2,
+      matches: ssr ? !!fallbackValues[index] : env.window.matchMedia(query2).matches
+    }));
+  });
+  (0, import_react2.useEffect)(() => {
+    setValue(
+      queries.map((query2) => ({
+        media: query2,
+        matches: env.window.matchMedia(query2).matches
+      }))
+    );
+    const mql = queries.map((query2) => env.window.matchMedia(query2));
+    const handler = (evt) => {
+      setValue((prev) => {
+        return prev.slice().map((item) => {
+          if (item.media === evt.media)
+            return { ...item, matches: evt.matches };
+          return item;
         });
-      };
-      if (typeof mediaQueryList[index].addEventListener === "function") {
-        mediaQueryList[index].addEventListener("change", listener);
+      });
+    };
+    mql.forEach((mql2) => {
+      if (typeof mql2.addListener === "function") {
+        mql2.addListener(handler);
       } else {
-        mediaQueryList[index].addListener(listener);
+        mql2.addEventListener("change", handler);
       }
-      return listener;
     });
     return () => {
-      mediaQueryList.forEach((_, index) => {
-        if (typeof mediaQueryList[index].removeEventListener === "function") {
-          mediaQueryList[index].removeEventListener(
-            "change",
-            listenerList[index]
-          );
+      mql.forEach((mql2) => {
+        if (typeof mql2.removeListener === "function") {
+          mql2.removeListener(handler);
         } else {
-          mediaQueryList[index].removeListener(listenerList[index]);
+          mql2.removeEventListener("change", handler);
         }
       });
     };
-  }, []);
-  return matches;
+  }, [env.window]);
+  return value.map((item) => item.matches);
 }
 
-// src/media-query.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var Visibility = (props) => {
-  const { breakpoint, hide, children } = props;
-  const [show] = useMediaQuery(breakpoint);
-  const isVisible = hide ? !show : show;
-  const rendered = isVisible ? children : null;
-  return rendered;
-};
-var Hide = (props) => {
-  const { children } = props;
-  const query = useQuery(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Visibility, {
-    breakpoint: query,
-    hide: true,
-    children
-  });
-};
-Hide.displayName = "Hide";
-var Show = (props) => {
-  const { children } = props;
-  const query = useQuery(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Visibility, {
-    breakpoint: query,
-    children
-  });
-};
-Show.displayName = "Show";
-var getBreakpoint = (theme, value) => (0, import_react_utils2.memoizedGet)(theme, `breakpoints.${value}`, value);
-function useQuery(props) {
-  const { breakpoint = "", below, above } = props;
-  const theme = (0, import_react_utils2.useTheme)();
-  const bpBelow = getBreakpoint(theme, below);
-  const bpAbove = getBreakpoint(theme, above);
-  let query = breakpoint;
-  if (bpBelow) {
-    query = `(max-width: ${bpBelow})`;
-  } else if (bpAbove) {
-    query = `(min-width: ${bpAbove})`;
-  }
-  return query;
-}
-
-// src/media-query.hook.tsx
-function usePrefersReducedMotion() {
+// src/media-query.hook.ts
+function usePrefersReducedMotion(options) {
   const [prefersReducedMotion] = useMediaQuery(
-    "(prefers-reduced-motion: reduce)"
+    "(prefers-reduced-motion: reduce)",
+    options
   );
   return prefersReducedMotion;
 }
-function useColorModePreference() {
-  const [isLight, isDark] = useMediaQuery([
-    "(prefers-color-scheme: light)",
-    "(prefers-color-scheme: dark)"
-  ]);
+function useColorModePreference(options) {
+  const [isLight, isDark] = useMediaQuery(
+    ["(prefers-color-scheme: light)", "(prefers-color-scheme: dark)"],
+    options
+  );
   if (isLight)
@@ -162,71 +137,37 @@ return "light";
 // src/use-breakpoint.ts
-var import_react2 = __toESM(require("react"));
-var import_react_env2 = require("@uspk-ui/react-env");
-var import_react_utils3 = require("@uspk-ui/react-utils");
-function useBreakpoint(defaultBreakpoint = "base") {
-  const { __breakpoints } = (0, import_react_utils3.useTheme)();
-  const env = (0, import_react_env2.useEnvironment)();
-  const queries = import_react2.default.useMemo(
-    () => (__breakpoints == null ? void 0 : __breakpoints.details.map(({ minMaxQuery, breakpoint }) => ({
+var import_system2 = require("@uspk-ui/system");
+
+// ../../utilities/shared-utils/src/index.ts
+function isObject(value) {
+  const type = typeof value;
+  return value != null && (type === "object" || type === "function") && !Array.isArray(value);
+}
+
+// src/use-breakpoint.ts
+function useBreakpoint(arg) {
+  var _a;
+  const opts = isObject(arg) ? arg : { fallback: arg ?? "base" };
+  const theme = (0, import_system2.useTheme)();
+  const breakpoints = theme.__breakpoints.details.map(
+    ({ minMaxQuery, breakpoint }) => ({
       breakpoint,
       query: minMaxQuery.replace("@media screen and ", "")
-    }))) ?? [],
-    [__breakpoints]
+    })
   );
-  const [currentBreakpoint, setCurrentBreakpoint] = import_react2.default.useState(() => {
-    if (defaultBreakpoint) {
-      const fallbackBreakpointDetail = queries.find(
-        ({ breakpoint }) => breakpoint === defaultBreakpoint
-      );
-      if (fallbackBreakpointDetail) {
-        return fallbackBreakpointDetail.breakpoint;
-      }
-    }
-    if (env.window.matchMedia) {
-      const matchingBreakpointDetail = queries.find(
-        ({ query }) => env.window.matchMedia(query).matches
-      );
-      if (matchingBreakpointDetail) {
-        return matchingBreakpointDetail.breakpoint;
-      }
-    }
-    return void 0;
-  });
-  import_react2.default.useEffect(() => {
-    const allUnregisterFns = queries.map(({ breakpoint, query }) => {
-      const mediaQueryList = env.window.matchMedia(query);
-      if (mediaQueryList.matches) {
-        setCurrentBreakpoint(breakpoint);
-      }
-      const handleChange = (ev) => {
-        if (ev.matches) {
-          setCurrentBreakpoint(breakpoint);
-        }
-      };
-      if (typeof mediaQueryList.addEventListener === "function") {
-        mediaQueryList.addEventListener("change", handleChange);
-      } else {
-        mediaQueryList.addListener(handleChange);
-      }
-      return () => {
-        if (typeof mediaQueryList.removeEventListener === "function") {
-          mediaQueryList.removeEventListener("change", handleChange);
-        } else {
-          mediaQueryList.removeListener(handleChange);
-        }
-      };
-    });
-    return () => {
-      allUnregisterFns.forEach((unregister) => unregister());
-    };
-  }, [queries, __breakpoints, env.window]);
-  return currentBreakpoint;
+  const fallback = breakpoints.map((bp) => bp.breakpoint === opts.fallback);
+  const values = useMediaQuery(
+    breakpoints.map((bp) => bp.query),
+    { fallback, ssr: opts.ssr }
+  );
+  const index = values.findIndex((value) => value == true);
+  return ((_a = breakpoints[index]) == null ? void 0 : _a.breakpoint) ?? opts.fallback;
 }
 
 // src/use-breakpoint-value.ts
-var import_react_utils5 = require("@uspk-ui/react-utils");
+var import_system3 = require("@uspk-ui/system");
+var import_breakpoint_utils2 = require("@uspk-ui/breakpoint-utils");
 
 // src/media-query.utils.ts
-var import_react_utils4 = require("@uspk-ui/react-utils");
-function getClosestValue(values, breakpoint, breakpoints = import_react_utils4.breakpoints) {
+var import_breakpoint_utils = require("@uspk-ui/breakpoint-utils");
+function getClosestValue(values, breakpoint, breakpoints = import_breakpoint_utils.breakpoints) {
   let index = Object.keys(values).indexOf(breakpoint);
@@ -239,3 +180,3 @@ if (index !== -1) {
     const key = breakpoints[stopIndex];
-    if (values[key] != null) {
+    if (values.hasOwnProperty(key)) {
       index = stopIndex;
@@ -254,11 +195,12 @@ break;
 // src/use-breakpoint-value.ts
-function useBreakpointValue(values, defaultBreakpoint) {
+function useBreakpointValue(values, arg) {
   var _a;
-  const breakpoint = useBreakpoint(defaultBreakpoint);
-  const theme = (0, import_react_utils5.useTheme)();
+  const opts = isObject(arg) ? arg : { fallback: arg ?? "base" };
+  const breakpoint = useBreakpoint(opts);
+  const theme = (0, import_system3.useTheme)();
   if (!breakpoint)
-    return void 0;
+    return;
   const breakpoints = Array.from(((_a = theme.__breakpoints) == null ? void 0 : _a.keys) || []);
-  const obj = (0, import_react_utils5.isArray)(values) ? (0, import_react_utils5.fromEntries)(
-    Object.entries((0, import_react_utils5.arrayToObjectNotation)(values, breakpoints)).map(
+  const obj = Array.isArray(values) ? Object.fromEntries(
+    Object.entries((0, import_breakpoint_utils2.arrayToObjectNotation)(values, breakpoints)).map(
       ([key, value]) => [key, value]
@@ -269,2 +211,38 @@ )
 }
+
+// src/visibility.tsx
+function Visibility(props) {
+  const { breakpoint, hide, children, ssr } = props;
+  const [show] = useMediaQuery(breakpoint, { ssr });
+  const isVisible = hide ? !show : show;
+  const rendered = isVisible ? children : null;
+  return rendered;
+}
+
+// src/show.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Show(props) {
+  const { children, ssr } = props;
+  const query = useQuery(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Visibility, {
+    breakpoint: query,
+    ssr,
+    children
+  });
+}
+Show.displayName = "Show";
+
+// src/hide.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Hide(props) {
+  const { children, ssr } = props;
+  const query = useQuery(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Visibility, {
+    breakpoint: query,
+    hide: true,
+    ssr,
+    children
+  });
+}
+Hide.displayName = "Hide";
 // Annotate the CommonJS export names for ESM import in node:
@@ -271,0 +249,0 @@ 0 && (module.exports = {

dist/index.d.ts

@@ -1,24 +0,1 @@
-import * as React from 'react';
-
-declare type HideProps = ShowProps;
-declare const Hide: React.FC<HideProps>;
-interface ShowProps {
-    /**
-     * A custom css media query that determines when the `children` are rendered.
-     * Will render `children` if that query resolves to `true`.
-     */
-    breakpoint?: string;
-    /**
-     * A value from the `breakpoints` section in the theme. Will render `children`
-     * from that breakpoint and below. Default breakpoint values: `sm`, `md`, `lg`, `xl`, `2xl`.
-     */
-    below?: string;
-    /**
-     * A value from the `breakpoints` section in the theme. Will render `children`
-     * from that breakpoint and above. Default breakpoint values: `sm`, `md`, `lg`, `xl`, `2xl`.
-     */
-    above?: string;
-    children?: React.ReactNode;
-}
-declare const Show: React.FC<ShowProps>;
 interface UseQueryProps {
@@ -31,37 +8,41 @@ breakpoint?: string;
 
+declare type UseMediaQueryOptions = {
+    fallback?: boolean | boolean[];
+    ssr?: boolean;
+};
 /**
+ * React hook that tracks state of a CSS media query
+ *
+ * @param query the media query to match
+ * @param options the media query options { fallback, ssr }
+ *
+ */
+declare function useMediaQuery(query: string | string[], options?: UseMediaQueryOptions): boolean[];
+
+/**
  * React hook used to get the user's animation preference.
+ *
  */
-declare function usePrefersReducedMotion(): boolean;
+declare function usePrefersReducedMotion(options?: UseMediaQueryOptions): boolean;
 /**
  * React hook for getting the user's color mode preference.
  */
-declare function useColorModePreference(): "dark" | "light" | undefined;
+declare function useColorModePreference(options?: UseMediaQueryOptions): "dark" | "light" | undefined;
 
+declare type UseBreakpointOptions = {
+    ssr?: boolean;
+    fallback?: string;
+};
 /**
  * React hook used to get the current responsive media breakpoint.
  *
- * @param [defaultBreakpoint="base"] default breakpoint name
- * (in non-window environments like SSR)
- *
  * For SSR, you can use a package like [is-mobile](https://github.com/kaimallea/isMobile)
- * to get the default breakpoint value from the user-agent
+ * to get the default breakpoint value from the user-agent.
  */
-declare function useBreakpoint(defaultBreakpoint?: string): any;
+declare function useBreakpoint(arg?: string | UseBreakpointOptions): string;
 
 /**
- * React hook that tracks state of a CSS media query
- *
- * @param query the media query to match
- */
-declare function useMediaQuery(query: string | string[]): boolean[];
-
-/**
  * React hook for getting the value for the current breakpoint from the
  * provided responsive values object.
  *
- * @param values
- * @param [defaultBreakpoint] default breakpoint name
- * (in non-window environments like SSR)
- *
  * For SSR, you can use a package like [is-mobile](https://github.com/kaimallea/isMobile)
@@ -72,5 +53,44 @@ * to get the default breakpoint value from the user-agent
  * const width = useBreakpointValue({ base: '150px', md: '250px' })
+ *
  */
-declare function useBreakpointValue<T = any>(values: Partial<Record<string, T>> | T[], defaultBreakpoint?: string): T | undefined;
+declare function useBreakpointValue<T = any>(values: Partial<Record<string, T>> | T[], arg?: UseBreakpointOptions | string): T | undefined;
 
-export { Hide, HideProps, Show, ShowProps, UseQueryProps, useBreakpoint, useBreakpointValue, useColorModePreference, useMediaQuery, usePrefersReducedMotion, useQuery };
+interface ShowProps {
+    /**
+     * A custom css media query that determines when the `children` are rendered.
+     * Will render `children` if that query resolves to `true`.
+     */
+    breakpoint?: string;
+    /**
+     * A value from the `breakpoints` section in the theme. Will render `children`
+     * from that breakpoint and below. Default breakpoint values: `sm`, `md`, `lg`, `xl`, `2xl`.
+     */
+    below?: string;
+    /**
+     * A value from the `breakpoints` section in the theme. Will render `children`
+     * from that breakpoint and above. Default breakpoint values: `sm`, `md`, `lg`, `xl`, `2xl`.
+     */
+    above?: string;
+    ssr?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * `Show` wraps a component to render if the provided media query matches.
+ *
+ */
+declare function Show(props: ShowProps): JSX.Element;
+declare namespace Show {
+    var displayName: string;
+}
+
+declare type HideProps = ShowProps;
+/**
+ * `Hide` wraps a component to not render if the provided media query matches.
+ *
+ */
+declare function Hide(props: HideProps): JSX.Element;
+declare namespace Hide {
+    var displayName: string;
+}
+
+export { Hide, HideProps, Show, ShowProps, UseBreakpointOptions, UseMediaQueryOptions, UseQueryProps, useBreakpoint, useBreakpointValue, useColorModePreference, useMediaQuery, usePrefersReducedMotion, useQuery };

dist/index.esm.js

@@ -5,111 +5,86 @@ // ../../../react-shim.js
 // src/media-query.tsx
-import { memoizedGet as get, useTheme } from "@uspk-ui/react-utils";
+import { useTheme } from "@uspk-ui/system";
+var getBreakpoint = (theme, value) => {
+  var _a;
+  return ((_a = theme == null ? void 0 : theme.breakpoints) == null ? void 0 : _a[value]) ?? value;
+};
+function useQuery(props) {
+  const { breakpoint = "", below, above } = props;
+  const theme = useTheme();
+  const bpBelow = getBreakpoint(theme, below);
+  const bpAbove = getBreakpoint(theme, above);
+  let query = breakpoint;
+  if (bpBelow) {
+    query = `(max-width: ${bpBelow})`;
+  } else if (bpAbove) {
+    query = `(min-width: ${bpAbove})`;
+  }
+  return query;
+}
 
 // src/use-media-query.ts
 import { useEnvironment } from "@uspk-ui/react-env";
-import { isBrowser } from "@uspk-ui/react-utils";
-import * as React2 from "react";
-var useSafeLayoutEffect = isBrowser ? React2.useLayoutEffect : React2.useEffect;
-function useMediaQuery(query) {
+import { useEffect, useState } from "react";
+function useMediaQuery(query, options = {}) {
+  const { ssr = true, fallback } = options;
   const env = useEnvironment();
   const queries = Array.isArray(query) ? query : [query];
-  const isSupported = isBrowser && "matchMedia" in env.window;
-  const [matches, setMatches] = React2.useState(
-    queries.map(
-      (query2) => isSupported ? !!env.window.matchMedia(query2).matches : false
-    )
-  );
-  useSafeLayoutEffect(() => {
-    if (!isSupported)
-      return void 0;
-    const mediaQueryList = queries.map((query2) => env.window.matchMedia(query2));
-    const listenerList = mediaQueryList.map((_, index) => {
-      const listener = (mqlEvent) => {
-        const queryIndex = mediaQueryList.findIndex(
-          (mediaQuery) => mediaQuery.media === mqlEvent.media
-        );
-        setMatches((matches2) => {
-          const currentMatches = matches2.map((x) => x);
-          currentMatches[queryIndex] = mqlEvent.matches;
-          return currentMatches;
+  let fallbackValues = Array.isArray(fallback) ? fallback : [fallback];
+  fallbackValues = fallbackValues.filter((v) => v != null);
+  const [value, setValue] = useState(() => {
+    return queries.map((query2, index) => ({
+      media: query2,
+      matches: ssr ? !!fallbackValues[index] : env.window.matchMedia(query2).matches
+    }));
+  });
+  useEffect(() => {
+    setValue(
+      queries.map((query2) => ({
+        media: query2,
+        matches: env.window.matchMedia(query2).matches
+      }))
+    );
+    const mql = queries.map((query2) => env.window.matchMedia(query2));
+    const handler = (evt) => {
+      setValue((prev) => {
+        return prev.slice().map((item) => {
+          if (item.media === evt.media)
+            return { ...item, matches: evt.matches };
+          return item;
         });
-      };
-      if (typeof mediaQueryList[index].addEventListener === "function") {
-        mediaQueryList[index].addEventListener("change", listener);
+      });
+    };
+    mql.forEach((mql2) => {
+      if (typeof mql2.addListener === "function") {
+        mql2.addListener(handler);
       } else {
-        mediaQueryList[index].addListener(listener);
+        mql2.addEventListener("change", handler);
       }
-      return listener;
     });
     return () => {
-      mediaQueryList.forEach((_, index) => {
-        if (typeof mediaQueryList[index].removeEventListener === "function") {
-          mediaQueryList[index].removeEventListener(
-            "change",
-            listenerList[index]
-          );
+      mql.forEach((mql2) => {
+        if (typeof mql2.removeListener === "function") {
+          mql2.removeListener(handler);
         } else {
-          mediaQueryList[index].removeListener(listenerList[index]);
+          mql2.removeEventListener("change", handler);
         }
       });
     };
-  }, []);
-  return matches;
+  }, [env.window]);
+  return value.map((item) => item.matches);
 }
 
-// src/media-query.tsx
-import { jsx } from "react/jsx-runtime";
-var Visibility = (props) => {
-  const { breakpoint, hide, children } = props;
-  const [show] = useMediaQuery(breakpoint);
-  const isVisible = hide ? !show : show;
-  const rendered = isVisible ? children : null;
-  return rendered;
-};
-var Hide = (props) => {
-  const { children } = props;
-  const query = useQuery(props);
-  return /* @__PURE__ */ jsx(Visibility, {
-    breakpoint: query,
-    hide: true,
-    children
-  });
-};
-Hide.displayName = "Hide";
-var Show = (props) => {
-  const { children } = props;
-  const query = useQuery(props);
-  return /* @__PURE__ */ jsx(Visibility, {
-    breakpoint: query,
-    children
-  });
-};
-Show.displayName = "Show";
-var getBreakpoint = (theme, value) => get(theme, `breakpoints.${value}`, value);
-function useQuery(props) {
-  const { breakpoint = "", below, above } = props;
-  const theme = useTheme();
-  const bpBelow = getBreakpoint(theme, below);
-  const bpAbove = getBreakpoint(theme, above);
-  let query = breakpoint;
-  if (bpBelow) {
-    query = `(max-width: ${bpBelow})`;
-  } else if (bpAbove) {
-    query = `(min-width: ${bpAbove})`;
-  }
-  return query;
-}
-
-// src/media-query.hook.tsx
-function usePrefersReducedMotion() {
+// src/media-query.hook.ts
+function usePrefersReducedMotion(options) {
   const [prefersReducedMotion] = useMediaQuery(
-    "(prefers-reduced-motion: reduce)"
+    "(prefers-reduced-motion: reduce)",
+    options
   );
   return prefersReducedMotion;
 }
-function useColorModePreference() {
-  const [isLight, isDark] = useMediaQuery([
-    "(prefers-color-scheme: light)",
-    "(prefers-color-scheme: dark)"
-  ]);
+function useColorModePreference(options) {
+  const [isLight, isDark] = useMediaQuery(
+    ["(prefers-color-scheme: light)", "(prefers-color-scheme: dark)"],
+    options
+  );
   if (isLight)
@@ -123,75 +98,36 @@ return "light";
 // src/use-breakpoint.ts
-import React3 from "react";
-import { useEnvironment as useEnvironment2 } from "@uspk-ui/react-env";
-import { useTheme as useTheme2 } from "@uspk-ui/react-utils";
-function useBreakpoint(defaultBreakpoint = "base") {
-  const { __breakpoints } = useTheme2();
-  const env = useEnvironment2();
-  const queries = React3.useMemo(
-    () => (__breakpoints == null ? void 0 : __breakpoints.details.map(({ minMaxQuery, breakpoint }) => ({
+import { useTheme as useTheme2 } from "@uspk-ui/system";
+
+// ../../utilities/shared-utils/src/index.ts
+function isObject(value) {
+  const type = typeof value;
+  return value != null && (type === "object" || type === "function") && !Array.isArray(value);
+}
+
+// src/use-breakpoint.ts
+function useBreakpoint(arg) {
+  var _a;
+  const opts = isObject(arg) ? arg : { fallback: arg ?? "base" };
+  const theme = useTheme2();
+  const breakpoints = theme.__breakpoints.details.map(
+    ({ minMaxQuery, breakpoint }) => ({
       breakpoint,
       query: minMaxQuery.replace("@media screen and ", "")
-    }))) ?? [],
-    [__breakpoints]
+    })
   );
-  const [currentBreakpoint, setCurrentBreakpoint] = React3.useState(() => {
-    if (defaultBreakpoint) {
-      const fallbackBreakpointDetail = queries.find(
-        ({ breakpoint }) => breakpoint === defaultBreakpoint
-      );
-      if (fallbackBreakpointDetail) {
-        return fallbackBreakpointDetail.breakpoint;
-      }
-    }
-    if (env.window.matchMedia) {
-      const matchingBreakpointDetail = queries.find(
-        ({ query }) => env.window.matchMedia(query).matches
-      );
-      if (matchingBreakpointDetail) {
-        return matchingBreakpointDetail.breakpoint;
-      }
-    }
-    return void 0;
-  });
-  React3.useEffect(() => {
-    const allUnregisterFns = queries.map(({ breakpoint, query }) => {
-      const mediaQueryList = env.window.matchMedia(query);
-      if (mediaQueryList.matches) {
-        setCurrentBreakpoint(breakpoint);
-      }
-      const handleChange = (ev) => {
-        if (ev.matches) {
-          setCurrentBreakpoint(breakpoint);
-        }
-      };
-      if (typeof mediaQueryList.addEventListener === "function") {
-        mediaQueryList.addEventListener("change", handleChange);
-      } else {
-        mediaQueryList.addListener(handleChange);
-      }
-      return () => {
-        if (typeof mediaQueryList.removeEventListener === "function") {
-          mediaQueryList.removeEventListener("change", handleChange);
-        } else {
-          mediaQueryList.removeListener(handleChange);
-        }
-      };
-    });
-    return () => {
-      allUnregisterFns.forEach((unregister) => unregister());
-    };
-  }, [queries, __breakpoints, env.window]);
-  return currentBreakpoint;
+  const fallback = breakpoints.map((bp) => bp.breakpoint === opts.fallback);
+  const values = useMediaQuery(
+    breakpoints.map((bp) => bp.query),
+    { fallback, ssr: opts.ssr }
+  );
+  const index = values.findIndex((value) => value == true);
+  return ((_a = breakpoints[index]) == null ? void 0 : _a.breakpoint) ?? opts.fallback;
 }
 
 // src/use-breakpoint-value.ts
-import {
-  arrayToObjectNotation,
-  fromEntries,
-  isArray,
-  useTheme as useTheme3
-} from "@uspk-ui/react-utils";
+import { useTheme as useTheme3 } from "@uspk-ui/system";
+import { arrayToObjectNotation } from "@uspk-ui/breakpoint-utils";
 
 // src/media-query.utils.ts
-import { breakpoints as defaultBreakPoints } from "@uspk-ui/react-utils";
+import { breakpoints as defaultBreakPoints } from "@uspk-ui/breakpoint-utils";
 function getClosestValue(values, breakpoint, breakpoints = defaultBreakPoints) {
@@ -205,3 +141,3 @@ let index = Object.keys(values).indexOf(breakpoint);
     const key = breakpoints[stopIndex];
-    if (values[key] != null) {
+    if (values.hasOwnProperty(key)) {
       index = stopIndex;
@@ -220,10 +156,11 @@ break;
 // src/use-breakpoint-value.ts
-function useBreakpointValue(values, defaultBreakpoint) {
+function useBreakpointValue(values, arg) {
   var _a;
-  const breakpoint = useBreakpoint(defaultBreakpoint);
+  const opts = isObject(arg) ? arg : { fallback: arg ?? "base" };
+  const breakpoint = useBreakpoint(opts);
   const theme = useTheme3();
   if (!breakpoint)
-    return void 0;
+    return;
   const breakpoints = Array.from(((_a = theme.__breakpoints) == null ? void 0 : _a.keys) || []);
-  const obj = isArray(values) ? fromEntries(
+  const obj = Array.isArray(values) ? Object.fromEntries(
     Object.entries(arrayToObjectNotation(values, breakpoints)).map(
@@ -235,2 +172,38 @@ ([key, value]) => [key, value]
 }
+
+// src/visibility.tsx
+function Visibility(props) {
+  const { breakpoint, hide, children, ssr } = props;
+  const [show] = useMediaQuery(breakpoint, { ssr });
+  const isVisible = hide ? !show : show;
+  const rendered = isVisible ? children : null;
+  return rendered;
+}
+
+// src/show.tsx
+import { jsx } from "react/jsx-runtime";
+function Show(props) {
+  const { children, ssr } = props;
+  const query = useQuery(props);
+  return /* @__PURE__ */ jsx(Visibility, {
+    breakpoint: query,
+    ssr,
+    children
+  });
+}
+Show.displayName = "Show";
+
+// src/hide.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Hide(props) {
+  const { children, ssr } = props;
+  const query = useQuery(props);
+  return /* @__PURE__ */ jsx2(Visibility, {
+    breakpoint: query,
+    hide: true,
+    ssr,
+    children
+  });
+}
+Hide.displayName = "Hide";
 export {
@@ -237,0 +210,0 @@ Hide,

package.json

 {
   "name": "@uspk-ui/media-query",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "React hook to change visibility of a component based on css media query",
@@ -11,11 +11,7 @@ "keywords": [
   "license": "MIT",
+  "sideEffects": false,
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
-  "sideEffects": false,
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
-  "preconstruct": {},
   "publishConfig": {
@@ -33,7 +29,9 @@ "access": "public"
   "dependencies": {
-    "@uspk-ui/react-env": "2.0.0",
-    "@uspk-ui/react-utils": "2.0.0"
+    "@uspk-ui/react-env": "2.1.0",
+    "@uspk-ui/breakpoint-utils": "1.0.0"
   },
   "devDependencies": {
-    "@uspk-ui/theme": "*",
+    "@uspk-ui/shared-utils": "1.0.0",
+    "@uspk-ui/system": "1.0.0",
+    "@uspk-ui/theme": "2.1.0",
     "@types/react-frame-component": "^4.1.1",
@@ -44,11 +42,10 @@ "jest-matchmedia-mock": "^1.1.0",
     "react": "^18.0.0",
-    "jest": "13.0.0",
-    "prop-types": "^15.5.9",
-    "react-dom": "^18.0.0",
     "clean-package": "2.1.1"
   },
   "peerDependencies": {
-    "@uspk-ui/theme": ">=1.0.0",
+    "@uspk-ui/system": ">=1.0.0",
     "react": ">=18"
   },
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
   "exports": {
@@ -55,0 +52,0 @@ ".": {

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

9

decreased by-10%

Worsened metrics

Total package byte prevSize

19170

decreased by-40.31%

Number of package files

5

decreased by-58.33%

Lines of code

527

decreased by-40.52%

Dependency changes

• + Added@uspk-ui/breakpoint-utils@1.0.0

• + Added@babel/code-frame@7.26.2(transitive)

• + Added@babel/generator@7.26.2(transitive)

• + Added@babel/helper-module-imports@7.25.9(transitive)

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/parser@7.26.2(transitive)

• + Added@babel/runtime@7.26.0(transitive)

• + Added@babel/template@7.25.9(transitive)

• + Added@babel/traverse@7.25.9(transitive)

• + Added@babel/types@7.26.0(transitive)

• + Added@ctrl/tinycolor@3.6.1(transitive)

• + Added@emotion/babel-plugin@11.13.5(transitive)

• + Added@emotion/cache@11.13.5(transitive)

• + Added@emotion/hash@0.9.2(transitive)

• + Added@emotion/is-prop-valid@1.3.1(transitive)

• + Added@emotion/memoize@0.9.0(transitive)

• + Added@emotion/react@11.13.5(transitive)

• + Added@emotion/serialize@1.3.3(transitive)

• + Added@emotion/sheet@1.4.0(transitive)

• + Added@emotion/styled@11.13.5(transitive)

• + Added@emotion/unitless@0.10.0(transitive)

• + Added@emotion/use-insertion-effect-with-fallbacks@1.1.0(transitive)

• + Added@emotion/utils@1.4.2(transitive)

• + Added@emotion/weak-memoize@0.4.0(transitive)

• + Added@jridgewell/gen-mapping@0.3.5(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@types/lodash@4.17.13(transitive)

• + Added@types/lodash.mergewith@4.6.6(transitive)

• + Added@types/parse-json@4.0.2(transitive)

• + Added@uspk-ui/anatomy@2.2.1(transitive)

• + Added@uspk-ui/breakpoint-utils@1.0.0(transitive)

• + Added@uspk-ui/color-mode@2.1.4(transitive)

• + Added@uspk-ui/react-env@2.1.0(transitive)

• + Added@uspk-ui/react-use-safe-layout-effect@1.1.2(transitive)

• + Added@uspk-ui/react-utils@2.1.3(transitive)

• + Added@uspk-ui/system@1.0.4(transitive)

• + Added@uspk-ui/theme@2.2.1(transitive)

• + Added@uspk-ui/theme-tools@2.0.4(transitive)

• + Added@uspk-ui/theme-utils@1.1.0(transitive)

• + Added@uspk-ui/utils@1.0.3(transitive)

• + Addedbabel-plugin-macros@3.1.0(transitive)

• + Addedcallsites@3.1.0(transitive)

• + Addedconvert-source-map@1.9.0(transitive)

• + Addedcosmiconfig@7.1.0(transitive)

• + Addeddebug@4.3.7(transitive)

• + Addederror-ex@1.3.2(transitive)

• + Addedescape-string-regexp@4.0.0(transitive)

• + Addedfind-root@1.1.0(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedhoist-non-react-statics@3.3.2(transitive)

• + Addedimport-fresh@3.3.0(transitive)

• + Addedis-arrayish@0.2.1(transitive)

• + Addedis-core-module@2.15.1(transitive)

• + Addedjsesc@3.0.2(transitive)

• + Addedjson-parse-even-better-errors@2.3.1(transitive)

• + Addedlines-and-columns@1.2.4(transitive)

• + Addedms@2.1.3(transitive)

• + Addedparent-module@1.0.1(transitive)

• + Addedparse-json@5.2.0(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpath-type@4.0.0(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedresolve@1.22.8(transitive)

• + Addedresolve-from@4.0.0(transitive)

• + Addedsource-map@0.5.7(transitive)

• + Addedstylis@4.2.0(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedyaml@1.10.2(transitive)

• - Removed@uspk-ui/react-utils@2.0.0

• - Removed@styled-system/background@5.1.2(transitive)

• - Removed@styled-system/border@5.1.5(transitive)

• - Removed@styled-system/color@5.1.2(transitive)

• - Removed@styled-system/core@5.1.2(transitive)

• - Removed@styled-system/css@5.1.5(transitive)

• - Removed@styled-system/flexbox@5.1.2(transitive)

• - Removed@styled-system/grid@5.1.2(transitive)

• - Removed@styled-system/layout@5.1.2(transitive)

• - Removed@styled-system/position@5.1.2(transitive)

• - Removed@styled-system/shadow@5.1.2(transitive)

• - Removed@styled-system/space@5.1.2(transitive)

• - Removed@styled-system/typography@5.1.2(transitive)

• - Removed@styled-system/variant@5.1.5(transitive)

• - Removed@uspk-ui/anatomy@2.2.2(transitive)

• - Removed@uspk-ui/color-mode@2.0.0(transitive)

• - Removed@uspk-ui/react-env@2.0.0(transitive)

• - Removed@uspk-ui/react-utils@2.0.0(transitive)

• - Removed@uspk-ui/theme@2.2.6(transitive)

• - Removed@uspk-ui/theme-tools@2.0.5(transitive)

• - Removedcolor2k@2.0.3(transitive)

• - Removedlodash@4.17.21(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedstyled-system@5.1.5(transitive)

• Updated@uspk-ui/react-env@2.1.0