New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@leafygreen-ui/stepper

Package Overview
Dependencies
Maintainers
4
Versions
70
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@leafygreen-ui/stepper - npm Package Compare versions

Comparing version 2.1.6 to 3.0.0

dist/constants.d.ts
dist/constants.d.ts.map
dist/EllipsesStep.d.ts
dist/EllipsesStep.d.ts.map
dist/InternalStep.d.ts
dist/InternalStep.d.ts.map
dist/Step.d.ts
dist/Step.d.ts.map
dist/StepIcon.d.ts
dist/StepIcon.d.ts.map
dist/StepLabel.d.ts
dist/StepLabel.d.ts.map
dist/StepperContext.d.ts
dist/StepperContext.d.ts.map
dist/types.d.ts
dist/types.d.ts.map
src/constants.ts
src/EllipsesStep.tsx
src/InternalStep.tsx
src/Step.tsx
src/StepIcon.tsx
src/StepLabel.tsx
src/StepperContext.tsx
src/types.ts

15

CHANGELOG.md
# @leafygreen-ui/stepper
## 3.0.0
### Major Changes
- dccc9dc1: New designs applied to the Stepper component.
### Patch Changes
- Updated dependencies [ba4aab15]
- Updated dependencies [2cf1bc4a]
- Updated dependencies [679b6239]
- Updated dependencies [f3aad7e2]
- @leafygreen-ui/typography@10.0.0
- @leafygreen-ui/lib@9.2.1
## 2.1.6

@@ -4,0 +19,0 @@

2

dist/esm/index.js

@@ -1,2 +0,2 @@

import n,{useState as e}from"react";import r from"prop-types";import{css as t,cx as o}from"@leafygreen-ui/emotion";import i from"@leafygreen-ui/icon/dist/Checkmark";import a from"@leafygreen-ui/icon/dist/Ellipsis";import{transparentize as l}from"polished";import{createDataProp as s}from"@leafygreen-ui/lib";import{uiColors as p}from"@leafygreen-ui/palette";import{jsx as c}from"@emotion/react";function u(n,e){var r=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);e&&(t=t.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.push.apply(r,t)}return r}function f(n){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?u(Object(r),!0).forEach((function(e){d(n,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(r)):u(Object(r)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(r,e))}))}return n}function d(n,e,r){return e in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r,n}function m(){return(m=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(n[t]=r[t])}return n}).apply(this,arguments)}function b(n,e){if(null==n)return{};var r,t,o=function(n,e){if(null==n)return{};var r,t,o={},i=Object.keys(n);for(t=0;t<i.length;t++)r=i[t],e.indexOf(r)>=0||(o[r]=n[r]);return o}(n,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);for(t=0;t<i.length;t++)r=i[t],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(n,r)&&(o[r]=n[r])}return o}function g(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function y(n,e){return function(n){if(Array.isArray(n))return n}(n)||function(n,e){var r=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null==r)return;var t,o,i=[],a=!0,l=!1;try{for(r=r.call(n);!(a=(t=r.next()).done)&&(i.push(t.value),!e||i.length!==e);a=!0);}catch(n){l=!0,o=n}finally{try{a||null==r.return||r.return()}finally{if(l)throw o}}return i}(n,e)||x(n,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function h(n){return function(n){if(Array.isArray(n))return v(n)}(n)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(n)||x(n)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function x(n,e){if(n){if("string"==typeof n)return v(n,e);var r=Object.prototype.toString.call(n).slice(8,-1);return"Object"===r&&n.constructor&&(r=n.constructor.name),"Map"===r||"Set"===r?Array.from(n):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?v(n,e):void 0}}function v(n,e){(null==e||e>n.length)&&(e=n.length);for(var r=0,t=new Array(e);r<e;r++)t[r]=n[r];return t}var w,S,O,j,k,P,B,N,A,E,z,T,D,M,I,L,X,q={stepBoxTop:s("step-box-top"),stepBoxBottom:s("step-box-bottom")},R=t(w||(w=g(["\n display: flex;\n position: absolute;\n left: 0;\n height: 100%;\n width: 100%;\n transition: opacity 700ms, visibility 700ms;\n"]))),C=t(S||(S=g(["\n display: flex;\n flex-wrap: wrap;\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: -1;\n\n // Safari doesn't correctly position absolutely positioned elements inside flex containers\n // https://developers.google.com/web/updates/2016/06/absolute-positioned-children\n left: 0;\n top: 0;\n"]))),H=t(O||(O=g(["\n display: inline-block;\n\n height: 50%;\n width: 100%;\n\n & > *,\n &:before,\n &:after {\n display: inline-block;\n height: 100%;\n background: white;\n border: 1px solid #dee0e3;\n }\n\n & > * {\n width: calc(100% - ","px);\n margin-right: -","px;\n border-left: none;\n border-right: none;\n }\n\n &:before,\n &:after {\n content: '';\n width: ","px;\n }\n\n &:before {\n border-right: none;\n }\n\n &:after {\n border-left: none;\n }\n"])),16,16,16),F=t(j||(j=g(["\n ",";\n\n & > * {\n border-bottom: none;\n }\n\n &:before,\n &:after {\n border-bottom: none;\n transform-origin: 50% 0%;\n transform: skewX(","rad);\n }\n"])),H,Math.atan(2/3)),U=t(k||(k=g(["\n ",";\n\n & > * {\n border-top: none;\n }\n\n &:before,\n &:after {\n border-top: none;\n transform-origin: 50% 100%;\n transform: skewX(","rad);\n }\n"])),H,-Math.atan(2/3)),$=t(P||(P=g(["\n flex: 1;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: calc(100% + 2px);\n min-width: 0; // https://css-tricks.com/flexbox-truncated-text/\n margin-left: -","px;\n margin-top: -1px;\n margin-bottom: -1px;\n padding-left: ","px;\n padding-right: 16px;\n\n color: ",";\n font-family: Akzidenz, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-size: 14px;\n font-weight: bold;\n\n z-index: 2;\n\n &:first-of-type {\n margin-left: 0;\n padding-left: 16px;\n\n ",", "," {\n &:before {\n transform: none;\n }\n }\n }\n\n &:last-of-type {\n padding-left: calc(","px);\n\n ",", "," {\n &:after {\n transform: none;\n }\n }\n }\n"])),17,32,p.gray.dark3,q.stepBoxTop.selector,q.stepBoxBottom.selector,48,q.stepBoxTop.selector,q.stepBoxBottom.selector),G=t(B||(B=g(["\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n"]))),J=t(N||(N=g(["\n filter: drop-shadow(0px 4px 4px ",");\n z-index: 3;\n\n &:last-of-type:not(:first-of-type) {\n ",":before {\n transform: skewX(","rad);\n }\n\n ",":before {\n transform: skewX(-","rad);\n }\n }\n"])),l(.75,p.black),q.stepBoxTop.selector,Math.atan(2/3),q.stepBoxBottom.selector,Math.atan(2/3)),K=t(A||(A=g(["\n color: ",";\n z-index: 1;\n\n &:last-of-type {\n z-index: 0;\n }\n\n ",", "," {\n & > *,\n &:before,\n &:after {\n background: ",";\n border-color: ",";\n }\n }\n"])),p.gray.base,q.stepBoxTop.selector,q.stepBoxBottom.selector,p.gray.light3,p.gray.light2),Q=t(E||(E=g(["\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n"]))),V=t(z||(z=g(["\n left: 0;\n transition: left 700ms;\n"]))),W=t(T||(T=g(["\n left: ","px;\n transition: left 700ms;\n"])),-32),Y=t(D||(D=g(["\n position: relative;\n z-index: 0;\n height: ","px;\n width: 100%;\n\n background: ",";\n border-bottom: 1px solid;\n border-top: 1px solid;\n border-color: ",";\n"])),48,p.gray.light3,p.gray.light2),Z=t(M||(M=g(["\n display: flex;\n position: absolute;\n\n align-items: center;\n justify-content: center;\n top: calc(100% - 12px);\n\n height: 24px;\n min-width: 24px;\n max-width: max-content;\n\n font-size: 12px;\n line-height: 14px;\n\n border-radius: 12px;\n border: 1px solid;\n"]))),_=t(I||(I=g(["\n background-color: white;\n border-color: ",";\n color: ",";\n"])),p.green.base,p.green.base),nn=t(L||(L=g(["\n background-color: ",";\n border-color: #464c4f;\n color: white;\n"])),p.gray.dark2),en=t(X||(X=g(["\n background-color: white;\n border-color: ",";\n color: ",";\n"])),p.gray.light1,p.gray.base),rn=t("padding: 0 8px;"),tn=t("cursor: pointer;"),on=["children","state","stepLabel","isPreview","className"];function an(n){var e,r,t=n.children,a=n.state,l=n.stepLabel,s=n.isPreview,p=n.className,u=b(n,on),f="current"===a,g="upcoming"===a,y="completed"===a;return c("div",m({className:"".concat(o($,(e={},d(e,J,f),d(e,K,g),d(e,tn,s),e))," ").concat(p)},u),l&&c("div",{className:o(Z,(r={},d(r,nn,f),d(r,_,y),d(r,en,g),d(r,tn,s),r))},y?c(i,null):c("div",{className:rn},l)),c("div",{className:o(G,d({},tn,s))},t),c("div",{className:C},c("span",m({className:F},q.stepBoxTop.prop),c("div",null)),c("span",m({className:U},q.stepBoxBottom.prop),c("div",null))))}function ln(n){var r=n.children,t=n.currentStep,i=n.maxDisplayedSteps,a=void 0===i?Array.isArray(r)?r.length:1:i,l=n.className,s=y(e("current"),2),p=s[0],u=s[1],b=(Array.isArray(r)?r:[r]).map((function(n,e){var r;return r=e<t?"completed":e===t?"current":"upcoming",{"aria-label":cn(n.props.children),"aria-current":t===e?"step":void 0,step:e,stepLabel:(e+1).toString(),state:r,children:n,isPreview:!1}})),g=b.length,h=un({currentStep:t,numSteps:g,maxDisplayedSteps:a}),x=h.rangeStart,v=h.rangeEnd,w=pn(b,{currentStep:t,rangeStart:x,rangeEnd:v}),S={current:w};return x>0&&(w[0].onMouseOver=function(){u("previous")},S.previous=pn(b,f({currentStep:t},un({currentStep:x-1,numSteps:g,maxDisplayedSteps:a}))).map((function(n){return f(f({},n),{},{isPreview:!0})}))),v<g-1&&(w[w.length-1].onMouseOver=function(){u("next")},S.next=pn(b,f({currentStep:t},un({currentStep:v,numSteps:g,maxDisplayedSteps:a}))).map((function(n){return f(f({},n),{},{isPreview:!0})}))),Object.entries(S).forEach((function(n){var e=y(n,2),r=e[0],t=e[1];t.forEach((function(n,e){var i;e<t.length-1&&(n.className=o((d(i={},V,p===r),d(i,W,p!==r),i)))}))})),c("ol",{className:o(Y,l),onMouseLeave:function(){return u("current")}},Object.entries(S).map((function(n){var e=y(n,2),r=e[0],t=e[1];return c("li",{key:r,className:o(R,d({},Q,p!==r))},t.map((function(n,e){return c(an,m({key:e},n))})))})))}an.displayName="Step",ln.displayName="Stepper",ln.propTypes={children:r.node.isRequired,currentStep:r.number.isRequired,maxDisplayedSteps:r.number};var sn=function(e){var r=e.children;return c(n.Fragment,null,r)};function pn(n,e){var r=e.currentStep,t=e.rangeStart,o=e.rangeEnd,i=[];return t>0&&i.push({"aria-label":"Previous steps",step:"previous",stepLabel:"+".concat(t),state:t>r+1?"upcoming":"completed",children:c(a,null),isPreview:!0}),i.push.apply(i,h(n.slice(t,o).map((function(n){return f({},n)})))),o<n.length&&i.push({"aria-label":"Next steps",step:"next",stepLabel:"+".concat(n.length-o),state:"upcoming",children:c(a,null),isPreview:!0}),i}function cn(n){return n instanceof Array?n.map((function(n){return cn(n)})).join(""):n.toString()}function un(n){var e=n.currentStep,r=n.numSteps,t=n.maxDisplayedSteps;if(r<=t)return{rangeStart:0,rangeEnd:r};if(e+1<t)return{rangeStart:0,rangeEnd:t-1};if(e>r-t)return{rangeStart:r-t+1,rangeEnd:r};var o=e-(e-t+1)%(t-2);return{rangeStart:o,rangeEnd:o+t-2}}sn.displayName="Step",sn.propTypes={children:r.oneOfType([r.string,r.number,r.arrayOf(r.oneOfType([r.string,r.number]))]).isRequired};export{sn as Step,ln as Stepper};
import e,{useState as n,useEffect as t,useContext as r,createContext as o}from"react";import{css as i,cx as l}from"@leafygreen-ui/emotion";import a from"@leafygreen-ui/icon/dist/Checkmark";import c from"@leafygreen-ui/icon/dist/Ellipsis";import{palette as d}from"@leafygreen-ui/palette";import{spacing as u}from"@leafygreen-ui/tokens";import{Overline as s,Body as p}from"@leafygreen-ui/typography";import{jsx as g}from"@emotion/react";import{createUniqueClassName as m}from"@leafygreen-ui/lib";import f,{Align as h,Justify as b}from"@leafygreen-ui/tooltip";function y(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function x(){return x=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},x.apply(this,arguments)}function v(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function k(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function C(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var r,o,i=[],l=!0,a=!1;try{for(t=t.call(e);!(l=(r=t.next()).done)&&(i.push(r.value),!n||i.length!==n);l=!0);}catch(e){a=!0,o=e}finally{try{l||null==t.return||t.return()}finally{if(a)throw o}}return i}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return M(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return M(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function M(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var w,O="light",S="dark";!function(e){e.CompletedMultiple="completed-multiple",e.Completed="completed",e.Current="current",e.Upcoming="upcoming",e.UpcomingMultiple="upcoming-multiple"}(w||(w={}));var D,j,z,U,I,N,A,L,T,P,E,F,$,q,B,G,H,J,K,Q,R,V,W,X=o({}),Y=function(){return r(X)},Z=function(e){var r=e.darkMode,o=e.children,i=C(n(r),2),l=i[0],a=i[1];return t((function(){a(r)}),[r]),g(X.Provider,{value:{isDarkMode:l,setIsDarkMode:a}},o)},_=m(),ee=m(),ne=["state","size"],te=function(e){var n=e.state,t=e.content;return n===w.Completed?g(a,null):n===w.UpcomingMultiple||n===w.CompletedMultiple?g(c,null):g(s,{className:i(D||(D=k(["\n font-weight: 500;\n color: inherit;\n "])))},t)},re=i(j||(j=k(["\n color: ",";\n border-color: ",";\n background-color: ",";\n"])),d.white,d.green.dark1,d.green.dark1),oe=i(z||(z=k(["\n color: ",";\n background-color: ",";\n border-color: ",";\n"])),d.green.dark2,d.white,d.green.dark1),ie=i(U||(U=k(["\n color: ",";\n background-color: ",";\n border-color: ",";\n"])),d.gray.dark1,d.white,d.gray.dark1),le=i(I||(I=k(["\n color: ",";\n border-color: ",";\n background-color: ",";\n"])),d.black,d.green.base,d.green.base),ae=i(N||(N=k(["\n color: ",";\n background-color: ",";\n border-color: ",";\n"])),d.green.base,d.black,d.green.base),ce=i(A||(A=k(["\n color: ",";\n background-color: ",";\n border-color: ",";\n"])),d.gray.light1,d.black,d.gray.light1),de=(y(P={},S,(y(L={},w.CompletedMultiple,le),y(L,w.Completed,le),y(L,w.Current,ae),y(L,w.Upcoming,ce),y(L,w.UpcomingMultiple,ce),L)),y(P,O,(y(T={},w.CompletedMultiple,re),y(T,w.Completed,re),y(T,w.Current,oe),y(T,w.Upcoming,ie),y(T,w.UpcomingMultiple,ie),T)),P),ue=function(e){var n=e.state,t=e.size,r=v(e,ne),o=Y().isDarkMode,a=i(E||(E=k(["\n width: ","px;\n height: ","px;\n box-sizing: content-box;\n margin-bottom: ","px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid;\n // TODO: use centralized transition prop\n transition: 0.3s box-shadow ease;\n z-index: 1;\n\n svg {\n width: 100%;\n }\n "])),t,t,u[1]);return g("div",{className:l(ee,a,de[o?S:O][n])},g(te,x({state:n},r)))},se=function(e){var n,t=e.children,r=e.state,o=r===w.Current,a=Y().isDarkMode,c=i(F||(F=k(["\n color: ",";\n text-decoration-line: underline;\n text-decoration-style: dotted;\n text-underline-position: under;\n "])),a?d.green.base:d.green.dark2),u=i($||($=k(["\n color: ",";\n "])),a?d.green.base:d.green.dark2),s=i(q||(q=k(["\n color: ",";\n "])),a?d.white:d.green.dark3),m=i(B||(B=k(["\n color: ",";\n "])),a?d.gray.light1:d.gray.dark1),f=i(G||(G=k(["\n text-decoration-line: underline;\n text-decoration-style: dotted;\n text-underline-position: under;\n color: ",";\n "])),a?d.gray.light1:d.gray.dark1),h=(y(n={},w.CompletedMultiple,c),y(n,w.Completed,u),y(n,w.Current,s),y(n,w.Upcoming,m),y(n,w.UpcomingMultiple,f),n);return g(p,{className:l(h[r],_),weight:o?"medium":"regular"},t)},pe=["children","index","state","ariaLabel","shouldDisplayLine","iconSize","className"],ge=function(e){var n,t=e.children,r=e.index,o=e.state,a=e.ariaLabel,c=void 0===a?"step".concat(r||""):a,s=e.shouldDisplayLine,p=void 0===s||s,m=e.iconSize,f=void 0===m?20:m,h=e.className,b=v(e,pe),C=Y().isDarkMode,M=o===w.Current,O=o===w.Completed||o===w.CompletedMultiple,S=i(H||(H=k(["\n display: flex;\n margin: auto;\n flex-direction: column;\n align-items: center;\n padding-bottom: ","px;\n position: relative; // for the :after line\n\n &:focus-visible {\n outline: none;\n ."," {\n // TODO: should use box-shadow utility for this.\n box-shadow: 0px 0px 0px 2px\n ",",\n 0px 0px 0px 4px ",";\n }\n }\n "])),u[1],ee,C?d.black:d.white,d.blue.light1),D=i(J||(J=k(["\n &:after {\n content: '';\n height: 1px;\n width: 100%;\n position: absolute;\n top: ","px;\n left: 50%;\n z-index: 0;\n background-color: ",";\n }\n "])),f/2,C?d.gray.light1:d.gray.base),j=i(K||(K=k(["\n &:after {\n background-color: ",";\n }\n "])),C?d.green.base:d.green.dark1);return g("div",x({className:l(S,(n={},y(n,D,p),y(n,j,O&&p),n),h),"aria-label":c,"aria-current":M&&"step"},b),g(ue,{state:o,content:r,size:f}),g(se,{state:o},t))},me=["state","children","tooltipContent","startingStepIndex"],fe=function(n){var t,r=n.state,o=n.children,l=n.tooltipContent,a=n.startingStepIndex,c=v(n,me),s=Y().isDarkMode,p=i(Q||(Q=k(["\n // TODO: this is an arbitrary value. It would be nice to have a separate component for <ol> that handles this spacing.\n padding-inline-start: ","px;\n "])),u[4]),m=i(R||(R=k(["\n &:hover ."," {\n // TODO: use centralized box-shadow value\n box-shadow: 0px 0px 0px 3px\n ",";\n }\n "])),ee,s?d.green.dark1:d.green.light2),C=i(V||(V=k(["\n &:hover ."," {\n // TODO: use centralized box-shadow value\n box-shadow: 0px 0px 0px 3px\n ",";\n }\n "])),ee,s?d.gray.dark2:d.gray.light2),M=(y(t={},w.CompletedMultiple,m),y(t,w.UpcomingMultiple,C),t);return g(f,{align:h.Top,justify:b.Middle,darkMode:s,trigger:g("li",null,g(ge,x({className:M[r],state:r,tabIndex:0},c),o))},g("div",null,g("ol",{className:p},e.Children.map(l,(function(e,n){return g("li",{value:a+n},e)})))))},he=["children","currentStep","maxDisplayedSteps","completedStepsShown","darkMode","className"],be=i(W||(W=k(["\n list-style: none;\n padding-inline-start: 0;\n width: 100%;\n display: flex;\n & > * {\n flex: 1;\n }\n"]))),ye=function(n){var t=n.children,r=n.currentStep,o=n.maxDisplayedSteps,i=void 0===o?Array.isArray(t)?t.length:1:o,a=n.completedStepsShown,c=void 0===a?1:a,d=n.darkMode,u=void 0!==d&&d,s=n.className,p=v(n,he),m=e.Children.count(t);i=Math.min(i,m);var f=e.Children.toArray(t),h=Math.min(Math.max(r-c,0),m-i),b=h+i,y=h>0,k=b<m;y&&h++,k&&b--;var C=function(e){return e+1===m},M=function(e,n){return 1===n-e?"Steps ".concat(e," and ").concat(n):"Steps ".concat(e," to ").concat(n)};return g(Z,{darkMode:u},g("ol",x({className:l(be,s),"aria-label":"progress"},p),y&&g(fe,{state:w.CompletedMultiple,startingStepIndex:1,shouldDisplayLine:i>1,tooltipContent:f.slice(0,h)},M(1,h)),e.Children.map(f.slice(h,b),(function(e,n){return g("li",null,g(ge,{state:(t=h+n,t<r?w.Completed:t===r?w.Current:w.Upcoming),shouldDisplayLine:!C(h+n),index:h+n+1},e));var t})),k&&g(fe,{state:w.UpcomingMultiple,startingStepIndex:b+1,shouldDisplayLine:!1,tooltipContent:f.slice(b,m)},M(b+1,m))))},xe=e.Fragment;export{xe as Step,ye as default};
//# sourceMappingURL=index.js.map

7

dist/index.d.ts

@@ -1,2 +0,7 @@

export { Step, Stepper } from './Stepper';
import Stepper from './Stepper';
import Step from './Step';
import type { StepperProps } from './types';
export { Step };
export type { StepperProps };
export default Stepper;
//# sourceMappingURL=index.d.ts.map

2

dist/index.js

@@ -1,2 +0,2 @@

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("prop-types"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/icon/dist/Checkmark"),require("@leafygreen-ui/icon/dist/Ellipsis"),require("polished"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"),require("@emotion/react")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@leafygreen-ui/emotion","@leafygreen-ui/icon/dist/Checkmark","@leafygreen-ui/icon/dist/Ellipsis","polished","@leafygreen-ui/lib","@leafygreen-ui/palette","@emotion/react"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/stepper"]={},e.React,e.PropTypes,e["@leafygreen-ui/emotion"],e.Checkmark,e.Ellipsis,e.polished,e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"],e.react)}(this,(function(e,n,t,r,o,i,a,s,l,c){"use strict";function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u,f,d,b,y,g,m,h,x,v,w,j,S,O,k,P,B,N=p(n),E=p(t),A=p(o),C=p(i);function T(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function z(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?T(Object(t),!0).forEach((function(n){q(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):T(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function q(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function D(){return(D=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function M(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function I(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function L(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var r,o,i=[],a=!0,s=!1;try{for(t=t.call(e);!(a=(r=t.next()).done)&&(i.push(r.value),!n||i.length!==n);a=!0);}catch(e){s=!0,o=e}finally{try{a||null==t.return||t.return()}finally{if(s)throw o}}return i}(e,n)||X(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function R(e){return function(e){if(Array.isArray(e))return H(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||X(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function X(e,n){if(e){if("string"==typeof e)return H(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?H(e,n):void 0}}function H(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var _=48,F={stepBoxTop:s.createDataProp("step-box-top"),stepBoxBottom:s.createDataProp("step-box-bottom")},U=r.css(u||(u=I(["\n display: flex;\n position: absolute;\n left: 0;\n height: 100%;\n width: 100%;\n transition: opacity 700ms, visibility 700ms;\n"]))),$=r.css(f||(f=I(["\n display: flex;\n flex-wrap: wrap;\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: -1;\n\n // Safari doesn't correctly position absolutely positioned elements inside flex containers\n // https://developers.google.com/web/updates/2016/06/absolute-positioned-children\n left: 0;\n top: 0;\n"]))),G=r.css(d||(d=I(["\n display: inline-block;\n\n height: 50%;\n width: 100%;\n\n & > *,\n &:before,\n &:after {\n display: inline-block;\n height: 100%;\n background: white;\n border: 1px solid #dee0e3;\n }\n\n & > * {\n width: calc(100% - ","px);\n margin-right: -","px;\n border-left: none;\n border-right: none;\n }\n\n &:before,\n &:after {\n content: '';\n width: ","px;\n }\n\n &:before {\n border-right: none;\n }\n\n &:after {\n border-left: none;\n }\n"])),16,16,16),J=r.css(b||(b=I(["\n ",";\n\n & > * {\n border-bottom: none;\n }\n\n &:before,\n &:after {\n border-bottom: none;\n transform-origin: 50% 0%;\n transform: skewX(","rad);\n }\n"])),G,Math.atan(2/3)),K=r.css(y||(y=I(["\n ",";\n\n & > * {\n border-top: none;\n }\n\n &:before,\n &:after {\n border-top: none;\n transform-origin: 50% 100%;\n transform: skewX(","rad);\n }\n"])),G,-Math.atan(2/3)),Q=r.css(g||(g=I(["\n flex: 1;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: calc(100% + 2px);\n min-width: 0; // https://css-tricks.com/flexbox-truncated-text/\n margin-left: -","px;\n margin-top: -1px;\n margin-bottom: -1px;\n padding-left: ","px;\n padding-right: 16px;\n\n color: ",";\n font-family: Akzidenz, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-size: 14px;\n font-weight: bold;\n\n z-index: 2;\n\n &:first-of-type {\n margin-left: 0;\n padding-left: 16px;\n\n ",", "," {\n &:before {\n transform: none;\n }\n }\n }\n\n &:last-of-type {\n padding-left: calc(","px);\n\n ",", "," {\n &:after {\n transform: none;\n }\n }\n }\n"])),17,32,l.uiColors.gray.dark3,F.stepBoxTop.selector,F.stepBoxBottom.selector,48,F.stepBoxTop.selector,F.stepBoxBottom.selector),V=r.css(m||(m=I(["\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n"]))),W=r.css(h||(h=I(["\n filter: drop-shadow(0px 4px 4px ",");\n z-index: 3;\n\n &:last-of-type:not(:first-of-type) {\n ",":before {\n transform: skewX(","rad);\n }\n\n ",":before {\n transform: skewX(-","rad);\n }\n }\n"])),a.transparentize(.75,l.uiColors.black),F.stepBoxTop.selector,Math.atan(2/3),F.stepBoxBottom.selector,Math.atan(2/3)),Y=r.css(x||(x=I(["\n color: ",";\n z-index: 1;\n\n &:last-of-type {\n z-index: 0;\n }\n\n ",", "," {\n & > *,\n &:before,\n &:after {\n background: ",";\n border-color: ",";\n }\n }\n"])),l.uiColors.gray.base,F.stepBoxTop.selector,F.stepBoxBottom.selector,l.uiColors.gray.light3,l.uiColors.gray.light2),Z=r.css(v||(v=I(["\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n"]))),ee=r.css(w||(w=I(["\n left: 0;\n transition: left 700ms;\n"]))),ne=r.css(j||(j=I(["\n left: ","px;\n transition: left 700ms;\n"])),-32),te=r.css(S||(S=I(["\n position: relative;\n z-index: 0;\n height: ","px;\n width: 100%;\n\n background: ",";\n border-bottom: 1px solid;\n border-top: 1px solid;\n border-color: ",";\n"])),_,l.uiColors.gray.light3,l.uiColors.gray.light2),re=r.css(O||(O=I(["\n display: flex;\n position: absolute;\n\n align-items: center;\n justify-content: center;\n top: calc(100% - 12px);\n\n height: 24px;\n min-width: 24px;\n max-width: max-content;\n\n font-size: 12px;\n line-height: 14px;\n\n border-radius: 12px;\n border: 1px solid;\n"]))),oe=r.css(k||(k=I(["\n background-color: white;\n border-color: ",";\n color: ",";\n"])),l.uiColors.green.base,l.uiColors.green.base),ie=r.css(P||(P=I(["\n background-color: ",";\n border-color: #464c4f;\n color: white;\n"])),l.uiColors.gray.dark2),ae=r.css(B||(B=I(["\n background-color: white;\n border-color: ",";\n color: ",";\n"])),l.uiColors.gray.light1,l.uiColors.gray.base),se=r.css("padding: 0 8px;"),le=r.css("cursor: pointer;"),ce=["children","state","stepLabel","isPreview","className"];function pe(e){var n,t,o=e.children,i=e.state,a=e.stepLabel,s=e.isPreview,l=e.className,p=M(e,ce),u="current"===i,f="upcoming"===i,d="completed"===i;return c.jsx("div",D({className:"".concat(r.cx(Q,(n={},q(n,W,u),q(n,Y,f),q(n,le,s),n))," ").concat(l)},p),a&&c.jsx("div",{className:r.cx(re,(t={},q(t,ie,u),q(t,oe,d),q(t,ae,f),q(t,le,s),t))},d?c.jsx(A.default,null):c.jsx("div",{className:se},a)),c.jsx("div",{className:r.cx(V,q({},le,s))},o),c.jsx("div",{className:$},c.jsx("span",D({className:J},F.stepBoxTop.prop),c.jsx("div",null)),c.jsx("span",D({className:K},F.stepBoxBottom.prop),c.jsx("div",null))))}function ue(e){var t=e.children,o=e.currentStep,i=e.maxDisplayedSteps,a=void 0===i?Array.isArray(t)?t.length:1:i,s=e.className,l=L(n.useState("current"),2),p=l[0],u=l[1],f=(Array.isArray(t)?t:[t]).map((function(e,n){var t;return t=n<o?"completed":n===o?"current":"upcoming",{"aria-label":be(e.props.children),"aria-current":o===n?"step":void 0,step:n,stepLabel:(n+1).toString(),state:t,children:e,isPreview:!1}})),d=f.length,b=ye({currentStep:o,numSteps:d,maxDisplayedSteps:a}),y=b.rangeStart,g=b.rangeEnd,m=de(f,{currentStep:o,rangeStart:y,rangeEnd:g}),h={current:m};return y>0&&(m[0].onMouseOver=function(){u("previous")},h.previous=de(f,z({currentStep:o},ye({currentStep:y-1,numSteps:d,maxDisplayedSteps:a}))).map((function(e){return z(z({},e),{},{isPreview:!0})}))),g<d-1&&(m[m.length-1].onMouseOver=function(){u("next")},h.next=de(f,z({currentStep:o},ye({currentStep:g,numSteps:d,maxDisplayedSteps:a}))).map((function(e){return z(z({},e),{},{isPreview:!0})}))),Object.entries(h).forEach((function(e){var n=L(e,2),t=n[0],o=n[1];o.forEach((function(e,n){var i;n<o.length-1&&(e.className=r.cx((q(i={},ee,p===t),q(i,ne,p!==t),i)))}))})),c.jsx("ol",{className:r.cx(te,s),onMouseLeave:function(){return u("current")}},Object.entries(h).map((function(e){var n=L(e,2),t=n[0],o=n[1];return c.jsx("li",{key:t,className:r.cx(U,q({},Z,p!==t))},o.map((function(e,n){return c.jsx(pe,D({key:n},e))})))})))}pe.displayName="Step",ue.displayName="Stepper",ue.propTypes={children:E.default.node.isRequired,currentStep:E.default.number.isRequired,maxDisplayedSteps:E.default.number};var fe=function(e){var n=e.children;return c.jsx(N.default.Fragment,null,n)};function de(e,n){var t=n.currentStep,r=n.rangeStart,o=n.rangeEnd,i=[];return r>0&&i.push({"aria-label":"Previous steps",step:"previous",stepLabel:"+".concat(r),state:r>t+1?"upcoming":"completed",children:c.jsx(C.default,null),isPreview:!0}),i.push.apply(i,R(e.slice(r,o).map((function(e){return z({},e)})))),o<e.length&&i.push({"aria-label":"Next steps",step:"next",stepLabel:"+".concat(e.length-o),state:"upcoming",children:c.jsx(C.default,null),isPreview:!0}),i}function be(e){return e instanceof Array?e.map((function(e){return be(e)})).join(""):e.toString()}function ye(e){var n=e.currentStep,t=e.numSteps,r=e.maxDisplayedSteps;if(t<=r)return{rangeStart:0,rangeEnd:t};if(n+1<r)return{rangeStart:0,rangeEnd:r-1};if(n>t-r)return{rangeStart:t-r+1,rangeEnd:t};var o=n-(n-r+1)%(r-2);return{rangeStart:o,rangeEnd:o+r-2}}fe.displayName="Step",fe.propTypes={children:E.default.oneOfType([E.default.string,E.default.number,E.default.arrayOf(E.default.oneOfType([E.default.string,E.default.number]))]).isRequired},e.Step=fe,e.Stepper=ue,Object.defineProperty(e,"__esModule",{value:!0})}));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/icon/dist/Checkmark"),require("@leafygreen-ui/icon/dist/Ellipsis"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/typography"),require("@emotion/react"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/tooltip")):"function"==typeof define&&define.amd?define(["exports","react","@leafygreen-ui/emotion","@leafygreen-ui/icon/dist/Checkmark","@leafygreen-ui/icon/dist/Ellipsis","@leafygreen-ui/palette","@leafygreen-ui/tokens","@leafygreen-ui/typography","@emotion/react","@leafygreen-ui/lib","@leafygreen-ui/tooltip"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/stepper"]={},e.React,e["@leafygreen-ui/emotion"],e.Checkmark,e.Ellipsis,e["@leafygreen-ui/palette"],e["@leafygreen-ui/tokens"],e["@leafygreen-ui/typography"],e.react,e["@leafygreen-ui/lib"],e["@leafygreen-ui/tooltip"])}(this,(function(e,t,n,r,a,l,i,o,s,c,u){"use strict";function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=p(t),g=p(r),f=p(a),y=p(u);function x(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function m(){return m=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},m.apply(this,arguments)}function h(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}function b(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function v(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,a,l=[],i=!0,o=!1;try{for(n=n.call(e);!(i=(r=n.next()).done)&&(l.push(r.value),!t||l.length!==t);i=!0);}catch(e){o=!0,a=e}finally{try{i||null==n.return||n.return()}finally{if(o)throw a}}return l}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return k(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return k(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function k(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var j,C="light",M="dark";!function(e){e.CompletedMultiple="completed-multiple",e.Completed="completed",e.Current="current",e.Upcoming="upcoming",e.UpcomingMultiple="upcoming-multiple"}(j||(j={}));var w,O,S,D,U,z,N,q,I,A,T,L,P,E,_,B,F,J,R,$,G,H,K,Q=t.createContext({}),V=function(){return t.useContext(Q)},W=function(e){var n=e.darkMode,r=e.children,a=v(t.useState(n),2),l=a[0],i=a[1];return t.useEffect((function(){i(n)}),[n]),s.jsx(Q.Provider,{value:{isDarkMode:l,setIsDarkMode:i}},r)},X=c.createUniqueClassName(),Y=c.createUniqueClassName(),Z=["state","size"],ee=function(e){var t=e.state,r=e.content;return t===j.Completed?s.jsx(g.default,null):t===j.UpcomingMultiple||t===j.CompletedMultiple?s.jsx(f.default,null):s.jsx(o.Overline,{className:n.css(w||(w=b(["\n font-weight: 500;\n color: inherit;\n "])))},r)},te=n.css(O||(O=b(["\n color: ",";\n border-color: ",";\n background-color: ",";\n"])),l.palette.white,l.palette.green.dark1,l.palette.green.dark1),ne=n.css(S||(S=b(["\n color: ",";\n background-color: ",";\n border-color: ",";\n"])),l.palette.green.dark2,l.palette.white,l.palette.green.dark1),re=n.css(D||(D=b(["\n color: ",";\n background-color: ",";\n border-color: ",";\n"])),l.palette.gray.dark1,l.palette.white,l.palette.gray.dark1),ae=n.css(U||(U=b(["\n color: ",";\n border-color: ",";\n background-color: ",";\n"])),l.palette.black,l.palette.green.base,l.palette.green.base),le=n.css(z||(z=b(["\n color: ",";\n background-color: ",";\n border-color: ",";\n"])),l.palette.green.base,l.palette.black,l.palette.green.base),ie=n.css(N||(N=b(["\n color: ",";\n background-color: ",";\n border-color: ",";\n"])),l.palette.gray.light1,l.palette.black,l.palette.gray.light1),oe=(x(A={},M,(x(q={},j.CompletedMultiple,ae),x(q,j.Completed,ae),x(q,j.Current,le),x(q,j.Upcoming,ie),x(q,j.UpcomingMultiple,ie),q)),x(A,C,(x(I={},j.CompletedMultiple,te),x(I,j.Completed,te),x(I,j.Current,ne),x(I,j.Upcoming,re),x(I,j.UpcomingMultiple,re),I)),A),se=function(e){var t=e.state,r=e.size,a=h(e,Z),l=V().isDarkMode,o=n.css(T||(T=b(["\n width: ","px;\n height: ","px;\n box-sizing: content-box;\n margin-bottom: ","px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid;\n // TODO: use centralized transition prop\n transition: 0.3s box-shadow ease;\n z-index: 1;\n\n svg {\n width: 100%;\n }\n "])),r,r,i.spacing[1]);return s.jsx("div",{className:n.cx(Y,o,oe[l?M:C][t])},s.jsx(ee,m({state:t},a)))},ce=function(e){var t,r=e.children,a=e.state,i=a===j.Current,c=V().isDarkMode,u=n.css(L||(L=b(["\n color: ",";\n text-decoration-line: underline;\n text-decoration-style: dotted;\n text-underline-position: under;\n "])),c?l.palette.green.base:l.palette.green.dark2),p=n.css(P||(P=b(["\n color: ",";\n "])),c?l.palette.green.base:l.palette.green.dark2),d=n.css(E||(E=b(["\n color: ",";\n "])),c?l.palette.white:l.palette.green.dark3),g=n.css(_||(_=b(["\n color: ",";\n "])),c?l.palette.gray.light1:l.palette.gray.dark1),f=n.css(B||(B=b(["\n text-decoration-line: underline;\n text-decoration-style: dotted;\n text-underline-position: under;\n color: ",";\n "])),c?l.palette.gray.light1:l.palette.gray.dark1),y=(x(t={},j.CompletedMultiple,u),x(t,j.Completed,p),x(t,j.Current,d),x(t,j.Upcoming,g),x(t,j.UpcomingMultiple,f),t);return s.jsx(o.Body,{className:n.cx(y[a],X),weight:i?"medium":"regular"},r)},ue=["children","index","state","ariaLabel","shouldDisplayLine","iconSize","className"],pe=function(e){var t,r=e.children,a=e.index,o=e.state,c=e.ariaLabel,u=void 0===c?"step".concat(a||""):c,p=e.shouldDisplayLine,d=void 0===p||p,g=e.iconSize,f=void 0===g?20:g,y=e.className,v=h(e,ue),k=V().isDarkMode,C=o===j.Current,M=o===j.Completed||o===j.CompletedMultiple,w=n.css(F||(F=b(["\n display: flex;\n margin: auto;\n flex-direction: column;\n align-items: center;\n padding-bottom: ","px;\n position: relative; // for the :after line\n\n &:focus-visible {\n outline: none;\n ."," {\n // TODO: should use box-shadow utility for this.\n box-shadow: 0px 0px 0px 2px\n ",",\n 0px 0px 0px 4px ",";\n }\n }\n "])),i.spacing[1],Y,k?l.palette.black:l.palette.white,l.palette.blue.light1),O=n.css(J||(J=b(["\n &:after {\n content: '';\n height: 1px;\n width: 100%;\n position: absolute;\n top: ","px;\n left: 50%;\n z-index: 0;\n background-color: ",";\n }\n "])),f/2,k?l.palette.gray.light1:l.palette.gray.base),S=n.css(R||(R=b(["\n &:after {\n background-color: ",";\n }\n "])),k?l.palette.green.base:l.palette.green.dark1);return s.jsx("div",m({className:n.cx(w,(t={},x(t,O,d),x(t,S,M&&d),t),y),"aria-label":u,"aria-current":C&&"step"},v),s.jsx(se,{state:o,content:a,size:f}),s.jsx(ce,{state:o},r))},de=["state","children","tooltipContent","startingStepIndex"],ge=function(e){var t,r=e.state,a=e.children,o=e.tooltipContent,c=e.startingStepIndex,p=h(e,de),g=V().isDarkMode,f=n.css($||($=b(["\n // TODO: this is an arbitrary value. It would be nice to have a separate component for <ol> that handles this spacing.\n padding-inline-start: ","px;\n "])),i.spacing[4]),v=n.css(G||(G=b(["\n &:hover ."," {\n // TODO: use centralized box-shadow value\n box-shadow: 0px 0px 0px 3px\n ",";\n }\n "])),Y,g?l.palette.green.dark1:l.palette.green.light2),k=n.css(H||(H=b(["\n &:hover ."," {\n // TODO: use centralized box-shadow value\n box-shadow: 0px 0px 0px 3px\n ",";\n }\n "])),Y,g?l.palette.gray.dark2:l.palette.gray.light2),C=(x(t={},j.CompletedMultiple,v),x(t,j.UpcomingMultiple,k),t);return s.jsx(y.default,{align:u.Align.Top,justify:u.Justify.Middle,darkMode:g,trigger:s.jsx("li",null,s.jsx(pe,m({className:C[r],state:r,tabIndex:0},p),a))},s.jsx("div",null,s.jsx("ol",{className:f},d.default.Children.map(o,(function(e,t){return s.jsx("li",{value:c+t},e)})))))},fe=["children","currentStep","maxDisplayedSteps","completedStepsShown","darkMode","className"],ye=n.css(K||(K=b(["\n list-style: none;\n padding-inline-start: 0;\n width: 100%;\n display: flex;\n & > * {\n flex: 1;\n }\n"]))),xe=d.default.Fragment;e.Step=xe,e.default=function(e){var t=e.children,r=e.currentStep,a=e.maxDisplayedSteps,l=void 0===a?Array.isArray(t)?t.length:1:a,i=e.completedStepsShown,o=void 0===i?1:i,c=e.darkMode,u=void 0!==c&&c,p=e.className,g=h(e,fe),f=d.default.Children.count(t);l=Math.min(l,f);var y=d.default.Children.toArray(t),x=Math.min(Math.max(r-o,0),f-l),b=x+l,v=x>0,k=b<f;v&&x++,k&&b--;var C=function(e){return e+1===f},M=function(e,t){return 1===t-e?"Steps ".concat(e," and ").concat(t):"Steps ".concat(e," to ").concat(t)};return s.jsx(W,{darkMode:u},s.jsx("ol",m({className:n.cx(ye,p),"aria-label":"progress"},g),v&&s.jsx(ge,{state:j.CompletedMultiple,startingStepIndex:1,shouldDisplayLine:l>1,tooltipContent:y.slice(0,x)},M(1,x)),d.default.Children.map(y.slice(x,b),(function(e,t){return s.jsx("li",null,s.jsx(pe,{state:(n=x+t,n<r?j.Completed:n===r?j.Current:j.Upcoming),shouldDisplayLine:!C(x+t),index:x+t+1},e));var n})),k&&s.jsx(ge,{state:j.UpcomingMultiple,startingStepIndex:b+1,shouldDisplayLine:!1,tooltipContent:y.slice(b,f)},M(b+1,f))))},Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=index.js.map

36

dist/Stepper.d.ts

@@ -1,33 +0,5 @@

import React from 'react';
import PropTypes from 'prop-types';
declare type StepContents = string | number | Array<StepContents>;
declare type StepElement = React.ReactElement<{
children: StepContents;
}>;
export declare type StepElements = StepElement | Array<StepElement>;
interface StepperProps {
children: StepElements;
currentStep: number;
maxDisplayedSteps?: number;
className?: string;
}
export declare function Stepper({ children, currentStep, maxDisplayedSteps, className, }: StepperProps): JSX.Element;
export declare namespace Stepper {
var displayName: string;
var propTypes: {
children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
currentStep: PropTypes.Validator<number>;
maxDisplayedSteps: PropTypes.Requireable<number>;
};
}
export declare const Step: {
({ children, }: {
children: StepContents;
}): StepElement;
displayName: string;
propTypes: {
children: PropTypes.Validator<string | number | (string | number | null | undefined)[]>;
};
};
export {};
import { OlHTMLAttributes, PropsWithChildren } from 'react';
import { StepperProps } from './types';
declare const Stepper: ({ children, currentStep, maxDisplayedSteps, completedStepsShown, darkMode, className, ...rest }: PropsWithChildren<StepperProps & OlHTMLAttributes<HTMLOListElement>>) => JSX.Element;
export default Stepper;
//# sourceMappingURL=Stepper.d.ts.map

6

package.json
{
"name": "@leafygreen-ui/stepper",
"version": "2.1.6",
"version": "3.0.0",
"description": "leafyGreen UI Kit Stepper",

@@ -25,6 +25,8 @@ "main": "./dist/index.js",

"@leafygreen-ui/icon": "^11.6.0",
"@leafygreen-ui/lib": "^9.1.0",
"@leafygreen-ui/lib": "^9.2.1",
"@leafygreen-ui/palette": "^3.2.2",
"@leafygreen-ui/tooltip": "^7.0.0",
"@leafygreen-ui/typography": "^10.0.0",
"polished": "^4.1.3"
}
}

61

README.md

@@ -25,2 +25,11 @@ # Stepper

<Stepper currentStep={0} maxDisplayedSteps={2}>
<div>Step 1</div>
<div>Step 2</div>
</Stepper>
```
or
```js
<Stepper currentStep={0} maxDisplayedSteps={2}>
<Step>Step 1</Step>

@@ -34,31 +43,20 @@ <Step>Step 2</Step>

```html
<div aria-label="breadcrumbs" class="leafygreen-ui-13pcgvz">
<div class="leafygreen-ui-plizcc">
<div
class="leafygreen-ui-1cyt2ch"
aria-label="Step 1"
aria-current="step"
step="0"
>
<div class="leafygreen-ui-7uty9f">
<div class="leafygreen-ui-gbxl1s">1</div>
<ol class="leafygreen-ui-1pvgjhr" aria-label="progress">
<li>
<div class="leafygreen-ui-1x8f1m7" aria-label="step1" aria-current="step">
<div class="lg-ui-03f12bfd leafygreen-ui-1dyv85w">
<div class="leafygreen-ui-17xqetg">1</div>
</div>
Step 1
<div class="leafygreen-ui-1d8yxum">
<span class="leafygreen-ui-1tyue0g"><div></div></span>
<span class="leafygreen-ui-s0bv6u"><div></div></span>
</div>
<p class="lg-ui-d036aa4e leafygreen-ui-1u866nc">Step 1</p>
</div>
<div class="leafygreen-ui-15p2xzb" aria-label="Step 2" step="1">
<div class="leafygreen-ui-9u2rvb">
<div class="leafygreen-ui-gbxl1s">2</div>
</li>
<li>
<div class="leafygreen-ui-1x8f1m7" aria-label="step2" aria-current="false">
<div class="lg-ui-03f12bfd leafygreen-ui-1oypnhq">
<div class="leafygreen-ui-17xqetg">2</div>
</div>
Step 2
<div class="leafygreen-ui-1d8yxum">
<span class="leafygreen-ui-1tyue0g"><div></div></span>
<span class="leafygreen-ui-s0bv6u"><div></div></span>
</div>
<p class="lg-ui-d036aa4e leafygreen-ui-1uk291k">Step 2</p>
</div>
</div>
</div>
</li>
</ol>
```

@@ -68,7 +66,8 @@

| Prop | Type | Description | Default |
| ------------------- | -------------- | ---------------------------------------------------------------- | ----------------- |
| `children` | `StepElements` | Strings wrapped in `<Step></Step>` to display as each step | |
| `currentStep` | `number` | Starting at 0, index of current step that should be highlighted. | |
| `maxDisplayedSteps` | `number` | Maximum number of steps displayed a time. The rest are hidden. | `children.length` |
| `className` | `string` | className applied to the root element | |
| Prop | Type | Description | Default |
| --------------------- | ----------------- | ------------------------------------------------------------------------------------------------------ | ----------------- |
| `children` | `React.ReactNode` | ReactNode to display as the children of each step | |
| `currentStep` | `number` | Starting at 0, index of current step that should be highlighted. | |
| `maxDisplayedSteps` | `number` | Maximum number of steps displayed a time. The rest are hidden. | `children.length` |
| `completedStepsShown` | `number` | Number of completed steps shown before the `currentStep`. The ellipses step is included in this count. | 1 |
| `className` | `string` | className applied to the root element | |

7

src/index.ts

@@ -1,1 +0,6 @@

export { Step, Stepper } from './Stepper';
import Stepper from './Stepper';
import Step from './Step';
import type { StepperProps } from './types';
export { Step };
export type { StepperProps };
export default Stepper;

6

tsconfig.json

@@ -21,4 +21,10 @@ {

"path": "../palette"
},
{
"path": "../tooltip"
},
{
"path": "../typography"
}
]
}
dist/styles.d.ts
dist/styles.d.ts.map
src/styles.ts
dist/esm/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.d.ts.map

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/Stepper.d.ts.map

Sorry, the diff of this file is not supported yet

src/Stepper.spec.tsx

Sorry, the diff of this file is not supported yet

src/Stepper.story.tsx

Sorry, the diff of this file is not supported yet

src/Stepper.tsx

Sorry, the diff of this file is not supported yet

tsconfig.tsbuildinfo

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc