@dt-dds/react-app-header 0.1.0-beta.2 → 0.1.0-beta.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @dt-dds/react-app-header
 
+## 0.1.0-beta.3
+
+### Minor Changes
+
+- feat(core): share responsive HOC from core package
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies [223664b]
+  - @dt-dds/react-core@1.0.0-beta.53
+  - @dt-dds/react-typography@1.0.0-beta.44
+  - @dt-dds/react-box@1.0.0-beta.60
+
 ## 0.1.0-beta.2
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,11 +1,7 @@
 import { Theme } from '@dt-dds/themes';
 import * as React from 'react';
 import React__default, { HTMLAttributes, ReactNode } from 'react';
-
-interface ResponsiveProps {
-    hide?: string;
-    show?: string;
-}
+import { ResponsiveProps } from '@dt-dds/react-core';
 
 type NavPosition = 'center' | 'left' | 'right';
 interface NavigationProps extends ResponsiveProps, HTMLAttributes<HTMLElement> {

package/dist/index.d.ts

@@ -1,11 +1,7 @@
 import { Theme } from '@dt-dds/themes';
 import * as React from 'react';
 import React__default, { HTMLAttributes, ReactNode } from 'react';
-
-interface ResponsiveProps {
-    hide?: string;
-    show?: string;
-}
+import { ResponsiveProps } from '@dt-dds/react-core';
 
 type NavPosition = 'center' | 'left' | 'right';
 interface NavigationProps extends ResponsiveProps, HTMLAttributes<HTMLElement> {

package/dist/index.js

@@ -380,7 +380,7 @@ var AppHeader = (_a) => {
 
 // src/components/Actions/Actions.tsx
 var import_react6 = require("@emotion/react");
-var import_react_core3 = require("@dt-dds/react-core");
+var import_react_core2 = require("@dt-dds/react-core");
 
 // src/components/Actions/Actions.styled.tsx
 var import_styled2 = __toESM(require("@emotion/styled"));
@@ -428,24 +428,8 @@ var ActionsContainer = import_styled2.default.div`
 }}
 `;
 
-// src/utils/responsive.tsx
-var import_react_core2 = require("@dt-dds/react-core");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var withResponsive = (Component) => {
-  const ResponsiveComponent = (props) => {
-    const hideMatches = (0, import_react_core2.useMedia)(props.hide || "(max-width: 0px)");
-    const showMatches = (0, import_react_core2.useMedia)(props.show || "(max-width: 0px)");
-    if (props.hide && hideMatches) return null;
-    if (props.show && !showMatches) return null;
-    const _a = props, { hide, show } = _a, componentProps = __objRest(_a, ["hide", "show"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, __spreadValues({}, componentProps));
-  };
-  ResponsiveComponent.displayName = Component.displayName || Component.name || "Component";
-  return ResponsiveComponent;
-};
-
 // src/components/Actions/Actions.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var ActionsBase = (_a) => {
   var _b = _a, {
     children,
@@ -455,9 +439,9 @@ var ActionsBase = (_a) => {
     "position"
   ]);
   const theme2 = (0, import_react6.useTheme)();
-  const isMobile = (0, import_react_core3.useMedia)(`(max-width: ${theme2.breakpoints.mq3}px)`);
+  const isMobile = (0, import_react_core2.useMedia)(`(max-width: ${theme2.breakpoints.mq3}px)`);
   const { state } = useAppHeaderContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     ActionsContainer,
     __spreadProps(__spreadValues({
       isMobile,
@@ -469,9 +453,10 @@ var ActionsBase = (_a) => {
   );
 };
 ActionsBase.displayName = "AppHeader.Actions";
-var Actions = withResponsive(ActionsBase);
+var Actions = (0, import_react_core2.withResponsive)(ActionsBase);
 
 // src/components/AppName/AppName.tsx
+var import_react_core3 = require("@dt-dds/react-core");
 var import_react_typography = require("@dt-dds/react-typography");
 
 // src/components/AppName/AppName.styled.tsx
@@ -505,7 +490,7 @@ var AppNameContainer = import_styled3.default.div`
 `;
 
 // src/components/AppName/AppName.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var AppNameBase = (_a) => {
   var _b = _a, {
     name,
@@ -522,9 +507,9 @@ var AppNameBase = (_a) => {
     return null;
   }
   if (children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AppNameContainer, __spreadProps(__spreadValues({ isMobile, state }, rest), { children: content }));
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AppNameContainer, __spreadProps(__spreadValues({ isMobile, state }, rest), { children: content }));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AppNameContainer, __spreadProps(__spreadValues({ isMobile, state }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AppNameContainer, __spreadProps(__spreadValues({ isMobile, state }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_react_typography.Typography,
     {
       color: "primary.default",
@@ -535,7 +520,10 @@ var AppNameBase = (_a) => {
   ) }));
 };
 AppNameBase.displayName = "AppHeader.AppName";
-var AppName = withResponsive(AppNameBase);
+var AppName = (0, import_react_core3.withResponsive)(AppNameBase);
+
+// src/components/Logo/Logo.tsx
+var import_react_core4 = require("@dt-dds/react-core");
 
 // src/components/Logo/Logo.styled.tsx
 var import_styled4 = __toESM(require("@emotion/styled"));
@@ -573,7 +561,7 @@ var LogoContainer = import_styled4.default.div`
 `;
 
 // src/components/Logo/Logo.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var LogoBase = (_a) => {
   var _b = _a, {
     children
@@ -582,10 +570,13 @@ var LogoBase = (_a) => {
   ]);
   const { shouldCenterLogo: shouldCenterLogo2, isMobile } = useAppHeaderContext();
   const shouldCenter = shouldCenterLogo2 && !isMobile;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LogoContainer, __spreadProps(__spreadValues({ shouldCenterLogo: shouldCenter }, rest), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LogoContainer, __spreadProps(__spreadValues({ shouldCenterLogo: shouldCenter }, rest), { children }));
 };
 LogoBase.displayName = "AppHeader.Logo";
-var Logo = withResponsive(LogoBase);
+var Logo = (0, import_react_core4.withResponsive)(LogoBase);
+
+// src/components/Navigation/Navigation.tsx
+var import_react_core5 = require("@dt-dds/react-core");
 
 // src/components/Navigation/Navigation.styled.ts
 var import_styled5 = __toESM(require("@emotion/styled"));
@@ -671,7 +662,7 @@ var NavigationStyled = import_styled5.default.nav`
 `;
 
 // src/components/Navigation/Navigation.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var NavigationBase = (_a) => {
   var _b = _a, {
     children
@@ -679,10 +670,10 @@ var NavigationBase = (_a) => {
     "children"
   ]);
   const { state } = useAppHeaderContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NavigationStyled, __spreadProps(__spreadValues({ state }, rest), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NavigationStyled, __spreadProps(__spreadValues({ state }, rest), { children }));
 };
 NavigationBase.displayName = "AppHeader.Navigation";
-var Navigation = withResponsive(NavigationBase);
+var Navigation = (0, import_react_core5.withResponsive)(NavigationBase);
 
 // src/index.ts
 var AppHeader2 = Object.assign(

package/dist/index.mjs

@@ -343,7 +343,10 @@ var AppHeader = (_a) => {
 
 // src/components/Actions/Actions.tsx
 import { useTheme as useTheme2 } from "@emotion/react";
-import { useMedia as useMedia3 } from "@dt-dds/react-core";
+import {
+  useMedia as useMedia2,
+  withResponsive
+} from "@dt-dds/react-core";
 
 // src/components/Actions/Actions.styled.tsx
 import styled2 from "@emotion/styled";
@@ -391,24 +394,8 @@ var ActionsContainer = styled2.div`
 }}
 `;
 
-// src/utils/responsive.tsx
-import { useMedia as useMedia2 } from "@dt-dds/react-core";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var withResponsive = (Component) => {
-  const ResponsiveComponent = (props) => {
-    const hideMatches = useMedia2(props.hide || "(max-width: 0px)");
-    const showMatches = useMedia2(props.show || "(max-width: 0px)");
-    if (props.hide && hideMatches) return null;
-    if (props.show && !showMatches) return null;
-    const _a = props, { hide, show } = _a, componentProps = __objRest(_a, ["hide", "show"]);
-    return /* @__PURE__ */ jsx3(Component, __spreadValues({}, componentProps));
-  };
-  ResponsiveComponent.displayName = Component.displayName || Component.name || "Component";
-  return ResponsiveComponent;
-};
-
 // src/components/Actions/Actions.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var ActionsBase = (_a) => {
   var _b = _a, {
     children,
@@ -418,9 +405,9 @@ var ActionsBase = (_a) => {
     "position"
   ]);
   const theme2 = useTheme2();
-  const isMobile = useMedia3(`(max-width: ${theme2.breakpoints.mq3}px)`);
+  const isMobile = useMedia2(`(max-width: ${theme2.breakpoints.mq3}px)`);
   const { state } = useAppHeaderContext();
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     ActionsContainer,
     __spreadProps(__spreadValues({
       isMobile,
@@ -435,6 +422,7 @@ ActionsBase.displayName = "AppHeader.Actions";
 var Actions = withResponsive(ActionsBase);
 
 // src/components/AppName/AppName.tsx
+import { withResponsive as withResponsive2 } from "@dt-dds/react-core";
 import { Typography } from "@dt-dds/react-typography";
 
 // src/components/AppName/AppName.styled.tsx
@@ -468,7 +456,7 @@ var AppNameContainer = styled3.div`
 `;
 
 // src/components/AppName/AppName.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var AppNameBase = (_a) => {
   var _b = _a, {
     name,
@@ -485,9 +473,9 @@ var AppNameBase = (_a) => {
     return null;
   }
   if (children) {
-    return /* @__PURE__ */ jsx5(AppNameContainer, __spreadProps(__spreadValues({ isMobile, state }, rest), { children: content }));
+    return /* @__PURE__ */ jsx4(AppNameContainer, __spreadProps(__spreadValues({ isMobile, state }, rest), { children: content }));
   }
-  return /* @__PURE__ */ jsx5(AppNameContainer, __spreadProps(__spreadValues({ isMobile, state }, rest), { children: /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4(AppNameContainer, __spreadProps(__spreadValues({ isMobile, state }, rest), { children: /* @__PURE__ */ jsx4(
     Typography,
     {
       color: "primary.default",
@@ -498,7 +486,10 @@ var AppNameBase = (_a) => {
   ) }));
 };
 AppNameBase.displayName = "AppHeader.AppName";
-var AppName = withResponsive(AppNameBase);
+var AppName = withResponsive2(AppNameBase);
+
+// src/components/Logo/Logo.tsx
+import { withResponsive as withResponsive3 } from "@dt-dds/react-core";
 
 // src/components/Logo/Logo.styled.tsx
 import styled4 from "@emotion/styled";
@@ -536,7 +527,7 @@ var LogoContainer = styled4.div`
 `;
 
 // src/components/Logo/Logo.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var LogoBase = (_a) => {
   var _b = _a, {
     children
@@ -545,10 +536,13 @@ var LogoBase = (_a) => {
   ]);
   const { shouldCenterLogo: shouldCenterLogo2, isMobile } = useAppHeaderContext();
   const shouldCenter = shouldCenterLogo2 && !isMobile;
-  return /* @__PURE__ */ jsx6(LogoContainer, __spreadProps(__spreadValues({ shouldCenterLogo: shouldCenter }, rest), { children }));
+  return /* @__PURE__ */ jsx5(LogoContainer, __spreadProps(__spreadValues({ shouldCenterLogo: shouldCenter }, rest), { children }));
 };
 LogoBase.displayName = "AppHeader.Logo";
-var Logo = withResponsive(LogoBase);
+var Logo = withResponsive3(LogoBase);
+
+// src/components/Navigation/Navigation.tsx
+import { withResponsive as withResponsive4 } from "@dt-dds/react-core";
 
 // src/components/Navigation/Navigation.styled.ts
 import styled5 from "@emotion/styled";
@@ -634,7 +628,7 @@ var NavigationStyled = styled5.nav`
 `;
 
 // src/components/Navigation/Navigation.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var NavigationBase = (_a) => {
   var _b = _a, {
     children
@@ -642,10 +636,10 @@ var NavigationBase = (_a) => {
     "children"
   ]);
   const { state } = useAppHeaderContext();
-  return /* @__PURE__ */ jsx7(NavigationStyled, __spreadProps(__spreadValues({ state }, rest), { children }));
+  return /* @__PURE__ */ jsx6(NavigationStyled, __spreadProps(__spreadValues({ state }, rest), { children }));
 };
 NavigationBase.displayName = "AppHeader.Navigation";
-var Navigation = withResponsive(NavigationBase);
+var Navigation = withResponsive4(NavigationBase);
 
 // src/index.ts
 var AppHeader2 = Object.assign(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dt-dds/react-app-header",
-  "version": "0.1.0-beta.2",
+  "version": "0.1.0-beta.3",
   "license": "MIT",
   "exports": {
     ".": "./dist/index.js"
@@ -20,9 +20,9 @@
     "test:update:snapshot": "jest -u"
   },
   "dependencies": {
-    "@dt-dds/react-core": "1.0.0-beta.52",
-    "@dt-dds/react-box": "1.0.0-beta.59",
-    "@dt-dds/react-typography": "1.0.0-beta.43",
+    "@dt-dds/react-core": "1.0.0-beta.53",
+    "@dt-dds/react-box": "1.0.0-beta.60",
+    "@dt-dds/react-typography": "1.0.0-beta.44",
     "@dt-dds/themes": "1.0.0-beta.10"
   },
   "devDependencies": {
@@ -30,9 +30,9 @@
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.23.3",
-    "@dt-dds/react-avatar": "1.0.0-beta.64",
-    "@dt-dds/react-icon": "1.0.0-beta.55",
-    "@dt-dds/react-icon-button": "1.0.0-beta.21",
+    "@dt-dds/react-avatar": "1.0.0-beta.65",
+    "@dt-dds/react-icon": "1.0.0-beta.56",
+    "@dt-dds/react-icon-button": "1.0.0-beta.22",
     "@emotion/babel-plugin": "^11.11.0",
     "@emotion/css": "^11.7.1",
     "@emotion/jest": "^11.10.0",