@alto-avios/alto-ui 3.5.2-alpha.0 → 3.5.2-alpha.1
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._arrowContainer_f9nx_1{background:none;border:none;box-shadow:none!important;outline:none!important;padding:0;pointer-events:auto;position:relative;z-index:2}._arrowContainer_f9nx_1:focus,._arrowContainer_f9nx_1:focus-visible{box-shadow:none!important;outline:none!important}._iconButton_f9nx_20{align-items:center;display:flex;justify-content:center}._arrowContainer_f9nx_1._hideDisabledArrow_f9nx_26[aria-disabled=true]{display:none}._arrowContainer_f9nx_1._neutral_f9nx_32 ._iconButton_f9nx_20[data-focused=true],._arrowContainer_f9nx_1._neutral_f9nx_32 ._iconButton_f9nx_20[data-parent-hovered=true]{background-color:var(--alto-sem-color-overlay-state-darken-invert-hover)}._arrowContainer_f9nx_1:not([aria-disabled]) ._neutral_f9nx_32 ._iconButton_f9nx_20[data-parent-pressed=true]{background-color:var(--alto-sem-color-overlay-state-darken-invert-active)}._arrowContainer_f9nx_1._white_f9nx_44 ._iconButton_f9nx_20{background-color:transparent;border:none;border-radius:0}._arrowContainer_f9nx_1._white_f9nx_44:not([aria-disabled]) ._iconButton_f9nx_20[data-focused=true],._arrowContainer_f9nx_1._white_f9nx_44:not([aria-disabled]) ._iconButton_f9nx_20[data-parent-hovered=true]{background-color:var(--alto-sem-color-overlay-state-lighten-hover)}._arrowContainer_f9nx_1._white_f9nx_44:not([aria-disabled]) ._iconButton_f9nx_20[data-parent-pressed=true]{background-color:var(--alto-sem-color-overlay-state-lighten-active)}._arrowContainer_f9nx_1._shapeFlat_f9nx_62:not([aria-disabled]) ._iconButton_f9nx_20{background-color:var(--alto-sem-color-bg-white-vibrant-default)}._arrowContainer_f9nx_1._shapeFlat_f9nx_62:not([aria-disabled]) ._iconButton_f9nx_20[data-parent-pressed=true]{background-color:var(--alto-sem-color-bg-white-vibrant-active)}._arrowContainer_f9nx_1._shapeElevated_f9nx_72:not([aria-disabled]) ._iconButton_f9nx_20{background-color:var(--alto-sem-color-bg-white-vibrant-default);box-shadow:0 11.4px 9.12px #2f2a850d,0 2.59px 4.4px #2f2a850d,0 6.99px 18.18px #2f2a8514}._arrowContainer_f9nx_1._shapeElevated_f9nx_72:not([aria-disabled]) ._iconButton_f9nx_20[data-focused=true],._arrowContainer_f9nx_1._shapeElevated_f9nx_72:not([aria-disabled]) ._iconButton_f9nx_20[data-parent-hovered=true]{background-color:var(--alto-sem-color-bg-white-vibrant-hover)}._arrowContainer_f9nx_1._shapeElevated_f9nx_72:not([aria-disabled]) ._iconButton_f9nx_20[data-parent-pressed=true]{background-color:var(--alto-sem-color-bg-white-vibrant-active)}._arrowContainer_f9nx_1._gradient_f9nx_93:not([aria-disabled]) ._iconButton_f9nx_20{background:linear-gradient(90deg,#fefefe 50%,#fff0);border:none;border-radius:0;height:100%}._arrowContainer_f9nx_1._gradient_f9nx_93._next_f9nx_100:not([aria-disabled]) ._iconButton_f9nx_20{background:linear-gradient(90deg,#fff0,#fefefe 50%)}._arrowContainer_f9nx_1._gradient_f9nx_93:not([aria-disabled]) ._iconButton_f9nx_20[data-focused=true],._arrowContainer_f9nx_1._gradient_f9nx_93:not([aria-disabled]) ._iconButton_f9nx_20[data-parent-hovered=true]{background:linear-gradient(90deg,#fefefe 50%,#fff0);color:var(--alto-sem-color-fg-accent-primary)}._arrowContainer_f9nx_1._gradient_f9nx_93._next_f9nx_100:not([aria-disabled]) ._iconButton_f9nx_20[data-focused=true],._arrowContainer_f9nx_1._gradient_f9nx_93._next_f9nx_100:not([aria-disabled]) ._iconButton_f9nx_20[data-parent-hovered=true]{background:linear-gradient(90deg,#fff0,#fefefe 50%);color:var(--alto-sem-color-fg-accent-primary)}._arrowContainer_f9nx_1._gradient_f9nx_93:not([aria-disabled]) ._iconButton_f9nx_20[data-parent-pressed=true]{background-color:var(--alto-sem-color-overlay-state-lighten-active)}._arrowContainer_f9nx_1._gradient_f9nx_93:not([aria-disabled]) ._iconButton_f9nx_20[data-focused],._arrowContainer_f9nx_1._white_f9nx_44:not([aria-disabled]) ._iconButton_f9nx_20{outline-offset:var(--alto-sem-border-width-none)}._arrowContainer_f9nx_1[aria-disabled] ._iconButton_f9nx_20{background-color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;opacity:var(--alto-sem-opacity-30)}._arrowContainer_f9nx_1._fullHeight_f9nx_137{align-items:center;bottom:0;cursor:pointer;display:flex;height:100%;top:0;transform:none}._arrowContainer_f9nx_1._fullHeight_f9nx_137._prev_f9nx_148{justify-content:flex-start;left:0}._arrowContainer_f9nx_1._fullHeight_f9nx_137._next_f9nx_100{justify-content:flex-end;right:0}._arrowContainer_f9nx_1._fullHeight_f9nx_137 ._iconButton_f9nx_20{border:none!important;box-shadow:none!important;outline:none!important;position:relative;z-index:2}._arrowContainer_f9nx_1._fullHeight_f9nx_137 ._iconButton_f9nx_20:focus,._arrowContainer_f9nx_1._fullHeight_f9nx_137 ._iconButton_f9nx_20:focus-visible,._arrowContainer_f9nx_1._fullHeight_f9nx_137 ._iconButton_f9nx_20[data-focus-visible=true],._arrowContainer_f9nx_1._fullHeight_f9nx_137 ._iconButton_f9nx_20[data-focused=true]{border:none!important;box-shadow:none!important;outline:none!important}._arrowContainer_f9nx_1:not(._fullHeight_f9nx_137){box-shadow:none!important;outline:none!important}._arrowContainer_f9nx_1:not(._fullHeight_f9nx_137):focus,._arrowContainer_f9nx_1:not(._fullHeight_f9nx_137):focus-visible{box-shadow:none!important;outline:none!important}
|
|
@@ -5,17 +5,17 @@ import { useFocusRing } from "@react-aria/focus";
|
|
|
5
5
|
import { i as iconButtonStyles } from "../../../IconButton.module-DcfPVyUX.js";
|
|
6
6
|
import { focusStyleVariants } from "../../../utils/focus/focusStyles.js";
|
|
7
7
|
import { Icon } from "../../Icon/Icon.js";
|
|
8
|
-
import '../../../assets/CarouselButton.css';const arrowContainer = "
|
|
9
|
-
const iconButton = "
|
|
10
|
-
const hideDisabledArrow = "
|
|
11
|
-
const neutral = "
|
|
12
|
-
const white = "
|
|
13
|
-
const shapeFlat = "
|
|
14
|
-
const shapeElevated = "
|
|
15
|
-
const gradient = "
|
|
16
|
-
const next = "
|
|
17
|
-
const fullHeight = "
|
|
18
|
-
const prev = "
|
|
8
|
+
import '../../../assets/CarouselButton.css';const arrowContainer = "_arrowContainer_f9nx_1";
|
|
9
|
+
const iconButton = "_iconButton_f9nx_20";
|
|
10
|
+
const hideDisabledArrow = "_hideDisabledArrow_f9nx_26";
|
|
11
|
+
const neutral = "_neutral_f9nx_32";
|
|
12
|
+
const white = "_white_f9nx_44";
|
|
13
|
+
const shapeFlat = "_shapeFlat_f9nx_62";
|
|
14
|
+
const shapeElevated = "_shapeElevated_f9nx_72";
|
|
15
|
+
const gradient = "_gradient_f9nx_93";
|
|
16
|
+
const next = "_next_f9nx_100";
|
|
17
|
+
const fullHeight = "_fullHeight_f9nx_137";
|
|
18
|
+
const prev = "_prev_f9nx_148";
|
|
19
19
|
const styles = {
|
|
20
20
|
arrowContainer,
|
|
21
21
|
iconButton,
|
|
@@ -50,6 +50,7 @@ const CarouselButton = ({
|
|
|
50
50
|
const [isHovered, setIsHovered] = useState(false);
|
|
51
51
|
const [isPressed, setIsPressed] = useState(false);
|
|
52
52
|
const [isDisabled, setIsDisabled] = useState(false);
|
|
53
|
+
const [shouldShowFocusRing, setShouldShowFocusRing] = useState(false);
|
|
53
54
|
const variantStyleClass = variant ? styles[variant] : "";
|
|
54
55
|
const shouldBeFullHeight = fullHeight2 || variant === "gradient";
|
|
55
56
|
const buttonRef = useRef(null);
|
|
@@ -65,6 +66,7 @@ const CarouselButton = ({
|
|
|
65
66
|
if (isCurrentlyDisabled) {
|
|
66
67
|
setIsHovered(false);
|
|
67
68
|
setIsPressed(false);
|
|
69
|
+
setShouldShowFocusRing(false);
|
|
68
70
|
}
|
|
69
71
|
}
|
|
70
72
|
});
|
|
@@ -77,6 +79,45 @@ const CarouselButton = ({
|
|
|
77
79
|
observer.disconnect();
|
|
78
80
|
};
|
|
79
81
|
}, []);
|
|
82
|
+
useEffect(() => {
|
|
83
|
+
if (!buttonRef.current) return;
|
|
84
|
+
const element = buttonRef.current;
|
|
85
|
+
const handleFocus = (e) => {
|
|
86
|
+
if (e.target === element && isFocusVisible) {
|
|
87
|
+
setShouldShowFocusRing(true);
|
|
88
|
+
const carouselContainer = element.closest('[role="region"][aria-roledescription="carousel"], .carouselWrapper');
|
|
89
|
+
if (carouselContainer) {
|
|
90
|
+
const siblingButtons = carouselContainer.querySelectorAll('[dir="prev"], [dir="next"]');
|
|
91
|
+
siblingButtons.forEach((button) => {
|
|
92
|
+
if (button !== element && button instanceof HTMLElement) {
|
|
93
|
+
button.dispatchEvent(new CustomEvent("carousel:hideFocus"));
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
const handleBlur = () => {
|
|
100
|
+
setShouldShowFocusRing(false);
|
|
101
|
+
};
|
|
102
|
+
const handleHideFocus = () => {
|
|
103
|
+
setShouldShowFocusRing(false);
|
|
104
|
+
};
|
|
105
|
+
element.addEventListener("focus", handleFocus);
|
|
106
|
+
element.addEventListener("blur", handleBlur);
|
|
107
|
+
element.addEventListener("carousel:hideFocus", handleHideFocus);
|
|
108
|
+
return () => {
|
|
109
|
+
element.removeEventListener("focus", handleFocus);
|
|
110
|
+
element.removeEventListener("blur", handleBlur);
|
|
111
|
+
element.removeEventListener("carousel:hideFocus", handleHideFocus);
|
|
112
|
+
};
|
|
113
|
+
}, [isFocusVisible]);
|
|
114
|
+
useEffect(() => {
|
|
115
|
+
if (!isFocusVisible) {
|
|
116
|
+
setShouldShowFocusRing(false);
|
|
117
|
+
} else if (isFocused && isFocusVisible) {
|
|
118
|
+
setShouldShowFocusRing(true);
|
|
119
|
+
}
|
|
120
|
+
}, [isFocusVisible, isFocused]);
|
|
80
121
|
const getIconSize = () => {
|
|
81
122
|
if (size === "sm") return "0.75x";
|
|
82
123
|
if (size === "lg") return "2x";
|
|
@@ -93,7 +134,7 @@ const CarouselButton = ({
|
|
|
93
134
|
return "whiteOnVibrant";
|
|
94
135
|
}
|
|
95
136
|
};
|
|
96
|
-
const containerFocusClass = shouldBeFullHeight &&
|
|
137
|
+
const containerFocusClass = shouldBeFullHeight && shouldShowFocusRing ? focusStyleVariants({
|
|
97
138
|
focusStyle
|
|
98
139
|
}) : "";
|
|
99
140
|
const getButtonClasses = () => {
|
|
@@ -107,7 +148,7 @@ const CarouselButton = ({
|
|
|
107
148
|
const sizeClass = iconButtonStyles[size] || "";
|
|
108
149
|
const emphasisClassKey = `${styleVariant}${emphasis.charAt(0).toUpperCase() + emphasis.slice(1)}`;
|
|
109
150
|
const emphasisClass = iconButtonStyles[emphasisClassKey] || "";
|
|
110
|
-
const focusClass = !shouldBeFullHeight ? focusStyleVariants({
|
|
151
|
+
const focusClass = !shouldBeFullHeight && shouldShowFocusRing ? focusStyleVariants({
|
|
111
152
|
focusStyle
|
|
112
153
|
}) : "";
|
|
113
154
|
return `${baseClass} ${sizeClass} ${emphasisClass} ${focusClass} ${buttonClassName || ""}`;
|
|
@@ -147,9 +188,7 @@ const CarouselButton = ({
|
|
|
147
188
|
const state = isDisabled ? ", unavailable" : "";
|
|
148
189
|
return `${action} slide${state}`;
|
|
149
190
|
};
|
|
150
|
-
return /* @__PURE__ */ jsx(CarouselButton$1, { dir, className: `${styles.arrowContainer} ${directionClass} ${hideDisabledArrow2 ? styles.hideDisabledArrow : ""} ${variantStyleClass || ""} ${shouldBeFullHeight ? styles.fullHeight : ""} ${containerFocusClass} ${className || ""} ${
|
|
151
|
-
focusStyle
|
|
152
|
-
})}`, ...focusProps, ...mouseEventHandlers, "data-hovered": !isDisabled && isHovered ? true : void 0, "data-pressed": !isDisabled && isPressed ? true : void 0, "data-disabled": isDisabled ? true : void 0, "data-focused": !isDisabled && isFocused ? true : void 0, ref: buttonRef, tabIndex: getTabIndex(), onClick: handleClick, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, "aria-label": getAriaLabel(), role: "button", children: /* @__PURE__ */ jsx("div", { className: `${getButtonClasses()} ${styles.iconButton}`, "data-focused": !shouldBeFullHeight && !isDisabled && isFocused ? true : void 0, "data-focus-visible": !shouldBeFullHeight && !isDisabled && isFocusVisible ? true : void 0, "data-parent-hovered": !isDisabled && isHovered ? true : void 0, "data-parent-pressed": !isDisabled && isPressed ? true : void 0, "data-parent-disabled": isDisabled ? true : void 0, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { iconName: `${iconType}-${dir === "prev" ? "left" : "right"}`, color: getIconColor(), iconSize: getIconSize(), "aria-hidden": "true" }) }) });
|
|
191
|
+
return /* @__PURE__ */ jsx(CarouselButton$1, { dir, className: `${styles.arrowContainer} ${directionClass} ${hideDisabledArrow2 ? styles.hideDisabledArrow : ""} ${variantStyleClass || ""} ${shouldBeFullHeight ? styles.fullHeight : ""} ${containerFocusClass} ${className || ""}`, ...focusProps, ...mouseEventHandlers, "data-hovered": !isDisabled && isHovered ? true : void 0, "data-pressed": !isDisabled && isPressed ? true : void 0, "data-disabled": isDisabled ? true : void 0, "data-focused": !isDisabled && isFocused ? true : void 0, "data-focus-visible": shouldShowFocusRing ? true : void 0, ref: buttonRef, tabIndex: getTabIndex(), onClick: handleClick, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, "aria-label": getAriaLabel(), role: "button", children: /* @__PURE__ */ jsx("div", { className: `${getButtonClasses()} ${styles.iconButton}`, "data-focused": !shouldBeFullHeight && !isDisabled && isFocused && shouldShowFocusRing ? true : void 0, "data-focus-visible": !shouldBeFullHeight && !isDisabled && shouldShowFocusRing ? true : void 0, "data-parent-hovered": !isDisabled && isHovered ? true : void 0, "data-parent-pressed": !isDisabled && isPressed ? true : void 0, "data-parent-disabled": isDisabled ? true : void 0, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { iconName: `${iconType}-${dir === "prev" ? "left" : "right"}`, color: getIconColor(), iconSize: getIconSize(), "aria-hidden": "true" }) }) });
|
|
153
192
|
};
|
|
154
193
|
export {
|
|
155
194
|
CarouselButton,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CarouselButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|