@atom-learning/components 1.7.5 → 1.8.1

package/CHANGELOG.md

@@ -1,9 +1,11 @@
-## [1.7.5](https://github.com/Atom-Learning/components/compare/v1.7.4...v1.7.5) (2022-04-14)
+## [1.8.1](https://github.com/Atom-Learning/components/compare/v1.8.0...v1.8.1) (2022-05-10)
 
 
 ### Bug Fixes
 
-* onSelect prop name clashing with the built-in React onSelect event ([8aa2b42](https://github.com/Atom-Learning/components/commit/8aa2b42184c5c4470f3b855ad15a3b79698b212f))
+* allow on change handler in radio button field ([4ddb262](https://github.com/Atom-Learning/components/commit/4ddb2629673367deb382ecae8e5e991c1a6d40b2))
+* simplify radio button field `onValueChange` example ([b572256](https://github.com/Atom-Learning/components/commit/b572256b96cfe2ff229d315349fd323f5743b537))
+* use userEvent to simulate radio click ([1a78bf1](https://github.com/Atom-Learning/components/commit/1a78bf1af93347cbc90bf7fe45a31c0567505f5b))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/carousel/Carousel.d.ts

@@ -17,4 +17,9 @@ declare type CarouselSubComponents = {
     Slider: typeof CarouselSlider;
 };
 export declare const Carousel: React.FC<CarouselProps & React.ComponentProps<typeof CSSWrapper>> & CarouselSubComponents;
+/**
+ * Documentation about the hook usage
+ * https://github.com/express-labs/pure-react-carousel#hooks-and-usecontext
+ */
+export declare const useCarousel: () => import("pure-react-carousel").CarouselStoreInterface;
 export {};

package/dist/components/carousel/Carousel.js

@@ -1 +1 @@
-import{CarouselProvider as m}from"pure-react-carousel";import{createElement as o}from"react";import{CarouselArrowNext as s,CarouselArrowPrevious as u}from"./CarouselArrows.js";import{CarouselPagination as p}from"./CarouselPagination.js";import{CarouselSlide as d}from"./CarouselSlide.js";import{CarouselSlider as n}from"./CarouselSlider.js";import{CSSWrapper as C}from"../../utilities/css-wrapper/CSSWrapper.js";const r=({children:e,css:i,slideHeight:t,slideWidth:a,numSlides:l})=>o(C,{css:i},o(m,{naturalSlideWidth:a,naturalSlideHeight:t,totalSlides:l},e));r.ArrowNext=s,r.ArrowPrevious=u,r.Pagination=p,r.Slide=d,r.Slider=n,r.displayName="Carousel";export{r as Carousel};
+import{CarouselProvider as s,CarouselContext as u}from"pure-react-carousel";import{createElement as o,useContext as m}from"react";import{CarouselArrowNext as C,CarouselArrowPrevious as n}from"./CarouselArrows.js";import{CarouselPagination as p}from"./CarouselPagination.js";import{CarouselSlide as d}from"./CarouselSlide.js";import{CarouselSlider as S}from"./CarouselSlider.js";import{CSSWrapper as f}from"../../utilities/css-wrapper/CSSWrapper.js";const r=({children:e,css:t,slideHeight:i,slideWidth:a,numSlides:l})=>o(f,{css:t},o(s,{naturalSlideWidth:a,naturalSlideHeight:i,totalSlides:l},e)),x=()=>m(u);r.ArrowNext=C,r.ArrowPrevious=n,r.Pagination=p,r.Slide=d,r.Slider=S,r.displayName="Carousel";export{r as Carousel,x as useCarousel};

package/dist/components/carousel/index.d.ts

@@ -1 +1 @@
-export { Carousel } from './Carousel';
+export { Carousel, useCarousel } from './Carousel';

package/dist/components/dialog/DialogContent.js

@@ -1 +1 @@
-import{Close as p}from"@atom-learning/icons";import{Overlay as u,Content as b,Close as x}from"@radix-ui/react-dialog";import{createElement as t,Fragment as g}from"react";import{keyframes as n,styled as i}from"../../stitches.js";import{ActionIcon as h}from"../action-icon/ActionIcon.js";import{Icon as w}from"../icon/Icon.js";import{fadeIn as $,fadeOut as v}from"../../utilities/style/keyframe-animations.js";const o="translate3d(-50%, -50%, 0)",s="translate3d(-50%, 50vh, 0)",r="modal_overlay",y=n({"0%":{transform:s},"100%":{transform:o}}),C=n({"0%":{transform:o},"100%":{transform:s}}),O=i(u,{backgroundColor:"$alpha600",inset:0,position:"fixed","@allowMotion":{'&[data-state="open"]':{animation:`${$} 250ms ease-out`},'&[data-state="closed"]':{animation:`${v} 550ms ease-out`}}}),D=i(b,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",p:"$5",position:"fixed",top:"50%",transform:o,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${y} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${C} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{xs:{width:"380px"},sm:{width:"480px"},md:{width:"600px"},lg:{width:"800px"},xl:{width:"1100px"}}}}),S=({size:l="sm",children:m,closeDialogText:d="Close dialog",showCloseButton:c=!0,...f})=>t(g,null,t(O,{id:r}),t(D,{size:l,"aria-label":"Dialog",onPointerDownOutside:e=>{const a=e.target;(a==null?void 0:a.id)!==r&&e.preventDefault()},...f},c&&t(h,{as:x,css:{position:"absolute",right:"$4",top:"$4"},label:d,size:"lg",theme:"neutral"},t(w,{is:p})),m));export{S as DialogContent};
+import{Close as u}from"@atom-learning/icons";import{Overlay as x,Content as b,Portal as g,Close as h}from"@radix-ui/react-dialog";import{createElement as o}from"react";import{keyframes as n,styled as i}from"../../stitches.js";import{ActionIcon as w}from"../action-icon/ActionIcon.js";import{Icon as $}from"../icon/Icon.js";import{fadeIn as v,fadeOut as I}from"../../utilities/style/keyframe-animations.js";const t="translate3d(-50%, -50%, 0)",s="translate3d(-50%, 50vh, 0)",r="modal_overlay",l=2147483646,O=n({"0%":{transform:s},"100%":{transform:t}}),y=n({"0%":{transform:t},"100%":{transform:s}}),C=i(x,{backgroundColor:"$alpha600",inset:0,position:"fixed",overflowY:"auto",zIndex:l,"@allowMotion":{'&[data-state="open"]':{animation:`${v} 250ms ease-out`},'&[data-state="closed"]':{animation:`${I} 550ms ease-out`}}}),D=i(b,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",p:"$5",position:"fixed",top:"50%",transform:t,zIndex:l,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${O} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${y} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{xs:{width:"380px"},sm:{width:"480px"},md:{width:"600px"},lg:{width:"800px"},xl:{width:"1100px"}}}}),z=({size:d="sm",children:m,closeDialogText:c="Close dialog",showCloseButton:f=!0,...p})=>o(g,null,o(C,{id:r},o(D,{size:d,"aria-label":"Dialog",onPointerDownOutside:e=>{const a=e.target;(a==null?void 0:a.id)!==r&&e.preventDefault()},...p},f&&o(w,{as:h,css:{position:"absolute",right:"$4",top:"$4"},label:c,size:"lg",theme:"neutral"},o($,{is:u})),m)));export{z as DialogContent};

package/dist/components/index.d.ts

@@ -4,7 +4,7 @@ export { ActionIcon } from './action-icon';
 export { AlertDialog, useAlert, AlertProvider } from './alert-dialog';
 export { Box } from './box';
 export { Button, StyledButton } from './button';
-export { Carousel } from './carousel';
+export { Carousel, useCarousel } from './carousel';
 export { Checkbox } from './checkbox';
 export { CheckboxField } from './checkbox-field';
 export { Combobox } from './combobox';

package/dist/components/radio-button-field/RadioButtonField.d.ts

@@ -10,6 +10,7 @@ declare type RadioButtonFieldProps = {
     direction?: 'row' | 'column';
     description?: string;
     validation?: ValidationOptions;
+    onValueChange?: (value: string) => void;
 };
 export declare const RadioButtonField: React.FC<RadioButtonFieldProps> & {
     Item: typeof RadioField;

package/dist/components/radio-button-field/RadioButtonField.js

@@ -1 +1 @@
-import{createElement as o}from"react";import{useFormContext as a,Controller as F}from"react-hook-form";import{Description as B}from"../field-wrapper/FieldDescription.js";import"../form/Form.js";import{useFieldError as R}from"../form/useFieldError.js";import{Label as b}from"../label/Label.js";import"../radio-button/RadioButton.js";import{RadioButtonGroup as C}from"../radio-button/RadioButtonGroup.js";import{ValidationError as E}from"../validation-error/ValidationError.js";import{styled as $}from"../../stitches.js";import{RadioField as g}from"./RadioField.js";const q=$("fieldset",{all:"unset"}),e=({children:s,css:n,direction:p="column",defaultValue:t,description:m,label:d,name:i,validation:r})=>{const{control:u}=a(),{error:l}=R(i);return o(q,{css:n},o(b,{as:"legend",css:{p:0,mb:"$3"},required:Boolean(r==null?void 0:r.required)},d),m&&o(B,{css:{mb:"$3"}},m),o(F,{control:u,name:i,rules:r,defaultValue:t,render:({onChange:c,value:f})=>o(C,{direction:p,defaultValue:t,onValueChange:c,value:f},s)}),l&&o(E,{css:{mt:"$2"}},l))};e.Item=g,e.displayName="RadioButtonField";export{e as RadioButtonField};
+import{createElement as o}from"react";import{useFormContext as B,Controller as R}from"react-hook-form";import{Description as b}from"../field-wrapper/FieldDescription.js";import"../form/Form.js";import{useFieldError as E}from"../form/useFieldError.js";import{Label as $}from"../label/Label.js";import"../radio-button/RadioButton.js";import{RadioButtonGroup as q}from"../radio-button/RadioButtonGroup.js";import{ValidationError as x}from"../validation-error/ValidationError.js";import{styled as y}from"../../stitches.js";import{RadioField as C}from"./RadioField.js";const g=y("fieldset",{all:"unset"}),t=({children:d,css:p,direction:u="column",defaultValue:e,description:m,label:c,name:i,validation:r,onValueChange:l})=>{const{control:f}=B(),{error:s}=E(i);return o(g,{css:p},o($,{as:"legend",css:{p:0,mb:"$3"},required:Boolean(r==null?void 0:r.required)},c),m&&o(b,{css:{mb:"$3"}},m),o(R,{control:f,name:i,rules:r,defaultValue:e,render:({onChange:F,value:a})=>o(q,{direction:u,defaultValue:e,onValueChange:n=>{F(n),l==null||l(n)},value:a},d)}),s&&o(x,{css:{mt:"$2"}},s))};t.Item=C,t.displayName="RadioButtonField";export{t as RadioButtonField};