@purpur/library 9.7.2 → 9.7.4
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/library.cjs.js +1 -1
- package/dist/library.es.js +1 -1
- package/dist/purpur.css +1 -1
- package/dist/stepper-5qMo_shq.js +2 -0
- package/dist/{stepper-DpauItjx.js.map → stepper-5qMo_shq.js.map} +1 -1
- package/dist/{stepper-BDsSa6yr.mjs → stepper-e0qicwqd.mjs} +152 -152
- package/dist/{stepper-BDsSa6yr.mjs.map → stepper-e0qicwqd.mjs.map} +1 -1
- package/dist/stepper.cjs.js +1 -1
- package/dist/stepper.es.js +1 -1
- package/package.json +32 -28
- package/.lintstagedrc.mts +0 -10
- package/@types/scss.d.ts +0 -4
- package/CHANGELOG.json +0 -3996
- package/CHANGELOG.md +0 -2084
- package/dist/stepper-DpauItjx.js +0 -2
- package/eslint.config.mjs +0 -2
- package/scripts/generate.mts +0 -269
- package/src/accordion.ts +0 -6
- package/src/alert-badge.ts +0 -6
- package/src/aliases.ts +0 -302
- package/src/autocomplete.ts +0 -6
- package/src/avatar.ts +0 -6
- package/src/badge.ts +0 -6
- package/src/breadcrumbs.ts +0 -6
- package/src/button.ts +0 -6
- package/src/calendar.ts +0 -6
- package/src/card.ts +0 -6
- package/src/carousel.ts +0 -6
- package/src/chat-field.ts +0 -6
- package/src/checkbox.ts +0 -6
- package/src/chip-group.ts +0 -6
- package/src/color-dot.ts +0 -6
- package/src/comparison-table.ts +0 -6
- package/src/container.ts +0 -6
- package/src/content-block.ts +0 -6
- package/src/countdown.ts +0 -6
- package/src/counter-badge.ts +0 -6
- package/src/cta-link.ts +0 -6
- package/src/date-field.ts +0 -6
- package/src/date-picker.ts +0 -6
- package/src/date-range-field.ts +0 -6
- package/src/dismissable-chip-group.ts +0 -6
- package/src/drawer.ts +0 -6
- package/src/dropdown.ts +0 -6
- package/src/entries.js +0 -73
- package/src/field-error-text.ts +0 -6
- package/src/field-helper-text.ts +0 -6
- package/src/footer.ts +0 -6
- package/src/grid.ts +0 -6
- package/src/heading.ts +0 -6
- package/src/hero-banner.ts +0 -6
- package/src/label.ts +0 -6
- package/src/library.ts +0 -77
- package/src/link.ts +0 -6
- package/src/listbox.ts +0 -6
- package/src/loading.ts +0 -6
- package/src/message.ts +0 -6
- package/src/modal.ts +0 -6
- package/src/notification-banner.ts +0 -6
- package/src/notification.ts +0 -6
- package/src/pagination.ts +0 -6
- package/src/paragraph.ts +0 -6
- package/src/password-field.ts +0 -7
- package/src/popover.ts +0 -6
- package/src/product-card.ts +0 -6
- package/src/promotion-card.ts +0 -6
- package/src/purpur.css +0 -1
- package/src/quantity-selector.ts +0 -6
- package/src/radio-button-group.ts +0 -6
- package/src/radio-card-group.ts +0 -6
- package/src/rich-text.ts +0 -6
- package/src/search-field.ts +0 -6
- package/src/select.ts +0 -6
- package/src/skeleton.ts +0 -6
- package/src/slider.ts +0 -6
- package/src/spacer.ts +0 -6
- package/src/spinner.ts +0 -6
- package/src/stepper.ts +0 -6
- package/src/table.ts +0 -6
- package/src/tabs.ts +0 -6
- package/src/text-area.ts +0 -6
- package/src/text-field.ts +0 -6
- package/src/text-spacing.ts +0 -6
- package/src/theme.ts +0 -6
- package/src/toggle.ts +0 -6
- package/src/tokens.ts +0 -6
- package/src/tooltip.ts +0 -6
- package/src/visually-hidden.ts +0 -6
- package/vite-plugin-generate-components-metadata.js +0 -62
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const t=require("react/jsx-runtime"),l=require("react"),N=require("./button-DmybVApa.js"),M=require("./chevron-left.es-B0vPg5XM.js"),W=require("./chevron-right.es-Bv376M3o.js"),A=require("./index-BVmlsxuF.js"),x=require("./index-CoR7YA3H.js"),S=require("./bind-DeUYJ6m9.js"),J=require("./tooltip-CJGmJDFQ.js"),K=require("./checkmark.es-lYntWFA3.js"),Q={PRIMARY:"primary"},E={SMALL_SCREEN:"small-screen",LARGE_SCREEN:"large-screen",ALWAYS:"always"},X={"purpur-stepper__nav-container":"_purpur-stepper__nav-container_1rouo_1","purpur-stepper__nav":"_purpur-stepper__nav_1rouo_1","purpur-stepper":"_purpur-stepper_1rouo_1","purpur-stepper__scroll-button":"_purpur-stepper__scroll-button_1rouo_7","purpur-stepper__scroll-button--left":"_purpur-stepper__scroll-button--left_1rouo_18","purpur-stepper__scroll-button--right":"_purpur-stepper__scroll-button--right_1rouo_21","purpur-stepper__scroll-button-icon":"_purpur-stepper__scroll-button-icon_1rouo_24","purpur-stepper__hidden":"_purpur-stepper__hidden_1rouo_27"},Z={"purpur-stepper-container":"_purpur-stepper-container_162zw_1","purpur-stepper-container__inner--align-with-grid":"_purpur-stepper-container__inner--align-with-grid_162zw_5","purpur-stepper-container--primary":"_purpur-stepper-container--primary_162zw_18","purpur-stepper-container--secondary":"_purpur-stepper-container--secondary_162zw_21"},k=S.c.bind(Z),j="purpur-stepper-container",tt=({["data-testid"]:r="purpur-stepper-container",children:e,className:s,alignWithGrid:n,variant:i,...p})=>{const m=k(s,j,{[`${j}--${i}`]:i,[`${j}--align-with-grid`]:n});return t.jsx("div",{className:m,"data-testid":r,...p,children:t.jsx("div",{className:k(`${j}__inner`,{[`${j}__inner--align-with-grid`]:n}),children:e})})},rt=l.forwardRef(({children:r,...e},s)=>{const{finished:n,...i}=e;return t.jsx("div",{...i,ref:s,children:r})}),et=r=>!!r&&l.isValidElement(r)&&!!r.props.label,st={"purpur-stepper-button":"_purpur-stepper-button_1dtrz_1","purpur-stepper-button__trigger-outline":"_purpur-stepper-button__trigger-outline_1dtrz_21","purpur-stepper-button--first":"_purpur-stepper-button--first_1dtrz_33","purpur-stepper-button--current":"_purpur-stepper-button--current_1dtrz_33","purpur-stepper-button--middle":"_purpur-stepper-button--middle_1dtrz_38","purpur-stepper-button--last":"_purpur-stepper-button--last_1dtrz_48","purpur-stepper-button--visibility-small-screen":"_purpur-stepper-button--visibility-small-screen_1dtrz_58","purpur-stepper-button--visibility-large-screen":"_purpur-stepper-button--visibility-large-screen_1dtrz_66","purpur-stepper-button__icon":"_purpur-stepper-button__icon_1dtrz_90","purpur-stepper-button__step-number":"_purpur-stepper-button__step-number_1dtrz_100","purpur-stepper-button__step-number--current":"_purpur-stepper-button__step-number--current_1dtrz_111","purpur-stepper-button__step-number--disabled":"_purpur-stepper-button__step-number--disabled_1dtrz_115","purpur-stepper-button__step-label":"_purpur-stepper-button__step-label_1dtrz_120","arrow-forward":"_arrow-forward_1dtrz_124","purpur-stepper-button--primary":"_purpur-stepper-button--primary_1dtrz_136","purpur-stepper-button--disabled":"_purpur-stepper-button--disabled_1dtrz_139","purpur-stepper-button--secondary":"_purpur-stepper-button--secondary_1dtrz_145","arrow-tail":"_arrow-tail_1dtrz_155","sr-only--lg-down":"_sr-only--lg-down_1dtrz_174"},w=S.c.bind(st),d="purpur-stepper-button",nt=({["data-testid"]:r,current:e,disabled:s,stepNumber:n})=>t.jsx("div",{"data-testid":r,className:w([`${d}__step-number`,{[`${d}__step-number--current`]:e},{[`${d}__step-number--disabled`]:s}]),children:n}),L=l.forwardRef(({className:r,["data-testid"]:e,variant:s,step:n,indexOfLastItem:i,index:p,currentStepIndex:m,whenToBeVisible:f,handleStepChange:u,handleStepFocus:a,completedStepLabel:o,..._},b)=>{const $=p===0?"first":p===i?"last":"middle",g=p===m;return t.jsx(A.Item,{asChild:!0,children:t.jsx(N.Button,{..._,ref:b,className:w(r,d,`${d}--${$}`,`${d}--${s}`,`${d}--visibility-${f}`,{[`${d}--current`]:g},{[`${d}--disabled`]:n.disabled},{"arrow-tail":$!=="first"},{"arrow-forward":$!=="last"}),id:`stepper-trigger-button-${p}`,variant:N.BUTTON_VARIANT.TERTIARY_PURPLE,"data-testid":`${e}-step-trigger-item-${p}`,disabled:n.disabled,"aria-current":g&&"step","aria-label":n.finished&&!g?[n.label,o].filter(Boolean).join(", "):void 0,onClick:T=>u(T,p),onFocus:a,children:t.jsxs("span",{className:w(`${d}__trigger-outline`),children:[n.finished&&!g?t.jsx(K.a,{className:w(`${d}__icon`),"data-testid":`${e}-step-finished-icon`,size:"sm"}):t.jsx(nt,{"data-testid":`${e}-step-number`,current:g,disabled:n.disabled,stepNumber:p+1}),t.jsx("span",{className:w(`${d}__step-label`,{"sr-only--lg-down":!g}),children:n.label})]})})})}),pt={"purpur-stepper-nav-items__list":"_purpur-stepper-nav-items__list_lgkh0_1","purpur-stepper-nav-items__list-item":"_purpur-stepper-nav-items__list-item_lgkh0_7","purpur-stepper-nav-items__list-item--current":"_purpur-stepper-nav-items__list-item--current_lgkh0_25","purpur-stepper-nav-items__tooltip-content":"_purpur-stepper-nav-items__tooltip-content_lgkh0_31","purpur-stepper-nav-items__tooltip-trigger-item-container":"_purpur-stepper-nav-items__tooltip-trigger-item-container_lgkh0_34"},z=S.c.bind(pt),y="purpur-stepper-nav-items",ot=l.forwardRef(({["data-testid"]:r,variant:e,handleStepChange:s,handleStepFocus:n,steps:i,firstStepRef:p,lastStepRef:m,currentStepIndex:f,completedStepLabel:u},a)=>{const o=i.map((_,b)=>{const $=t.jsx("span",{className:z(`${y}__tooltip-trigger-item-container`),children:t.jsx(L,{"data-testid":`${r}-disabled-sm`,variant:e,step:_,indexOfLastItem:i.length-1,index:b,currentStepIndex:f,whenToBeVisible:E.SMALL_SCREEN,completedStepLabel:u,handleStepChange:s,handleStepFocus:n})});return t.jsx("li",{className:z(`${y}__list-item`,{[`${y}__list-item--current`]:b===f}),ref:b===0?p:b===i.length-1?m:null,children:_.disabled?t.jsxs(t.Fragment,{children:[t.jsx(J.Tooltip,{contentClassName:z(`${y}__tooltip-content`),triggerElement:$,children:_.label}),t.jsx(L,{"data-testid":`${r}-disabled-lg`,variant:e,step:_,indexOfLastItem:i.length-1,index:b,currentStepIndex:f,whenToBeVisible:E.LARGE_SCREEN,completedStepLabel:u,handleStepChange:s,handleStepFocus:n})]}):t.jsx(L,{"data-testid":r,variant:e,step:_,indexOfLastItem:i.length-1,index:b,currentStepIndex:f,whenToBeVisible:E.ALWAYS,completedStepLabel:u,handleStepChange:s,handleStepFocus:n})},_.label)});return t.jsx(A.Root,{loop:!1,dir:"ltr",children:t.jsx("ol",{ref:a,className:z(`${y}__list`),children:o})})}),it=r=>{const e=l.useRef(!0),s=l.useRef(null);return l.useEffect(()=>{!e.current&&s.current!==null&&s.current.focus(),e.current=!1},[r]),{contentRef:s}},C={LEFT:"left",RIGHT:"right"},lt=()=>{const r=l.useRef(null),e=l.useRef(null),s=l.useRef(null),[n,i]=l.useState(!1),[p,m]=l.useState(!1),f=u=>{if(!r.current)return;const a=r.current,o=a.clientWidth,_=a.scrollLeft;u===C.LEFT&&a.scroll({behavior:"smooth",left:_-o/2}),u===C.RIGHT&&a.scroll({behavior:"smooth",left:_+o/2})};return l.useEffect(()=>{if(e.current&&s.current&&r.current){const u=new IntersectionObserver(a=>{for(const o of a){if(o.target===e.current){o.isIntersecting?i(!1):i(!0);continue}o.target===s.current&&(o.isIntersecting?m(!1):m(!0))}},{root:r.current,threshold:.95});return u.observe(e.current),u.observe(s.current),()=>u.disconnect()}},[e,s,r]),{scrollContainer:r,firstStepRef:e,lastStepRef:s,displayLeftScrollButton:n,displayRightScrollButton:p,handleHorizontalScroll:f}},R=S.c.bind(X),c="purpur-stepper",I=({["aria-label"]:r,["data-testid"]:e,children:s,className:n,completedStepLabel:i,currentStepIndex:p=0,onStepChange:m,alignWithGrid:f=!1,leftScrollButtonAriaLabel:u,rightScrollButtonAriaLabel:a,variant:o=Q.PRIMARY,..._})=>{const b=l.Children.toArray(s).filter(et),$=l.Children.map(b,h=>{const{disabled:v,finished:D,label:G}=h.props;return{disabled:v??!1,finished:D??!1,label:G}}),{contentRef:g}=it(p),{scrollContainer:T,firstStepRef:O,lastStepRef:q,displayLeftScrollButton:P,displayRightScrollButton:Y,handleHorizontalScroll:B}=lt(),U=R([n,c,{[`${c}--${o}`]:o}]),V=h=>{h.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})},F=(h,v)=>{h.preventDefault(),V(h),m(v)},H=h=>{V(h)};return t.jsxs("div",{className:U,..._,children:[t.jsx(tt,{variant:o,alignWithGrid:f,children:t.jsxs("div",{className:R(`${c}__nav-container`),children:[t.jsxs(x.Root,{children:[t.jsx(x.Viewport,{ref:T,children:t.jsx("div",{"aria-label":r,"data-testid":e,className:R([`${c}__nav`,{[`${c}__nav--${o}`]:o}]),children:t.jsx(A.Root,{loop:!1,dir:"ltr",children:t.jsx(ot,{"data-testid":e,variant:o,firstStepRef:O,lastStepRef:q,steps:$,currentStepIndex:p,handleStepChange:F,handleStepFocus:H,completedStepLabel:i})})})}),t.jsx(x.Scrollbar,{orientation:"horizontal",children:t.jsx(x.Thumb,{})})]}),P&&t.jsx(N.Button,{"aria-label":u,className:R([`${c}__scroll-button`,`${c}__scroll-button--left`]),variant:N.BUTTON_VARIANT.TERTIARY_PURPLE,tabIndex:-1,iconOnly:!0,onClick:()=>{B(C.LEFT)},children:t.jsx(M.l,{className:R(`${c}__scroll-button-icon`),size:"md"})}),Y&&t.jsx(N.Button,{"aria-label":a,className:R([`${c}__scroll-button`,`${c}__scroll-button--right`]),variant:N.BUTTON_VARIANT.TERTIARY_PURPLE,tabIndex:-1,iconOnly:!0,onClick:()=>{B(C.RIGHT)},children:t.jsx(W.n,{className:R(`${c}__scroll-button-icon`),size:"md"})})]})}),t.jsx("div",{tabIndex:-1,"aria-labelledby":`stepper-trigger-button-${p}`,ref:g,style:{outline:"none"},children:t.jsx("div",{"aria-live":"polite",children:l.Children.map(b,(h,v)=>t.jsx("div",{className:R({[`${c}__hidden`]:v!==p}),hidden:v!==p,children:h}))})})]})};I.Content=rt;I.displayName="Stepper";exports.Stepper=I;
|
|
2
|
+
//# sourceMappingURL=stepper-5qMo_shq.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stepper-DpauItjx.js","sources":["../../../components/stepper/src/constants.ts","../../../components/stepper/src/stepper-container.tsx","../../../components/stepper/src/stepper-content.tsx","../../../components/stepper/src/stepper-button.tsx","../../../components/stepper/src/stepper-nav-items.tsx","../../../components/stepper/src/use-content-focus.hook.ts","../../../components/stepper/src/use-scroll-buttons.hook.ts","../../../components/stepper/src/stepper.tsx"],"sourcesContent":["export const STEPPER_VARIANT = {\n PRIMARY: \"primary\",\n SECONDARY: \"secondary\",\n} as const;\n\nexport const VISIBILITY_STATES = {\n SMALL_SCREEN: \"small-screen\",\n LARGE_SCREEN: \"large-screen\",\n ALWAYS: \"always\",\n} as const;\n","import React, { type ReactNode } from \"react\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./stepper-container.module.scss\";\nimport { type StepperVariant } from \"./types\";\n\nconst cx = c.bind(styles);\n\nexport type StepperContainerProps = Omit<BaseProps, \"children\"> & {\n children: ReactNode;\n alignWithGrid: boolean;\n variant: StepperVariant;\n};\n\nconst rootClassName = \"purpur-stepper-container\";\n\nexport const StepperContainer = ({\n [\"data-testid\"]: dataTestId = \"purpur-stepper-container\",\n children,\n className,\n alignWithGrid,\n variant,\n ...props\n}: StepperContainerProps) => {\n const classes: string = cx(className, rootClassName, {\n [`${rootClassName}--${variant}`]: variant,\n [`${rootClassName}--align-with-grid`]: alignWithGrid,\n });\n\n return (\n <div className={classes} data-testid={dataTestId} {...props}>\n <div\n className={cx(`${rootClassName}__inner`, {\n [`${rootClassName}__inner--align-with-grid`]: alignWithGrid,\n })}\n >\n {children}\n </div>\n </div>\n );\n};\n","import React, { forwardRef, isValidElement, type ReactElement, type ReactNode } from \"react\";\nimport type { BaseProps } from \"@purpur/common-types\";\n\nimport { type Optional, type Step } from \"./types\";\n\nexport type StepperContentProps = Omit<BaseProps, \"children\"> & {\n children: ReactNode;\n} & Optional<Step, \"disabled\" | \"finished\">;\n\nexport const StepperContent = forwardRef<HTMLDivElement, StepperContentProps>(\n ({ children, ...props }, ref) => {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { finished, ...rest } = props;\n return (\n <div {...rest} ref={ref}>\n {children}\n </div>\n );\n }\n);\n\nexport const isStepperContent = (child?: ReactNode): child is ReactElement<StepperContentProps> =>\n !!child && isValidElement<StepperContentProps>(child) && !!child.props.label;\n","import React, { forwardRef } from \"react\";\nimport { Button, BUTTON_VARIANT } from \"@purpur/button\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport { IconCheckmark } from \"@purpur/icon/checkmark\";\nimport * as RovingFocusGroup from \"@radix-ui/react-roving-focus\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./stepper-button.module.scss\";\nimport {\n type HandleStepChangeFunction,\n type HandleStepFocusFunction,\n type Step,\n type StepperVariant,\n type VisibilityStates,\n} from \"./types\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-stepper-button\";\n\nexport type StepNumberProps = {\n current: boolean;\n disabled: boolean;\n stepNumber: number;\n [\"data-testid\"]?: string;\n};\n\nconst StepNumber = ({\n [\"data-testid\"]: dataTestId,\n current,\n disabled,\n stepNumber,\n}: StepNumberProps) => {\n return (\n <div\n data-testid={dataTestId}\n className={cx([\n `${rootClassName}__step-number`,\n {\n [`${rootClassName}__step-number--current`]: current,\n },\n {\n [`${rootClassName}__step-number--disabled`]: disabled,\n },\n ])}\n >\n {stepNumber}\n </div>\n );\n};\n\nexport type StepperButtonProps = Omit<BaseProps<\"button\">, \"children\"> & {\n variant: StepperVariant;\n step: Step;\n currentStepIndex: number;\n index: number;\n indexOfLastItem: number;\n whenToBeVisible: VisibilityStates;\n handleStepChange: HandleStepChangeFunction;\n handleStepFocus: HandleStepFocusFunction;\n completedStepLabel: string;\n};\n\nexport const StepperButton = forwardRef<HTMLButtonElement, StepperButtonProps>(\n (\n {\n className,\n [\"data-testid\"]: dataTestId,\n variant,\n step,\n indexOfLastItem,\n index,\n currentStepIndex,\n whenToBeVisible,\n handleStepChange,\n handleStepFocus,\n completedStepLabel,\n ...props\n },\n ref\n ) => {\n const placement = index === 0 ? \"first\" : index === indexOfLastItem ? \"last\" : \"middle\";\n const isCurrentStep = index === currentStepIndex;\n return (\n <RovingFocusGroup.Item asChild>\n <Button\n {...props}\n ref={ref}\n className={cx(\n className,\n rootClassName,\n `${rootClassName}--${placement}`,\n `${rootClassName}--${variant}`,\n `${rootClassName}--visibility-${whenToBeVisible}`,\n {\n [`${rootClassName}--current`]: isCurrentStep,\n },\n {\n [`${rootClassName}--disabled`]: step.disabled,\n },\n {\n [\"arrow-tail\"]: placement !== \"first\",\n },\n {\n [\"arrow-forward\"]: placement !== \"last\",\n }\n )}\n id={`stepper-trigger-button-${index}`}\n variant={BUTTON_VARIANT.TERTIARY_PURPLE}\n data-testid={`${dataTestId}-step-trigger-item-${index}`}\n disabled={step.disabled}\n aria-current={isCurrentStep && \"step\"}\n aria-label={\n step.finished && !isCurrentStep\n ? [step.label, completedStepLabel].filter(Boolean).join(\", \")\n : undefined\n }\n onClick={(e) => handleStepChange(e, index)}\n onFocus={handleStepFocus}\n >\n <span className={cx(`${rootClassName}__trigger-outline`)}>\n {step.finished && !isCurrentStep ? (\n <IconCheckmark\n className={cx(`${rootClassName}__icon`)}\n data-testid={`${dataTestId}-step-finished-icon`}\n size=\"sm\"\n />\n ) : (\n <StepNumber\n data-testid={`${dataTestId}-step-number`}\n current={isCurrentStep}\n disabled={step.disabled}\n stepNumber={index + 1}\n />\n )}\n <span\n className={cx(`${rootClassName}__step-label`, {\n [`sr-only--lg-down`]: !isCurrentStep,\n })}\n >\n {step.label}\n </span>\n </span>\n </Button>\n </RovingFocusGroup.Item>\n );\n }\n);\n","import React, { forwardRef, type RefObject } from \"react\";\nimport { Tooltip } from \"@purpur/tooltip\";\nimport * as RovingFocusGroup from \"@radix-ui/react-roving-focus\";\nimport c from \"classnames/bind\";\n\nimport { VISIBILITY_STATES } from \"./constants\";\nimport { StepperButton } from \"./stepper-button\";\nimport styles from \"./stepper-nav-items.module.scss\";\nimport {\n type HandleStepChangeFunction,\n type HandleStepFocusFunction,\n type Step,\n type StepperVariant,\n} from \"./types\";\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-stepper-nav-items\";\n\nexport type StepperNavItemsProps = {\n variant: StepperVariant;\n [\"data-testid\"]?: string;\n firstStepRef: RefObject<HTMLLIElement | null>;\n lastStepRef: RefObject<HTMLLIElement | null>;\n steps: Step[];\n currentStepIndex: number;\n handleStepChange: HandleStepChangeFunction;\n handleStepFocus: HandleStepFocusFunction;\n completedStepLabel: string;\n};\n\nexport const StepperNavItems = forwardRef<HTMLOListElement, StepperNavItemsProps>(\n (\n {\n [\"data-testid\"]: dataTestId,\n variant,\n handleStepChange,\n handleStepFocus,\n steps,\n firstStepRef,\n lastStepRef,\n currentStepIndex,\n completedStepLabel,\n },\n ref\n ) => {\n const stepListItems = steps.map((step: Step, index: number) => {\n const tooltipTriggerItem = (\n <span className={cx(`${rootClassName}__tooltip-trigger-item-container`)}>\n <StepperButton\n data-testid={`${dataTestId}-disabled-sm`}\n variant={variant}\n step={step}\n indexOfLastItem={steps.length - 1}\n index={index}\n currentStepIndex={currentStepIndex}\n whenToBeVisible={VISIBILITY_STATES.SMALL_SCREEN}\n completedStepLabel={completedStepLabel}\n handleStepChange={handleStepChange}\n handleStepFocus={handleStepFocus}\n />\n </span>\n );\n\n return (\n <li\n className={cx(`${rootClassName}__list-item`, {\n [`${rootClassName}__list-item--current`]: index === currentStepIndex,\n })}\n ref={index === 0 ? firstStepRef : index === steps.length - 1 ? lastStepRef : null}\n key={step.label}\n >\n {step.disabled ? (\n <>\n <Tooltip\n contentClassName={cx(`${rootClassName}__tooltip-content`)}\n triggerElement={tooltipTriggerItem}\n >\n {step.label}\n </Tooltip>\n <StepperButton\n data-testid={`${dataTestId}-disabled-lg`}\n variant={variant}\n step={step}\n indexOfLastItem={steps.length - 1}\n index={index}\n currentStepIndex={currentStepIndex}\n whenToBeVisible={VISIBILITY_STATES.LARGE_SCREEN}\n completedStepLabel={completedStepLabel}\n handleStepChange={handleStepChange}\n handleStepFocus={handleStepFocus}\n />\n </>\n ) : (\n <StepperButton\n data-testid={dataTestId}\n variant={variant}\n step={step}\n indexOfLastItem={steps.length - 1}\n index={index}\n currentStepIndex={currentStepIndex}\n whenToBeVisible={VISIBILITY_STATES.ALWAYS}\n completedStepLabel={completedStepLabel}\n handleStepChange={handleStepChange}\n handleStepFocus={handleStepFocus}\n />\n )}\n </li>\n );\n });\n return (\n <RovingFocusGroup.Root loop={false} dir=\"ltr\">\n <ol ref={ref} className={cx(`${rootClassName}__list`)}>\n {stepListItems}\n </ol>\n </RovingFocusGroup.Root>\n );\n }\n);\n","import { type RefObject, useEffect, useRef } from \"react\";\n\ninterface UseContentFocusHook<T extends HTMLElement> {\n contentRef: RefObject<T | null>;\n}\n\nexport const useContentFocus = <T extends HTMLElement>(\n currentStepIndex: number\n): UseContentFocusHook<T> => {\n const firstLoad = useRef<boolean>(true);\n const contentRef = useRef<T | null>(null);\n\n useEffect(() => {\n if (!firstLoad.current && contentRef.current !== null) {\n contentRef.current.focus();\n }\n firstLoad.current = false;\n }, [currentStepIndex]);\n\n return {\n contentRef,\n };\n};\n","import { type RefObject, useEffect, useRef, useState } from \"react\";\n\nexport const SCROLL_DIRECTION = {\n LEFT: \"left\",\n RIGHT: \"right\",\n} as const;\n\nexport type ScrollDirection = (typeof SCROLL_DIRECTION)[keyof typeof SCROLL_DIRECTION];\n\nexport type UseScrollHook<ContainerElement, WatchedElement> = {\n scrollContainer: RefObject<ContainerElement | null>;\n firstStepRef: RefObject<WatchedElement | null>;\n lastStepRef: RefObject<WatchedElement | null>;\n displayLeftScrollButton: boolean;\n displayRightScrollButton: boolean;\n handleHorizontalScroll: (dir: ScrollDirection) => void;\n};\n\nexport const useScrollButtons = <\n ContainerElement extends HTMLElement,\n WatchedElement extends HTMLElement\n>(): UseScrollHook<ContainerElement, WatchedElement> => {\n const scrollContainer = useRef<ContainerElement | null>(null);\n const firstStepRef = useRef<WatchedElement | null>(null);\n const lastStepRef = useRef<WatchedElement | null>(null);\n const [displayLeftScrollButton, setDisplayLeftScrollButton] = useState(false);\n const [displayRightScrollButton, setDisplayRightScrollButton] = useState(false);\n\n const handleHorizontalScroll = (dir: ScrollDirection): void => {\n if (!scrollContainer.current) {\n return;\n }\n const scrollableContainer = scrollContainer.current;\n const scrollableContainerWidth = scrollableContainer.clientWidth;\n const currentScrollLeft = scrollableContainer.scrollLeft;\n if (dir === SCROLL_DIRECTION.LEFT) {\n scrollableContainer.scroll({\n behavior: \"smooth\",\n left: currentScrollLeft - scrollableContainerWidth / 2,\n });\n }\n if (dir === SCROLL_DIRECTION.RIGHT) {\n scrollableContainer.scroll({\n behavior: \"smooth\",\n left: currentScrollLeft + scrollableContainerWidth / 2,\n });\n }\n };\n\n useEffect(() => {\n if (firstStepRef.current && lastStepRef.current && scrollContainer.current) {\n const observer: IntersectionObserver = new IntersectionObserver(\n (entries: IntersectionObserverEntry[]) => {\n for (const entry of entries) {\n if (entry.target === firstStepRef.current) {\n if (entry.isIntersecting) {\n setDisplayLeftScrollButton(false);\n } else {\n setDisplayLeftScrollButton(true);\n }\n continue;\n }\n if (entry.target === lastStepRef.current) {\n if (entry.isIntersecting) {\n setDisplayRightScrollButton(false);\n } else {\n setDisplayRightScrollButton(true);\n }\n }\n }\n },\n {\n root: scrollContainer.current,\n threshold: 0.95,\n }\n );\n\n observer.observe(firstStepRef.current);\n observer.observe(lastStepRef.current);\n\n return () => observer.disconnect();\n }\n return undefined;\n }, [firstStepRef, lastStepRef, scrollContainer]);\n\n return {\n scrollContainer,\n firstStepRef,\n lastStepRef,\n displayLeftScrollButton,\n displayRightScrollButton,\n handleHorizontalScroll,\n };\n};\n","import React, { Children, type ReactElement } from \"react\";\nimport { Button, BUTTON_VARIANT } from \"@purpur/button\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport { IconChevronLeft } from \"@purpur/icon/chevron-left\";\nimport { IconChevronRight } from \"@purpur/icon/chevron-right\";\nimport * as RovingFocusGroup from \"@radix-ui/react-roving-focus\";\nimport * as ScrollArea from \"@radix-ui/react-scroll-area\";\nimport c from \"classnames/bind\";\n\nimport { STEPPER_VARIANT } from \"./constants\";\nimport styles from \"./stepper.module.scss\";\nimport { StepperContainer } from \"./stepper-container\";\nimport { isStepperContent, StepperContent } from \"./stepper-content\";\nimport { StepperNavItems } from \"./stepper-nav-items\";\nimport { type Step, type StepChangeFunction, type StepperVariant } from \"./types\";\nimport { useContentFocus } from \"./use-content-focus.hook\";\nimport { SCROLL_DIRECTION, useScrollButtons } from \"./use-scroll-buttons.hook\";\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-stepper\";\n\nexport type StepperProps = Omit<BaseProps, \"children\"> & {\n children: Array<ReactElement<typeof StepperContent>> | ReactElement<typeof StepperContent>;\n completedStepLabel: string;\n currentStepIndex: number;\n onStepChange: StepChangeFunction;\n alignWithGrid?: boolean;\n leftScrollButtonAriaLabel: string;\n rightScrollButtonAriaLabel: string;\n variant: StepperVariant;\n};\n\nexport type StepperComponent<P> = React.FunctionComponent<P> & {\n Content: typeof StepperContent;\n};\n\nexport const Stepper: StepperComponent<StepperProps> = ({\n [\"aria-label\"]: ariaLabel,\n [\"data-testid\"]: dataTestId,\n children,\n className,\n completedStepLabel,\n currentStepIndex = 0,\n onStepChange,\n alignWithGrid = false,\n leftScrollButtonAriaLabel,\n rightScrollButtonAriaLabel,\n variant = STEPPER_VARIANT.PRIMARY,\n ...props\n}: StepperProps) => {\n const stepperContentChildren = Children.toArray(children).filter(isStepperContent);\n const steps: Step[] = Children.map(stepperContentChildren, (child) => {\n const { disabled, finished, label } = child.props;\n return {\n disabled: disabled ?? false,\n finished: finished ?? false,\n label,\n };\n });\n const { contentRef } = useContentFocus<HTMLDivElement>(currentStepIndex);\n const {\n scrollContainer,\n firstStepRef,\n lastStepRef,\n displayLeftScrollButton,\n displayRightScrollButton,\n handleHorizontalScroll,\n } = useScrollButtons<HTMLDivElement, HTMLLIElement>();\n\n const classes: string = cx([\n className,\n rootClassName,\n {\n [`${rootClassName}--${variant}`]: variant,\n },\n ]);\n const scrollTriggerIntoView = (e: React.FocusEvent | React.MouseEvent): void => {\n (e.target as HTMLButtonElement).scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n inline: \"center\",\n });\n };\n\n const handleStepChange = (e: React.MouseEvent, idx: number): void => {\n e.preventDefault();\n scrollTriggerIntoView(e);\n onStepChange(idx);\n };\n\n const handleStepFocus = (e: React.FocusEvent): void => {\n scrollTriggerIntoView(e);\n };\n\n return (\n <div className={classes} {...props}>\n <StepperContainer variant={variant} alignWithGrid={alignWithGrid}>\n <div className={cx(`${rootClassName}__nav-container`)}>\n <ScrollArea.Root>\n <ScrollArea.Viewport ref={scrollContainer}>\n <div\n aria-label={ariaLabel}\n data-testid={dataTestId}\n className={cx([\n `${rootClassName}__nav`,\n {\n [`${rootClassName}__nav--${variant}`]: variant,\n },\n ])}\n >\n <RovingFocusGroup.Root loop={false} dir=\"ltr\">\n <StepperNavItems\n data-testid={dataTestId}\n variant={variant}\n firstStepRef={firstStepRef}\n lastStepRef={lastStepRef}\n steps={steps}\n currentStepIndex={currentStepIndex}\n handleStepChange={handleStepChange}\n handleStepFocus={handleStepFocus}\n completedStepLabel={completedStepLabel}\n />\n </RovingFocusGroup.Root>\n </div>\n </ScrollArea.Viewport>\n <ScrollArea.Scrollbar orientation=\"horizontal\">\n <ScrollArea.Thumb />\n </ScrollArea.Scrollbar>\n </ScrollArea.Root>\n {displayLeftScrollButton && (\n <Button\n aria-label={leftScrollButtonAriaLabel}\n className={cx([\n `${rootClassName}__scroll-button`,\n `${rootClassName}__scroll-button--left`,\n ])}\n variant={BUTTON_VARIANT.TERTIARY_PURPLE}\n tabIndex={-1}\n iconOnly\n onClick={() => {\n handleHorizontalScroll(SCROLL_DIRECTION.LEFT);\n }}\n >\n <IconChevronLeft className={cx(`${rootClassName}__scroll-button-icon`)} size=\"md\" />\n </Button>\n )}\n {displayRightScrollButton && (\n <Button\n aria-label={rightScrollButtonAriaLabel}\n className={cx([\n `${rootClassName}__scroll-button`,\n `${rootClassName}__scroll-button--right`,\n ])}\n variant={BUTTON_VARIANT.TERTIARY_PURPLE}\n tabIndex={-1}\n iconOnly\n onClick={() => {\n handleHorizontalScroll(SCROLL_DIRECTION.RIGHT);\n }}\n >\n <IconChevronRight className={cx(`${rootClassName}__scroll-button-icon`)} size=\"md\" />\n </Button>\n )}\n </div>\n </StepperContainer>\n <div\n tabIndex={-1}\n aria-labelledby={`stepper-trigger-button-${currentStepIndex}`}\n ref={contentRef}\n style={{ outline: \"none\" }}\n >\n <div aria-live=\"polite\">\n {Children.map(stepperContentChildren, (child, index: number) => (\n <div\n className={cx({\n [`${rootClassName}__hidden`]: index !== currentStepIndex,\n })}\n hidden={index !== currentStepIndex}\n >\n {child}\n </div>\n ))}\n </div>\n </div>\n </div>\n );\n};\n\nStepper.Content = StepperContent;\n\nStepper.displayName = \"Stepper\";\n"],"names":["STEPPER_VARIANT","VISIBILITY_STATES","cx","c","styles","rootClassName","StepperContainer","dataTestId","children","className","alignWithGrid","variant","props","classes","jsx","StepperContent","forwardRef","ref","finished","rest","isStepperContent","child","isValidElement","StepNumber","current","disabled","stepNumber","StepperButton","step","indexOfLastItem","index","currentStepIndex","whenToBeVisible","handleStepChange","handleStepFocus","completedStepLabel","placement","isCurrentStep","RovingFocusGroup.Item","Button","BUTTON_VARIANT","e","IconCheckmark","StepperNavItems","steps","firstStepRef","lastStepRef","stepListItems","tooltipTriggerItem","jsxs","Fragment","Tooltip","RovingFocusGroup.Root","useContentFocus","firstLoad","useRef","contentRef","useEffect","SCROLL_DIRECTION","useScrollButtons","scrollContainer","displayLeftScrollButton","setDisplayLeftScrollButton","useState","displayRightScrollButton","setDisplayRightScrollButton","handleHorizontalScroll","dir","scrollableContainer","scrollableContainerWidth","currentScrollLeft","observer","entries","entry","Stepper","ariaLabel","onStepChange","leftScrollButtonAriaLabel","rightScrollButtonAriaLabel","stepperContentChildren","Children","label","scrollTriggerIntoView","idx","ScrollArea.Root","ScrollArea.Viewport","ScrollArea.Scrollbar","ScrollArea.Thumb","IconChevronLeft","IconChevronRight"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"stepper-5qMo_shq.js","sources":["../../../components/stepper/src/constants.ts","../../../components/stepper/src/stepper-container.tsx","../../../components/stepper/src/stepper-content.tsx","../../../components/stepper/src/stepper-button.tsx","../../../components/stepper/src/stepper-nav-items.tsx","../../../components/stepper/src/use-content-focus.hook.ts","../../../components/stepper/src/use-scroll-buttons.hook.ts","../../../components/stepper/src/stepper.tsx"],"sourcesContent":["export const STEPPER_VARIANT = {\n PRIMARY: \"primary\",\n SECONDARY: \"secondary\",\n} as const;\n\nexport const VISIBILITY_STATES = {\n SMALL_SCREEN: \"small-screen\",\n LARGE_SCREEN: \"large-screen\",\n ALWAYS: \"always\",\n} as const;\n","import React, { type ReactNode } from \"react\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./stepper-container.module.scss\";\nimport { type StepperVariant } from \"./types\";\n\nconst cx = c.bind(styles);\n\nexport type StepperContainerProps = Omit<BaseProps, \"children\"> & {\n children: ReactNode;\n alignWithGrid: boolean;\n variant: StepperVariant;\n};\n\nconst rootClassName = \"purpur-stepper-container\";\n\nexport const StepperContainer = ({\n [\"data-testid\"]: dataTestId = \"purpur-stepper-container\",\n children,\n className,\n alignWithGrid,\n variant,\n ...props\n}: StepperContainerProps) => {\n const classes: string = cx(className, rootClassName, {\n [`${rootClassName}--${variant}`]: variant,\n [`${rootClassName}--align-with-grid`]: alignWithGrid,\n });\n\n return (\n <div className={classes} data-testid={dataTestId} {...props}>\n <div\n className={cx(`${rootClassName}__inner`, {\n [`${rootClassName}__inner--align-with-grid`]: alignWithGrid,\n })}\n >\n {children}\n </div>\n </div>\n );\n};\n","import React, { forwardRef, isValidElement, type ReactElement, type ReactNode } from \"react\";\nimport type { BaseProps } from \"@purpur/common-types\";\n\nimport { type Optional, type Step } from \"./types\";\n\nexport type StepperContentProps = Omit<BaseProps, \"children\"> & {\n children: ReactNode;\n} & Optional<Step, \"disabled\" | \"finished\">;\n\nexport const StepperContent = forwardRef<HTMLDivElement, StepperContentProps>(\n ({ children, ...props }, ref) => {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { finished, ...rest } = props;\n return (\n <div {...rest} ref={ref}>\n {children}\n </div>\n );\n }\n);\n\nexport const isStepperContent = (child?: ReactNode): child is ReactElement<StepperContentProps> =>\n !!child && isValidElement<StepperContentProps>(child) && !!child.props.label;\n","import React, { forwardRef } from \"react\";\nimport { Button, BUTTON_VARIANT } from \"@purpur/button\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport { IconCheckmark } from \"@purpur/icon/checkmark\";\nimport * as RovingFocusGroup from \"@radix-ui/react-roving-focus\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./stepper-button.module.scss\";\nimport {\n type HandleStepChangeFunction,\n type HandleStepFocusFunction,\n type Step,\n type StepperVariant,\n type VisibilityStates,\n} from \"./types\";\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-stepper-button\";\n\nexport type StepNumberProps = {\n current: boolean;\n disabled: boolean;\n stepNumber: number;\n [\"data-testid\"]?: string;\n};\n\nconst StepNumber = ({\n [\"data-testid\"]: dataTestId,\n current,\n disabled,\n stepNumber,\n}: StepNumberProps) => {\n return (\n <div\n data-testid={dataTestId}\n className={cx([\n `${rootClassName}__step-number`,\n {\n [`${rootClassName}__step-number--current`]: current,\n },\n {\n [`${rootClassName}__step-number--disabled`]: disabled,\n },\n ])}\n >\n {stepNumber}\n </div>\n );\n};\n\nexport type StepperButtonProps = Omit<BaseProps<\"button\">, \"children\"> & {\n variant: StepperVariant;\n step: Step;\n currentStepIndex: number;\n index: number;\n indexOfLastItem: number;\n whenToBeVisible: VisibilityStates;\n handleStepChange: HandleStepChangeFunction;\n handleStepFocus: HandleStepFocusFunction;\n completedStepLabel: string;\n};\n\nexport const StepperButton = forwardRef<HTMLButtonElement, StepperButtonProps>(\n (\n {\n className,\n [\"data-testid\"]: dataTestId,\n variant,\n step,\n indexOfLastItem,\n index,\n currentStepIndex,\n whenToBeVisible,\n handleStepChange,\n handleStepFocus,\n completedStepLabel,\n ...props\n },\n ref\n ) => {\n const placement = index === 0 ? \"first\" : index === indexOfLastItem ? \"last\" : \"middle\";\n const isCurrentStep = index === currentStepIndex;\n return (\n <RovingFocusGroup.Item asChild>\n <Button\n {...props}\n ref={ref}\n className={cx(\n className,\n rootClassName,\n `${rootClassName}--${placement}`,\n `${rootClassName}--${variant}`,\n `${rootClassName}--visibility-${whenToBeVisible}`,\n {\n [`${rootClassName}--current`]: isCurrentStep,\n },\n {\n [`${rootClassName}--disabled`]: step.disabled,\n },\n {\n [\"arrow-tail\"]: placement !== \"first\",\n },\n {\n [\"arrow-forward\"]: placement !== \"last\",\n }\n )}\n id={`stepper-trigger-button-${index}`}\n variant={BUTTON_VARIANT.TERTIARY_PURPLE}\n data-testid={`${dataTestId}-step-trigger-item-${index}`}\n disabled={step.disabled}\n aria-current={isCurrentStep && \"step\"}\n aria-label={\n step.finished && !isCurrentStep\n ? [step.label, completedStepLabel].filter(Boolean).join(\", \")\n : undefined\n }\n onClick={(e) => handleStepChange(e, index)}\n onFocus={handleStepFocus}\n >\n <span className={cx(`${rootClassName}__trigger-outline`)}>\n {step.finished && !isCurrentStep ? (\n <IconCheckmark\n className={cx(`${rootClassName}__icon`)}\n data-testid={`${dataTestId}-step-finished-icon`}\n size=\"sm\"\n />\n ) : (\n <StepNumber\n data-testid={`${dataTestId}-step-number`}\n current={isCurrentStep}\n disabled={step.disabled}\n stepNumber={index + 1}\n />\n )}\n <span\n className={cx(`${rootClassName}__step-label`, {\n [`sr-only--lg-down`]: !isCurrentStep,\n })}\n >\n {step.label}\n </span>\n </span>\n </Button>\n </RovingFocusGroup.Item>\n );\n }\n);\n","import React, { forwardRef, type RefObject } from \"react\";\nimport { Tooltip } from \"@purpur/tooltip\";\nimport * as RovingFocusGroup from \"@radix-ui/react-roving-focus\";\nimport c from \"classnames/bind\";\n\nimport { VISIBILITY_STATES } from \"./constants\";\nimport { StepperButton } from \"./stepper-button\";\nimport styles from \"./stepper-nav-items.module.scss\";\nimport {\n type HandleStepChangeFunction,\n type HandleStepFocusFunction,\n type Step,\n type StepperVariant,\n} from \"./types\";\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-stepper-nav-items\";\n\nexport type StepperNavItemsProps = {\n variant: StepperVariant;\n [\"data-testid\"]?: string;\n firstStepRef: RefObject<HTMLLIElement | null>;\n lastStepRef: RefObject<HTMLLIElement | null>;\n steps: Step[];\n currentStepIndex: number;\n handleStepChange: HandleStepChangeFunction;\n handleStepFocus: HandleStepFocusFunction;\n completedStepLabel: string;\n};\n\nexport const StepperNavItems = forwardRef<HTMLOListElement, StepperNavItemsProps>(\n (\n {\n [\"data-testid\"]: dataTestId,\n variant,\n handleStepChange,\n handleStepFocus,\n steps,\n firstStepRef,\n lastStepRef,\n currentStepIndex,\n completedStepLabel,\n },\n ref\n ) => {\n const stepListItems = steps.map((step: Step, index: number) => {\n const tooltipTriggerItem = (\n <span className={cx(`${rootClassName}__tooltip-trigger-item-container`)}>\n <StepperButton\n data-testid={`${dataTestId}-disabled-sm`}\n variant={variant}\n step={step}\n indexOfLastItem={steps.length - 1}\n index={index}\n currentStepIndex={currentStepIndex}\n whenToBeVisible={VISIBILITY_STATES.SMALL_SCREEN}\n completedStepLabel={completedStepLabel}\n handleStepChange={handleStepChange}\n handleStepFocus={handleStepFocus}\n />\n </span>\n );\n\n return (\n <li\n className={cx(`${rootClassName}__list-item`, {\n [`${rootClassName}__list-item--current`]: index === currentStepIndex,\n })}\n ref={index === 0 ? firstStepRef : index === steps.length - 1 ? lastStepRef : null}\n key={step.label}\n >\n {step.disabled ? (\n <>\n <Tooltip\n contentClassName={cx(`${rootClassName}__tooltip-content`)}\n triggerElement={tooltipTriggerItem}\n >\n {step.label}\n </Tooltip>\n <StepperButton\n data-testid={`${dataTestId}-disabled-lg`}\n variant={variant}\n step={step}\n indexOfLastItem={steps.length - 1}\n index={index}\n currentStepIndex={currentStepIndex}\n whenToBeVisible={VISIBILITY_STATES.LARGE_SCREEN}\n completedStepLabel={completedStepLabel}\n handleStepChange={handleStepChange}\n handleStepFocus={handleStepFocus}\n />\n </>\n ) : (\n <StepperButton\n data-testid={dataTestId}\n variant={variant}\n step={step}\n indexOfLastItem={steps.length - 1}\n index={index}\n currentStepIndex={currentStepIndex}\n whenToBeVisible={VISIBILITY_STATES.ALWAYS}\n completedStepLabel={completedStepLabel}\n handleStepChange={handleStepChange}\n handleStepFocus={handleStepFocus}\n />\n )}\n </li>\n );\n });\n return (\n <RovingFocusGroup.Root loop={false} dir=\"ltr\">\n <ol ref={ref} className={cx(`${rootClassName}__list`)}>\n {stepListItems}\n </ol>\n </RovingFocusGroup.Root>\n );\n }\n);\n","import { type RefObject, useEffect, useRef } from \"react\";\n\ninterface UseContentFocusHook<T extends HTMLElement> {\n contentRef: RefObject<T | null>;\n}\n\nexport const useContentFocus = <T extends HTMLElement>(\n currentStepIndex: number\n): UseContentFocusHook<T> => {\n const firstLoad = useRef<boolean>(true);\n const contentRef = useRef<T | null>(null);\n\n useEffect(() => {\n if (!firstLoad.current && contentRef.current !== null) {\n contentRef.current.focus();\n }\n firstLoad.current = false;\n }, [currentStepIndex]);\n\n return {\n contentRef,\n };\n};\n","import { type RefObject, useEffect, useRef, useState } from \"react\";\n\nexport const SCROLL_DIRECTION = {\n LEFT: \"left\",\n RIGHT: \"right\",\n} as const;\n\nexport type ScrollDirection = (typeof SCROLL_DIRECTION)[keyof typeof SCROLL_DIRECTION];\n\nexport type UseScrollHook<ContainerElement, WatchedElement> = {\n scrollContainer: RefObject<ContainerElement | null>;\n firstStepRef: RefObject<WatchedElement | null>;\n lastStepRef: RefObject<WatchedElement | null>;\n displayLeftScrollButton: boolean;\n displayRightScrollButton: boolean;\n handleHorizontalScroll: (dir: ScrollDirection) => void;\n};\n\nexport const useScrollButtons = <\n ContainerElement extends HTMLElement,\n WatchedElement extends HTMLElement\n>(): UseScrollHook<ContainerElement, WatchedElement> => {\n const scrollContainer = useRef<ContainerElement | null>(null);\n const firstStepRef = useRef<WatchedElement | null>(null);\n const lastStepRef = useRef<WatchedElement | null>(null);\n const [displayLeftScrollButton, setDisplayLeftScrollButton] = useState(false);\n const [displayRightScrollButton, setDisplayRightScrollButton] = useState(false);\n\n const handleHorizontalScroll = (dir: ScrollDirection): void => {\n if (!scrollContainer.current) {\n return;\n }\n const scrollableContainer = scrollContainer.current;\n const scrollableContainerWidth = scrollableContainer.clientWidth;\n const currentScrollLeft = scrollableContainer.scrollLeft;\n if (dir === SCROLL_DIRECTION.LEFT) {\n scrollableContainer.scroll({\n behavior: \"smooth\",\n left: currentScrollLeft - scrollableContainerWidth / 2,\n });\n }\n if (dir === SCROLL_DIRECTION.RIGHT) {\n scrollableContainer.scroll({\n behavior: \"smooth\",\n left: currentScrollLeft + scrollableContainerWidth / 2,\n });\n }\n };\n\n useEffect(() => {\n if (firstStepRef.current && lastStepRef.current && scrollContainer.current) {\n const observer: IntersectionObserver = new IntersectionObserver(\n (entries: IntersectionObserverEntry[]) => {\n for (const entry of entries) {\n if (entry.target === firstStepRef.current) {\n if (entry.isIntersecting) {\n setDisplayLeftScrollButton(false);\n } else {\n setDisplayLeftScrollButton(true);\n }\n continue;\n }\n if (entry.target === lastStepRef.current) {\n if (entry.isIntersecting) {\n setDisplayRightScrollButton(false);\n } else {\n setDisplayRightScrollButton(true);\n }\n }\n }\n },\n {\n root: scrollContainer.current,\n threshold: 0.95,\n }\n );\n\n observer.observe(firstStepRef.current);\n observer.observe(lastStepRef.current);\n\n return () => observer.disconnect();\n }\n return undefined;\n }, [firstStepRef, lastStepRef, scrollContainer]);\n\n return {\n scrollContainer,\n firstStepRef,\n lastStepRef,\n displayLeftScrollButton,\n displayRightScrollButton,\n handleHorizontalScroll,\n };\n};\n","import React, { Children, type ReactElement } from \"react\";\nimport { Button, BUTTON_VARIANT } from \"@purpur/button\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport { IconChevronLeft } from \"@purpur/icon/chevron-left\";\nimport { IconChevronRight } from \"@purpur/icon/chevron-right\";\nimport * as RovingFocusGroup from \"@radix-ui/react-roving-focus\";\nimport * as ScrollArea from \"@radix-ui/react-scroll-area\";\nimport c from \"classnames/bind\";\n\nimport { STEPPER_VARIANT } from \"./constants\";\nimport styles from \"./stepper.module.scss\";\nimport { StepperContainer } from \"./stepper-container\";\nimport { isStepperContent, StepperContent } from \"./stepper-content\";\nimport { StepperNavItems } from \"./stepper-nav-items\";\nimport { type Step, type StepChangeFunction, type StepperVariant } from \"./types\";\nimport { useContentFocus } from \"./use-content-focus.hook\";\nimport { SCROLL_DIRECTION, useScrollButtons } from \"./use-scroll-buttons.hook\";\n\nconst cx = c.bind(styles);\n\nconst rootClassName = \"purpur-stepper\";\n\nexport type StepperProps = Omit<BaseProps, \"children\"> & {\n children: Array<ReactElement<typeof StepperContent>> | ReactElement<typeof StepperContent>;\n completedStepLabel: string;\n currentStepIndex: number;\n onStepChange: StepChangeFunction;\n alignWithGrid?: boolean;\n leftScrollButtonAriaLabel: string;\n rightScrollButtonAriaLabel: string;\n variant: StepperVariant;\n};\n\nexport type StepperComponent<P> = React.FunctionComponent<P> & {\n Content: typeof StepperContent;\n};\n\nexport const Stepper: StepperComponent<StepperProps> = ({\n [\"aria-label\"]: ariaLabel,\n [\"data-testid\"]: dataTestId,\n children,\n className,\n completedStepLabel,\n currentStepIndex = 0,\n onStepChange,\n alignWithGrid = false,\n leftScrollButtonAriaLabel,\n rightScrollButtonAriaLabel,\n variant = STEPPER_VARIANT.PRIMARY,\n ...props\n}: StepperProps) => {\n const stepperContentChildren = Children.toArray(children).filter(isStepperContent);\n const steps: Step[] = Children.map(stepperContentChildren, (child) => {\n const { disabled, finished, label } = child.props;\n return {\n disabled: disabled ?? false,\n finished: finished ?? false,\n label,\n };\n });\n const { contentRef } = useContentFocus<HTMLDivElement>(currentStepIndex);\n const {\n scrollContainer,\n firstStepRef,\n lastStepRef,\n displayLeftScrollButton,\n displayRightScrollButton,\n handleHorizontalScroll,\n } = useScrollButtons<HTMLDivElement, HTMLLIElement>();\n\n const classes: string = cx([\n className,\n rootClassName,\n {\n [`${rootClassName}--${variant}`]: variant,\n },\n ]);\n const scrollTriggerIntoView = (e: React.FocusEvent | React.MouseEvent): void => {\n (e.target as HTMLButtonElement).scrollIntoView({\n behavior: \"smooth\",\n block: \"nearest\",\n inline: \"center\",\n });\n };\n\n const handleStepChange = (e: React.MouseEvent, idx: number): void => {\n e.preventDefault();\n scrollTriggerIntoView(e);\n onStepChange(idx);\n };\n\n const handleStepFocus = (e: React.FocusEvent): void => {\n scrollTriggerIntoView(e);\n };\n\n return (\n <div className={classes} {...props}>\n <StepperContainer variant={variant} alignWithGrid={alignWithGrid}>\n <div className={cx(`${rootClassName}__nav-container`)}>\n <ScrollArea.Root>\n <ScrollArea.Viewport ref={scrollContainer}>\n <div\n aria-label={ariaLabel}\n data-testid={dataTestId}\n className={cx([\n `${rootClassName}__nav`,\n {\n [`${rootClassName}__nav--${variant}`]: variant,\n },\n ])}\n >\n <RovingFocusGroup.Root loop={false} dir=\"ltr\">\n <StepperNavItems\n data-testid={dataTestId}\n variant={variant}\n firstStepRef={firstStepRef}\n lastStepRef={lastStepRef}\n steps={steps}\n currentStepIndex={currentStepIndex}\n handleStepChange={handleStepChange}\n handleStepFocus={handleStepFocus}\n completedStepLabel={completedStepLabel}\n />\n </RovingFocusGroup.Root>\n </div>\n </ScrollArea.Viewport>\n <ScrollArea.Scrollbar orientation=\"horizontal\">\n <ScrollArea.Thumb />\n </ScrollArea.Scrollbar>\n </ScrollArea.Root>\n {displayLeftScrollButton && (\n <Button\n aria-label={leftScrollButtonAriaLabel}\n className={cx([\n `${rootClassName}__scroll-button`,\n `${rootClassName}__scroll-button--left`,\n ])}\n variant={BUTTON_VARIANT.TERTIARY_PURPLE}\n tabIndex={-1}\n iconOnly\n onClick={() => {\n handleHorizontalScroll(SCROLL_DIRECTION.LEFT);\n }}\n >\n <IconChevronLeft className={cx(`${rootClassName}__scroll-button-icon`)} size=\"md\" />\n </Button>\n )}\n {displayRightScrollButton && (\n <Button\n aria-label={rightScrollButtonAriaLabel}\n className={cx([\n `${rootClassName}__scroll-button`,\n `${rootClassName}__scroll-button--right`,\n ])}\n variant={BUTTON_VARIANT.TERTIARY_PURPLE}\n tabIndex={-1}\n iconOnly\n onClick={() => {\n handleHorizontalScroll(SCROLL_DIRECTION.RIGHT);\n }}\n >\n <IconChevronRight className={cx(`${rootClassName}__scroll-button-icon`)} size=\"md\" />\n </Button>\n )}\n </div>\n </StepperContainer>\n <div\n tabIndex={-1}\n aria-labelledby={`stepper-trigger-button-${currentStepIndex}`}\n ref={contentRef}\n style={{ outline: \"none\" }}\n >\n <div aria-live=\"polite\">\n {Children.map(stepperContentChildren, (child, index: number) => (\n <div\n className={cx({\n [`${rootClassName}__hidden`]: index !== currentStepIndex,\n })}\n hidden={index !== currentStepIndex}\n >\n {child}\n </div>\n ))}\n </div>\n </div>\n </div>\n );\n};\n\nStepper.Content = StepperContent;\n\nStepper.displayName = \"Stepper\";\n"],"names":["STEPPER_VARIANT","VISIBILITY_STATES","cx","c","styles","rootClassName","StepperContainer","dataTestId","children","className","alignWithGrid","variant","props","classes","jsx","StepperContent","forwardRef","ref","finished","rest","isStepperContent","child","isValidElement","StepNumber","current","disabled","stepNumber","StepperButton","step","indexOfLastItem","index","currentStepIndex","whenToBeVisible","handleStepChange","handleStepFocus","completedStepLabel","placement","isCurrentStep","RovingFocusGroup.Item","Button","BUTTON_VARIANT","e","IconCheckmark","StepperNavItems","steps","firstStepRef","lastStepRef","stepListItems","tooltipTriggerItem","jsxs","Fragment","Tooltip","RovingFocusGroup.Root","useContentFocus","firstLoad","useRef","contentRef","useEffect","SCROLL_DIRECTION","useScrollButtons","scrollContainer","displayLeftScrollButton","setDisplayLeftScrollButton","useState","displayRightScrollButton","setDisplayRightScrollButton","handleHorizontalScroll","dir","scrollableContainer","scrollableContainerWidth","currentScrollLeft","observer","entries","entry","Stepper","ariaLabel","onStepChange","leftScrollButtonAriaLabel","rightScrollButtonAriaLabel","stepperContentChildren","Children","label","scrollTriggerIntoView","idx","ScrollArea.Root","ScrollArea.Viewport","ScrollArea.Scrollbar","ScrollArea.Thumb","IconChevronLeft","IconChevronRight"],"mappings":"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"}
|