@telia/teddy 0.4.9 → 0.4.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/components/flip-card/flip-card-back.cjs +10 -0
  2. package/dist/components/flip-card/flip-card-back.js +10 -0
  3. package/dist/components/flip-card/flip-card-front.cjs +2 -1
  4. package/dist/components/flip-card/flip-card-front.js +2 -1
  5. package/dist/components/flip-card/flip-card-root.cjs +21 -21
  6. package/dist/components/flip-card/flip-card-root.js +21 -21
  7. package/dist/style.css +14 -15
  8. package/package.json +1 -1
package/dist/components/flip-card/flip-card-back.cjs CHANGED
@@ -21,6 +21,15 @@ const Back = React.forwardRef(
21
21
  setFooterHeight(`${footerRef.current.getBoundingClientRect().height}px`);
22
22
  }
23
23
  }, [footerRef]);
24
+ React.useEffect(() => {
25
+ if (backRef == null ? void 0 : backRef.current) {
26
+ if (!flipped) {
27
+ backRef.current.setAttribute("inert", "");
28
+ } else {
29
+ backRef.current.removeAttribute("inert");
30
+ }
31
+ }
32
+ }, [flipped, backRef]);
24
33
  const ref = utils_composeRefs.useComposedRefs(forwardRef, backRef);
25
34
  const classesOuter = clsx(
26
35
  [components_flipCard_flipCardRoot.styles[`${components_flipCard_flipCardRoot.rootClassName}__back`]],
@@ -37,6 +46,7 @@ const Back = React.forwardRef(
37
46
  id: backId,
38
47
  role: "region",
39
48
  "aria-label": ariaLabel || "Bakside innhold",
49
+ tabIndex: !flipped ? -1 : void 0,
40
50
  ...props,
41
51
  ref,
42
52
  className: classesInner,
package/dist/components/flip-card/flip-card-back.js CHANGED
@@ -19,6 +19,15 @@ const Back = React__default.forwardRef(
19
19
  setFooterHeight(`${footerRef.current.getBoundingClientRect().height}px`);
20
20
  }
21
21
  }, [footerRef]);
22
+ React__default.useEffect(() => {
23
+ if (backRef == null ? void 0 : backRef.current) {
24
+ if (!flipped) {
25
+ backRef.current.setAttribute("inert", "");
26
+ } else {
27
+ backRef.current.removeAttribute("inert");
28
+ }
29
+ }
30
+ }, [flipped, backRef]);
22
31
  const ref = useComposedRefs(forwardRef, backRef);
23
32
  const classesOuter = clsx(
24
33
  [styles[`${rootClassName}__back`]],
@@ -35,6 +44,7 @@ const Back = React__default.forwardRef(
35
44
  id: backId,
36
45
  role: "region",
37
46
  "aria-label": ariaLabel || "Bakside innhold",
47
+ tabIndex: !flipped ? -1 : void 0,
38
48
  ...props,
39
49
  ref,
40
50
  className: classesInner,
package/dist/components/flip-card/flip-card-front.cjs CHANGED
@@ -8,7 +8,7 @@ const components_card_index = require("../card/index.cjs");
8
8
  const utils_composeRefs = require("../../utils/composeRefs.cjs");
9
9
  const Front = React.forwardRef(
10
10
  ({ className, children, "aria-label": ariaLabel, ...props }, forwardRef) => {
11
- const { frontId, frontRef } = React.useContext(components_flipCard_flipCardRoot.FlipContext);
11
+ const { frontId, flipped, frontRef } = React.useContext(components_flipCard_flipCardRoot.FlipContext);
12
12
  const ref = utils_composeRefs.useComposedRefs(forwardRef, frontRef);
13
13
  const classes = clsx([components_flipCard_flipCardRoot.styles[`${components_flipCard_flipCardRoot.rootClassName}__front`]], className);
14
14
  return /* @__PURE__ */ jsxRuntime.jsx(
@@ -20,6 +20,7 @@ const Front = React.forwardRef(
20
20
  id: frontId,
21
21
  role: "region",
22
22
  "aria-label": ariaLabel || "Forside innhold",
23
+ hidden: flipped,
23
24
  children
24
25
  }
25
26
  );
package/dist/components/flip-card/flip-card-front.js CHANGED
@@ -6,7 +6,7 @@ import { Card } from "../card/index.js";
6
6
  import { useComposedRefs } from "../../utils/composeRefs.js";
7
7
  const Front = React__default.forwardRef(
8
8
  ({ className, children, "aria-label": ariaLabel, ...props }, forwardRef) => {
9
- const { frontId, frontRef } = useContext(FlipContext);
9
+ const { frontId, flipped, frontRef } = useContext(FlipContext);
10
10
  const ref = useComposedRefs(forwardRef, frontRef);
11
11
  const classes = clsx([styles[`${rootClassName}__front`]], className);
12
12
  return /* @__PURE__ */ jsx(
@@ -18,6 +18,7 @@ const Front = React__default.forwardRef(
18
18
  id: frontId,
19
19
  role: "region",
20
20
  "aria-label": ariaLabel || "Forside innhold",
21
+ hidden: flipped,
21
22
  children
22
23
  }
23
24
  );
package/dist/components/flip-card/flip-card-root.cjs CHANGED
@@ -6,19 +6,19 @@ const clsx = require("clsx");
6
6
  const reactUseControllableState = require("@radix-ui/react-use-controllable-state");
7
7
  const utils_composeRefs = require("../../utils/composeRefs.cjs");
8
8
  const styles = {
9
- "teddy-flip-card": "_teddy-flip-card_i5s05_1",
10
- "teddy-flip-card--flipped": "_teddy-flip-card--flipped_i5s05_12",
11
- "teddy-flip-card__front": "_teddy-flip-card__front_i5s05_15",
12
- "teddy-flip-card__back": "_teddy-flip-card__back_i5s05_19",
13
- "teddy-flip-card__back-inner": "_teddy-flip-card__back-inner_i5s05_33",
14
- "teddy-flip-card__scroll-area-view-port": "_teddy-flip-card__scroll-area-view-port_i5s05_41",
15
- "teddy-flip-card__footer": "_teddy-flip-card__footer_i5s05_45",
16
- "teddy-flip-card__footer--purple-light": "_teddy-flip-card__footer--purple-light_i5s05_52",
17
- "teddy-flip-card__footer--purple-dark": "_teddy-flip-card__footer--purple-dark_i5s05_55",
18
- "teddy-flip-card__footer--beige": "_teddy-flip-card__footer--beige_i5s05_58",
19
- "teddy-flip-card__footer--beige-light": "_teddy-flip-card__footer--beige-light_i5s05_61",
20
- "teddy-flip-card__footer--gray": "_teddy-flip-card__footer--gray_i5s05_64",
21
- "teddy-flip-card__footer--white": "_teddy-flip-card__footer--white_i5s05_67"
9
+ "teddy-flip-card": "_teddy-flip-card_onxd6_1",
10
+ "teddy-flip-card--flipped": "_teddy-flip-card--flipped_onxd6_12",
11
+ "teddy-flip-card__front": "_teddy-flip-card__front_onxd6_15",
12
+ "teddy-flip-card__back": "_teddy-flip-card__back_onxd6_19",
13
+ "teddy-flip-card__back-inner": "_teddy-flip-card__back-inner_onxd6_32",
14
+ "teddy-flip-card__scroll-area-view-port": "_teddy-flip-card__scroll-area-view-port_onxd6_40",
15
+ "teddy-flip-card__footer": "_teddy-flip-card__footer_onxd6_44",
16
+ "teddy-flip-card__footer--purple-light": "_teddy-flip-card__footer--purple-light_onxd6_51",
17
+ "teddy-flip-card__footer--purple-dark": "_teddy-flip-card__footer--purple-dark_onxd6_54",
18
+ "teddy-flip-card__footer--beige": "_teddy-flip-card__footer--beige_onxd6_57",
19
+ "teddy-flip-card__footer--beige-light": "_teddy-flip-card__footer--beige-light_onxd6_60",
20
+ "teddy-flip-card__footer--gray": "_teddy-flip-card__footer--gray_onxd6_63",
21
+ "teddy-flip-card__footer--white": "_teddy-flip-card__footer--white_onxd6_66"
22
22
  };
23
23
  const rootClassName = "teddy-flip-card";
24
24
  const FlipContext = React.createContext({
@@ -80,11 +80,6 @@ const Root = React.forwardRef(
80
80
  const durationMs = parseTimeToMs(transitionDuration);
81
81
  setAnimationDuration(durationMs + 50);
82
82
  }
83
- if (frontRef.current) {
84
- const frontSize = frontRef.current.getBoundingClientRect();
85
- internalRef.current.style.width = `${frontSize.width}px`;
86
- internalRef.current.style.height = `${frontSize.height}px`;
87
- }
88
83
  }
89
84
  }, []);
90
85
  React.useEffect(() => {
@@ -93,12 +88,17 @@ const Root = React.forwardRef(
93
88
  if (timerRef.current) {
94
89
  clearTimeout(timerRef.current);
95
90
  }
96
- frontRef.current.style.display = "";
97
- backRef.current.style.display = "";
91
+ if (flipped) {
92
+ backRef.current.style.display = "";
93
+ frontRef.current.style.visibility = "";
94
+ } else {
95
+ frontRef.current.style.visibility = "";
96
+ backRef.current.style.display = "";
97
+ }
98
98
  timerRef.current = setTimeout(() => {
99
99
  if (frontRef.current && backRef.current) {
100
100
  if (flipped) {
101
- frontRef.current.style.display = "none";
101
+ frontRef.current.style.visibility = "hidden";
102
102
  } else {
103
103
  backRef.current.style.display = "none";
104
104
  }
package/dist/components/flip-card/flip-card-root.js CHANGED
@@ -4,19 +4,19 @@ import clsx from "clsx";
4
4
  import { useControllableState } from "@radix-ui/react-use-controllable-state";
5
5
  import { useComposedRefs } from "../../utils/composeRefs.js";
6
6
  const styles = {
7
- "teddy-flip-card": "_teddy-flip-card_i5s05_1",
8
- "teddy-flip-card--flipped": "_teddy-flip-card--flipped_i5s05_12",
9
- "teddy-flip-card__front": "_teddy-flip-card__front_i5s05_15",
10
- "teddy-flip-card__back": "_teddy-flip-card__back_i5s05_19",
11
- "teddy-flip-card__back-inner": "_teddy-flip-card__back-inner_i5s05_33",
12
- "teddy-flip-card__scroll-area-view-port": "_teddy-flip-card__scroll-area-view-port_i5s05_41",
13
- "teddy-flip-card__footer": "_teddy-flip-card__footer_i5s05_45",
14
- "teddy-flip-card__footer--purple-light": "_teddy-flip-card__footer--purple-light_i5s05_52",
15
- "teddy-flip-card__footer--purple-dark": "_teddy-flip-card__footer--purple-dark_i5s05_55",
16
- "teddy-flip-card__footer--beige": "_teddy-flip-card__footer--beige_i5s05_58",
17
- "teddy-flip-card__footer--beige-light": "_teddy-flip-card__footer--beige-light_i5s05_61",
18
- "teddy-flip-card__footer--gray": "_teddy-flip-card__footer--gray_i5s05_64",
19
- "teddy-flip-card__footer--white": "_teddy-flip-card__footer--white_i5s05_67"
7
+ "teddy-flip-card": "_teddy-flip-card_onxd6_1",
8
+ "teddy-flip-card--flipped": "_teddy-flip-card--flipped_onxd6_12",
9
+ "teddy-flip-card__front": "_teddy-flip-card__front_onxd6_15",
10
+ "teddy-flip-card__back": "_teddy-flip-card__back_onxd6_19",
11
+ "teddy-flip-card__back-inner": "_teddy-flip-card__back-inner_onxd6_32",
12
+ "teddy-flip-card__scroll-area-view-port": "_teddy-flip-card__scroll-area-view-port_onxd6_40",
13
+ "teddy-flip-card__footer": "_teddy-flip-card__footer_onxd6_44",
14
+ "teddy-flip-card__footer--purple-light": "_teddy-flip-card__footer--purple-light_onxd6_51",
15
+ "teddy-flip-card__footer--purple-dark": "_teddy-flip-card__footer--purple-dark_onxd6_54",
16
+ "teddy-flip-card__footer--beige": "_teddy-flip-card__footer--beige_onxd6_57",
17
+ "teddy-flip-card__footer--beige-light": "_teddy-flip-card__footer--beige-light_onxd6_60",
18
+ "teddy-flip-card__footer--gray": "_teddy-flip-card__footer--gray_onxd6_63",
19
+ "teddy-flip-card__footer--white": "_teddy-flip-card__footer--white_onxd6_66"
20
20
  };
21
21
  const rootClassName = "teddy-flip-card";
22
22
  const FlipContext = createContext({
@@ -78,11 +78,6 @@ const Root = React__default.forwardRef(
78
78
  const durationMs = parseTimeToMs(transitionDuration);
79
79
  setAnimationDuration(durationMs + 50);
80
80
  }
81
- if (frontRef.current) {
82
- const frontSize = frontRef.current.getBoundingClientRect();
83
- internalRef.current.style.width = `${frontSize.width}px`;
84
- internalRef.current.style.height = `${frontSize.height}px`;
85
- }
86
81
  }
87
82
  }, []);
88
83
  useEffect(() => {
@@ -91,12 +86,17 @@ const Root = React__default.forwardRef(
91
86
  if (timerRef.current) {
92
87
  clearTimeout(timerRef.current);
93
88
  }
94
- frontRef.current.style.display = "";
95
- backRef.current.style.display = "";
89
+ if (flipped) {
90
+ backRef.current.style.display = "";
91
+ frontRef.current.style.visibility = "";
92
+ } else {
93
+ frontRef.current.style.visibility = "";
94
+ backRef.current.style.display = "";
95
+ }
96
96
  timerRef.current = setTimeout(() => {
97
97
  if (frontRef.current && backRef.current) {
98
98
  if (flipped) {
99
- frontRef.current.style.display = "none";
99
+ frontRef.current.style.visibility = "hidden";
100
100
  } else {
101
101
  backRef.current.style.display = "none";
102
102
  }
package/dist/style.css CHANGED
@@ -1,22 +1,22 @@
1
- @charset 'UTF-8';._teddy-flip-card_i5s05_1 {
1
+ @charset 'UTF-8';._teddy-flip-card_onxd6_1 {
2
2
  position: relative;
3
3
  perspective: 1000px;
4
4
  transform-style: preserve-3d;
5
5
  z-index: 0;
6
6
  }
7
7
  @media (prefers-reduced-motion: no-preference) {
8
- ._teddy-flip-card_i5s05_1 {
8
+ ._teddy-flip-card_onxd6_1 {
9
9
  transition: transform var(--teddy-motion-duration-500) var(--teddy-motion-easing-ease-in-out);
10
10
  }
11
11
  }
12
- ._teddy-flip-card--flipped_i5s05_12 {
12
+ ._teddy-flip-card--flipped_onxd6_12 {
13
13
  transform: rotateY(180deg);
14
14
  }
15
- ._teddy-flip-card__front_i5s05_15 {
15
+ ._teddy-flip-card__front_onxd6_15 {
16
16
  backface-visibility: hidden;
17
17
  z-index: 2;
18
18
  }
19
- ._teddy-flip-card__back_i5s05_19 {
19
+ ._teddy-flip-card__back_onxd6_19 {
20
20
  position: absolute;
21
21
  top: 0;
22
22
  left: 0;
@@ -28,9 +28,8 @@
28
28
  justify-content: normal;
29
29
  align-content: stretch;
30
30
  padding: 0;
31
- overflow: hidden;
32
31
  }
33
- ._teddy-flip-card__back-inner_i5s05_33 {
32
+ ._teddy-flip-card__back-inner_onxd6_32 {
34
33
  padding: 0;
35
34
  margin: 0;
36
35
  width: 100%;
@@ -38,33 +37,33 @@
38
37
  justify-content: stretch;
39
38
  position: initial;
40
39
  }
41
- ._teddy-flip-card__scroll-area-view-port_i5s05_41 {
40
+ ._teddy-flip-card__scroll-area-view-port_onxd6_40 {
42
41
  padding: var(--teddy-spacing-250) var(--teddy-spacing-250) 0 var(--teddy-spacing-250);
43
42
  margin-bottom: var(--teddy-spacing-250);
44
43
  }
45
- ._teddy-flip-card__footer_i5s05_45 {
44
+ ._teddy-flip-card__footer_onxd6_44 {
46
45
  position: absolute;
47
46
  inset: auto 0 0 0;
48
47
  padding: var(--teddy-spacing-50);
49
48
  border-top: var(--teddy-border-width-xs) solid var(--teddy-color-border-weak);
50
49
  border-radius: 0 0 var(--teddy-border-radius-md) var(--teddy-border-radius-md);
51
50
  }
52
- ._teddy-flip-card__footer--purple-light_i5s05_52 {
51
+ ._teddy-flip-card__footer--purple-light_onxd6_51 {
53
52
  background-color: var(--teddy-color-background-interactive-primary-negative);
54
53
  }
55
- ._teddy-flip-card__footer--purple-dark_i5s05_55 {
54
+ ._teddy-flip-card__footer--purple-dark_onxd6_54 {
56
55
  background-color: var(--teddy-color-brand-deep-purple);
57
56
  }
58
- ._teddy-flip-card__footer--beige_i5s05_58 {
57
+ ._teddy-flip-card__footer--beige_onxd6_57 {
59
58
  background-color: var(--teddy-color-background-interactive-primary);
60
59
  }
61
- ._teddy-flip-card__footer--beige-light_i5s05_61 {
60
+ ._teddy-flip-card__footer--beige-light_onxd6_60 {
62
61
  background-color: var(--teddy-color-background-interactive-primary-negative);
63
62
  }
64
- ._teddy-flip-card__footer--gray_i5s05_64 {
63
+ ._teddy-flip-card__footer--gray_onxd6_63 {
65
64
  background-color: var(--teddy-color-background-secondary);
66
65
  }
67
- ._teddy-flip-card__footer--white_i5s05_67 {
66
+ ._teddy-flip-card__footer--white_onxd6_66 {
68
67
  background-color: var(--teddy-color-brand-white);
69
68
  }@layer grid {
70
69
  ._teddy-grid_1dv1t_2 {
package/package.json CHANGED
@@ -20,7 +20,7 @@
20
20
  "pnpm": ">=9"
21
21
  },
22
22
  "private": false,
23
- "version": "0.4.9",
23
+ "version": "0.4.10",
24
24
  "sideEffects": [
25
25
  "**/*.css",
26
26
  "**/*.svg"