@sps-woodland/buttons 8.17.1 → 8.18.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.cjs.js +23 -23
- package/lib/index.es.js +464 -447
- package/lib/style.css +1 -1
- package/package.json +5 -5
- package/vite.config.mjs +11 -2
package/lib/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react"),R=require("@sps-woodland/core"),Te=require("@react-aria/focus"),y=require("@spscommerce/utils");function Ce(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=Ce(E),Be=typeof document<"u"?E.useLayoutEffect:()=>{};function U(e){const t=E.useRef(null);return Be(()=>{t.current=e},[e]),E.useCallback((...r)=>{const o=t.current;return o==null?void 0:o(...r)},[])}let de=new Map;function _e(e,t){if(e===t)return e;let r=de.get(e);if(r)return r(t),t;let o=de.get(t);return o?(o(e),e):t}function Pe(...e){return(...t)=>{for(let r of e)typeof r=="function"&&r(...t)}}const I=e=>{var t;return(t=e==null?void 0:e.ownerDocument)!==null&&t!==void 0?t:document},oe=e=>e&&"window"in e&&e.window===e?e:I(e).defaultView||window;function $e(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=$e(e[t]))&&(o&&(o+=" "),o+=r)}else for(r in e)e[r]&&(o&&(o+=" "),o+=r);return o}function Ie(){for(var e,t,r=0,o="",i=arguments.length;r<i;r++)(e=arguments[r])&&(t=$e(e))&&(o&&(o+=" "),o+=t);return o}function G(...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],c=o[i];typeof d=="function"&&typeof c=="function"&&i[0]==="o"&&i[1]==="n"&&i.charCodeAt(2)>=65&&i.charCodeAt(2)<=90?t[i]=Pe(d,c):(i==="className"||i==="UNSAFE_className")&&typeof d=="string"&&typeof c=="string"?t[i]=Ie(d,c):i==="id"&&d&&c?t.id=_e(d,c):t[i]=c!==void 0?c:d}}return t}const Ke=new Set(["id"]),Ae=new Set(["aria-label","aria-labelledby","aria-describedby","aria-details"]),Le=new Set(["href","hrefLang","target","rel","download","ping","referrerPolicy"]),Me=/^(data-.*)$/;function Fe(e,t={}){let{labelable:r,isLink:o,propNames:i}=t,d={};for(const c in e)Object.prototype.hasOwnProperty.call(e,c)&&(Ke.has(c)||r&&Ae.has(c)||o&&Le.has(c)||i!=null&&i.has(c)||Me.test(c))&&(d[c]=e[c]);return d}function H(e){if(Ue())e.focus({preventScroll:!0});else{let t=Re(e);e.focus(),He(t)}}let W=null;function Ue(){if(W==null){W=!1;try{document.createElement("div").focus({get preventScroll(){return W=!0,!0}})}catch{}}return W}function Re(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 He(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 le(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 X(){return le(/^Mac/i)}function Ge(){return le(/^iPhone/i)}function we(){return le(/^iPad/i)||X()&&navigator.maxTouchPoints>1}function xe(){return Ge()||we()}function Ve(){return Q(/AppleWebKit/i)&&!We()}function We(){return Q(/Chrome/i)}function Se(){return Q(/Android/i)}function je(){return Q(/Firefox/i)}function V(e,t,r=!0){var o,i;let{metaKey:d,ctrlKey:c,altKey:p,shiftKey:b}=t;je()&&(!((i=window.event)===null||i===void 0||(o=i.type)===null||o===void 0)&&o.startsWith("key"))&&e.target==="_blank"&&(X()?d=!0:c=!0);let h=Ve()&&X()&&!we()?new KeyboardEvent("keydown",{keyIdentifier:"Enter",metaKey:d,ctrlKey:c,altKey:p,shiftKey:b}):new MouseEvent("click",{metaKey:d,ctrlKey:c,altKey:p,shiftKey:b,bubbles:!0,cancelable:!0});V.isOpening=r,H(e),e.dispatchEvent(h),V.isOpening=!1}V.isOpening=!1;let M=new Map,se=new Set;function pe(){if(typeof window>"u")return;function e(o){return"propertyName"in o}let t=o=>{if(!e(o)||!o.target)return;let i=M.get(o.target);i||(i=new Set,M.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=M.get(o.target);if(i&&(i.delete(o.propertyName),i.size===0&&(o.target.removeEventListener("transitioncancel",r),M.delete(o.target)),M.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"?pe():document.addEventListener("DOMContentLoaded",pe));function Ye(e){requestAnimationFrame(()=>{M.size===0?e():se.add(e)})}function qe(){let e=E.useRef(new Map),t=E.useCallback((i,d,c,p)=>{let b=p!=null&&p.once?(...h)=>{e.current.delete(c),c(...h)}:c;e.current.set(c,{type:d,eventTarget:i,fn:b,options:p}),i.addEventListener(d,c,p)},[]),r=E.useCallback((i,d,c,p)=>{var b;let h=((b=e.current.get(c))===null||b===void 0?void 0:b.fn)||c;i.removeEventListener(d,h,p),e.current.delete(c)},[]),o=E.useCallback(()=>{e.current.forEach((i,d)=>{r(i.eventTarget,i.type,d,i.options)})},[r]);return E.useEffect(()=>o,[o]),{addGlobalListener:t,removeGlobalListener:r,removeAllGlobalListeners:o}}function ze(e,t){Be(()=>{if(e&&e.ref&&t)return e.ref.current=t.current,()=>{e.ref&&(e.ref.current=null)}})}function fe(e){return e.mozInputSource===0&&e.isTrusted?!0:Se()&&e.pointerType?e.type==="click"&&e.buttons===1:e.detail===0&&!e.pointerType}function Xe(e){return!Se()&&e.width===0&&e.height===0||e.width===1&&e.height===1&&e.pressure===0&&e.detail===0&&e.pointerType==="mouse"}let F="default",ie="",z=new WeakMap;function me(e){if(xe()){if(F==="default"){const t=I(e);ie=t.documentElement.style.webkitUserSelect,t.documentElement.style.webkitUserSelect="none"}F="disabled"}else(e instanceof HTMLElement||e instanceof SVGElement)&&(z.set(e,e.style.userSelect),e.style.userSelect="none")}function j(e){if(xe()){if(F!=="disabled")return;F="restoring",setTimeout(()=>{Ye(()=>{if(F==="restoring"){const t=I(e);t.documentElement.style.webkitUserSelect==="none"&&(t.documentElement.style.webkitUserSelect=ie||""),ie="",F="default"}})},300)}else if((e instanceof HTMLElement||e instanceof SVGElement)&&e&&z.has(e)){let t=z.get(e);e.style.userSelect==="none"&&(e.style.userSelect=t),e.getAttribute("style")===""&&e.removeAttribute("style"),z.delete(e)}}const Ne=E.createContext({register:()=>{}});Ne.displayName="PressResponderContext";function Je(e,t){return t.get?t.get.call(e):t.value}function Oe(e,t,r){if(!t.has(e))throw new TypeError("attempted to "+r+" private field on non-instance");return t.get(e)}function Qe(e,t){var r=Oe(e,t,"get");return Je(e,r)}function Ze(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")}function et(e,t,r){Ze(e,t),t.set(e,r)}function tt(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=Oe(e,t,"set");return tt(e,o,r),r}function nt(e){let t=E.useContext(Ne);if(t){let{register:r,...o}=t;e=G(o,e),r()}return ze(t,e.ref),e}var Y=new WeakMap;class q{continuePropagation(){be(this,Y,!1)}get shouldStopPropagation(){return Qe(this,Y)}constructor(t,r,o){et(this,Y,{writable:!0,value:void 0}),be(this,Y,!0),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}}const ge=Symbol("linkClicked");function rt(e){let{onPress:t,onPressChange:r,onPressStart:o,onPressEnd:i,onPressUp:d,isDisabled:c,isPressed:p,preventFocusOnPress:b,shouldCancelOnPointerExit:h,allowTextSelectionOnPress:g,ref:C,...S}=nt(e),[m,x]=E.useState(!1),B=E.useRef({isPressed:!1,ignoreEmulatedMouseEvents:!1,ignoreClickAfterPress:!1,didFirePressStart:!1,isTriggeringEvent:!1,activePointerId:null,target:null,isOverTarget:!1,pointerType:null}),{addGlobalListener:$,removeAllGlobalListeners:N}=qe(),w=U((n,f)=>{let P=B.current;if(c||P.didFirePressStart)return!1;let l=!0;if(P.isTriggeringEvent=!0,o){let v=new q("pressstart",f,n);o(v),l=v.shouldStopPropagation}return r&&r(!0),P.isTriggeringEvent=!1,P.didFirePressStart=!0,x(!0),l}),T=U((n,f,P=!0)=>{let l=B.current;if(!l.didFirePressStart)return!1;l.ignoreClickAfterPress=!0,l.didFirePressStart=!1,l.isTriggeringEvent=!0;let v=!0;if(i){let s=new q("pressend",f,n);i(s),v=s.shouldStopPropagation}if(r&&r(!1),x(!1),t&&P&&!c){let s=new q("press",f,n);t(s),v&&(v=s.shouldStopPropagation)}return l.isTriggeringEvent=!1,v}),D=U((n,f)=>{let P=B.current;if(c)return!1;if(d){P.isTriggeringEvent=!0;let l=new q("pressup",f,n);return d(l),P.isTriggeringEvent=!1,l.shouldStopPropagation}return!0}),O=U(n=>{let f=B.current;f.isPressed&&f.target&&(f.isOverTarget&&f.pointerType!=null&&T(_(f.target,n),f.pointerType,!1),f.isPressed=!1,f.isOverTarget=!1,f.activePointerId=null,f.pointerType=null,N(),g||j(f.target))}),K=U(n=>{h&&O(n)}),ee=E.useMemo(()=>{let n=B.current,f={onKeyDown(l){if(te(l.nativeEvent,l.currentTarget)&&l.currentTarget.contains(l.target)){var v;ye(l.target,l.key)&&l.preventDefault();let s=!0;if(!n.isPressed&&!l.repeat){n.target=l.currentTarget,n.isPressed=!0,s=w(l,"keyboard");let a=l.currentTarget,k=A=>{te(A,a)&&!A.repeat&&a.contains(A.target)&&n.target&&D(_(n.target,A),"keyboard")};$(I(l.currentTarget),"keyup",Pe(k,P),!0)}s&&l.stopPropagation(),l.metaKey&&X()&&((v=n.metaKeyEvents)===null||v===void 0||v.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&&!V.isOpening){let v=!0;if(c&&l.preventDefault(),!n.ignoreClickAfterPress&&!n.ignoreEmulatedMouseEvents&&!n.isPressed&&(n.pointerType==="virtual"||fe(l.nativeEvent))){!c&&!b&&H(l.currentTarget);let s=w(l,"virtual"),a=D(l,"virtual"),k=T(l,"virtual");v=s&&a&&k}n.ignoreEmulatedMouseEvents=!1,n.ignoreClickAfterPress=!1,v&&l.stopPropagation()}}},P=l=>{var v;if(n.isPressed&&n.target&&te(l,n.target)){var s;ye(l.target,l.key)&&l.preventDefault();let k=l.target;T(_(n.target,l),"keyboard",n.target.contains(k)),N(),l.key!=="Enter"&&ce(n.target)&&n.target.contains(k)&&!l[ge]&&(l[ge]=!0,V(n.target,l,!1)),n.isPressed=!1,(s=n.metaKeyEvents)===null||s===void 0||s.delete(l.key)}else if(l.key==="Meta"&&(!((v=n.metaKeyEvents)===null||v===void 0)&&v.size)){var a;let k=n.metaKeyEvents;n.metaKeyEvents=void 0;for(let A of k.values())(a=n.target)===null||a===void 0||a.dispatchEvent(new KeyboardEvent("keyup",A))}};if(typeof PointerEvent<"u"){f.onPointerDown=a=>{if(a.button!==0||!a.currentTarget.contains(a.target))return;if(Xe(a.nativeEvent)){n.pointerType="virtual";return}ne(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,!c&&!b&&H(a.currentTarget),g||me(n.target),k=w(a,n.pointerType),$(I(a.currentTarget),"pointermove",l,!1),$(I(a.currentTarget),"pointerup",v,!1),$(I(a.currentTarget),"pointercancel",s,!1)),k&&a.stopPropagation()},f.onMouseDown=a=>{a.currentTarget.contains(a.target)&&a.button===0&&(ne(a.currentTarget)&&a.preventDefault(),a.stopPropagation())},f.onPointerUp=a=>{!a.currentTarget.contains(a.target)||n.pointerType==="virtual"||a.button===0&&L(a,a.currentTarget)&&D(a,n.pointerType||a.pointerType)};let l=a=>{a.pointerId===n.activePointerId&&(n.target&&L(a,n.target)?!n.isOverTarget&&n.pointerType!=null&&(n.isOverTarget=!0,w(_(n.target,a),n.pointerType)):n.target&&n.isOverTarget&&n.pointerType!=null&&(n.isOverTarget=!1,T(_(n.target,a),n.pointerType,!1),K(a)))},v=a=>{a.pointerId===n.activePointerId&&n.isPressed&&a.button===0&&n.target&&(L(a,n.target)&&n.pointerType!=null?T(_(n.target,a),n.pointerType):n.isOverTarget&&n.pointerType!=null&&T(_(n.target,a),n.pointerType,!1),n.isPressed=!1,n.isOverTarget=!1,n.activePointerId=null,n.pointerType=null,N(),g||j(n.target))},s=a=>{O(a)};f.onDragStart=a=>{a.currentTarget.contains(a.target)&&O(a)}}else{f.onMouseDown=s=>{if(s.button!==0||!s.currentTarget.contains(s.target))return;if(ne(s.currentTarget)&&s.preventDefault(),n.ignoreEmulatedMouseEvents){s.stopPropagation();return}n.isPressed=!0,n.isOverTarget=!0,n.target=s.currentTarget,n.pointerType=fe(s.nativeEvent)?"virtual":"mouse",!c&&!b&&H(s.currentTarget),w(s,n.pointerType)&&s.stopPropagation(),$(I(s.currentTarget),"mouseup",l,!1)},f.onMouseEnter=s=>{if(!s.currentTarget.contains(s.target))return;let a=!0;n.isPressed&&!n.ignoreEmulatedMouseEvents&&n.pointerType!=null&&(n.isOverTarget=!0,a=w(s,n.pointerType)),a&&s.stopPropagation()},f.onMouseLeave=s=>{if(!s.currentTarget.contains(s.target))return;let a=!0;n.isPressed&&!n.ignoreEmulatedMouseEvents&&n.pointerType!=null&&(n.isOverTarget=!1,a=T(s,n.pointerType,!1),K(s)),a&&s.stopPropagation()},f.onMouseUp=s=>{s.currentTarget.contains(s.target)&&!n.ignoreEmulatedMouseEvents&&s.button===0&&D(s,n.pointerType||"mouse")};let l=s=>{if(s.button===0){if(n.isPressed=!1,N(),n.ignoreEmulatedMouseEvents){n.ignoreEmulatedMouseEvents=!1;return}n.target&&L(s,n.target)&&n.pointerType!=null?T(_(n.target,s),n.pointerType):n.target&&n.isOverTarget&&n.pointerType!=null&&T(_(n.target,s),n.pointerType,!1),n.isOverTarget=!1}};f.onTouchStart=s=>{if(!s.currentTarget.contains(s.target))return;let a=ot(s.nativeEvent);if(!a)return;n.activePointerId=a.identifier,n.ignoreEmulatedMouseEvents=!0,n.isOverTarget=!0,n.isPressed=!0,n.target=s.currentTarget,n.pointerType="touch",!c&&!b&&H(s.currentTarget),g||me(n.target),w(s,n.pointerType)&&s.stopPropagation(),$(oe(s.currentTarget),"scroll",v,!0)},f.onTouchMove=s=>{if(!s.currentTarget.contains(s.target))return;if(!n.isPressed){s.stopPropagation();return}let a=ve(s.nativeEvent,n.activePointerId),k=!0;a&&L(a,s.currentTarget)?!n.isOverTarget&&n.pointerType!=null&&(n.isOverTarget=!0,k=w(s,n.pointerType)):n.isOverTarget&&n.pointerType!=null&&(n.isOverTarget=!1,k=T(s,n.pointerType,!1),K(s)),k&&s.stopPropagation()},f.onTouchEnd=s=>{if(!s.currentTarget.contains(s.target))return;if(!n.isPressed){s.stopPropagation();return}let a=ve(s.nativeEvent,n.activePointerId),k=!0;a&&L(a,s.currentTarget)&&n.pointerType!=null?(D(s,n.pointerType),k=T(s,n.pointerType)):n.isOverTarget&&n.pointerType!=null&&(k=T(s,n.pointerType,!1)),k&&s.stopPropagation(),n.isPressed=!1,n.activePointerId=null,n.isOverTarget=!1,n.ignoreEmulatedMouseEvents=!0,n.target&&!g&&j(n.target),N()},f.onTouchCancel=s=>{s.currentTarget.contains(s.target)&&(s.stopPropagation(),n.isPressed&&O(s))};let v=s=>{n.isPressed&&s.target.contains(n.target)&&O({currentTarget:n.target,shiftKey:!1,ctrlKey:!1,metaKey:!1,altKey:!1})};f.onDragStart=s=>{s.currentTarget.contains(s.target)&&O(s)}}return f},[$,c,b,N,g,O,K,T,w,D]);return E.useEffect(()=>()=>{var n;g||j((n=B.current.target)!==null&&n!==void 0?n:void 0)},[g]),{isPressed:p||m,pressProps:G(S,ee)}}function ce(e){return e.tagName==="A"&&e.hasAttribute("href")}function te(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&&ce(i))&&r!=="Enter")}function ot(e){const{targetTouches:t}=e;return t.length>0?t[0]:null}function ve(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 _(e,t){return{currentTarget:e,shiftKey:t.shiftKey,ctrlKey:t.ctrlKey,metaKey:t.metaKey,altKey:t.altKey}}function st(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 it(e,t){return!(e.left>t.right||t.left>e.right||e.top>t.bottom||t.top>e.bottom)}function L(e,t){let r=t.getBoundingClientRect(),o=st(e);return it(r,o)}function ne(e){return!(e instanceof HTMLElement)||!e.hasAttribute("draggable")}function ye(e,t){return e instanceof HTMLInputElement?!De(e,t):e instanceof HTMLButtonElement?e.type!=="submit"&&e.type!=="reset":!ce(e)}const at=new Set(["checkbox","radio","range","color","file","image","button","submit","reset"]);function De(e,t){return e.type==="checkbox"||e.type==="radio"?t===" ":at.has(e.type)}let J=!1,re=0;function ae(){J=!0,setTimeout(()=>{J=!1},50)}function he(e){e.pointerType==="touch"&&ae()}function lt(){if(!(typeof document>"u"))return typeof PointerEvent<"u"?document.addEventListener("pointerup",he):document.addEventListener("touchend",ae),re++,()=>{re--,!(re>0)&&(typeof PointerEvent<"u"?document.removeEventListener("pointerup",he):document.removeEventListener("touchend",ae))}}function ct(e){let{onHoverStart:t,onHoverChange:r,onHoverEnd:o,isDisabled:i}=e,[d,c]=E.useState(!1),p=E.useRef({isHovered:!1,ignoreEmulatedMouseEvents:!1,pointerType:"",target:null}).current;E.useEffect(lt,[]);let{hoverProps:b,triggerHoverEnd:h}=E.useMemo(()=>{let g=(m,x)=>{if(p.pointerType=x,i||x==="touch"||p.isHovered||!m.currentTarget.contains(m.target))return;p.isHovered=!0;let B=m.currentTarget;p.target=B,t&&t({type:"hoverstart",target:B,pointerType:x}),r&&r(!0),c(!0)},C=(m,x)=>{if(p.pointerType="",p.target=null,x==="touch"||!p.isHovered)return;p.isHovered=!1;let B=m.currentTarget;o&&o({type:"hoverend",target:B,pointerType:x}),r&&r(!1),c(!1)},S={};return typeof PointerEvent<"u"?(S.onPointerEnter=m=>{J&&m.pointerType==="mouse"||g(m,m.pointerType)},S.onPointerLeave=m=>{!i&&m.currentTarget.contains(m.target)&&C(m,m.pointerType)}):(S.onTouchStart=()=>{p.ignoreEmulatedMouseEvents=!0},S.onMouseEnter=m=>{!p.ignoreEmulatedMouseEvents&&!J&&g(m,"mouse"),p.ignoreEmulatedMouseEvents=!1},S.onMouseLeave=m=>{!i&&m.currentTarget.contains(m.target)&&C(m,"mouse")}),{hoverProps:S,triggerHoverEnd:C}},[t,r,o,i,p]);return E.useEffect(()=>{i&&h({currentTarget:p.target},p.pointerType)},[i]),{hoverProps:b,isHovered:d}}function ut(e,t){let{elementType:r="button",isDisabled:o,onPress:i,onPressStart:d,onPressEnd:c,onPressUp:p,onPressChange:b,preventFocusOnPress:h,allowFocusWhenDisabled:g,onClick:C,href:S,target:m,rel:x,type:B="button"}=e,$;r==="button"?$={type:B,disabled:o}:$={role:"button",tabIndex:o?void 0:0,href:r==="a"&&o?void 0:S,target:r==="a"?m:void 0,type:r==="input"?B:void 0,disabled:r==="input"?o:void 0,"aria-disabled":!o||r==="input"?void 0:o,rel:r==="a"?x:void 0};let{pressProps:N,isPressed:w}=rt({onPressStart:d,onPressEnd:c,onPressChange:b,onPress:i,onPressUp:p,isDisabled:o,preventFocusOnPress:h,ref:t}),{focusableProps:T}=Te.useFocusable(e,t);g&&(T.tabIndex=o?-1:T.tabIndex);let D=G(T,N,Fe(e,{labelable:!0}));return{isPressed:w,buttonProps:G($,D,{"aria-haspopup":e["aria-haspopup"],"aria-expanded":e["aria-expanded"],"aria-controls":e["aria-controls"],"aria-pressed":e["aria-pressed"],onClick:O=>{C&&(C(O),console.warn("onClick is deprecated, please use onPress"))}})}}function dt(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function ke(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 Ee(e){for(var t=1;t<arguments.length;t++){var r=arguments[t]!=null?arguments[t]:{};t%2?ke(Object(r),!0).forEach(function(o){dt(e,o,r[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):ke(Object(r)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(r,o))})}return e}var pt=(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},Z=e=>t=>{var r=e.defaultClassName,o=Ee(Ee({},e.defaultVariants),t);for(var i in o){var d,c=(d=o[i])!==null&&d!==void 0?d:e.defaultVariants[i];if(c!=null){var p=c;typeof p=="boolean"&&(p=p===!0?"true":"false");var b=e.variantClassNames[i][p];b&&(r+=" "+b)}}for(var[h,g]of e.compoundVariants)pt(h,o,e.defaultVariants)&&(r+=" "+g);return r},ft=Z({defaultClassName:"_125pcxy0",variantClassNames:{disabled:{true:"_125pcxy1",false:"_125pcxy2"},kind:{default:"_125pcxy3",link:"_125pcxy4",confirm:"_125pcxy5",delete:"_125pcxy6",key:"_125pcxy7",icon:"_125pcxy8"},spinning:{true:"_125pcxy9",false:"_125pcxya"}},defaultVariants:{disabled:!1,kind:"default",spinning:!1},compoundVariants:[[{kind:"icon",spinning:!0},"_125pcxyb"],[{kind:"default",spinning:!0},"_125pcxyc"],[{kind:"confirm",spinning:!0},"_125pcxyd"],[{kind:"delete",spinning:!0},"_125pcxye"],[{kind:"key",spinning:!0},"_125pcxyf"],[{disabled:!0,spinning:!1},"_125pcxyg"]]}),mt=Z({defaultClassName:"_125pcxyh",variantClassNames:{disabled:{true:"_125pcxyi",false:"_125pcxyj"},kind:{icon:"_125pcxyk",default:"_125pcxyl",delete:"_125pcxym",key:"_125pcxyn",confirm:"_125pcxyo",link:"_125pcxyp"},spinning:{true:"_125pcxyq",false:"_125pcxyr"}},defaultVariants:{disabled:!1,kind:"default",spinning:!1},compoundVariants:[]}),bt="_125pcxy11",gt=Z({defaultClassName:"_125pcxy12",variantClassNames:{spinning:{true:"_125pcxy13",false:"_125pcxy14"}},defaultVariants:{spinning:!1},compoundVariants:[]}),vt=Z({defaultClassName:"_125pcxys",variantClassNames:{spinning:{true:"_125pcxyt",false:"_125pcxyu"},kind:{icon:"_125pcxyv",default:"_125pcxyw",delete:"_125pcxyx",key:"_125pcxyy",confirm:"_125pcxyz",link:"_125pcxy10"}},defaultVariants:{spinning:!1},compoundVariants:[]});function yt({as:e,onClick:t,onPress:r,children:o,className:i,isDisabled:d,disabled:c,href:p,icon:b,kind:h="default",spinning:g,spinningTitle:C,title:S,...m},x){const B=e??(p?"a":"button"),$={onPress:r??t,isDisabled:c??d??g,...m},{"data-testid":N}=m,w=x||u.useRef(null),{buttonProps:T}=ut($,w),{hoverProps:D}=ct({isDisabled:$.isDisabled}),{type:O,...K}=T,ee={...G(K,D),ref:w,title:S,className:p?vt({spinning:g,kind:h}):mt({disabled:d||c,kind:h,spinning:g}),...p?{href:p}:{type:O},...m},{t:n}=u.useContext(R.I18nContext),f=b&&u.createElement(R.Icon,{className:bt,icon:b,"aria-hidden":"true","data-testid":`${N}__${b}-icon`});let P;h==="default"||h==="icon"||h==="link"?P="dark":P="light";const l=g&&u.createElement(R.Spinner,{color:P,className:gt({spinning:g}),title:C||n("design-system:button.spinningTitle"),"data-testid":`${N}__spinner`});return u.createElement(Te.FocusRing,null,u.createElement("div",{className:R.cl(ft({disabled:d||c,kind:h,spinning:g}),i)},u.createElement(B,{...ee},f,o?u.createElement("span",null,o):"",l)))}const ue=u.forwardRef(yt);R.Metadata.set(ue,{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"'}},panellable:!0});const ht={components:[ue],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:y.code`
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("react"),G=require("@sps-woodland/core"),Be=require("@react-aria/focus"),h=require("@spscommerce/utils");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 c=Ke(k),Ee=typeof document<"u"?k.useLayoutEffect:()=>{};function H(e){const t=k.useRef(null);return Ee(()=>{t.current=e},[e]),k.useCallback((...r)=>{const o=t.current;return o==null?void 0:o(...r)},[])}let fe=new Map;function Ie(e,t){if(e===t)return e;let r=fe.get(e);if(r)return r(t),t;let o=fe.get(t);return o?(o(e),e):t}function $e(...e){return(...t)=>{for(let r of e)typeof r=="function"&&r(...t)}}const I=e=>{var t;return(t=e==null?void 0:e.ownerDocument)!==null&&t!==void 0?t:document},ae=e=>e&&"window"in e&&e.window===e?e:I(e).defaultView||window;function Pe(e){var t,r,o="";if(typeof e=="string"||typeof e=="number")o+=e;else if(typeof e=="object")if(Array.isArray(e)){var a=e.length;for(t=0;t<a;t++)e[t]&&(r=Pe(e[t]))&&(o&&(o+=" "),o+=r)}else for(r in e)e[r]&&(o&&(o+=" "),o+=r);return o}function Ae(){for(var e,t,r=0,o="",a=arguments.length;r<a;r++)(e=arguments[r])&&(t=Pe(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 a in o){let d=t[a],u=o[a];typeof d=="function"&&typeof u=="function"&&a[0]==="o"&&a[1]==="n"&&a.charCodeAt(2)>=65&&a.charCodeAt(2)<=90?t[a]=$e(d,u):(a==="className"||a==="UNSAFE_className")&&typeof d=="string"&&typeof u=="string"?t[a]=Ae(d,u):a==="id"&&d&&u?t.id=Ie(d,u):t[a]=u!==void 0?u:d}}return t}const Le=new Set(["id"]),Me=new Set(["aria-label","aria-labelledby","aria-describedby","aria-details"]),Fe=new Set(["href","hrefLang","target","rel","download","ping","referrerPolicy"]),Ue=/^(data-.*)$/;function Re(e,t={}){let{labelable:r,isLink:o,propNames:a}=t,d={};for(const u in e)Object.prototype.hasOwnProperty.call(e,u)&&(Le.has(u)||r&&Me.has(u)||o&&Fe.has(u)||a!=null&&a.has(u)||Ue.test(u))&&(d[u]=e[u]);return d}function V(e){if(He())e.focus({preventScroll:!0});else{let t=Ge(e);e.focus(),Ve(t)}}let Y=null;function He(){if(Y==null){Y=!1;try{document.createElement("div").focus({get preventScroll(){return Y=!0,!0}})}catch{}}return Y}function Ge(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 Ve(e){for(let{element:t,scrollTop:r,scrollLeft:o}of e)t.scrollTop=r,t.scrollLeft=o}function ee(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 ce(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 A(e){let t=null;return()=>(t==null&&(t=e()),t)}const Q=A(function(){return ce(/^Mac/i)}),We=A(function(){return ce(/^iPhone/i)}),xe=A(function(){return ce(/^iPad/i)||Q()&&navigator.maxTouchPoints>1}),Se=A(function(){return We()||xe()}),je=A(function(){return ee(/AppleWebKit/i)&&!Ye()}),Ye=A(function(){return ee(/Chrome/i)}),Ne=A(function(){return ee(/Android/i)}),Xe=A(function(){return ee(/Firefox/i)});function j(e,t,r=!0){var o,a;let{metaKey:d,ctrlKey:u,altKey:p,shiftKey:m}=t;Xe()&&(!((a=window.event)===null||a===void 0||(o=a.type)===null||o===void 0)&&o.startsWith("key"))&&e.target==="_blank"&&(Q()?d=!0:u=!0);let g=je()&&Q()&&!xe()?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});j.isOpening=r,V(e),e.dispatchEvent(g),j.isOpening=!1}j.isOpening=!1;let U=new Map,ie=new Set;function me(){if(typeof window>"u")return;function e(o){return"propertyName"in o}let t=o=>{if(!e(o)||!o.target)return;let a=U.get(o.target);a||(a=new Set,U.set(o.target,a),o.target.addEventListener("transitioncancel",r,{once:!0})),a.add(o.propertyName)},r=o=>{if(!e(o)||!o.target)return;let a=U.get(o.target);if(a&&(a.delete(o.propertyName),a.size===0&&(o.target.removeEventListener("transitioncancel",r),U.delete(o.target)),U.size===0)){for(let d of ie)d();ie.clear()}};document.body.addEventListener("transitionrun",t),document.body.addEventListener("transitionend",r)}typeof document<"u"&&(document.readyState!=="loading"?me():document.addEventListener("DOMContentLoaded",me));function qe(e){requestAnimationFrame(()=>{U.size===0?e():ie.add(e)})}function ze(){let e=k.useRef(new Map),t=k.useCallback((a,d,u,p)=>{let m=p!=null&&p.once?(...g)=>{e.current.delete(u),u(...g)}:u;e.current.set(u,{type:d,eventTarget:a,fn:m,options:p}),a.addEventListener(d,u,p)},[]),r=k.useCallback((a,d,u,p)=>{var m;let g=((m=e.current.get(u))===null||m===void 0?void 0:m.fn)||u;a.removeEventListener(d,g,p),e.current.delete(u)},[]),o=k.useCallback(()=>{e.current.forEach((a,d)=>{r(a.eventTarget,a.type,d,a.options)})},[r]);return k.useEffect(()=>o,[o]),{addGlobalListener:t,removeGlobalListener:r,removeAllGlobalListeners:o}}function Je(e,t){Ee(()=>{if(e&&e.ref&&t)return e.ref.current=t.current,()=>{e.ref&&(e.ref.current=null)}})}function _e(e){return e.mozInputSource===0&&e.isTrusted?!0:Ne()&&e.pointerType?e.type==="click"&&e.buttons===1:e.detail===0&&!e.pointerType}function Qe(e){return!Ne()&&e.width===0&&e.height===0||e.width===1&&e.height===1&&e.pressure===0&&e.detail===0&&e.pointerType==="mouse"}let R="default",le="",J=new WeakMap;function be(e){if(Se()){if(R==="default"){const t=I(e);le=t.documentElement.style.webkitUserSelect,t.documentElement.style.webkitUserSelect="none"}R="disabled"}else(e instanceof HTMLElement||e instanceof SVGElement)&&(J.set(e,e.style.userSelect),e.style.userSelect="none")}function X(e){if(Se()){if(R!=="disabled")return;R="restoring",setTimeout(()=>{qe(()=>{if(R==="restoring"){const t=I(e);t.documentElement.style.webkitUserSelect==="none"&&(t.documentElement.style.webkitUserSelect=le||""),le="",R="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 Oe=k.createContext({register:()=>{}});Oe.displayName="PressResponderContext";function Ze(e,t){return t.get?t.get.call(e):t.value}function De(e,t,r){if(!t.has(e))throw new TypeError("attempted to "+r+" private field on non-instance");return t.get(e)}function et(e,t){var r=De(e,t,"get");return Ze(e,r)}function tt(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")}function nt(e,t,r){tt(e,t),t.set(e,r)}function ot(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 ge(e,t,r){var o=De(e,t,"set");return ot(e,o,r),r}function rt(e){let t=k.useContext(Oe);if(t){let{register:r,...o}=t;e=W(o,e),r()}return Je(t,e.ref),e}var q=new WeakMap;class z{continuePropagation(){ge(this,q,!1)}get shouldStopPropagation(){return et(this,q)}constructor(t,r,o,a){nt(this,q,{writable:!0,value:void 0}),ge(this,q,!0);var d;let u=(d=a==null?void 0:a.target)!==null&&d!==void 0?d:o.currentTarget;const p=u==null?void 0:u.getBoundingClientRect();let m,g=0,b,P=null;o.clientX!=null&&o.clientY!=null&&(b=o.clientX,P=o.clientY),p&&(b!=null&&P!=null?(m=b-p.left,g=P-p.top):(m=p.width/2,g=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=g}}const ve=Symbol("linkClicked");function st(e){let{onPress:t,onPressChange:r,onPressStart:o,onPressEnd:a,onPressUp:d,isDisabled:u,isPressed:p,preventFocusOnPress:m,shouldCancelOnPointerExit:g,allowTextSelectionOnPress:b,ref:P,...S}=rt(e),[_,x]=k.useState(!1),T=k.useRef({isPressed:!1,ignoreEmulatedMouseEvents:!1,ignoreClickAfterPress:!1,didFirePressStart:!1,isTriggeringEvent:!1,activePointerId:null,target:null,isOverTarget:!1,pointerType:null}),{addGlobalListener:E,removeAllGlobalListeners:N}=ze(),$=H((n,f)=>{let B=T.current;if(u||B.didFirePressStart)return!1;let l=!0;if(B.isTriggeringEvent=!0,o){let v=new z("pressstart",f,n);o(v),l=v.shouldStopPropagation}return r&&r(!0),B.isTriggeringEvent=!1,B.didFirePressStart=!0,x(!0),l}),w=H((n,f,B=!0)=>{let l=T.current;if(!l.didFirePressStart)return!1;l.ignoreClickAfterPress=!0,l.didFirePressStart=!1,l.isTriggeringEvent=!0;let v=!0;if(a){let s=new z("pressend",f,n);a(s),v=s.shouldStopPropagation}if(r&&r(!1),x(!1),t&&B&&!u){let s=new z("press",f,n);t(s),v&&(v=s.shouldStopPropagation)}return l.isTriggeringEvent=!1,v}),D=H((n,f)=>{let B=T.current;if(u)return!1;if(d){B.isTriggeringEvent=!0;let l=new z("pressup",f,n);return d(l),B.isTriggeringEvent=!1,l.shouldStopPropagation}return!0}),O=H(n=>{let f=T.current;f.isPressed&&f.target&&(f.isOverTarget&&f.pointerType!=null&&w(C(f.target,n),f.pointerType,!1),f.isPressed=!1,f.isOverTarget=!1,f.activePointerId=null,f.pointerType=null,N(),b||X(f.target))}),L=H(n=>{g&&O(n)}),ne=k.useMemo(()=>{let n=T.current,f={onKeyDown(l){if(oe(l.nativeEvent,l.currentTarget)&&l.currentTarget.contains(l.target)){var v;ye(l.target,l.key)&&l.preventDefault();let s=!0;if(!n.isPressed&&!l.repeat){n.target=l.currentTarget,n.isPressed=!0,s=$(l,"keyboard");let i=l.currentTarget,y=M=>{oe(M,i)&&!M.repeat&&i.contains(M.target)&&n.target&&D(C(n.target,M),"keyboard")};E(I(l.currentTarget),"keyup",$e(y,B),!0)}s&&l.stopPropagation(),l.metaKey&&Q()&&((v=n.metaKeyEvents)===null||v===void 0||v.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&&!j.isOpening){let v=!0;if(u&&l.preventDefault(),!n.ignoreClickAfterPress&&!n.ignoreEmulatedMouseEvents&&!n.isPressed&&(n.pointerType==="virtual"||_e(l.nativeEvent))){!u&&!m&&V(l.currentTarget);let s=$(l,"virtual"),i=D(l,"virtual"),y=w(l,"virtual");v=s&&i&&y}n.ignoreEmulatedMouseEvents=!1,n.ignoreClickAfterPress=!1,v&&l.stopPropagation()}}},B=l=>{var v;if(n.isPressed&&n.target&&oe(l,n.target)){var s;ye(l.target,l.key)&&l.preventDefault();let y=l.target;w(C(n.target,l),"keyboard",n.target.contains(y)),N(),l.key!=="Enter"&&de(n.target)&&n.target.contains(y)&&!l[ve]&&(l[ve]=!0,j(n.target,l,!1)),n.isPressed=!1,(s=n.metaKeyEvents)===null||s===void 0||s.delete(l.key)}else if(l.key==="Meta"&&(!((v=n.metaKeyEvents)===null||v===void 0)&&v.size)){var i;let y=n.metaKeyEvents;n.metaKeyEvents=void 0;for(let M of y.values())(i=n.target)===null||i===void 0||i.dispatchEvent(new KeyboardEvent("keyup",M))}};if(typeof PointerEvent<"u"){f.onPointerDown=i=>{if(i.button!==0||!i.currentTarget.contains(i.target))return;if(Qe(i.nativeEvent)){n.pointerType="virtual";return}re(i.currentTarget)&&i.preventDefault(),n.pointerType=i.pointerType;let y=!0;n.isPressed||(n.isPressed=!0,n.isOverTarget=!0,n.activePointerId=i.pointerId,n.target=i.currentTarget,!u&&!m&&V(i.currentTarget),b||be(n.target),y=$(i,n.pointerType),E(I(i.currentTarget),"pointermove",l,!1),E(I(i.currentTarget),"pointerup",v,!1),E(I(i.currentTarget),"pointercancel",s,!1)),y&&i.stopPropagation()},f.onMouseDown=i=>{i.currentTarget.contains(i.target)&&i.button===0&&(re(i.currentTarget)&&i.preventDefault(),i.stopPropagation())},f.onPointerUp=i=>{!i.currentTarget.contains(i.target)||n.pointerType==="virtual"||i.button===0&&F(i,i.currentTarget)&&D(i,n.pointerType||i.pointerType)};let l=i=>{i.pointerId===n.activePointerId&&(n.target&&F(i,n.target)?!n.isOverTarget&&n.pointerType!=null&&(n.isOverTarget=!0,$(C(n.target,i),n.pointerType)):n.target&&n.isOverTarget&&n.pointerType!=null&&(n.isOverTarget=!1,w(C(n.target,i),n.pointerType,!1),L(i)))},v=i=>{i.pointerId===n.activePointerId&&n.isPressed&&i.button===0&&n.target&&(F(i,n.target)&&n.pointerType!=null?w(C(n.target,i),n.pointerType):n.isOverTarget&&n.pointerType!=null&&w(C(n.target,i),n.pointerType,!1),n.isPressed=!1,n.isOverTarget=!1,n.activePointerId=null,n.pointerType=null,N(),b||X(n.target))},s=i=>{O(i)};f.onDragStart=i=>{i.currentTarget.contains(i.target)&&O(i)}}else{f.onMouseDown=s=>{if(s.button!==0||!s.currentTarget.contains(s.target))return;if(re(s.currentTarget)&&s.preventDefault(),n.ignoreEmulatedMouseEvents){s.stopPropagation();return}n.isPressed=!0,n.isOverTarget=!0,n.target=s.currentTarget,n.pointerType=_e(s.nativeEvent)?"virtual":"mouse",!u&&!m&&V(s.currentTarget),$(s,n.pointerType)&&s.stopPropagation(),E(I(s.currentTarget),"mouseup",l,!1)},f.onMouseEnter=s=>{if(!s.currentTarget.contains(s.target))return;let i=!0;n.isPressed&&!n.ignoreEmulatedMouseEvents&&n.pointerType!=null&&(n.isOverTarget=!0,i=$(s,n.pointerType)),i&&s.stopPropagation()},f.onMouseLeave=s=>{if(!s.currentTarget.contains(s.target))return;let i=!0;n.isPressed&&!n.ignoreEmulatedMouseEvents&&n.pointerType!=null&&(n.isOverTarget=!1,i=w(s,n.pointerType,!1),L(s)),i&&s.stopPropagation()},f.onMouseUp=s=>{s.currentTarget.contains(s.target)&&!n.ignoreEmulatedMouseEvents&&s.button===0&&D(s,n.pointerType||"mouse")};let l=s=>{if(s.button===0){if(n.isPressed=!1,N(),n.ignoreEmulatedMouseEvents){n.ignoreEmulatedMouseEvents=!1;return}n.target&&F(s,n.target)&&n.pointerType!=null?w(C(n.target,s),n.pointerType):n.target&&n.isOverTarget&&n.pointerType!=null&&w(C(n.target,s),n.pointerType,!1),n.isOverTarget=!1}};f.onTouchStart=s=>{if(!s.currentTarget.contains(s.target))return;let i=at(s.nativeEvent);if(!i)return;n.activePointerId=i.identifier,n.ignoreEmulatedMouseEvents=!0,n.isOverTarget=!0,n.isPressed=!0,n.target=s.currentTarget,n.pointerType="touch",!u&&!m&&V(s.currentTarget),b||be(n.target),$(K(n.target,s),n.pointerType)&&s.stopPropagation(),E(ae(s.currentTarget),"scroll",v,!0)},f.onTouchMove=s=>{if(!s.currentTarget.contains(s.target))return;if(!n.isPressed){s.stopPropagation();return}let i=he(s.nativeEvent,n.activePointerId),y=!0;i&&F(i,s.currentTarget)?!n.isOverTarget&&n.pointerType!=null&&(n.isOverTarget=!0,y=$(K(n.target,s),n.pointerType)):n.isOverTarget&&n.pointerType!=null&&(n.isOverTarget=!1,y=w(K(n.target,s),n.pointerType,!1),L(K(n.target,s))),y&&s.stopPropagation()},f.onTouchEnd=s=>{if(!s.currentTarget.contains(s.target))return;if(!n.isPressed){s.stopPropagation();return}let i=he(s.nativeEvent,n.activePointerId),y=!0;i&&F(i,s.currentTarget)&&n.pointerType!=null?(D(K(n.target,s),n.pointerType),y=w(K(n.target,s),n.pointerType)):n.isOverTarget&&n.pointerType!=null&&(y=w(K(n.target,s),n.pointerType,!1)),y&&s.stopPropagation(),n.isPressed=!1,n.activePointerId=null,n.isOverTarget=!1,n.ignoreEmulatedMouseEvents=!0,n.target&&!b&&X(n.target),N()},f.onTouchCancel=s=>{s.currentTarget.contains(s.target)&&(s.stopPropagation(),n.isPressed&&O(K(n.target,s)))};let v=s=>{n.isPressed&&s.target.contains(n.target)&&O({currentTarget:n.target,shiftKey:!1,ctrlKey:!1,metaKey:!1,altKey:!1})};f.onDragStart=s=>{s.currentTarget.contains(s.target)&&O(s)}}return f},[E,u,m,N,b,O,L,w,$,D]);return k.useEffect(()=>()=>{var n;b||X((n=T.current.target)!==null&&n!==void 0?n:void 0)},[b]),{isPressed:p||_,pressProps:W(S,ne)}}function de(e){return e.tagName==="A"&&e.hasAttribute("href")}function oe(e,t){const{key:r,code:o}=e,a=t,d=a.getAttribute("role");return(r==="Enter"||r===" "||r==="Spacebar"||o==="Space")&&!(a instanceof ae(a).HTMLInputElement&&!Ce(a,r)||a instanceof ae(a).HTMLTextAreaElement||a.isContentEditable)&&!((d==="link"||!d&&de(a))&&r!=="Enter")}function at(e){const{targetTouches:t}=e;return t.length>0?t[0]:null}function he(e,t){const r=e.changedTouches;for(let o=0;o<r.length;o++){const a=r[o];if(a.identifier===t)return a}return null}function K(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 C(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 it(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 lt(e,t){return!(e.left>t.right||t.left>e.right||e.top>t.bottom||t.top>e.bottom)}function F(e,t){let r=t.getBoundingClientRect(),o=it(e);return lt(r,o)}function re(e){return!(e instanceof HTMLElement)||!e.hasAttribute("draggable")}function ye(e,t){return e instanceof HTMLInputElement?!Ce(e,t):e instanceof HTMLButtonElement?e.type!=="submit"&&e.type!=="reset":!de(e)}const ut=new Set(["checkbox","radio","range","color","file","image","button","submit","reset"]);function Ce(e,t){return e.type==="checkbox"||e.type==="radio"?t===" ":ut.has(e.type)}let Z=!1,se=0;function ue(){Z=!0,setTimeout(()=>{Z=!1},50)}function ke(e){e.pointerType==="touch"&&ue()}function ct(){if(!(typeof document>"u"))return typeof PointerEvent<"u"?document.addEventListener("pointerup",ke):document.addEventListener("touchend",ue),se++,()=>{se--,!(se>0)&&(typeof PointerEvent<"u"?document.removeEventListener("pointerup",ke):document.removeEventListener("touchend",ue))}}function dt(e){let{onHoverStart:t,onHoverChange:r,onHoverEnd:o,isDisabled:a}=e,[d,u]=k.useState(!1),p=k.useRef({isHovered:!1,ignoreEmulatedMouseEvents:!1,pointerType:"",target:null}).current;k.useEffect(ct,[]);let{hoverProps:m,triggerHoverEnd:g}=k.useMemo(()=>{let b=(_,x)=>{if(p.pointerType=x,a||x==="touch"||p.isHovered||!_.currentTarget.contains(_.target))return;p.isHovered=!0;let T=_.currentTarget;p.target=T,t&&t({type:"hoverstart",target:T,pointerType:x}),r&&r(!0),u(!0)},P=(_,x)=>{if(p.pointerType="",p.target=null,x==="touch"||!p.isHovered)return;p.isHovered=!1;let T=_.currentTarget;o&&o({type:"hoverend",target:T,pointerType:x}),r&&r(!1),u(!1)},S={};return typeof PointerEvent<"u"?(S.onPointerEnter=_=>{Z&&_.pointerType==="mouse"||b(_,_.pointerType)},S.onPointerLeave=_=>{!a&&_.currentTarget.contains(_.target)&&P(_,_.pointerType)}):(S.onTouchStart=()=>{p.ignoreEmulatedMouseEvents=!0},S.onMouseEnter=_=>{!p.ignoreEmulatedMouseEvents&&!Z&&b(_,"mouse"),p.ignoreEmulatedMouseEvents=!1},S.onMouseLeave=_=>{!a&&_.currentTarget.contains(_.target)&&P(_,"mouse")}),{hoverProps:S,triggerHoverEnd:P}},[t,r,o,a,p]);return k.useEffect(()=>{a&&g({currentTarget:p.target},p.pointerType)},[a]),{hoverProps:m,isHovered:d}}function pt(e,t){let{elementType:r="button",isDisabled:o,onPress:a,onPressStart:d,onPressEnd:u,onPressUp:p,onPressChange:m,preventFocusOnPress:g,allowFocusWhenDisabled:b,onClick:P,href:S,target:_,rel:x,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: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"?x:void 0};let{pressProps:N,isPressed:$}=st({onPressStart:d,onPressEnd:u,onPressChange:m,onPress:a,onPressUp:p,isDisabled:o,preventFocusOnPress:g,ref:t}),{focusableProps:w}=Be.useFocusable(e,t);b&&(w.tabIndex=o?-1:w.tabIndex);let D=W(w,N,Re(e,{labelable:!0}));return{isPressed:$,buttonProps:W(E,D,{"aria-haspopup":e["aria-haspopup"],"aria-expanded":e["aria-expanded"],"aria-controls":e["aria-controls"],"aria-pressed":e["aria-pressed"],onClick:O=>{P&&(P(O),console.warn("onClick is deprecated, please use onPress"))}})}}function ft(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function we(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter(function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable})),r.push.apply(r,o)}return r}function Te(e){for(var t=1;t<arguments.length;t++){var r=arguments[t]!=null?arguments[t]:{};t%2?we(Object(r),!0).forEach(function(o){ft(e,o,r[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):we(Object(r)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(r,o))})}return e}var mt=(e,t,r)=>{for(var o of Object.keys(e)){var a;if(e[o]!==((a=t[o])!==null&&a!==void 0?a:r[o]))return!1}return!0},te=e=>t=>{var r=e.defaultClassName,o=Te(Te({},e.defaultVariants),t);for(var a in o){var d,u=(d=o[a])!==null&&d!==void 0?d:e.defaultVariants[a];if(u!=null){var p=u;typeof p=="boolean"&&(p=p===!0?"true":"false");var m=e.variantClassNames[a][p];m&&(r+=" "+m)}}for(var[g,b]of e.compoundVariants)mt(g,o,e.defaultVariants)&&(r+=" "+b);return r},_t=te({defaultClassName:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxy0",variantClassNames:{disabled:{true:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxy1",false:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxy2"},kind:{default:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxy3",link:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxy4",confirm:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxy5",delete:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxy6",key:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxy7",icon:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxy8"},spinning:{true:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxy9",false:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxya"}},defaultVariants:{disabled:!1,kind:"default",spinning:!1},compoundVariants:[[{kind:"icon",spinning:!0},"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyb"],[{kind:"default",spinning:!0},"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyc"],[{kind:"confirm",spinning:!0},"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyd"],[{kind:"delete",spinning:!0},"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxye"],[{kind:"key",spinning:!0},"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyf"],[{disabled:!0,spinning:!1},"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyg"]]}),bt=te({defaultClassName:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyh",variantClassNames:{disabled:{true:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyi",false:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyj"},kind:{icon:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyk",default:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyl",delete:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxym",key:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyn",confirm:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyo",link:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyp"},spinning:{true:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyq",false:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyr"}},defaultVariants:{disabled:!1,kind:"default",spinning:!1},compoundVariants:[]}),gt="pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxy11",vt=te({defaultClassName:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxy12",variantClassNames:{spinning:{true:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxy13",false:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxy14"}},defaultVariants:{spinning:!1},compoundVariants:[]}),ht=te({defaultClassName:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxys",variantClassNames:{spinning:{true:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyt",false:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyu"},kind:{icon:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyv",default:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyw",delete:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyx",key:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyy",confirm:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxyz",link:"pkg_sps-woodland_buttons__version_8_18_0__hash_125pcxy10"}},defaultVariants:{spinning:!1},compoundVariants:[]});function yt({as:e,onClick:t,onPress:r,children:o,className:a,isDisabled:d,disabled:u,href:p,icon:m,kind:g="default",spinning:b,spinningTitle:P,title:S,..._},x){const T=e??(p?"a":"button"),E={onPress:r??t,isDisabled:u??d??b,..._},{"data-testid":N}=_,$=x||c.useRef(null),{buttonProps:w}=pt(E,$),{hoverProps:D}=dt({isDisabled:E.isDisabled}),{type:O,...L}=w,ne={...W(L,D),ref:$,title:S,className:p?ht({spinning:b,kind:g}):bt({disabled:d||u,kind:g,spinning:b}),...p?{href:p}:{type:O},..._},{t:n}=c.useContext(G.I18nContext),f=m&&c.createElement(G.Icon,{className:gt,icon:m,"aria-hidden":"true","data-testid":`${N}__${m}-icon`});let B;g==="default"||g==="icon"||g==="link"?B="dark":B="light";const l=b&&c.createElement(G.Spinner,{color:B,className:vt({spinning:b}),title:P||n("design-system:button.spinningTitle"),"data-testid":`${N}__spinner`});return c.createElement(Be.FocusRing,null,c.createElement("div",{className:G.cl(_t({disabled:d||u,kind:g,spinning:b}),a)},c.createElement(T,{...ne},f,o?c.createElement("span",null,o):"",l)))}const pe=c.forwardRef(yt);G.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"'}},panellable:!0});const kt={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:h.code`
|
|
2
2
|
import { Button } from "@sps-woodland/buttons";
|
|
3
3
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
4
4
|
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
</>
|
|
14
14
|
)
|
|
15
15
|
}
|
|
16
|
-
`},withIcons:{description:"With Icons",react:
|
|
16
|
+
`},withIcons:{description:"With Icons",react:h.code`
|
|
17
17
|
import { Button } from "@sps-woodland/buttons";
|
|
18
18
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
19
19
|
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
</>
|
|
29
29
|
)
|
|
30
30
|
}
|
|
31
|
-
`},spinning:{description:"Spinning",react:
|
|
31
|
+
`},spinning:{description:"Spinning",react:h.code`
|
|
32
32
|
import { Button } from "@sps-woodland/buttons";
|
|
33
33
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
34
34
|
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
</>
|
|
43
43
|
)
|
|
44
44
|
}
|
|
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:
|
|
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:h.code`
|
|
46
46
|
import { SpsDropdown } from "@spscommerce/ds-react";
|
|
47
47
|
|
|
48
48
|
function Component() {
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
</>
|
|
81
81
|
)
|
|
82
82
|
}
|
|
83
|
-
`},withIcons:{description:"With Icons",react:
|
|
83
|
+
`},withIcons:{description:"With Icons",react:h.code`
|
|
84
84
|
import { SpsDropdown } from "@spscommerce/ds-react";
|
|
85
85
|
|
|
86
86
|
function Component() {
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
</>
|
|
124
124
|
)
|
|
125
125
|
}
|
|
126
|
-
`},spinning:{description:"Spinning",react:
|
|
126
|
+
`},spinning:{description:"Spinning",react:h.code`
|
|
127
127
|
import { SpsDropdown } from "@spscommerce/ds-react";
|
|
128
128
|
|
|
129
129
|
function Component() {
|
|
@@ -159,7 +159,7 @@
|
|
|
159
159
|
</>
|
|
160
160
|
)
|
|
161
161
|
}
|
|
162
|
-
`}}},splitButtons:{label:"Split Buttons",description:"Use when there is 1 primary action and other related actions can be taken.",examples:{withoutIcons:{description:"Without Icons",react:
|
|
162
|
+
`}}},splitButtons:{label:"Split Buttons",description:"Use when there is 1 primary action and other related actions can be taken.",examples:{withoutIcons:{description:"Without Icons",react:h.code`
|
|
163
163
|
import { SpsSplitButton } from "@spscommerce/ds-react";
|
|
164
164
|
|
|
165
165
|
function Component() {
|
|
@@ -185,7 +185,7 @@
|
|
|
185
185
|
</>
|
|
186
186
|
)
|
|
187
187
|
}
|
|
188
|
-
`},withIcons:{description:"With Icons",react:
|
|
188
|
+
`},withIcons:{description:"With Icons",react:h.code`
|
|
189
189
|
import { SpsSplitButton } from "@spscommerce/ds-react";
|
|
190
190
|
|
|
191
191
|
function Component() {
|
|
@@ -223,7 +223,7 @@
|
|
|
223
223
|
</>
|
|
224
224
|
)
|
|
225
225
|
}
|
|
226
|
-
`}}},iconButtons:{label:"Icon Buttons",description:({NavigateTo:e,Link:t})=>
|
|
226
|
+
`}}},iconButtons:{label:"Icon Buttons",description:({NavigateTo:e,Link:t})=>c.createElement(c.Fragment,null,c.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"," ",c.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. ",c.createElement(t,{to:"/style-and-layout/icons/"},"View All Icons"))),examples:{standard:{description:"Standard Icon Buttons",react:h.code`
|
|
227
227
|
import { Button } from "@sps-woodland/buttons";
|
|
228
228
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
229
229
|
|
|
@@ -242,7 +242,7 @@
|
|
|
242
242
|
</>
|
|
243
243
|
)
|
|
244
244
|
}
|
|
245
|
-
`},dropdown:{description:({NavigateTo:e})=>
|
|
245
|
+
`},dropdown:{description:({NavigateTo:e})=>c.createElement(c.Fragment,null,c.createElement("h5",null,"Dropdown Icon Buttons"),c.createElement("p",null,"Use these when there are several options available for action. Example: Dropdown Icon Button in a ",c.createElement(e,{to:"content-rows"},"Content Row"),".")),react:h.code`
|
|
246
246
|
import { SpsDropdown } from "@spscommerce/ds-react";
|
|
247
247
|
|
|
248
248
|
function Component() {
|
|
@@ -256,7 +256,7 @@
|
|
|
256
256
|
</>
|
|
257
257
|
)
|
|
258
258
|
}
|
|
259
|
-
`},spinner:{description:"Spinner",react:
|
|
259
|
+
`},spinner:{description:"Spinner",react:h.code`
|
|
260
260
|
import { Button } from "@sps-woodland/buttons";
|
|
261
261
|
|
|
262
262
|
function Component() {
|
|
@@ -266,7 +266,7 @@
|
|
|
266
266
|
</>
|
|
267
267
|
)
|
|
268
268
|
}
|
|
269
|
-
`}}},textButtons:{label:"Text Buttons",description:({NavigateTo:e})=>
|
|
269
|
+
`}}},textButtons:{label:"Text Buttons",description:({NavigateTo:e})=>c.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"," ",c.createElement(e,{to:"list-toolbar"},"List Toolbar")),examples:{withoutIcons:{description:"Without Icons",react:h.code`
|
|
270
270
|
import { Button } from "@sps-woodland/buttons";
|
|
271
271
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
272
272
|
|
|
@@ -279,7 +279,7 @@
|
|
|
279
279
|
</>
|
|
280
280
|
)
|
|
281
281
|
}
|
|
282
|
-
`},withIcons:{description:"With Icons",react:
|
|
282
|
+
`},withIcons:{description:"With Icons",react:h.code`
|
|
283
283
|
import { Button } from "@sps-woodland/buttons";
|
|
284
284
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
285
285
|
|
|
@@ -292,7 +292,7 @@
|
|
|
292
292
|
</>
|
|
293
293
|
)
|
|
294
294
|
}
|
|
295
|
-
`},spinner:{description:"Spinner",react:
|
|
295
|
+
`},spinner:{description:"Spinner",react:h.code`
|
|
296
296
|
import { Button } from "@sps-woodland/buttons";
|
|
297
297
|
|
|
298
298
|
function Component() {
|
|
@@ -302,7 +302,7 @@
|
|
|
302
302
|
</>
|
|
303
303
|
)
|
|
304
304
|
}
|
|
305
|
-
`}}},submitButtons:{label:"Submit Buttons",description:({NavigateTo:e})=>
|
|
305
|
+
`}}},submitButtons:{label:"Submit Buttons",description:({NavigateTo:e})=>c.createElement("p",null,"Use to submit a form. There can be a number of visual variations, for example a"," ",c.createElement(e,{to:"modals"},"Modal")," uses Basic Button (Key) as its Submit Button."),examples:{basic:{react:h.code`
|
|
306
306
|
import { Button } from "@sps-woodland/buttons";
|
|
307
307
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
308
308
|
|
|
@@ -321,7 +321,7 @@
|
|
|
321
321
|
</SpsForm>
|
|
322
322
|
)
|
|
323
323
|
}
|
|
324
|
-
`}}},link:{label:"Button as a Link",description:"Used to link to another page, such as an external website. They may open in the same window or in a new one. It should only be used when a Text Button doesn't provide enough visual emphasis.",examples:{basic:{react:
|
|
324
|
+
`}}},link:{label:"Button as a Link",description:"Used to link to another page, such as an external website. They may open in the same window or in a new one. It should only be used when a Text Button doesn't provide enough visual emphasis.",examples:{basic:{react:h.code`
|
|
325
325
|
import { Button } from "@sps-woodland/buttons";
|
|
326
326
|
|
|
327
327
|
function Component() {
|
|
@@ -333,7 +333,7 @@
|
|
|
333
333
|
</>
|
|
334
334
|
)
|
|
335
335
|
}
|
|
336
|
-
`}}},buttonGroups:{label:"Button Groups",description:({NavigateTo:e})=>
|
|
336
|
+
`}}},buttonGroups:{label:"Button Groups",description:({NavigateTo:e})=>c.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 ",c.createElement(e,{to:"List Action Bar"},"List Action Bar"),"."),examples:{basic:{description:"Basic Button Groups",react:h.code`
|
|
337
337
|
import { Button } from "@sps-woodland/buttons";
|
|
338
338
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
339
339
|
|
|
@@ -345,7 +345,7 @@
|
|
|
345
345
|
</>
|
|
346
346
|
)
|
|
347
347
|
}
|
|
348
|
-
`},icon:{description:"Icon Button Groups",react:
|
|
348
|
+
`},icon:{description:"Icon Button Groups",react:h.code`
|
|
349
349
|
import { Button } from "@sps-woodland/buttons";
|
|
350
350
|
|
|
351
351
|
function Component() {
|
|
@@ -356,7 +356,7 @@
|
|
|
356
356
|
</>
|
|
357
357
|
)
|
|
358
358
|
}
|
|
359
|
-
`},textAndIcons:{description:"Text Buttons + Icon Buttons Group",react:
|
|
359
|
+
`},textAndIcons:{description:"Text Buttons + Icon Buttons Group",react:h.code`
|
|
360
360
|
import { Button } from "@sps-woodland/buttons";
|
|
361
361
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
362
362
|
import { VericalRule } from "@sps-woodland/core";
|
|
@@ -371,7 +371,7 @@
|
|
|
371
371
|
</>
|
|
372
372
|
)
|
|
373
373
|
}
|
|
374
|
-
`},textAndBasic:{description:"Text Buttons + Basic Buttons Group",react:
|
|
374
|
+
`},textAndBasic:{description:"Text Buttons + Basic Buttons Group",react:h.code`
|
|
375
375
|
import { Button } from "@sps-woodland/buttons";
|
|
376
376
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
377
377
|
import { VericalRule } from "@sps-woodland/core";
|
|
@@ -387,7 +387,7 @@
|
|
|
387
387
|
</>
|
|
388
388
|
)
|
|
389
389
|
}
|
|
390
|
-
`},iconsAndBasic:{description:"Icon Buttons + Basic Buttons Group",react:
|
|
390
|
+
`},iconsAndBasic:{description:"Icon Buttons + Basic Buttons Group",react:h.code`
|
|
391
391
|
import { Button } from "@sps-woodland/buttons";
|
|
392
392
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
393
393
|
import { VericalRule } from "@sps-woodland/core";
|
|
@@ -404,7 +404,7 @@
|
|
|
404
404
|
</>
|
|
405
405
|
)
|
|
406
406
|
}
|
|
407
|
-
`},textIconsAndBasic:{description:"Text Buttons + Icon Buttons + Basic Buttons Group",react:
|
|
407
|
+
`},textIconsAndBasic:{description:"Text Buttons + Icon Buttons + Basic Buttons Group",react:h.code`
|
|
408
408
|
import { Button } from "@sps-woodland/buttons";
|
|
409
409
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
410
410
|
import { VericalRule } from "@sps-woodland/core";
|
|
@@ -423,4 +423,4 @@
|
|
|
423
423
|
</>
|
|
424
424
|
)
|
|
425
425
|
}
|
|
426
|
-
`}}}}},
|
|
426
|
+
`}}}}},wt={Buttons:kt};exports.Button=pe;exports.MANIFEST=wt;
|