@dt-dds/react-app-header 0.1.0-beta.1

package/dist/index.mjs

@@ -0,0 +1,666 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/AppHeader.tsx
+import { useMemo } from "react";
+import { useTheme } from "@emotion/react";
+import { useMedia } from "@dt-dds/react-core";
+
+// src/AppHeader.styled.ts
+import styled from "@emotion/styled";
+
+// src/constants/index.ts
+var HEADER_HEIGHT = 64;
+var HEADER_HEIGHT_MOBILE = 72;
+var NAVIGATION_HEIGHT = 52;
+var APP_HEADER_Z_INDEX = 1;
+var THIRD_WIDTH = "calc(100% / 3)";
+var LOGO_MAX_HEIGHT = 54;
+var APP_NAME_MAX_WIDTH = 170;
+var APP_NAME_MAX_WIDTH_DESKTOP = 250;
+var APP_NAME_MAX_HEIGHT = 50;
+var COMPOUND_COMPONENT_NAMES = {
+  NAVIGATION: "AppHeader.Navigation",
+  APP_NAME: "AppHeader.AppName",
+  LOGO: "AppHeader.Logo",
+  ACTIONS: "AppHeader.Actions"
+};
+
+// src/AppHeader.styled.ts
+var AppHeaderStyled = styled.header`
+  ${({ theme: theme2, isMobile }) => {
+  const paddingHorizontal = theme2.spacing.spacing_60;
+  const gap = theme2.spacing.spacing_50;
+  return `
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: ${gap};
+      width: 100%;
+      height: ${isMobile ? `${HEADER_HEIGHT_MOBILE}px` : `${HEADER_HEIGHT}px`};
+      overflow: hidden;
+      padding: 0 ${paddingHorizontal};
+      position: fixed;
+      top: 0;
+      z-index: ${APP_HEADER_Z_INDEX};
+      background: ${theme2.palette.surface.contrast};
+    `;
+}}
+`;
+
+// src/context/AppHeaderContext.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var AppHeaderContext = createContext(
+  null
+);
+var AppHeaderContextProvider = ({
+  value,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(AppHeaderContext.Provider, { value, children });
+};
+var useAppHeaderContext = () => {
+  const context = useContext(AppHeaderContext);
+  if (!context) {
+    throw new Error(
+      "AppHeader compound components must be used within AppHeader"
+    );
+  }
+  return context;
+};
+
+// src/utils/headerState.ts
+var computeHeaderState = (type, navPosition, appName, hasActionsPositionRight) => ({
+  isStandard: type === "standard",
+  isCompact: type === "compact",
+  isNavCenter: navPosition === "center",
+  isNavLeft: navPosition === "left",
+  isNavRight: navPosition === "right",
+  isNavCompact: type === "compact" || !appName,
+  hasAppName: !!appName,
+  isActionsPositionRight: hasActionsPositionRight
+});
+var shouldCenterLogo = (type, appName) => {
+  return type === "standard" && !!appName;
+};
+
+// src/utils/children.ts
+import React, { Children } from "react";
+var getDisplayName = (element) => {
+  var _a;
+  return (_a = element.type) == null ? void 0 : _a.displayName;
+};
+var findChildRecursive = (children, matcher) => {
+  const childrenArray = Children.toArray(children);
+  for (const child of childrenArray) {
+    if (React.isValidElement(child)) {
+      if (matcher(child)) {
+        return child;
+      }
+      const childProps = child.props;
+      if (childProps == null ? void 0 : childProps.children) {
+        const found = findChildRecursive(childProps.children, matcher);
+        if (found) {
+          return found;
+        }
+      }
+    }
+  }
+  return null;
+};
+var findChildByType = (children, type) => {
+  return findChildRecursive(
+    children,
+    (child) => getDisplayName(child) === type
+  );
+};
+var findChildByTypeAndProp = (children, type, propName, propValue) => {
+  return findChildRecursive(children, (child) => {
+    if (getDisplayName(child) !== type) return false;
+    const props = child.props;
+    return propName in props && props[propName] === propValue;
+  });
+};
+var findChildIndexByTypeAndProp = (children, type, propName, propValue) => {
+  const childrenArray = Children.toArray(children);
+  return childrenArray.findIndex((child) => {
+    if (!React.isValidElement(child)) return false;
+    const displayName = getDisplayName(child);
+    if (displayName !== type) return false;
+    const props = child.props;
+    return propName in props && props[propName] === propValue;
+  });
+};
+var extractProp = (element, propName, defaultValue) => {
+  if (!React.isValidElement(element)) {
+    return defaultValue;
+  }
+  const props = element.props;
+  return propName in props && props[propName] !== void 0 ? props[propName] : defaultValue;
+};
+var findChildIndices = (children, targetNames) => {
+  const indices = {};
+  const childrenArray = Children.toArray(children);
+  childrenArray.forEach((child, index) => {
+    if (React.isValidElement(child)) {
+      const displayName = getDisplayName(child);
+      if (displayName && targetNames.includes(displayName)) {
+        indices[displayName] = index;
+      }
+    }
+  });
+  return indices;
+};
+
+// src/utils/composition.tsx
+import React2 from "react";
+import { Box } from "@dt-dds/react-box";
+import { theme } from "@dt-dds/themes";
+import { jsxs } from "react/jsx-runtime";
+var areSiblings = (index1, index2) => {
+  return Math.abs(index1 - index2) === 1;
+};
+var groupSiblingComponents = (children, componentNames, isMobile, additionalStyles) => {
+  const childrenArray = React2.Children.toArray(children);
+  const result = [];
+  let i = 0;
+  while (i < childrenArray.length) {
+    const child = childrenArray[i];
+    const nextChild = i + 1 < childrenArray.length ? childrenArray[i + 1] : null;
+    if (React2.isValidElement(child) && React2.isValidElement(nextChild)) {
+      const currentName = getDisplayName(child);
+      const nextName = getDisplayName(nextChild);
+      const shouldGroup = currentName && nextName && componentNames.includes(currentName) && componentNames.includes(nextName) && areSiblings(i, i + 1);
+      if (shouldGroup) {
+        result.push(
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              style: __spreadValues({
+                display: "flex",
+                flexWrap: "nowrap",
+                flexDirection: isMobile ? "column" : "row",
+                alignItems: isMobile ? "flex-start" : "center",
+                justifyContent: isMobile ? "center" : "flex-start",
+                height: isMobile ? "48px" : "auto",
+                gap: isMobile ? theme.spacing.spacing_0 : theme.spacing.spacing_30
+              }, additionalStyles),
+              children: [
+                child,
+                nextChild
+              ]
+            },
+            `group-${i}`
+          )
+        );
+        i += 2;
+        continue;
+      }
+    }
+    result.push(child);
+    i++;
+  }
+  return result;
+};
+var shouldGroupNavigationAndActions = (state) => {
+  if (!state.isNavRight || !state.isActionsPositionRight) {
+    return false;
+  }
+  return state.isCompact || state.isStandard && !state.hasAppName;
+};
+var groupNavigationAndActionsIfSiblings = (children, isMobile, themeInstance) => {
+  var _a;
+  const normalizedChildren = children;
+  const indices = findChildIndices(normalizedChildren, [
+    COMPOUND_COMPONENT_NAMES.NAVIGATION,
+    COMPOUND_COMPONENT_NAMES.ACTIONS
+  ]);
+  const navIndex = (_a = indices[COMPOUND_COMPONENT_NAMES.NAVIGATION]) != null ? _a : -1;
+  const actionsRightIndex = findChildIndexByTypeAndProp(
+    normalizedChildren,
+    COMPOUND_COMPONENT_NAMES.ACTIONS,
+    "position",
+    "right"
+  );
+  const areSiblingsAfterGrouping = navIndex !== -1 && actionsRightIndex !== -1 && areSiblings(navIndex, actionsRightIndex);
+  if (!areSiblingsAfterGrouping) {
+    return Array.isArray(children) ? children : React2.Children.toArray(children);
+  }
+  return groupSiblingComponents(
+    normalizedChildren,
+    [COMPOUND_COMPONENT_NAMES.NAVIGATION, COMPOUND_COMPONENT_NAMES.ACTIONS],
+    isMobile,
+    {
+      position: "fixed",
+      right: themeInstance.spacing.spacing_60
+    }
+  );
+};
+
+// src/AppHeader.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var AppHeader = (_a) => {
+  var _b = _a, {
+    type = "standard",
+    style,
+    children
+  } = _b, rest = __objRest(_b, [
+    "type",
+    "style",
+    "children"
+  ]);
+  var _a2, _b2;
+  const theme2 = useTheme();
+  const isMobile = useMedia(`(max-width: ${theme2.breakpoints.mq3}px)`);
+  const navPosition = extractProp(
+    findChildByType(children, COMPOUND_COMPONENT_NAMES.NAVIGATION),
+    "position",
+    "center"
+  );
+  const appName = extractProp(
+    findChildByType(children, COMPOUND_COMPONENT_NAMES.APP_NAME),
+    "name",
+    void 0
+  );
+  const childIndices = findChildIndices(children, [
+    COMPOUND_COMPONENT_NAMES.APP_NAME,
+    COMPOUND_COMPONENT_NAMES.LOGO,
+    COMPOUND_COMPONENT_NAMES.NAVIGATION,
+    COMPOUND_COMPONENT_NAMES.ACTIONS
+  ]);
+  const appNameIndex = (_a2 = childIndices[COMPOUND_COMPONENT_NAMES.APP_NAME]) != null ? _a2 : -1;
+  const logoIndex = (_b2 = childIndices[COMPOUND_COMPONENT_NAMES.LOGO]) != null ? _b2 : -1;
+  const shouldCenterLogoValue = shouldCenterLogo(type, appName);
+  const hasAppNameAsSibling = appNameIndex !== -1 && logoIndex !== -1 && areSiblings(appNameIndex, logoIndex);
+  const hasActionsPositionRight = findChildByTypeAndProp(
+    children,
+    COMPOUND_COMPONENT_NAMES.ACTIONS,
+    "position",
+    "right"
+  ) !== null;
+  const state = computeHeaderState(
+    type,
+    navPosition,
+    appName,
+    hasActionsPositionRight
+  );
+  const contextValue = useMemo(
+    () => ({
+      state,
+      shouldCenterLogo: shouldCenterLogoValue,
+      hasAppNameAsSibling,
+      isMobile
+    }),
+    [state, shouldCenterLogoValue, hasAppNameAsSibling, isMobile]
+  );
+  const processedChildren = useMemo(() => {
+    let result = groupSiblingComponents(
+      children,
+      [COMPOUND_COMPONENT_NAMES.APP_NAME, COMPOUND_COMPONENT_NAMES.LOGO],
+      isMobile
+    );
+    if (shouldGroupNavigationAndActions(state)) {
+      result = groupNavigationAndActionsIfSiblings(
+        result,
+        isMobile,
+        theme2
+      );
+    }
+    return result;
+  }, [children, state, isMobile, theme2]);
+  return /* @__PURE__ */ jsx2(AppHeaderContextProvider, { value: contextValue, children: /* @__PURE__ */ jsx2(AppHeaderStyled, __spreadProps(__spreadValues({ isMobile, style }, rest), { children: processedChildren })) });
+};
+
+// src/components/Actions/Actions.tsx
+import { useTheme as useTheme2 } from "@emotion/react";
+import { useMedia as useMedia3 } from "@dt-dds/react-core";
+
+// src/components/Actions/Actions.styled.tsx
+import styled2 from "@emotion/styled";
+var getActionsPosition = (position, state) => {
+  if (position === "left") {
+    return "relative";
+  }
+  if (state.isNavRight) {
+    return state.isStandard && state.hasAppName ? "fixed" : "relative";
+  }
+  return "fixed";
+};
+var getActionsRight = (theme2, position, state) => {
+  if (position === "left") {
+    return "auto";
+  }
+  const defaultRight = theme2.spacing.spacing_60;
+  if (state.isNavRight) {
+    return state.isStandard && state.hasAppName ? defaultRight : 0;
+  }
+  return defaultRight;
+};
+var getActionsMinWidth = (state, position) => {
+  if (position === "left") {
+    return "auto";
+  }
+  const { isNavLeft, isStandard, hasAppName } = state;
+  return isNavLeft && isStandard && !hasAppName ? "auto" : THIRD_WIDTH;
+};
+var ActionsContainer = styled2.div`
+  ${({ theme: theme2, state, position = "right" }) => {
+  const cssPosition = getActionsPosition(position, state);
+  const right = getActionsRight(theme2, position, state);
+  const minWidth = getActionsMinWidth(state, position);
+  return `
+      display: flex;
+      align-items: center;
+      position: ${cssPosition};
+      right: ${right};
+      min-width: ${minWidth};
+      flex-direction: row;
+      justify-content: ${position === "left" ? "flex-start" : "flex-end"};
+      gap: ${theme2.spacing.spacing_50};
+    `;
+}}
+`;
+
+// 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";
+var ActionsBase = (_a) => {
+  var _b = _a, {
+    children,
+    position = "right"
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "position"
+  ]);
+  const theme2 = useTheme2();
+  const isMobile = useMedia3(`(max-width: ${theme2.breakpoints.mq3}px)`);
+  const { state } = useAppHeaderContext();
+  return /* @__PURE__ */ jsx4(
+    ActionsContainer,
+    __spreadProps(__spreadValues({
+      isMobile,
+      position,
+      state
+    }, rest), {
+      children
+    })
+  );
+};
+ActionsBase.displayName = "AppHeader.Actions";
+var Actions = withResponsive(ActionsBase);
+
+// src/components/AppName/AppName.tsx
+import { Typography } from "@dt-dds/react-typography";
+
+// src/components/AppName/AppName.styled.tsx
+import styled3 from "@emotion/styled";
+var AppNameContainer = styled3.div`
+  ${({ theme: theme2, state, isMobile }) => {
+  const shouldAlignLeft = isMobile && state.isStandard;
+  return `
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      min-width: auto;
+      width: auto;
+      max-width: ${APP_NAME_MAX_WIDTH}px;
+      max-height: ${APP_NAME_MAX_HEIGHT}px;
+      
+      ${shouldAlignLeft ? "justify-content: flex-start;" : ""}
+
+      @media screen and (min-width: ${theme2.breakpoints.mq3}px) {
+        max-width: ${APP_NAME_MAX_WIDTH_DESKTOP}px;
+      }
+      
+      > * {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+     
+    `;
+}}
+`;
+
+// src/components/AppName/AppName.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var AppNameBase = (_a) => {
+  var _b = _a, {
+    name,
+    children
+  } = _b, rest = __objRest(_b, [
+    "name",
+    "children"
+  ]);
+  const { state, isMobile } = useAppHeaderContext();
+  const isStandardFontStyles = state.isStandard ? "h5" : "h5Bold";
+  const fontStyles = !isMobile ? isStandardFontStyles : "h6Bold";
+  const content = children != null ? children : name;
+  if (!content) {
+    return null;
+  }
+  if (children) {
+    return /* @__PURE__ */ jsx5(AppNameContainer, __spreadProps(__spreadValues({ isMobile, state }, rest), { children: content }));
+  }
+  return /* @__PURE__ */ jsx5(AppNameContainer, __spreadProps(__spreadValues({ isMobile, state }, rest), { children: /* @__PURE__ */ jsx5(
+    Typography,
+    {
+      color: "primary.default",
+      element: "span",
+      fontStyles,
+      children: content
+    }
+  ) }));
+};
+AppNameBase.displayName = "AppHeader.AppName";
+var AppName = withResponsive(AppNameBase);
+
+// src/components/Logo/Logo.styled.tsx
+import styled4 from "@emotion/styled";
+var LogoContainer = styled4.div`
+  ${({ shouldCenterLogo: shouldCenterLogo2 }) => {
+  const centerLogoStyles = `
+      width: auto;
+      min-width: auto;
+      margin: 0 auto;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+    `;
+  return `
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      min-width: auto;
+      height: auto;
+      
+      img,
+      [data-nextjs-image],
+      svg,
+      > * {
+        display: flex;
+        max-height: ${LOGO_MAX_HEIGHT}px;
+        width: auto;
+        height: auto;
+        object-fit: contain;
+      }
+
+      ${shouldCenterLogo2 ? centerLogoStyles : ""}
+    `;
+}}
+`;
+
+// src/components/Logo/Logo.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var LogoBase = (_a) => {
+  var _b = _a, {
+    children
+  } = _b, rest = __objRest(_b, [
+    "children"
+  ]);
+  const { shouldCenterLogo: shouldCenterLogo2, isMobile } = useAppHeaderContext();
+  const shouldCenter = shouldCenterLogo2 && !isMobile;
+  return /* @__PURE__ */ jsx6(LogoContainer, __spreadProps(__spreadValues({ shouldCenterLogo: shouldCenter }, rest), { children }));
+};
+LogoBase.displayName = "AppHeader.Logo";
+var Logo = withResponsive(LogoBase);
+
+// src/components/Navigation/Navigation.styled.ts
+import styled5 from "@emotion/styled";
+var CENTERING_STYLES = {
+  absoluteCenter: `
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: auto;
+    max-width: calc(100% - 400px); // hardcoded value to avoid layout shift
+    min-width: 0;
+    overflow: hidden;
+  `,
+  autoMargins: `
+    margin-left: auto;
+    margin-right: auto;
+  `
+};
+var shouldUseAbsoluteCenter = (state) => {
+  if (!state.isNavCenter) {
+    return false;
+  }
+  return state.isNavCompact || !state.hasAppName;
+};
+var getNavigationCenteringStyles = (state) => {
+  if (!shouldUseAbsoluteCenter(state)) {
+    return state.isNavCenter ? CENTERING_STYLES.autoMargins : "";
+  }
+  return CENTERING_STYLES.absoluteCenter;
+};
+var getJustifyContent = (isAbsoluteCenter, isNavLeft, isNavRight) => {
+  if (isAbsoluteCenter) {
+    return "center";
+  }
+  if (isNavLeft) {
+    return "flex-start";
+  }
+  if (isNavRight) {
+    return "flex-end";
+  }
+  return "center";
+};
+var NavigationStyled = styled5.nav`
+  ${({ theme: theme2, state }) => {
+  const { isStandard, hasAppName, isNavCompact, isNavLeft, isNavRight } = state;
+  const isStandardAndHasAppName = isStandard && hasAppName;
+  const isAbsoluteCenter = shouldUseAbsoluteCenter(state);
+  const basePosition = isStandardAndHasAppName ? "fixed" : "relative";
+  const baseTop = isNavCompact ? 0 : `${HEADER_HEIGHT}px`;
+  const baseWidth = isNavCompact ? "auto" : "100%";
+  const minHeight = isNavCompact ? "auto" : `${NAVIGATION_HEIGHT}px`;
+  const position = isAbsoluteCenter ? "absolute" : basePosition;
+  const top = isAbsoluteCenter ? "50%" : baseTop;
+  const left = isAbsoluteCenter ? "50%" : "0";
+  const right = isAbsoluteCenter ? "auto" : "0";
+  const width = isAbsoluteCenter ? "auto" : baseWidth;
+  const justifyContent = getJustifyContent(
+    isAbsoluteCenter,
+    isNavLeft,
+    isNavRight
+  );
+  const centeringStyles = getNavigationCenteringStyles(state);
+  return `
+      position: ${position};
+      top: ${top};
+      left: ${left};
+      right: ${right};
+      z-index: ${APP_HEADER_Z_INDEX};
+      width: ${width};
+      min-height: ${minHeight};
+      height: auto;
+      background-color: ${theme2.palette.surface.contrast};
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: ${justifyContent};
+      padding: 0 ${theme2.spacing.spacing_60};
+
+      ${centeringStyles}
+    `;
+}}
+`;
+
+// src/components/Navigation/Navigation.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var NavigationBase = (_a) => {
+  var _b = _a, {
+    children
+  } = _b, rest = __objRest(_b, [
+    "children"
+  ]);
+  const { state } = useAppHeaderContext();
+  return /* @__PURE__ */ jsx7(NavigationStyled, __spreadProps(__spreadValues({ state }, rest), { children }));
+};
+NavigationBase.displayName = "AppHeader.Navigation";
+var Navigation = withResponsive(NavigationBase);
+
+// src/index.ts
+var AppHeader2 = Object.assign(
+  AppHeader,
+  {
+    Logo,
+    AppName,
+    Navigation,
+    Actions
+  }
+);
+export {
+  Actions,
+  AppHeader2 as AppHeader,
+  AppName,
+  Logo,
+  Navigation
+};