@sps-woodland/buttons 8.4.1 → 8.4.3
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/button/Button.d.ts +17 -1
- package/lib/index.cjs.js +23 -23
- package/lib/index.es.js +632 -773
- package/package.json +15 -5
package/lib/button/Button.d.ts
CHANGED
@@ -1 +1,17 @@
|
|
1
|
-
|
1
|
+
import * as React from "react";
|
2
|
+
import type { PolymorphicComponentProps, ForwardRefComponent } from "@sps-woodland/core";
|
3
|
+
import type { IconName } from "@sps-woodland/tokens";
|
4
|
+
import type { AriaButtonProps } from "@react-aria/button";
|
5
|
+
import type { ButtonKind } from "./Button.css";
|
6
|
+
declare type ButtonProps<T extends React.ElementType> = PolymorphicComponentProps<AriaButtonProps<"button"> & {
|
7
|
+
disabled?: boolean;
|
8
|
+
href?: string;
|
9
|
+
icon?: IconName;
|
10
|
+
kind?: ButtonKind;
|
11
|
+
spinning?: boolean;
|
12
|
+
spinningTitle?: string;
|
13
|
+
title?: string;
|
14
|
+
}, T>;
|
15
|
+
declare function Button<T extends React.ElementType = "button" | "a">({ as, onClick, onPress, children, className, isDisabled, disabled, href, icon, kind, spinning, spinningTitle, title, ...rest }: ButtonProps<T>, ref: React.RefObject<HTMLElement> | null): React.ReactElement;
|
16
|
+
declare const frButton: ForwardRefComponent<typeof Button>;
|
17
|
+
export { frButton as Button };
|
package/lib/index.cjs.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("react"),H=require("@sps-woodland/core"),g=require("@spscommerce/utils"),We=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function He(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const de=We(v),d=He(v);function Oe(e){var t,n,r="";if(typeof e=="string"||typeof e=="number")r+=e;else if(typeof e=="object")if(Array.isArray(e)){var s=e.length;for(t=0;t<s;t++)e[t]&&(n=Oe(e[t]))&&(r&&(r+=" "),r+=n)}else for(n in e)e[n]&&(r&&(r+=" "),r+=n);return r}function ze(){for(var e,t,n=0,r="",s=arguments.length;n<s;n++)(e=arguments[n])&&(t=Oe(e))&&(r&&(r+=" "),r+=t);return r}const pe=typeof document<"u"?de.default.useLayoutEffect:()=>{};function U(e){const t=v.useRef(null);return pe(()=>{t.current=e},[e]),v.useCallback((...n)=>{const r=t.current;return r==null?void 0:r(...n)},[])}let ye=new Map;function Ye(e,t){if(e===t)return e;let n=ye.get(e);if(n)return n(t),t;let r=ye.get(t);return r?(r(e),e):t}function De(...e){return(...t)=>{for(let n of e)typeof n=="function"&&n(...t)}}const S=e=>{var t;return(t=e==null?void 0:e.ownerDocument)!==null&&t!==void 0?t:document},j=e=>e&&"window"in e&&e.window===e?e:S(e).defaultView||window;function W(...e){let t={...e[0]};for(let n=1;n<e.length;n++){let r=e[n];for(let s in r){let l=t[s],c=r[s];typeof l=="function"&&typeof c=="function"&&s[0]==="o"&&s[1]==="n"&&s.charCodeAt(2)>=65&&s.charCodeAt(2)<=90?t[s]=De(l,c):(s==="className"||s==="UNSAFE_className")&&typeof l=="string"&&typeof c=="string"?t[s]=ze(l,c):s==="id"&&l&&c?t.id=Ye(l,c):t[s]=c!==void 0?c:l}}return t}const qe=new Set(["id"]),Xe=new Set(["aria-label","aria-labelledby","aria-describedby","aria-details"]),Je=new Set(["href","target","rel","download","ping","referrerPolicy"]),Qe=/^(data-.*)$/;function Ze(e,t={}){let{labelable:n,isLink:r,propNames:s}=t,l={};for(const c in e)Object.prototype.hasOwnProperty.call(e,c)&&(qe.has(c)||n&&Xe.has(c)||r&&Je.has(c)||(s==null?void 0:s.has(c))||Qe.test(c))&&(l[c]=e[c]);return l}function K(e){if(et())e.focus({preventScroll:!0});else{let t=tt(e);e.focus(),nt(t)}}let J=null;function et(){if(J==null){J=!1;try{document.createElement("div").focus({get preventScroll(){return J=!0,!0}})}catch{}}return J}function tt(e){let t=e.parentNode,n=[],r=document.scrollingElement||document.documentElement;for(;t instanceof HTMLElement&&t!==r;)(t.offsetHeight<t.scrollHeight||t.offsetWidth<t.scrollWidth)&&n.push({element:t,scrollTop:t.scrollTop,scrollLeft:t.scrollLeft}),t=t.parentNode;return r instanceof HTMLElement&&n.push({element:r,scrollTop:r.scrollTop,scrollLeft:r.scrollLeft}),n}function nt(e){for(let{element:t,scrollTop:n,scrollLeft:r}of e)t.scrollTop=n,t.scrollLeft=r}function re(e){var t;return typeof window>"u"||window.navigator==null?!1:((t=window.navigator.userAgentData)===null||t===void 0?void 0:t.brands.some(n=>e.test(n.brand)))||e.test(window.navigator.userAgent)}function fe(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 Y(){return fe(/^Mac/i)}function rt(){return fe(/^iPhone/i)}function Ce(){return fe(/^iPad/i)||Y()&&navigator.maxTouchPoints>1}function Le(){return rt()||Ce()}function ot(){return re(/AppleWebKit/i)&&!st()}function st(){return re(/Chrome/i)}function _e(){return re(/Android/i)}function at(){return re(/Firefox/i)}function q(e,t,n=!0){var r,s;let{metaKey:l,ctrlKey:c,altKey:m,shiftKey:p}=t;at()&&((s=window.event)===null||s===void 0||(r=s.type)===null||r===void 0?void 0:r.startsWith("key"))&&e.target==="_blank"&&(Y()?l=!0:c=!0);let $=ot()&&Y()&&!Ce()?new KeyboardEvent("keydown",{keyIdentifier:"Enter",metaKey:l,ctrlKey:c,altKey:m,shiftKey:p}):new MouseEvent("click",{metaKey:l,ctrlKey:c,altKey:m,shiftKey:p,bubbles:!0,cancelable:!0});q.isOpening=n,K(e),e.dispatchEvent($),q.isOpening=!1}q.isOpening=!1;let V=new Map,ie=new Set;function he(){if(typeof window>"u")return;function e(r){return"propertyName"in r}let t=r=>{if(!e(r)||!r.target)return;let s=V.get(r.target);s||(s=new Set,V.set(r.target,s),r.target.addEventListener("transitioncancel",n,{once:!0})),s.add(r.propertyName)},n=r=>{if(!e(r)||!r.target)return;let s=V.get(r.target);if(!!s&&(s.delete(r.propertyName),s.size===0&&(r.target.removeEventListener("transitioncancel",n),V.delete(r.target)),V.size===0)){for(let l of ie)l();ie.clear()}};document.body.addEventListener("transitionrun",t),document.body.addEventListener("transitionend",n)}typeof document<"u"&&(document.readyState!=="loading"?he():document.addEventListener("DOMContentLoaded",he));function Ke(e){requestAnimationFrame(()=>{V.size===0?e():ie.add(e)})}function it(){let e=v.useRef(new Map),t=v.useCallback((s,l,c,m)=>{let p=m!=null&&m.once?(...$)=>{e.current.delete(c),c(...$)}:c;e.current.set(c,{type:l,eventTarget:s,fn:p,options:m}),s.addEventListener(l,c,m)},[]),n=v.useCallback((s,l,c,m)=>{var p;let $=((p=e.current.get(c))===null||p===void 0?void 0:p.fn)||c;s.removeEventListener(l,$,m),e.current.delete(c)},[]),r=v.useCallback(()=>{e.current.forEach((s,l)=>{n(s.eventTarget,s.type,l,s.options)})},[n]);return v.useEffect(()=>r,[r]),{addGlobalListener:t,removeGlobalListener:n,removeAllGlobalListeners:r}}function Ie(e,t){pe(()=>{if(e&&e.ref&&t)return e.ref.current=t.current,()=>{e.ref&&(e.ref.current=null)}})}function le(e){return e.mozInputSource===0&&e.isTrusted?!0:_e()&&e.pointerType?e.type==="click"&&e.buttons===1:e.detail===0&&!e.pointerType}function lt(e){return!_e()&&e.width===0&&e.height===0||e.width===1&&e.height===1&&e.pressure===0&&e.detail===0&&e.pointerType==="mouse"}function ct(e,t){return t.get?t.get.call(e):t.value}function Me(e,t,n){if(!t.has(e))throw new TypeError("attempted to "+n+" private field on non-instance");return t.get(e)}function ut(e,t){var n=Me(e,t,"get");return ct(e,n)}function dt(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")}function pt(e,t,n){dt(e,t),t.set(e,n)}function ft(e,t,n){if(t.set)t.set.call(e,n);else{if(!t.writable)throw new TypeError("attempted to set read only private field");t.value=n}}function $e(e,t,n){var r=Me(e,t,"set");return ft(e,r,n),n}let G="default",ce="",te=new WeakMap;function ke(e){if(Le()){if(G==="default"){const t=S(e);ce=t.documentElement.style.webkitUserSelect,t.documentElement.style.webkitUserSelect="none"}G="disabled"}else(e instanceof HTMLElement||e instanceof SVGElement)&&(te.set(e,e.style.userSelect),e.style.userSelect="none")}function Q(e){if(Le()){if(G!=="disabled")return;G="restoring",setTimeout(()=>{Ke(()=>{if(G==="restoring"){const t=S(e);t.documentElement.style.webkitUserSelect==="none"&&(t.documentElement.style.webkitUserSelect=ce||""),ce="",G="default"}})},300)}else if((e instanceof HTMLElement||e instanceof SVGElement)&&e&&te.has(e)){let t=te.get(e);e.style.userSelect==="none"&&(e.style.userSelect=t),e.getAttribute("style")===""&&e.removeAttribute("style"),te.delete(e)}}const Ae=de.default.createContext({register:()=>{}});Ae.displayName="PressResponderContext";function mt(e){let t=v.useContext(Ae);if(t){let{register:n,...r}=t;e=W(r,e),n()}return Ie(t,e.ref),e}var Z=new WeakMap;class ee{continuePropagation(){$e(this,Z,!1)}get shouldStopPropagation(){return ut(this,Z)}constructor(t,n,r){pt(this,Z,{writable:!0,value:void 0}),$e(this,Z,!0),this.type=t,this.pointerType=n,this.target=r.currentTarget,this.shiftKey=r.shiftKey,this.metaKey=r.metaKey,this.ctrlKey=r.ctrlKey,this.altKey=r.altKey}}const we=Symbol("linkClicked");function bt(e){let{onPress:t,onPressChange:n,onPressStart:r,onPressEnd:s,onPressUp:l,isDisabled:c,isPressed:m,preventFocusOnPress:p,shouldCancelOnPointerExit:$,allowTextSelectionOnPress:k,ref:M,...C}=mt(e),[L,A]=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:w,removeAllGlobalListeners:O}=it(),E=U((o,f)=>{let N=T.current;if(c||N.didFirePressStart)return!1;let u=!0;if(N.isTriggeringEvent=!0,r){let b=new ee("pressstart",f,o);r(b),u=b.shouldStopPropagation}return n&&n(!0),N.isTriggeringEvent=!1,N.didFirePressStart=!0,A(!0),u}),y=U((o,f,N=!0)=>{let u=T.current;if(!u.didFirePressStart)return!1;u.ignoreClickAfterPress=!0,u.didFirePressStart=!1,u.isTriggeringEvent=!0;let b=!0;if(s){let a=new ee("pressend",f,o);s(a),b=a.shouldStopPropagation}if(n&&n(!1),A(!1),t&&N&&!c){let a=new ee("press",f,o);t(a),b&&(b=a.shouldStopPropagation)}return u.isTriggeringEvent=!1,b}),P=U((o,f)=>{let N=T.current;if(c)return!1;if(l){N.isTriggeringEvent=!0;let u=new ee("pressup",f,o);return l(u),N.isTriggeringEvent=!1,u.shouldStopPropagation}return!0}),B=U(o=>{let f=T.current;f.isPressed&&f.target&&(f.isOverTarget&&f.pointerType!=null&&y(D(f.target,o),f.pointerType,!1),f.isPressed=!1,f.isOverTarget=!1,f.activePointerId=null,f.pointerType=null,O(),k||Q(f.target))}),_=U(o=>{$&&B(o)}),je=v.useMemo(()=>{let o=T.current,f={onKeyDown(u){if(se(u.nativeEvent,u.currentTarget)&&u.currentTarget.contains(u.target)){var b;Te(u.target,u.key)&&u.preventDefault();let a=!0;if(!o.isPressed&&!u.repeat){o.target=u.currentTarget,o.isPressed=!0,a=E(u,"keyboard");let i=u.currentTarget,h=F=>{se(F,i)&&!F.repeat&&i.contains(F.target)&&o.target&&P(D(o.target,F),"keyboard")};w(S(u.currentTarget),"keyup",De(h,N),!0)}a&&u.stopPropagation(),u.metaKey&&Y()&&((b=o.metaKeyEvents)===null||b===void 0||b.set(u.key,u.nativeEvent))}else u.key==="Meta"&&(o.metaKeyEvents=new Map)},onClick(u){if(!(u&&!u.currentTarget.contains(u.target))&&u&&u.button===0&&!o.isTriggeringEvent&&!q.isOpening){let b=!0;if(c&&u.preventDefault(),!o.ignoreClickAfterPress&&!o.ignoreEmulatedMouseEvents&&!o.isPressed&&(o.pointerType==="virtual"||le(u.nativeEvent))){!c&&!p&&K(u.currentTarget);let a=E(u,"virtual"),i=P(u,"virtual"),h=y(u,"virtual");b=a&&i&&h}o.ignoreEmulatedMouseEvents=!1,o.ignoreClickAfterPress=!1,b&&u.stopPropagation()}}},N=u=>{var b;if(o.isPressed&&o.target&&se(u,o.target)){var a;Te(u.target,u.key)&&u.preventDefault();let h=u.target;y(D(o.target,u),"keyboard",o.target.contains(h)),O(),u.key!=="Enter"&&me(o.target)&&o.target.contains(h)&&!u[we]&&(u[we]=!0,q(o.target,u,!1)),o.isPressed=!1,(a=o.metaKeyEvents)===null||a===void 0||a.delete(u.key)}else if(u.key==="Meta"&&((b=o.metaKeyEvents)===null||b===void 0?void 0:b.size)){var i;let h=o.metaKeyEvents;o.metaKeyEvents=void 0;for(let F of h.values())(i=o.target)===null||i===void 0||i.dispatchEvent(new KeyboardEvent("keyup",F))}};if(typeof PointerEvent<"u"){f.onPointerDown=i=>{if(i.button!==0||!i.currentTarget.contains(i.target))return;if(lt(i.nativeEvent)){o.pointerType="virtual";return}ae(i.currentTarget)&&i.preventDefault(),o.pointerType=i.pointerType;let h=!0;o.isPressed||(o.isPressed=!0,o.isOverTarget=!0,o.activePointerId=i.pointerId,o.target=i.currentTarget,!c&&!p&&K(i.currentTarget),k||ke(o.target),h=E(i,o.pointerType),w(S(i.currentTarget),"pointermove",u,!1),w(S(i.currentTarget),"pointerup",b,!1),w(S(i.currentTarget),"pointercancel",a,!1)),h&&i.stopPropagation()},f.onMouseDown=i=>{!i.currentTarget.contains(i.target)||i.button===0&&(ae(i.currentTarget)&&i.preventDefault(),i.stopPropagation())},f.onPointerUp=i=>{!i.currentTarget.contains(i.target)||o.pointerType==="virtual"||i.button===0&&R(i,i.currentTarget)&&P(i,o.pointerType||i.pointerType)};let u=i=>{i.pointerId===o.activePointerId&&(o.target&&R(i,o.target)?!o.isOverTarget&&o.pointerType!=null&&(o.isOverTarget=!0,E(D(o.target,i),o.pointerType)):o.target&&o.isOverTarget&&o.pointerType!=null&&(o.isOverTarget=!1,y(D(o.target,i),o.pointerType,!1),_(i)))},b=i=>{i.pointerId===o.activePointerId&&o.isPressed&&i.button===0&&o.target&&(R(i,o.target)&&o.pointerType!=null?y(D(o.target,i),o.pointerType):o.isOverTarget&&o.pointerType!=null&&y(D(o.target,i),o.pointerType,!1),o.isPressed=!1,o.isOverTarget=!1,o.activePointerId=null,o.pointerType=null,O(),k||Q(o.target))},a=i=>{B(i)};f.onDragStart=i=>{!i.currentTarget.contains(i.target)||B(i)}}else{f.onMouseDown=a=>{if(a.button!==0||!a.currentTarget.contains(a.target))return;if(ae(a.currentTarget)&&a.preventDefault(),o.ignoreEmulatedMouseEvents){a.stopPropagation();return}o.isPressed=!0,o.isOverTarget=!0,o.target=a.currentTarget,o.pointerType=le(a.nativeEvent)?"virtual":"mouse",!c&&!p&&K(a.currentTarget),E(a,o.pointerType)&&a.stopPropagation(),w(S(a.currentTarget),"mouseup",u,!1)},f.onMouseEnter=a=>{if(!a.currentTarget.contains(a.target))return;let i=!0;o.isPressed&&!o.ignoreEmulatedMouseEvents&&o.pointerType!=null&&(o.isOverTarget=!0,i=E(a,o.pointerType)),i&&a.stopPropagation()},f.onMouseLeave=a=>{if(!a.currentTarget.contains(a.target))return;let i=!0;o.isPressed&&!o.ignoreEmulatedMouseEvents&&o.pointerType!=null&&(o.isOverTarget=!1,i=y(a,o.pointerType,!1),_(a)),i&&a.stopPropagation()},f.onMouseUp=a=>{!a.currentTarget.contains(a.target)||!o.ignoreEmulatedMouseEvents&&a.button===0&&P(a,o.pointerType||"mouse")};let u=a=>{if(a.button===0){if(o.isPressed=!1,O(),o.ignoreEmulatedMouseEvents){o.ignoreEmulatedMouseEvents=!1;return}o.target&&R(a,o.target)&&o.pointerType!=null?y(D(o.target,a),o.pointerType):o.target&&o.isOverTarget&&o.pointerType!=null&&y(D(o.target,a),o.pointerType,!1),o.isOverTarget=!1}};f.onTouchStart=a=>{if(!a.currentTarget.contains(a.target))return;let i=gt(a.nativeEvent);if(!i)return;o.activePointerId=i.identifier,o.ignoreEmulatedMouseEvents=!0,o.isOverTarget=!0,o.isPressed=!0,o.target=a.currentTarget,o.pointerType="touch",!c&&!p&&K(a.currentTarget),k||ke(o.target),E(a,o.pointerType)&&a.stopPropagation(),w(j(a.currentTarget),"scroll",b,!0)},f.onTouchMove=a=>{if(!a.currentTarget.contains(a.target))return;if(!o.isPressed){a.stopPropagation();return}let i=Ee(a.nativeEvent,o.activePointerId),h=!0;i&&R(i,a.currentTarget)?!o.isOverTarget&&o.pointerType!=null&&(o.isOverTarget=!0,h=E(a,o.pointerType)):o.isOverTarget&&o.pointerType!=null&&(o.isOverTarget=!1,h=y(a,o.pointerType,!1),_(a)),h&&a.stopPropagation()},f.onTouchEnd=a=>{if(!a.currentTarget.contains(a.target))return;if(!o.isPressed){a.stopPropagation();return}let i=Ee(a.nativeEvent,o.activePointerId),h=!0;i&&R(i,a.currentTarget)&&o.pointerType!=null?(P(a,o.pointerType),h=y(a,o.pointerType)):o.isOverTarget&&o.pointerType!=null&&(h=y(a,o.pointerType,!1)),h&&a.stopPropagation(),o.isPressed=!1,o.activePointerId=null,o.isOverTarget=!1,o.ignoreEmulatedMouseEvents=!0,o.target&&!k&&Q(o.target),O()},f.onTouchCancel=a=>{!a.currentTarget.contains(a.target)||(a.stopPropagation(),o.isPressed&&B(a))};let b=a=>{o.isPressed&&a.target.contains(o.target)&&B({currentTarget:o.target,shiftKey:!1,ctrlKey:!1,metaKey:!1,altKey:!1})};f.onDragStart=a=>{!a.currentTarget.contains(a.target)||B(a)}}return f},[w,c,p,O,k,B,_,y,E,P]);return v.useEffect(()=>()=>{var o;k||Q((o=T.current.target)!==null&&o!==void 0?o:void 0)},[k]),{isPressed:m||L,pressProps:W(C,je)}}function me(e){return e.tagName==="A"&&e.hasAttribute("href")}function se(e,t){const{key:n,code:r}=e,s=t,l=s.getAttribute("role");return(n==="Enter"||n===" "||n==="Spacebar"||r==="Space")&&!(s instanceof j(s).HTMLInputElement&&!Fe(s,n)||s instanceof j(s).HTMLTextAreaElement||s.isContentEditable)&&!((l==="link"||!l&&me(s))&&n!=="Enter")}function gt(e){const{targetTouches:t}=e;return t.length>0?t[0]:null}function Ee(e,t){const n=e.changedTouches;for(let r=0;r<n.length;r++){const s=n[r];if(s.identifier===t)return s}return null}function D(e,t){return{currentTarget:e,shiftKey:t.shiftKey,ctrlKey:t.ctrlKey,metaKey:t.metaKey,altKey:t.altKey}}function vt(e){let t=0,n=0;return e.width!==void 0?t=e.width/2:e.radiusX!==void 0&&(t=e.radiusX),e.height!==void 0?n=e.height/2:e.radiusY!==void 0&&(n=e.radiusY),{top:e.clientY-n,right:e.clientX+t,bottom:e.clientY+n,left:e.clientX-t}}function yt(e,t){return!(e.left>t.right||t.left>e.right||e.top>t.bottom||t.top>e.bottom)}function R(e,t){let n=t.getBoundingClientRect(),r=vt(e);return yt(n,r)}function ae(e){return!(e instanceof HTMLElement)||!e.hasAttribute("draggable")}function Te(e,t){return e instanceof HTMLInputElement?!Fe(e,t):e instanceof HTMLButtonElement?e.type!=="submit"&&e.type!=="reset":!me(e)}const ht=new Set(["checkbox","radio","range","color","file","image","button","submit","reset"]);function Fe(e,t){return e.type==="checkbox"||e.type==="radio"?t===" ":ht.has(e.type)}class $t{isDefaultPrevented(){return this.nativeEvent.defaultPrevented}preventDefault(){this.defaultPrevented=!0,this.nativeEvent.preventDefault()}stopPropagation(){this.nativeEvent.stopPropagation(),this.isPropagationStopped=()=>!0}isPropagationStopped(){return!1}persist(){}constructor(t,n){this.nativeEvent=n,this.target=n.target,this.currentTarget=n.currentTarget,this.relatedTarget=n.relatedTarget,this.bubbles=n.bubbles,this.cancelable=n.cancelable,this.defaultPrevented=n.defaultPrevented,this.eventPhase=n.eventPhase,this.isTrusted=n.isTrusted,this.timeStamp=n.timeStamp,this.type=t}}function kt(e){let t=v.useRef({isFocused:!1,observer:null});pe(()=>{const r=t.current;return()=>{r.observer&&(r.observer.disconnect(),r.observer=null)}},[]);let n=U(r=>{e==null||e(r)});return v.useCallback(r=>{if(r.target instanceof HTMLButtonElement||r.target instanceof HTMLInputElement||r.target instanceof HTMLTextAreaElement||r.target instanceof HTMLSelectElement){t.current.isFocused=!0;let s=r.target,l=c=>{t.current.isFocused=!1,s.disabled&&n(new $t("blur",c)),t.current.observer&&(t.current.observer.disconnect(),t.current.observer=null)};s.addEventListener("focusout",l,{once:!0}),t.current.observer=new MutationObserver(()=>{if(t.current.isFocused&&s.disabled){var c;(c=t.current.observer)===null||c===void 0||c.disconnect();let m=s===document.activeElement?null:document.activeElement;s.dispatchEvent(new FocusEvent("blur",{relatedTarget:m})),s.dispatchEvent(new FocusEvent("focusout",{bubbles:!0,relatedTarget:m}))}}),t.current.observer.observe(s,{attributes:!0,attributeFilter:["disabled"]})}},[n])}function wt(e){let{isDisabled:t,onFocus:n,onBlur:r,onFocusChange:s}=e;const l=v.useCallback(p=>{if(p.target===p.currentTarget)return r&&r(p),s&&s(!1),!0},[r,s]),c=kt(l),m=v.useCallback(p=>{p.target===p.currentTarget&&document.activeElement===p.target&&(n&&n(p),s&&s(!0),c(p))},[s,n,c]);return{focusProps:{onFocus:!t&&(n||s||r)?m:void 0,onBlur:!t&&(r||s)?l:void 0}}}let X=null,Et=new Set,z=new Map,I=!1,ue=!1;function be(e,t){for(let n of Et)n(e,t)}function Tt(e){return!(e.metaKey||!Y()&&e.altKey||e.ctrlKey||e.key==="Control"||e.key==="Shift"||e.key==="Meta")}function ne(e){I=!0,Tt(e)&&(X="keyboard",be("keyboard",e))}function x(e){X="pointer",(e.type==="mousedown"||e.type==="pointerdown")&&(I=!0,be("pointer",e))}function Re(e){le(e)&&(I=!0,X="virtual")}function Ue(e){e.target===window||e.target===document||(!I&&!ue&&(X="virtual",be("virtual",e)),I=!1,ue=!1)}function Ve(){I=!1,ue=!0}function Pe(e){if(typeof window>"u"||z.get(j(e)))return;const t=j(e),n=S(e);let r=t.HTMLElement.prototype.focus;t.HTMLElement.prototype.focus=function(){I=!0,r.apply(this,arguments)},n.addEventListener("keydown",ne,!0),n.addEventListener("keyup",ne,!0),n.addEventListener("click",Re,!0),t.addEventListener("focus",Ue,!0),t.addEventListener("blur",Ve,!1),typeof PointerEvent<"u"?(n.addEventListener("pointerdown",x,!0),n.addEventListener("pointermove",x,!0),n.addEventListener("pointerup",x,!0)):(n.addEventListener("mousedown",x,!0),n.addEventListener("mousemove",x,!0),n.addEventListener("mouseup",x,!0)),t.addEventListener("beforeunload",()=>{Ge(e)},{once:!0}),z.set(t,{focus:r})}const Ge=(e,t)=>{const n=j(e),r=S(e);t&&r.removeEventListener("DOMContentLoaded",t),z.has(n)&&(n.HTMLElement.prototype.focus=z.get(n).focus,r.removeEventListener("keydown",ne,!0),r.removeEventListener("keyup",ne,!0),r.removeEventListener("click",Re,!0),n.removeEventListener("focus",Ue,!0),n.removeEventListener("blur",Ve,!1),typeof PointerEvent<"u"?(r.removeEventListener("pointerdown",x,!0),r.removeEventListener("pointermove",x,!0),r.removeEventListener("pointerup",x,!0)):(r.removeEventListener("mousedown",x,!0),r.removeEventListener("mousemove",x,!0),r.removeEventListener("mouseup",x,!0)),z.delete(n))};function Pt(e){const t=S(e);let n;return t.readyState!=="loading"?Pe(e):(n=()=>{Pe(e)},t.addEventListener("DOMContentLoaded",n)),()=>Ge(e,n)}typeof document<"u"&&Pt();function Bt(){return X}function Be(e){if(!e)return;let t=!0;return n=>{let r={...n,preventDefault(){n.preventDefault()},isDefaultPrevented(){return n.isDefaultPrevented()},stopPropagation(){console.error("stopPropagation is now the default behavior for events in React Spectrum. You can use continuePropagation() to revert this behavior.")},continuePropagation(){t=!1}};e(r),t&&n.stopPropagation()}}function xt(e){return{keyboardProps:e.isDisabled?{}:{onKeyDown:Be(e.onKeyDown),onKeyUp:Be(e.onKeyUp)}}}function St(e){const t=S(e);if(Bt()==="virtual"){let n=t.activeElement;Ke(()=>{t.activeElement===n&&e.isConnected&&K(e)})}else K(e)}function Nt(e,t){return!e||!t?!1:t.some(n=>n.contains(e))}class ge{get size(){return this.fastMap.size}getTreeNode(t){return this.fastMap.get(t)}addTreeNode(t,n,r){let s=this.fastMap.get(n!=null?n:null);if(!s)return;let l=new xe({scopeRef:t});s.addChild(l),l.parent=s,this.fastMap.set(t,l),r&&(l.nodeToRestore=r)}addNode(t){this.fastMap.set(t.scopeRef,t)}removeTreeNode(t){if(t===null)return;let n=this.fastMap.get(t);if(!n)return;let r=n.parent;for(let l of this.traverse())l!==n&&n.nodeToRestore&&l.nodeToRestore&&n.scopeRef&&n.scopeRef.current&&Nt(l.nodeToRestore,n.scopeRef.current)&&(l.nodeToRestore=n.nodeToRestore);let s=n.children;r&&(r.removeChild(n),s.size>0&&s.forEach(l=>r&&r.addChild(l))),this.fastMap.delete(n.scopeRef)}*traverse(t=this.root){if(t.scopeRef!=null&&(yield t),t.children.size>0)for(let n of t.children)yield*this.traverse(n)}clone(){var t;let n=new ge;var r;for(let s of this.traverse())n.addTreeNode(s.scopeRef,(r=(t=s.parent)===null||t===void 0?void 0:t.scopeRef)!==null&&r!==void 0?r:null,s.nodeToRestore);return n}constructor(){this.fastMap=new Map,this.root=new xe({scopeRef:null}),this.fastMap.set(null,this.root)}}class xe{addChild(t){this.children.add(t),t.parent=this}removeChild(t){this.children.delete(t),t.parent=void 0}constructor(t){this.children=new Set,this.contain=!1,this.scopeRef=t.scopeRef}}new ge;let Ot=de.default.createContext(null);function Dt(e){let t=v.useContext(Ot)||{};Ie(t,e);let{ref:n,...r}=t;return r}function Ct(e,t){let{focusProps:n}=wt(e),{keyboardProps:r}=xt(e),s=W(n,r),l=Dt(t),c=e.isDisabled?{}:l,m=v.useRef(e.autoFocus);return v.useEffect(()=>{m.current&&t.current&&St(t.current),m.current=!1},[t]),{focusableProps:W({...s,tabIndex:e.excludeFromTabOrder&&!e.isDisabled?-1:void 0},c)}}function Lt(e,t){let{elementType:n="button",isDisabled:r,onPress:s,onPressStart:l,onPressEnd:c,onPressUp:m,onPressChange:p,preventFocusOnPress:$,allowFocusWhenDisabled:k,onClick:M,href:C,target:L,rel:A,type:T="button"}=e,w;n==="button"?w={type:T,disabled:r}:w={role:"button",tabIndex:r?void 0:0,href:n==="a"&&r?void 0:C,target:n==="a"?L:void 0,type:n==="input"?T:void 0,disabled:n==="input"?r:void 0,"aria-disabled":!r||n==="input"?void 0:r,rel:n==="a"?A:void 0};let{pressProps:O,isPressed:E}=bt({onPressStart:l,onPressEnd:c,onPressChange:p,onPress:s,onPressUp:m,isDisabled:r,preventFocusOnPress:$,ref:t}),{focusableProps:y}=Ct(e,t);k&&(y.tabIndex=r?-1:y.tabIndex);let P=W(y,O,Ze(e,{labelable:!0}));return{isPressed:E,buttonProps:W(w,P,{"aria-haspopup":e["aria-haspopup"],"aria-expanded":e["aria-expanded"],"aria-controls":e["aria-controls"],"aria-pressed":e["aria-pressed"],onClick:B=>{M&&(M(B),console.warn("onClick is deprecated, please use onPress"))}})}}function _t(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Se(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable})),n.push.apply(n,r)}return n}function Ne(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]!=null?arguments[t]:{};t%2?Se(Object(n),!0).forEach(function(r){_t(e,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Se(Object(n)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})}return e}var Kt=(e,t,n)=>{for(var r of Object.keys(e)){var s;if(e[r]!==((s=t[r])!==null&&s!==void 0?s:n[r]))return!1}return!0},oe=e=>t=>{var n=e.defaultClassName,r=Ne(Ne({},e.defaultVariants),t);for(var s in r){var l,c=(l=r[s])!==null&&l!==void 0?l:e.defaultVariants[s];if(c!=null){var m=c;typeof m=="boolean"&&(m=m===!0?"true":"false");var p=e.variantClassNames[s][m];p&&(n+=" "+p)}}for(var[$,k]of e.compoundVariants)Kt($,r,e.defaultVariants)&&(n+=" "+k);return n},It=oe({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=oe({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:[]}),At="_125pcxyv",Ft=oe({defaultClassName:"_125pcxyw",variantClassNames:{spinning:{true:"_125pcxyx",false:"_125pcxyy"}},defaultVariants:{spinning:!1},compoundVariants:[]}),Rt=oe({defaultClassName:"_125pcxys",variantClassNames:{spinning:{true:"_125pcxyt",false:"_125pcxyu"}},defaultVariants:{spinning:!1},compoundVariants:[]});const ve=d.forwardRef(({onClick:e,onPress:t,children:n,className:r,isDisabled:s,disabled:l,href:c,icon:m,kind:p="default",spinning:$,spinningTitle:k,title:M,...C},L)=>{var _;const A={onPress:t!=null?t:e,isDisabled:(_=l!=null?l:s)!=null?_:$,...C},{"data-testid":T}=C,w=L!=null?L:d.useRef(null),{buttonProps:O}=Lt(A,w),{t:E}=d.useContext(H.I18nContext),y=m&&d.createElement(H.Icon,{className:At,icon:m,"aria-hidden":"true","data-testid":`${T}__${m}-icon`});let P;p==="default"||p==="icon"||p==="link"?P="dark":P="light";const B=$&&d.createElement(H.Spinner,{color:P,className:Ft({spinning:$}),title:k||E("design-system:button.spinningTitle"),"data-testid":`${T}__spinner`});return d.createElement("div",{className:H.cl(It({disabled:s||l,kind:p,spinning:$}),r)},c?d.createElement("a",{className:Rt({spinning:$}),...C,href:c,title:M},y,n,B):d.createElement(d.Fragment,null,d.createElement("button",{className:Mt({disabled:s||l,kind:p,spinning:$}),disabled:s,...O,ref:w,title:M},y,n?d.createElement("span",null,n):"",B)))});H.Metadata.set(ve,{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 Ut={components:[ve],description:()=>d.createElement(d.Fragment,null,d.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."),d.createElement("br",null),d.createElement("h5",null,"Variants"),d.createElement("div",{className:"sps-body-14"},d.createElement("span",{className:"sps-text-semibold"},"Default: "),"For tertiary actions or actions of lower importance on a page."),d.createElement("div",{className:"sps-body-14"},d.createElement("span",{className:"sps-text-semibold"},"Key: "),"For primary or important actions on a page."),d.createElement("div",{className:"sps-body-14"},d.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."),d.createElement("div",{className:"sps-body-14"},d.createElement("span",{className:"sps-text-semibold"},"Delete: "),"For deleting information or another destructive action. These should always be paired with a Delete Confirmation Modal."),d.createElement("div",{className:"sps-body-14"},d.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\u2019s disabled."),d.createElement("div",{className:"sps-body-14"},d.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})=>d.createElement(d.Fragment,null,d.createElement("p",null,"The most common type of button that can be used in most cases. Example: Basic Buttons in a ",d.createElement(e,{to:"modals"},"Modal"),".")),examples:{withoutIcons:{description:"Without Icons",react:g.code`
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("react"),V=require("@sps-woodland/core"),Oe=require("@react-aria/focus"),y=require("@spscommerce/utils"),Ve=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function je(e){if(e&&e.__esModule)return 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 Ne=Ve(k),c=je(k);function De(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=De(e[t]))&&(o&&(o+=" "),o+=r)}else for(r in e)e[r]&&(o&&(o+=" "),o+=r);return o}function We(){for(var e,t,r=0,o="",i=arguments.length;r<i;r++)(e=arguments[r])&&(t=De(e))&&(o&&(o+=" "),o+=t);return o}const Ce=typeof document<"u"?Ne.default.useLayoutEffect:()=>{};function G(e){const t=k.useRef(null);return Ce(()=>{t.current=e},[e]),k.useCallback((...r)=>{const o=t.current;return o==null?void 0:o(...r)},[])}let ye=new Map;function Ye(e,t){if(e===t)return e;let r=ye.get(e);if(r)return r(t),t;let o=ye.get(t);return o?(o(e),e):t}function Le(...e){return(...t)=>{for(let r of e)typeof r=="function"&&r(...t)}}const C=e=>{var t;return(t=e==null?void 0:e.ownerDocument)!==null&&t!==void 0?t:document},R=e=>e&&"window"in e&&e.window===e?e:C(e).defaultView||window;function Y(...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]=Le(d,u):(i==="className"||i==="UNSAFE_className")&&typeof d=="string"&&typeof u=="string"?t[i]=We(d,u):i==="id"&&d&&u?t.id=Ye(d,u):t[i]=u!==void 0?u:d}}return t}const qe=new Set(["id"]),ze=new Set(["aria-label","aria-labelledby","aria-describedby","aria-details"]),Xe=new Set(["href","target","rel","download","ping","referrerPolicy"]),Je=/^(data-.*)$/;function Qe(e,t={}){let{labelable:r,isLink:o,propNames:i}=t,d={};for(const u in e)Object.prototype.hasOwnProperty.call(e,u)&&(qe.has(u)||r&&ze.has(u)||o&&Xe.has(u)||(i==null?void 0:i.has(u))||Je.test(u))&&(d[u]=e[u]);return d}function j(e){if(Ze())e.focus({preventScroll:!0});else{let t=et(e);e.focus(),tt(t)}}let X=null;function Ze(){if(X==null){X=!1;try{document.createElement("div").focus({get preventScroll(){return X=!0,!0}})}catch{}}return X}function et(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 tt(e){for(let{element:t,scrollTop:r,scrollLeft:o}of e)t.scrollTop=r,t.scrollLeft=o}function re(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 me(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 q(){return me(/^Mac/i)}function nt(){return me(/^iPhone/i)}function _e(){return me(/^iPad/i)||q()&&navigator.maxTouchPoints>1}function Ke(){return nt()||_e()}function rt(){return re(/AppleWebKit/i)&&!ot()}function ot(){return re(/Chrome/i)}function Ie(){return re(/Android/i)}function st(){return re(/Firefox/i)}function z(e,t,r=!0){var o,i;let{metaKey:d,ctrlKey:u,altKey:p,shiftKey:b}=t;st()&&((i=window.event)===null||i===void 0||(o=i.type)===null||o===void 0?void 0:o.startsWith("key"))&&e.target==="_blank"&&(q()?d=!0:u=!0);let E=rt()&&q()&&!_e()?new KeyboardEvent("keydown",{keyIdentifier:"Enter",metaKey:d,ctrlKey:u,altKey:p,shiftKey:b}):new MouseEvent("click",{metaKey:d,ctrlKey:u,altKey:p,shiftKey:b,bubbles:!0,cancelable:!0});z.isOpening=r,j(e),e.dispatchEvent(E),z.isOpening=!1}z.isOpening=!1;let U=new Map,ue=new Set;function he(){if(typeof window>"u")return;function e(o){return"propertyName"in o}let t=o=>{if(!e(o)||!o.target)return;let i=U.get(o.target);i||(i=new Set,U.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=U.get(o.target);if(!!i&&(i.delete(o.propertyName),i.size===0&&(o.target.removeEventListener("transitioncancel",r),U.delete(o.target)),U.size===0)){for(let d of ue)d();ue.clear()}};document.body.addEventListener("transitionrun",t),document.body.addEventListener("transitionend",r)}typeof document<"u"&&(document.readyState!=="loading"?he():document.addEventListener("DOMContentLoaded",he));function it(e){requestAnimationFrame(()=>{U.size===0?e():ue.add(e)})}function at(){let e=k.useRef(new Map),t=k.useCallback((i,d,u,p)=>{let b=p!=null&&p.once?(...E)=>{e.current.delete(u),u(...E)}:u;e.current.set(u,{type:d,eventTarget:i,fn:b,options:p}),i.addEventListener(d,u,p)},[]),r=k.useCallback((i,d,u,p)=>{var b;let E=((b=e.current.get(u))===null||b===void 0?void 0:b.fn)||u;i.removeEventListener(d,E,p),e.current.delete(u)},[]),o=k.useCallback(()=>{e.current.forEach((i,d)=>{r(i.eventTarget,i.type,d,i.options)})},[r]);return k.useEffect(()=>o,[o]),{addGlobalListener:t,removeGlobalListener:r,removeAllGlobalListeners:o}}function lt(e,t){Ce(()=>{if(e&&e.ref&&t)return e.ref.current=t.current,()=>{e.ref&&(e.ref.current=null)}})}function ce(e){return e.mozInputSource===0&&e.isTrusted?!0:Ie()&&e.pointerType?e.type==="click"&&e.buttons===1:e.detail===0&&!e.pointerType}function ut(e){return!Ie()&&e.width===0&&e.height===0||e.width===1&&e.height===1&&e.pressure===0&&e.detail===0&&e.pointerType==="mouse"}function ct(e,t){return t.get?t.get.call(e):t.value}function Me(e,t,r){if(!t.has(e))throw new TypeError("attempted to "+r+" private field on non-instance");return t.get(e)}function dt(e,t){var r=Me(e,t,"get");return ct(e,r)}function pt(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")}function ft(e,t,r){pt(e,t),t.set(e,r)}function mt(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 Ee(e,t,r){var o=Me(e,t,"set");return mt(e,o,r),r}let H="default",de="",ee=new WeakMap;function $e(e){if(Ke()){if(H==="default"){const t=C(e);de=t.documentElement.style.webkitUserSelect,t.documentElement.style.webkitUserSelect="none"}H="disabled"}else(e instanceof HTMLElement||e instanceof SVGElement)&&(ee.set(e,e.style.userSelect),e.style.userSelect="none")}function J(e){if(Ke()){if(H!=="disabled")return;H="restoring",setTimeout(()=>{it(()=>{if(H==="restoring"){const t=C(e);t.documentElement.style.webkitUserSelect==="none"&&(t.documentElement.style.webkitUserSelect=de||""),de="",H="default"}})},300)}else if((e instanceof HTMLElement||e instanceof SVGElement)&&e&&ee.has(e)){let t=ee.get(e);e.style.userSelect==="none"&&(e.style.userSelect=t),e.getAttribute("style")===""&&e.removeAttribute("style"),ee.delete(e)}}const Ae=Ne.default.createContext({register:()=>{}});Ae.displayName="PressResponderContext";function bt(e){let t=k.useContext(Ae);if(t){let{register:r,...o}=t;e=Y(o,e),r()}return lt(t,e.ref),e}var Q=new WeakMap;class Z{continuePropagation(){Ee(this,Q,!1)}get shouldStopPropagation(){return dt(this,Q)}constructor(t,r,o){ft(this,Q,{writable:!0,value:void 0}),Ee(this,Q,!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 ke=Symbol("linkClicked");function gt(e){let{onPress:t,onPressChange:r,onPressStart:o,onPressEnd:i,onPressUp:d,isDisabled:u,isPressed:p,preventFocusOnPress:b,shouldCancelOnPointerExit:E,allowTextSelectionOnPress:v,ref:_,...x}=bt(e),[m,S]=k.useState(!1),w=k.useRef({isPressed:!1,ignoreEmulatedMouseEvents:!1,ignoreClickAfterPress:!1,didFirePressStart:!1,isTriggeringEvent:!1,activePointerId:null,target:null,isOverTarget:!1,pointerType:null}),{addGlobalListener:B,removeAllGlobalListeners:N}=at(),P=G((n,f)=>{let T=w.current;if(u||T.didFirePressStart)return!1;let l=!0;if(T.isTriggeringEvent=!0,o){let g=new Z("pressstart",f,n);o(g),l=g.shouldStopPropagation}return r&&r(!0),T.isTriggeringEvent=!1,T.didFirePressStart=!0,S(!0),l}),$=G((n,f,T=!0)=>{let l=w.current;if(!l.didFirePressStart)return!1;l.ignoreClickAfterPress=!0,l.didFirePressStart=!1,l.isTriggeringEvent=!0;let g=!0;if(i){let s=new Z("pressend",f,n);i(s),g=s.shouldStopPropagation}if(r&&r(!1),S(!1),t&&T&&!u){let s=new Z("press",f,n);t(s),g&&(g=s.shouldStopPropagation)}return l.isTriggeringEvent=!1,g}),L=G((n,f)=>{let T=w.current;if(u)return!1;if(d){T.isTriggeringEvent=!0;let l=new Z("pressup",f,n);return d(l),T.isTriggeringEvent=!1,l.shouldStopPropagation}return!0}),D=G(n=>{let f=w.current;f.isPressed&&f.target&&(f.isOverTarget&&f.pointerType!=null&&$(K(f.target,n),f.pointerType,!1),f.isPressed=!1,f.isOverTarget=!1,f.activePointerId=null,f.pointerType=null,N(),v||J(f.target))}),M=G(n=>{E&&D(n)}),se=k.useMemo(()=>{let n=w.current,f={onKeyDown(l){if(ie(l.nativeEvent,l.currentTarget)&&l.currentTarget.contains(l.target)){var g;Te(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 a=l.currentTarget,h=A=>{ie(A,a)&&!A.repeat&&a.contains(A.target)&&n.target&&L(K(n.target,A),"keyboard")};B(C(l.currentTarget),"keyup",Le(h,T),!0)}s&&l.stopPropagation(),l.metaKey&&q()&&((g=n.metaKeyEvents)===null||g===void 0||g.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&&!z.isOpening){let g=!0;if(u&&l.preventDefault(),!n.ignoreClickAfterPress&&!n.ignoreEmulatedMouseEvents&&!n.isPressed&&(n.pointerType==="virtual"||ce(l.nativeEvent))){!u&&!b&&j(l.currentTarget);let s=P(l,"virtual"),a=L(l,"virtual"),h=$(l,"virtual");g=s&&a&&h}n.ignoreEmulatedMouseEvents=!1,n.ignoreClickAfterPress=!1,g&&l.stopPropagation()}}},T=l=>{var g;if(n.isPressed&&n.target&&ie(l,n.target)){var s;Te(l.target,l.key)&&l.preventDefault();let h=l.target;$(K(n.target,l),"keyboard",n.target.contains(h)),N(),l.key!=="Enter"&&be(n.target)&&n.target.contains(h)&&!l[ke]&&(l[ke]=!0,z(n.target,l,!1)),n.isPressed=!1,(s=n.metaKeyEvents)===null||s===void 0||s.delete(l.key)}else if(l.key==="Meta"&&((g=n.metaKeyEvents)===null||g===void 0?void 0:g.size)){var a;let h=n.metaKeyEvents;n.metaKeyEvents=void 0;for(let A of h.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(ut(a.nativeEvent)){n.pointerType="virtual";return}ae(a.currentTarget)&&a.preventDefault(),n.pointerType=a.pointerType;let h=!0;n.isPressed||(n.isPressed=!0,n.isOverTarget=!0,n.activePointerId=a.pointerId,n.target=a.currentTarget,!u&&!b&&j(a.currentTarget),v||$e(n.target),h=P(a,n.pointerType),B(C(a.currentTarget),"pointermove",l,!1),B(C(a.currentTarget),"pointerup",g,!1),B(C(a.currentTarget),"pointercancel",s,!1)),h&&a.stopPropagation()},f.onMouseDown=a=>{!a.currentTarget.contains(a.target)||a.button===0&&(ae(a.currentTarget)&&a.preventDefault(),a.stopPropagation())},f.onPointerUp=a=>{!a.currentTarget.contains(a.target)||n.pointerType==="virtual"||a.button===0&&F(a,a.currentTarget)&&L(a,n.pointerType||a.pointerType)};let l=a=>{a.pointerId===n.activePointerId&&(n.target&&F(a,n.target)?!n.isOverTarget&&n.pointerType!=null&&(n.isOverTarget=!0,P(K(n.target,a),n.pointerType)):n.target&&n.isOverTarget&&n.pointerType!=null&&(n.isOverTarget=!1,$(K(n.target,a),n.pointerType,!1),M(a)))},g=a=>{a.pointerId===n.activePointerId&&n.isPressed&&a.button===0&&n.target&&(F(a,n.target)&&n.pointerType!=null?$(K(n.target,a),n.pointerType):n.isOverTarget&&n.pointerType!=null&&$(K(n.target,a),n.pointerType,!1),n.isPressed=!1,n.isOverTarget=!1,n.activePointerId=null,n.pointerType=null,N(),v||J(n.target))},s=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(ae(s.currentTarget)&&s.preventDefault(),n.ignoreEmulatedMouseEvents){s.stopPropagation();return}n.isPressed=!0,n.isOverTarget=!0,n.target=s.currentTarget,n.pointerType=ce(s.nativeEvent)?"virtual":"mouse",!u&&!b&&j(s.currentTarget),P(s,n.pointerType)&&s.stopPropagation(),B(C(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=P(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=$(s,n.pointerType,!1),M(s)),a&&s.stopPropagation()},f.onMouseUp=s=>{!s.currentTarget.contains(s.target)||!n.ignoreEmulatedMouseEvents&&s.button===0&&L(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?$(K(n.target,s),n.pointerType):n.target&&n.isOverTarget&&n.pointerType!=null&&$(K(n.target,s),n.pointerType,!1),n.isOverTarget=!1}};f.onTouchStart=s=>{if(!s.currentTarget.contains(s.target))return;let a=vt(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",!u&&!b&&j(s.currentTarget),v||$e(n.target),P(s,n.pointerType)&&s.stopPropagation(),B(R(s.currentTarget),"scroll",g,!0)},f.onTouchMove=s=>{if(!s.currentTarget.contains(s.target))return;if(!n.isPressed){s.stopPropagation();return}let a=we(s.nativeEvent,n.activePointerId),h=!0;a&&F(a,s.currentTarget)?!n.isOverTarget&&n.pointerType!=null&&(n.isOverTarget=!0,h=P(s,n.pointerType)):n.isOverTarget&&n.pointerType!=null&&(n.isOverTarget=!1,h=$(s,n.pointerType,!1),M(s)),h&&s.stopPropagation()},f.onTouchEnd=s=>{if(!s.currentTarget.contains(s.target))return;if(!n.isPressed){s.stopPropagation();return}let a=we(s.nativeEvent,n.activePointerId),h=!0;a&&F(a,s.currentTarget)&&n.pointerType!=null?(L(s,n.pointerType),h=$(s,n.pointerType)):n.isOverTarget&&n.pointerType!=null&&(h=$(s,n.pointerType,!1)),h&&s.stopPropagation(),n.isPressed=!1,n.activePointerId=null,n.isOverTarget=!1,n.ignoreEmulatedMouseEvents=!0,n.target&&!v&&J(n.target),N()},f.onTouchCancel=s=>{!s.currentTarget.contains(s.target)||(s.stopPropagation(),n.isPressed&&D(s))};let g=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},[B,u,b,N,v,D,M,$,P,L]);return k.useEffect(()=>()=>{var n;v||J((n=w.current.target)!==null&&n!==void 0?n:void 0)},[v]),{isPressed:p||m,pressProps:Y(x,se)}}function be(e){return e.tagName==="A"&&e.hasAttribute("href")}function ie(e,t){const{key:r,code:o}=e,i=t,d=i.getAttribute("role");return(r==="Enter"||r===" "||r==="Spacebar"||o==="Space")&&!(i instanceof R(i).HTMLInputElement&&!Fe(i,r)||i instanceof R(i).HTMLTextAreaElement||i.isContentEditable)&&!((d==="link"||!d&&be(i))&&r!=="Enter")}function vt(e){const{targetTouches:t}=e;return t.length>0?t[0]:null}function we(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 K(e,t){return{currentTarget:e,shiftKey:t.shiftKey,ctrlKey:t.ctrlKey,metaKey:t.metaKey,altKey:t.altKey}}function yt(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 ht(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=yt(e);return ht(r,o)}function ae(e){return!(e instanceof HTMLElement)||!e.hasAttribute("draggable")}function Te(e,t){return e instanceof HTMLInputElement?!Fe(e,t):e instanceof HTMLButtonElement?e.type!=="submit"&&e.type!=="reset":!be(e)}const Et=new Set(["checkbox","radio","range","color","file","image","button","submit","reset"]);function Fe(e,t){return e.type==="checkbox"||e.type==="radio"?t===" ":Et.has(e.type)}let $t=new Set,W=new Map,I=!1,pe=!1;function ge(e,t){for(let r of $t)r(e,t)}function kt(e){return!(e.metaKey||!q()&&e.altKey||e.ctrlKey||e.key==="Control"||e.key==="Shift"||e.key==="Meta")}function te(e){I=!0,kt(e)&&ge("keyboard",e)}function O(e){(e.type==="mousedown"||e.type==="pointerdown")&&(I=!0,ge("pointer",e))}function Ue(e){ce(e)&&(I=!0)}function He(e){e.target===window||e.target===document||(!I&&!pe&&ge("virtual",e),I=!1,pe=!1)}function Re(){I=!1,pe=!0}function Be(e){if(typeof window>"u"||W.get(R(e)))return;const t=R(e),r=C(e);let o=t.HTMLElement.prototype.focus;t.HTMLElement.prototype.focus=function(){I=!0,o.apply(this,arguments)},r.addEventListener("keydown",te,!0),r.addEventListener("keyup",te,!0),r.addEventListener("click",Ue,!0),t.addEventListener("focus",He,!0),t.addEventListener("blur",Re,!1),typeof PointerEvent<"u"?(r.addEventListener("pointerdown",O,!0),r.addEventListener("pointermove",O,!0),r.addEventListener("pointerup",O,!0)):(r.addEventListener("mousedown",O,!0),r.addEventListener("mousemove",O,!0),r.addEventListener("mouseup",O,!0)),t.addEventListener("beforeunload",()=>{Ge(e)},{once:!0}),W.set(t,{focus:o})}const Ge=(e,t)=>{const r=R(e),o=C(e);t&&o.removeEventListener("DOMContentLoaded",t),W.has(r)&&(r.HTMLElement.prototype.focus=W.get(r).focus,o.removeEventListener("keydown",te,!0),o.removeEventListener("keyup",te,!0),o.removeEventListener("click",Ue,!0),r.removeEventListener("focus",He,!0),r.removeEventListener("blur",Re,!1),typeof PointerEvent<"u"?(o.removeEventListener("pointerdown",O,!0),o.removeEventListener("pointermove",O,!0),o.removeEventListener("pointerup",O,!0)):(o.removeEventListener("mousedown",O,!0),o.removeEventListener("mousemove",O,!0),o.removeEventListener("mouseup",O,!0)),W.delete(r))};function wt(e){const t=C(e);let r;return t.readyState!=="loading"?Be(e):(r=()=>{Be(e)},t.addEventListener("DOMContentLoaded",r)),()=>Ge(e,r)}typeof document<"u"&&wt();let ne=!1,le=0;function fe(){ne=!0,setTimeout(()=>{ne=!1},50)}function Pe(e){e.pointerType==="touch"&&fe()}function Tt(){if(!(typeof document>"u"))return typeof PointerEvent<"u"?document.addEventListener("pointerup",Pe):document.addEventListener("touchend",fe),le++,()=>{le--,!(le>0)&&(typeof PointerEvent<"u"?document.removeEventListener("pointerup",Pe):document.removeEventListener("touchend",fe))}}function Bt(e){let{onHoverStart:t,onHoverChange:r,onHoverEnd:o,isDisabled:i}=e,[d,u]=k.useState(!1),p=k.useRef({isHovered:!1,ignoreEmulatedMouseEvents:!1,pointerType:"",target:null}).current;k.useEffect(Tt,[]);let{hoverProps:b,triggerHoverEnd:E}=k.useMemo(()=>{let v=(m,S)=>{if(p.pointerType=S,i||S==="touch"||p.isHovered||!m.currentTarget.contains(m.target))return;p.isHovered=!0;let w=m.currentTarget;p.target=w,t&&t({type:"hoverstart",target:w,pointerType:S}),r&&r(!0),u(!0)},_=(m,S)=>{if(p.pointerType="",p.target=null,S==="touch"||!p.isHovered)return;p.isHovered=!1;let w=m.currentTarget;o&&o({type:"hoverend",target:w,pointerType:S}),r&&r(!1),u(!1)},x={};return typeof PointerEvent<"u"?(x.onPointerEnter=m=>{ne&&m.pointerType==="mouse"||v(m,m.pointerType)},x.onPointerLeave=m=>{!i&&m.currentTarget.contains(m.target)&&_(m,m.pointerType)}):(x.onTouchStart=()=>{p.ignoreEmulatedMouseEvents=!0},x.onMouseEnter=m=>{!p.ignoreEmulatedMouseEvents&&!ne&&v(m,"mouse"),p.ignoreEmulatedMouseEvents=!1},x.onMouseLeave=m=>{!i&&m.currentTarget.contains(m.target)&&_(m,"mouse")}),{hoverProps:x,triggerHoverEnd:_}},[t,r,o,i,p]);return k.useEffect(()=>{i&&E({currentTarget:p.target},p.pointerType)},[i]),{hoverProps:b,isHovered:d}}function Pt(e,t){let{elementType:r="button",isDisabled:o,onPress:i,onPressStart:d,onPressEnd:u,onPressUp:p,onPressChange:b,preventFocusOnPress:E,allowFocusWhenDisabled:v,onClick:_,href:x,target:m,rel:S,type:w="button"}=e,B;r==="button"?B={type:w,disabled:o}:B={role:"button",tabIndex:o?void 0:0,href:r==="a"&&o?void 0:x,target:r==="a"?m:void 0,type:r==="input"?w:void 0,disabled:r==="input"?o:void 0,"aria-disabled":!o||r==="input"?void 0:o,rel:r==="a"?S:void 0};let{pressProps:N,isPressed:P}=gt({onPressStart:d,onPressEnd:u,onPressChange:b,onPress:i,onPressUp:p,isDisabled:o,preventFocusOnPress:E,ref:t}),{focusableProps:$}=Oe.useFocusable(e,t);v&&($.tabIndex=o?-1:$.tabIndex);let L=Y($,N,Qe(e,{labelable:!0}));return{isPressed:P,buttonProps:Y(B,L,{"aria-haspopup":e["aria-haspopup"],"aria-expanded":e["aria-expanded"],"aria-controls":e["aria-controls"],"aria-pressed":e["aria-pressed"],onClick:D=>{_&&(_(D),console.warn("onClick is deprecated, please use onPress"))}})}}function St(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function Se(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 xe(e){for(var t=1;t<arguments.length;t++){var r=arguments[t]!=null?arguments[t]:{};t%2?Se(Object(r),!0).forEach(function(o){St(e,o,r[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):Se(Object(r)).forEach(function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(r,o))})}return e}var xt=(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},oe=e=>t=>{var r=e.defaultClassName,o=xe(xe({},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 b=e.variantClassNames[i][p];b&&(r+=" "+b)}}for(var[E,v]of e.compoundVariants)xt(E,o,e.defaultVariants)&&(r+=" "+v);return r},Ot=oe({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"]]}),Nt=oe({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:[]}),Dt="_125pcxyv",Ct=oe({defaultClassName:"_125pcxyw",variantClassNames:{spinning:{true:"_125pcxyx",false:"_125pcxyy"}},defaultVariants:{spinning:!1},compoundVariants:[]}),Lt=oe({defaultClassName:"_125pcxys",variantClassNames:{spinning:{true:"_125pcxyt",false:"_125pcxyu"}},defaultVariants:{spinning:!1},compoundVariants:[]});function _t({as:e,onClick:t,onPress:r,children:o,className:i,isDisabled:d,disabled:u,href:p,icon:b,kind:E="default",spinning:v,spinningTitle:_,title:x,...m},S){var g;const w=e!=null?e:p?"a":"button",B={onPress:r!=null?r:t,isDisabled:(g=u!=null?u:d)!=null?g:v,...m},{"data-testid":N}=m,P=S||c.useRef(null),{buttonProps:$}=Pt(B,P),{hoverProps:L}=Bt({isDisabled:B.isDisabled}),{type:D,...M}=$,se={...Y(M,L),ref:P,title:x,className:p?Lt({spinning:v}):Nt({disabled:d||u,kind:E,spinning:v}),...p?{href:p}:{type:D}},{t:n}=c.useContext(V.I18nContext),f=b&&c.createElement(V.Icon,{className:Dt,icon:b,"aria-hidden":"true","data-testid":`${N}__${b}-icon`});let T;E==="default"||E==="icon"||E==="link"?T="dark":T="light";const l=v&&c.createElement(V.Spinner,{color:T,className:Ct({spinning:v}),title:_||n("design-system:button.spinningTitle"),"data-testid":`${N}__spinner`});return c.createElement(Oe.FocusRing,null,c.createElement("div",{className:V.cl(Ot({disabled:d||u,kind:E,spinning:v}),i)},c.createElement(w,{...se},f,o?c.createElement("span",null,o):"",l)))}const ve=c.forwardRef(_t);V.Metadata.set(ve,{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:[ve],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\u2019s 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:y.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:y.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:y.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:y.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:y.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:y.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:y.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:y.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:y.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:y.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:y.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:y.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:y.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:y.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:y.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:y.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:y.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:y.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:y.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:y.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:y.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:y.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
|
+
`}}}}},It={Buttons:Kt};exports.Button=ve;exports.MANIFEST=It;
|