@vodafone_de/brix-components 7.1.10 → 7.1.11

package/dist/components/SuggestInput/index.js

@@ -135,7 +135,7 @@ const SuggestInputList = ({
     const isSelected = index === selectedOption;
     return /* @__PURE__ */ jsx(SuggestInputListItemStyled, { ref: (el) => {
       listItemsRef.current[index] = el;
-    }, onMouseDown: () => pickOption(listItem.label), "aria-selected": isSelected ? "true" : void 0, isSelected, role: "option", id: `${uid}-item-${index}`, children: highlightQuery(listItem.label, query) }, listItem.label);
+    }, onMouseDown: () => pickOption(listItem.value), "aria-selected": isSelected ? "true" : void 0, isSelected, role: "option", id: `${uid}-item-${index}`, "data-value": listItem.value, children: highlightQuery(listItem.label, query) }, listItem.label);
   }) }) });
 };
 const SuggestInputFormElementStyled = styled.div.withConfig({
@@ -209,6 +209,7 @@ const SuggestInputFormElement = forwardRef(({
 }, ref) => {
   return /* @__PURE__ */ jsx(SuggestInputFormElementStyled, { ...props, ref, children });
 });
+SuggestInputFormElement.displayName = "SuggestInputFormElement";
 const SuggestInput = forwardRef(({
   bottomSpacing = spacingMd,
   isLoading = false,
@@ -225,6 +226,7 @@ const SuggestInput = forwardRef(({
   placeholder,
   ...props
 }, outerRef) => {
+  var _a;
   const initialValueState = !props.value ? "" : props.value;
   const [buttonIcon, setButtonIcon] = useState("ChevronDown");
   const [selectedOption, setSelectedOption] = useState(-1);
@@ -258,13 +260,13 @@ const SuggestInput = forwardRef(({
     setConfirmedValue(props.value);
   }, [props.value]);
   useEffect(() => {
-    var _a;
+    var _a2;
     document.addEventListener("click", onClick);
-    (_a = formElementRef.current) == null ? void 0 : _a.addEventListener("keydown", onKeyDown);
+    (_a2 = formElementRef.current) == null ? void 0 : _a2.addEventListener("keydown", onKeyDown);
     return () => {
-      var _a2;
+      var _a3;
       document.removeEventListener("click", onClick);
-      (_a2 = formElementRef.current) == null ? void 0 : _a2.removeEventListener("keydown", onKeyDown);
+      (_a3 = formElementRef.current) == null ? void 0 : _a3.removeEventListener("keydown", onKeyDown);
     };
   });
   const closeList = () => {
@@ -300,16 +302,17 @@ const SuggestInput = forwardRef(({
     onUpdate && onUpdate(userInput);
   };
   const pickOption = (value2) => {
-    var _a;
-    (_a = inputRef.current) == null ? void 0 : _a.focus();
+    var _a2;
+    const pickedListItem = listItems == null ? void 0 : listItems.find((listItem) => listItem.value === value2);
+    (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
     setShowList(false);
     setValue(value2);
     setConfirmedValue(value2);
-    onPick && onPick(value2);
+    onPick && pickedListItem && onPick(pickedListItem);
     onClose && onClose();
   };
   const onClick = (event) => {
-    if (formElementRef.current && !formElementRef.current.contains(event.target)) {
+    if (formElementRef.current && !formElementRef.current.contains(event.target) && showList && !formElementRef.current.contains(document.activeElement)) {
       formElementRef.current.blur();
       closeList();
     }
@@ -322,7 +325,7 @@ const SuggestInput = forwardRef(({
     });
   };
   const onKeyDown = (event) => {
-    var _a;
+    var _a2;
     switch (event.key) {
       case "ArrowDown":
         if (!showList) setShowList(true);
@@ -346,8 +349,8 @@ const SuggestInput = forwardRef(({
         break;
       case "Enter":
         if (showList) {
-          pickOption(listItemsRef.current[selectedOption].innerText);
-          (_a = inputRef.current) == null ? void 0 : _a.setSelectionRange(value.length, value.length);
+          pickOption(listItemsRef.current[selectedOption].dataset.value);
+          (_a2 = inputRef.current) == null ? void 0 : _a2.setSelectionRange(value.length, value.length);
         }
         break;
       case "Escape":
@@ -363,7 +366,7 @@ const SuggestInput = forwardRef(({
       /* @__PURE__ */ jsx(InputStyled, { ...inputProps, ref: inputRef, onChange: (e) => handleChange(e.target.value), onClick: () => {
         if (disabled) return;
         setShowList(true);
-      }, role: "combobox", value, ...{
+      }, role: "combobox", value: (_a = listItems == null ? void 0 : listItems.find((listItem) => listItem.value === value)) == null ? void 0 : _a.label, ...{
         "aria-expanded": showList,
         "aria-controls": "listbox",
         "aria-activedescendant": selectedOption > -1 ? `${uid}-item-${selectedOption}` : void 0,
@@ -386,6 +389,7 @@ const SuggestInput = forwardRef(({
     /* @__PURE__ */ jsx(FormHelperMessage, { id: messageId, status, message: inputStateError === status ? errorMessage : helperText })
   ] });
 });
+SuggestInput.displayName = "SuggestInput";
 export {
   SuggestInput as default
 };

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

@@ -5,6 +5,7 @@ export interface SuggestInputItemProps {
     icon?: IconName;
     image?: string;
     label: string;
+    value: string;
 }
 export interface SuggestInputProps extends InputSharedProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'accept' | 'alt' | 'capture' | 'checked' | 'formEncType' | 'formTarget' | 'height' | 'max' | 'min' | 'multiple' | 'size' | 'step' | 'type' | 'width' | 'readOnly'> {
     value?: string;
@@ -19,7 +20,7 @@ export interface SuggestInputProps extends InputSharedProps, Omit<InputHTMLAttri
     /**
      * function that is called when an option from the list is picked
      */
-    onPick?: (value: string) => void;
+    onPick?: (value: SuggestInputItemProps) => void;
     /**
      * function that is called when the input or the list is closed (either by clicking the close button or escape key)
      */

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

@@ -4,5 +4,5 @@ import { default as TableFoot } from './components/TableFoot';
 import { default as TableHead } from './components/TableHead';
 import { default as TableWrapper } from './components/TableWrapper';
 import { TableContext, TableProvider } from './TableContext';
-export { TableWrapper, TableHead, TableBody, TableFoot, TableCell, TableContext, TableProvider };
+export { TableBody, TableCell, TableContext, TableFoot, TableHead, TableProvider, TableWrapper };
 export default TableWrapper;

package/dist/components/Table/index.js

@@ -1,12 +1,12 @@
 "use client";
-import { a, c, d, b, T, e } from "../../TableHead-C2zQ4jce.js";
-import { T as TableWrapper } from "../../TableWrapper-C8SpplcL.js";
+import { T, a, b, c, d, e } from "../../TableHead-ogeZ901P.js";
+import { T as TableWrapper } from "../../TableWrapper-Og83COGw.js";
 export {
-  a as TableBody,
-  c as TableCell,
-  d as TableContext,
-  b as TableFoot,
-  T as TableHead,
+  T as TableBody,
+  a as TableCell,
+  b as TableContext,
+  c as TableFoot,
+  d as TableHead,
   e as TableProvider,
   TableWrapper,
   TableWrapper as default

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode, ReactElement } from 'react';
+import { HTMLAttributes, ReactElement, ReactNode } from 'react';
 import { PatternProps } from '../../foundations/PatternProps';
 export type TableColumn = {
     key: string;

package/dist/components/TabularPrice/index.js

@@ -1,7 +1,7 @@
 "use client";
 import "react/jsx-runtime";
-import { T } from "../../index-DLvMM1Dq.js";
-import "../ScreenreaderOnly/index.js";
+import { T } from "../../index-tT4JzApY.js";
+import "../../index-DSF1zGyd.js";
 import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 export {
   T as default

package/dist/components/TextList/index.js

@@ -1,6 +1,6 @@
 "use client";
 import "react/jsx-runtime";
-import { a, T } from "../../index-CifS-Z_9.js";
+import { a, T } from "../../index-Cmrx-D-0.js";
 import "../../tags-38kBhOn6.js";
 import "../../Spacing-BMQelJYr.js";
 import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";

package/dist/components/Textarea/index.js

@@ -159,6 +159,7 @@ const Textarea = forwardRef(({
     /* @__PURE__ */ jsx(FormHelperMessage, { id: messageId, status, message: inputStateError === status ? errorMessage : helperText })
   ] });
 });
+Textarea.displayName = "Textarea";
 export {
   Textarea as default
 };

package/dist/components/TimeInput/index.js

@@ -101,6 +101,7 @@ const TimeInput = forwardRef(({
     /* @__PURE__ */ jsx(FormHelperMessage, { id: messageId, status: internalStatus, message: inputStateError === internalStatus ? errorMessage : helperText })
   ] });
 });
+TimeInput.displayName = "TimeInput";
 export {
   TimeInput as default
 };

package/dist/contentful/index.js

@@ -1,8 +1,8 @@
 "use client";
 import "react/jsx-runtime";
 import "@contentful/live-preview/react";
-import "../components/ScreenreaderOnly/index.js";
-import "../components/FootnoteLink/index.js";
+import "../index-DSF1zGyd.js";
+import "../index-UJLGt4uV.js";
 import "html-react-parser";
 import "../components/Body/index.js";
 import "../styled-BXtzJJFu.js";
@@ -12,12 +12,12 @@ import "../styled-Cz2kpbgE.js";
 import "../styled-Dmb8-99g.js";
 import "../NotificationErrorIcon-DMnAJgPN.js";
 import "../styled-B1bxWqtW.js";
-import "../styled-BBO2jrba.js";
+import "../styled-CIwf9Ebu.js";
 import "../hooks/useLinkComponent/index.js";
 import "../styled-BBG87P4U.js";
 import "../styled-BlHKbHF4.js";
 import "../styled-VuUKI7PE.js";
 import "../styled-BKWEE3dx.js";
 import "../components/InlineLink/index.js";
-import "../TableHead-C2zQ4jce.js";
+import "../TableHead-ogeZ901P.js";
 import "../styled-BYYivuzh.js";

package/dist/contentful/live-preview-inspector/index.js

@@ -1,7 +1,7 @@
 "use client";
 import "react/jsx-runtime";
 import "@contentful/live-preview/react";
-import { L } from "../../mapContentToComponents-DLxIwtHo.js";
+import { L } from "../../mapContentToComponents-CbN3OD_t.js";
 export {
   L as LivePreviewInspector
 };

package/dist/contentful/live-preview-renderer/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, Fragment } from "react/jsx-runtime";
 import { useContentfulLiveUpdates, ContentfulLivePreviewProvider } from "@contentful/live-preview/react";
-import { m as mapContentToComponents } from "../../mapContentToComponents-DLxIwtHo.js";
+import { m as mapContentToComponents } from "../../mapContentToComponents-CbN3OD_t.js";
 const BrixLiveRendererComponents = ({
   data
 }) => {

package/dist/contentful/renderer/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, Fragment } from "react/jsx-runtime";
 import LivePreviewRenderer from "../live-preview-renderer/index.js";
-import { m as mapContentToComponents } from "../../mapContentToComponents-DLxIwtHo.js";
+import { m as mapContentToComponents } from "../../mapContentToComponents-CbN3OD_t.js";
 const Renderer = ({
   content,
   isDraftMode

package/dist/{index-CifS-Z_9.js → index-Cmrx-D-0.js}

@@ -2,11 +2,11 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { cloneElement } from "react";
 import parse, { Element, domToReact } from "html-react-parser";
 import Body from "./components/Body/index.js";
-import FootnoteLink from "./components/FootnoteLink/index.js";
+import { F as FootnoteLink } from "./index-UJLGt4uV.js";
 import Heading from "./components/Heading/index.js";
 import InlineLink from "./components/InlineLink/index.js";
-import { T as TableHead, a as TableBody, b as TableFoot } from "./TableHead-C2zQ4jce.js";
-import { T as TableWrapper } from "./TableWrapper-C8SpplcL.js";
+import { d as TableHead, T as TableBody, c as TableFoot } from "./TableHead-ogeZ901P.js";
+import { T as TableWrapper } from "./TableWrapper-Og83COGw.js";
 import { k as headingHtmlTags, o as olTagName, q as strongTagName, r as supTagName, u as ulTagName } from "./tags-38kBhOn6.js";
 import { s as spacingNone } from "./Spacing-BMQelJYr.js";
 import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-RvOG3QbI.js";

package/dist/{index-CHzok6W_.js → index-Cv2XdnwK.js}

@@ -8,6 +8,7 @@ import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFro
 import { s as sanitizeLinkProps } from "./sanitizeLinkProps-D2Kkovy1.js";
 import styled from "styled-components";
 import { g as getButtonAppearance } from "./ButtonAppearanceHelper-D2SlSoU8.js";
+import { v as viewport } from "./index-Ck2bCrhT.js";
 import { getBodySize } from "./foundations/token/getBodySize/index.js";
 import { getBorderRadius } from "./foundations/token/getBorderRadius/index.js";
 import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
@@ -63,7 +64,10 @@ const ButtonAsLinkStyled = styled.span.withConfig({
 }, getBodySize(textBodyMd), ({
   width = "auto"
 }) => ({
-  width: "full" === width ? "100%" : "fit-content"
+  width: "100%",
+  ...viewport.md({
+    width: "full" === width ? "100%" : "fit-content"
+  })
 }), ({
   appearance = primaryAppearance
 }) => getButtonAppearance(appearance), ({

package/dist/index-DSF1zGyd.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { a as filterProps } from "./filterProps-BWnAPYBL.js";
+const screenreaderOnly = {
+  position: "absolute",
+  left: "-10000px",
+  top: "auto",
+  width: "1px",
+  height: "1px",
+  overflow: "hidden"
+};
+const ScreenReaderOnlyStyled = styled.span.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "ScreenReaderOnlyStyled",
+  componentId: "sc-1r7az4k-0"
+})(screenreaderOnly);
+const ScreenreaderOnly = ({
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(ScreenReaderOnlyStyled, { ...props, children });
+export {
+  ScreenreaderOnly as S,
+  screenreaderOnly as s
+};

package/dist/index-UJLGt4uV.js

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { S as ScreenreaderOnly } from "./index-DSF1zGyd.js";
+import styled from "styled-components";
+import InlineLink from "./components/InlineLink/index.js";
+import { getFontWeight } from "./foundations/token/getFontWeight/index.js";
+import { getSpacing } from "./foundations/token/getSpacing/index.js";
+import { e as spacing2Xs } from "./Spacing-BMQelJYr.js";
+const FootnoteLinkStyled = styled(InlineLink).withConfig({
+  displayName: "FootnoteLinkStyled",
+  componentId: "sc-ydos3j-0"
+})({
+  verticalAlign: "top",
+  fontSize: "0.7em",
+  fontWeight: getFontWeight("bold"),
+  textDecoration: "none",
+  display: "inline-block",
+  "& a": {
+    paddingLeft: getSpacing(spacing2Xs),
+    paddingRight: getSpacing(spacing2Xs),
+    verticalAlign: "baseline",
+    fontSize: "inherit"
+  }
+});
+const FootnoteLink = ({
+  uid,
+  contentUid,
+  screenReaderLabel,
+  children,
+  component: _component
+}) => {
+  const onClick = (event) => {
+    const linkbackToContent = document.getElementById(`back-${contentUid}`);
+    if (!linkbackToContent) {
+      return;
+    }
+    linkbackToContent.setAttribute("href", `#${uid}`);
+    const details = linkbackToContent.closest("details");
+    if (details && null === details.getAttribute("open")) {
+      event.preventDefault();
+      details.setAttribute("open", "open");
+      setTimeout(() => {
+        event.target.click();
+      }, 15);
+    }
+  };
+  return /* @__PURE__ */ jsxs(FootnoteLinkStyled, { id: uid, href: `#${contentUid}`, onClick, children: [
+    children,
+    /* @__PURE__ */ jsx(ScreenreaderOnly, { children: screenReaderLabel })
+  ] });
+};
+export {
+  FootnoteLink as F,
+  FootnoteLinkStyled as a
+};

package/dist/{index-DLvMM1Dq.js → index-tT4JzApY.js}

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import ScreenreaderOnly from "./components/ScreenreaderOnly/index.js";
+import { S as ScreenreaderOnly } from "./index-DSF1zGyd.js";
 import styled from "styled-components";
 import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
 import { getFontWeight } from "./foundations/token/getFontWeight/index.js";