@telia/teddy 0.4.9 → 0.4.11

package/dist/components/flip-card/flip-card-back.cjs

@@ -21,6 +21,15 @@ const Back = React.forwardRef(
         setFooterHeight(`${footerRef.current.getBoundingClientRect().height}px`);
       }
     }, [footerRef]);
+    React.useEffect(() => {
+      if (backRef == null ? void 0 : backRef.current) {
+        if (!flipped) {
+          backRef.current.setAttribute("inert", "");
+        } else {
+          backRef.current.removeAttribute("inert");
+        }
+      }
+    }, [flipped, backRef]);
     const ref = utils_composeRefs.useComposedRefs(forwardRef, backRef);
     const classesOuter = clsx(
       [components_flipCard_flipCardRoot.styles[`${components_flipCard_flipCardRoot.rootClassName}__back`]],
@@ -37,6 +46,7 @@ const Back = React.forwardRef(
           id: backId,
           role: "region",
           "aria-label": ariaLabel || "Bakside innhold",
+          tabIndex: !flipped ? -1 : void 0,
           ...props,
           ref,
           className: classesInner,

package/dist/components/flip-card/flip-card-back.js

@@ -19,6 +19,15 @@ const Back = React__default.forwardRef(
         setFooterHeight(`${footerRef.current.getBoundingClientRect().height}px`);
       }
     }, [footerRef]);
+    React__default.useEffect(() => {
+      if (backRef == null ? void 0 : backRef.current) {
+        if (!flipped) {
+          backRef.current.setAttribute("inert", "");
+        } else {
+          backRef.current.removeAttribute("inert");
+        }
+      }
+    }, [flipped, backRef]);
     const ref = useComposedRefs(forwardRef, backRef);
     const classesOuter = clsx(
       [styles[`${rootClassName}__back`]],
@@ -35,6 +44,7 @@ const Back = React__default.forwardRef(
           id: backId,
           role: "region",
           "aria-label": ariaLabel || "Bakside innhold",
+          tabIndex: !flipped ? -1 : void 0,
           ...props,
           ref,
           className: classesInner,

package/dist/components/flip-card/flip-card-front.cjs

@@ -8,7 +8,7 @@ const components_card_index = require("../card/index.cjs");
 const utils_composeRefs = require("../../utils/composeRefs.cjs");
 const Front = React.forwardRef(
   ({ className, children, "aria-label": ariaLabel, ...props }, forwardRef) => {
-    const { frontId, frontRef } = React.useContext(components_flipCard_flipCardRoot.FlipContext);
+    const { frontId, flipped, frontRef } = React.useContext(components_flipCard_flipCardRoot.FlipContext);
     const ref = utils_composeRefs.useComposedRefs(forwardRef, frontRef);
     const classes = clsx([components_flipCard_flipCardRoot.styles[`${components_flipCard_flipCardRoot.rootClassName}__front`]], className);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -20,6 +20,7 @@ const Front = React.forwardRef(
         id: frontId,
         role: "region",
         "aria-label": ariaLabel || "Forside innhold",
+        hidden: flipped,
         children
       }
     );

package/dist/components/flip-card/flip-card-front.js

@@ -6,7 +6,7 @@ import { Card } from "../card/index.js";
 import { useComposedRefs } from "../../utils/composeRefs.js";
 const Front = React__default.forwardRef(
   ({ className, children, "aria-label": ariaLabel, ...props }, forwardRef) => {
-    const { frontId, frontRef } = useContext(FlipContext);
+    const { frontId, flipped, frontRef } = useContext(FlipContext);
     const ref = useComposedRefs(forwardRef, frontRef);
     const classes = clsx([styles[`${rootClassName}__front`]], className);
     return /* @__PURE__ */ jsx(
@@ -18,6 +18,7 @@ const Front = React__default.forwardRef(
         id: frontId,
         role: "region",
         "aria-label": ariaLabel || "Forside innhold",
+        hidden: flipped,
         children
       }
     );

package/dist/components/flip-card/flip-card-root.cjs

@@ -6,19 +6,19 @@ const clsx = require("clsx");
 const reactUseControllableState = require("@radix-ui/react-use-controllable-state");
 const utils_composeRefs = require("../../utils/composeRefs.cjs");
 const styles = {
-  "teddy-flip-card": "_teddy-flip-card_i5s05_1",
-  "teddy-flip-card--flipped": "_teddy-flip-card--flipped_i5s05_12",
-  "teddy-flip-card__front": "_teddy-flip-card__front_i5s05_15",
-  "teddy-flip-card__back": "_teddy-flip-card__back_i5s05_19",
-  "teddy-flip-card__back-inner": "_teddy-flip-card__back-inner_i5s05_33",
-  "teddy-flip-card__scroll-area-view-port": "_teddy-flip-card__scroll-area-view-port_i5s05_41",
-  "teddy-flip-card__footer": "_teddy-flip-card__footer_i5s05_45",
-  "teddy-flip-card__footer--purple-light": "_teddy-flip-card__footer--purple-light_i5s05_52",
-  "teddy-flip-card__footer--purple-dark": "_teddy-flip-card__footer--purple-dark_i5s05_55",
-  "teddy-flip-card__footer--beige": "_teddy-flip-card__footer--beige_i5s05_58",
-  "teddy-flip-card__footer--beige-light": "_teddy-flip-card__footer--beige-light_i5s05_61",
-  "teddy-flip-card__footer--gray": "_teddy-flip-card__footer--gray_i5s05_64",
-  "teddy-flip-card__footer--white": "_teddy-flip-card__footer--white_i5s05_67"
+  "teddy-flip-card": "_teddy-flip-card_onxd6_1",
+  "teddy-flip-card--flipped": "_teddy-flip-card--flipped_onxd6_12",
+  "teddy-flip-card__front": "_teddy-flip-card__front_onxd6_15",
+  "teddy-flip-card__back": "_teddy-flip-card__back_onxd6_19",
+  "teddy-flip-card__back-inner": "_teddy-flip-card__back-inner_onxd6_32",
+  "teddy-flip-card__scroll-area-view-port": "_teddy-flip-card__scroll-area-view-port_onxd6_40",
+  "teddy-flip-card__footer": "_teddy-flip-card__footer_onxd6_44",
+  "teddy-flip-card__footer--purple-light": "_teddy-flip-card__footer--purple-light_onxd6_51",
+  "teddy-flip-card__footer--purple-dark": "_teddy-flip-card__footer--purple-dark_onxd6_54",
+  "teddy-flip-card__footer--beige": "_teddy-flip-card__footer--beige_onxd6_57",
+  "teddy-flip-card__footer--beige-light": "_teddy-flip-card__footer--beige-light_onxd6_60",
+  "teddy-flip-card__footer--gray": "_teddy-flip-card__footer--gray_onxd6_63",
+  "teddy-flip-card__footer--white": "_teddy-flip-card__footer--white_onxd6_66"
 };
 const rootClassName = "teddy-flip-card";
 const FlipContext = React.createContext({
@@ -80,11 +80,6 @@ const Root = React.forwardRef(
           const durationMs = parseTimeToMs(transitionDuration);
           setAnimationDuration(durationMs + 50);
         }
-        if (frontRef.current) {
-          const frontSize = frontRef.current.getBoundingClientRect();
-          internalRef.current.style.width = `${frontSize.width}px`;
-          internalRef.current.style.height = `${frontSize.height}px`;
-        }
       }
     }, []);
     React.useEffect(() => {
@@ -93,12 +88,17 @@ const Root = React.forwardRef(
       if (timerRef.current) {
         clearTimeout(timerRef.current);
       }
-      frontRef.current.style.display = "";
-      backRef.current.style.display = "";
+      if (flipped) {
+        backRef.current.style.display = "";
+        frontRef.current.style.visibility = "";
+      } else {
+        frontRef.current.style.visibility = "";
+        backRef.current.style.display = "";
+      }
       timerRef.current = setTimeout(() => {
         if (frontRef.current && backRef.current) {
           if (flipped) {
-            frontRef.current.style.display = "none";
+            frontRef.current.style.visibility = "hidden";
           } else {
             backRef.current.style.display = "none";
           }

package/dist/components/flip-card/flip-card-root.js

@@ -4,19 +4,19 @@ import clsx from "clsx";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { useComposedRefs } from "../../utils/composeRefs.js";
 const styles = {
-  "teddy-flip-card": "_teddy-flip-card_i5s05_1",
-  "teddy-flip-card--flipped": "_teddy-flip-card--flipped_i5s05_12",
-  "teddy-flip-card__front": "_teddy-flip-card__front_i5s05_15",
-  "teddy-flip-card__back": "_teddy-flip-card__back_i5s05_19",
-  "teddy-flip-card__back-inner": "_teddy-flip-card__back-inner_i5s05_33",
-  "teddy-flip-card__scroll-area-view-port": "_teddy-flip-card__scroll-area-view-port_i5s05_41",
-  "teddy-flip-card__footer": "_teddy-flip-card__footer_i5s05_45",
-  "teddy-flip-card__footer--purple-light": "_teddy-flip-card__footer--purple-light_i5s05_52",
-  "teddy-flip-card__footer--purple-dark": "_teddy-flip-card__footer--purple-dark_i5s05_55",
-  "teddy-flip-card__footer--beige": "_teddy-flip-card__footer--beige_i5s05_58",
-  "teddy-flip-card__footer--beige-light": "_teddy-flip-card__footer--beige-light_i5s05_61",
-  "teddy-flip-card__footer--gray": "_teddy-flip-card__footer--gray_i5s05_64",
-  "teddy-flip-card__footer--white": "_teddy-flip-card__footer--white_i5s05_67"
+  "teddy-flip-card": "_teddy-flip-card_onxd6_1",
+  "teddy-flip-card--flipped": "_teddy-flip-card--flipped_onxd6_12",
+  "teddy-flip-card__front": "_teddy-flip-card__front_onxd6_15",
+  "teddy-flip-card__back": "_teddy-flip-card__back_onxd6_19",
+  "teddy-flip-card__back-inner": "_teddy-flip-card__back-inner_onxd6_32",
+  "teddy-flip-card__scroll-area-view-port": "_teddy-flip-card__scroll-area-view-port_onxd6_40",
+  "teddy-flip-card__footer": "_teddy-flip-card__footer_onxd6_44",
+  "teddy-flip-card__footer--purple-light": "_teddy-flip-card__footer--purple-light_onxd6_51",
+  "teddy-flip-card__footer--purple-dark": "_teddy-flip-card__footer--purple-dark_onxd6_54",
+  "teddy-flip-card__footer--beige": "_teddy-flip-card__footer--beige_onxd6_57",
+  "teddy-flip-card__footer--beige-light": "_teddy-flip-card__footer--beige-light_onxd6_60",
+  "teddy-flip-card__footer--gray": "_teddy-flip-card__footer--gray_onxd6_63",
+  "teddy-flip-card__footer--white": "_teddy-flip-card__footer--white_onxd6_66"
 };
 const rootClassName = "teddy-flip-card";
 const FlipContext = createContext({
@@ -78,11 +78,6 @@ const Root = React__default.forwardRef(
           const durationMs = parseTimeToMs(transitionDuration);
           setAnimationDuration(durationMs + 50);
         }
-        if (frontRef.current) {
-          const frontSize = frontRef.current.getBoundingClientRect();
-          internalRef.current.style.width = `${frontSize.width}px`;
-          internalRef.current.style.height = `${frontSize.height}px`;
-        }
       }
     }, []);
     useEffect(() => {
@@ -91,12 +86,17 @@ const Root = React__default.forwardRef(
       if (timerRef.current) {
         clearTimeout(timerRef.current);
       }
-      frontRef.current.style.display = "";
-      backRef.current.style.display = "";
+      if (flipped) {
+        backRef.current.style.display = "";
+        frontRef.current.style.visibility = "";
+      } else {
+        frontRef.current.style.visibility = "";
+        backRef.current.style.display = "";
+      }
       timerRef.current = setTimeout(() => {
         if (frontRef.current && backRef.current) {
           if (flipped) {
-            frontRef.current.style.display = "none";
+            frontRef.current.style.visibility = "hidden";
           } else {
             backRef.current.style.display = "none";
           }

package/dist/components/navigation-menu/global-navigation/global-navigation-root.d.ts

@@ -19,6 +19,7 @@ export type RootProps = React.ComponentPropsWithoutRef<'div'> & {
     drawerSize: 'md' | 'lg';
     isSimplified?: boolean;
     currentPath: string | undefined;
+    onSearchInputChange?: (e: React.ChangeEvent<HTMLInputElement>, value?: string) => void;
 };
 type RootContext = {
     selectedMenuItem: string | undefined;
@@ -29,9 +30,9 @@ type RootContext = {
     setPathname: (v: string) => void;
     specifiedLink?: string;
     setSpecifiedLink: (v: string) => void;
-} & Pick<RootProps, 'onSearchSubmit' | 'additionalSearchContent' | 'shoppingCart' | 'shoppingCartNumberOfItems' | 'loggedInUser' | 'appKey' | 'onLogoutClick' | 'linkComponent' | 'isCartOpen' | 'onCartOpenChange' | 'drawerSize'>;
+} & Pick<RootProps, 'onSearchSubmit' | 'additionalSearchContent' | 'shoppingCart' | 'shoppingCartNumberOfItems' | 'loggedInUser' | 'appKey' | 'onLogoutClick' | 'linkComponent' | 'isCartOpen' | 'onCartOpenChange' | 'drawerSize' | "onSearchInputChange">;
 export declare const RootContext: React.Context<RootContext | null>;
-export declare function Root({ className, appKey, loggedInUser, linkComponent, onLogoutClick, shoppingCart, shoppingCartNumberOfItems, onSearchSubmit, additionalSearchContent, isCartOpen, onCartOpenChange, drawerSize, isSimplified, currentPath, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+export declare function Root({ className, appKey, loggedInUser, linkComponent, onLogoutClick, shoppingCart, shoppingCartNumberOfItems, onSearchSubmit, additionalSearchContent, isCartOpen, onCartOpenChange, drawerSize, isSimplified, currentPath, onSearchInputChange, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Root {
     var displayName: string;
 }

package/dist/components/radio-card-group/radio-card-group-item-title.cjs

@@ -674,7 +674,6 @@ const SearchField = React.forwardRef(
       {
         onSubmit: (e) => {
           var _a, _b;
-          console.log("Search submitted,111");
           if (context == null ? void 0 : context.onSearchSubmit) {
             context.onSearchSubmit(e, (_a = ref.current) == null ? void 0 : _a.value);
           }
@@ -687,7 +686,19 @@ const SearchField = React.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(components_textField_index.TextField.Label, { children: "Søk i innhold" }),
           /* @__PURE__ */ jsxRuntime.jsxs(components_textField_index.TextField.InputGroup, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "search" }),
-            /* @__PURE__ */ jsxRuntime.jsx(components_textField_index.TextField.Input, { ref: composedRef, placeholder: "Søk her" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              components_textField_index.TextField.Input,
+              {
+                ref: composedRef,
+                onChange: (e) => {
+                  var _a, _b;
+                  if (((_a = ref.current) == null ? void 0 : _a.value) && (context == null ? void 0 : context.onSearchInputChange)) {
+                    context == null ? void 0 : context.onSearchInputChange(e, (_b = ref.current) == null ? void 0 : _b.value);
+                  }
+                },
+                placeholder: "Søk her"
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(components_textField_index.TextField.ClearButton, {})
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(components_textField_index.TextField.Button, { variant: "separated", children: "Søk" })
@@ -1197,6 +1208,7 @@ function Root({
   drawerSize = "md",
   isSimplified,
   currentPath,
+  onSearchInputChange,
   ...props
 }) {
   const [selectedMenuItem, setSelectedMenuItem] = React.useState(getInitialMenuItem(currentPath));
@@ -1241,7 +1253,8 @@ function Root({
         onCartOpenChange,
         drawerSize,
         specifiedLink,
-        setSpecifiedLink
+        setSpecifiedLink,
+        onSearchInputChange
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { ...props, className: classes, children: /* @__PURE__ */ jsxRuntime.jsxs(
         NavigationMenu,

package/dist/components/radio-card-group/radio-card-group-item-title.js

@@ -653,7 +653,6 @@ const SearchField = React__default.forwardRef(
       {
         onSubmit: (e) => {
           var _a, _b;
-          console.log("Search submitted,111");
           if (context == null ? void 0 : context.onSearchSubmit) {
             context.onSearchSubmit(e, (_a = ref.current) == null ? void 0 : _a.value);
           }
@@ -666,7 +665,19 @@ const SearchField = React__default.forwardRef(
           /* @__PURE__ */ jsx(TextField.Label, { children: "Søk i innhold" }),
           /* @__PURE__ */ jsxs(TextField.InputGroup, { children: [
             /* @__PURE__ */ jsx(Icon, { name: "search" }),
-            /* @__PURE__ */ jsx(TextField.Input, { ref: composedRef, placeholder: "Søk her" }),
+            /* @__PURE__ */ jsx(
+              TextField.Input,
+              {
+                ref: composedRef,
+                onChange: (e) => {
+                  var _a, _b;
+                  if (((_a = ref.current) == null ? void 0 : _a.value) && (context == null ? void 0 : context.onSearchInputChange)) {
+                    context == null ? void 0 : context.onSearchInputChange(e, (_b = ref.current) == null ? void 0 : _b.value);
+                  }
+                },
+                placeholder: "Søk her"
+              }
+            ),
             /* @__PURE__ */ jsx(TextField.ClearButton, {})
           ] }),
           /* @__PURE__ */ jsx(TextField.Button, { variant: "separated", children: "Søk" })
@@ -1176,6 +1187,7 @@ function Root({
   drawerSize = "md",
   isSimplified,
   currentPath,
+  onSearchInputChange,
   ...props
 }) {
   const [selectedMenuItem, setSelectedMenuItem] = React__default.useState(getInitialMenuItem(currentPath));
@@ -1220,7 +1232,8 @@ function Root({
         onCartOpenChange,
         drawerSize,
         specifiedLink,
-        setSpecifiedLink
+        setSpecifiedLink,
+        onSearchInputChange
       },
       children: /* @__PURE__ */ jsx(Box, { ...props, className: classes, children: /* @__PURE__ */ jsxs(
         NavigationMenu,

package/dist/style.css

@@ -1,22 +1,22 @@
-@charset 'UTF-8';._teddy-flip-card_i5s05_1 {
+@charset 'UTF-8';._teddy-flip-card_onxd6_1 {
   position: relative;
   perspective: 1000px;
   transform-style: preserve-3d;
   z-index: 0;
 }
 @media (prefers-reduced-motion: no-preference) {
-  ._teddy-flip-card_i5s05_1 {
+  ._teddy-flip-card_onxd6_1 {
     transition: transform var(--teddy-motion-duration-500) var(--teddy-motion-easing-ease-in-out);
   }
 }
-._teddy-flip-card--flipped_i5s05_12 {
+._teddy-flip-card--flipped_onxd6_12 {
   transform: rotateY(180deg);
 }
-._teddy-flip-card__front_i5s05_15 {
+._teddy-flip-card__front_onxd6_15 {
   backface-visibility: hidden;
   z-index: 2;
 }
-._teddy-flip-card__back_i5s05_19 {
+._teddy-flip-card__back_onxd6_19 {
   position: absolute;
   top: 0;
   left: 0;
@@ -28,9 +28,8 @@
   justify-content: normal;
   align-content: stretch;
   padding: 0;
-  overflow: hidden;
 }
-._teddy-flip-card__back-inner_i5s05_33 {
+._teddy-flip-card__back-inner_onxd6_32 {
   padding: 0;
   margin: 0;
   width: 100%;
@@ -38,33 +37,33 @@
   justify-content: stretch;
   position: initial;
 }
-._teddy-flip-card__scroll-area-view-port_i5s05_41 {
+._teddy-flip-card__scroll-area-view-port_onxd6_40 {
   padding: var(--teddy-spacing-250) var(--teddy-spacing-250) 0 var(--teddy-spacing-250);
   margin-bottom: var(--teddy-spacing-250);
 }
-._teddy-flip-card__footer_i5s05_45 {
+._teddy-flip-card__footer_onxd6_44 {
   position: absolute;
   inset: auto 0 0 0;
   padding: var(--teddy-spacing-50);
   border-top: var(--teddy-border-width-xs) solid var(--teddy-color-border-weak);
   border-radius: 0 0 var(--teddy-border-radius-md) var(--teddy-border-radius-md);
 }
-._teddy-flip-card__footer--purple-light_i5s05_52 {
+._teddy-flip-card__footer--purple-light_onxd6_51 {
   background-color: var(--teddy-color-background-interactive-primary-negative);
 }
-._teddy-flip-card__footer--purple-dark_i5s05_55 {
+._teddy-flip-card__footer--purple-dark_onxd6_54 {
   background-color: var(--teddy-color-brand-deep-purple);
 }
-._teddy-flip-card__footer--beige_i5s05_58 {
+._teddy-flip-card__footer--beige_onxd6_57 {
   background-color: var(--teddy-color-background-interactive-primary);
 }
-._teddy-flip-card__footer--beige-light_i5s05_61 {
+._teddy-flip-card__footer--beige-light_onxd6_60 {
   background-color: var(--teddy-color-background-interactive-primary-negative);
 }
-._teddy-flip-card__footer--gray_i5s05_64 {
+._teddy-flip-card__footer--gray_onxd6_63 {
   background-color: var(--teddy-color-background-secondary);
 }
-._teddy-flip-card__footer--white_i5s05_67 {
+._teddy-flip-card__footer--white_onxd6_66 {
   background-color: var(--teddy-color-brand-white);
 }@layer grid {
   ._teddy-grid_1dv1t_2 {

package/package.json

@@ -20,7 +20,7 @@
     "pnpm": ">=9"
   },
   "private": false,
-  "version": "0.4.9",
+  "version": "0.4.11",
   "sideEffects": [
     "**/*.css",
     "**/*.svg"