@sps-woodland/focused-task 8.0.0-rc1

package/README.md

@@ -0,0 +1,3 @@
+## [@sps-woodland/focused-task](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/focused-task#readme)
+
+SPS Woodland Design System focused task component

package/lib/FocusedTask.examples.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifestEntry } from "@sps-woodland/core";
+export declare const FocusedTaskExamples: ComponentManifestEntry;

package/lib/focused-task/FocusedTask.css.d.ts

@@ -0,0 +1,14 @@
+import type { VariantDefinitions, BooleanRecipeVariant } from "@sps-woodland/core";
+interface FocusedTaskVariantDefinitions extends VariantDefinitions {
+    fullWidth: BooleanRecipeVariant;
+}
+export declare const focusedTask: string;
+export declare const body: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<FocusedTaskVariantDefinitions>;
+export declare const title: string;
+export declare const closeButtonBox: string;
+export declare const closeButtonIcon: string;
+export declare const underlay: string;
+export declare const listActionBarContainer: string;
+export declare const listActionBar: string;
+export declare const listActionBarActions: string;
+export {};

package/lib/focused-task/FocusedTask.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentProps, ChildrenFn } from "@sps-woodland/core";
+import type { AriaModalOverlayProps, AriaDialogProps, OverlayTriggerAria } from "react-aria";
+import type { OverlayTriggerState } from "react-stately";
+import * as React from "react";
+interface FocusedTaskFromHook {
+    state: OverlayTriggerState;
+    overlayProps: OverlayTriggerAria["overlayProps"];
+}
+declare type FocusedTaskContentRenderFn = (close: OverlayTriggerState["close"]) => React.ReactNode;
+declare type FocusedTaskProps = FocusedTaskFromHook & AriaModalOverlayProps & AriaDialogProps & {
+    onClose?: () => void;
+    fullWidth?: boolean;
+};
+declare function FocusedTaskInternal({ children, className, "data-testid": dataTestId, onBlur, onFocus, overlayProps, state, onClose, fullWidth, ...rest }: ComponentProps<FocusedTaskProps, HTMLDivElement> & ChildrenFn<FocusedTaskContentRenderFn>): React.ReactElement;
+export declare function FocusedTask(props: Parameters<typeof FocusedTaskInternal>[0]): React.ReactElement;
+export {};

package/lib/focused-task/useFocusedTask.d.ts

@@ -0,0 +1,16 @@
+import type { AriaButtonProps, OverlayTriggerAria } from "react-aria";
+import type { OverlayTriggerState, OverlayTriggerProps } from "react-stately";
+import type { RefObject } from "react";
+interface FocusedTaskPropsAndState {
+    triggerProps: Omit<AriaButtonProps, "onPress"> & {
+        onClick: ((e: any) => void) | undefined;
+        ref: RefObject<any | null>;
+    };
+    focusedTaskState: OverlayTriggerState;
+    focusedTaskProps: {
+        state: OverlayTriggerState;
+        overlayProps: OverlayTriggerAria["overlayProps"];
+    };
+}
+export declare function useFocusedTask(config?: OverlayTriggerProps): FocusedTaskPropsAndState;
+export {};

package/lib/focused-task-actions/FocusedTaskActions.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import type { ComponentProps } from "@sps-woodland/core";
+export declare function FocusedTaskActions({ children, className, ...rest }: ComponentProps<unknown, HTMLDivElement>): React.ReactElement;

package/lib/index.cjs.js

@@ -0,0 +1,78 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const E=require("@sps-woodland/core"),De=require("@sps-woodland/buttons"),f=require("react"),Ie=require("react-dom"),ce=require("@spscommerce/utils"),ye=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function Be(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 T=ye(f),h=Be(f),We=ye(Ie);function He(e,t,n){let[r,o]=f.useState(e||t),a=f.useRef(e!==void 0),i=a.current,l=e!==void 0,s=f.useRef(r);i!==l&&console.warn(`WARN: A component changed from ${i?"controlled":"uncontrolled"} to ${l?"controlled":"uncontrolled"}.`),a.current=l;let u=f.useCallback((c,...b)=>{let d=(m,...p)=>{n&&(Object.is(s.current,m)||n(m,...p)),l||(s.current=m)};typeof c=="function"?(console.warn("We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320"),o((p,..._)=>{let R=c(l?s.current:p,..._);return d(R,...b),l?p:R})):(l||o(c),d(c,...b))},[l,n]);return l?s.current=e:e=r,[e,u]}const Te={prefix:String(Math.round(Math.random()*1e10)),current:0,isSSR:!1},te=T.default.createContext(Te);let Ve=Boolean(typeof window<"u"&&window.document&&window.document.createElement),G=new WeakMap;function qe(e=!1){let t=f.useContext(te),n=f.useRef(null);if(n.current===null&&!e){var r,o;let a=(r=T.default.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED)===null||r===void 0||(o=r.ReactCurrentOwner)===null||o===void 0?void 0:o.current;if(a){let i=G.get(a);i==null?G.set(a,{id:t.current,state:a.memoizedState}):a.memoizedState!==i.state&&(t.current=i.id,G.delete(a))}n.current=++t.current}return n.current}function Ke(e){let t=f.useContext(te);t===Te&&!Ve&&console.warn("When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.");let n=qe(!!e);return e||`react-aria${t.prefix}-${n}`}function je(){return f.useContext(te).isSSR}function Ne(e){var t,n,r="";if(typeof e=="string"||typeof e=="number")r+=e;else if(typeof e=="object")if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=Ne(e[t]))&&(r&&(r+=" "),r+=n);else for(t in e)e[t]&&(r&&(r+=" "),r+=t);return r}function _e(){for(var e,t,n=0,r="";n<arguments.length;)(e=arguments[n++])&&(t=Ne(e))&&(r&&(r+=" "),r+=t);return r}const w=typeof window<"u"?T.default.useLayoutEffect:()=>{};function ze(e){let[t,n]=f.useState(e),r=f.useRef(t),o=f.useRef(null);r.current=t;let a=f.useRef(null);a.current=()=>{let l=o.current.next();if(l.done){o.current=null;return}t===l.value?a.current():n(l.value)},w(()=>{o.current&&a.current()});let i=f.useCallback(l=>{o.current=l(r.current),a.current()},[o,a]);return[t,i]}let H=new Map;function xe(e){let[t,n]=f.useState(e),r=f.useRef(null),o=Ke(t),a=f.useCallback(i=>{r.current=i},[]);return H.set(o,a),w(()=>{let i=o;return()=>{H.delete(i)}},[o]),f.useEffect(()=>{let i=r.current;i&&(r.current=null,n(i))}),o}function Ge(e,t){if(e===t)return e;let n=H.get(e);if(n)return n(t),t;let r=H.get(t);return r?(r(e),e):t}function Ye(e=[]){let t=xe(),[n,r]=ze(t),o=f.useCallback(()=>{r(function*(){yield t,yield document.getElementById(t)?t:void 0})},[t,r]);return w(o,[t,o,...e]),n}function V(...e){return(...t)=>{for(let n of e)typeof n=="function"&&n(...t)}}function Je(...e){let t={...e[0]};for(let n=1;n<e.length;n++){let r=e[n];for(let o in r){let a=t[o],i=r[o];typeof a=="function"&&typeof i=="function"&&o[0]==="o"&&o[1]==="n"&&o.charCodeAt(2)>=65&&o.charCodeAt(2)<=90?t[o]=V(a,i):(o==="className"||o==="UNSAFE_className")&&typeof a=="string"&&typeof i=="string"?t[o]=_e(a,i):o==="id"&&a&&i?t.id=Ge(a,i):t[o]=i!==void 0?i:a}}return t}const Ue=new Set(["id"]),Xe=new Set(["aria-label","aria-labelledby","aria-describedby","aria-details"]),Qe=/^(data-.*)$/;function Ze(e,t={}){let{labelable:n,propNames:r}=t,o={};for(const a in e)Object.prototype.hasOwnProperty.call(e,a)&&(Ue.has(a)||n&&Xe.has(a)||(r==null?void 0:r.has(a))||Qe.test(a))&&(o[a]=e[a]);return o}function de(e){if(et())e.focus({preventScroll:!0});else{let t=tt(e);e.focus(),nt(t)}}let D=null;function et(){if(D==null){D=!1;try{var e=document.createElement("div");e.focus({get preventScroll(){return D=!0,!0}})}catch{}}return D}function tt(e){for(var t=e.parentNode,n=[],r=document.scrollingElement||document.documentElement;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}let k=new Map,U=new Set;function fe(){if(typeof window>"u")return;let e=n=>{let r=k.get(n.target);r||(r=new Set,k.set(n.target,r),n.target.addEventListener("transitioncancel",t)),r.add(n.propertyName)},t=n=>{let r=k.get(n.target);if(!!r&&(r.delete(n.propertyName),r.size===0&&(n.target.removeEventListener("transitioncancel",t),k.delete(n.target)),k.size===0)){for(let o of U)o();U.clear()}};document.body.addEventListener("transitionrun",e),document.body.addEventListener("transitionend",t)}typeof document<"u"&&(document.readyState!=="loading"?fe():document.addEventListener("DOMContentLoaded",fe));function rt(e){requestAnimationFrame(()=>{k.size===0?e():U.add(e)})}function Se(e){for(pe(e)&&(e=e.parentElement);e&&!pe(e);)e=e.parentElement;return e||document.scrollingElement||document.documentElement}function pe(e){let t=window.getComputedStyle(e);return/(auto|scroll)/.test(t.overflow+t.overflowX+t.overflowY)}function ot(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 ne(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 Fe(){return ne(/^Mac/i)}function at(){return ne(/^iPhone/i)}function it(){return ne(/^iPad/i)||Fe()&&navigator.maxTouchPoints>1}function lt(){return at()||it()}function st(){return ot(/Android/i)}function ut(e){return e.mozInputSource===0&&e.isTrusted?!0:st()&&e.pointerType?e.type==="click"&&e.buttons===1:e.detail===0&&!e.pointerType}function X(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const ct=T.default.createContext(null);ct.displayName="PressResponderContext";class dt{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 ft(e){let t=f.useRef({isFocused:!1,onBlur:e,observer:null});return t.current.onBlur=e,w(()=>{const n=t.current;return()=>{n.observer&&(n.observer.disconnect(),n.observer=null)}},[]),f.useCallback(n=>{if(n.target instanceof HTMLButtonElement||n.target instanceof HTMLInputElement||n.target instanceof HTMLTextAreaElement||n.target instanceof HTMLSelectElement){t.current.isFocused=!0;let r=n.target,o=a=>{var i,l;t.current.isFocused=!1,r.disabled&&((l=(i=t.current).onBlur)===null||l===void 0||l.call(i,new dt("blur",a))),t.current.observer&&(t.current.observer.disconnect(),t.current.observer=null)};r.addEventListener("focusout",o,{once:!0}),t.current.observer=new MutationObserver(()=>{t.current.isFocused&&r.disabled&&(t.current.observer.disconnect(),r.dispatchEvent(new FocusEvent("blur")),r.dispatchEvent(new FocusEvent("focusout",{bubbles:!0})))}),t.current.observer.observe(r,{attributes:!0,attributeFilter:["disabled"]})}},[])}let A=null,pt=new Set,be=!1,P=!1,Q=!1;function re(e,t){for(let n of pt)n(e,t)}function bt(e){return!(e.metaKey||!Fe()&&e.altKey||e.ctrlKey||e.key==="Control"||e.key==="Shift"||e.key==="Meta")}function me(e){P=!0,bt(e)&&(A="keyboard",re("keyboard",e))}function C(e){A="pointer",(e.type==="mousedown"||e.type==="pointerdown")&&(P=!0,re("pointer",e))}function mt(e){ut(e)&&(P=!0,A="virtual")}function vt(e){e.target===window||e.target===document||(!P&&!Q&&(A="virtual",re("virtual",e)),P=!1,Q=!1)}function $t(){P=!1,Q=!0}function ve(){if(typeof window>"u"||be)return;let e=HTMLElement.prototype.focus;HTMLElement.prototype.focus=function(){P=!0,e.apply(this,arguments)},document.addEventListener("keydown",me,!0),document.addEventListener("keyup",me,!0),document.addEventListener("click",mt,!0),window.addEventListener("focus",vt,!0),window.addEventListener("blur",$t,!1),typeof PointerEvent<"u"?(document.addEventListener("pointerdown",C,!0),document.addEventListener("pointermove",C,!0),document.addEventListener("pointerup",C,!0)):(document.addEventListener("mousedown",C,!0),document.addEventListener("mousemove",C,!0),document.addEventListener("mouseup",C,!0)),be=!0}typeof document<"u"&&(document.readyState!=="loading"?ve():document.addEventListener("DOMContentLoaded",ve));function ht(){return A}function gt(e){let{isDisabled:t,onBlurWithin:n,onFocusWithin:r,onFocusWithinChange:o}=e,a=f.useRef({isFocusWithin:!1}),i=f.useCallback(u=>{a.current.isFocusWithin&&!u.currentTarget.contains(u.relatedTarget)&&(a.current.isFocusWithin=!1,n&&n(u),o&&o(!1))},[n,o,a]),l=ft(i),s=f.useCallback(u=>{!a.current.isFocusWithin&&document.activeElement===u.target&&(r&&r(u),o&&o(!0),a.current.isFocusWithin=!0,l(u))},[r,o,l]);return t?{focusWithinProps:{onFocus:null,onBlur:null}}:{focusWithinProps:{onFocus:s,onBlur:i}}}function Et(e){let{ref:t,onInteractOutside:n,isDisabled:r,onInteractOutsideStart:o}=e,i=f.useRef({isPointerDown:!1,ignoreEmulatedMouseEvents:!1,onInteractOutside:n,onInteractOutsideStart:o}).current;i.onInteractOutside=n,i.onInteractOutsideStart=o,f.useEffect(()=>{if(r)return;let l=s=>{I(s,t)&&i.onInteractOutside&&(i.onInteractOutsideStart&&i.onInteractOutsideStart(s),i.isPointerDown=!0)};if(typeof PointerEvent<"u"){let s=u=>{i.isPointerDown&&i.onInteractOutside&&I(u,t)&&i.onInteractOutside(u),i.isPointerDown=!1};return document.addEventListener("pointerdown",l,!0),document.addEventListener("pointerup",s,!0),()=>{document.removeEventListener("pointerdown",l,!0),document.removeEventListener("pointerup",s,!0)}}else{let s=c=>{i.ignoreEmulatedMouseEvents?i.ignoreEmulatedMouseEvents=!1:i.isPointerDown&&i.onInteractOutside&&I(c,t)&&i.onInteractOutside(c),i.isPointerDown=!1},u=c=>{i.ignoreEmulatedMouseEvents=!0,i.onInteractOutside&&i.isPointerDown&&I(c,t)&&i.onInteractOutside(c),i.isPointerDown=!1};return document.addEventListener("mousedown",l,!0),document.addEventListener("mouseup",s,!0),document.addEventListener("touchstart",l,!0),document.addEventListener("touchend",u,!0),()=>{document.removeEventListener("mousedown",l,!0),document.removeEventListener("mouseup",s,!0),document.removeEventListener("touchstart",l,!0),document.removeEventListener("touchend",u,!0)}}},[t,i,r])}function I(e,t){if(e.button>0)return!1;if(e.target){const n=e.target.ownerDocument;if(!n||!n.documentElement.contains(e.target)||e.target.closest("[data-react-aria-top-layer]"))return!1}return t.current&&!t.current.contains(e.target)}function Z(e){if(ht()==="virtual"){let t=document.activeElement;rt(()=>{document.activeElement===t&&document.contains(e)&&de(e)})}else de(e)}function wt(e){if(!(e instanceof HTMLElement)&&!(e instanceof SVGElement))return!1;let{display:t,visibility:n}=e.style,r=t!=="none"&&n!=="hidden"&&n!=="collapse";if(r){const{getComputedStyle:o}=e.ownerDocument.defaultView;let{display:a,visibility:i}=o(e);r=a!=="none"&&i!=="hidden"&&i!=="collapse"}return r}function yt(e,t){return!e.hasAttribute("hidden")&&(e.nodeName==="DETAILS"&&t&&t.nodeName!=="SUMMARY"?e.hasAttribute("open"):!0)}function Pe(e,t){return e.nodeName!=="#comment"&&wt(e)&&yt(e,t)&&(!e.parentElement||Pe(e.parentElement,e))}const $e=T.default.createContext(null);let v=null;function Tt(e){let{children:t,contain:n,restoreFocus:r,autoFocus:o}=e,a=f.useRef(),i=f.useRef(),l=f.useRef([]),{parentNode:s}=f.useContext($e)||{},u=f.useMemo(()=>new ee({scopeRef:l}),[l]);w(()=>{let d=s||$.root;if($.getTreeNode(d.scopeRef)&&v&&!K(v,d.scopeRef)){let m=$.getTreeNode(v);m&&(d=m)}d.addChild(u),$.addNode(u)},[u,s]),w(()=>{let d=$.getTreeNode(l);d.contain=n},[n]),w(()=>{let d=a.current.nextSibling,m=[];for(;d&&d!==i.current;)m.push(d),d=d.nextSibling;l.current=m},[t]),kt(l,r,n),Ft(l,n),Ot(l,r,n),Ct(l,o),f.useEffect(()=>{if(l){let d=document.activeElement,m=null;if(g(d,l.current)){for(let p of $.traverse())g(d,p.scopeRef.current)&&(m=p);m===$.getTreeNode(l)&&(v=m.scopeRef)}return()=>{let p=$.getTreeNode(l).parent.scopeRef;(l===v||K(l,v))&&(!p||$.getTreeNode(p))&&(v=p),$.removeTreeNode(l)}}},[l]);let c=f.useMemo(()=>Nt(l),[]),b=f.useMemo(()=>({focusManager:c,parentNode:u}),[u,c]);return T.default.createElement($e.Provider,{value:b},T.default.createElement("span",{"data-focus-scope-start":!0,hidden:!0,ref:a}),t,T.default.createElement("span",{"data-focus-scope-end":!0,hidden:!0,ref:i}))}function Nt(e){return{focusNext(t={}){let n=e.current,{from:r,tabbable:o,wrap:a,accept:i}=t,l=r||document.activeElement,s=n[0].previousElementSibling,u=S(F(n),{tabbable:o,accept:i},n);u.currentNode=g(l,n)?l:s;let c=u.nextNode();return!c&&a&&(u.currentNode=s,c=u.nextNode()),c&&x(c,!0),c},focusPrevious(t={}){let n=e.current,{from:r,tabbable:o,wrap:a,accept:i}=t,l=r||document.activeElement,s=n[n.length-1].nextElementSibling,u=S(F(n),{tabbable:o,accept:i},n);u.currentNode=g(l,n)?l:s;let c=u.previousNode();return!c&&a&&(u.currentNode=s,c=u.previousNode()),c&&x(c,!0),c},focusFirst(t={}){let n=e.current,{tabbable:r,accept:o}=t,a=S(F(n),{tabbable:r,accept:o},n);a.currentNode=n[0].previousElementSibling;let i=a.nextNode();return i&&x(i,!0),i},focusLast(t={}){let n=e.current,{tabbable:r,accept:o}=t,a=S(F(n),{tabbable:r,accept:o},n);a.currentNode=n[n.length-1].nextElementSibling;let i=a.previousNode();return i&&x(i,!0),i}}}const oe=["input:not([disabled]):not([type=hidden])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","a[href]","area[href]","summary","iframe","object","embed","audio[controls]","video[controls]","[contenteditable]"],xt=oe.join(":not([hidden]),")+",[tabindex]:not([disabled]):not([hidden])";oe.push('[tabindex]:not([tabindex="-1"]):not([disabled])');const St=oe.join(':not([hidden]):not([tabindex="-1"]),');function F(e){return e[0].parentElement}function B(e){let t=$.getTreeNode(v);for(;t&&t.scopeRef!==e;){if(t.contain)return!1;t=t.parent}return!0}function Ft(e,t){let n=f.useRef(),r=f.useRef(null);w(()=>{let o=e.current;if(!t){r.current&&(cancelAnimationFrame(r.current),r.current=null);return}let a=s=>{if(s.key!=="Tab"||s.altKey||s.ctrlKey||s.metaKey||!B(e))return;let u=document.activeElement,c=e.current;if(!g(u,c))return;let b=S(F(c),{tabbable:!0},c);b.currentNode=u;let d=s.shiftKey?b.previousNode():b.nextNode();d||(b.currentNode=s.shiftKey?c[c.length-1].nextElementSibling:c[0].previousElementSibling,d=s.shiftKey?b.previousNode():b.nextNode()),s.preventDefault(),d&&x(d,!0)},i=s=>{(!v||K(v,e))&&g(s.target,e.current)?(v=e,n.current=s.target):B(e)&&!q(s.target,e)?n.current?n.current.focus():v&&j(v.current):B(e)&&(n.current=s.target)},l=s=>{r.current&&cancelAnimationFrame(r.current),r.current=requestAnimationFrame(()=>{B(e)&&!q(document.activeElement,e)&&(v=e,document.body.contains(s.target)?(n.current=s.target,n.current.focus()):v&&j(v.current))})};return document.addEventListener("keydown",a,!1),document.addEventListener("focusin",i,!1),o.forEach(s=>s.addEventListener("focusin",i,!1)),o.forEach(s=>s.addEventListener("focusout",l,!1)),()=>{document.removeEventListener("keydown",a,!1),document.removeEventListener("focusin",i,!1),o.forEach(s=>s.removeEventListener("focusin",i,!1)),o.forEach(s=>s.removeEventListener("focusout",l,!1))}},[e,t]),f.useEffect(()=>()=>{r.current&&cancelAnimationFrame(r.current)},[r])}function Ce(e){return q(e)}function g(e,t){return t.some(n=>n.contains(e))}function q(e,t=null){if(e instanceof Element&&e.closest("[data-react-aria-top-layer]"))return!0;for(let{scopeRef:n}of $.traverse($.getTreeNode(t)))if(g(e,n.current))return!0;return!1}function Pt(e){return q(e,v)}function K(e,t){var n;let r=(n=$.getTreeNode(t))===null||n===void 0?void 0:n.parent;for(;r;){if(r.scopeRef===e)return!0;r=r.parent}return!1}function x(e,t=!1){if(e!=null&&!t)try{Z(e)}catch{}else if(e!=null)try{e.focus()}catch{}}function j(e,t=!0){let n=e[0].previousElementSibling,r=S(F(e),{tabbable:t},e);r.currentNode=n;let o=r.nextNode();t&&!o&&(r=S(F(e),{tabbable:!1},e),r.currentNode=n,o=r.nextNode()),x(o)}function Ct(e,t){const n=T.default.useRef(t);f.useEffect(()=>{n.current&&(v=e,g(document.activeElement,v.current)||j(e.current)),n.current=!1},[e])}function kt(e,t,n){w(()=>{if(t||n)return;let r=e.current,o=a=>{let i=a.target;g(i,e.current)?v=e:Ce(i)||(v=null)};return document.addEventListener("focusin",o,!1),r.forEach(a=>a.addEventListener("focusin",o,!1)),()=>{document.removeEventListener("focusin",o,!1),r.forEach(a=>a.removeEventListener("focusin",o,!1))}},[e,t,n])}function Lt(e){let t=$.getTreeNode(v);for(;t&&t.scopeRef!==e;){if(t.nodeToRestore)return!1;t=t.parent}return(t==null?void 0:t.scopeRef)===e}function Ot(e,t,n){const r=f.useRef(typeof document<"u"?document.activeElement:null);w(()=>{let o=e.current;if(!t||n)return;let a=()=>{(!v||K(v,e))&&(v=e)};return document.addEventListener("focusin",a,!1),o.forEach(i=>i.addEventListener("focusin",a,!1)),()=>{document.removeEventListener("focusin",a,!1),o.forEach(i=>i.removeEventListener("focusin",a,!1))}},[e,n]),w(()=>{if(!t)return;$.getTreeNode(e).nodeToRestore=r.current;let o=a=>{if(a.key!=="Tab"||a.altKey||a.ctrlKey||a.metaKey)return;let i=document.activeElement;if(!g(i,e.current))return;let l=$.getTreeNode(e).nodeToRestore,s=S(document.body,{tabbable:!0});s.currentNode=i;let u=a.shiftKey?s.previousNode():s.nextNode();if((!document.body.contains(l)||l===document.body)&&(l=null,$.getTreeNode(e).nodeToRestore=null),(!u||!g(u,e.current))&&l){s.currentNode=l;do u=a.shiftKey?s.previousNode():s.nextNode();while(g(u,e.current));a.preventDefault(),a.stopPropagation(),u?x(u,!0):Ce(l)?x(l,!0):i.blur()}};return n||document.addEventListener("keydown",o,!0),()=>{n||document.removeEventListener("keydown",o,!0);let a=$.getTreeNode(e).nodeToRestore;if(t&&a&&(g(document.activeElement,e.current)||document.activeElement===document.body&&Lt(e))){let i=$.clone();requestAnimationFrame(()=>{if(document.activeElement===document.body){let l=i.getTreeNode(e);for(;l;){if(l.nodeToRestore&&document.body.contains(l.nodeToRestore)){x(l.nodeToRestore);return}l=l.parent}for(l=i.getTreeNode(e);l;){if(l.scopeRef&&$.getTreeNode(l.scopeRef)){j(l.scopeRef.current,!0);return}l=l.parent}}})}}},[e,t,n])}function S(e,t,n){let r=t!=null&&t.tabbable?St:xt,o=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode(a){var i;return!(t==null||(i=t.from)===null||i===void 0)&&i.contains(a)?NodeFilter.FILTER_REJECT:a.matches(r)&&Pe(a)&&(!n||g(a,n))&&(!(t!=null&&t.accept)||t.accept(a))?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP}});return t!=null&&t.from&&(o.currentNode=t.from),o}class ae{get size(){return this.fastMap.size}getTreeNode(t){return this.fastMap.get(t)}addTreeNode(t,n,r){let o=this.fastMap.get(n!=null?n:null),a=new ee({scopeRef:t});o.addChild(a),a.parent=o,this.fastMap.set(t,a),r&&(a.nodeToRestore=r)}addNode(t){this.fastMap.set(t.scopeRef,t)}removeTreeNode(t){if(t===null)return;let n=this.fastMap.get(t),r=n.parent;for(let a of this.traverse())a!==n&&n.nodeToRestore&&a.nodeToRestore&&n.scopeRef.current&&g(a.nodeToRestore,n.scopeRef.current)&&(a.nodeToRestore=n.nodeToRestore);let o=n.children;r.removeChild(n),o.size>0&&o.forEach(a=>r.addChild(a)),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(){let t=new ae;for(let n of this.traverse())t.addTreeNode(n.scopeRef,n.parent.scopeRef,n.nodeToRestore);return t}constructor(){X(this,"fastMap",new Map),this.root=new ee({scopeRef:null}),this.fastMap.set(null,this.root)}}class ee{addChild(t){this.children.add(t),t.parent=this}removeChild(t){this.children.delete(t),t.parent=void 0}constructor(t){X(this,"children",new Set),X(this,"contain",!1),this.scopeRef=t.scopeRef}}let $=new ae;const Mt=new WeakMap,N=[];function At(e,t){let{onClose:n,shouldCloseOnBlur:r,isOpen:o,isDismissable:a=!1,isKeyboardDismissDisabled:i=!1,shouldCloseOnInteractOutside:l}=e;f.useEffect(()=>(o&&N.push(t),()=>{let p=N.indexOf(t);p>=0&&N.splice(p,1)}),[o,t]);let s=()=>{N[N.length-1]===t&&n&&n()},u=p=>{(!l||l(p.target))&&N[N.length-1]===t&&(p.stopPropagation(),p.preventDefault())},c=p=>{(!l||l(p.target))&&(N[N.length-1]===t&&(p.stopPropagation(),p.preventDefault()),s())},b=p=>{p.key==="Escape"&&!i&&(p.stopPropagation(),p.preventDefault(),s())};Et({ref:t,onInteractOutside:a?c:null,onInteractOutsideStart:u});let{focusWithinProps:d}=gt({isDisabled:!r,onBlurWithin:p=>{p.relatedTarget&&Pt(p.relatedTarget)||(!l||l(p.relatedTarget))&&n()}}),m=p=>{p.target===p.currentTarget&&p.preventDefault()};return{overlayProps:{onKeyDown:b,...d},underlayProps:{onPointerDown:m}}}function Rt(e,t,n){let{type:r}=e,{isOpen:o}=t;f.useEffect(()=>{n&&n.current&&Mt.set(n.current,t.close)});let a;r==="menu"?a=!0:r==="listbox"&&(a="listbox");let i=xe();return{triggerProps:{"aria-haspopup":a,"aria-expanded":o,"aria-controls":o?i:null,onPress:t.toggle},overlayProps:{id:i}}}const Y=typeof window<"u"&&window.visualViewport,Dt=new Set(["checkbox","radio","range","color","file","image","button","submit","reset"]);let W=0,J;function It(e={}){let{isDisabled:t}=e;w(()=>{if(!t)return W++,W===1&&(lt()?J=Wt():J=Bt()),()=>{W--,W===0&&J()}},[t])}function Bt(){return V(M(document.documentElement,"paddingRight",`${window.innerWidth-document.documentElement.clientWidth}px`),M(document.documentElement,"overflow","hidden"))}function Wt(){let e,t=0,n=b=>{e=Se(b.target),!(e===document.documentElement&&e===document.body)&&(t=b.changedTouches[0].pageY)},r=b=>{if(e===document.documentElement||e===document.body){b.preventDefault();return}let d=b.changedTouches[0].pageY,m=e.scrollTop,p=e.scrollHeight-e.clientHeight;(m<=0&&d>t||m>=p&&d<t)&&b.preventDefault(),t=d},o=b=>{let d=b.target;ge(d)&&d!==document.activeElement&&(b.preventDefault(),d.style.transform="translateY(-2000px)",d.focus(),requestAnimationFrame(()=>{d.style.transform=""}))},a=b=>{let d=b.target;ge(d)&&(d.style.transform="translateY(-2000px)",requestAnimationFrame(()=>{d.style.transform="",Y&&(Y.height<window.innerHeight?requestAnimationFrame(()=>{he(d)}):Y.addEventListener("resize",()=>he(d),{once:!0}))}))},i=()=>{window.scrollTo(0,0)},l=window.pageXOffset,s=window.pageYOffset,u=V(M(document.documentElement,"paddingRight",`${window.innerWidth-document.documentElement.clientWidth}px`),M(document.documentElement,"overflow","hidden"),M(document.body,"marginTop",`-${s}px`));window.scrollTo(0,0);let c=V(L(document,"touchstart",n,{passive:!1,capture:!0}),L(document,"touchmove",r,{passive:!1,capture:!0}),L(document,"touchend",o,{passive:!1,capture:!0}),L(document,"focus",a,!0),L(window,"scroll",i));return()=>{u(),c(),window.scrollTo(l,s)}}function M(e,t,n){let r=e.style[t];return e.style[t]=n,()=>{e.style[t]=r}}function L(e,t,n,r){return e.addEventListener(t,n,r),()=>{e.removeEventListener(t,n,r)}}function he(e){let t=document.scrollingElement||document.documentElement;for(;e&&e!==t;){let n=Se(e);if(n!==document.documentElement&&n!==document.body&&n!==e){let r=n.getBoundingClientRect().top,o=e.getBoundingClientRect().top;o>r+e.clientHeight&&(n.scrollTop+=o-r)}e=n.parentElement}}function ge(e){return e instanceof HTMLInputElement&&!Dt.has(e.type)||e instanceof HTMLTextAreaElement||e instanceof HTMLElement&&e.isContentEditable}let O=new WeakMap,y=[];function Ht(e,t=document.body){let n=new Set(e),r=new Set,o=s=>{for(let d of s.querySelectorAll("[data-live-announcer], [data-react-aria-top-layer]"))n.add(d);let u=d=>{if(n.has(d)||r.has(d.parentElement)&&d.parentElement.getAttribute("role")!=="row")return NodeFilter.FILTER_REJECT;for(let m of n)if(d.contains(m))return NodeFilter.FILTER_SKIP;return NodeFilter.FILTER_ACCEPT},c=document.createTreeWalker(s,NodeFilter.SHOW_ELEMENT,{acceptNode:u}),b=u(s);if(b===NodeFilter.FILTER_ACCEPT&&a(s),b!==NodeFilter.FILTER_REJECT){let d=c.nextNode();for(;d!=null;)a(d),d=c.nextNode()}},a=s=>{var u;let c=(u=O.get(s))!==null&&u!==void 0?u:0;s.getAttribute("aria-hidden")==="true"&&c===0||(c===0&&s.setAttribute("aria-hidden","true"),r.add(s),O.set(s,c+1))};y.length&&y[y.length-1].disconnect(),o(t);let i=new MutationObserver(s=>{for(let u of s)if(!(u.type!=="childList"||u.addedNodes.length===0)&&![...n,...r].some(c=>c.contains(u.target))){for(let c of u.removedNodes)c instanceof Element&&(n.delete(c),r.delete(c));for(let c of u.addedNodes)(c instanceof HTMLElement||c instanceof SVGElement)&&(c.dataset.liveAnnouncer==="true"||c.dataset.reactAriaTopLayer==="true")?n.add(c):c instanceof Element&&o(c)}});i.observe(t,{childList:!0,subtree:!0});let l={observe(){i.observe(t,{childList:!0,subtree:!0})},disconnect(){i.disconnect()}};return y.push(l),()=>{i.disconnect();for(let s of r){let u=O.get(s);u===1?(s.removeAttribute("aria-hidden"),O.delete(s)):O.set(s,u-1)}l===y[y.length-1]?(y.pop(),y.length&&y[y.length-1].observe()):y.splice(y.indexOf(l),1)}}const ke=T.default.createContext(null);function Vt(e){let t=je(),{portalContainer:n=t?null:document.body}=e,[r,o]=f.useState(!1),a=f.useMemo(()=>({contain:r,setContain:o}),[r,o]);if(!n)return null;let i=T.default.createElement(ke.Provider,{value:a},T.default.createElement(Tt,{restoreFocus:!0,contain:r},e.children));return We.default.createPortal(i,n)}function Le(){let e=f.useContext(ke),t=e==null?void 0:e.setContain;w(()=>{t==null||t(!0)},[t])}function qt(e,t,n){let{overlayProps:r,underlayProps:o}=At({...e,isOpen:t.isOpen,onClose:t.close},n);return It({isDisabled:!t.isOpen}),Le(),f.useEffect(()=>{if(t.isOpen)return Ht([n.current])},[t.isOpen,n]),{modalProps:Je(r),underlayProps:o}}function Kt(e,t){let{role:n="dialog"}=e,r=Ye();r=e["aria-label"]?void 0:r;let o=f.useRef(!1);return f.useEffect(()=>{if(t.current&&!t.current.contains(document.activeElement)){Z(t.current);let a=setTimeout(()=>{document.activeElement===t.current&&(o.current=!0,t.current.blur(),Z(t.current),o.current=!1)},500);return()=>{clearTimeout(a)}}},[t]),Le(),{dialogProps:{...Ze(e,{labelable:!0}),role:n,tabIndex:-1,"aria-labelledby":e["aria-labelledby"]||r,onBlur:a=>{o.current&&a.stopPropagation()}},titleProps:{id:r}}}function jt(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Ee(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})),n.push.apply(n,r)}return n}function we(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]!=null?arguments[t]:{};t%2?Ee(Object(n),!0).forEach(function(r){jt(e,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Ee(Object(n)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})}return e}var _t=(e,t,n)=>{for(var r of Object.keys(e)){var o;if(e[r]!==((o=t[r])!==null&&o!==void 0?o:n[r]))return!1}return!0},zt=e=>t=>{var n=e.defaultClassName,r=we(we({},e.defaultVariants),t);for(var o in r){var a,i=(a=r[o])!==null&&a!==void 0?a:e.defaultVariants[o];if(i!=null){var l=i;typeof l=="boolean"&&(l=l===!0?"true":"false");var s=e.variantClassNames[o][l];s&&(n+=" "+s)}}for(var[u,c]of e.compoundVariants)_t(u,r,e.defaultVariants)&&(n+=" "+c);return n},Gt=zt({defaultClassName:"_1io4psq1",variantClassNames:{fullWidth:{true:"_1io4psq2",false:"_1io4psq3"}},defaultVariants:{},compoundVariants:[]}),Yt="_1io4psq5",Jt="_1io4psq6",Ut="_1io4psq0",Xt="_1io4psq9",Qt="_1io4psqa",Zt="_1io4psq8",en="_1io4psq4",tn="_1io4psq7";function ie({children:e,className:t="",...n}){return h.createElement("div",{className:E.cl(Zt,t),...n},h.createElement("div",{className:E.cl(Xt)},h.createElement("div",{className:E.cl(Qt)},e)))}E.Metadata.set(ie,{name:"FocusedTaskActions"});function nn({children:e,className:t,"data-testid":n,onBlur:r,onFocus:o,overlayProps:a,state:i,onClose:l,fullWidth:s=!1,...u}){const c=h.useRef(null),{modalProps:b,underlayProps:d}=qt({...u},i,c),{dialogProps:m,titleProps:p}=Kt(u,c),_=E.combineEventHandlers(b.onFocus,m.onFocus,o),R=E.combineEventHandlers(b.onBlur,m.onBlur,r),Oe=E.useChildTestIdAttrBuilder({"data-testid":n}),[z,Me]=E.selectChildren(e,[{type:ie}]);function Ae(){l&&typeof l=="function"&&l(),i.close()}const se=function(){return h.createElement(De.Button,{"aria-label":"Close",onClick:Ae,kind:"icon",icon:"x",className:Yt})},Re=E.modChildren(Me,ue=>ue.type===se?[{className:E.cl(ue.props.classname,Jt)}]:[]);return h.createElement(Vt,null,h.createElement("div",{className:tn,...d,...u},h.createElement("div",{...b,...m,...a,onFocus:_,onBlur:R,...Oe("dialog"),ref:c,className:E.cl(Ut,t)},h.createElement("div",{...p,className:en},h.createElement(se,null)),h.createElement("div",{className:Gt({fullWidth:s})},E.contentOf(Re,i.close)),z&&z.length>0&&h.createElement(h.Fragment,null,E.contentOf(z,i.close)))))}function le(e){return e.state.isOpen?h.createElement(nn,{...e},e.children):h.createElement(h.Fragment,null)}E.Metadata.set(le,{name:"FocusedTask",props:{fullWidth:{type:"boolean",default:"false"},onBlur:{type:"() => void"},onClose:{type:"() => void"},onFocus:{type:"() => void"}}});function rn(e){let[t,n]=He(e.isOpen,e.defaultOpen||!1,e.onOpenChange);return{isOpen:t,setOpen:n,open(){n(!0)},close(){n(!1)},toggle(){n(!t)}}}function on(e={}){const t=rn(e),n=f.useRef(null),{triggerProps:r,overlayProps:o}=Rt({type:"dialog"},t,n),{onPress:a,...i}=r;return{triggerProps:{...i,onClick:a,ref:n},focusedTaskState:t,focusedTaskProps:{overlayProps:o,state:t}}}const an={components:[le],examples:{standard:{label:"Standard",examples:{basic:{react:ce.code`
+          import { FocusedTask, FocusedTaskActions } from "@sps-woodland/focused-task";
+          import { Button } from "@sps-woodland/buttons";
+          import { Card } from "@sps-woodland/cards";
+          import { grid } from "@sps-woodland/tokens";
+
+            function Component() {
+
+              const { focusedTaskProps, triggerProps, focusedTaskState } = useFocusedTask();
+              function onSubmit() {
+                console.info("Submit");
+                focusedTaskState.close();
+              }
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Open Focused Task</Button>
+                  <FocusedTask 
+                    {...focusedTaskProps}
+                    >
+                    <h2>Focused Task</h2>
+                    <div className={grid.root}>
+                      <div className={grid[3]}></div>
+                      <div className={grid[6]}>
+                        <Card>
+                          <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                          </p>
+                        </Card>
+                      </div>
+                      <div className="sfg-col-3"></div>
+                    </div>
+                    <FocusedTaskActions>
+                      <Button kind="confirm" onClick={onSubmit}>Submit</Button>
+                    </FocusedTaskActions>
+                  </FocusedTask>
+                </>
+              )
+            }
+        `}}},fullWidth:{label:"Fill Width",examples:{basic:{react:ce.code`
+          import { FocusedTask, FocusedTaskActions } from "@sps-woodland/focused-task";
+          import { Button } from "@sps-woodland/buttons";
+          import { Card } from "@sps-woodland/cards";
+          import { grid } from "@sps-woodland/tokens";
+
+            function Component() {
+
+              const { focusedTaskProps, triggerProps, focusedTaskState } = useFocusedTask();
+              function onSubmit() {
+                console.info("Submit");
+                focusedTaskState.close();
+              }
+              return (
+                <>
+                  <Button kind="default" {...triggerProps}>Open Focused Task</Button>
+                  <FocusedTask 
+                    {...focusedTaskProps}
+                    fullWidth
+                    >
+                    <h2>Focused Task</h2>
+                    <div className={grid.root}>
+                      <div className={grid[3]}></div>
+                      <div className={grid[6]}>
+                        <Card>
+                          <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                          </p>
+                        </Card>
+                      </div>
+                      <div className="sfg-col-3"></div>
+                    </div>
+                    <FocusedTaskActions>
+                      <Button kind="confirm" onClick={onSubmit}>Submit</Button>
+                    </FocusedTaskActions>
+                  </FocusedTask>
+                </>
+              )
+            }
+        `}}}}},ln={"Focused Task":an};exports.FocusedTask=le;exports.FocusedTaskActions=ie;exports.MANIFEST=ln;exports.useFocusedTask=on;

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./focused-task/FocusedTask";
+export * from "./focused-task-actions/FocusedTaskActions";
+export * from "./focused-task/useFocusedTask";
+export * from "./manifest";