@aws-amplify/ui-react 2.18.0 → 2.18.3

package/dist/esm/primitives/SliderField/SliderField.js

@@ -1 +1 @@
-import{__rest as e}from"../../node_modules/tslib/tslib.es6.js";import{jsxs as r,jsx as i}from"react/jsx-runtime";import l from"classnames";import{Root as a,Track as t,Range as s,Thumb as d}from"@radix-ui/react-slider";import*as o from"react";import{isFunction as n,classNameModifier as m}from"../shared/utils.js";import{ComponentClassNames as c}from"../shared/constants.js";import"../Field/FieldClearButton.js";import{FieldDescription as u}from"../Field/FieldDescription.js";import{FieldErrorMessage as p}from"../Field/FieldErrorMessage.js";import{FieldGroup as b}from"../FieldGroup/FieldGroup.js";import{Flex as F}from"../Flex/Flex.js";import{Label as f}from"../Label/Label.js";import{splitPrimitiveProps as h}from"../shared/styleUtils.js";import{View as S}from"../View/View.js";import{useStableId as g}from"../utils/useStableId.js";const C="slider-label",j="slider-root",k="slider-track",v="slider-range",T=o.forwardRef(((C,j)=>{var{ariaValuetext:k,className:v,defaultValue:T,descriptiveText:x,emptyTrackColor:y,errorMessage:N,filledTrackColor:V,hasError:E=!1,id:O,isDisabled:z,isValueHidden:H=!1,label:I,labelHidden:w=!1,onChange:M,orientation:R="horizontal",outerEndComponent:D,outerStartComponent:G,testId:L,thumbColor:P,trackSize:B,dir:U,value:_,size:q}=C,A=e(C,["ariaValuetext","className","defaultValue","descriptiveText","emptyTrackColor","errorMessage","filledTrackColor","hasError","id","isDisabled","isValueHidden","label","labelHidden","onChange","orientation","outerEndComponent","outerStartComponent","testId","thumbColor","trackSize","dir","value","size"]);const J=g(O),K=g(),Q=g(),W=x?Q:void 0,{flexContainerStyleProps:X,baseStyleProps:Y,rest:Z}=h(A),$=void 0!==_,[ee,re]=o.useState($?_:T),ie=$?[_]:void 0,le=$?void 0:[T],ae=o.useCallback((e=>{re(e[0]),n(M)&&M(e[0])}),[M]),te="vertical"===R,se=l(c.SliderFieldTrack,m(c.SliderFieldTrack,R),m(c.SliderFieldTrack,q)),de=l(c.SliderFieldRoot,m(c.SliderFieldTrack,R),m(c.SliderFieldTrack,q),v);return r(F,Object.assign({className:l(c.Field,c.SliderField),testId:L,"data-size":q},Y,X,{children:[r(f,Object.assign({className:c.SliderFieldLabel,id:K,testId:"slider-label",visuallyHidden:w},{children:[i(S,Object.assign({as:"span"},{children:I})),H?null:i(S,Object.assign({as:"span"},{children:ee}))]})),i(u,{id:Q,labelHidden:w,descriptiveText:x}),i(b,Object.assign({className:c.SliderFieldGroup,id:J,orientation:R,outerStartComponent:G,outerEndComponent:D},{children:r(a,Object.assign({className:de,"data-testid":"slider-root",disabled:z,defaultValue:le,onValueChange:ae,orientation:R,ref:j,value:ie},Z,{children:[i(t,Object.assign({className:se,"data-testid":"slider-track",style:{backgroundColor:y,[""+(te?"width":"height")]:B}},{children:i(s,{className:l(c.SliderFieldRange,m(c.SliderFieldRange,R)),"data-testid":"slider-range",style:{backgroundColor:V}})})),i(d,{"aria-describedby":W,"aria-labelledby":K,"aria-valuetext":k,className:l(c.SliderFieldThumb,m(c.SliderFieldThumb,q)),style:{backgroundColor:P}})]}))})),i(p,{hasError:E,errorMessage:N})]}))}));T.displayName="SliderField";export{C as SLIDER_LABEL_TEST_ID,v as SLIDER_RANGE_TEST_ID,j as SLIDER_ROOT_TEST_ID,k as SLIDER_TRACK_TEST_ID,T as SliderField};
+import{__rest as e}from"../../node_modules/tslib/tslib.es6.js";import{jsxs as r,jsx as i}from"react/jsx-runtime";import l from"classnames";import{Root as a,Track as t,Range as s,Thumb as o}from"@radix-ui/react-slider";import*as d from"react";import{isFunction as n,classNameModifier as m}from"../shared/utils.js";import{ComponentClassNames as c}from"../shared/constants.js";import"../Field/FieldClearButton.js";import{FieldDescription as u}from"../Field/FieldDescription.js";import{FieldErrorMessage as p}from"../Field/FieldErrorMessage.js";import{FieldGroup as b}from"../FieldGroup/FieldGroup.js";import{Flex as F}from"../Flex/Flex.js";import{Label as f}from"../Label/Label.js";import{splitPrimitiveProps as h}from"../shared/styleUtils.js";import{View as S}from"../View/View.js";import{useStableId as g}from"../utils/useStableId.js";const C="slider-label",j="slider-root",k="slider-track",v="slider-range",x=d.forwardRef(((C,j)=>{var{ariaValuetext:k,className:v,defaultValue:x,descriptiveText:y,emptyTrackColor:T,errorMessage:N,filledTrackColor:V,hasError:E=!1,id:O,isDisabled:z,isValueHidden:H=!1,label:R,labelHidden:I=!1,onChange:w,orientation:M="horizontal",outerEndComponent:D,outerStartComponent:G,testId:L,thumbColor:P,trackSize:B,dir:U,value:_,size:q}=C,A=e(C,["ariaValuetext","className","defaultValue","descriptiveText","emptyTrackColor","errorMessage","filledTrackColor","hasError","id","isDisabled","isValueHidden","label","labelHidden","onChange","orientation","outerEndComponent","outerStartComponent","testId","thumbColor","trackSize","dir","value","size"]);const J=g(O),K=g(),Q=g(),W=y?Q:void 0,{flexContainerStyleProps:X,baseStyleProps:Y,rest:Z}=h(A),$=void 0!==_,[ee,re]=d.useState($?_:x),ie=$?[_]:void 0,le=$?void 0:[x],ae=d.useCallback((e=>{re(e[0]),n(w)&&w(e[0])}),[w]),te="vertical"===M,se=l(c.SliderFieldTrack,m(c.SliderFieldTrack,M),m(c.SliderFieldTrack,q)),oe=l(c.SliderFieldRoot,m(c.SliderFieldRoot,M),m(c.SliderFieldRoot,q),v);return r(F,Object.assign({className:l(c.Field,c.SliderField),testId:L,"data-size":q},Y,X,{children:[r(f,Object.assign({className:c.SliderFieldLabel,id:K,testId:"slider-label",visuallyHidden:I},{children:[i(S,Object.assign({as:"span"},{children:R})),H?null:i(S,Object.assign({as:"span"},{children:ee}))]})),i(u,{id:Q,labelHidden:I,descriptiveText:y}),i(b,Object.assign({className:c.SliderFieldGroup,id:J,orientation:M,outerStartComponent:G,outerEndComponent:D},{children:r(a,Object.assign({className:oe,"data-testid":"slider-root",disabled:z,defaultValue:le,onValueChange:ae,orientation:M,ref:j,value:ie},Z,{children:[i(t,Object.assign({className:se,"data-testid":"slider-track",style:{backgroundColor:T,[""+(te?"width":"height")]:B}},{children:i(s,{className:l(c.SliderFieldRange,m(c.SliderFieldRange,M)),"data-testid":"slider-range",style:{backgroundColor:V}})})),i(o,{"aria-describedby":W,"aria-labelledby":K,"aria-valuetext":k,className:l(c.SliderFieldThumb,m(c.SliderFieldThumb,q)),style:{backgroundColor:P}})]}))})),i(p,{hasError:E,errorMessage:N})]}))}));x.displayName="SliderField";export{C as SLIDER_LABEL_TEST_ID,v as SLIDER_RANGE_TEST_ID,j as SLIDER_ROOT_TEST_ID,k as SLIDER_TRACK_TEST_ID,x as SliderField};

package/dist/esm/primitives/shared/styleUtils.js

@@ -1 +1 @@
-import{__rest as o}from"../../node_modules/tslib/tslib.es6.js";import*as t from"react";import{isDesignToken as n}from"@aws-amplify/ui";import{ComponentPropsToStylePropsMap as r}from"../types/style.js";import{getValueAtCurrentBreakpoint as e}from"./responsive/utils.js";import{useBreakpoint as i}from"./responsive/useBreakpoint.js";import"../../components/AmplifyProvider/AmplifyContext.js";import{useTheme as a}from"../../hooks/useTheme.js";import{isNullOrEmptyString as s,isEmptyString as p}from"./utils.js";const l=n=>{const{rowSpan:r,columnSpan:e,row:i,column:a}=n,p=o(n,["rowSpan","columnSpan","row","column"]),{rowFromSpanValue:l,columnFromSpanValue:m}=t.useMemo((()=>({rowFromSpanValue:c(r),columnFromSpanValue:c(e)})),[r,e]);return Object.assign({row:s(i)?l:i,column:s(a)?m:a},p)},m=(o,n)=>{const{breakpoints:{values:r,defaultBreakpoint:e}}=a(),s=i({breakpoints:r,defaultBreakpoint:e}),p=l(o);return t.useMemo((()=>d({props:p,style:n,breakpoint:s,breakpoints:r})),[p,n,r,s])},u=o=>"auto"===o||"number"==typeof o&&!isNaN(o)||"string"==typeof o&&!isNaN(parseFloat(o)),c=o=>{if(u(o))return g(o);if(Array.isArray(o))return o.map((o=>g(o)));if("object"==typeof o&&null!=o){const t={};return Object.entries(o).forEach((([o,n])=>{t[o]=g(n)})),t}return null},g=o=>"auto"===o?"auto":`span ${o}`,d=({props:o={},style:t={},breakpoint:i,breakpoints:a})=>{const s={};return Object.keys(o).filter((t=>null!=o[t])).forEach((l=>{if(l in r){if(!p(o[l])){let s=o[l];s=n(s)?s.toString():e(s,i,a);const p=r[l];t=Object.assign(Object.assign({},t),{[p]:s})}}else s[l]=o[l]})),{propStyles:t,nonStyleProps:s}},f={alignContent:!0,alignItems:!0,direction:!0,gap:!0,justifyContent:!0,wrap:!0,columnGap:!0,rowGap:!0},S={alignSelf:!0,area:!0,backgroundColor:!0,backgroundImage:!0,basis:!0,border:!0,borderRadius:!0,bottom:!0,boxShadow:!0,color:!0,column:!0,columnEnd:!0,columnSpan:!0,columnStart:!0,display:!0,flex:!0,fontFamily:!0,fontSize:!0,fontStyle:!0,fontWeight:!0,grow:!0,height:!0,left:!0,letterSpacing:!0,lineHeight:!0,margin:!0,marginBlockEnd:!0,marginBlockStart:!0,marginBottom:!0,marginInlineEnd:!0,marginInlineStart:!0,marginLeft:!0,marginRight:!0,marginTop:!0,maxHeight:!0,maxWidth:!0,minHeight:!0,minWidth:!0,opacity:!0,order:!0,overflow:!0,padding:!0,paddingBlockEnd:!0,paddingBlockStart:!0,paddingBottom:!0,paddingInlineEnd:!0,paddingInlineStart:!0,paddingLeft:!0,paddingRight:!0,paddingTop:!0,position:!0,right:!0,row:!0,rowEnd:!0,rowSpan:!0,rowStart:!0,shrink:!0,textAlign:!0,textDecoration:!0,textTransform:!0,top:!0,transform:!0,transformOrigin:!0,width:!0,whiteSpace:!0},b=o=>{const t={flexContainerStyleProps:{},baseStyleProps:{},rest:{}};return Object.keys(o).forEach((n=>{n in f?t.flexContainerStyleProps[n]=o[n]:n in S?t.baseStyleProps[n]=o[n]:t.rest[n]=o[n]})),t};export{c as convertGridSpan,d as convertStylePropsToStyleObj,g as getGridSpan,u as isSpanPrimitiveValue,b as splitPrimitiveProps,m as useStyles,l as useTransformStyleProps};
+import{__rest as o}from"../../node_modules/tslib/tslib.es6.js";import*as t from"react";import{isDesignToken as n}from"@aws-amplify/ui";import{ComponentPropsToStylePropsMap as r}from"../types/style.js";import{getValueAtCurrentBreakpoint as e}from"./responsive/utils.js";import{useBreakpoint as i}from"./responsive/useBreakpoint.js";import"../../components/ThemeProvider/AmplifyContext.js";import{useTheme as a}from"../../hooks/useTheme.js";import{isNullOrEmptyString as s,isEmptyString as p}from"./utils.js";const l=n=>{const{rowSpan:r,columnSpan:e,row:i,column:a}=n,p=o(n,["rowSpan","columnSpan","row","column"]),{rowFromSpanValue:l,columnFromSpanValue:m}=t.useMemo((()=>({rowFromSpanValue:c(r),columnFromSpanValue:c(e)})),[r,e]);return Object.assign({row:s(i)?l:i,column:s(a)?m:a},p)},m=(o,n)=>{const{breakpoints:{values:r,defaultBreakpoint:e}}=a(),s=i({breakpoints:r,defaultBreakpoint:e}),p=l(o);return t.useMemo((()=>d({props:p,style:n,breakpoint:s,breakpoints:r})),[p,n,r,s])},u=o=>"auto"===o||"number"==typeof o&&!isNaN(o)||"string"==typeof o&&!isNaN(parseFloat(o)),c=o=>{if(u(o))return g(o);if(Array.isArray(o))return o.map((o=>g(o)));if("object"==typeof o&&null!=o){const t={};return Object.entries(o).forEach((([o,n])=>{t[o]=g(n)})),t}return null},g=o=>"auto"===o?"auto":`span ${o}`,d=({props:o={},style:t={},breakpoint:i,breakpoints:a})=>{const s={};return Object.keys(o).filter((t=>null!=o[t])).forEach((l=>{if(l in r){if(!p(o[l])){let s=o[l];s=n(s)?s.toString():e(s,i,a);const p=r[l];t=Object.assign(Object.assign({},t),{[p]:s})}}else s[l]=o[l]})),{propStyles:t,nonStyleProps:s}},f={alignContent:!0,alignItems:!0,direction:!0,gap:!0,justifyContent:!0,wrap:!0,columnGap:!0,rowGap:!0},S={alignSelf:!0,area:!0,backgroundColor:!0,backgroundImage:!0,basis:!0,border:!0,borderRadius:!0,bottom:!0,boxShadow:!0,color:!0,column:!0,columnEnd:!0,columnSpan:!0,columnStart:!0,display:!0,flex:!0,fontFamily:!0,fontSize:!0,fontStyle:!0,fontWeight:!0,grow:!0,height:!0,left:!0,letterSpacing:!0,lineHeight:!0,margin:!0,marginBlockEnd:!0,marginBlockStart:!0,marginBottom:!0,marginInlineEnd:!0,marginInlineStart:!0,marginLeft:!0,marginRight:!0,marginTop:!0,maxHeight:!0,maxWidth:!0,minHeight:!0,minWidth:!0,opacity:!0,order:!0,overflow:!0,padding:!0,paddingBlockEnd:!0,paddingBlockStart:!0,paddingBottom:!0,paddingInlineEnd:!0,paddingInlineStart:!0,paddingLeft:!0,paddingRight:!0,paddingTop:!0,position:!0,right:!0,row:!0,rowEnd:!0,rowSpan:!0,rowStart:!0,shrink:!0,textAlign:!0,textDecoration:!0,textTransform:!0,top:!0,transform:!0,transformOrigin:!0,width:!0,whiteSpace:!0},b=o=>{const t={flexContainerStyleProps:{},baseStyleProps:{},rest:{}};return Object.keys(o).forEach((n=>{n in f?t.flexContainerStyleProps[n]=o[n]:n in S?t.baseStyleProps[n]=o[n]:t.rest[n]=o[n]})),t};export{c as convertGridSpan,d as convertStylePropsToStyleObj,g as getGridSpan,u as isSpanPrimitiveValue,b as splitPrimitiveProps,m as useStyles,l as useTransformStyleProps};