@react-spectrum/steplist 3.0.0-nightly.4624 → 3.0.0-nightly.4637
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.
- package/dist/StepList.main.js +9 -9
- package/dist/StepList.mjs +9 -9
- package/dist/StepList.module.js +9 -9
- package/dist/StepListItem.main.js +21 -21
- package/dist/StepListItem.main.js.map +1 -1
- package/dist/StepListItem.mjs +21 -21
- package/dist/StepListItem.module.js +21 -21
- package/dist/index.main.js +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.module.js +1 -1
- package/package.json +14 -14
package/dist/StepList.main.js
CHANGED
|
@@ -37,7 +37,7 @@ $parcel$export(module.exports, "StepList", () => $a64198f1506264d6$export$ff2e09
|
|
|
37
37
|
|
|
38
38
|
|
|
39
39
|
function $a64198f1506264d6$var$StepList(props, ref) {
|
|
40
|
-
const { size: size =
|
|
40
|
+
const { size: size = 'M', orientation: orientation = 'horizontal' } = props;
|
|
41
41
|
props = (0, $i9j2Q$reactspectrumprovider.useProviderProps)(props);
|
|
42
42
|
const { isDisabled: isDisabled, isEmphasized: isEmphasized } = props;
|
|
43
43
|
let { styleProps: styleProps } = (0, $i9j2Q$reactspectrumutils.useStyleProps)(props);
|
|
@@ -48,14 +48,14 @@ function $a64198f1506264d6$var$StepList(props, ref) {
|
|
|
48
48
|
...listProps,
|
|
49
49
|
...styleProps,
|
|
50
50
|
ref: domRef,
|
|
51
|
-
className: (0, $i9j2Q$reactspectrumutils.classNames)((0, ($parcel$interopDefault($390add5aac6e4d73$exports))),
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
51
|
+
className: (0, $i9j2Q$reactspectrumutils.classNames)((0, ($parcel$interopDefault($390add5aac6e4d73$exports))), 'spectrum-Steplist', styleProps.className, {
|
|
52
|
+
'spectrum-Steplist--small': size === 'S',
|
|
53
|
+
'spectrum-Steplist--medium': size === 'M',
|
|
54
|
+
'spectrum-Steplist--large': size === 'L',
|
|
55
|
+
'spectrum-Steplist--xlarge': size === 'XL',
|
|
56
|
+
'spectrum-Steplist--emphasized': isEmphasized,
|
|
57
|
+
'spectrum-Steplist--horizontal': orientation === 'horizontal',
|
|
58
|
+
'spectrum-Steplist--vertical': orientation === 'vertical'
|
|
59
59
|
})
|
|
60
60
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($i9j2Q$react))).createElement((0, $b9b57d2de2195519$exports.StepListContext).Provider, {
|
|
61
61
|
value: state
|
package/dist/StepList.mjs
CHANGED
|
@@ -31,7 +31,7 @@ function $parcel$interopDefault(a) {
|
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
function $6bd0589d5d2f8b66$var$StepList(props, ref) {
|
|
34
|
-
const { size: size =
|
|
34
|
+
const { size: size = 'M', orientation: orientation = 'horizontal' } = props;
|
|
35
35
|
props = (0, $kkmdw$useProviderProps)(props);
|
|
36
36
|
const { isDisabled: isDisabled, isEmphasized: isEmphasized } = props;
|
|
37
37
|
let { styleProps: styleProps } = (0, $kkmdw$useStyleProps)(props);
|
|
@@ -42,14 +42,14 @@ function $6bd0589d5d2f8b66$var$StepList(props, ref) {
|
|
|
42
42
|
...listProps,
|
|
43
43
|
...styleProps,
|
|
44
44
|
ref: domRef,
|
|
45
|
-
className: (0, $kkmdw$classNames)((0, ($parcel$interopDefault($kkmdw$steplist_vars_cssmodulejs))),
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
45
|
+
className: (0, $kkmdw$classNames)((0, ($parcel$interopDefault($kkmdw$steplist_vars_cssmodulejs))), 'spectrum-Steplist', styleProps.className, {
|
|
46
|
+
'spectrum-Steplist--small': size === 'S',
|
|
47
|
+
'spectrum-Steplist--medium': size === 'M',
|
|
48
|
+
'spectrum-Steplist--large': size === 'L',
|
|
49
|
+
'spectrum-Steplist--xlarge': size === 'XL',
|
|
50
|
+
'spectrum-Steplist--emphasized': isEmphasized,
|
|
51
|
+
'spectrum-Steplist--horizontal': orientation === 'horizontal',
|
|
52
|
+
'spectrum-Steplist--vertical': orientation === 'vertical'
|
|
53
53
|
})
|
|
54
54
|
}, /*#__PURE__*/ (0, $kkmdw$react).createElement((0, $739a883ac33f90d8$export$66136572efa4af6e).Provider, {
|
|
55
55
|
value: state
|
package/dist/StepList.module.js
CHANGED
|
@@ -31,7 +31,7 @@ function $parcel$interopDefault(a) {
|
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
function $6bd0589d5d2f8b66$var$StepList(props, ref) {
|
|
34
|
-
const { size: size =
|
|
34
|
+
const { size: size = 'M', orientation: orientation = 'horizontal' } = props;
|
|
35
35
|
props = (0, $kkmdw$useProviderProps)(props);
|
|
36
36
|
const { isDisabled: isDisabled, isEmphasized: isEmphasized } = props;
|
|
37
37
|
let { styleProps: styleProps } = (0, $kkmdw$useStyleProps)(props);
|
|
@@ -42,14 +42,14 @@ function $6bd0589d5d2f8b66$var$StepList(props, ref) {
|
|
|
42
42
|
...listProps,
|
|
43
43
|
...styleProps,
|
|
44
44
|
ref: domRef,
|
|
45
|
-
className: (0, $kkmdw$classNames)((0, ($parcel$interopDefault($kkmdw$steplist_vars_cssmodulejs))),
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
45
|
+
className: (0, $kkmdw$classNames)((0, ($parcel$interopDefault($kkmdw$steplist_vars_cssmodulejs))), 'spectrum-Steplist', styleProps.className, {
|
|
46
|
+
'spectrum-Steplist--small': size === 'S',
|
|
47
|
+
'spectrum-Steplist--medium': size === 'M',
|
|
48
|
+
'spectrum-Steplist--large': size === 'L',
|
|
49
|
+
'spectrum-Steplist--xlarge': size === 'XL',
|
|
50
|
+
'spectrum-Steplist--emphasized': isEmphasized,
|
|
51
|
+
'spectrum-Steplist--horizontal': orientation === 'horizontal',
|
|
52
|
+
'spectrum-Steplist--vertical': orientation === 'vertical'
|
|
53
53
|
})
|
|
54
54
|
}, /*#__PURE__*/ (0, $kkmdw$react).createElement((0, $739a883ac33f90d8$export$66136572efa4af6e).Provider, {
|
|
55
55
|
value: state
|
|
@@ -61,40 +61,40 @@ function $d2e2cd0667356b5d$export$87c2a8a94eda1754(props) {
|
|
|
61
61
|
...props,
|
|
62
62
|
isDisabled: isItemDisabled || isSelected || props.isReadOnly
|
|
63
63
|
});
|
|
64
|
-
let stepStateText =
|
|
65
|
-
const stringFormatter = (0, $bJioC$reactariai18n.useLocalizedStringFormatter)((0,
|
|
64
|
+
let stepStateText = '';
|
|
65
|
+
const stringFormatter = (0, $bJioC$reactariai18n.useLocalizedStringFormatter)((0, $fed92386245d94a4$exports.default), '@react-spectrum/steplist');
|
|
66
66
|
const numberFormatter = (0, $bJioC$reactariai18n.useNumberFormatter)();
|
|
67
|
-
if (isSelected) stepStateText = stringFormatter.format(
|
|
68
|
-
else if (isCompleted) stepStateText = stringFormatter.format(
|
|
69
|
-
else stepStateText = stringFormatter.format(
|
|
67
|
+
if (isSelected) stepStateText = stringFormatter.format('current');
|
|
68
|
+
else if (isCompleted) stepStateText = stringFormatter.format('completed');
|
|
69
|
+
else stepStateText = stringFormatter.format('notCompleted');
|
|
70
70
|
let markerId = (0, $bJioC$reactariautils.useId)();
|
|
71
71
|
let labelId = (0, $bJioC$reactariautils.useId)();
|
|
72
72
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($bJioC$react))).createElement("li", {
|
|
73
|
-
className: (0, $bJioC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($390add5aac6e4d73$exports))),
|
|
73
|
+
className: (0, $bJioC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($390add5aac6e4d73$exports))), 'spectrum-Steplist-item')
|
|
74
74
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($bJioC$react))).createElement((0, $bJioC$reactariafocus.FocusRing), {
|
|
75
75
|
within: true,
|
|
76
|
-
focusRingClass: (0, $bJioC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($390add5aac6e4d73$exports))),
|
|
76
|
+
focusRingClass: (0, $bJioC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($390add5aac6e4d73$exports))), 'focus-ring')
|
|
77
77
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($bJioC$react))).createElement("a", {
|
|
78
78
|
...(0, $bJioC$reactariautils.mergeProps)(hoverProps, stepProps),
|
|
79
79
|
"aria-labelledby": `${markerId} ${labelId}`,
|
|
80
80
|
ref: ref,
|
|
81
|
-
className: (0, $bJioC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($390add5aac6e4d73$exports))),
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
81
|
+
className: (0, $bJioC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($390add5aac6e4d73$exports))), 'spectrum-Steplist-link', {
|
|
82
|
+
'is-selected': isSelected && !isItemDisabled,
|
|
83
|
+
'is-disabled': isItemDisabled,
|
|
84
|
+
'is-hovered': isHovered,
|
|
85
|
+
'is-completed': isCompleted,
|
|
86
|
+
'is-selectable': state.isSelectable(key) && !isSelected
|
|
87
87
|
})
|
|
88
88
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($bJioC$react))).createElement((0, $bJioC$reactariavisuallyhidden.VisuallyHidden), stepStateProps, stepStateText), /*#__PURE__*/ (0, ($parcel$interopDefault($bJioC$react))).createElement("div", {
|
|
89
89
|
id: labelId,
|
|
90
90
|
"aria-hidden": "true",
|
|
91
|
-
className: (0, $bJioC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($390add5aac6e4d73$exports))),
|
|
91
|
+
className: (0, $bJioC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($390add5aac6e4d73$exports))), 'spectrum-Steplist-label')
|
|
92
92
|
}, item.rendered), /*#__PURE__*/ (0, ($parcel$interopDefault($bJioC$react))).createElement("div", {
|
|
93
|
-
className: (0, $bJioC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($390add5aac6e4d73$exports))),
|
|
94
|
-
|
|
93
|
+
className: (0, $bJioC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($390add5aac6e4d73$exports))), 'spectrum-Steplist-segment', {
|
|
94
|
+
'is-completed': isCompleted
|
|
95
95
|
})
|
|
96
96
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($bJioC$react))).createElement("svg", {
|
|
97
|
-
className: (0, $bJioC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($390add5aac6e4d73$exports))),
|
|
97
|
+
className: (0, $bJioC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($390add5aac6e4d73$exports))), 'spectrum-Steplist-segmentLine'),
|
|
98
98
|
xmlns: "http://www.w3.org/2000/svg",
|
|
99
99
|
height: "100%",
|
|
100
100
|
viewBox: "0 0 2 8",
|
|
@@ -106,15 +106,15 @@ function $d2e2cd0667356b5d$export$87c2a8a94eda1754(props) {
|
|
|
106
106
|
y2: "8",
|
|
107
107
|
vectorEffect: "non-scaling-stroke"
|
|
108
108
|
})), /*#__PURE__*/ (0, ($parcel$interopDefault($bJioC$react))).createElement((0, ($parcel$interopDefault($bJioC$spectrumiconsuiChevronRightMedium))), {
|
|
109
|
-
UNSAFE_className: (0, $bJioC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($390add5aac6e4d73$exports))),
|
|
110
|
-
|
|
109
|
+
UNSAFE_className: (0, $bJioC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($390add5aac6e4d73$exports))), 'spectrum-Steplist-chevron', {
|
|
110
|
+
'is-reversed': direction === 'rtl'
|
|
111
111
|
})
|
|
112
112
|
})), /*#__PURE__*/ (0, ($parcel$interopDefault($bJioC$react))).createElement("div", {
|
|
113
113
|
"aria-hidden": "true",
|
|
114
|
-
className: (0, $bJioC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($390add5aac6e4d73$exports))),
|
|
114
|
+
className: (0, $bJioC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($390add5aac6e4d73$exports))), 'spectrum-Steplist-markerWrapper')
|
|
115
115
|
}, /*#__PURE__*/ (0, ($parcel$interopDefault($bJioC$react))).createElement("div", {
|
|
116
116
|
id: markerId,
|
|
117
|
-
className: (0, $bJioC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($390add5aac6e4d73$exports))),
|
|
117
|
+
className: (0, $bJioC$reactspectrumutils.classNames)((0, ($parcel$interopDefault($390add5aac6e4d73$exports))), 'spectrum-Steplist-marker')
|
|
118
118
|
}, numberFormatter.format((item.index || 0) + 1))))));
|
|
119
119
|
}
|
|
120
120
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;AAsBM,SAAS,0CAAgB,KAAmC;IACjE,IAAI,cACF,UAAU,QACV,IAAI,EACL,GAAG;IACJ,IAAI,OAAC,GAAG,EAAC,GAAG;IAEZ,IAAI,MAAM,CAAA,GAAA,mBAAK,EAAE;IACjB,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAC1B,IAAI,QAAQ,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,yCAAc;IACrC,MAAM,aAAa,MAAM,WAAW,KAAK;IACzC,MAAM,cAAc,MAAM,WAAW,CAAC;IACtC,MAAM,iBAAiB,cAAc,MAAM,YAAY,CAAC,GAAG,CAAC;IAC5D,IAAI,aAAC,SAAS,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,wCAAc,EAAE;QAAC,GAAG,KAAK;aAAE;IAAG,GAAG,OAAO;IAE1E,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;QAAC,GAAG,KAAK;QAAE,YAAY,kBAAkB,cAAc,MAAM,UAAU;IAAA;IAG9G,IAAI,gBAAgB;IACpB,MAAM,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/steplist/src/StepListItem.tsx"],"sourcesContent":["/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';\nimport {classNames} from '@react-spectrum/utils';\nimport {FocusRing} from '@react-aria/focus';\nimport intlMessages from '../intl';\nimport {mergeProps, useId} from '@react-aria/utils';\nimport {Node} from '@react-types/shared';\nimport React, {useContext, useRef} from 'react';\nimport {StepListContext} from './StepListContext';\nimport styles from '@adobe/spectrum-css-temp/components/steplist/vars.css';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter, useNumberFormatter} from '@react-aria/i18n';\nimport {useStepListItem} from '@react-aria/steplist';\nimport {VisuallyHidden} from '@react-aria/visually-hidden';\n\ninterface SpectrumStepListItemProps<T> {\n item: Node<T>,\n isDisabled?: boolean,\n isEmphasized?: boolean,\n isReadOnly?: boolean\n}\n\nexport function StepListItem<T>(props: SpectrumStepListItemProps<T>) {\n let {\n isDisabled,\n item\n } = props;\n let {key} = item;\n\n let ref = useRef(null);\n let {direction} = useLocale();\n let state = useContext(StepListContext)!;\n const isSelected = state.selectedKey === key;\n const isCompleted = state.isCompleted(key);\n const isItemDisabled = isDisabled || state.disabledKeys.has(key);\n let {stepProps, stepStateProps} = useStepListItem({...props, key}, state, ref);\n\n let {hoverProps, isHovered} = useHover({...props, isDisabled: isItemDisabled || isSelected || props.isReadOnly});\n\n\n let stepStateText = '';\n const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/steplist');\n const numberFormatter = useNumberFormatter();\n\n if (isSelected) {\n stepStateText = stringFormatter.format('current');\n } else if (isCompleted) {\n stepStateText = stringFormatter.format('completed');\n } else {\n stepStateText = stringFormatter.format('notCompleted');\n }\n\n let markerId = useId();\n let labelId = useId();\n\n return (\n <li\n className={\n classNames(\n styles,\n 'spectrum-Steplist-item'\n )\n }>\n <FocusRing within focusRingClass={classNames(styles, 'focus-ring')}>\n <a\n {...mergeProps(hoverProps, stepProps)}\n aria-labelledby={`${markerId} ${labelId}`}\n ref={ref}\n className={classNames(\n styles,\n 'spectrum-Steplist-link',\n {\n 'is-selected': isSelected && !isItemDisabled,\n 'is-disabled': isItemDisabled,\n 'is-hovered': isHovered,\n 'is-completed': isCompleted,\n 'is-selectable': state.isSelectable(key) && !isSelected\n }\n )}>\n <VisuallyHidden {...stepStateProps}>{stepStateText}</VisuallyHidden>\n <div id={labelId} aria-hidden=\"true\" className={classNames(styles, 'spectrum-Steplist-label')}>\n {item.rendered}\n </div>\n <div\n className={classNames(\n styles,\n 'spectrum-Steplist-segment', {\n 'is-completed': isCompleted\n })} >\n <svg className={classNames(styles, 'spectrum-Steplist-segmentLine')} xmlns=\"http://www.w3.org/2000/svg\" height=\"100%\" viewBox=\"0 0 2 8\" preserveAspectRatio=\"none\">\n <line x1=\"1\" y1=\"0\" x2=\"1\" y2=\"8\" vectorEffect=\"non-scaling-stroke\" />\n </svg>\n <ChevronRightMedium\n UNSAFE_className={classNames(styles, 'spectrum-Steplist-chevron', {\n 'is-reversed': direction === 'rtl'\n })} />\n </div>\n <div aria-hidden=\"true\" className={classNames(styles, 'spectrum-Steplist-markerWrapper')}>\n <div id={markerId} className={classNames(styles, 'spectrum-Steplist-marker')}>{numberFormatter.format((item.index || 0) + 1)}</div>\n </div>\n </a>\n </FocusRing>\n </li>\n );\n}\n"],"names":[],"version":3,"file":"StepListItem.main.js.map"}
|
package/dist/StepListItem.mjs
CHANGED
|
@@ -55,40 +55,40 @@ function $24c3cb1adfb0acc5$export$87c2a8a94eda1754(props) {
|
|
|
55
55
|
...props,
|
|
56
56
|
isDisabled: isItemDisabled || isSelected || props.isReadOnly
|
|
57
57
|
});
|
|
58
|
-
let stepStateText =
|
|
59
|
-
const stringFormatter = (0, $j1UBu$useLocalizedStringFormatter)((0, $62132693388ec24a$export$2e2bcd8739ae039),
|
|
58
|
+
let stepStateText = '';
|
|
59
|
+
const stringFormatter = (0, $j1UBu$useLocalizedStringFormatter)((0, $62132693388ec24a$export$2e2bcd8739ae039), '@react-spectrum/steplist');
|
|
60
60
|
const numberFormatter = (0, $j1UBu$useNumberFormatter)();
|
|
61
|
-
if (isSelected) stepStateText = stringFormatter.format(
|
|
62
|
-
else if (isCompleted) stepStateText = stringFormatter.format(
|
|
63
|
-
else stepStateText = stringFormatter.format(
|
|
61
|
+
if (isSelected) stepStateText = stringFormatter.format('current');
|
|
62
|
+
else if (isCompleted) stepStateText = stringFormatter.format('completed');
|
|
63
|
+
else stepStateText = stringFormatter.format('notCompleted');
|
|
64
64
|
let markerId = (0, $j1UBu$useId)();
|
|
65
65
|
let labelId = (0, $j1UBu$useId)();
|
|
66
66
|
return /*#__PURE__*/ (0, $j1UBu$react).createElement("li", {
|
|
67
|
-
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))),
|
|
67
|
+
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))), 'spectrum-Steplist-item')
|
|
68
68
|
}, /*#__PURE__*/ (0, $j1UBu$react).createElement((0, $j1UBu$FocusRing), {
|
|
69
69
|
within: true,
|
|
70
|
-
focusRingClass: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))),
|
|
70
|
+
focusRingClass: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))), 'focus-ring')
|
|
71
71
|
}, /*#__PURE__*/ (0, $j1UBu$react).createElement("a", {
|
|
72
72
|
...(0, $j1UBu$mergeProps)(hoverProps, stepProps),
|
|
73
73
|
"aria-labelledby": `${markerId} ${labelId}`,
|
|
74
74
|
ref: ref,
|
|
75
|
-
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))),
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
75
|
+
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))), 'spectrum-Steplist-link', {
|
|
76
|
+
'is-selected': isSelected && !isItemDisabled,
|
|
77
|
+
'is-disabled': isItemDisabled,
|
|
78
|
+
'is-hovered': isHovered,
|
|
79
|
+
'is-completed': isCompleted,
|
|
80
|
+
'is-selectable': state.isSelectable(key) && !isSelected
|
|
81
81
|
})
|
|
82
82
|
}, /*#__PURE__*/ (0, $j1UBu$react).createElement((0, $j1UBu$VisuallyHidden), stepStateProps, stepStateText), /*#__PURE__*/ (0, $j1UBu$react).createElement("div", {
|
|
83
83
|
id: labelId,
|
|
84
84
|
"aria-hidden": "true",
|
|
85
|
-
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))),
|
|
85
|
+
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))), 'spectrum-Steplist-label')
|
|
86
86
|
}, item.rendered), /*#__PURE__*/ (0, $j1UBu$react).createElement("div", {
|
|
87
|
-
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))),
|
|
88
|
-
|
|
87
|
+
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))), 'spectrum-Steplist-segment', {
|
|
88
|
+
'is-completed': isCompleted
|
|
89
89
|
})
|
|
90
90
|
}, /*#__PURE__*/ (0, $j1UBu$react).createElement("svg", {
|
|
91
|
-
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))),
|
|
91
|
+
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))), 'spectrum-Steplist-segmentLine'),
|
|
92
92
|
xmlns: "http://www.w3.org/2000/svg",
|
|
93
93
|
height: "100%",
|
|
94
94
|
viewBox: "0 0 2 8",
|
|
@@ -100,15 +100,15 @@ function $24c3cb1adfb0acc5$export$87c2a8a94eda1754(props) {
|
|
|
100
100
|
y2: "8",
|
|
101
101
|
vectorEffect: "non-scaling-stroke"
|
|
102
102
|
})), /*#__PURE__*/ (0, $j1UBu$react).createElement((0, $j1UBu$spectrumiconsuiChevronRightMedium), {
|
|
103
|
-
UNSAFE_className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))),
|
|
104
|
-
|
|
103
|
+
UNSAFE_className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))), 'spectrum-Steplist-chevron', {
|
|
104
|
+
'is-reversed': direction === 'rtl'
|
|
105
105
|
})
|
|
106
106
|
})), /*#__PURE__*/ (0, $j1UBu$react).createElement("div", {
|
|
107
107
|
"aria-hidden": "true",
|
|
108
|
-
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))),
|
|
108
|
+
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))), 'spectrum-Steplist-markerWrapper')
|
|
109
109
|
}, /*#__PURE__*/ (0, $j1UBu$react).createElement("div", {
|
|
110
110
|
id: markerId,
|
|
111
|
-
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))),
|
|
111
|
+
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))), 'spectrum-Steplist-marker')
|
|
112
112
|
}, numberFormatter.format((item.index || 0) + 1))))));
|
|
113
113
|
}
|
|
114
114
|
|
|
@@ -55,40 +55,40 @@ function $24c3cb1adfb0acc5$export$87c2a8a94eda1754(props) {
|
|
|
55
55
|
...props,
|
|
56
56
|
isDisabled: isItemDisabled || isSelected || props.isReadOnly
|
|
57
57
|
});
|
|
58
|
-
let stepStateText =
|
|
59
|
-
const stringFormatter = (0, $j1UBu$useLocalizedStringFormatter)((0, $62132693388ec24a$export$2e2bcd8739ae039),
|
|
58
|
+
let stepStateText = '';
|
|
59
|
+
const stringFormatter = (0, $j1UBu$useLocalizedStringFormatter)((0, $62132693388ec24a$export$2e2bcd8739ae039), '@react-spectrum/steplist');
|
|
60
60
|
const numberFormatter = (0, $j1UBu$useNumberFormatter)();
|
|
61
|
-
if (isSelected) stepStateText = stringFormatter.format(
|
|
62
|
-
else if (isCompleted) stepStateText = stringFormatter.format(
|
|
63
|
-
else stepStateText = stringFormatter.format(
|
|
61
|
+
if (isSelected) stepStateText = stringFormatter.format('current');
|
|
62
|
+
else if (isCompleted) stepStateText = stringFormatter.format('completed');
|
|
63
|
+
else stepStateText = stringFormatter.format('notCompleted');
|
|
64
64
|
let markerId = (0, $j1UBu$useId)();
|
|
65
65
|
let labelId = (0, $j1UBu$useId)();
|
|
66
66
|
return /*#__PURE__*/ (0, $j1UBu$react).createElement("li", {
|
|
67
|
-
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))),
|
|
67
|
+
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))), 'spectrum-Steplist-item')
|
|
68
68
|
}, /*#__PURE__*/ (0, $j1UBu$react).createElement((0, $j1UBu$FocusRing), {
|
|
69
69
|
within: true,
|
|
70
|
-
focusRingClass: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))),
|
|
70
|
+
focusRingClass: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))), 'focus-ring')
|
|
71
71
|
}, /*#__PURE__*/ (0, $j1UBu$react).createElement("a", {
|
|
72
72
|
...(0, $j1UBu$mergeProps)(hoverProps, stepProps),
|
|
73
73
|
"aria-labelledby": `${markerId} ${labelId}`,
|
|
74
74
|
ref: ref,
|
|
75
|
-
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))),
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
75
|
+
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))), 'spectrum-Steplist-link', {
|
|
76
|
+
'is-selected': isSelected && !isItemDisabled,
|
|
77
|
+
'is-disabled': isItemDisabled,
|
|
78
|
+
'is-hovered': isHovered,
|
|
79
|
+
'is-completed': isCompleted,
|
|
80
|
+
'is-selectable': state.isSelectable(key) && !isSelected
|
|
81
81
|
})
|
|
82
82
|
}, /*#__PURE__*/ (0, $j1UBu$react).createElement((0, $j1UBu$VisuallyHidden), stepStateProps, stepStateText), /*#__PURE__*/ (0, $j1UBu$react).createElement("div", {
|
|
83
83
|
id: labelId,
|
|
84
84
|
"aria-hidden": "true",
|
|
85
|
-
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))),
|
|
85
|
+
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))), 'spectrum-Steplist-label')
|
|
86
86
|
}, item.rendered), /*#__PURE__*/ (0, $j1UBu$react).createElement("div", {
|
|
87
|
-
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))),
|
|
88
|
-
|
|
87
|
+
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))), 'spectrum-Steplist-segment', {
|
|
88
|
+
'is-completed': isCompleted
|
|
89
89
|
})
|
|
90
90
|
}, /*#__PURE__*/ (0, $j1UBu$react).createElement("svg", {
|
|
91
|
-
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))),
|
|
91
|
+
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))), 'spectrum-Steplist-segmentLine'),
|
|
92
92
|
xmlns: "http://www.w3.org/2000/svg",
|
|
93
93
|
height: "100%",
|
|
94
94
|
viewBox: "0 0 2 8",
|
|
@@ -100,15 +100,15 @@ function $24c3cb1adfb0acc5$export$87c2a8a94eda1754(props) {
|
|
|
100
100
|
y2: "8",
|
|
101
101
|
vectorEffect: "non-scaling-stroke"
|
|
102
102
|
})), /*#__PURE__*/ (0, $j1UBu$react).createElement((0, $j1UBu$spectrumiconsuiChevronRightMedium), {
|
|
103
|
-
UNSAFE_className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))),
|
|
104
|
-
|
|
103
|
+
UNSAFE_className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))), 'spectrum-Steplist-chevron', {
|
|
104
|
+
'is-reversed': direction === 'rtl'
|
|
105
105
|
})
|
|
106
106
|
})), /*#__PURE__*/ (0, $j1UBu$react).createElement("div", {
|
|
107
107
|
"aria-hidden": "true",
|
|
108
|
-
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))),
|
|
108
|
+
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))), 'spectrum-Steplist-markerWrapper')
|
|
109
109
|
}, /*#__PURE__*/ (0, $j1UBu$react).createElement("div", {
|
|
110
110
|
id: markerId,
|
|
111
|
-
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))),
|
|
111
|
+
className: (0, $j1UBu$classNames)((0, ($parcel$interopDefault($j1UBu$steplist_vars_cssmodulejs))), 'spectrum-Steplist-marker')
|
|
112
112
|
}, numberFormatter.format((item.index || 0) + 1))))));
|
|
113
113
|
}
|
|
114
114
|
|
package/dist/index.main.js
CHANGED
|
@@ -12,7 +12,7 @@ function $parcel$export(e, n, v, s) {
|
|
|
12
12
|
$parcel$export(module.exports, "default", () => $fed92386245d94a4$export$2e2bcd8739ae039);
|
|
13
13
|
|
|
14
14
|
var $fed92386245d94a4$export$2e2bcd8739ae039 = {
|
|
15
|
-
|
|
15
|
+
'en-US': (0, ($parcel$interopDefault($17d0d848808abe0b$exports)))
|
|
16
16
|
};
|
|
17
17
|
|
|
18
18
|
|
package/dist/index.mjs
CHANGED
package/dist/index.module.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/steplist",
|
|
3
|
-
"version": "3.0.0-nightly.
|
|
3
|
+
"version": "3.0.0-nightly.4637+c57671e7f",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -36,21 +36,21 @@
|
|
|
36
36
|
"url": "https://github.com/adobe/react-spectrum"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@react-aria/focus": "3.0.0-nightly.
|
|
40
|
-
"@react-aria/i18n": "3.0.0-nightly.
|
|
41
|
-
"@react-aria/interactions": "3.0.0-nightly.
|
|
42
|
-
"@react-aria/steplist": "3.0.0-nightly.
|
|
43
|
-
"@react-aria/utils": "3.0.0-nightly.
|
|
44
|
-
"@react-aria/visually-hidden": "3.0.0-nightly.
|
|
45
|
-
"@react-spectrum/utils": "3.0.0-nightly.
|
|
46
|
-
"@react-stately/collections": "3.0.0-nightly.
|
|
47
|
-
"@react-stately/steplist": "3.0.0-nightly.
|
|
48
|
-
"@react-types/shared": "3.0.0-nightly.
|
|
49
|
-
"@spectrum-icons/ui": "3.0.0-nightly.
|
|
39
|
+
"@react-aria/focus": "3.0.0-nightly.2925+c57671e7f",
|
|
40
|
+
"@react-aria/i18n": "3.0.0-nightly.2925+c57671e7f",
|
|
41
|
+
"@react-aria/interactions": "3.0.0-nightly.2925+c57671e7f",
|
|
42
|
+
"@react-aria/steplist": "3.0.0-nightly.4637+c57671e7f",
|
|
43
|
+
"@react-aria/utils": "3.0.0-nightly.2925+c57671e7f",
|
|
44
|
+
"@react-aria/visually-hidden": "3.0.0-nightly.2925+c57671e7f",
|
|
45
|
+
"@react-spectrum/utils": "3.0.0-nightly.2925+c57671e7f",
|
|
46
|
+
"@react-stately/collections": "3.0.0-nightly.2925+c57671e7f",
|
|
47
|
+
"@react-stately/steplist": "3.0.0-nightly.4637+c57671e7f",
|
|
48
|
+
"@react-types/shared": "3.0.0-nightly.2925+c57671e7f",
|
|
49
|
+
"@spectrum-icons/ui": "3.0.0-nightly.2925+c57671e7f",
|
|
50
50
|
"@swc/helpers": "^0.5.0"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"@adobe/spectrum-css-temp": "3.0.0-nightly.
|
|
53
|
+
"@adobe/spectrum-css-temp": "3.0.0-nightly.2925+c57671e7f"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
56
|
"@react-spectrum/provider": "^3.0.0",
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"publishConfig": {
|
|
61
61
|
"access": "public"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "c57671e7f57c4ffe59640a174f084cf660968913"
|
|
64
64
|
}
|