@vodafone_de/publish-test 0.0.1 → 53.0.0

package/dist/components/ToggleButtonProvider/validate.test.d.ts

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

package/dist/components/Tray/componentName.d.ts

@@ -0,0 +1 @@
+export declare const trayComponentName: "Tray";

package/dist/components/Tray/index.d.ts

@@ -0,0 +1,4 @@
+import { TrayProps } from './props';
+declare const Tray: ({ heading, contentElements, uid: uidProp, focusElementOnOpen, focusElementOnClose, children, buttons, zIndex, ...props }: TrayProps) => import("react/jsx-runtime").JSX.Element;
+export default Tray;
+export * from './props';

package/dist/components/Tray/index.js

@@ -0,0 +1,222 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import ButtonGroup from "../ButtonGroup/index.js";
+import { k as flexOrientationVertical } from "../../props-BhXFN7yR.js";
+import Heading from "../Heading/index.js";
+import { s as spacingMd, b as spacingNone } from "../../Spacing-Dj-qX3Z5.js";
+import styled from "styled-components";
+import Card from "../Card/index.js";
+import Flex from "../Flex/index.js";
+import IconButton from "../IconButton/index.js";
+import { v as viewport } from "../../index-CG4uiVbZ.js";
+import { s as shadow28 } from "../../shadow-u158mzuN.js";
+import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { g as getSpacing } from "../../index-l-i-mIeP.js";
+import { f as colorBackgroundOverlayStatic } from "../../BackgroundColor-Ba4D10TC.js";
+import { b as borderWidthFocus } from "../../BorderWidth-CwrNKc0Q.js";
+import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
+const TrayOverlayStyled = styled("div").withConfig({
+  displayName: "TrayOverlayStyled",
+  componentId: "sc-3179l8-0"
+})({
+  position: "fixed",
+  top: 0,
+  left: 0,
+  flexDirection: "column",
+  justifyContent: "center",
+  height: "100%",
+  width: "100%",
+  transition: "background-color 0.5s",
+  alignItems: "flex-end",
+  overflowX: "hidden",
+  display: "flex"
+}, ({
+  open
+}) => ({
+  pointerEvents: open ? "auto" : "none",
+  backgroundColor: open ? getBackgroundColor(colorBackgroundOverlayStatic) : "rgba(0, 0, 0, 0)"
+}), ({
+  zIndex
+}) => ({
+  zIndex: zIndex ? zIndex : 22
+}));
+const TrayStyled = styled(Card).withConfig({
+  displayName: "TrayStyled",
+  componentId: "sc-3179l8-1"
+})({
+  height: "100%",
+  width: "320px",
+  ...viewport.md({
+    width: "420px"
+  }),
+  ...viewport.lg({
+    width: "475px"
+  }),
+  borderTopRightRadius: "0",
+  borderBottomRightRadius: "0",
+  transition: "transform 0.5s",
+  padding: `${getSpacing(spacingMd)} 0 0`,
+  display: "flex"
+}, ({
+  buttons
+}) => ({
+  paddingBottom: buttons && buttons.buttons.length > 0 ? "0" : getSpacing(spacingMd)
+}), ({
+  open
+}) => ({
+  transform: open ? "translateX(0)" : "translateX(100%)",
+  boxShadow: open ? getCssVar(shadow28) : "none"
+}));
+const TrayHeadingContainerStyled = styled(Flex).withConfig({
+  displayName: "TrayHeadingContainerStyled",
+  componentId: "sc-3179l8-2"
+})({
+  padding: `0 ${getSpacing(spacingMd)}`,
+  marginBottom: `calc(${getSpacing(spacingMd)} - ${getBorderWidth(borderWidthFocus)})`
+});
+const TrayCloseButtonStyled = styled(IconButton).withConfig({
+  displayName: "TrayCloseButtonStyled",
+  componentId: "sc-3179l8-3"
+})({
+  flex: "0 0 auto"
+});
+const TrayChildrenContainerStyled = styled("div").withConfig({
+  displayName: "TrayChildrenContainerStyled",
+  componentId: "sc-3179l8-4"
+})({
+  overflowY: "auto",
+  padding: `${getBorderWidth(borderWidthFocus)} ${getSpacing(spacingMd)} 0`,
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  "> *": {
+    flexShrink: 0
+  }
+});
+const TrayButtonContainerStyled = styled("div").withConfig({
+  displayName: "TrayButtonContainerStyled",
+  componentId: "sc-3179l8-5"
+})({
+  position: "relative",
+  transform: "none",
+  transition: "none",
+  padding: getSpacing(spacingMd),
+  boxShadow: getCssVar(shadow28),
+  marginTop: "auto"
+});
+const Tray = ({
+  heading,
+  contentElements = "body>*:not([id^='overlay'])",
+  uid: uidProp,
+  focusElementOnOpen,
+  focusElementOnClose,
+  children,
+  buttons,
+  zIndex,
+  ...props
+}) => {
+  const generatedUid = useId();
+  const uid = uidProp ?? generatedUid;
+  const [open, setOpen] = useState(props.open === true);
+  const [mounted, setMounted] = useState(false);
+  const invokingElement = useRef(null);
+  const prevOpenRef = useRef(void 0);
+  const headingId = `tray-heading-${uid}`;
+  const overlay = useRef(null);
+  useEffect(() => {
+    setOpen(true === props.open);
+  }, [props.open]);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const onCloseIconButtonClick = (event) => {
+    event.preventDefault();
+    closeTray();
+  };
+  const closeWithEscape = (event) => {
+    if (event.key !== "Escape") return;
+    closeTray();
+  };
+  const closeOnOverlayClick = (event) => {
+    if (event.target === event.currentTarget) {
+      closeTray();
+    }
+  };
+  const updateAttributes = (element, open2) => {
+    if (open2) {
+      element.setAttribute("aria-hidden", "true");
+    } else {
+      element.removeAttribute("aria-hidden");
+    }
+    element.toggleAttribute("inert", open2);
+  };
+  const updateElements = (open2) => {
+    const content = document.querySelectorAll(contentElements);
+    for (const element of content) {
+      updateAttributes(element, open2);
+    }
+    document.body.classList.toggle("HideOverflowY", open2);
+  };
+  const openTray = (event) => {
+    if (invokingElement) invokingElement.current = event.target;
+    setOpen(true);
+  };
+  const closeTray = () => {
+    setOpen(false);
+  };
+  useEffect(() => {
+    const openingElements = document.querySelectorAll(`[data-action='tray-${uid}']`);
+    for (const openingElement of openingElements) {
+      openingElement.addEventListener("click", openTray);
+    }
+    return () => {
+      for (const openingElement of openingElements) {
+        openingElement.removeEventListener("click", openTray);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    var _a, _b;
+    const wasOpen = prevOpenRef.current;
+    const isNowOpen = open;
+    prevOpenRef.current = open;
+    if (!isNowOpen) {
+      if (wasOpen === true) {
+        mounted && ((_a = props.onToggle) == null ? void 0 : _a.call(props, false));
+        const elementToFocus2 = focusElementOnClose ? document.getElementById(focusElementOnClose) : invokingElement.current;
+        elementToFocus2 == null ? void 0 : elementToFocus2.focus();
+      }
+      return;
+    }
+    (_b = props.onToggle) == null ? void 0 : _b.call(props, true);
+    updateElements(true);
+    document.addEventListener("keydown", closeWithEscape);
+    const elementToFocus = focusElementOnOpen ? document.getElementById(focusElementOnOpen) : document.getElementById(headingId);
+    elementToFocus == null ? void 0 : elementToFocus.focus({
+      preventScroll: true
+    });
+    return () => {
+      document.removeEventListener("keydown", closeWithEscape);
+      updateElements(false);
+    };
+  }, [open]);
+  useEffect(() => {
+    overlay.current = document.getElementById(`overlay-${uid}`);
+  }, []);
+  const tray = /* @__PURE__ */ jsx(TrayOverlayStyled, { open, id: `overlay-${uid}`, onClick: closeOnOverlayClick, zIndex, children: /* @__PURE__ */ jsxs(TrayStyled, { role: "dialog", "aria-modal": "true", "aria-labelledby": headingId, "aria-hidden": open ? "false" : "true", inert: open ? void 0 : true, buttons, id: `tray-${uid}`, open, children: [
+    /* @__PURE__ */ jsxs(TrayHeadingContainerStyled, { justify: "between", bottomSpacing: spacingNone, children: [
+      /* @__PURE__ */ jsx(Heading, { ...heading, tabIndex: -1, id: headingId }),
+      /* @__PURE__ */ jsx(TrayCloseButtonStyled, { screenReaderLabel: "Schließen", icon: "Close", appearance: "tertiary", bottomSpacing: spacingNone, onClick: onCloseIconButtonClick, type: "button", id: `tray-close-button-${uid}` })
+    ] }),
+    /* @__PURE__ */ jsx(TrayChildrenContainerStyled, { children }),
+    buttons && buttons.buttons.length > 0 && /* @__PURE__ */ jsx(TrayButtonContainerStyled, { children: /* @__PURE__ */ jsx(ButtonGroup, { ...buttons, orientation: flexOrientationVertical, bottomSpacing: spacingNone }) })
+  ] }) });
+  if (!mounted) return tray;
+  return createPortal(tray, document.body);
+};
+export {
+  Tray as default
+};

package/dist/components/Tray/props.d.ts

@@ -0,0 +1,52 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { ButtonGroupProps } from '../ButtonGroup/props';
+import { HeadingProps } from '../Heading/props';
+import { trayComponentName } from './componentName';
+import { BrixComponentProps } from '../../foundations/BrixComponentProps';
+/**
+ * Props for the Tray component.
+ * A slide-in panel (drawer) from the bottom with heading, content, and optional buttons.
+ * @see {@link https://www.vodafone.de/simplicity/pattern/?path=/docs/disclosure-tray--docs} Tray stories
+ */
+export interface TrayProps extends BrixComponentProps, Omit<HTMLAttributes<HTMLDivElement>, 'onToggle'> {
+    /**
+     * Internal component name used for CMS and dynamic rendering.
+     */
+    component?: typeof trayComponentName;
+    /**
+     * Content rendered inside the tray body.
+     */
+    children: ReactNode;
+    /**
+     * Tray heading configuration.
+     */
+    heading: HeadingProps;
+    /**
+     * Optional action buttons at the bottom of the tray.
+     */
+    buttons?: Omit<ButtonGroupProps, 'orientation'>;
+    /**
+     * Whether the tray is currently open/visible.
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the tray opens or closes. Receives the new open state.
+     */
+    onToggle?: (open: boolean) => void;
+    /**
+     * CSS selector for page content elements to mark as `aria-hidden` and `inert` while the tray is open.
+     */
+    contentElements?: string;
+    /**
+     * CSS selector or ID of the element to focus when the tray opens.
+     */
+    focusElementOnOpen?: string;
+    /**
+     * CSS selector or ID of the element to focus when the tray closes.
+     */
+    focusElementOnClose?: string;
+    /**
+     * Custom z-index for rendering the tray above other content.
+     */
+    zIndex?: number;
+}

package/dist/components/Tray/styled.d.ts

@@ -0,0 +1,7 @@
+import { TrayProps } from './props';
+export declare const TrayOverlayStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement>, "open" | "zIndex"> & Pick<TrayProps, "open" | "zIndex">, never> & Partial<Pick<import('styled-components').FastOmit<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement>, "open" | "zIndex"> & Pick<TrayProps, "open" | "zIndex">, never>>> & string;
+export declare const TrayStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('../Card').CardProps, "open" | "buttons"> & Pick<TrayProps, "open" | "buttons">, never> & Partial<Pick<import('styled-components').FastOmit<import('../Card').CardProps, "open" | "buttons"> & Pick<TrayProps, "open" | "buttons">, never>>> & string & Omit<({ children, className, theme, tag, mobileDark, appearance, ...props }: import('../Card').CardProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+export declare const TrayHeadingContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Flex').FlexProps, never> & Partial<Pick<import('../Flex').FlexProps, never>>> & string & Omit<({ children, tag, ...props }: import('../Flex').FlexProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+export declare const TrayCloseButtonStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../IconButton').IconButtonProps, never> & Partial<Pick<import('../IconButton').IconButtonProps, never>>> & string & Omit<({ screenReaderLabel, shape, ...props }: import('../IconButton').IconButtonProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+export declare const TrayChildrenContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement>, never> & Partial<Pick<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement>, never>>> & string;
+export declare const TrayButtonContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement>, never> & Partial<Pick<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement>, never>>> & string;