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

package/src/StepListItem.tsx

@@ -13,7 +13,7 @@ import ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';
 import {classNames} from '@react-spectrum/utils';
 import {FocusRing} from '@react-aria/focus';
 import intlMessages from '../intl';
-import {mergeProps} from '@react-aria/utils';
+import {mergeProps, useId} from '@react-aria/utils';
 import {Node} from '@react-types/shared';
 import React, {useContext, useRef} from 'react';
 import {StepListContext} from './StepListContext';
@@ -33,23 +33,23 @@ interface SpectrumStepListItemProps<T> {
 export function StepListItem<T>(props: SpectrumStepListItemProps<T>) {
   let {
     isDisabled,
-    isEmphasized,
     item
   } = props;
   let {key} = item;
 
-  let ref = useRef();
+  let ref = useRef(null);
   let {direction} = useLocale();
-  let state = useContext(StepListContext);
+  let state = useContext(StepListContext)!;
+  const isSelected = state.selectedKey === key;
   const isCompleted = state.isCompleted(key);
   const isItemDisabled = isDisabled || state.disabledKeys.has(key);
   let {stepProps, stepStateProps} = useStepListItem({...props, key}, state, ref);
 
-  let {hoverProps, isHovered} = useHover(props);
-  const isSelected = state.selectedKey === key;
+  let {hoverProps, isHovered} = useHover({...props, isDisabled: isItemDisabled || isSelected || props.isReadOnly});
+
 
   let stepStateText = '';
-  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/steplist');
   const numberFormatter = useNumberFormatter();
 
   if (isSelected) {
@@ -60,9 +60,11 @@ export function StepListItem<T>(props: SpectrumStepListItemProps<T>) {
     stepStateText = stringFormatter.format('notCompleted');
   }
 
+  let markerId = useId();
+  let labelId = useId();
+
   return (
     <li
-      key={key}
       className={
         classNames(
           styles,
@@ -71,9 +73,9 @@ export function StepListItem<T>(props: SpectrumStepListItemProps<T>) {
       }>
       <FocusRing within focusRingClass={classNames(styles, 'focus-ring')}>
         <a
-          aria-labelledby={`step-marker-${key} step-label-${key}`}
-          ref={ref}
           {...mergeProps(hoverProps, stepProps)}
+          aria-labelledby={`${markerId} ${labelId}`}
+          ref={ref}
           className={classNames(
             styles,
             'spectrum-Steplist-link',
@@ -81,28 +83,33 @@ export function StepListItem<T>(props: SpectrumStepListItemProps<T>) {
               '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
             }
           )}>
           <VisuallyHidden {...stepStateProps}>{stepStateText}</VisuallyHidden>
-          <span id={`step-marker-${key}`} aria-hidden="true" className={classNames(styles, 'spectrum-Steplist-marker')}>{numberFormatter.format((item.index || 0) + 1)}</span>
-          <span id={`step-label-${key}`} aria-hidden="true" className={classNames(styles, 'spectrum-Steplist-label')}>
+          <div id={labelId} aria-hidden="true" className={classNames(styles, 'spectrum-Steplist-label')}>
             {item.rendered}
-          </span>
+          </div>
+          <div
+            className={classNames(
+              styles,
+              'spectrum-Steplist-segment', {
+                'is-completed': isCompleted
+              })} >
+            <svg className={classNames(styles, 'spectrum-Steplist-segmentLine')} xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 2 8" preserveAspectRatio="none">
+              <line x1="1" y1="0" x2="1" y2="8" vectorEffect="non-scaling-stroke" />
+            </svg>
+            <ChevronRightMedium
+              UNSAFE_className={classNames(styles, 'spectrum-Steplist-chevron', {
+                'is-reversed': direction === 'rtl'
+              })} />
+          </div>
+          <div aria-hidden="true" className={classNames(styles, 'spectrum-Steplist-markerWrapper')}>
+            <div id={markerId}  className={classNames(styles, 'spectrum-Steplist-marker')}>{numberFormatter.format((item.index || 0) + 1)}</div>
+          </div>
         </a>
       </FocusRing>
-      <span
-        className={classNames(
-          styles,
-          'spectrum-Steplist-segment', {
-            'is-completed': isCompleted
-          })} >
-        <ChevronRightMedium
-          UNSAFE_className={classNames(styles, 'spectrum-Steplist-chevron', {
-            'is-reversed': direction === 'rtl'
-          })} />
-      </span>
     </li>
   );
 }

package/dist/main.css

@@ -1 +0,0 @@
-.Y9ExmG_i18nFontFamily{font-synthesis:weight;font-family:adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Trebuchet MS,Lucida Grande,sans-serif}.Y9ExmG_i18nFontFamily:lang(ar){font-family:myriad-arabic,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Trebuchet MS,Lucida Grande,sans-serif}.Y9ExmG_i18nFontFamily:lang(he){font-family:myriad-hebrew,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Trebuchet MS,Lucida Grande,sans-serif}.Y9ExmG_i18nFontFamily:lang(zh){font-family:adobe-clean-han-traditional,source-han-traditional,MingLiu,Heiti TC Light,sans-serif}.Y9ExmG_i18nFontFamily:lang(zh-Hans){font-family:adobe-clean-han-simplified-c,source-han-simplified-c,SimSun,Heiti SC Light,sans-serif}.Y9ExmG_i18nFontFamily:lang(zh-Hant){font-family:adobe-clean-han-traditional,source-han-traditional,MingLiu,Microsoft JhengHei UI,Microsoft JhengHei,Heiti TC Light,sans-serif}.Y9ExmG_i18nFontFamily:lang(zh-SG),.Y9ExmG_i18nFontFamily:lang(zh-CN){font-family:adobe-clean-han-simplified-c,source-han-simplified-c,SimSun,Heiti SC Light,sans-serif}.Y9ExmG_i18nFontFamily:lang(ko){font-family:adobe-clean-han-korean,source-han-korean,Malgun Gothic,Apple Gothic,sans-serif}.Y9ExmG_i18nFontFamily:lang(ja){font-family:adobe-clean-han-japanese,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,Osaka,YuGothic,Yu Gothic,メイリオ,Meiryo,ＭＳ Ｐゴシック,MS PGothic,sans-serif}.Y9ExmG_spectrum-FocusRing-ring{--spectrum-focus-ring-border-radius:var(--spectrum-textfield-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-focus-ring-gap:var(--spectrum-alias-input-focusring-gap);--spectrum-focus-ring-size:var(--spectrum-alias-input-focusring-size);--spectrum-focus-ring-border-size:0px;--spectrum-focus-ring-color:var(--spectrum-high-contrast-focus-ring-color,var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)))}.Y9ExmG_spectrum-FocusRing-ring:after{border-radius:calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));content:"";margin:calc(-1*var(--spectrum-focus-ring-border-size));pointer-events:none;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s)ease-out,margin var(--spectrum-global-animation-duration-100,.13s)ease-out;display:block;position:absolute;top:0;bottom:0;left:0;right:0}.Y9ExmG_spectrum-FocusRing.Y9ExmG_focus-ring:after{margin:calc(var(--spectrum-focus-ring-gap)*-1 - var(--spectrum-focus-ring-border-size));box-shadow:0 0 0 var(--spectrum-focus-ring-size)var(--spectrum-focus-ring-color)}.Y9ExmG_spectrum-FocusRing--quiet:after{border-radius:0}.Y9ExmG_spectrum-FocusRing--quiet.Y9ExmG_focus-ring:after{margin:0 0 calc(var(--spectrum-focus-ring-gap)*-1 - var(--spectrum-focus-ring-border-size))0;box-shadow:0 var(--spectrum-focus-ring-size)0 var(--spectrum-focus-ring-color)}.Y9ExmG_spectrum-Steplist{flex-wrap:nowrap;margin:0;padding:0;display:flex}.Y9ExmG_spectrum-Steplist-item{grid-template-rows:auto;grid-template-areas:"Y9ExmG_link Y9ExmG_chevron";place-items:start center;min-width:0;display:grid}.Y9ExmG_spectrum-Steplist-item.Y9ExmG_focus-ring{outline-offset:2px;outline:2px}.Y9ExmG_spectrum-Steplist-item .Y9ExmG_spectrum-Steplist-segment{align-items:center;height:100%;display:inline-flex}.Y9ExmG_spectrum-Steplist-item .Y9ExmG_spectrum-Steplist-chevron.Y9ExmG_is-reversed{transform:scale(-1)}.Y9ExmG_spectrum-Steplist-link{cursor:default;outline:none;grid-area:Y9ExmG_link;grid-template-areas:"Y9ExmG_number Y9ExmG_label";place-items:center;text-decoration:none;display:grid}.Y9ExmG_spectrum-Steplist-link .Y9ExmG_spectrum-Steplist-marker{box-sizing:border-box;color:#0000;border-style:solid;border-width:2px;border-radius:50%;flex-direction:column;grid-area:Y9ExmG_number;justify-content:center;align-items:center;padding-bottom:1px;font-weight:700;display:flex}.Y9ExmG_spectrum-Steplist-link .Y9ExmG_spectrum-Steplist-label{grid-area:Y9ExmG_label}.Y9ExmG_spectrum-Steplist-link.Y9ExmG_is-completed .Y9ExmG_spectrum-Steplist-marker,.Y9ExmG_spectrum-Steplist-link.Y9ExmG_is-selected .Y9ExmG_spectrum-Steplist-marker,.Y9ExmG_spectrum-Steplist-link.Y9ExmG_is-hovered.Y9ExmG_is-completed .Y9ExmG_spectrum-Steplist-marker{border:none}.Y9ExmG_spectrum-Steplist--small{font-size:var(--spectrum-global-dimension-font-size-75);gap:10px}.Y9ExmG_spectrum-Steplist--small .Y9ExmG_spectrum-Steplist-item{grid-template-columns:auto;gap:10px}.Y9ExmG_spectrum-Steplist--small .Y9ExmG_spectrum-Steplist-link{gap:10px}.Y9ExmG_spectrum-Steplist--small .Y9ExmG_spectrum-Steplist-link .Y9ExmG_spectrum-Steplist-marker{width:8px;height:8px;font-size:0}.Y9ExmG_spectrum-Steplist--small .Y9ExmG_spectrum-Steplist-chevron{transform:scale(.75)}.Y9ExmG_spectrum-Steplist--medium{font-size:var(--spectrum-global-dimension-font-size-100);gap:16px}.Y9ExmG_spectrum-Steplist--medium .Y9ExmG_spectrum-Steplist-item{grid-template-columns:auto;gap:16px}.Y9ExmG_spectrum-Steplist--medium .Y9ExmG_spectrum-Steplist-item .Y9ExmG_spectrum-Steplist-link .Y9ExmG_spectrum-Steplist-marker:not(.Y9ExmG_is-completed),.Y9ExmG_spectrum-Steplist--medium .Y9ExmG_spectrum-Steplist-item .Y9ExmG_spectrum-Steplist-link.Y9ExmG_is-disabled .Y9ExmG_spectrum-Steplist-marker:not(.Y9ExmG_is-completed){color:#0000}.Y9ExmG_spectrum-Steplist--medium .Y9ExmG_spectrum-Steplist-link{gap:12px}.Y9ExmG_spectrum-Steplist--medium .Y9ExmG_spectrum-Steplist-link .Y9ExmG_spectrum-Steplist-marker{font-size:var(--spectrum-global-dimension-font-size-75);width:16px;height:16px}.Y9ExmG_spectrum-Steplist--large{font-size:var(--spectrum-global-dimension-font-size-200);gap:20px}.Y9ExmG_spectrum-Steplist--large .Y9ExmG_spectrum-Steplist-item{grid-template-columns:auto;gap:20px}.Y9ExmG_spectrum-Steplist--large .Y9ExmG_spectrum-Steplist-link{gap:14px}.Y9ExmG_spectrum-Steplist--large .Y9ExmG_spectrum-Steplist-link .Y9ExmG_spectrum-Steplist-marker{font-size:var(--spectrum-global-dimension-font-size-100);width:24px;height:24px}.Y9ExmG_spectrum-Steplist--large .Y9ExmG_spectrum-Steplist-chevron{transform:scale(1.25)}.Y9ExmG_spectrum-Steplist--xlarge{font-size:var(--spectrum-global-dimension-font-size-300);gap:24px}.Y9ExmG_spectrum-Steplist--xlarge .Y9ExmG_spectrum-Steplist-item{grid-template-columns:auto;gap:24px}.Y9ExmG_spectrum-Steplist--xlarge .Y9ExmG_spectrum-Steplist-link{gap:16px}.Y9ExmG_spectrum-Steplist--xlarge .Y9ExmG_spectrum-Steplist-link .Y9ExmG_spectrum-Steplist-marker{font-size:var(--spectrum-global-dimension-font-size-200);width:32px;height:32px}.Y9ExmG_spectrum-Steplist--xlarge .Y9ExmG_spectrum-Steplist-chevron{transform:scale(1.5)}.Y9ExmG_spectrum-Steplist-item:last-child{grid-template-columns:auto;grid-template-areas:"Y9ExmG_link"}.Y9ExmG_spectrum-Steplist-item:last-child .Y9ExmG_spectrum-Steplist-segment{display:none}.Y9ExmG_spectrum-Steplist--vertical{flex-direction:column;gap:2px}.Y9ExmG_spectrum-Steplist--vertical .Y9ExmG_spectrum-Steplist-item{grid-template-areas:"Y9ExmG_link Y9ExmG_link""Y9ExmG_line.";justify-items:start;gap:2px}.Y9ExmG_spectrum-Steplist--vertical .Y9ExmG_spectrum-Steplist-item .Y9ExmG_spectrum-Steplist-segment.Y9ExmG_is-completed{border-color:var(--spectrum-global-color-gray-400);border-left-style:solid}.Y9ExmG_spectrum-Steplist--vertical.Y9ExmG_spectrum-Steplist--small .Y9ExmG_spectrum-Steplist-item{grid-template-columns:8px auto}.Y9ExmG_spectrum-Steplist--vertical.Y9ExmG_spectrum-Steplist--small .Y9ExmG_spectrum-Steplist-item .Y9ExmG_spectrum-Steplist-link{line-height:8px}.Y9ExmG_spectrum-Steplist--vertical.Y9ExmG_spectrum-Steplist--medium .Y9ExmG_spectrum-Steplist-item{grid-template-columns:16px auto}.Y9ExmG_spectrum-Steplist--vertical.Y9ExmG_spectrum-Steplist--medium .Y9ExmG_spectrum-Steplist-item .Y9ExmG_spectrum-Steplist-link{line-height:16px}.Y9ExmG_spectrum-Steplist--vertical.Y9ExmG_spectrum-Steplist--large .Y9ExmG_spectrum-Steplist-item{grid-template-columns:24px auto}.Y9ExmG_spectrum-Steplist--vertical.Y9ExmG_spectrum-Steplist--xlarge .Y9ExmG_spectrum-Steplist-item{grid-template-columns:32px auto}.Y9ExmG_spectrum-Steplist--vertical .Y9ExmG_spectrum-Steplist-chevron{display:none}.Y9ExmG_spectrum-Steplist--vertical .Y9ExmG_spectrum-Steplist-segment{box-sizing:content-box;border-color:var(--spectrum-global-color-gray-400);border-width:0 0 0 2px;border-left-style:dashed;grid-area:Y9ExmG_line;justify-self:center;width:0;height:32px;display:block}.Y9ExmG_spectrum-Steplist .Y9ExmG_spectrum-Steplist-label{color:var(--spectrum-global-color-gray-600)}.Y9ExmG_spectrum-Steplist .Y9ExmG_spectrum-Steplist-marker{border-color:var(--spectrum-global-color-gray-400);color:var(--spectrum-global-color-gray-600)}.Y9ExmG_spectrum-Steplist .Y9ExmG_spectrum-Steplist-segment .Y9ExmG_spectrum-Steplist-chevron{color:var(--spectrum-global-color-gray-400)}.Y9ExmG_spectrum-Steplist .Y9ExmG_spectrum-Steplist-item .Y9ExmG_spectrum-Steplist-link.Y9ExmG_is-completed .Y9ExmG_spectrum-Steplist-marker{background-color:var(--spectrum-global-color-gray-600)}.Y9ExmG_spectrum-Steplist .Y9ExmG_spectrum-Steplist-item .Y9ExmG_spectrum-Steplist-link.Y9ExmG_is-selected .Y9ExmG_spectrum-Steplist-label{color:var(--spectrum-global-color-gray-800)}.Y9ExmG_spectrum-Steplist .Y9ExmG_spectrum-Steplist-item .Y9ExmG_spectrum-Steplist-link.Y9ExmG_is-selected .Y9ExmG_spectrum-Steplist-marker{background-color:var(--spectrum-global-color-gray-800)}.Y9ExmG_spectrum-Steplist .Y9ExmG_spectrum-Steplist-item .Y9ExmG_spectrum-Steplist-link.Y9ExmG_is-completed .Y9ExmG_spectrum-Steplist-marker,.Y9ExmG_spectrum-Steplist .Y9ExmG_spectrum-Steplist-item .Y9ExmG_spectrum-Steplist-link.Y9ExmG_is-selected .Y9ExmG_spectrum-Steplist-marker{color:var(--spectrum-global-color-gray-50)}.Y9ExmG_spectrum-Steplist .Y9ExmG_spectrum-Steplist-item .Y9ExmG_spectrum-Steplist-link.Y9ExmG_is-emphasized .Y9ExmG_spectrum-Steplist-label{color:var(--spectrum-global-color-blue-400)}.Y9ExmG_spectrum-Steplist .Y9ExmG_spectrum-Steplist-item .Y9ExmG_spectrum-Steplist-link.Y9ExmG_is-emphasized .Y9ExmG_spectrum-Steplist-marker{background-color:var(--spectrum-global-color-blue-400)}.Y9ExmG_spectrum-Steplist .Y9ExmG_spectrum-Steplist-item .Y9ExmG_spectrum-Steplist-link.Y9ExmG_focus-ring{outline:none}.Y9ExmG_spectrum-Steplist .Y9ExmG_spectrum-Steplist-item .Y9ExmG_spectrum-Steplist-link.Y9ExmG_focus-ring .Y9ExmG_spectrum-Steplist-marker{outline:solid 2px var(--spectrum-global-color-blue-400);outline-offset:2px;z-index:999}.Y9ExmG_spectrum-Steplist .Y9ExmG_spectrum-Steplist-item .Y9ExmG_spectrum-Steplist-link.Y9ExmG_is-disabled .Y9ExmG_spectrum-Steplist-label{color:var(--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500))}.Y9ExmG_spectrum-Steplist .Y9ExmG_spectrum-Steplist-item .Y9ExmG_spectrum-Steplist-link.Y9ExmG_is-disabled .Y9ExmG_spectrum-Steplist-marker{border-color:var(--spectrum-global-color-gray-400);color:var(--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500))}.Y9ExmG_spectrum-Steplist .Y9ExmG_spectrum-Steplist-item .Y9ExmG_spectrum-Steplist-link.Y9ExmG_is-disabled.Y9ExmG_is-completed .Y9ExmG_spectrum-Steplist-marker{background-color:var(--spectrum-global-color-gray-300);color:var(--spectrum-global-color-gray-50)}.Y9ExmG_spectrum-Steplist.Y9ExmG_spectrum-Steplist--interactive .Y9ExmG_spectrum-Steplist-link.Y9ExmG_is-hovered.Y9ExmG_is-completed:not(.Y9ExmG_is-disabled) .Y9ExmG_spectrum-Steplist-label{color:var(--spectrum-global-color-gray-800)}.Y9ExmG_spectrum-Steplist.Y9ExmG_spectrum-Steplist--interactive .Y9ExmG_spectrum-Steplist-link.Y9ExmG_is-hovered.Y9ExmG_is-completed:not(.Y9ExmG_is-disabled) .Y9ExmG_spectrum-Steplist-marker{background-color:var(--spectrum-global-color-gray-800);color:var(--spectrum-global-color-gray-50)}.Y9ExmG_spectrum-Steplist.Y9ExmG_spectrum-Steplist--interactive .Y9ExmG_spectrum-Steplist-link:not(.Y9ExmG_is-selected):not([aria-disabled]){cursor:pointer}.Y9ExmG_spectrum-Steplist.Y9ExmG_spectrum-Steplist--interactive .Y9ExmG_spectrum-Steplist-link.Y9ExmG_is-emphasized.Y9ExmG_is-completed .Y9ExmG_spectrum-Steplist-label{color:var(--spectrum-global-color-blue-400)}.Y9ExmG_spectrum-Steplist.Y9ExmG_spectrum-Steplist--interactive .Y9ExmG_spectrum-Steplist-link.Y9ExmG_is-emphasized.Y9ExmG_is-completed .Y9ExmG_spectrum-Steplist-marker{background-color:var(--spectrum-global-color-blue-400)}