@sps-woodland/buttons 8.34.16 → 8.35.0
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/lib/index.js +244 -264
- package/lib/index.umd.cjs +80 -100
- package/lib/style.css +1 -1
- package/package.json +7 -7
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(S,v){typeof exports=="object"&&typeof module<"u"?v(exports,require("react"),require("@sps-woodland/core"),require("@react-aria/focus"),require("@spscommerce/i18n"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@react-aria/focus","@spscommerce/i18n","@spscommerce/utils"],v):(S=typeof globalThis<"u"?globalThis:S||self,v(S.Buttons={},S.React,S.core,S.focus,S.i18n,S.utils))})(this,function(S,v,R,me,Ie,k){"use strict";function Le(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const c=Le(v),_e=typeof document<"u"?v.useLayoutEffect:()=>{};function G(e){const t=v.useRef(null);return _e(()=>{t.current=e},[e]),v.useCallback((...r)=>{const o=t.current;return o?.(...r)},[])}let be=new Map;function Me(e,t){if(e===t)return e;let r=be.get(e);if(r)return r.forEach(i=>i(t)),t;let o=be.get(t);return o?(o.forEach(i=>i(e)),e):t}function ge(...e){return(...t)=>{for(let r of e)typeof r=="function"&&r(...t)}}const I=e=>{var t;return(t=e?.ownerDocument)!==null&&t!==void 0?t:document},oe=e=>e&&"window"in e&&e.window===e?e:I(e).defaultView||window;function ve(e){var t,r,o="";if(typeof e=="string"||typeof e=="number")o+=e;else if(typeof e=="object")if(Array.isArray(e)){var i=e.length;for(t=0;t<i;t++)e[t]&&(r=ve(e[t]))&&(o&&(o+=" "),o+=r)}else for(r in e)e[r]&&(o&&(o+=" "),o+=r);return o}function Fe(){for(var e,t,r=0,o="",i=arguments.length;r<i;r++)(e=arguments[r])&&(t=ve(e))&&(o&&(o+=" "),o+=t);return o}function W(...e){let t={...e[0]};for(let r=1;r<e.length;r++){let o=e[r];for(let i in o){let d=t[i],u=o[i];typeof d=="function"&&typeof u=="function"&&i[0]==="o"&&i[1]==="n"&&i.charCodeAt(2)>=65&&i.charCodeAt(2)<=90?t[i]=ge(d,u):(i==="className"||i==="UNSAFE_className")&&typeof d=="string"&&typeof u=="string"?t[i]=Fe(d,u):i==="id"&&d&&u?t.id=Me(d,u):t[i]=u!==void 0?u:d}}return t}const Ue=new Set(["id"]),He=new Set(["aria-label","aria-labelledby","aria-describedby","aria-details"]),Ve=new Set(["href","hrefLang","target","rel","download","ping","referrerPolicy"]),Ge=/^(data-.*)$/;function We(e,t={}){let{labelable:r,isLink:o,propNames:i}=t,d={};for(const u in e)Object.prototype.hasOwnProperty.call(e,u)&&(Ue.has(u)||r&&He.has(u)||o&&Ve.has(u)||i?.has(u)||Ge.test(u))&&(d[u]=e[u]);return d}function j(e){if(je())e.focus({preventScroll:!0});else{let t=Ye(e);e.focus(),Re(t)}}let X=null;function je(){if(X==null){X=!1;try{document.createElement("div").focus({get preventScroll(){return X=!0,!0}})}catch{}}return X}function Ye(e){let t=e.parentNode,r=[],o=document.scrollingElement||document.documentElement;for(;t instanceof HTMLElement&&t!==o;)(t.offsetHeight<t.scrollHeight||t.offsetWidth<t.scrollWidth)&&r.push({element:t,scrollTop:t.scrollTop,scrollLeft:t.scrollLeft}),t=t.parentNode;return o instanceof HTMLElement&&r.push({element:o,scrollTop:o.scrollTop,scrollLeft:o.scrollLeft}),r}function Re(e){for(let{element:t,scrollTop:r,scrollLeft:o}of e)t.scrollTop=r,t.scrollLeft=o}function q(e){var t;return typeof window>"u"||window.navigator==null?!1:((t=window.navigator.userAgentData)===null||t===void 0?void 0:t.brands.some(r=>e.test(r.brand)))||e.test(window.navigator.userAgent)}function re(e){var t;return typeof window<"u"&&window.navigator!=null?e.test(((t=window.navigator.userAgentData)===null||t===void 0?void 0:t.platform)||window.navigator.platform):!1}function L(e){let t=null;return()=>(t==null&&(t=e()),t)}const z=L(function(){return re(/^Mac/i)}),Xe=L(function(){return re(/^iPhone/i)}),he=L(function(){return re(/^iPad/i)||z()&&navigator.maxTouchPoints>1}),ye=L(function(){return Xe()||he()}),qe=L(function(){return q(/AppleWebKit/i)&&!ze()}),ze=L(function(){return q(/Chrome/i)}),ke=L(function(){return q(/Android/i)}),Je=L(function(){return q(/Firefox/i)});function Y(e,t,r=!0){var o,i;let{metaKey:d,ctrlKey:u,altKey:p,shiftKey:m}=t;Je()&&(!((i=window.event)===null||i===void 0||(o=i.type)===null||o===void 0)&&o.startsWith("key"))&&e.target==="_blank"&&(z()?d=!0:u=!0);let h=qe()&&z()&&!he()?new KeyboardEvent("keydown",{keyIdentifier:"Enter",metaKey:d,ctrlKey:u,altKey:p,shiftKey:m}):new MouseEvent("click",{metaKey:d,ctrlKey:u,altKey:p,shiftKey:m,bubbles:!0,cancelable:!0});Y.isOpening=r,j(e),e.dispatchEvent(h),Y.isOpening=!1}Y.isOpening=!1;let F=new Map,se=new Set;function we(){if(typeof window>"u")return;function e(o){return"propertyName"in o}let t=o=>{if(!e(o)||!o.target)return;let i=F.get(o.target);i||(i=new Set,F.set(o.target,i),o.target.addEventListener("transitioncancel",r,{once:!0})),i.add(o.propertyName)},r=o=>{if(!e(o)||!o.target)return;let i=F.get(o.target);if(i&&(i.delete(o.propertyName),i.size===0&&(o.target.removeEventListener("transitioncancel",r),F.delete(o.target)),F.size===0)){for(let d of se)d();se.clear()}};document.body.addEventListener("transitionrun",t),document.body.addEventListener("transitionend",r)}typeof document<"u"&&(document.readyState!=="loading"?we():document.addEventListener("DOMContentLoaded",we));function Qe(e){requestAnimationFrame(()=>{F.size===0?e():se.add(e)})}function Ze(){let e=v.useRef(new Map),t=v.useCallback((i,d,u,p)=>{let m=p?.once?(...h)=>{e.current.delete(u),u(...h)}:u;e.current.set(u,{type:d,eventTarget:i,fn:m,options:p}),i.addEventListener(d,u,p)},[]),r=v.useCallback((i,d,u,p)=>{var m;let h=((m=e.current.get(u))===null||m===void 0?void 0:m.fn)||u;i.removeEventListener(d,h,p),e.current.delete(u)},[]),o=v.useCallback(()=>{e.current.forEach((i,d)=>{r(i.eventTarget,i.type,d,i.options)})},[r]);return v.useEffect(()=>o,[o]),{addGlobalListener:t,removeGlobalListener:r,removeAllGlobalListeners:o}}function et(e,t){_e(()=>{if(e&&e.ref&&t)return e.ref.current=t.current,()=>{e.ref&&(e.ref.current=null)}})}function Te(e){return e.mozInputSource===0&&e.isTrusted?!0:ke()&&e.pointerType?e.type==="click"&&e.buttons===1:e.detail===0&&!e.pointerType}function tt(e){return!ke()&&e.width===0&&e.height===0||e.width===1&&e.height===1&&e.pressure===0&&e.detail===0&&e.pointerType==="mouse"}let U="default",ie="",J=new WeakMap;function Ee(e){if(ye()){if(U==="default"){const t=I(e);ie=t.documentElement.style.webkitUserSelect,t.documentElement.style.webkitUserSelect="none"}U="disabled"}else(e instanceof HTMLElement||e instanceof SVGElement)&&(J.set(e,e.style.userSelect),e.style.userSelect="none")}function Q(e){if(ye()){if(U!=="disabled")return;U="restoring",setTimeout(()=>{Qe(()=>{if(U==="restoring"){const t=I(e);t.documentElement.style.webkitUserSelect==="none"&&(t.documentElement.style.webkitUserSelect=ie||""),ie="",U="default"}})},300)}else if((e instanceof HTMLElement||e instanceof SVGElement)&&e&&J.has(e)){let t=J.get(e);e.style.userSelect==="none"&&(e.style.userSelect=t),e.getAttribute("style")===""&&e.removeAttribute("style"),J.delete(e)}}const Be=v.createContext({register:()=>{}});Be.displayName="PressResponderContext";function nt(e,t){return t.get?t.get.call(e):t.value}function $e(e,t,r){if(!t.has(e))throw new TypeError("attempted to "+r+" private field on non-instance");return t.get(e)}function ot(e,t){var r=$e(e,t,"get");return nt(e,r)}function rt(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")}function st(e,t,r){rt(e,t),t.set(e,r)}function it(e,t,r){if(t.set)t.set.call(e,r);else{if(!t.writable)throw new TypeError("attempted to set read only private field");t.value=r}}function Pe(e,t,r){var o=$e(e,t,"set");return it(e,o,r),r}function at(e){let t=v.useContext(Be);if(t){let{register:r,...o}=t;e=W(o,e),r()}return et(t,e.ref),e}var Z=new WeakMap;class ee{continuePropagation(){Pe(this,Z,!1)}get shouldStopPropagation(){return ot(this,Z)}constructor(t,r,o,i){st(this,Z,{writable:!0,value:void 0}),Pe(this,Z,!0);var d;let u=(d=i?.target)!==null&&d!==void 0?d:o.currentTarget;const p=u?.getBoundingClientRect();let m,h=0,b,B=null;o.clientX!=null&&o.clientY!=null&&(b=o.clientX,B=o.clientY),p&&(b!=null&&B!=null?(m=b-p.left,h=B-p.top):(m=p.width/2,h=p.height/2)),this.type=t,this.pointerType=r,this.target=o.currentTarget,this.shiftKey=o.shiftKey,this.metaKey=o.metaKey,this.ctrlKey=o.ctrlKey,this.altKey=o.altKey,this.x=m,this.y=h}}const xe=Symbol("linkClicked");function lt(e){let{onPress:t,onPressChange:r,onPressStart:o,onPressEnd:i,onPressUp:d,isDisabled:u,isPressed:p,preventFocusOnPress:m,shouldCancelOnPointerExit:h,allowTextSelectionOnPress:b,ref:B,...O}=at(e),[_,$]=v.useState(!1),T=v.useRef({isPressed:!1,ignoreEmulatedMouseEvents:!1,ignoreClickAfterPress:!1,didFirePressStart:!1,isTriggeringEvent:!1,activePointerId:null,target:null,isOverTarget:!1,pointerType:null}),{addGlobalListener:E,removeAllGlobalListeners:N}=Ze(),P=G((n,f)=>{let x=T.current;if(u||x.didFirePressStart)return!1;let l=!0;if(x.isTriggeringEvent=!0,o){let y=new ee("pressstart",f,n);o(y),l=y.shouldStopPropagation}return r&&r(!0),x.isTriggeringEvent=!1,x.didFirePressStart=!0,$(!0),l}),w=G((n,f,x=!0)=>{let l=T.current;if(!l.didFirePressStart)return!1;l.ignoreClickAfterPress=!0,l.didFirePressStart=!1,l.isTriggeringEvent=!0;let y=!0;if(i){let s=new ee("pressend",f,n);i(s),y=s.shouldStopPropagation}if(r&&r(!1),$(!1),t&&x&&!u){let s=new ee("press",f,n);t(s),y&&(y=s.shouldStopPropagation)}return l.isTriggeringEvent=!1,y}),C=G((n,f)=>{let x=T.current;if(u)return!1;if(d){x.isTriggeringEvent=!0;let l=new ee("pressup",f,n);return d(l),x.isTriggeringEvent=!1,l.shouldStopPropagation}return!0}),D=G(n=>{let f=T.current;f.isPressed&&f.target&&(f.isOverTarget&&f.pointerType!=null&&w(A(f.target,n),f.pointerType,!1),f.isPressed=!1,f.isOverTarget=!1,f.activePointerId=null,f.pointerType=null,N(),b||Q(f.target))}),V=G(n=>{h&&D(n)}),fe=v.useMemo(()=>{let n=T.current,f={onKeyDown(l){if(le(l.nativeEvent,l.currentTarget)&&l.currentTarget.contains(l.target)){var y;Ne(l.target,l.key)&&l.preventDefault();let s=!0;if(!n.isPressed&&!l.repeat){n.target=l.currentTarget,n.isPressed=!0,s=P(l,"keyboard");let g=l.currentTarget,a=K=>{le(K,g)&&!K.repeat&&g.contains(K.target)&&n.target&&C(A(n.target,K),"keyboard")};E(I(l.currentTarget),"keyup",ge(a,x),!0)}s&&l.stopPropagation(),l.metaKey&&z()&&((y=n.metaKeyEvents)===null||y===void 0||y.set(l.key,l.nativeEvent))}else l.key==="Meta"&&(n.metaKeyEvents=new Map)},onClick(l){if(!(l&&!l.currentTarget.contains(l.target))&&l&&l.button===0&&!n.isTriggeringEvent&&!Y.isOpening){let y=!0;if(u&&l.preventDefault(),!n.ignoreClickAfterPress&&!n.ignoreEmulatedMouseEvents&&!n.isPressed&&(n.pointerType==="virtual"||Te(l.nativeEvent))){!u&&!m&&j(l.currentTarget);let s=P(l,"virtual"),g=C(l,"virtual"),a=w(l,"virtual");y=s&&g&&a}n.ignoreEmulatedMouseEvents=!1,n.ignoreClickAfterPress=!1,y&&l.stopPropagation()}}},x=l=>{var y;if(n.isPressed&&n.target&&le(l,n.target)){var s;Ne(l.target,l.key)&&l.preventDefault();let a=l.target;w(A(n.target,l),"keyboard",n.target.contains(a)),N(),l.key!=="Enter"&&ae(n.target)&&n.target.contains(a)&&!l[xe]&&(l[xe]=!0,Y(n.target,l,!1)),n.isPressed=!1,(s=n.metaKeyEvents)===null||s===void 0||s.delete(l.key)}else if(l.key==="Meta"&&(!((y=n.metaKeyEvents)===null||y===void 0)&&y.size)){var g;let a=n.metaKeyEvents;n.metaKeyEvents=void 0;for(let K of a.values())(g=n.target)===null||g===void 0||g.dispatchEvent(new KeyboardEvent("keyup",K))}};if(typeof PointerEvent<"u"){f.onPointerDown=a=>{if(a.button!==0||!a.currentTarget.contains(a.target))return;if(tt(a.nativeEvent)){n.pointerType="virtual";return}ue(a.currentTarget)&&a.preventDefault(),n.pointerType=a.pointerType;let K=!0;n.isPressed||(n.isPressed=!0,n.isOverTarget=!0,n.activePointerId=a.pointerId,n.target=a.currentTarget,!u&&!m&&j(a.currentTarget),b||Ee(n.target),K=P(a,n.pointerType),E(I(a.currentTarget),"pointermove",l,!1),E(I(a.currentTarget),"pointerup",y,!1),E(I(a.currentTarget),"pointercancel",g,!1)),K&&a.stopPropagation()},f.onMouseDown=a=>{a.currentTarget.contains(a.target)&&a.button===0&&(ue(a.currentTarget)&&a.preventDefault(),a.stopPropagation())},f.onPointerUp=a=>{!a.currentTarget.contains(a.target)||n.pointerType==="virtual"||a.button===0&&H(a,a.currentTarget)&&C(a,n.pointerType||a.pointerType)};let l=a=>{a.pointerId===n.activePointerId&&(n.target&&H(a,n.target)?!n.isOverTarget&&n.pointerType!=null&&(n.isOverTarget=!0,P(A(n.target,a),n.pointerType)):n.target&&n.isOverTarget&&n.pointerType!=null&&(n.isOverTarget=!1,w(A(n.target,a),n.pointerType,!1),V(a)))},y=a=>{a.pointerId===n.activePointerId&&n.isPressed&&a.button===0&&n.target&&(H(a,n.target)&&n.pointerType!=null?w(A(n.target,a),n.pointerType):n.isOverTarget&&n.pointerType!=null&&w(A(n.target,a),n.pointerType,!1),n.isPressed=!1,n.isOverTarget=!1,n.activePointerId=null,n.pointerType=null,N(),b||Q(n.target),"ontouchend"in n.target&&a.pointerType!=="mouse"&&E(n.target,"touchend",s,{once:!0}))},s=a=>{Oe(a.target)&&a.preventDefault()},g=a=>{D(a)};f.onDragStart=a=>{a.currentTarget.contains(a.target)&&D(a)}}else{f.onMouseDown=s=>{if(s.button!==0||!s.currentTarget.contains(s.target))return;if(ue(s.currentTarget)&&s.preventDefault(),n.ignoreEmulatedMouseEvents){s.stopPropagation();return}n.isPressed=!0,n.isOverTarget=!0,n.target=s.currentTarget,n.pointerType=Te(s.nativeEvent)?"virtual":"mouse",!u&&!m&&j(s.currentTarget),P(s,n.pointerType)&&s.stopPropagation(),E(I(s.currentTarget),"mouseup",l,!1)},f.onMouseEnter=s=>{if(!s.currentTarget.contains(s.target))return;let g=!0;n.isPressed&&!n.ignoreEmulatedMouseEvents&&n.pointerType!=null&&(n.isOverTarget=!0,g=P(s,n.pointerType)),g&&s.stopPropagation()},f.onMouseLeave=s=>{if(!s.currentTarget.contains(s.target))return;let g=!0;n.isPressed&&!n.ignoreEmulatedMouseEvents&&n.pointerType!=null&&(n.isOverTarget=!1,g=w(s,n.pointerType,!1),V(s)),g&&s.stopPropagation()},f.onMouseUp=s=>{s.currentTarget.contains(s.target)&&!n.ignoreEmulatedMouseEvents&&s.button===0&&C(s,n.pointerType||"mouse")};let l=s=>{if(s.button===0){if(n.isPressed=!1,N(),n.ignoreEmulatedMouseEvents){n.ignoreEmulatedMouseEvents=!1;return}n.target&&H(s,n.target)&&n.pointerType!=null?w(A(n.target,s),n.pointerType):n.target&&n.isOverTarget&&n.pointerType!=null&&w(A(n.target,s),n.pointerType,!1),n.isOverTarget=!1}};f.onTouchStart=s=>{if(!s.currentTarget.contains(s.target))return;let g=ut(s.nativeEvent);if(!g)return;n.activePointerId=g.identifier,n.ignoreEmulatedMouseEvents=!0,n.isOverTarget=!0,n.isPressed=!0,n.target=s.currentTarget,n.pointerType="touch",!u&&!m&&j(s.currentTarget),b||Ee(n.target),P(M(n.target,s),n.pointerType)&&s.stopPropagation(),E(oe(s.currentTarget),"scroll",y,!0)},f.onTouchMove=s=>{if(!s.currentTarget.contains(s.target))return;if(!n.isPressed){s.stopPropagation();return}let g=Se(s.nativeEvent,n.activePointerId),a=!0;g&&H(g,s.currentTarget)?!n.isOverTarget&&n.pointerType!=null&&(n.isOverTarget=!0,a=P(M(n.target,s),n.pointerType)):n.isOverTarget&&n.pointerType!=null&&(n.isOverTarget=!1,a=w(M(n.target,s),n.pointerType,!1),V(M(n.target,s))),a&&s.stopPropagation()},f.onTouchEnd=s=>{if(!s.currentTarget.contains(s.target))return;if(!n.isPressed){s.stopPropagation();return}let g=Se(s.nativeEvent,n.activePointerId),a=!0;g&&H(g,s.currentTarget)&&n.pointerType!=null?(C(M(n.target,s),n.pointerType),a=w(M(n.target,s),n.pointerType)):n.isOverTarget&&n.pointerType!=null&&(a=w(M(n.target,s),n.pointerType,!1)),a&&s.stopPropagation(),n.isPressed=!1,n.activePointerId=null,n.isOverTarget=!1,n.ignoreEmulatedMouseEvents=!0,n.target&&!b&&Q(n.target),N()},f.onTouchCancel=s=>{s.currentTarget.contains(s.target)&&(s.stopPropagation(),n.isPressed&&D(M(n.target,s)))};let y=s=>{n.isPressed&&s.target.contains(n.target)&&D({currentTarget:n.target,shiftKey:!1,ctrlKey:!1,metaKey:!1,altKey:!1})};f.onDragStart=s=>{s.currentTarget.contains(s.target)&&D(s)}}return f},[E,u,m,N,b,D,V,w,P,C]);return v.useEffect(()=>()=>{var n;b||Q((n=T.current.target)!==null&&n!==void 0?n:void 0)},[b]),{isPressed:p||_,pressProps:W(O,fe)}}function ae(e){return e.tagName==="A"&&e.hasAttribute("href")}function le(e,t){const{key:r,code:o}=e,i=t,d=i.getAttribute("role");return(r==="Enter"||r===" "||r==="Spacebar"||o==="Space")&&!(i instanceof oe(i).HTMLInputElement&&!De(i,r)||i instanceof oe(i).HTMLTextAreaElement||i.isContentEditable)&&!((d==="link"||!d&&ae(i))&&r!=="Enter")}function ut(e){const{targetTouches:t}=e;return t.length>0?t[0]:null}function Se(e,t){const r=e.changedTouches;for(let o=0;o<r.length;o++){const i=r[o];if(i.identifier===t)return i}return null}function M(e,t){let r=0,o=0;return t.targetTouches&&t.targetTouches.length===1&&(r=t.targetTouches[0].clientX,o=t.targetTouches[0].clientY),{currentTarget:e,shiftKey:t.shiftKey,ctrlKey:t.ctrlKey,metaKey:t.metaKey,altKey:t.altKey,clientX:r,clientY:o}}function A(e,t){let r=t.clientX,o=t.clientY;return{currentTarget:e,shiftKey:t.shiftKey,ctrlKey:t.ctrlKey,metaKey:t.metaKey,altKey:t.altKey,clientX:r,clientY:o}}function ct(e){let t=0,r=0;return e.width!==void 0?t=e.width/2:e.radiusX!==void 0&&(t=e.radiusX),e.height!==void 0?r=e.height/2:e.radiusY!==void 0&&(r=e.radiusY),{top:e.clientY-r,right:e.clientX+t,bottom:e.clientY+r,left:e.clientX-t}}function dt(e,t){return!(e.left>t.right||t.left>e.right||e.top>t.bottom||t.top>e.bottom)}function H(e,t){let r=t.getBoundingClientRect(),o=ct(e);return dt(r,o)}function ue(e){return!(e instanceof HTMLElement)||!e.hasAttribute("draggable")}function Oe(e){return e instanceof HTMLInputElement?!1:e instanceof HTMLButtonElement?e.type!=="submit"&&e.type!=="reset":!ae(e)}function Ne(e,t){return e instanceof HTMLInputElement?!De(e,t):Oe(e)}const pt=new Set(["checkbox","radio","range","color","file","image","button","submit","reset"]);function De(e,t){return e.type==="checkbox"||e.type==="radio"?t===" ":pt.has(e.type)}let te=!1,ce=0;function de(){te=!0,setTimeout(()=>{te=!1},50)}function Ce(e){e.pointerType==="touch"&&de()}function ft(){if(!(typeof document>"u"))return typeof PointerEvent<"u"?document.addEventListener("pointerup",Ce):document.addEventListener("touchend",de),ce++,()=>{ce--,!(ce>0)&&(typeof PointerEvent<"u"?document.removeEventListener("pointerup",Ce):document.removeEventListener("touchend",de))}}function mt(e){let{onHoverStart:t,onHoverChange:r,onHoverEnd:o,isDisabled:i}=e,[d,u]=v.useState(!1),p=v.useRef({isHovered:!1,ignoreEmulatedMouseEvents:!1,pointerType:"",target:null}).current;v.useEffect(ft,[]);let{hoverProps:m,triggerHoverEnd:h}=v.useMemo(()=>{let b=(_,$)=>{if(p.pointerType=$,i||$==="touch"||p.isHovered||!_.currentTarget.contains(_.target))return;p.isHovered=!0;let T=_.currentTarget;p.target=T,t&&t({type:"hoverstart",target:T,pointerType:$}),r&&r(!0),u(!0)},B=(_,$)=>{if(p.pointerType="",p.target=null,$==="touch"||!p.isHovered)return;p.isHovered=!1;let T=_.currentTarget;o&&o({type:"hoverend",target:T,pointerType:$}),r&&r(!1),u(!1)},O={};return typeof PointerEvent<"u"?(O.onPointerEnter=_=>{te&&_.pointerType==="mouse"||b(_,_.pointerType)},O.onPointerLeave=_=>{!i&&_.currentTarget.contains(_.target)&&B(_,_.pointerType)}):(O.onTouchStart=()=>{p.ignoreEmulatedMouseEvents=!0},O.onMouseEnter=_=>{!p.ignoreEmulatedMouseEvents&&!te&&b(_,"mouse"),p.ignoreEmulatedMouseEvents=!1},O.onMouseLeave=_=>{!i&&_.currentTarget.contains(_.target)&&B(_,"mouse")}),{hoverProps:O,triggerHoverEnd:B}},[t,r,o,i,p]);return v.useEffect(()=>{i&&h({currentTarget:p.target},p.pointerType)},[i]),{hoverProps:m,isHovered:d}}function _t(e,t){let{elementType:r="button",isDisabled:o,onPress:i,onPressStart:d,onPressEnd:u,onPressUp:p,onPressChange:m,preventFocusOnPress:h,allowFocusWhenDisabled:b,onClick:B,href:O,target:_,rel:$,type:T="button"}=e,E;r==="button"?E={type:T,disabled:o}:E={role:"button",tabIndex:o?void 0:0,href:r==="a"&&o?void 0:O,target:r==="a"?_:void 0,type:r==="input"?T:void 0,disabled:r==="input"?o:void 0,"aria-disabled":!o||r==="input"?void 0:o,rel:r==="a"?$:void 0};let{pressProps:N,isPressed:P}=lt({onPressStart:d,onPressEnd:u,onPressChange:m,onPress:i,onPressUp:p,isDisabled:o,preventFocusOnPress:h,ref:t}),{focusableProps:w}=me.useFocusable(e,t);b&&(w.tabIndex=o?-1:w.tabIndex);let C=W(w,N,We(e,{labelable:!0}));return{isPressed:P,buttonProps:W(E,C,{"aria-haspopup":e["aria-haspopup"],"aria-expanded":e["aria-expanded"],"aria-controls":e["aria-controls"],"aria-pressed":e["aria-pressed"],onClick:D=>{B&&(B(D),console.warn("onClick is deprecated, please use onPress"))}})}}function bt(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function Ae(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable})),r.push.apply(r,o)}return r}function Ke(e){for(var t=1;t<arguments.length;t++){var r=arguments[t]!=null?arguments[t]:{};t%2?Ae(Object(r),!0).forEach(function(o){bt(e,o,r[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):Ae(Object(r)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(r,o))})}return e}var gt=(e,t,r)=>{for(var o of Object.keys(e)){var i;if(e[o]!==((i=t[o])!==null&&i!==void 0?i:r[o]))return!1}return!0},ne=e=>t=>{var r=e.defaultClassName,o=Ke(Ke({},e.defaultVariants),t);for(var i in o){var d,u=(d=o[i])!==null&&d!==void 0?d:e.defaultVariants[i];if(u!=null){var p=u;typeof p=="boolean"&&(p=p===!0?"true":"false");var m=e.variantClassNames[i][p];m&&(r+=" "+m)}}for(var[h,b]of e.compoundVariants)gt(h,o,e.defaultVariants)&&(r+=" "+b);return r},vt=ne({defaultClassName:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxy0",variantClassNames:{disabled:{true:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxy1",false:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxy2"},kind:{default:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxy3",link:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxy4",confirm:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxy5",delete:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxy6",key:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxy7",icon:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxy8"},spinning:{true:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxy9",false:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxya"}},defaultVariants:{disabled:!1,kind:"default",spinning:!1},compoundVariants:[[{kind:"icon",spinning:!0},"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyb"],[{kind:"default",spinning:!0},"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyc"],[{kind:"confirm",spinning:!0},"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyd"],[{kind:"delete",spinning:!0},"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxye"],[{kind:"key",spinning:!0},"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyf"],[{disabled:!0,spinning:!1},"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyg"],[{kind:"link",disabled:!0},"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyh"]]}),ht=ne({defaultClassName:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyi",variantClassNames:{disabled:{true:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyj",false:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyk"},kind:{icon:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyl",default:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxym",delete:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyn",key:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyo",confirm:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyp",link:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyq"},spinning:{true:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyr",false:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxys"}},defaultVariants:{disabled:!1,kind:"default",spinning:!1},compoundVariants:[]}),yt=ne({defaultClassName:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyt",variantClassNames:{spinning:{true:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyu",false:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyv"},kind:{icon:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyw",default:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyx",delete:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyy",key:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxyz",confirm:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxy10",link:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxy11"}},defaultVariants:{spinning:!1},compoundVariants:[]}),kt="pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxy12",wt=ne({defaultClassName:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxy13",variantClassNames:{spinning:{true:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxy14",false:"pkg_sps-woodland_buttons__version_8_34_16__hash_125pcxy15"}},defaultVariants:{spinning:!1},compoundVariants:[]});const pe=c.forwardRef(({as:e,onClick:t,onPress:r,children:o,className:i,isDisabled:d,disabled:u,href:p,icon:m,kind:h="default",spinning:b,spinningTitle:B,title:O,..._},$)=>{const T=e??(p?"a":"button"),E={onPress:r??t,isDisabled:u??d??b,..._},{"data-testid":N}=_,P=c.useRef(null),w=$||P,{buttonProps:C}=_t(E,w),{hoverProps:D}=mt({isDisabled:E.isDisabled}),{type:V,...fe}=C,n={...W(fe,D),ref:w,title:O,className:p?yt({spinning:b,kind:h}):ht({disabled:d||u,kind:h,spinning:b}),...p?{href:p}:{type:V},..._},{t:f}=Ie.useWoodlandLanguage(),x=m&&c.createElement(R.Icon,{className:kt,icon:m,"aria-hidden":"true","data-testid":`${N}__${m}-icon`});let l;h==="default"||h==="icon"||h==="link"?l="dark":l="light";const y=b&&c.createElement(R.Spinner,{color:l,className:wt({spinning:b}),title:B||f("button.spinningTitle",{defaultValue:"Loading..."}),"data-testid":`${N}__spinner`});return c.createElement(me.FocusRing,null,c.createElement("div",{className:R.cl(vt({disabled:d||u,kind:h,spinning:b}),i)},c.createElement(T,{...n},x,o?c.createElement("span",null,o):"",y)))});R.Metadata.set(pe,{name:"Button",props:{disabled:"boolean",href:"string",icon:"IconName",kind:{type:'"default" | "link" | "icon" | "confirm" | "delete" | "key"',default:'"default"'},spinning:"boolean",spinningTitle:"string",type:{type:'"button" | "submit"',default:'"button"'},as:"button | a",onClick:"() => void",onPress:"() => void",children:"ReactNode",className:"string",isDisabled:"boolean",style:"CSSProperties"},panellable:!0});const Tt={Buttons:{components:[pe],description:()=>c.createElement(c.Fragment,null,c.createElement("div",{className:"sps-body-14"},"Buttons are used to initiate events or actions. The labels and/or icons describe what the button will do."),c.createElement("br",null),c.createElement("h5",null,"Variants"),c.createElement("div",{className:"sps-body-14"},c.createElement("span",{className:"sps-text-semibold"},"Default: "),"For tertiary actions or actions of lower importance on a page."),c.createElement("div",{className:"sps-body-14"},c.createElement("span",{className:"sps-text-semibold"},"Key: "),"For primary or important actions on a page."),c.createElement("div",{className:"sps-body-14"},c.createElement("span",{className:"sps-text-semibold"},"Confirm: "),"For the main call to action on a page. There should only be one Confirm button per screen."),c.createElement("div",{className:"sps-body-14"},c.createElement("span",{className:"sps-text-semibold"},"Delete: "),"For deleting information or another destructive action. These should always be paired with a Delete Confirmation Modal."),c.createElement("div",{className:"sps-body-14"},c.createElement("span",{className:"sps-text-semibold"},"Disabled: "),"For actions that are not permitted in a particular state. These can be accompanied by a Tooltip on hover describing why it’s disabled."),c.createElement("div",{className:"sps-body-14"},c.createElement("span",{className:"sps-text-semibold"},"With an Icon: "),"For further illustrating the action. Example: Pencil icon in an Edit button. There can also be Icon Buttons without text.")),examples:{basic:{label:"Basic Buttons",description:({NavigateTo:e})=>c.createElement(c.Fragment,null,c.createElement("p",null,"The most common type of button that can be used in most cases. Example: Basic Buttons in a ",c.createElement(e,{to:"modals"},"Modal"),".")),examples:{withoutIcons:{description:"Without Icons",react:k.code`
|
|
1
|
+
(function(x,v){typeof exports=="object"&&typeof module<"u"?v(exports,require("react"),require("@sps-woodland/core"),require("@react-aria/focus"),require("@spscommerce/i18n"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@react-aria/focus","@spscommerce/i18n","@spscommerce/utils"],v):(x=typeof globalThis<"u"?globalThis:x||self,v(x.Buttons={},x.React,x.core,x.focus,x.i18n,x.utils))})(this,function(x,v,R,me,Ie,k){"use strict";function Ke(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const u=Ke(v),_e=typeof document<"u"?v.useLayoutEffect:()=>{};function G(e){const t=v.useRef(null);return _e(()=>{t.current=e},[e]),v.useCallback((...r)=>{const o=t.current;return o?.(...r)},[])}let ge=new Map;function Me(e,t){if(e===t)return e;let r=ge.get(e);if(r)return r.forEach(i=>i(t)),t;let o=ge.get(t);return o?(o.forEach(i=>i(e)),e):t}function be(...e){return(...t)=>{for(let r of e)typeof r=="function"&&r(...t)}}const I=e=>{var t;return(t=e?.ownerDocument)!==null&&t!==void 0?t:document},oe=e=>e&&"window"in e&&e.window===e?e:I(e).defaultView||window;function ve(e){var t,r,o="";if(typeof e=="string"||typeof e=="number")o+=e;else if(typeof e=="object")if(Array.isArray(e)){var i=e.length;for(t=0;t<i;t++)e[t]&&(r=ve(e[t]))&&(o&&(o+=" "),o+=r)}else for(r in e)e[r]&&(o&&(o+=" "),o+=r);return o}function Fe(){for(var e,t,r=0,o="",i=arguments.length;r<i;r++)(e=arguments[r])&&(t=ve(e))&&(o&&(o+=" "),o+=t);return o}function j(...e){let t={...e[0]};for(let r=1;r<e.length;r++){let o=e[r];for(let i in o){let p=t[i],c=o[i];typeof p=="function"&&typeof c=="function"&&i[0]==="o"&&i[1]==="n"&&i.charCodeAt(2)>=65&&i.charCodeAt(2)<=90?t[i]=be(p,c):(i==="className"||i==="UNSAFE_className")&&typeof p=="string"&&typeof c=="string"?t[i]=Fe(p,c):i==="id"&&p&&c?t.id=Me(p,c):t[i]=c!==void 0?c:p}}return t}const Ue=new Set(["id"]),He=new Set(["aria-label","aria-labelledby","aria-describedby","aria-details"]),Ve=new Set(["href","hrefLang","target","rel","download","ping","referrerPolicy"]),Ge=/^(data-.*)$/;function je(e,t={}){let{labelable:r,isLink:o,propNames:i}=t,p={};for(const c in e)Object.prototype.hasOwnProperty.call(e,c)&&(Ue.has(c)||r&&He.has(c)||o&&Ve.has(c)||i?.has(c)||Ge.test(c))&&(p[c]=e[c]);return p}function W(e){if(We())e.focus({preventScroll:!0});else{let t=Ye(e);e.focus(),Re(t)}}let X=null;function We(){if(X==null){X=!1;try{document.createElement("div").focus({get preventScroll(){return X=!0,!0}})}catch{}}return X}function Ye(e){let t=e.parentNode,r=[],o=document.scrollingElement||document.documentElement;for(;t instanceof HTMLElement&&t!==o;)(t.offsetHeight<t.scrollHeight||t.offsetWidth<t.scrollWidth)&&r.push({element:t,scrollTop:t.scrollTop,scrollLeft:t.scrollLeft}),t=t.parentNode;return o instanceof HTMLElement&&r.push({element:o,scrollTop:o.scrollTop,scrollLeft:o.scrollLeft}),r}function Re(e){for(let{element:t,scrollTop:r,scrollLeft:o}of e)t.scrollTop=r,t.scrollLeft=o}function q(e){var t;return typeof window>"u"||window.navigator==null?!1:((t=window.navigator.userAgentData)===null||t===void 0?void 0:t.brands.some(r=>e.test(r.brand)))||e.test(window.navigator.userAgent)}function re(e){var t;return typeof window<"u"&&window.navigator!=null?e.test(((t=window.navigator.userAgentData)===null||t===void 0?void 0:t.platform)||window.navigator.platform):!1}function K(e){let t=null;return()=>(t==null&&(t=e()),t)}const z=K(function(){return re(/^Mac/i)}),Xe=K(function(){return re(/^iPhone/i)}),he=K(function(){return re(/^iPad/i)||z()&&navigator.maxTouchPoints>1}),ye=K(function(){return Xe()||he()}),qe=K(function(){return q(/AppleWebKit/i)&&!ze()}),ze=K(function(){return q(/Chrome/i)}),ke=K(function(){return q(/Android/i)}),Je=K(function(){return q(/Firefox/i)});function Y(e,t,r=!0){var o,i;let{metaKey:p,ctrlKey:c,altKey:d,shiftKey:m}=t;Je()&&(!((i=window.event)===null||i===void 0||(o=i.type)===null||o===void 0)&&o.startsWith("key"))&&e.target==="_blank"&&(z()?p=!0:c=!0);let h=qe()&&z()&&!he()?new KeyboardEvent("keydown",{keyIdentifier:"Enter",metaKey:p,ctrlKey:c,altKey:d,shiftKey:m}):new MouseEvent("click",{metaKey:p,ctrlKey:c,altKey:d,shiftKey:m,bubbles:!0,cancelable:!0});Y.isOpening=r,W(e),e.dispatchEvent(h),Y.isOpening=!1}Y.isOpening=!1;let F=new Map,se=new Set;function we(){if(typeof window>"u")return;function e(o){return"propertyName"in o}let t=o=>{if(!e(o)||!o.target)return;let i=F.get(o.target);i||(i=new Set,F.set(o.target,i),o.target.addEventListener("transitioncancel",r,{once:!0})),i.add(o.propertyName)},r=o=>{if(!e(o)||!o.target)return;let i=F.get(o.target);if(i&&(i.delete(o.propertyName),i.size===0&&(o.target.removeEventListener("transitioncancel",r),F.delete(o.target)),F.size===0)){for(let p of se)p();se.clear()}};document.body.addEventListener("transitionrun",t),document.body.addEventListener("transitionend",r)}typeof document<"u"&&(document.readyState!=="loading"?we():document.addEventListener("DOMContentLoaded",we));function Qe(e){requestAnimationFrame(()=>{F.size===0?e():se.add(e)})}function Ze(){let e=v.useRef(new Map),t=v.useCallback((i,p,c,d)=>{let m=d?.once?(...h)=>{e.current.delete(c),c(...h)}:c;e.current.set(c,{type:p,eventTarget:i,fn:m,options:d}),i.addEventListener(p,c,d)},[]),r=v.useCallback((i,p,c,d)=>{var m;let h=((m=e.current.get(c))===null||m===void 0?void 0:m.fn)||c;i.removeEventListener(p,h,d),e.current.delete(c)},[]),o=v.useCallback(()=>{e.current.forEach((i,p)=>{r(i.eventTarget,i.type,p,i.options)})},[r]);return v.useEffect(()=>o,[o]),{addGlobalListener:t,removeGlobalListener:r,removeAllGlobalListeners:o}}function et(e,t){_e(()=>{if(e&&e.ref&&t)return e.ref.current=t.current,()=>{e.ref&&(e.ref.current=null)}})}function Te(e){return e.mozInputSource===0&&e.isTrusted?!0:ke()&&e.pointerType?e.type==="click"&&e.buttons===1:e.detail===0&&!e.pointerType}function tt(e){return!ke()&&e.width===0&&e.height===0||e.width===1&&e.height===1&&e.pressure===0&&e.detail===0&&e.pointerType==="mouse"}let U="default",ie="",J=new WeakMap;function $e(e){if(ye()){if(U==="default"){const t=I(e);ie=t.documentElement.style.webkitUserSelect,t.documentElement.style.webkitUserSelect="none"}U="disabled"}else(e instanceof HTMLElement||e instanceof SVGElement)&&(J.set(e,e.style.userSelect),e.style.userSelect="none")}function Q(e){if(ye()){if(U!=="disabled")return;U="restoring",setTimeout(()=>{Qe(()=>{if(U==="restoring"){const t=I(e);t.documentElement.style.webkitUserSelect==="none"&&(t.documentElement.style.webkitUserSelect=ie||""),ie="",U="default"}})},300)}else if((e instanceof HTMLElement||e instanceof SVGElement)&&e&&J.has(e)){let t=J.get(e);e.style.userSelect==="none"&&(e.style.userSelect=t),e.getAttribute("style")===""&&e.removeAttribute("style"),J.delete(e)}}const Pe=v.createContext({register:()=>{}});Pe.displayName="PressResponderContext";function nt(e,t){return t.get?t.get.call(e):t.value}function Ee(e,t,r){if(!t.has(e))throw new TypeError("attempted to "+r+" private field on non-instance");return t.get(e)}function ot(e,t){var r=Ee(e,t,"get");return nt(e,r)}function rt(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")}function st(e,t,r){rt(e,t),t.set(e,r)}function it(e,t,r){if(t.set)t.set.call(e,r);else{if(!t.writable)throw new TypeError("attempted to set read only private field");t.value=r}}function Be(e,t,r){var o=Ee(e,t,"set");return it(e,o,r),r}function at(e){let t=v.useContext(Pe);if(t){let{register:r,...o}=t;e=j(o,e),r()}return et(t,e.ref),e}var Z=new WeakMap;class ee{continuePropagation(){Be(this,Z,!1)}get shouldStopPropagation(){return ot(this,Z)}constructor(t,r,o,i){st(this,Z,{writable:!0,value:void 0}),Be(this,Z,!0);var p;let c=(p=i?.target)!==null&&p!==void 0?p:o.currentTarget;const d=c?.getBoundingClientRect();let m,h=0,g,P=null;o.clientX!=null&&o.clientY!=null&&(g=o.clientX,P=o.clientY),d&&(g!=null&&P!=null?(m=g-d.left,h=P-d.top):(m=d.width/2,h=d.height/2)),this.type=t,this.pointerType=r,this.target=o.currentTarget,this.shiftKey=o.shiftKey,this.metaKey=o.metaKey,this.ctrlKey=o.ctrlKey,this.altKey=o.altKey,this.x=m,this.y=h}}const Oe=Symbol("linkClicked");function lt(e){let{onPress:t,onPressChange:r,onPressStart:o,onPressEnd:i,onPressUp:p,isDisabled:c,isPressed:d,preventFocusOnPress:m,shouldCancelOnPointerExit:h,allowTextSelectionOnPress:g,ref:P,...S}=at(e),[_,E]=v.useState(!1),T=v.useRef({isPressed:!1,ignoreEmulatedMouseEvents:!1,ignoreClickAfterPress:!1,didFirePressStart:!1,isTriggeringEvent:!1,activePointerId:null,target:null,isOverTarget:!1,pointerType:null}),{addGlobalListener:$,removeAllGlobalListeners:D}=Ze(),B=G((n,f)=>{let O=T.current;if(c||O.didFirePressStart)return!1;let l=!0;if(O.isTriggeringEvent=!0,o){let y=new ee("pressstart",f,n);o(y),l=y.shouldStopPropagation}return r&&r(!0),O.isTriggeringEvent=!1,O.didFirePressStart=!0,E(!0),l}),w=G((n,f,O=!0)=>{let l=T.current;if(!l.didFirePressStart)return!1;l.ignoreClickAfterPress=!0,l.didFirePressStart=!1,l.isTriggeringEvent=!0;let y=!0;if(i){let s=new ee("pressend",f,n);i(s),y=s.shouldStopPropagation}if(r&&r(!1),E(!1),t&&O&&!c){let s=new ee("press",f,n);t(s),y&&(y=s.shouldStopPropagation)}return l.isTriggeringEvent=!1,y}),C=G((n,f)=>{let O=T.current;if(c)return!1;if(p){O.isTriggeringEvent=!0;let l=new ee("pressup",f,n);return p(l),O.isTriggeringEvent=!1,l.shouldStopPropagation}return!0}),N=G(n=>{let f=T.current;f.isPressed&&f.target&&(f.isOverTarget&&f.pointerType!=null&&w(L(f.target,n),f.pointerType,!1),f.isPressed=!1,f.isOverTarget=!1,f.activePointerId=null,f.pointerType=null,D(),g||Q(f.target))}),V=G(n=>{h&&N(n)}),fe=v.useMemo(()=>{let n=T.current,f={onKeyDown(l){if(le(l.nativeEvent,l.currentTarget)&&l.currentTarget.contains(l.target)){var y;De(l.target,l.key)&&l.preventDefault();let s=!0;if(!n.isPressed&&!l.repeat){n.target=l.currentTarget,n.isPressed=!0,s=B(l,"keyboard");let b=l.currentTarget,a=A=>{le(A,b)&&!A.repeat&&b.contains(A.target)&&n.target&&C(L(n.target,A),"keyboard")};$(I(l.currentTarget),"keyup",be(a,O),!0)}s&&l.stopPropagation(),l.metaKey&&z()&&((y=n.metaKeyEvents)===null||y===void 0||y.set(l.key,l.nativeEvent))}else l.key==="Meta"&&(n.metaKeyEvents=new Map)},onClick(l){if(!(l&&!l.currentTarget.contains(l.target))&&l&&l.button===0&&!n.isTriggeringEvent&&!Y.isOpening){let y=!0;if(c&&l.preventDefault(),!n.ignoreClickAfterPress&&!n.ignoreEmulatedMouseEvents&&!n.isPressed&&(n.pointerType==="virtual"||Te(l.nativeEvent))){!c&&!m&&W(l.currentTarget);let s=B(l,"virtual"),b=C(l,"virtual"),a=w(l,"virtual");y=s&&b&&a}n.ignoreEmulatedMouseEvents=!1,n.ignoreClickAfterPress=!1,y&&l.stopPropagation()}}},O=l=>{var y;if(n.isPressed&&n.target&&le(l,n.target)){var s;De(l.target,l.key)&&l.preventDefault();let a=l.target;w(L(n.target,l),"keyboard",n.target.contains(a)),D(),l.key!=="Enter"&&ae(n.target)&&n.target.contains(a)&&!l[Oe]&&(l[Oe]=!0,Y(n.target,l,!1)),n.isPressed=!1,(s=n.metaKeyEvents)===null||s===void 0||s.delete(l.key)}else if(l.key==="Meta"&&(!((y=n.metaKeyEvents)===null||y===void 0)&&y.size)){var b;let a=n.metaKeyEvents;n.metaKeyEvents=void 0;for(let A of a.values())(b=n.target)===null||b===void 0||b.dispatchEvent(new KeyboardEvent("keyup",A))}};if(typeof PointerEvent<"u"){f.onPointerDown=a=>{if(a.button!==0||!a.currentTarget.contains(a.target))return;if(tt(a.nativeEvent)){n.pointerType="virtual";return}ce(a.currentTarget)&&a.preventDefault(),n.pointerType=a.pointerType;let A=!0;n.isPressed||(n.isPressed=!0,n.isOverTarget=!0,n.activePointerId=a.pointerId,n.target=a.currentTarget,!c&&!m&&W(a.currentTarget),g||$e(n.target),A=B(a,n.pointerType),$(I(a.currentTarget),"pointermove",l,!1),$(I(a.currentTarget),"pointerup",y,!1),$(I(a.currentTarget),"pointercancel",b,!1)),A&&a.stopPropagation()},f.onMouseDown=a=>{a.currentTarget.contains(a.target)&&a.button===0&&(ce(a.currentTarget)&&a.preventDefault(),a.stopPropagation())},f.onPointerUp=a=>{!a.currentTarget.contains(a.target)||n.pointerType==="virtual"||a.button===0&&H(a,a.currentTarget)&&C(a,n.pointerType||a.pointerType)};let l=a=>{a.pointerId===n.activePointerId&&(n.target&&H(a,n.target)?!n.isOverTarget&&n.pointerType!=null&&(n.isOverTarget=!0,B(L(n.target,a),n.pointerType)):n.target&&n.isOverTarget&&n.pointerType!=null&&(n.isOverTarget=!1,w(L(n.target,a),n.pointerType,!1),V(a)))},y=a=>{a.pointerId===n.activePointerId&&n.isPressed&&a.button===0&&n.target&&(H(a,n.target)&&n.pointerType!=null?w(L(n.target,a),n.pointerType):n.isOverTarget&&n.pointerType!=null&&w(L(n.target,a),n.pointerType,!1),n.isPressed=!1,n.isOverTarget=!1,n.activePointerId=null,n.pointerType=null,D(),g||Q(n.target),"ontouchend"in n.target&&a.pointerType!=="mouse"&&$(n.target,"touchend",s,{once:!0}))},s=a=>{Se(a.target)&&a.preventDefault()},b=a=>{N(a)};f.onDragStart=a=>{a.currentTarget.contains(a.target)&&N(a)}}else{f.onMouseDown=s=>{if(s.button!==0||!s.currentTarget.contains(s.target))return;if(ce(s.currentTarget)&&s.preventDefault(),n.ignoreEmulatedMouseEvents){s.stopPropagation();return}n.isPressed=!0,n.isOverTarget=!0,n.target=s.currentTarget,n.pointerType=Te(s.nativeEvent)?"virtual":"mouse",!c&&!m&&W(s.currentTarget),B(s,n.pointerType)&&s.stopPropagation(),$(I(s.currentTarget),"mouseup",l,!1)},f.onMouseEnter=s=>{if(!s.currentTarget.contains(s.target))return;let b=!0;n.isPressed&&!n.ignoreEmulatedMouseEvents&&n.pointerType!=null&&(n.isOverTarget=!0,b=B(s,n.pointerType)),b&&s.stopPropagation()},f.onMouseLeave=s=>{if(!s.currentTarget.contains(s.target))return;let b=!0;n.isPressed&&!n.ignoreEmulatedMouseEvents&&n.pointerType!=null&&(n.isOverTarget=!1,b=w(s,n.pointerType,!1),V(s)),b&&s.stopPropagation()},f.onMouseUp=s=>{s.currentTarget.contains(s.target)&&!n.ignoreEmulatedMouseEvents&&s.button===0&&C(s,n.pointerType||"mouse")};let l=s=>{if(s.button===0){if(n.isPressed=!1,D(),n.ignoreEmulatedMouseEvents){n.ignoreEmulatedMouseEvents=!1;return}n.target&&H(s,n.target)&&n.pointerType!=null?w(L(n.target,s),n.pointerType):n.target&&n.isOverTarget&&n.pointerType!=null&&w(L(n.target,s),n.pointerType,!1),n.isOverTarget=!1}};f.onTouchStart=s=>{if(!s.currentTarget.contains(s.target))return;let b=ct(s.nativeEvent);if(!b)return;n.activePointerId=b.identifier,n.ignoreEmulatedMouseEvents=!0,n.isOverTarget=!0,n.isPressed=!0,n.target=s.currentTarget,n.pointerType="touch",!c&&!m&&W(s.currentTarget),g||$e(n.target),B(M(n.target,s),n.pointerType)&&s.stopPropagation(),$(oe(s.currentTarget),"scroll",y,!0)},f.onTouchMove=s=>{if(!s.currentTarget.contains(s.target))return;if(!n.isPressed){s.stopPropagation();return}let b=xe(s.nativeEvent,n.activePointerId),a=!0;b&&H(b,s.currentTarget)?!n.isOverTarget&&n.pointerType!=null&&(n.isOverTarget=!0,a=B(M(n.target,s),n.pointerType)):n.isOverTarget&&n.pointerType!=null&&(n.isOverTarget=!1,a=w(M(n.target,s),n.pointerType,!1),V(M(n.target,s))),a&&s.stopPropagation()},f.onTouchEnd=s=>{if(!s.currentTarget.contains(s.target))return;if(!n.isPressed){s.stopPropagation();return}let b=xe(s.nativeEvent,n.activePointerId),a=!0;b&&H(b,s.currentTarget)&&n.pointerType!=null?(C(M(n.target,s),n.pointerType),a=w(M(n.target,s),n.pointerType)):n.isOverTarget&&n.pointerType!=null&&(a=w(M(n.target,s),n.pointerType,!1)),a&&s.stopPropagation(),n.isPressed=!1,n.activePointerId=null,n.isOverTarget=!1,n.ignoreEmulatedMouseEvents=!0,n.target&&!g&&Q(n.target),D()},f.onTouchCancel=s=>{s.currentTarget.contains(s.target)&&(s.stopPropagation(),n.isPressed&&N(M(n.target,s)))};let y=s=>{n.isPressed&&s.target.contains(n.target)&&N({currentTarget:n.target,shiftKey:!1,ctrlKey:!1,metaKey:!1,altKey:!1})};f.onDragStart=s=>{s.currentTarget.contains(s.target)&&N(s)}}return f},[$,c,m,D,g,N,V,w,B,C]);return v.useEffect(()=>()=>{var n;g||Q((n=T.current.target)!==null&&n!==void 0?n:void 0)},[g]),{isPressed:d||_,pressProps:j(S,fe)}}function ae(e){return e.tagName==="A"&&e.hasAttribute("href")}function le(e,t){const{key:r,code:o}=e,i=t,p=i.getAttribute("role");return(r==="Enter"||r===" "||r==="Spacebar"||o==="Space")&&!(i instanceof oe(i).HTMLInputElement&&!Ne(i,r)||i instanceof oe(i).HTMLTextAreaElement||i.isContentEditable)&&!((p==="link"||!p&&ae(i))&&r!=="Enter")}function ct(e){const{targetTouches:t}=e;return t.length>0?t[0]:null}function xe(e,t){const r=e.changedTouches;for(let o=0;o<r.length;o++){const i=r[o];if(i.identifier===t)return i}return null}function M(e,t){let r=0,o=0;return t.targetTouches&&t.targetTouches.length===1&&(r=t.targetTouches[0].clientX,o=t.targetTouches[0].clientY),{currentTarget:e,shiftKey:t.shiftKey,ctrlKey:t.ctrlKey,metaKey:t.metaKey,altKey:t.altKey,clientX:r,clientY:o}}function L(e,t){let r=t.clientX,o=t.clientY;return{currentTarget:e,shiftKey:t.shiftKey,ctrlKey:t.ctrlKey,metaKey:t.metaKey,altKey:t.altKey,clientX:r,clientY:o}}function ut(e){let t=0,r=0;return e.width!==void 0?t=e.width/2:e.radiusX!==void 0&&(t=e.radiusX),e.height!==void 0?r=e.height/2:e.radiusY!==void 0&&(r=e.radiusY),{top:e.clientY-r,right:e.clientX+t,bottom:e.clientY+r,left:e.clientX-t}}function pt(e,t){return!(e.left>t.right||t.left>e.right||e.top>t.bottom||t.top>e.bottom)}function H(e,t){let r=t.getBoundingClientRect(),o=ut(e);return pt(r,o)}function ce(e){return!(e instanceof HTMLElement)||!e.hasAttribute("draggable")}function Se(e){return e instanceof HTMLInputElement?!1:e instanceof HTMLButtonElement?e.type!=="submit"&&e.type!=="reset":!ae(e)}function De(e,t){return e instanceof HTMLInputElement?!Ne(e,t):Se(e)}const dt=new Set(["checkbox","radio","range","color","file","image","button","submit","reset"]);function Ne(e,t){return e.type==="checkbox"||e.type==="radio"?t===" ":dt.has(e.type)}let te=!1,ue=0;function pe(){te=!0,setTimeout(()=>{te=!1},50)}function Ce(e){e.pointerType==="touch"&&pe()}function ft(){if(!(typeof document>"u"))return typeof PointerEvent<"u"?document.addEventListener("pointerup",Ce):document.addEventListener("touchend",pe),ue++,()=>{ue--,!(ue>0)&&(typeof PointerEvent<"u"?document.removeEventListener("pointerup",Ce):document.removeEventListener("touchend",pe))}}function mt(e){let{onHoverStart:t,onHoverChange:r,onHoverEnd:o,isDisabled:i}=e,[p,c]=v.useState(!1),d=v.useRef({isHovered:!1,ignoreEmulatedMouseEvents:!1,pointerType:"",target:null}).current;v.useEffect(ft,[]);let{hoverProps:m,triggerHoverEnd:h}=v.useMemo(()=>{let g=(_,E)=>{if(d.pointerType=E,i||E==="touch"||d.isHovered||!_.currentTarget.contains(_.target))return;d.isHovered=!0;let T=_.currentTarget;d.target=T,t&&t({type:"hoverstart",target:T,pointerType:E}),r&&r(!0),c(!0)},P=(_,E)=>{if(d.pointerType="",d.target=null,E==="touch"||!d.isHovered)return;d.isHovered=!1;let T=_.currentTarget;o&&o({type:"hoverend",target:T,pointerType:E}),r&&r(!1),c(!1)},S={};return typeof PointerEvent<"u"?(S.onPointerEnter=_=>{te&&_.pointerType==="mouse"||g(_,_.pointerType)},S.onPointerLeave=_=>{!i&&_.currentTarget.contains(_.target)&&P(_,_.pointerType)}):(S.onTouchStart=()=>{d.ignoreEmulatedMouseEvents=!0},S.onMouseEnter=_=>{!d.ignoreEmulatedMouseEvents&&!te&&g(_,"mouse"),d.ignoreEmulatedMouseEvents=!1},S.onMouseLeave=_=>{!i&&_.currentTarget.contains(_.target)&&P(_,"mouse")}),{hoverProps:S,triggerHoverEnd:P}},[t,r,o,i,d]);return v.useEffect(()=>{i&&h({currentTarget:d.target},d.pointerType)},[i]),{hoverProps:m,isHovered:p}}function _t(e,t){let{elementType:r="button",isDisabled:o,onPress:i,onPressStart:p,onPressEnd:c,onPressUp:d,onPressChange:m,preventFocusOnPress:h,allowFocusWhenDisabled:g,onClick:P,href:S,target:_,rel:E,type:T="button"}=e,$;r==="button"?$={type:T,disabled:o}:$={role:"button",tabIndex:o?void 0:0,href:r==="a"&&o?void 0:S,target:r==="a"?_:void 0,type:r==="input"?T:void 0,disabled:r==="input"?o:void 0,"aria-disabled":!o||r==="input"?void 0:o,rel:r==="a"?E:void 0};let{pressProps:D,isPressed:B}=lt({onPressStart:p,onPressEnd:c,onPressChange:m,onPress:i,onPressUp:d,isDisabled:o,preventFocusOnPress:h,ref:t}),{focusableProps:w}=me.useFocusable(e,t);g&&(w.tabIndex=o?-1:w.tabIndex);let C=j(w,D,je(e,{labelable:!0}));return{isPressed:B,buttonProps:j($,C,{"aria-haspopup":e["aria-haspopup"],"aria-expanded":e["aria-expanded"],"aria-controls":e["aria-controls"],"aria-pressed":e["aria-pressed"],onClick:N=>{P&&(P(N),console.warn("onClick is deprecated, please use onPress"))}})}}function gt(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function Le(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable})),r.push.apply(r,o)}return r}function Ae(e){for(var t=1;t<arguments.length;t++){var r=arguments[t]!=null?arguments[t]:{};t%2?Le(Object(r),!0).forEach(function(o){gt(e,o,r[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):Le(Object(r)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(r,o))})}return e}var bt=(e,t,r)=>{for(var o of Object.keys(e)){var i;if(e[o]!==((i=t[o])!==null&&i!==void 0?i:r[o]))return!1}return!0},ne=e=>t=>{var r=e.defaultClassName,o=Ae(Ae({},e.defaultVariants),t);for(var i in o){var p,c=(p=o[i])!==null&&p!==void 0?p:e.defaultVariants[i];if(c!=null){var d=c;typeof d=="boolean"&&(d=d===!0?"true":"false");var m=e.variantClassNames[i][d];m&&(r+=" "+m)}}for(var[h,g]of e.compoundVariants)bt(h,o,e.defaultVariants)&&(r+=" "+g);return r},vt=ne({defaultClassName:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy0",variantClassNames:{disabled:{true:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy1",false:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy2"},kind:{default:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy3",link:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy4",confirm:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy5",delete:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy6",key:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy7",icon:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy8"},spinning:{true:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy9",false:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxya"}},defaultVariants:{disabled:!1,kind:"default",spinning:!1},compoundVariants:[[{kind:"icon",spinning:!0},"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyb"],[{kind:"default",spinning:!0},"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyc"],[{kind:"confirm",spinning:!0},"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyd"],[{kind:"delete",spinning:!0},"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxye"],[{kind:"key",spinning:!0},"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyf"],[{disabled:!0,spinning:!1},"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyg"],[{kind:"link",disabled:!0},"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyh"]]}),ht=ne({defaultClassName:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyi",variantClassNames:{disabled:{true:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyj",false:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyk"},kind:{icon:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyl",default:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxym",delete:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyn",key:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyo",confirm:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyp",link:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyq"},spinning:{true:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyr",false:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxys"}},defaultVariants:{disabled:!1,kind:"default",spinning:!1},compoundVariants:[]}),yt=ne({defaultClassName:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyt",variantClassNames:{spinning:{true:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyu",false:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyv"},kind:{icon:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyw",default:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyx",delete:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyy",key:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyz",confirm:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy10",link:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy11"}},defaultVariants:{spinning:!1},compoundVariants:[]}),kt="pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy12",wt=ne({defaultClassName:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy13",variantClassNames:{spinning:{true:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy14",false:"pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy15"}},defaultVariants:{spinning:!1},compoundVariants:[]});const de=u.forwardRef(({as:e,onClick:t,onPress:r,children:o,className:i,isDisabled:p,disabled:c,href:d,icon:m,kind:h="default",spinning:g,spinningTitle:P,title:S,..._},E)=>{const T=e??(d?"a":"button"),$={onPress:r??t,isDisabled:c??p??g,..._},{"data-testid":D}=_,B=u.useRef(null),w=E||B,{buttonProps:C}=_t($,w),{hoverProps:N}=mt({isDisabled:$.isDisabled}),{type:V,...fe}=C,n={...j(fe,N),ref:w,title:S,className:d?yt({spinning:g,kind:h}):ht({disabled:p||c,kind:h,spinning:g}),...d?{href:d}:{type:V},..._},{t:f}=Ie.useWoodlandLanguage(),O=m&&u.createElement(R.Icon,{className:kt,icon:m,"aria-hidden":"true","data-testid":`${D}__${m}-icon`});let l;h==="default"||h==="icon"||h==="link"?l="dark":l="light";const y=g&&u.createElement(R.Spinner,{color:l,className:wt({spinning:g}),title:P||f("button.spinningTitle",{defaultValue:"Loading..."}),"data-testid":`${D}__spinner`});return u.createElement(me.FocusRing,null,u.createElement("div",{className:R.cl(vt({disabled:p||c,kind:h,spinning:g}),i)},u.createElement(T,{...n},O,o?u.createElement("span",null,o):"",y)))});R.Metadata.set(de,{name:"Button",props:{disabled:"boolean",href:"string",icon:"IconName",kind:{type:'"default" | "link" | "icon" | "confirm" | "delete" | "key"',default:'"default"'},spinning:"boolean",spinningTitle:"string",type:{type:'"button" | "submit"',default:'"button"'},as:"button | a",onClick:"() => void",onPress:"() => void",children:"ReactNode",className:"string",isDisabled:"boolean",style:"CSSProperties"},panellable:!0});const Tt={Buttons:{components:[de],description:()=>u.createElement(u.Fragment,null,u.createElement("div",{className:"sps-body-14"},"Buttons are used to initiate events or actions. The labels and/or icons describe what the button will do."),u.createElement("br",null),u.createElement("h5",null,"Variants"),u.createElement("div",{className:"sps-body-14"},u.createElement("span",{className:"sps-text-semibold"},"Default: "),"For tertiary actions or actions of lower importance on a page."),u.createElement("div",{className:"sps-body-14"},u.createElement("span",{className:"sps-text-semibold"},"Key: "),"For primary or important actions on a page."),u.createElement("div",{className:"sps-body-14"},u.createElement("span",{className:"sps-text-semibold"},"Confirm: "),"For the main call to action on a page. There should only be one Confirm button per screen."),u.createElement("div",{className:"sps-body-14"},u.createElement("span",{className:"sps-text-semibold"},"Delete: "),"For deleting information or another destructive action. These should always be paired with a Delete Confirmation Modal."),u.createElement("div",{className:"sps-body-14"},u.createElement("span",{className:"sps-text-semibold"},"Disabled: "),"For actions that are not permitted in a particular state. These can be accompanied by a Tooltip on hover describing why it’s disabled."),u.createElement("div",{className:"sps-body-14"},u.createElement("span",{className:"sps-text-semibold"},"With an Icon: "),"For further illustrating the action. Example: Pencil icon in an Edit button. There can also be Icon Buttons without text.")),examples:{basic:{label:"Basic Buttons",description:({NavigateTo:e})=>u.createElement(u.Fragment,null,u.createElement("p",null,"The most common type of button that can be used in most cases. Example: Basic Buttons in a ",u.createElement(e,{to:"modals"},"Modal"),".")),examples:{withoutIcons:{description:"Without Icons",react:k.code`
|
|
2
2
|
import { Button } from "@sps-woodland/buttons";
|
|
3
3
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
4
4
|
|
|
@@ -43,119 +43,99 @@
|
|
|
43
43
|
)
|
|
44
44
|
}
|
|
45
45
|
`}}},dropdown:{label:"Dropdown Buttons",description:"Use these for actions that need to select an option to proceed. Example: Download button with optiosn related to the file format (PDF, PPT, etc.).",examples:{withoutIcons:{description:"Without Icons",react:k.code`
|
|
46
|
-
import {
|
|
46
|
+
import { Dropdown, OptionList, Option } from "@sps-woodland/dropdowns";
|
|
47
47
|
|
|
48
48
|
function Component() {
|
|
49
49
|
return (
|
|
50
50
|
<>
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
<
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
disabled
|
|
77
|
-
label="Disabled"
|
|
78
|
-
options={[[{ label: "Option A" }, () => console.log("Option A")]]}
|
|
79
|
-
/>
|
|
51
|
+
<Dropdown label="Default" className={sprinkles({ mr: "sm" })}>
|
|
52
|
+
<OptionList>
|
|
53
|
+
<Option onClick={() => console.log("Option A")}>Option A</Option>
|
|
54
|
+
</OptionList>
|
|
55
|
+
</Dropdown>
|
|
56
|
+
<Dropdown label="Key" kind="key" className={sprinkles({ mr: "sm" })}>
|
|
57
|
+
<OptionList>
|
|
58
|
+
<Option onClick={() => console.log("Option A")}>Option A</Option>
|
|
59
|
+
</OptionList>
|
|
60
|
+
</Dropdown>
|
|
61
|
+
<Dropdown label="Confirm" kind="confirm" className={sprinkles({ mr: "sm" })}>
|
|
62
|
+
<OptionList>
|
|
63
|
+
<Option onClick={() => console.log("Option A")}>Option A</Option>
|
|
64
|
+
</OptionList>
|
|
65
|
+
</Dropdown>
|
|
66
|
+
<Dropdown label="Delete" kind="delete" className={sprinkles({ mr: "sm" })}>
|
|
67
|
+
<OptionList>
|
|
68
|
+
<Option onClick={() => console.log("Option A")}>Option A</Option>
|
|
69
|
+
</OptionList>
|
|
70
|
+
</Dropdown>
|
|
71
|
+
<Dropdown label="Disabled" disabled>
|
|
72
|
+
<OptionList>
|
|
73
|
+
<Option onClick={() => console.log("Option A")}>Option A</Option>
|
|
74
|
+
</OptionList>
|
|
75
|
+
</Dropdown>
|
|
80
76
|
</>
|
|
81
77
|
)
|
|
82
78
|
}
|
|
83
79
|
`},withIcons:{description:"With Icons",react:k.code`
|
|
84
|
-
import {
|
|
80
|
+
import { Dropdown, OptionList, Option } from "@sps-woodland/dropdowns";
|
|
85
81
|
|
|
86
82
|
function Component() {
|
|
87
83
|
return (
|
|
88
84
|
<>
|
|
89
|
-
<
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
<
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
options={[[{ label: "Option A" }, () => console.log("Option A")]]}
|
|
115
|
-
/>
|
|
116
|
-
<SpsDropdown
|
|
117
|
-
className="mr-1 mb-1"
|
|
118
|
-
icon={SpsIcon.DOWNLOAD_CLOUD}
|
|
119
|
-
disabled
|
|
120
|
-
label="Disabled"
|
|
121
|
-
options={[[{ label: "Option A" }, () => console.log("Option A")]]}
|
|
122
|
-
/>
|
|
85
|
+
<Dropdown label="Default" icon="download-cloud" className={sprinkles({ mr: "sm" })}>
|
|
86
|
+
<OptionList>
|
|
87
|
+
<Option onClick={() => console.log("Option A")}>Option A</Option>
|
|
88
|
+
</OptionList>
|
|
89
|
+
</Dropdown>
|
|
90
|
+
<Dropdown label="Key" kind="key" icon="download-cloud" className={sprinkles({ mr: "sm" })}>
|
|
91
|
+
<OptionList>
|
|
92
|
+
<Option onClick={() => console.log("Option A")}>Option A</Option>
|
|
93
|
+
</OptionList>
|
|
94
|
+
</Dropdown>
|
|
95
|
+
<Dropdown label="Confirm" kind="confirm" icon="download-cloud" className={sprinkles({ mr: "sm" })}>
|
|
96
|
+
<OptionList>
|
|
97
|
+
<Option onClick={() => console.log("Option A")}>Option A</Option>
|
|
98
|
+
</OptionList>
|
|
99
|
+
</Dropdown>
|
|
100
|
+
<Dropdown label="Delete" kind="delete" icon="download-cloud" className={sprinkles({ mr: "sm" })}>
|
|
101
|
+
<OptionList>
|
|
102
|
+
<Option onClick={() => console.log("Option A")}>Option A</Option>
|
|
103
|
+
</OptionList>
|
|
104
|
+
</Dropdown>
|
|
105
|
+
<Dropdown label="Disabled" disabled icon="download-cloud">
|
|
106
|
+
<OptionList>
|
|
107
|
+
<Option onClick={() => console.log("Option A")}>Option A</Option>
|
|
108
|
+
</OptionList>
|
|
109
|
+
</Dropdown>
|
|
123
110
|
</>
|
|
124
111
|
)
|
|
125
112
|
}
|
|
126
113
|
`},spinning:{description:"Spinning",react:k.code`
|
|
127
|
-
import {
|
|
114
|
+
import { Dropdown, OptionList, Option } from "@sps-woodland/dropdowns";
|
|
128
115
|
|
|
129
116
|
function Component() {
|
|
130
117
|
return (
|
|
131
118
|
<>
|
|
132
|
-
<
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
<SpsDropdown
|
|
153
|
-
spinning
|
|
154
|
-
className="mr-1 mb-1"
|
|
155
|
-
kind={ButtonKind.DELETE}
|
|
156
|
-
label="Delete"
|
|
157
|
-
options={[[{ label: "Option A" }, () => console.log("Option A")]]}
|
|
158
|
-
/>
|
|
119
|
+
<Dropdown label="Default" spinning className={sprinkles({ mr: "sm" })}>
|
|
120
|
+
<OptionList>
|
|
121
|
+
<Option onClick={() => console.log("Option A")}>Option A</Option>
|
|
122
|
+
</OptionList>
|
|
123
|
+
</Dropdown>
|
|
124
|
+
<Dropdown label="Key" kind="key" spinning className={sprinkles({ mr: "sm" })}>
|
|
125
|
+
<OptionList>
|
|
126
|
+
<Option onClick={() => console.log("Option A")}>Option A</Option>
|
|
127
|
+
</OptionList>
|
|
128
|
+
</Dropdown>
|
|
129
|
+
<Dropdown label="Confirm" kind="confirm" spinning className={sprinkles({ mr: "sm" })}>
|
|
130
|
+
<OptionList>
|
|
131
|
+
<Option onClick={() => console.log("Option A")}>Option A</Option>
|
|
132
|
+
</OptionList>
|
|
133
|
+
</Dropdown>
|
|
134
|
+
<Dropdown label="Delete" kind="delete" spinning className={sprinkles({ mr: "sm" })}>
|
|
135
|
+
<OptionList>
|
|
136
|
+
<Option onClick={() => console.log("Option A")}>Option A</Option>
|
|
137
|
+
</OptionList>
|
|
138
|
+
</Dropdown>
|
|
159
139
|
</>
|
|
160
140
|
)
|
|
161
141
|
}
|
|
@@ -231,7 +211,7 @@
|
|
|
231
211
|
</>
|
|
232
212
|
)
|
|
233
213
|
}
|
|
234
|
-
`}}},iconButtons:{label:"Icon Buttons",description:({NavigateTo:e,Link:t})=>
|
|
214
|
+
`}}},iconButtons:{label:"Icon Buttons",description:({NavigateTo:e,Link:t})=>u.createElement(u.Fragment,null,u.createElement("p",null,"Use these for quick actions that can clearly be articulated by the use of an icon. Example: A Print button in the"," ",u.createElement(e,{to:"list-action-bar"},"List Action Bar"),". Do not use an icon that doesn't have a universally understood meaning; instead use a Basic Button or a Basic Button with an icon. ",u.createElement(t,{to:"/style-and-layout/icons/"},"View All Icons"))),examples:{standard:{description:"Standard Icon Buttons",react:k.code`
|
|
235
215
|
import { Button } from "@sps-woodland/buttons";
|
|
236
216
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
237
217
|
|
|
@@ -250,7 +230,7 @@
|
|
|
250
230
|
</>
|
|
251
231
|
)
|
|
252
232
|
}
|
|
253
|
-
`},dropdown:{description:({NavigateTo:e})=>
|
|
233
|
+
`},dropdown:{description:({NavigateTo:e})=>u.createElement(u.Fragment,null,u.createElement("h5",null,"Dropdown Icon Buttons"),u.createElement("p",null,"Use these when there are several options available for action. Example: Dropdown Icon Button in a ",u.createElement(e,{to:"content-rows"},"Content Row"),".")),react:k.code`
|
|
254
234
|
import { SpsDropdown } from "@spscommerce/ds-react";
|
|
255
235
|
|
|
256
236
|
function Component() {
|
|
@@ -274,7 +254,7 @@
|
|
|
274
254
|
</>
|
|
275
255
|
)
|
|
276
256
|
}
|
|
277
|
-
`}}},textButtons:{label:"Text Buttons",description:({NavigateTo:e})=>
|
|
257
|
+
`}}},textButtons:{label:"Text Buttons",description:({NavigateTo:e})=>u.createElement("p",null,"Use for less important actions, or ones that aren't taken as frequently. They should not appear inline with other copy. Example: Advanced Search button in the"," ",u.createElement(e,{to:"list-toolbar"},"List Toolbar")),examples:{withoutIcons:{description:"Without Icons",react:k.code`
|
|
278
258
|
import { Button } from "@sps-woodland/buttons";
|
|
279
259
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
280
260
|
|
|
@@ -310,7 +290,7 @@
|
|
|
310
290
|
</>
|
|
311
291
|
)
|
|
312
292
|
}
|
|
313
|
-
`}}},submitButtons:{label:"Submit Buttons",description:({NavigateTo:e})=>
|
|
293
|
+
`}}},submitButtons:{label:"Submit Buttons",description:({NavigateTo:e})=>u.createElement("p",null,"Use to submit a form. There can be a number of visual variations, for example a"," ",u.createElement(e,{to:"modals"},"Modal")," uses Basic Button (Key) as its Submit Button."),examples:{basic:{react:k.code`
|
|
314
294
|
import { Button } from "@sps-woodland/buttons";
|
|
315
295
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
316
296
|
|
|
@@ -341,7 +321,7 @@
|
|
|
341
321
|
</>
|
|
342
322
|
)
|
|
343
323
|
}
|
|
344
|
-
`}}},buttonGroups:{label:"Button Groups",description:({NavigateTo:e})=>
|
|
324
|
+
`}}},buttonGroups:{label:"Button Groups",description:({NavigateTo:e})=>u.createElement("p",null,"Use button groups when there are a number of actions that can be taken in a view. When there are multiple button types in a group, they are separated using dividers. Example: Button groups in ",u.createElement(e,{to:"List Action Bar"},"List Action Bar"),"."),examples:{basic:{description:"Basic Button Groups",react:k.code`
|
|
345
325
|
import { Button } from "@sps-woodland/buttons";
|
|
346
326
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
347
327
|
|
|
@@ -431,4 +411,4 @@
|
|
|
431
411
|
</>
|
|
432
412
|
)
|
|
433
413
|
}
|
|
434
|
-
`}}}}}};
|
|
414
|
+
`}}}}}};x.Button=de,x.MANIFEST=Tt,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})});
|
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkg_sps-
|
|
1
|
+
.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy0{border-width:.0625rem;border-style:solid;border-radius:.25rem;cursor:pointer;display:inline-block;font-size:.75rem;font-weight:600;line-height:.875rem;padding:0;position:relative}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy3{background:#e9e9ea;border-color:#d2d4d4;color:#4b5356}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy3:hover{background:#d2d4d4}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy4{background:none transparent;border:0;color:#007db8}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy4:hover{background:none transparent;color:#09638d;text-decoration:none}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy5{background:#007db8;border-color:#09638d;color:#fff}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy5:hover{background:#09638d}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy6{background:#de002e;border-color:#a30d2d;color:#fff}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy6:hover{background:#a30d2d}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy7{background:#4b5356;border-color:#1f282c;color:#fff}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy7:hover{background:#1f282c}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy8{background:transparent;border-color:transparent;color:#4b5356}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy8:hover{background-color:#d2d4d4;border-color:#d2d4d4}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy9{color:transparent!important;cursor:not-allowed}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyb{background:#e9e9ea;border-color:#d2d4d4}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyb:hover,.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyc:hover{background:#e9e9ea}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyd:hover{background:#007db8}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxye:hover{background:#de002e}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyf:hover{background:#4b5356}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyg{background:#fff!important;border-color:#d2d4d4!important;color:#717779!important;cursor:not-allowed}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyg:hover{background:#fff}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyh{background:none transparent!important}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyi{background:none transparent;border:0 none;color:inherit;display:block;font-size:inherit;font-weight:inherit;margin:0;text-decoration:none;padding:.5rem 1rem}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyi:hover{text-decoration:none}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyj{cursor:not-allowed!important}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyl{padding:.25rem .5rem}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyq{padding-top:.5rem;padding-bottom:.5rem;padding-right:0;padding-left:0}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyr{cursor:not-allowed!important}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyt{background:none transparent;border:0 none;color:inherit;cursor:inherit;display:block;font-size:inherit;font-weight:inherit;margin:0;padding:.5rem 1rem;text-decoration:none}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyt:hover{text-decoration:none;color:inherit}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyu{cursor:not-allowed}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxyw{padding:.25rem .5rem}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy11{padding-top:.5rem;padding-bottom:.5rem;padding-right:0;padding-left:0}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy12{line-height:0!important;position:relative}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy12:before{font-size:.875rem;line-height:0;position:relative;top:.125rem}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy12:not(:last-child){margin-right:.5rem}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy13{left:50%;margin:-.875rem -.4375rem;position:absolute}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy14{cursor:not-allowed;display:inline}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy15{display:none}.pkg_sps-woodland_buttons__version_8_35_0__hash_125pcxy13>i{border-width:.125rem;height:.875rem;width:.875rem}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/buttons",
|
|
3
3
|
"description": "SPS Woodland Design System button components",
|
|
4
|
-
"version": "8.
|
|
4
|
+
"version": "8.35.0",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/buttons",
|
|
@@ -30,9 +30,9 @@
|
|
|
30
30
|
"@spscommerce/utils": "^7.0.0 || ^8.0.0",
|
|
31
31
|
"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
32
32
|
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
33
|
-
"@sps-woodland/core": "8.
|
|
34
|
-
"@sps-woodland/tokens": "8.
|
|
35
|
-
"@spscommerce/i18n": "8.
|
|
33
|
+
"@sps-woodland/core": "8.35.0",
|
|
34
|
+
"@sps-woodland/tokens": "8.35.0",
|
|
35
|
+
"@spscommerce/i18n": "8.35.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@react-aria/button": "^3.3.5",
|
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
"@vanilla-extract/recipes": "^0.2.5",
|
|
44
44
|
"react": "^16.9.0",
|
|
45
45
|
"react-dom": "^16.9.0",
|
|
46
|
-
"@sps-woodland/core": "8.
|
|
47
|
-
"@sps-woodland/tokens": "8.
|
|
48
|
-
"@spscommerce/i18n": "8.
|
|
46
|
+
"@sps-woodland/core": "8.35.0",
|
|
47
|
+
"@sps-woodland/tokens": "8.35.0",
|
|
48
|
+
"@spscommerce/i18n": "8.35.0"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@react-aria/button": "^3.7.0",
|