@leafygreen-ui/stepper
Advanced tools
Comparing version 2.0.0 to 2.0.1
# @leafygreen-ui/stepper | ||
## 2.0.1 | ||
### Patch Changes | ||
- dac3f38b: Fixes a publishing error that prevented UMD modules from being distributed | ||
- Updated dependencies [dac3f38b] | ||
- @leafygreen-ui/emotion@3.0.1 | ||
- @leafygreen-ui/icon@7.0.1 | ||
- @leafygreen-ui/lib@6.0.1 | ||
- @leafygreen-ui/palette@3.0.1 | ||
## 2.0.0 | ||
@@ -4,0 +15,0 @@ |
@@ -1,2 +0,2 @@ | ||
import n,{useState as e}from"react";import t from"prop-types";import{css as r,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 c}from"polished";import{createDataProp as l}from"@leafygreen-ui/lib";import{uiColors as s}from"@leafygreen-ui/palette";function u(n,e,t){return e in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}function p(){return(p=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n}).apply(this,arguments)}function f(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),t.push.apply(t,r)}return t}function d(n){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?f(Object(t),!0).forEach((function(e){u(n,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):f(Object(t)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}))}return n}function m(n,e){if(null==n)return{};var t,r,o=function(n,e){if(null==n)return{};var t,r,o={},i=Object.keys(n);for(r=0;r<i.length;r++)t=i[r],e.indexOf(t)>=0||(o[t]=n[t]);return o}(n,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);for(r=0;r<i.length;r++)t=i[r],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(n,t)&&(o[t]=n[t])}return o}function b(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function g(n,e){return function(n){if(Array.isArray(n))return n}(n)||function(n,e){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(n)))return;var t=[],r=!0,o=!1,i=void 0;try{for(var a,c=n[Symbol.iterator]();!(r=(a=c.next()).done)&&(t.push(a.value),!e||t.length!==e);r=!0);}catch(n){o=!0,i=n}finally{try{r||null==c.return||c.return()}finally{if(o)throw i}}return t}(n,e)||h(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 y(n){return function(n){if(Array.isArray(n))return v(n)}(n)||function(n){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(n))return Array.from(n)}(n)||h(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 h(n,e){if(n){if("string"==typeof n)return v(n,e);var t=Object.prototype.toString.call(n).slice(8,-1);return"Object"===t&&n.constructor&&(t=n.constructor.name),"Map"===t||"Set"===t?Array.from(t):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?v(n,e):void 0}}function v(n,e){(null==e||e>n.length)&&(e=n.length);for(var t=0,r=new Array(e);t<e;t++)r[t]=n[t];return r}function x(){var n=b(["\n background-color: white;\n border-color: ",";\n color: ",";\n"]);return x=function(){return n},n}function w(){var n=b(["\n background-color: ",";\n border-color: #464c4f;\n color: white;\n"]);return w=function(){return n},n}function S(){var n=b(["\n background-color: white;\n border-color: ",";\n color: ",";\n"]);return S=function(){return n},n}function O(){var n=b(["\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"]);return O=function(){return n},n}function j(){var n=b(["\n position: relative;\n height: ","px;\n width: 100%;\n\n background: ",";\n border-bottom: 1px solid;\n border-top: 1px solid;\n border-color: ",";\n"]);return j=function(){return n},n}function E(){var n=b(["\n left: ","px;\n transition: left 700ms;\n"]);return E=function(){return n},n}function k(){var n=b(["\n left: 0;\n transition: left 700ms;\n"]);return k=function(){return n},n}function P(){var n=b(["\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n"]);return P=function(){return n},n}function B(){var n=b(["\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"]);return B=function(){return n},n}function N(){var n=b(["\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"]);return N=function(){return n},n}function A(){var n=b(["\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n"]);return A=function(){return n},n}function T(){var n=b(["\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"]);return T=function(){return n},n}function z(){var n=b(["\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"]);return z=function(){return n},n}function D(){var n=b(["\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"]);return D=function(){return n},n}function M(){var n=b(["\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"]);return M=function(){return n},n}function I(){var n=b(["\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"]);return I=function(){return n},n}function L(){var n=b(["\n display: flex;\n position: absolute;\n left: 0;\n height: 100%;\n width: 100%;\n transition: opacity 700ms, visibility 700ms;\n"]);return L=function(){return n},n}var X={stepBoxTop:l("step-box-top"),stepBoxBottom:l("step-box-bottom")},q=r(L()),R=r(I()),C=r(M(),16,16,16),H=r(D(),C,Math.atan(2/3)),F=r(z(),C,-Math.atan(2/3)),U=r(T(),17,32,s.gray.dark3,X.stepBoxTop.selector,X.stepBoxBottom.selector,48,X.stepBoxTop.selector,X.stepBoxBottom.selector),$=r(A()),G=r(N(),c(.75,s.black),X.stepBoxTop.selector,Math.atan(2/3),X.stepBoxBottom.selector,Math.atan(2/3)),J=r(B(),s.gray.base,X.stepBoxTop.selector,X.stepBoxBottom.selector,s.gray.light3,s.gray.light2),K=r(P()),Q=r(k()),V=r(E(),-32),W=r(j(),48,s.gray.light3,s.gray.light2),Y=r(O()),Z=r(S(),s.green.base,s.green.base),_=r(w(),s.gray.dark2),nn=r(x(),s.gray.light1,s.gray.base),en=r("padding: 0 8px;"),tn=r("cursor: pointer;");function rn(e){var t,r,a=e.children,c=e.state,l=e.stepLabel,s=e.isPreview,f=e.className,d=m(e,["children","state","stepLabel","isPreview","className"]),b="current"===c,g="upcoming"===c,y="completed"===c;return n.createElement("div",p({className:"".concat(o(U,(t={},u(t,G,b),u(t,J,g),u(t,tn,s),t))," ").concat(f)},d),l&&n.createElement("div",{className:o(Y,(r={},u(r,_,b),u(r,Z,y),u(r,nn,g),u(r,tn,s),r))},y?n.createElement(i,null):n.createElement("div",{className:en},l)),n.createElement("div",{className:o($,u({},tn,s))},a),n.createElement("div",{className:R},n.createElement("span",p({className:H},X.stepBoxTop.prop),n.createElement("div",null)),n.createElement("span",p({className:F},X.stepBoxBottom.prop),n.createElement("div",null))))}function on(t){var r=t.children,i=t.currentStep,a=t.maxDisplayedSteps,c=void 0===a?Array.isArray(r)?r.length:1:a,l=g(e("current"),2),s=l[0],f=l[1],m=(Array.isArray(r)?r:[r]).map((function(n,e){var t;return t=e<i?"completed":e===i?"current":"upcoming",{"aria-label":ln(n.props.children),"aria-current":i===e?"step":void 0,step:e,stepLabel:(e+1).toString(),state:t,children:n,isPreview:!1}})),b=m.length,y=sn({currentStep:i,numSteps:b,maxDisplayedSteps:c}),h=y.rangeStart,v=y.rangeEnd,x=cn(m,{currentStep:i,rangeStart:h,rangeEnd:v}),w={current:x};return h>0&&(x[0].onMouseOver=function(){f("previous")},w.previous=cn(m,d({currentStep:i},sn({currentStep:h-1,numSteps:b,maxDisplayedSteps:c}))).map((function(n){return d({},n,{isPreview:!0})}))),v<b-1&&(x[x.length-1].onMouseOver=function(){f("next")},w.next=cn(m,d({currentStep:i},sn({currentStep:v,numSteps:b,maxDisplayedSteps:c}))).map((function(n){return d({},n,{isPreview:!0})}))),Object.entries(w).forEach((function(n){var e=g(n,2),t=e[0],r=e[1];r.forEach((function(n,e){var i;e<r.length-1&&(n.className=o((u(i={},Q,s===t),u(i,V,s!==t),i)))}))})),n.createElement("ol",{className:W,onMouseLeave:function(){return f("current")}},Object.entries(w).map((function(e){var t=g(e,2),r=t[0],i=t[1];return n.createElement("li",{key:r,className:o(q,u({},K,s!==r))},i.map((function(e,t){return n.createElement(rn,p({key:t},e))})))})))}rn.displayName="Step",on.displayName="Stepper",on.propTypes={children:t.node.isRequired,currentStep:t.number.isRequired,maxDisplayedSteps:t.number};var an=function(e){var t=e.children;return n.createElement(n.Fragment,null,t)};function cn(e,t){var r=t.currentStep,o=t.rangeStart,i=t.rangeEnd,c=[];return o>0&&c.push({"aria-label":"Previous steps",step:"previous",stepLabel:"+".concat(o),state:o>r+1?"upcoming":"completed",children:n.createElement(a,null),isPreview:!0}),c.push.apply(c,y(e.slice(o,i).map((function(n){return d({},n)})))),i<e.length&&c.push({"aria-label":"Next steps",step:"next",stepLabel:"+".concat(e.length-i),state:"upcoming",children:n.createElement(a,null),isPreview:!0}),c}function ln(n){return n instanceof Array?n.map((function(n){return ln(n)})).join(""):n.toString()}function sn(n){var e=n.currentStep,t=n.numSteps,r=n.maxDisplayedSteps;if(t<=r)return{rangeStart:0,rangeEnd:t};if(e+1<r)return{rangeStart:0,rangeEnd:r-1};if(e>t-r)return{rangeStart:t-r+1,rangeEnd:t};var o=e-(e-r+1)%(r-2);return{rangeStart:o,rangeEnd:o+r-2}}an.displayName="Step",an.propTypes={children:t.oneOfType([t.string,t.number,t.arrayOf(t.oneOfType([t.string,t.number]))]).isRequired};export{an as Step,on as Stepper}; | ||
import n,{useState as e}from"react";import t from"prop-types";import{css as r,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 c}from"polished";import{createDataProp as l}from"@leafygreen-ui/lib";import{uiColors as s}from"@leafygreen-ui/palette";function u(n,e,t){return e in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}function p(){return(p=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n}).apply(this,arguments)}function f(n,e){var t=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),t.push.apply(t,r)}return t}function d(n){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?f(Object(t),!0).forEach((function(e){u(n,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(t)):f(Object(t)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(t,e))}))}return n}function m(n,e){if(null==n)return{};var t,r,o=function(n,e){if(null==n)return{};var t,r,o={},i=Object.keys(n);for(r=0;r<i.length;r++)t=i[r],e.indexOf(t)>=0||(o[t]=n[t]);return o}(n,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);for(r=0;r<i.length;r++)t=i[r],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(n,t)&&(o[t]=n[t])}return o}function b(n,e){return e||(e=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}function g(n,e){return function(n){if(Array.isArray(n))return n}(n)||function(n,e){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(n)))return;var t=[],r=!0,o=!1,i=void 0;try{for(var a,c=n[Symbol.iterator]();!(r=(a=c.next()).done)&&(t.push(a.value),!e||t.length!==e);r=!0);}catch(n){o=!0,i=n}finally{try{r||null==c.return||c.return()}finally{if(o)throw i}}return t}(n,e)||h(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 y(n){return function(n){if(Array.isArray(n))return v(n)}(n)||function(n){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(n))return Array.from(n)}(n)||h(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 h(n,e){if(n){if("string"==typeof n)return v(n,e);var t=Object.prototype.toString.call(n).slice(8,-1);return"Object"===t&&n.constructor&&(t=n.constructor.name),"Map"===t||"Set"===t?Array.from(n):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?v(n,e):void 0}}function v(n,e){(null==e||e>n.length)&&(e=n.length);for(var t=0,r=new Array(e);t<e;t++)r[t]=n[t];return r}function x(){var n=b(["\n background-color: white;\n border-color: ",";\n color: ",";\n"]);return x=function(){return n},n}function w(){var n=b(["\n background-color: ",";\n border-color: #464c4f;\n color: white;\n"]);return w=function(){return n},n}function S(){var n=b(["\n background-color: white;\n border-color: ",";\n color: ",";\n"]);return S=function(){return n},n}function O(){var n=b(["\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"]);return O=function(){return n},n}function j(){var n=b(["\n position: relative;\n height: ","px;\n width: 100%;\n\n background: ",";\n border-bottom: 1px solid;\n border-top: 1px solid;\n border-color: ",";\n"]);return j=function(){return n},n}function E(){var n=b(["\n left: ","px;\n transition: left 700ms;\n"]);return E=function(){return n},n}function k(){var n=b(["\n left: 0;\n transition: left 700ms;\n"]);return k=function(){return n},n}function P(){var n=b(["\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n"]);return P=function(){return n},n}function B(){var n=b(["\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"]);return B=function(){return n},n}function N(){var n=b(["\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"]);return N=function(){return n},n}function A(){var n=b(["\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n"]);return A=function(){return n},n}function T(){var n=b(["\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"]);return T=function(){return n},n}function z(){var n=b(["\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"]);return z=function(){return n},n}function D(){var n=b(["\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"]);return D=function(){return n},n}function M(){var n=b(["\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"]);return M=function(){return n},n}function I(){var n=b(["\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"]);return I=function(){return n},n}function L(){var n=b(["\n display: flex;\n position: absolute;\n left: 0;\n height: 100%;\n width: 100%;\n transition: opacity 700ms, visibility 700ms;\n"]);return L=function(){return n},n}var X={stepBoxTop:l("step-box-top"),stepBoxBottom:l("step-box-bottom")},q=r(L()),R=r(I()),C=r(M(),16,16,16),H=r(D(),C,Math.atan(2/3)),F=r(z(),C,-Math.atan(2/3)),U=r(T(),17,32,s.gray.dark3,X.stepBoxTop.selector,X.stepBoxBottom.selector,48,X.stepBoxTop.selector,X.stepBoxBottom.selector),$=r(A()),G=r(N(),c(.75,s.black),X.stepBoxTop.selector,Math.atan(2/3),X.stepBoxBottom.selector,Math.atan(2/3)),J=r(B(),s.gray.base,X.stepBoxTop.selector,X.stepBoxBottom.selector,s.gray.light3,s.gray.light2),K=r(P()),Q=r(k()),V=r(E(),-32),W=r(j(),48,s.gray.light3,s.gray.light2),Y=r(O()),Z=r(S(),s.green.base,s.green.base),_=r(w(),s.gray.dark2),nn=r(x(),s.gray.light1,s.gray.base),en=r("padding: 0 8px;"),tn=r("cursor: pointer;");function rn(e){var t,r,a=e.children,c=e.state,l=e.stepLabel,s=e.isPreview,f=e.className,d=m(e,["children","state","stepLabel","isPreview","className"]),b="current"===c,g="upcoming"===c,y="completed"===c;return n.createElement("div",p({className:"".concat(o(U,(t={},u(t,G,b),u(t,J,g),u(t,tn,s),t))," ").concat(f)},d),l&&n.createElement("div",{className:o(Y,(r={},u(r,_,b),u(r,Z,y),u(r,nn,g),u(r,tn,s),r))},y?n.createElement(i,null):n.createElement("div",{className:en},l)),n.createElement("div",{className:o($,u({},tn,s))},a),n.createElement("div",{className:R},n.createElement("span",p({className:H},X.stepBoxTop.prop),n.createElement("div",null)),n.createElement("span",p({className:F},X.stepBoxBottom.prop),n.createElement("div",null))))}function on(t){var r=t.children,i=t.currentStep,a=t.maxDisplayedSteps,c=void 0===a?Array.isArray(r)?r.length:1:a,l=g(e("current"),2),s=l[0],f=l[1],m=(Array.isArray(r)?r:[r]).map((function(n,e){var t;return t=e<i?"completed":e===i?"current":"upcoming",{"aria-label":ln(n.props.children),"aria-current":i===e?"step":void 0,step:e,stepLabel:(e+1).toString(),state:t,children:n,isPreview:!1}})),b=m.length,y=sn({currentStep:i,numSteps:b,maxDisplayedSteps:c}),h=y.rangeStart,v=y.rangeEnd,x=cn(m,{currentStep:i,rangeStart:h,rangeEnd:v}),w={current:x};return h>0&&(x[0].onMouseOver=function(){f("previous")},w.previous=cn(m,d({currentStep:i},sn({currentStep:h-1,numSteps:b,maxDisplayedSteps:c}))).map((function(n){return d({},n,{isPreview:!0})}))),v<b-1&&(x[x.length-1].onMouseOver=function(){f("next")},w.next=cn(m,d({currentStep:i},sn({currentStep:v,numSteps:b,maxDisplayedSteps:c}))).map((function(n){return d({},n,{isPreview:!0})}))),Object.entries(w).forEach((function(n){var e=g(n,2),t=e[0],r=e[1];r.forEach((function(n,e){var i;e<r.length-1&&(n.className=o((u(i={},Q,s===t),u(i,V,s!==t),i)))}))})),n.createElement("ol",{className:W,onMouseLeave:function(){return f("current")}},Object.entries(w).map((function(e){var t=g(e,2),r=t[0],i=t[1];return n.createElement("li",{key:r,className:o(q,u({},K,s!==r))},i.map((function(e,t){return n.createElement(rn,p({key:t},e))})))})))}rn.displayName="Step",on.displayName="Stepper",on.propTypes={children:t.node.isRequired,currentStep:t.number.isRequired,maxDisplayedSteps:t.number};var an=function(e){var t=e.children;return n.createElement(n.Fragment,null,t)};function cn(e,t){var r=t.currentStep,o=t.rangeStart,i=t.rangeEnd,c=[];return o>0&&c.push({"aria-label":"Previous steps",step:"previous",stepLabel:"+".concat(o),state:o>r+1?"upcoming":"completed",children:n.createElement(a,null),isPreview:!0}),c.push.apply(c,y(e.slice(o,i).map((function(n){return d({},n)})))),i<e.length&&c.push({"aria-label":"Next steps",step:"next",stepLabel:"+".concat(e.length-i),state:"upcoming",children:n.createElement(a,null),isPreview:!0}),c}function ln(n){return n instanceof Array?n.map((function(n){return ln(n)})).join(""):n.toString()}function sn(n){var e=n.currentStep,t=n.numSteps,r=n.maxDisplayedSteps;if(t<=r)return{rangeStart:0,rangeEnd:t};if(e+1<r)return{rangeStart:0,rangeEnd:r-1};if(e>t-r)return{rangeStart:t-r+1,rangeEnd:t};var o=e-(e-r+1)%(r-2);return{rangeStart:o,rangeEnd:o+r-2}}an.displayName="Step",an.propTypes={children:t.oneOfType([t.string,t.number,t.arrayOf(t.oneOfType([t.string,t.number]))]).isRequired};export{an as Step,on as Stepper}; | ||
//# sourceMappingURL=index.js.map |
@@ -1,2 +0,2 @@ | ||
export { Step, Stepper } from './Stepper'; | ||
//# sourceMappingURL=index.js.map | ||
!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")):"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"],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"])}(this,(function(e,n,t,r,o,i,a,l,s){"use strict";function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=u(n),p=u(t),f=u(o),d=u(i);function m(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function b(){return(b=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 y(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 g(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?y(Object(t),!0).forEach((function(n){m(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):y(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function h(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 v(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function x(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var t=[],r=!0,o=!1,i=void 0;try{for(var a,l=e[Symbol.iterator]();!(r=(a=l.next()).done)&&(t.push(a.value),!n||t.length!==n);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==l.return||l.return()}finally{if(o)throw i}}return t}(e,n)||S(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 w(e){return function(e){if(Array.isArray(e))return O(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||S(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 S(e,n){if(e){if("string"==typeof e)return O(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)?O(e,n):void 0}}function O(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}function j(){var e=v(["\n background-color: white;\n border-color: ",";\n color: ",";\n"]);return j=function(){return e},e}function E(){var e=v(["\n background-color: ",";\n border-color: #464c4f;\n color: white;\n"]);return E=function(){return e},e}function k(){var e=v(["\n background-color: white;\n border-color: ",";\n color: ",";\n"]);return k=function(){return e},e}function P(){var e=v(["\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"]);return P=function(){return e},e}function B(){var e=v(["\n position: relative;\n height: ","px;\n width: 100%;\n\n background: ",";\n border-bottom: 1px solid;\n border-top: 1px solid;\n border-color: ",";\n"]);return B=function(){return e},e}function N(){var e=v(["\n left: ","px;\n transition: left 700ms;\n"]);return N=function(){return e},e}function A(){var e=v(["\n left: 0;\n transition: left 700ms;\n"]);return A=function(){return e},e}function C(){var e=v(["\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n"]);return C=function(){return e},e}function T(){var e=v(["\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"]);return T=function(){return e},e}function z(){var e=v(["\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"]);return z=function(){return e},e}function D(){var e=v(["\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n"]);return D=function(){return e},e}function q(){var e=v(["\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"]);return q=function(){return e},e}function M(){var e=v(["\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"]);return M=function(){return e},e}function I(){var e=v(["\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"]);return I=function(){return e},e}function L(){var e=v(["\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"]);return L=function(){return e},e}function R(){var e=v(["\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"]);return R=function(){return e},e}function X(){var e=v(["\n display: flex;\n position: absolute;\n left: 0;\n height: 100%;\n width: 100%;\n transition: opacity 700ms, visibility 700ms;\n"]);return X=function(){return e},e}var H=48,_={stepBoxTop:l.createDataProp("step-box-top"),stepBoxBottom:l.createDataProp("step-box-bottom")},F=r.css(X()),U=r.css(R()),$=r.css(L(),16,16,16),G=r.css(I(),$,Math.atan(2/3)),J=r.css(M(),$,-Math.atan(2/3)),K=r.css(q(),17,32,s.uiColors.gray.dark3,_.stepBoxTop.selector,_.stepBoxBottom.selector,48,_.stepBoxTop.selector,_.stepBoxBottom.selector),Q=r.css(D()),V=r.css(z(),a.transparentize(.75,s.uiColors.black),_.stepBoxTop.selector,Math.atan(2/3),_.stepBoxBottom.selector,Math.atan(2/3)),W=r.css(T(),s.uiColors.gray.base,_.stepBoxTop.selector,_.stepBoxBottom.selector,s.uiColors.gray.light3,s.uiColors.gray.light2),Y=r.css(C()),Z=r.css(A()),ee=r.css(N(),-32),ne=r.css(B(),H,s.uiColors.gray.light3,s.uiColors.gray.light2),te=r.css(P()),re=r.css(k(),s.uiColors.green.base,s.uiColors.green.base),oe=r.css(E(),s.uiColors.gray.dark2),ie=r.css(j(),s.uiColors.gray.light1,s.uiColors.gray.base),ae=r.css("padding: 0 8px;"),le=r.css("cursor: pointer;");function se(e){var n,t,o=e.children,i=e.state,a=e.stepLabel,l=e.isPreview,s=e.className,u=h(e,["children","state","stepLabel","isPreview","className"]),p="current"===i,d="upcoming"===i,y="completed"===i;return c.default.createElement("div",b({className:"".concat(r.cx(K,(n={},m(n,V,p),m(n,W,d),m(n,le,l),n))," ").concat(s)},u),a&&c.default.createElement("div",{className:r.cx(te,(t={},m(t,oe,p),m(t,re,y),m(t,ie,d),m(t,le,l),t))},y?c.default.createElement(f.default,null):c.default.createElement("div",{className:ae},a)),c.default.createElement("div",{className:r.cx(Q,m({},le,l))},o),c.default.createElement("div",{className:U},c.default.createElement("span",b({className:G},_.stepBoxTop.prop),c.default.createElement("div",null)),c.default.createElement("span",b({className:J},_.stepBoxBottom.prop),c.default.createElement("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,l=x(n.useState("current"),2),s=l[0],u=l[1],p=(Array.isArray(t)?t:[t]).map((function(e,n){var t;return t=n<o?"completed":n===o?"current":"upcoming",{"aria-label":fe(e.props.children),"aria-current":o===n?"step":void 0,step:n,stepLabel:(n+1).toString(),state:t,children:e,isPreview:!1}})),f=p.length,d=de({currentStep:o,numSteps:f,maxDisplayedSteps:a}),y=d.rangeStart,h=d.rangeEnd,v=pe(p,{currentStep:o,rangeStart:y,rangeEnd:h}),w={current:v};return y>0&&(v[0].onMouseOver=function(){u("previous")},w.previous=pe(p,g({currentStep:o},de({currentStep:y-1,numSteps:f,maxDisplayedSteps:a}))).map((function(e){return g({},e,{isPreview:!0})}))),h<f-1&&(v[v.length-1].onMouseOver=function(){u("next")},w.next=pe(p,g({currentStep:o},de({currentStep:h,numSteps:f,maxDisplayedSteps:a}))).map((function(e){return g({},e,{isPreview:!0})}))),Object.entries(w).forEach((function(e){var n=x(e,2),t=n[0],o=n[1];o.forEach((function(e,n){var i;n<o.length-1&&(e.className=r.cx((m(i={},Z,s===t),m(i,ee,s!==t),i)))}))})),c.default.createElement("ol",{className:ne,onMouseLeave:function(){return u("current")}},Object.entries(w).map((function(e){var n=x(e,2),t=n[0],o=n[1];return c.default.createElement("li",{key:t,className:r.cx(F,m({},Y,s!==t))},o.map((function(e,n){return c.default.createElement(se,b({key:n},e))})))})))}se.displayName="Step",ue.displayName="Stepper",ue.propTypes={children:p.default.node.isRequired,currentStep:p.default.number.isRequired,maxDisplayedSteps:p.default.number};var ce=function(e){var n=e.children;return c.default.createElement(c.default.Fragment,null,n)};function pe(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.default.createElement(d.default,null),isPreview:!0}),i.push.apply(i,w(e.slice(r,o).map((function(e){return g({},e)})))),o<e.length&&i.push({"aria-label":"Next steps",step:"next",stepLabel:"+".concat(e.length-o),state:"upcoming",children:c.default.createElement(d.default,null),isPreview:!0}),i}function fe(e){return e instanceof Array?e.map((function(e){return fe(e)})).join(""):e.toString()}function de(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}}ce.displayName="Step",ce.propTypes={children:p.default.oneOfType([p.default.string,p.default.number,p.default.arrayOf(p.default.oneOfType([p.default.string,p.default.number]))]).isRequired},e.Step=ce,e.Stepper=ue,Object.defineProperty(e,"__esModule",{value:!0})})); | ||
//# sourceMappingURL=index.js.map |
{ | ||
"name": "@leafygreen-ui/stepper", | ||
"version": "2.0.0", | ||
"version": "2.0.1", | ||
"description": "leafyGreen UI Kit Stepper", | ||
@@ -23,8 +23,8 @@ "main": "./dist/index.js", | ||
"dependencies": { | ||
"@leafygreen-ui/emotion": "^3.0.0", | ||
"@leafygreen-ui/icon": "^7.0.0", | ||
"@leafygreen-ui/lib": "^6.0.0", | ||
"@leafygreen-ui/palette": "^3.0.0", | ||
"@leafygreen-ui/emotion": "^3.0.1", | ||
"@leafygreen-ui/icon": "^7.0.1", | ||
"@leafygreen-ui/lib": "^6.0.1", | ||
"@leafygreen-ui/palette": "^3.0.1", | ||
"polished": "^3.6.5" | ||
} | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
0
998230
24
1052
2
Updated@leafygreen-ui/icon@^7.0.1
Updated@leafygreen-ui/lib@^6.0.1