freemium-ui 2.0.0-beta.46 → 2.0.0-beta.47

package/index.cjs.js

@@ -567,7 +567,7 @@ onMouseDown:e=>{var n
   font-size: ${({theme:e})=>e.typography.primary.fontSize};
   font-weight: ${({theme:e})=>e.typography.fontWeight.regular};
   line-height: ${({theme:e})=>e.typography.primary.lineHeight};
-`,Ln=on.button`
+`,Ln=on.button.attrs((e=>({"aria-label":e["aria-label"]||"Trigger Button"})))`
   border: none;
   padding: 0;
   margin: 0;
@@ -2552,6 +2552,7 @@ fill:t.fill})))),id=on(rr)`
   margin-top: 8px;
   transform: rotate(-180deg);
 `,Hd=on(Ku)`
+  cursor: pointer;
   transform: rotate(-180deg);
   transition: transform 0.2s ease-in-out;
   display: grid;
@@ -3626,8 +3627,8 @@ className:"input-label","aria-label":a,htmlFor:o
 },a,d&&e.createElement(zn,null,"*"))),e.createElement(md,{open:x,defaultOpen:M,
 name:f,required:d,disabled:u,value:b?.[r]??void 0,onValueChange:e=>{if(s)return
 ;const t=i.find((t=>t?.[r]===e));l?.(t??null)}},e.createElement(Dd,{
-className:`SelectTrigger ${g??""}`.trim(),"aria-label":"Food",disabled:u,id:o,
-$isErrored:!!w,"aria-invalid":!!w,width:v,style:y},e.createElement(gd,{
+className:`SelectTrigger ${g??""}`.trim(),"aria-label":a??"dropdown",disabled:u,
+id:o,$isErrored:!!w,"aria-invalid":!!w,width:v,style:y},e.createElement(gd,{
 className:"SelectValue",placeholder:c}),e.createElement(Hd,{
 className:"SelectIcon"},e.createElement(rr,{fill:n.colors.text.primary
 }))),e.createElement(yd,null,e.createElement(zd,{className:"SelectContent",
@@ -3647,7 +3648,7 @@ className:"SelectScrollButton"},e.createElement(rr,{fill:n.colors.text.primary
 })))))),w&&z&&e.createElement(vc,null,z))
 },am=({itemIdentifier:t="id",label:n,id:r,items:a=[],placeholder:o,readOnly:i=!1,disabled:l=!1,isRequired:c=!1,hideClear:s=!1,itemToString:u,name:d,filterKey:h,width:p,customValues:f,onCustomValueAdd:m,itemComponent:v,emptyItemsText:g,getCustomMessage:y,onChange:b,useComboboxProps:w,isErrored:C,errorText:z,defaultSelectedItem:M,isMenuLoading:x,contentProps:E})=>{
 const S=qt(),[_,H]=e.useState(a),{isOpen:D,selectedItem:L,getToggleButtonProps:V,getLabelProps:A,getMenuProps:k,openMenu:T,highlightedIndex:R,setHighlightedIndex:P,setInputValue:I,inputValue:O,getItemProps:N,getInputProps:F}=ff({
-selectedItem:M,items:_,onSelectedItemChange:({selectedItem:e})=>{
+id:r,selectedItem:M,items:_,onSelectedItemChange:({selectedItem:e})=>{
 console.log("onSelectedItemChange",{sI:e}),b?.(e??null)},
 onIsOpenChange:({isOpen:e})=>{
 if(e&&(""===O||L&&h&&(O||"").toLowerCase()===`${L?.[h||t]||""}`.toLowerCase()))H(a),
@@ -3658,13 +3659,12 @@ D&&(""===e||L&&h&&(e||"").toLowerCase()===`${L?.[h||t]||""}`.toLowerCase())?H(a)
 ;return e.createElement(ld,{width:p},e.createElement(wn,{
 className:"input-label",...A({disabled:l,readOnly:i})
 },n,c&&e.createElement(zn,null,"*")),e.createElement(Kf,{...F({name:d,
-readOnly:i,disabled:l,id:r}),placeholder:o,
+readOnly:i,disabled:l}),placeholder:o,
 endAdornment:e.createElement(pd,null,!l&&!i&&!s&&L&&e.createElement(Mn,{
-onClick:e=>{
-console.log("onClick WORKING"),I(""),b?.(null),T(),e.stopPropagation()},style:{
-borderRadius:"50%"}},e.createElement(qn,{fill:S.colors.text.primary
-})),e.createElement(Mn,{...V({disabled:l,readOnly:i})},e.createElement(id,{
-$isOpen:B,fill:S.colors.text.primary,width:8,height:8})))
+"aria-label":"close",onClick:e=>{console.log("onClick WORKING"),I(""),b?.(null),
+T(),e.stopPropagation()},style:{borderRadius:"50%"}},e.createElement(qn,{
+fill:S.colors.text.primary})),e.createElement(Mn,{...V({disabled:l,readOnly:i})
+},e.createElement(id,{$isOpen:B,fill:S.colors.text.primary,width:8,height:8})))
 }),!i&&!l&&e.createElement(sd,{$isOpen:D,...E,...k({disabled:l,readOnly:i})
 },x?e.createElement(hd,null,e.createElement(tm,null)):e.createElement(e.Fragment,null,D&&0===_.length&&e.createElement(e.Fragment,null,f?e.createElement(ud,null,e.createElement(dd,{
 onClick:e=>{e.stopPropagation(),m&&m({inputValue:O,customValues:!0}),I("")}
@@ -15668,16 +15668,17 @@ fillRule:"evenodd",clipRule:"evenodd",
 d:"M8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0ZM8 14.6C4.35492 14.6 1.4 11.6451 1.4 8C1.4 4.35492 4.35492 1.4 8 1.4C11.6451 1.4 14.6 4.35492 14.6 8C14.5945 11.6428 11.6428 14.5945 8 14.6ZM9 8L10.82 6.17L10.83 6.18C11.1061 5.90386 11.1061 5.45614 10.83 5.18C10.5539 4.90386 10.1061 4.90386 9.83 5.18L8 7L6.18 5.17C5.90386 4.89386 5.45614 4.89386 5.18 5.17C4.90386 5.44614 4.90386 5.89386 5.18 6.17L7 8L5.17 9.82C4.89386 10.0961 4.89386 10.5439 5.17 10.82C5.44614 11.0961 5.89386 11.0961 6.17 10.82L8 9L9.83 10.83C10.1061 11.1061 10.5539 11.1061 10.83 10.83C11.1061 10.5539 11.1061 10.1061 10.83 9.83L9 8Z",
 fill:n.colors.text.semantic.error}))},nj=({index:t,...n})=>{
 const r=qt(),{updateToasts:a,windowState:o}=e.useContext(cB)??{},i=e.useRef(null)
-;return e.createElement(e.Fragment,null,e.createElement(YB,{ref:i,
-toastType:n.type,toastIndex:t,className:`ToastRoot Toast-${n.id??""}`.trim(),
-duration:n.delay??3e3,onOpenChange:e=>{e||a((e=>e.filter((e=>e.id!==n.id))))}
-},e.createElement(ZB,{className:"ToastProgress",windowState:o,toastType:n.type,
-delay:n.delay??3e3
+;return e.createElement(e.Fragment,null,e.createElement(YB,{role:"alert",
+"aria-live":"polite",ref:i,toastType:n.type,toastIndex:t,
+className:`ToastRoot Toast-${n.id??""}`.trim(),duration:n.delay??3e3,
+onOpenChange:e=>{e||a((e=>e.filter((e=>e.id!==n.id))))}},e.createElement(ZB,{
+className:"ToastProgress",windowState:o,toastType:n.type,delay:n.delay??3e3
 }),e.createElement(qB,null,n.customIcon?e.createElement(e.Fragment,null,n.customIcon):e.createElement(e.Fragment,null,"success"===n.type&&e.createElement(JB,{
 fill:r.colors.text.semantic.success}),"warning"===n.type&&e.createElement(ej,{
 fill:r.colors.text.semantic.warning}),"error"===n.type&&e.createElement(tj,{
 fill:r.colors.text.semantic.error})),e.createElement(WB,{className:"ToastTitle"
-},n.text),e.createElement(GB,{className:"ToastAction",asChild:!0,altText:"Close"
+},n.text),e.createElement(GB,{className:"ToastAction",asChild:!0,
+altText:"Close","aria-label":"Close"
 },e.createElement(Ln,null,e.createElement(qn,{fill:r.colors.text.primary}))))))
 },rj=()=>{const n=((t=vN())=>{
 const n=`ui-${t}`,{isBrowser:r}=XB(),[a,o]=e.useState(r?QB(n):null)
@@ -16398,10 +16399,11 @@ className:"toggle-off",...yj[i]})))
 },exports.Tooltip=({position:t="bottom",label:n,html:r,style:a={},children:o,className:i="",disabled:l=!1,delay:c=300,arrow:s=!0,providerProps:u,rootProps:d})=>{
 const[h="bottom",p="center"]=t.split("-");return e.createElement(Gj,{
 delayDuration:c,...u},e.createElement(Kj,{...d,open:!l&&void 0
-},e.createElement(qj,{className:"TooltipTrigger",asChild:!0
-},e.createElement(Ln,{className:i
-},o)),e.createElement(Zj,null,e.createElement(Wj,{forceMount:!0,
-className:"TooltipContent",style:a,sideOffset:5,"aria-disabled":l,side:h,align:p
+},e.createElement(qj,{className:"TooltipTrigger",asChild:!0,
+"aria-label":"string"==typeof o?o:"TooltipTrigger"},e.createElement(Ln,{
+className:i},o)),e.createElement(Zj,null,e.createElement(Wj,{forceMount:!0,
+className:"TooltipContent",style:a,sideOffset:5,"aria-disabled":l,
+"aria-live":"polite",side:h,align:p
 },n?e.createElement(e.Fragment,null,n):e.createElement(e.Fragment,null,r),s&&e.createElement(Yj,null)))))
 },
 exports.Transition=Xj,exports.TriggerButtonWrapper=Ln,exports.Typography=Qn,exports.Warning=Zn,

package/index.d.ts

@@ -1666,7 +1666,9 @@ declare const CardActions: styled_components.IStyledComponent<"web", styled_comp
 declare const CardTitle: styled_components.IStyledComponent<"web", styled_components_dist_types.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>;
 declare const CardDescription: styled_components.IStyledComponent<"web", styled_components_dist_types.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 declare const CardText: styled_components.IStyledComponent<"web", styled_components_dist_types.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
-declare const TriggerButtonWrapper: styled_components.IStyledComponent<"web", styled_components_dist_types.FastOmit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>;
+declare const TriggerButtonWrapper: styled_components.IStyledComponent<"web", styled_components_dist_types.FastOmit<styled_components_dist_types.FastOmit<styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
+}>, never>, never>>;
 declare const basicHide: () => styled_components.RuleSet<object>;
 declare const basicShow: () => styled_components.RuleSet<object>;
 declare const contentHide: () => styled_components.RuleSet<object>;

package/index.js

@@ -563,7 +563,7 @@ onMouseDown:t=>{var n
   font-size: ${({theme:e})=>e.typography.primary.fontSize};
   font-weight: ${({theme:e})=>e.typography.fontWeight.regular};
   line-height: ${({theme:e})=>e.typography.primary.lineHeight};
-`,Zn=En.button`
+`,Zn=En.button.attrs((e=>({"aria-label":e["aria-label"]||"Trigger Button"})))`
   border: none;
   padding: 0;
   margin: 0;
@@ -2543,6 +2543,7 @@ fill:e.fill})))),Vd=En(xr)`
   margin-top: 8px;
   transform: rotate(-180deg);
 `,Jd=En(bd)`
+  cursor: pointer;
   transform: rotate(-180deg);
   transition: transform 0.2s ease-in-out;
   display: grid;
@@ -3608,8 +3609,8 @@ className:"input-label","aria-label":a,htmlFor:o
 },a,d&&t.createElement(jn,null,"*"))),t.createElement(Fd,{open:x,defaultOpen:M,
 name:f,required:d,disabled:u,value:b?.[r]??void 0,onValueChange:e=>{if(s)return
 ;const t=i.find((t=>t?.[r]===e));l?.(t??null)}},t.createElement(eh,{
-className:`SelectTrigger ${g??""}`.trim(),"aria-label":"Food",disabled:u,id:o,
-$isErrored:!!w,"aria-invalid":!!w,width:v,style:y},t.createElement(jd,{
+className:`SelectTrigger ${g??""}`.trim(),"aria-label":a??"dropdown",disabled:u,
+id:o,$isErrored:!!w,"aria-invalid":!!w,width:v,style:y},t.createElement(jd,{
 className:"SelectValue",placeholder:c}),t.createElement(Jd,{
 className:"SelectIcon"},t.createElement(xr,{fill:n.colors.text.primary
 }))),t.createElement($d,null,t.createElement(Gd,{className:"SelectContent",
@@ -3629,7 +3630,7 @@ className:"SelectScrollButton"},t.createElement(xr,{fill:n.colors.text.primary
 })))))),w&&z&&t.createElement(Oc,null,z))
 },Dm=({itemIdentifier:e="id",label:n,id:r,items:a=[],placeholder:o,readOnly:i=!1,disabled:l=!1,isRequired:c=!1,hideClear:s=!1,itemToString:u,name:d,filterKey:h,width:p,customValues:f,onCustomValueAdd:m,itemComponent:v,emptyItemsText:g,getCustomMessage:y,onChange:b,useComboboxProps:w,isErrored:C,errorText:z,defaultSelectedItem:M,isMenuLoading:x,contentProps:S})=>{
 const E=vn(),[_,H]=t.useState(a),{isOpen:D,selectedItem:L,getToggleButtonProps:V,getLabelProps:A,getMenuProps:k,openMenu:T,highlightedIndex:P,setHighlightedIndex:I,setInputValue:R,inputValue:O,getItemProps:N,getInputProps:F}=Nf({
-selectedItem:M,items:_,onSelectedItemChange:({selectedItem:e})=>{
+id:r,selectedItem:M,items:_,onSelectedItemChange:({selectedItem:e})=>{
 console.log("onSelectedItemChange",{sI:e}),b?.(e??null)},
 onIsOpenChange:({isOpen:t})=>{
 if(t&&(""===O||L&&h&&(O||"").toLowerCase()===`${L?.[h||e]||""}`.toLowerCase()))H(a),
@@ -3640,13 +3641,12 @@ D&&(""===t||L&&h&&(t||"").toLowerCase()===`${L?.[h||e]||""}`.toLowerCase())?H(a)
 ;return t.createElement(Ad,{width:p},t.createElement(Fn,{
 className:"input-label",...A({disabled:l,readOnly:i})
 },n,c&&t.createElement(jn,null,"*")),t.createElement(bm,{...F({name:d,
-readOnly:i,disabled:l,id:r}),placeholder:o,
+readOnly:i,disabled:l}),placeholder:o,
 endAdornment:t.createElement(Od,null,!l&&!i&&!s&&L&&t.createElement($n,{
-onClick:e=>{
-console.log("onClick WORKING"),R(""),b?.(null),T(),e.stopPropagation()},style:{
-borderRadius:"50%"}},t.createElement(mr,{fill:E.colors.text.primary
-})),t.createElement($n,{...V({disabled:l,readOnly:i})},t.createElement(Vd,{
-$isOpen:B,fill:E.colors.text.primary,width:8,height:8})))
+"aria-label":"close",onClick:e=>{console.log("onClick WORKING"),R(""),b?.(null),
+T(),e.stopPropagation()},style:{borderRadius:"50%"}},t.createElement(mr,{
+fill:E.colors.text.primary})),t.createElement($n,{...V({disabled:l,readOnly:i})
+},t.createElement(Vd,{$isOpen:B,fill:E.colors.text.primary,width:8,height:8})))
 }),!i&&!l&&t.createElement(Td,{$isOpen:D,...S,...k({disabled:l,readOnly:i})
 },x?t.createElement(Rd,null,t.createElement(Em,null)):t.createElement(t.Fragment,null,D&&0===_.length&&t.createElement(t.Fragment,null,f?t.createElement(Pd,null,t.createElement(Id,{
 onClick:e=>{e.stopPropagation(),m&&m({inputValue:O,customValues:!0}),R("")}
@@ -15858,16 +15858,17 @@ fillRule:"evenodd",clipRule:"evenodd",
 d:"M8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0ZM8 14.6C4.35492 14.6 1.4 11.6451 1.4 8C1.4 4.35492 4.35492 1.4 8 1.4C11.6451 1.4 14.6 4.35492 14.6 8C14.5945 11.6428 11.6428 14.5945 8 14.6ZM9 8L10.82 6.17L10.83 6.18C11.1061 5.90386 11.1061 5.45614 10.83 5.18C10.5539 4.90386 10.1061 4.90386 9.83 5.18L8 7L6.18 5.17C5.90386 4.89386 5.45614 4.89386 5.18 5.17C4.90386 5.44614 4.90386 5.89386 5.18 6.17L7 8L5.17 9.82C4.89386 10.0961 4.89386 10.5439 5.17 10.82C5.44614 11.0961 5.89386 11.0961 6.17 10.82L8 9L9.83 10.83C10.1061 11.1061 10.5539 11.1061 10.83 10.83C11.1061 10.5539 11.1061 10.1061 10.83 9.83L9 8Z",
 fill:n.colors.text.semantic.error}))},Rj=({index:e,...n})=>{
 const r=vn(),{updateToasts:a,windowState:o}=t.useContext($B)??{},i=t.useRef(null)
-;return t.createElement(t.Fragment,null,t.createElement(Ej,{ref:i,
-toastType:n.type,toastIndex:e,className:`ToastRoot Toast-${n.id??""}`.trim(),
-duration:n.delay??3e3,onOpenChange:e=>{e||a((e=>e.filter((e=>e.id!==n.id))))}
-},t.createElement(Vj,{className:"ToastProgress",windowState:o,toastType:n.type,
-delay:n.delay??3e3
+;return t.createElement(t.Fragment,null,t.createElement(Ej,{role:"alert",
+"aria-live":"polite",ref:i,toastType:n.type,toastIndex:e,
+className:`ToastRoot Toast-${n.id??""}`.trim(),duration:n.delay??3e3,
+onOpenChange:e=>{e||a((e=>e.filter((e=>e.id!==n.id))))}},t.createElement(Vj,{
+className:"ToastProgress",windowState:o,toastType:n.type,delay:n.delay??3e3
 }),t.createElement(Lj,null,n.customIcon?t.createElement(t.Fragment,null,n.customIcon):t.createElement(t.Fragment,null,"success"===n.type&&t.createElement(Tj,{
 fill:r.colors.text.semantic.success}),"warning"===n.type&&t.createElement(Pj,{
 fill:r.colors.text.semantic.warning}),"error"===n.type&&t.createElement(Ij,{
 fill:r.colors.text.semantic.error})),t.createElement(_j,{className:"ToastTitle"
-},n.text),t.createElement(Hj,{className:"ToastAction",asChild:!0,altText:"Close"
+},n.text),t.createElement(Hj,{className:"ToastAction",asChild:!0,
+altText:"Close","aria-label":"Close"
 },t.createElement(Zn,null,t.createElement(mr,{fill:r.colors.text.primary}))))))
 },Oj=()=>{const e=((e=qN())=>{
 const t=`ui-${e}`,{isBrowser:n}=Aj(),[r,a]=m(n?kj(t):null);return p((()=>{
@@ -16116,10 +16117,11 @@ container:a},r)))},H$=b$,D$=En(c(((e,t)=>{const{__scopeTooltip:n,...r}=e,a=o$(n)
 `,V$=En(x$)``,A$=En(S$)``,k$=En(E$)``,T$=En(_$)``,P$=({position:e="bottom",label:n,html:r,style:a={},children:o,className:i="",disabled:l=!1,delay:c=300,arrow:s=!0,providerProps:u,rootProps:d})=>{
 const[h="bottom",p="center"]=e.split("-");return t.createElement(V$,{
 delayDuration:c,...u},t.createElement(A$,{...d,open:!l&&void 0
-},t.createElement(k$,{className:"TooltipTrigger",asChild:!0
-},t.createElement(Zn,{className:i
-},o)),t.createElement(T$,null,t.createElement(L$,{forceMount:!0,
-className:"TooltipContent",style:a,sideOffset:5,"aria-disabled":l,side:h,align:p
+},t.createElement(k$,{className:"TooltipTrigger",asChild:!0,
+"aria-label":"string"==typeof o?o:"TooltipTrigger"},t.createElement(Zn,{
+className:i},o)),t.createElement(T$,null,t.createElement(L$,{forceMount:!0,
+className:"TooltipContent",style:a,sideOffset:5,"aria-disabled":l,
+"aria-live":"polite",side:h,align:p
 },n?t.createElement(t.Fragment,null,n):t.createElement(t.Fragment,null,r),s&&t.createElement(D$,null)))))
 },I$=e=>{
 const{styles:n,in:r,timeout:a=150,transition:o=`all ${a}ms ease-in-out`,children:i,...l}=e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "freemium-ui",
-  "version": "2.0.0-beta.46",
+  "version": "2.0.0-beta.47",
   "description": "React Ui Components for Freemium Apps",
   "main": "./index.js",
   "module": "./index.js",