@react-spectrum/steplist 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/import.mjs

@@ -1,3 +1,5 @@
+"use client";
+
 import "./main.css";
 import {Item as $6f77c10bf951cb4f$re_export$Item} from "@react-stately/collections";
 import {useStepList as $gZOFb$useStepList, useStepListItem as $gZOFb$useStepListItem} from "@react-aria/steplist";
@@ -7,7 +9,7 @@ import {useProviderProps as $gZOFb$useProviderProps} from "@react-spectrum/provi
 import {useStepListState as $gZOFb$useStepListState} from "@react-stately/steplist";
 import $gZOFb$spectrumiconsuiChevronRightMedium from "@spectrum-icons/ui/ChevronRightMedium";
 import {FocusRing as $gZOFb$FocusRing} from "@react-aria/focus";
-import {mergeProps as $gZOFb$mergeProps} from "@react-aria/utils";
+import {useId as $gZOFb$useId, mergeProps as $gZOFb$mergeProps} from "@react-aria/utils";
 import {useHover as $gZOFb$useHover} from "@react-aria/interactions";
 import {useLocale as $gZOFb$useLocale, useLocalizedStringFormatter as $gZOFb$useLocalizedStringFormatter, useNumberFormatter as $gZOFb$useNumberFormatter} from "@react-aria/i18n";
 import {VisuallyHidden as $gZOFb$VisuallyHidden} from "@react-aria/visually-hidden";
@@ -90,24 +92,22 @@ var $62132693388ec24a$export$2e2bcd8739ae039 = {
 
 var $b2477f17b7c66618$exports = {};
 
-$parcel$export($b2477f17b7c66618$exports, "chevron", () => $b2477f17b7c66618$export$980c1089c0604ea3, (v) => $b2477f17b7c66618$export$980c1089c0604ea3 = v);
 $parcel$export($b2477f17b7c66618$exports, "focus-ring", () => $b2477f17b7c66618$export$f39a09f249340e2a, (v) => $b2477f17b7c66618$export$f39a09f249340e2a = v);
 $parcel$export($b2477f17b7c66618$exports, "i18nFontFamily", () => $b2477f17b7c66618$export$8c4ee2c50c22c514, (v) => $b2477f17b7c66618$export$8c4ee2c50c22c514 = v);
 $parcel$export($b2477f17b7c66618$exports, "is-completed", () => $b2477f17b7c66618$export$7e62df9ca2e410e4, (v) => $b2477f17b7c66618$export$7e62df9ca2e410e4 = v);
 $parcel$export($b2477f17b7c66618$exports, "is-disabled", () => $b2477f17b7c66618$export$d35bc1e505d1ebbf, (v) => $b2477f17b7c66618$export$d35bc1e505d1ebbf = v);
-$parcel$export($b2477f17b7c66618$exports, "is-emphasized", () => $b2477f17b7c66618$export$ad416fbde92db390, (v) => $b2477f17b7c66618$export$ad416fbde92db390 = v);
 $parcel$export($b2477f17b7c66618$exports, "is-hovered", () => $b2477f17b7c66618$export$b8813cd5d7824ce7, (v) => $b2477f17b7c66618$export$b8813cd5d7824ce7 = v);
 $parcel$export($b2477f17b7c66618$exports, "is-reversed", () => $b2477f17b7c66618$export$a4561bd665abb5db, (v) => $b2477f17b7c66618$export$a4561bd665abb5db = v);
 $parcel$export($b2477f17b7c66618$exports, "is-selected", () => $b2477f17b7c66618$export$1e0fb04f31d3c22a, (v) => $b2477f17b7c66618$export$1e0fb04f31d3c22a = v);
 $parcel$export($b2477f17b7c66618$exports, "label", () => $b2477f17b7c66618$export$1237798dc640739a, (v) => $b2477f17b7c66618$export$1237798dc640739a = v);
 $parcel$export($b2477f17b7c66618$exports, "line", () => $b2477f17b7c66618$export$53f1d5ea8de3d7c, (v) => $b2477f17b7c66618$export$53f1d5ea8de3d7c = v);
-$parcel$export($b2477f17b7c66618$exports, "link", () => $b2477f17b7c66618$export$9c30223ca0a664fb, (v) => $b2477f17b7c66618$export$9c30223ca0a664fb = v);
-$parcel$export($b2477f17b7c66618$exports, "number", () => $b2477f17b7c66618$export$98e628dec113755e, (v) => $b2477f17b7c66618$export$98e628dec113755e = v);
+$parcel$export($b2477f17b7c66618$exports, "marker", () => $b2477f17b7c66618$export$ffc4d0086f1a4c9, (v) => $b2477f17b7c66618$export$ffc4d0086f1a4c9 = v);
 $parcel$export($b2477f17b7c66618$exports, "spectrum-FocusRing-ring", () => $b2477f17b7c66618$export$4109102f950813a6, (v) => $b2477f17b7c66618$export$4109102f950813a6 = v);
 $parcel$export($b2477f17b7c66618$exports, "spectrum-FocusRing", () => $b2477f17b7c66618$export$24c7f46a6e3605dd, (v) => $b2477f17b7c66618$export$24c7f46a6e3605dd = v);
 $parcel$export($b2477f17b7c66618$exports, "spectrum-FocusRing--quiet", () => $b2477f17b7c66618$export$2927016961429360, (v) => $b2477f17b7c66618$export$2927016961429360 = v);
 $parcel$export($b2477f17b7c66618$exports, "spectrum-Steplist", () => $b2477f17b7c66618$export$35315228197e36b8, (v) => $b2477f17b7c66618$export$35315228197e36b8 = v);
-$parcel$export($b2477f17b7c66618$exports, "spectrum-Steplist--interactive", () => $b2477f17b7c66618$export$b8611be6978ea2dd, (v) => $b2477f17b7c66618$export$b8611be6978ea2dd = v);
+$parcel$export($b2477f17b7c66618$exports, "spectrum-Steplist--emphasized", () => $b2477f17b7c66618$export$d2cf12460a777241, (v) => $b2477f17b7c66618$export$d2cf12460a777241 = v);
+$parcel$export($b2477f17b7c66618$exports, "spectrum-Steplist--horizontal", () => $b2477f17b7c66618$export$6f0c4d0e9f29399d, (v) => $b2477f17b7c66618$export$6f0c4d0e9f29399d = v);
 $parcel$export($b2477f17b7c66618$exports, "spectrum-Steplist--large", () => $b2477f17b7c66618$export$b0d9d5077004711a, (v) => $b2477f17b7c66618$export$b0d9d5077004711a = v);
 $parcel$export($b2477f17b7c66618$exports, "spectrum-Steplist--medium", () => $b2477f17b7c66618$export$9666cb7894b7712a, (v) => $b2477f17b7c66618$export$9666cb7894b7712a = v);
 $parcel$export($b2477f17b7c66618$exports, "spectrum-Steplist--small", () => $b2477f17b7c66618$export$43119eed81e90e13, (v) => $b2477f17b7c66618$export$43119eed81e90e13 = v);
@@ -118,25 +118,25 @@ $parcel$export($b2477f17b7c66618$exports, "spectrum-Steplist-item", () => $b2477
 $parcel$export($b2477f17b7c66618$exports, "spectrum-Steplist-label", () => $b2477f17b7c66618$export$2393468f68ff8031, (v) => $b2477f17b7c66618$export$2393468f68ff8031 = v);
 $parcel$export($b2477f17b7c66618$exports, "spectrum-Steplist-link", () => $b2477f17b7c66618$export$f622f4b07b665af3, (v) => $b2477f17b7c66618$export$f622f4b07b665af3 = v);
 $parcel$export($b2477f17b7c66618$exports, "spectrum-Steplist-marker", () => $b2477f17b7c66618$export$9d44d123fa093f85, (v) => $b2477f17b7c66618$export$9d44d123fa093f85 = v);
+$parcel$export($b2477f17b7c66618$exports, "spectrum-Steplist-markerWrapper", () => $b2477f17b7c66618$export$a7d0643524891b06, (v) => $b2477f17b7c66618$export$a7d0643524891b06 = v);
 $parcel$export($b2477f17b7c66618$exports, "spectrum-Steplist-segment", () => $b2477f17b7c66618$export$1f36a6b1ab318f2f, (v) => $b2477f17b7c66618$export$1f36a6b1ab318f2f = v);
-var $b2477f17b7c66618$export$980c1089c0604ea3;
+$parcel$export($b2477f17b7c66618$exports, "spectrum-Steplist-segmentLine", () => $b2477f17b7c66618$export$f92a1d2b4a328a95, (v) => $b2477f17b7c66618$export$f92a1d2b4a328a95 = v);
 var $b2477f17b7c66618$export$f39a09f249340e2a;
 var $b2477f17b7c66618$export$8c4ee2c50c22c514;
 var $b2477f17b7c66618$export$7e62df9ca2e410e4;
 var $b2477f17b7c66618$export$d35bc1e505d1ebbf;
-var $b2477f17b7c66618$export$ad416fbde92db390;
 var $b2477f17b7c66618$export$b8813cd5d7824ce7;
 var $b2477f17b7c66618$export$a4561bd665abb5db;
 var $b2477f17b7c66618$export$1e0fb04f31d3c22a;
 var $b2477f17b7c66618$export$1237798dc640739a;
 var $b2477f17b7c66618$export$53f1d5ea8de3d7c;
-var $b2477f17b7c66618$export$9c30223ca0a664fb;
-var $b2477f17b7c66618$export$98e628dec113755e;
+var $b2477f17b7c66618$export$ffc4d0086f1a4c9;
 var $b2477f17b7c66618$export$4109102f950813a6;
 var $b2477f17b7c66618$export$24c7f46a6e3605dd;
 var $b2477f17b7c66618$export$2927016961429360;
 var $b2477f17b7c66618$export$35315228197e36b8;
-var $b2477f17b7c66618$export$b8611be6978ea2dd;
+var $b2477f17b7c66618$export$d2cf12460a777241;
+var $b2477f17b7c66618$export$6f0c4d0e9f29399d;
 var $b2477f17b7c66618$export$b0d9d5077004711a;
 var $b2477f17b7c66618$export$9666cb7894b7712a;
 var $b2477f17b7c66618$export$43119eed81e90e13;
@@ -147,25 +147,25 @@ var $b2477f17b7c66618$export$df6f1d30f09c136e;
 var $b2477f17b7c66618$export$2393468f68ff8031;
 var $b2477f17b7c66618$export$f622f4b07b665af3;
 var $b2477f17b7c66618$export$9d44d123fa093f85;
+var $b2477f17b7c66618$export$a7d0643524891b06;
 var $b2477f17b7c66618$export$1f36a6b1ab318f2f;
-$b2477f17b7c66618$export$980c1089c0604ea3 = `Y9ExmG_chevron`;
+var $b2477f17b7c66618$export$f92a1d2b4a328a95;
 $b2477f17b7c66618$export$f39a09f249340e2a = `Y9ExmG_focus-ring`;
 $b2477f17b7c66618$export$8c4ee2c50c22c514 = `Y9ExmG_i18nFontFamily`;
 $b2477f17b7c66618$export$7e62df9ca2e410e4 = `Y9ExmG_is-completed`;
 $b2477f17b7c66618$export$d35bc1e505d1ebbf = `Y9ExmG_is-disabled`;
-$b2477f17b7c66618$export$ad416fbde92db390 = `Y9ExmG_is-emphasized`;
 $b2477f17b7c66618$export$b8813cd5d7824ce7 = `Y9ExmG_is-hovered`;
 $b2477f17b7c66618$export$a4561bd665abb5db = `Y9ExmG_is-reversed`;
 $b2477f17b7c66618$export$1e0fb04f31d3c22a = `Y9ExmG_is-selected`;
 $b2477f17b7c66618$export$1237798dc640739a = `Y9ExmG_label`;
 $b2477f17b7c66618$export$53f1d5ea8de3d7c = `Y9ExmG_line`;
-$b2477f17b7c66618$export$9c30223ca0a664fb = `Y9ExmG_link`;
-$b2477f17b7c66618$export$98e628dec113755e = `Y9ExmG_number`;
+$b2477f17b7c66618$export$ffc4d0086f1a4c9 = `Y9ExmG_marker`;
 $b2477f17b7c66618$export$4109102f950813a6 = `Y9ExmG_spectrum-FocusRing-ring`;
 $b2477f17b7c66618$export$24c7f46a6e3605dd = `Y9ExmG_spectrum-FocusRing ${$b2477f17b7c66618$export$4109102f950813a6}`;
 $b2477f17b7c66618$export$2927016961429360 = `Y9ExmG_spectrum-FocusRing--quiet`;
 $b2477f17b7c66618$export$35315228197e36b8 = `Y9ExmG_spectrum-Steplist`;
-$b2477f17b7c66618$export$b8611be6978ea2dd = `Y9ExmG_spectrum-Steplist--interactive`;
+$b2477f17b7c66618$export$d2cf12460a777241 = `Y9ExmG_spectrum-Steplist--emphasized`;
+$b2477f17b7c66618$export$6f0c4d0e9f29399d = `Y9ExmG_spectrum-Steplist--horizontal`;
 $b2477f17b7c66618$export$b0d9d5077004711a = `Y9ExmG_spectrum-Steplist--large`;
 $b2477f17b7c66618$export$9666cb7894b7712a = `Y9ExmG_spectrum-Steplist--medium`;
 $b2477f17b7c66618$export$43119eed81e90e13 = `Y9ExmG_spectrum-Steplist--small`;
@@ -176,7 +176,9 @@ $b2477f17b7c66618$export$df6f1d30f09c136e = `Y9ExmG_spectrum-Steplist-item`;
 $b2477f17b7c66618$export$2393468f68ff8031 = `Y9ExmG_spectrum-Steplist-label`;
 $b2477f17b7c66618$export$f622f4b07b665af3 = `Y9ExmG_spectrum-Steplist-link`;
 $b2477f17b7c66618$export$9d44d123fa093f85 = `Y9ExmG_spectrum-Steplist-marker`;
+$b2477f17b7c66618$export$a7d0643524891b06 = `Y9ExmG_spectrum-Steplist-markerWrapper`;
 $b2477f17b7c66618$export$1f36a6b1ab318f2f = `Y9ExmG_spectrum-Steplist-segment`;
+$b2477f17b7c66618$export$f92a1d2b4a328a95 = `Y9ExmG_spectrum-Steplist-segmentLine`;
 
 
 
@@ -184,59 +186,77 @@ $b2477f17b7c66618$export$1f36a6b1ab318f2f = `Y9ExmG_spectrum-Steplist-segment`;
 
 
 function $24c3cb1adfb0acc5$export$87c2a8a94eda1754(props) {
-    let { isDisabled: isDisabled, isEmphasized: isEmphasized, item: item } = props;
+    let { isDisabled: isDisabled, item: item } = props;
     let { key: key } = item;
-    let ref = (0, $gZOFb$useRef)();
+    let ref = (0, $gZOFb$useRef)(null);
     let { direction: direction } = (0, $gZOFb$useLocale)();
     let state = (0, $gZOFb$useContext)((0, $739a883ac33f90d8$export$66136572efa4af6e));
+    const isSelected = state.selectedKey === key;
     const isCompleted = state.isCompleted(key);
     const isItemDisabled = isDisabled || state.disabledKeys.has(key);
     let { stepProps: stepProps, stepStateProps: stepStateProps } = (0, $gZOFb$useStepListItem)({
         ...props,
         key: key
     }, state, ref);
-    let { hoverProps: hoverProps, isHovered: isHovered } = (0, $gZOFb$useHover)(props);
-    const isSelected = state.selectedKey === key;
+    let { hoverProps: hoverProps, isHovered: isHovered } = (0, $gZOFb$useHover)({
+        ...props,
+        isDisabled: isItemDisabled || isSelected || props.isReadOnly
+    });
     let stepStateText = "";
-    const stringFormatter = (0, $gZOFb$useLocalizedStringFormatter)((0, $62132693388ec24a$export$2e2bcd8739ae039));
+    const stringFormatter = (0, $gZOFb$useLocalizedStringFormatter)((0, $62132693388ec24a$export$2e2bcd8739ae039), "@react-spectrum/steplist");
     const numberFormatter = (0, $gZOFb$useNumberFormatter)();
     if (isSelected) stepStateText = stringFormatter.format("current");
     else if (isCompleted) stepStateText = stringFormatter.format("completed");
     else stepStateText = stringFormatter.format("notCompleted");
+    let markerId = (0, $gZOFb$useId)();
+    let labelId = (0, $gZOFb$useId)();
     return /*#__PURE__*/ (0, $gZOFb$react).createElement("li", {
-        key: key,
         className: (0, $gZOFb$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($b2477f17b7c66618$exports))), "spectrum-Steplist-item")
     }, /*#__PURE__*/ (0, $gZOFb$react).createElement((0, $gZOFb$FocusRing), {
         within: true,
         focusRingClass: (0, $gZOFb$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($b2477f17b7c66618$exports))), "focus-ring")
     }, /*#__PURE__*/ (0, $gZOFb$react).createElement("a", {
-        "aria-labelledby": `step-marker-${key} step-label-${key}`,
-        ref: ref,
         ...(0, $gZOFb$mergeProps)(hoverProps, stepProps),
+        "aria-labelledby": `${markerId} ${labelId}`,
+        ref: ref,
         className: (0, $gZOFb$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($b2477f17b7c66618$exports))), "spectrum-Steplist-link", {
             "is-selected": isSelected && !isItemDisabled,
             "is-disabled": isItemDisabled,
             "is-hovered": isHovered,
-            "is-emphasized": isEmphasized && isSelected,
-            "is-completed": isCompleted
+            "is-completed": isCompleted,
+            "is-selectable": state.isSelectable(key) && !isSelected
         })
-    }, /*#__PURE__*/ (0, $gZOFb$react).createElement((0, $gZOFb$VisuallyHidden), stepStateProps, stepStateText), /*#__PURE__*/ (0, $gZOFb$react).createElement("span", {
-        id: `step-marker-${key}`,
-        "aria-hidden": "true",
-        className: (0, $gZOFb$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($b2477f17b7c66618$exports))), "spectrum-Steplist-marker")
-    }, numberFormatter.format((item.index || 0) + 1)), /*#__PURE__*/ (0, $gZOFb$react).createElement("span", {
-        id: `step-label-${key}`,
+    }, /*#__PURE__*/ (0, $gZOFb$react).createElement((0, $gZOFb$VisuallyHidden), stepStateProps, stepStateText), /*#__PURE__*/ (0, $gZOFb$react).createElement("div", {
+        id: labelId,
         "aria-hidden": "true",
         className: (0, $gZOFb$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($b2477f17b7c66618$exports))), "spectrum-Steplist-label")
-    }, item.rendered))), /*#__PURE__*/ (0, $gZOFb$react).createElement("span", {
+    }, item.rendered), /*#__PURE__*/ (0, $gZOFb$react).createElement("div", {
         className: (0, $gZOFb$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($b2477f17b7c66618$exports))), "spectrum-Steplist-segment", {
             "is-completed": isCompleted
         })
-    }, /*#__PURE__*/ (0, $gZOFb$react).createElement((0, $gZOFb$spectrumiconsuiChevronRightMedium), {
+    }, /*#__PURE__*/ (0, $gZOFb$react).createElement("svg", {
+        className: (0, $gZOFb$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($b2477f17b7c66618$exports))), "spectrum-Steplist-segmentLine"),
+        xmlns: "http://www.w3.org/2000/svg",
+        height: "100%",
+        viewBox: "0 0 2 8",
+        preserveAspectRatio: "none"
+    }, /*#__PURE__*/ (0, $gZOFb$react).createElement("line", {
+        x1: "1",
+        y1: "0",
+        x2: "1",
+        y2: "8",
+        vectorEffect: "non-scaling-stroke"
+    })), /*#__PURE__*/ (0, $gZOFb$react).createElement((0, $gZOFb$spectrumiconsuiChevronRightMedium), {
         UNSAFE_className: (0, $gZOFb$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($b2477f17b7c66618$exports))), "spectrum-Steplist-chevron", {
             "is-reversed": direction === "rtl"
         })
-    })));
+    })), /*#__PURE__*/ (0, $gZOFb$react).createElement("div", {
+        "aria-hidden": "true",
+        className: (0, $gZOFb$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($b2477f17b7c66618$exports))), "spectrum-Steplist-markerWrapper")
+    }, /*#__PURE__*/ (0, $gZOFb$react).createElement("div", {
+        id: markerId,
+        className: (0, $gZOFb$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($b2477f17b7c66618$exports))), "spectrum-Steplist-marker")
+    }, numberFormatter.format((item.index || 0) + 1))))));
 }
 
 
@@ -246,21 +266,22 @@ function $24c3cb1adfb0acc5$export$87c2a8a94eda1754(props) {
 function $6bd0589d5d2f8b66$var$StepList(props, ref) {
     const { size: size = "M", orientation: orientation = "horizontal" } = props;
     props = (0, $gZOFb$useProviderProps)(props);
+    const { isDisabled: isDisabled, isEmphasized: isEmphasized } = props;
     let { styleProps: styleProps } = (0, $gZOFb$useStyleProps)(props);
     let domRef = (0, $gZOFb$useDOMRef)(ref);
     let state = (0, $gZOFb$useStepListState)(props);
     let { listProps: listProps } = (0, $gZOFb$useStepList)(props, state, domRef);
-    const { isDisabled: isDisabled, isEmphasized: isEmphasized, isReadOnly: isReadOnly } = props;
     return /*#__PURE__*/ (0, $gZOFb$react).createElement("ol", {
         ...listProps,
         ...styleProps,
         ref: domRef,
         className: (0, $gZOFb$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($b2477f17b7c66618$exports))), "spectrum-Steplist", styleProps.className, {
-            "spectrum-Steplist--interactive": !isReadOnly && !isDisabled,
             "spectrum-Steplist--small": size === "S",
             "spectrum-Steplist--medium": size === "M",
             "spectrum-Steplist--large": size === "L",
             "spectrum-Steplist--xlarge": size === "XL",
+            "spectrum-Steplist--emphasized": isEmphasized,
+            "spectrum-Steplist--horizontal": orientation === "horizontal",
             "spectrum-Steplist--vertical": orientation === "vertical"
         })
     }, /*#__PURE__*/ (0, $gZOFb$react).createElement((0, $739a883ac33f90d8$export$66136572efa4af6e).Provider, {
@@ -270,8 +291,6 @@ function $6bd0589d5d2f8b66$var$StepList(props, ref) {
     ].map((item)=>/*#__PURE__*/ (0, $gZOFb$react).createElement((0, $24c3cb1adfb0acc5$export$87c2a8a94eda1754), {
             key: item.key,
             isDisabled: isDisabled,
-            isEmphasized: isEmphasized,
-            isReadOnly: isReadOnly,
             item: item
         }))));
 }