@atom-learning/components 1.23.0 → 1.24.2

package/CHANGELOG.md

@@ -1,14 +1,9 @@
-# [1.23.0](https://github.com/Atom-Learning/components/compare/v1.22.2...v1.23.0) (2022-08-12)
+## [1.24.2](https://github.com/Atom-Learning/components/compare/v1.24.1...v1.24.2) (2022-09-06)
 
 
 ### Bug Fixes
 
-* replacing disabled buttons with divs ([df506f8](https://github.com/Atom-Learning/components/commit/df506f8f7a5816bdce6e633f8a20efd6525da37a))
-
-
-### Features
-
-* calendar year picker ([d4dfc32](https://github.com/Atom-Learning/components/commit/d4dfc3282dc4cd584b69013a9c9c64615d33ab2a))
+* add checkbox indeterminate state example ([a40eeab](https://github.com/Atom-Learning/components/commit/a40eeab88752e4a3bb0bb01f0244c2474b11fed2))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/alert-dialog/alert-context/AlertContext.js

@@ -1 +1 @@
-import*as e from"react";import{useIsMountedRef as s}from"../../../utilities/use-is-mounted-ref/index.js";import{Alert as u}from"./AlertDialog.js";import{reducer as a,initialState as d}from"./reducer.js";const n=e.createContext({showAlert:()=>null}),c=({children:r})=>{const[t,o]=e.useReducer(a,d),l=s();return e.createElement(n.Provider,{value:{showAlert:i=>o({payload:i,type:"ADD"})}},Boolean(t.length)&&e.createElement(u,{...t[0],key:t[0].id,onClose:()=>{l.current&&o({payload:t[0].id,type:"REMOVE"})}}),r)},m=()=>{const r=e.useContext(n);if(r===void 0)throw new Error("useAlert must be used within a AlertProvider");return r};export{c as AlertProvider,m as useAlert};
+import*as e from"react";import{useIsMountedRef as s}from"../../../utilities/hooks/useIsMountedRef.js";import{Alert as u}from"./AlertDialog.js";import{reducer as a,initialState as d}from"./reducer.js";const n=e.createContext({showAlert:()=>null}),c=({children:r})=>{const[t,o]=e.useReducer(a,d),l=s();return e.createElement(n.Provider,{value:{showAlert:i=>o({payload:i,type:"ADD"})}},Boolean(t.length)&&e.createElement(u,{...t[0],key:t[0].id,onClose:()=>{l.current&&o({payload:t[0].id,type:"REMOVE"})}}),r)},m=()=>{const r=e.useContext(n);if(r===void 0)throw new Error("useAlert must be used within a AlertProvider");return r};export{c as AlertProvider,m as useAlert};

package/dist/components/search-input/SearchInput.js

@@ -1 +1 @@
-import{Search as R,Close as b}from"@atom-learning/icons";import*as t from"react";import{ActionIcon as g}from"../action-icon/ActionIcon.js";import{Box as v}from"../box/Box.js";import{Icon as i}from"../icon/Icon.js";import{Input as d}from"../input/Input.js";import{styled as l}from"../../stitches.js";var z=(e=>(e.SEARCH="SEARCH",e.CLEAR="CLEAR",e))(z||{});const f=l(i,{color:"$tonal300",position:"absolute",pointerEvents:"none",variants:{size:{sm:{top:"$2",right:"$2",size:"$1"},md:{top:10,right:10,size:20}}}}),H=l(d,{'&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, & input[type="search"]::-webkit-search-results-decoration':{display:"none"}}),c=({size:e="md",css:m,value:s,clearText:p="Clear",onChange:r,...u})=>{const[E,a]=t.useState(s||""),[C,n]=t.useState(s?"CLEAR":"SEARCH"),h=()=>{a(""),n("SEARCH"),r==null||r({currentTarget:{value:""},target:{value:""}})},S=o=>{a(o.target.value),n(o.target.value?"CLEAR":"SEARCH"),r==null||r(o)},A=()=>C==="SEARCH"?t.createElement(f,{is:R,size:e,css:{size:e=="sm"?"$1":20}}):t.createElement(g,{label:p,theme:"neutral",size:e=="sm"?"md":"lg",css:{position:"absolute",top:0,right:0},onClick:h},t.createElement(i,{is:b}));return t.createElement(v,{css:{position:"relative",...m}},t.createElement(H,{size:e,type:"search",...u,value:E,onChange:S,css:{pr:e==="sm"?"$5":"$6"}}),A())};c.displayName="SearchInput";export{c as SearchInput};
+import{Search as w,Close as z}from"@atom-learning/icons";import*as t from"react";import{ActionIcon as y}from"../action-icon/ActionIcon.js";import{Box as I}from"../box/Box.js";import{Icon as l}from"../icon/Icon.js";import{Input as $}from"../input/Input.js";import{styled as c}from"../../stitches.js";import{useCallbackRef as k}from"../../utilities/hooks/useCallbackRef.js";var H=(e=>(e.SEARCH="SEARCH",e.CLEAR="CLEAR",e))(H||{});const L=c(l,{color:"$tonal300",position:"absolute",pointerEvents:"none",variants:{size:{sm:{top:"$2",right:"$2",size:"$1"},md:{top:10,right:10,size:20}}}}),x=c($,{'&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, & input[type="search"]::-webkit-search-results-decoration':{display:"none"}}),p=({size:e="md",css:m,value:n,clearText:u="Clear",onChange:a,...E})=>{const[h,C]=k(),[b,v]=t.useState(n||""),[d,f]=t.useState(n?"CLEAR":"SEARCH"),A=()=>{var r,i;const o=h.current;if(!o)return;const s=(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:r.set;(i=s==null?void 0:s.call)==null||i.call(s,o,"");const R=new Event("input",{bubbles:!0});o.dispatchEvent(R),o.focus()},S=r=>{v(r.target.value),f(r.target.value?"CLEAR":"SEARCH"),a==null||a(r)},g=()=>d==="SEARCH"?t.createElement(L,{is:w,size:e,css:{size:e=="sm"?"$1":20}}):t.createElement(y,{label:u,theme:"neutral",size:e=="sm"?"md":"lg",css:{position:"absolute",top:0,right:0},onClick:A},t.createElement(l,{is:z}));return t.createElement(I,{css:{position:"relative",...m}},t.createElement(x,{ref:C,size:e,type:"search",...E,value:b,onChange:S,css:{pr:e==="sm"?"$5":"$6"}}),g())};p.displayName="SearchInput";export{p as SearchInput};

package/dist/components/stepper/StepperStepBullet.d.ts

@@ -263,7 +263,7 @@ export declare const StepperStepBullet: import("@stitches/react/types/styled-com
         };
     };
 }>>, {
-    status?: "success" | "default" | "active" | "viewed" | undefined;
+    status?: "success" | "default" | "active" | "viewed" | "completed" | "reviewed" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/stepper/StepperStepBullet.js

@@ -1 +1 @@
-import{styled as e}from"../../stitches.js";import{Flex as o}from"../flex/Flex.js";const r=e(o,{position:"relative",p:"$2",justifyContent:"center",alignItems:"center",size:"$3",borderRadius:"50%",border:"none",bg:"$tonal50",zIndex:1,flex:"none",variants:{status:{default:{bg:"$tonal50",color:"$tonal400"},active:{bg:"white",color:"$primaryMid",border:"2px solid",borderColor:"currentColor"},viewed:{bg:"$primary",color:"white"},success:{bg:"$success",color:"white"}}}});export{r as StepperStepBullet};
+import{styled as e}from"../../stitches.js";import{Flex as o}from"../flex/Flex.js";const r=e(o,{position:"relative",p:"$2",justifyContent:"center",alignItems:"center",size:"$3",borderRadius:"50%",border:"none",bg:"$tonal50",zIndex:1,flex:"none",variants:{status:{default:{bg:"$tonal50",color:"$tonal300"},active:{bg:"white",color:"$primaryMid",border:"2px solid",borderColor:"currentColor"},viewed:{bg:"white",border:"2px solid $tonal200",color:"$tonal600"},completed:{bg:"$primary",color:"white"},reviewed:{bg:"$primaryMid",color:"white"},success:{bg:"$success",color:"white"}}}});export{r as StepperStepBullet};

package/dist/components/stepper/StepperStepContainer.d.ts

@@ -265,6 +265,7 @@ export declare const StepperStepContainer: import("@stitches/react/types/styled-
 }>>, {
     direction?: "horizontal" | "vertical" | undefined;
     separator?: "success" | "default" | "active" | undefined;
+    status?: "success" | "default" | "active" | "viewed" | "completed" | "reviewed" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/stepper/StepperStepContainer.js

@@ -1 +1 @@
-import{styled as t}from"../../stitches.js";import{Flex as e}from"../flex/Flex.js";const o=t(e,{position:"relative",fontFamily:"$body",fontWeight:600,fontSize:"$md",alignItems:"center","&:not(:last-child)::after":{content:"",position:"absolute"},variants:{direction:{vertical:{py:"$3",flexDirection:"row","&:not(:last-child)::after":{height:"100%",width:"4px",left:"14px",top:"50%"}},horizontal:{px:"$2",flexDirection:"column","&:not(:last-child)::after":{width:"100%",height:"4px",left:"50%",top:"14px"}}},separator:{default:{"&:not(:last-child)::after":{bg:"$tonal50"}},active:{"&:not(:last-child)::after":{bg:"$primary"}},success:{"&:not(:last-child)::after":{bg:"$success"}}}}});export{o as StepperStepContainer};
+import{styled as t}from"../../stitches.js";import{Flex as i}from"../flex/Flex.js";const o=t(i,{position:"relative",fontFamily:"$body",fontWeight:600,fontSize:"$md",alignItems:"center","&:not(:last-child)::after":{content:"",position:"absolute"},"&:focus-visible":{outline:"none"},variants:{direction:{vertical:{py:"$3",flexDirection:"row","&:not(:last-child)::after":{height:"100%",width:"4px",left:"14px",top:"50%"}},horizontal:{px:"$2",flexDirection:"column","&:not(:last-child)::after":{width:"100%",height:"4px",left:"50%",top:"14px"}}},separator:{default:{"&:not(:last-child)::after":{bg:"$tonal50"}},active:{"&:not(:last-child)::after":{bg:"$primary"}},success:{"&:not(:last-child)::after":{bg:"$success"}}},status:{completed:{"&:hover":{"& :first-child":{bg:"$primaryMid",color:"white !important"},"& :last-child":{color:"$primaryMid"}},"&:focus-visible":{"& :first-child":{outline:"2px solid $primary",outlineOffset:"2px"}}},active:{"&:hover":{"& :first-child":{borderColor:"$tonal400",color:"$tonal600"},"& :last-child":{color:"$tonal600"}},"&:focus-visible":{"& :first-child":{outline:"2px solid $primary",outlineOffset:"2px"}}},default:{},viewed:{"&:focus-visible":{"& :first-child":{outline:"2px solid $primary !important",outlineOffset:"2px !important"}}},success:{},reviewed:{"&:focus-visible":{"& :first-child":{outline:"2px solid $primary !important",outlineOffset:"2px !important"}}}}}});export{o as StepperStepContainer};

package/dist/components/stepper/StepperStepLabel.d.ts

@@ -273,7 +273,7 @@ export declare const StepperStepLabel: import("@stitches/react/types/styled-comp
     as?: import("react").ElementType<any> | import("react").ComponentType<{}> | undefined;
 }>, {
     direction?: "horizontal" | "vertical" | undefined;
-    status?: "success" | "default" | "active" | "viewed" | undefined;
+    status?: "success" | "default" | "active" | "viewed" | "completed" | "reviewed" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/stepper/StepperStepLabel.js

@@ -1 +1 @@
-import{styled as t}from"../../stitches.js";import{Text as e}from"../text/Text.js";const o=t(e,{fontWeight:600,variants:{direction:{vertical:{ml:"$3",textAlign:"left"},horizontal:{mt:"$3",textAlign:"center"}},status:{default:{color:"$tonal400",fontWeight:400},active:{color:"$primaryMid"},viewed:{color:"$primary"},success:{color:"$success"}}}});export{o as StepperStepLabel};
+import{styled as t}from"../../stitches.js";import{Text as e}from"../text/Text.js";const o=t(e,{fontWeight:600,variants:{direction:{vertical:{ml:"$3",textAlign:"left"},horizontal:{mt:"$3",textAlign:"center"}},status:{default:{color:"$tonal300",fontWeight:400},active:{color:"$primaryMid"},viewed:{color:"$tonal600"},completed:{color:"$primary"},success:{color:"$success"},reviewed:{}}}});export{o as StepperStepLabel};

package/dist/components/stepper/StepperSteps.js

@@ -1 +1 @@
-import{Ok as f}from"@atom-learning/icons";import*as i from"react";import{styled as b}from"../../stitches.js";import{Flex as v}from"../flex/Flex.js";import{Icon as h}from"../icon/Icon.js";import{useStepper as C}from"./stepper-context/StepperContext.js";import{StepperStepBullet as w}from"./StepperStepBullet.js";import{StepperStepContainer as D}from"./StepperStepContainer.js";import{StepperStepLabel as x}from"./StepperStepLabel.js";import{Status as r}from"./types.js";const I=b(v,{justifyContent:"space-between",variants:{direction:{vertical:{flexDirection:"column"},horizontal:{flexDirection:"row"}}}}),T=({css:m})=>{const{steps:o,goToStep:p,activeStep:c,viewedSteps:a,allowSkip:n,direction:l,hideLabels:u}=C(),d=t=>{const e=o[t];return e.status?e.status:c===t?r.ACTIVE:a.includes(t)?r.VIEWED:r.DEFAULT},S=t=>{var e;const s=(e=o[t])==null?void 0:e.status;return s===r.SUCCESS?r.SUCCESS:s===r.VIEWED||t<Math.max(...a)?r.ACTIVE:r.DEFAULT};return i.createElement(I,{css:m,direction:l},o.map((t,e)=>{const s=d(e),E=S(e);return i.createElement(D,{key:`step_${e}`,direction:l,separator:E,css:l==="horizontal"?{width:`calc(100% / ${o.length})`}:{height:`calc(100% / ${o.length})`}},i.createElement(w,{as:n?"button":"div",onClick:()=>n&&a.includes(e)?p==null?void 0:p(e):void 0,status:s,"aria-current":e===c?"step":void 0,"aria-label":t.label?"":`step ${e+1}`,"aria-labelledby":t.label?`step-${e}`:void 0,css:{cursor:n&&a.includes(e)?"pointer":"auto"}},t.status==="success"?i.createElement(h,{is:f}):e+1),t.label&&!u&&i.createElement(x,{as:"span",id:`step-${e}`,direction:l,status:s},t.label))}))};export{T as StepperSteps};
+import{Ok as f}from"@atom-learning/icons";import*as i from"react";import{styled as b}from"../../stitches.js";import{Flex as h}from"../flex/Flex.js";import{Icon as v}from"../icon/Icon.js";import{useStepper as g}from"./stepper-context/StepperContext.js";import{StepperStepBullet as D}from"./StepperStepBullet.js";import{StepperStepContainer as I}from"./StepperStepContainer.js";import{StepperStepLabel as U}from"./StepperStepLabel.js";import{Status as r}from"./types.js";const x=b(h,{justifyContent:"space-between",variants:{direction:{vertical:{flexDirection:"column"},horizontal:{flexDirection:"row"}}}}),T=({css:u})=>{const{steps:s,goToStep:m,activeStep:l,viewedSteps:n,allowSkip:c,direction:a,hideLabels:S,completedSteps:p}=g(),d=t=>{const e=s[t];return e.status?e.status:p.length===s.length?r.SUCCESS:l===t&&p.includes(l)?r.REVIEWED:l===t?r.ACTIVE:p.includes(t)?r.COMPLETED:n.includes(t)?r.VIEWED:r.DEFAULT},E=t=>{var e;const o=(e=s[t])==null?void 0:e.status;return p.length===s.length?r.SUCCESS:o===r.SUCCESS?r.SUCCESS:o===r.VIEWED||t<Math.max(...n)?r.ACTIVE:r.DEFAULT};return i.createElement(x,{css:u,direction:a},s.map((t,e)=>{const o=d(e),C=E(e);return i.createElement(I,{tabIndex:0,key:`step_${e}`,direction:a,separator:C,status:o,css:a==="horizontal"?{width:`calc(100% / ${s.length})`}:{height:`calc(100% / ${s.length})`}},i.createElement(D,{as:c?"button":"div",onClick:()=>c&&n.includes(e)?m==null?void 0:m(e):void 0,status:o,"aria-current":e===l?"step":void 0,"aria-label":t.label?"":`step ${e+1}`,"aria-labelledby":t.label?`step-${e}`:void 0,css:{cursor:c&&n.includes(e)?"pointer":"auto"}},t.status==="success"?i.createElement(v,{is:f}):e+1),t.label&&!S&&i.createElement(U,{as:"span",id:`step-${e}`,direction:a,status:o},t.label))}))};export{T as StepperSteps};

package/dist/components/stepper/stepper-context/StepperContext.js

@@ -1 +1 @@
-import*as o from"react";const a=o.createContext({steps:[],goToPreviousStep:()=>null,goToNextStep:()=>null,goToStep:()=>null,activeStep:0,viewedSteps:[],allowSkip:!1,direction:"horizontal",hideLabels:!1}),T=({children:r,stepCount:n,allowSkip:u,onComplete:s,onStepChange:p,direction:S,steps:c,hideLabels:d})=>{const[t,i]=o.useState(0),[v,h]=o.useState([0]),l=!n;o.useEffect(()=>{h(e=>e.includes(t)?e:[...e,t]),p==null||p(t)},[t,p]);const w=()=>{if(s&&t===n-1)return s();if(t<n-1)return i(e=>e+1)},f=()=>{i(e=>e-1)},g=e=>{i(e)};return o.createElement(a.Provider,{value:{steps:c||Array(n).fill(""),goToPreviousStep:l?void 0:f,goToNextStep:l?void 0:w,goToStep:l?void 0:g,activeStep:t,viewedSteps:v,allowSkip:u,direction:S,hideLabels:d}},r)},m=()=>{const r=o.useContext(a);if(!r)throw new Error("Ensure that you wrap any components with the root component Stepper");return r};export{T as StepperProvider,m as useStepper};
+import*as o from"react";const c=o.createContext({steps:[],goToPreviousStep:()=>null,goToNextStep:()=>null,goToStep:()=>null,activeStep:0,viewedSteps:[],allowSkip:!1,direction:"horizontal",hideLabels:!1,completedSteps:[]}),P=({children:n,stepCount:r,allowSkip:a,onComplete:p,onStepChange:s,direction:d,steps:v,hideLabels:h})=>{const[e,l]=o.useState(0),[w,m]=o.useState([0]),[g,f]=o.useState([]),u=!r;o.useEffect(()=>{m(t=>t.includes(e)?t:[...t,e]),s==null||s(e)},[e,s]);const T=()=>{const t=p&&e===r-1,S=e<r-1;if((p||S)&&f(i=>i.includes(e)?i:[...i,e]),t)return p==null?void 0:p();if(S)return l(i=>i+1)},x=()=>{l(t=>t-1)},C=t=>{l(t)};return o.createElement(c.Provider,{value:{steps:v||Array(r).fill(""),goToPreviousStep:u?void 0:x,goToNextStep:u?void 0:T,goToStep:u?void 0:C,activeStep:e,viewedSteps:w,completedSteps:g,allowSkip:a,direction:d,hideLabels:h}},n)},b=()=>{const n=o.useContext(c);if(!n)throw new Error("Ensure that you wrap any components with the root component Stepper");return n};export{P as StepperProvider,b as useStepper};

package/dist/components/stepper/types.d.ts

@@ -3,7 +3,9 @@ export declare enum Status {
     ACTIVE = "active",
     VIEWED = "viewed",
     SUCCESS = "success",
-    DEFAULT = "default"
+    DEFAULT = "default",
+    COMPLETED = "completed",
+    REVIEWED = "reviewed"
 }
 export interface Step {
     label?: string;
@@ -17,6 +19,7 @@ export declare type Context = {
     goToStep?: (index: number) => void;
     activeStep: number;
     viewedSteps: number[];
+    completedSteps: number[];
     allowSkip?: boolean;
     direction?: Direction;
     hideLabels: boolean;

package/dist/components/stepper/types.js

@@ -1 +1 @@
-var E=(t=>(t.ACTIVE="active",t.VIEWED="viewed",t.SUCCESS="success",t.DEFAULT="default",t))(E||{});export{E as Status};
+var t=(E=>(E.ACTIVE="active",E.VIEWED="viewed",E.SUCCESS="success",E.DEFAULT="default",E.COMPLETED="completed",E.REVIEWED="reviewed",E))(t||{});export{t as Status};