react-awesome-stars-rating 1.4.0 → 1.4.2

package/README.md

@@ -56,17 +56,60 @@ expose React as a global, and expects `window.React` to be present.
 ## Usage
 
 ```tsx
+import { useState } from 'react';
 import ReactStarsRating from 'react-awesome-stars-rating';
 
-const onChange = (value: number) => {
-  console.log(`Rating: ${value}`);
-};
-
 export default function Example() {
-  return <ReactStarsRating onChange={onChange} value={3.5} />;
+  const [rating, setRating] = useState(3.5);
+  return <ReactStarsRating value={rating} onChange={setRating} />;
 }
 ```
 
+Use `value` with a state-updating `onChange` when your application owns the
+rating. For a self-managed input, use `<ReactStarsRating defaultValue={3.5} />`.
+Do not switch between controlled and uncontrolled usage during an input's lifetime.
+
+### Clear a rating
+
+Keep zero as the empty rating and provide an explicitly labeled button:
+
+```tsx
+const [rating, setRating] = useState(0);
+
+<>
+  <ReactStarsRating
+    value={rating}
+    onChange={setRating}
+    ariaLabel="Your rating"
+  />
+  <button type="button" onClick={() => setRating(0)}>
+    Clear rating
+  </button>
+</>;
+```
+
+### Display an average
+
+Use `readOnly` for aggregate scores, with visible text so the number and review
+count are available without interpreting the star graphic:
+
+```tsx
+<>
+  <ReactStarsRating value={4.3} readOnly ariaLabel="Average rating" />
+  <span>4.3 out of 5 · 128 reviews</span>
+</>
+```
+
+With `isHalf`, the SVG displays partial fill for fractional values; editing
+still selects half-star steps. Do not round an average just to display it.
+
+### Next.js App Router
+
+The published entry point includes `"use client"`. A Server Component can render
+a read-only rating with serializable props. Put state and callbacks inside your
+own Client Component (`"use client"` at the top of its file), as in the usage
+example above; do not pass ordinary callback functions from a Server Component.
+
 ## Props
 
 | Name             | Description                               | Type                                       | Default         |
@@ -215,6 +258,47 @@ HTML hidden inputs do not participate in native constraint validation, so a
 For required ratings, validate the controlled value or submitted `FormData`
 and expose the result with `aria-invalid` and descriptive error text.
 
+For example, inside a component, validate on submit and focus the rating when
+invalid (also validate submitted data on your server):
+
+```tsx
+const [rating, setRating] = useState(0);
+const [error, setError] = useState(false);
+const ratingRef = useRef<HTMLSpanElement>(null);
+const errorId = useId();
+
+<form
+  onSubmit={(event) => {
+    event.preventDefault();
+    const invalid = rating === 0;
+    setError(invalid);
+    if (invalid) ratingRef.current?.focus();
+    else console.log('Submit rating:', rating);
+  }}
+>
+  <ReactStarsRating
+    ref={ratingRef}
+    name="rating"
+    value={rating}
+    onChange={(value) => {
+      setRating(value);
+      setError(false);
+    }}
+    ariaLabel="Your rating (required)"
+    aria-invalid={error || undefined}
+    aria-describedby={error ? errorId : undefined}
+  />
+  {error && (
+    <p id={errorId} role="alert">
+      Choose a rating before submitting.
+    </p>
+  )}
+  <button type="submit">Submit</button>
+</form>;
+```
+
+Import `useState`, `useRef` and `useId` from React for this recipe.
+
 ### React Hook Form
 
 ```tsx
@@ -289,6 +373,18 @@ const form = useForm<FormValues>({
 
 ## Development
 
+### Maintenance and feedback
+
+The library is in maintenance mode: new feature development is paused while
+we collect real-world feedback. Bug fixes, accessibility reports and security
+updates remain welcome. Use the repository's bug and feature issue forms to
+include reproduction steps, versions and the user need behind a request.
+
+Automated keyboard, axe and browser checks do not establish physical-device
+screen-reader compatibility. VoiceOver on iPhone and TalkBack on Android still
+need manual verification; see `docs/accessibility-testing.md` in the repository
+for the procedure and recorded results.
+
 ```bash
 npm install
 npm run dev          # demo app

package/dist/index.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require("react"),t=require("react/jsx-runtime");var n=(e,t)=>Math.min(100,Math.max(0,Math.round((e-(t-1))*1e4)/100)),r=({primaryColor:e,secondaryColor:r,offset:i=50,index:a,value:o,fullId:s,halfId:c,noneId:l,hoverColor:u,hoverValue:d=null,committedValue:f=o,hoverGradientId:p})=>{if(u&&d!==null&&p){let i=Math.min(f,d),o=Math.max(f,d),s=n(i,a),c=n(o,a),l=[{start:0,end:s,color:d<=f?u:e},{start:s,end:c,color:d<=f?e:u},{start:c,end:100,color:r}].filter(({start:e,end:t})=>t>e);return(0,t.jsx)(`defs`,{children:(0,t.jsx)(`linearGradient`,{id:p,children:l.flatMap(({start:e,end:n,color:r},i)=>[(0,t.jsx)(`stop`,{offset:`${e}%`,stopColor:r},`${i}-start`),(0,t.jsx)(`stop`,{offset:`${n}%`,stopColor:r},`${i}-end`)])})})}let m=i;return a===1&&(m=Math.round(o%1*1e4)/100),a===1?(0,t.jsxs)(`defs`,{children:[(0,t.jsx)(`linearGradient`,{id:s,children:(0,t.jsx)(`stop`,{offset:`100%`,stopColor:e})}),(0,t.jsx)(`linearGradient`,{id:l,children:(0,t.jsx)(`stop`,{offset:`100%`,stopColor:r})}),(0,t.jsxs)(`linearGradient`,{id:c,children:[(0,t.jsx)(`stop`,{offset:`${m}%`,stopColor:e}),(0,t.jsx)(`stop`,{offset:`${m}%`,stopColor:r})]})]}):null},i=({viewBox:e=`0 0 306 306`,size:n,onPointerMove:i,onPointerLeave:a,onPointerDown:o,onPointerUp:s,onPointerCancel:c,index:l,value:u,isHalf:d,isRtl:f,onLostPointerCapture:p,primaryColor:m,secondaryColor:h,hoverColor:g,hoverValue:_=null,committedValue:v=u,fill:y,offset:b=50,fullId:x,halfId:S,noneId:C})=>{let w=y,T=`${x}-hover-${l}`;return w=g&&_!==null?`url(#${T})`:l<=u?`url(#${x})`:d&&Math.ceil(u)===l?`url(#${S})`:`url(#${C})`,(0,t.jsxs)(`svg`,{width:n,style:{forcedColorAdjust:`auto`,width:`var(--stars-rating-size)`,transform:f?`scaleX(-1)`:void 0},viewBox:e,xmlns:`http://www.w3.org/2000/svg`,xmlnsXlink:`http://www.w3.org/1999/xlink`,onPointerLeave:a,onPointerMove:i,onPointerDown:o,onPointerUp:s,onPointerCancel:c,onLostPointerCapture:p,children:[(0,t.jsx)(r,{primaryColor:m,secondaryColor:h,offset:b,index:l,value:u,fullId:x,halfId:S,noneId:C,hoverColor:g,hoverValue:_,committedValue:v,hoverGradientId:T}),(0,t.jsx)(`polygon`,{fill:w,points:`153,230.775 247.35,299.625 211.65,187.425 306,121.125 191.25,121.125 153,6.375 114.75,121.125 0,121.125 94.35,187.425 58.65,299.625`,pointerEvents:`none`})]})},a={activeContainer:{border:`none`,display:`inline-flex`},inActiveContainer:{border:`none`,outline:0,display:`inline-flex`}},o=e=>Number.isFinite(e)&&e>=1?Math.floor(e):5,s=(e,t,n=0)=>Number.isFinite(e)&&e>=n?e:t,c=(e,t,n)=>{let r=Math.min(Math.max(Number.isFinite(e)?e:0,0),t);return n?r:Math.round(r)},l=(0,e.forwardRef)(function({id:n,value:r,defaultValue:l=0,onChange:u=()=>{},onBlur:d,onFocus:f,name:p,form:m,disabled:h=!1,readOnly:g=!1,isEdit:_=!0,isHalf:v=!0,count:y=5,size:b=25,starGap:x=0,className:S=``,style:C,dir:w=`ltr`,primaryColor:T=`var(--stars-rating-primary-color, orange)`,secondaryColor:ee=`var(--stars-rating-secondary-color, grey)`,hoverColor:E,isArrowSubmit:te=!1,ariaLabel:ne=`Star rating`,ariaLabelledBy:D,getValueText:re=(e,t)=>`${e} of ${t}`,...ie},O){let k=w===`rtl`,A=_&&!g,j=o(y),M=s(b,25,2**-52),ae=s(x,0),N=r!==void 0,[oe,P]=(0,e.useState)(()=>c(l,j,v)),F=c(r??oe,j,v),I=(0,e.useId)().replace(/:/g,``),L=n??`react-stars-rating-${I}`,[R,z]=(0,e.useState)(()=>({sourceValue:F,displayValue:F})),B=(0,e.useRef)(null),V=(0,e.useRef)(null),[se,H]=(0,e.useState)(null),[ce,U]=(0,e.useState)(!1),W=(0,e.useRef)(null);(0,e.useImperativeHandle)(O,()=>W.current,[]);let G=R.sourceValue===F?R.displayValue:F,K=e=>{z({sourceValue:F,displayValue:c(e,j,v)})},le=(0,e.useMemo)(()=>`fullId-${L}`,[L]),ue=(0,e.useMemo)(()=>`halfId-${L}`,[L]),de=(0,e.useMemo)(()=>`noneId-${L}`,[L]);(0,e.useEffect)(()=>{B.current=null},[F]),(0,e.useEffect)(()=>{if(N)return;let e=m?document.getElementById(m):W.current?.closest(`form`),t=!0,n=e=>{setTimeout(()=>{if(!t||e.defaultPrevented)return;let n=c(l,j,v);B.current=null,V.current=null,H(null),P(n),z({sourceValue:n,displayValue:n})})};return e?.addEventListener(`reset`,n),()=>{t=!1,e?.removeEventListener(`reset`,n)}},[l,m,N,v,j]);let q=(e,t)=>{let n=Array.from(W.current?.querySelectorAll(`svg`)??[]),r=n.find(t=>{let n=t.getBoundingClientRect();return n.width>0&&(k?e.clientX>=n.left:e.clientX<=n.right)})??n[n.length-1]??e.currentTarget,i=n.indexOf(r)+1||t;if(!v)return i;let a=r.getBoundingClientRect();return(k?a.right-e.clientX:e.clientX-a.left)>a.width/2?i:i-.5},fe=(e,t)=>{if(!A||h)return;let n=V.current;if(n!==null&&n!==e.pointerId||n===null&&(e.pointerType===`touch`||e.buttons!==0))return;let r=q(e,t);B.current=null,H(r),K(r)},pe=e=>{!A||h||e.buttons!==0||(H(null),K(F))},me=e=>{U(!1);let t=B.current;B.current=null,A&&!h&&t!==null&&J(t),d?.(e)},J=e=>{let t=c(e,j,v);K(t),N||P(t),u(t)},he=(e,t)=>{if(!A||h||e.button!==0||e.isPrimary===!1||V.current!==null)return;W.current?.focus(),V.current=e.pointerId,e.currentTarget.setPointerCapture?.(e.pointerId),B.current=null;let n=q(e,t);H(n),K(n)},ge=(e,t)=>{V.current===e.pointerId&&e.button===0&&(V.current=null,e.currentTarget.releasePointerCapture?.(e.pointerId),!(!A||h)&&(J(q(e,t)),e.pointerType===`touch`&&H(null)))},Y=e=>{V.current===e.pointerId&&(V.current=null,B.current=null,H(null),K(F))},X=e=>{let t=c(e,j,v);t!==G&&(K(t),te?(B.current=null,J(t)):B.current=t)},Z=e=>{let t=G%1==.5?G:Math.round(G);X(t+e)},_e=e=>{switch(e.key){case`ArrowLeft`:e.preventDefault(),Z((v?.5:1)*(k?1:-1));break;case`ArrowRight`:e.preventDefault(),Z((v?.5:1)*(k?-1:1));break;case`ArrowDown`:e.preventDefault(),Z(v?-.5:-1);break;case`ArrowUp`:e.preventDefault(),Z(v?.5:1);break;case`Home`:e.preventDefault(),X(0);break;case`End`:e.preventDefault(),X(j);break;case`Enter`:e.preventDefault(),B.current=null,J(G)}},ve=()=>Array.from({length:j},(e,n)=>{let r=n+1,a=r!==j;return(0,t.jsx)(`span`,{className:`star star-${r}`,style:a?{paddingInlineEnd:`var(--stars-rating-gap)`}:void 0,children:(0,t.jsx)(i,{index:r,value:G,size:M,isHalf:v,isRtl:k,fullId:le,halfId:ue,noneId:de,primaryColor:T,secondaryColor:ee,hoverColor:E,hoverValue:se,committedValue:F,onPointerMove:e=>fe(e,r),onPointerLeave:pe,onPointerDown:e=>he(e,r),onPointerUp:e=>ge(e,r),onPointerCancel:Y,onLostPointerCapture:Y})},`react-stars-rating-char${r}`)}),Q=A&&!h,$=c(G,j,v),ye=e=>{U(e.currentTarget.matches(`:focus-visible`)),f?.(e)},be={...A?a.activeContainer:a.inActiveContainer,"--stars-rating-gap":`${ae}px`,"--stars-rating-size":`${M}px`,...ce?{outline:`2px solid var(--stars-rating-focus-color, highlight)`,outlineOffset:2}:void 0,...C};return(0,t.jsxs)(`span`,{...ie,ref:W,id:L,dir:w,role:`slider`,"aria-label":D?void 0:ne,"aria-labelledby":D,"aria-valuemin":0,"aria-valuemax":j,"aria-valuenow":$,"aria-valuetext":re($,j),"aria-orientation":`horizontal`,"aria-readonly":!A,"aria-disabled":h||void 0,tabIndex:Q?0:-1,onKeyDown:Q?_e:void 0,onBlur:me,onFocus:ye,style:be,className:S,children:[ve(),p?(0,t.jsx)(`input`,{type:`hidden`,name:p,value:F,disabled:h,form:m}):null]})});exports.ReactStarsRating=l,exports.default=l;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require("react"),t=require("react/jsx-runtime");var n=(e,t)=>Math.min(100,Math.max(0,Math.round((e-(t-1))*1e4)/100)),r=({primaryColor:e,secondaryColor:r,offset:i=50,index:a,value:o,fullId:s,halfId:c,noneId:l,hoverColor:u,hoverValue:d=null,committedValue:f=o,hoverGradientId:p})=>{if(u&&d!==null&&p){let i=Math.min(f,d),o=Math.max(f,d),s=n(i,a),c=n(o,a),l=[{start:0,end:s,color:d<=f?u:e},{start:s,end:c,color:d<=f?e:u},{start:c,end:100,color:r}].filter(({start:e,end:t})=>t>e);return(0,t.jsx)(`defs`,{children:(0,t.jsx)(`linearGradient`,{id:p,children:l.flatMap(({start:e,end:n,color:r},i)=>[(0,t.jsx)(`stop`,{offset:`${e}%`,stopColor:r},`${i}-start`),(0,t.jsx)(`stop`,{offset:`${n}%`,stopColor:r},`${i}-end`)])})})}let m=i;return a===1&&(m=Math.round(o%1*1e4)/100),a===1?(0,t.jsxs)(`defs`,{children:[(0,t.jsx)(`linearGradient`,{id:s,children:(0,t.jsx)(`stop`,{offset:`100%`,stopColor:e})}),(0,t.jsx)(`linearGradient`,{id:l,children:(0,t.jsx)(`stop`,{offset:`100%`,stopColor:r})}),(0,t.jsxs)(`linearGradient`,{id:c,children:[(0,t.jsx)(`stop`,{offset:`${m}%`,stopColor:e}),(0,t.jsx)(`stop`,{offset:`${m}%`,stopColor:r})]})]}):null},i=({viewBox:e=`0 0 306 306`,size:n,onPointerMove:i,onPointerLeave:a,onPointerDown:o,onPointerUp:s,onPointerCancel:c,index:l,value:u,isHalf:d,isRtl:f,onLostPointerCapture:p,primaryColor:m,secondaryColor:h,hoverColor:g,hoverValue:_=null,committedValue:v=u,fill:y,offset:b=50,fullId:x,halfId:S,noneId:C})=>{let w=y,T=`${x}-hover-${l}`;return w=g&&_!==null?`url(#${T})`:l<=u?`url(#${x})`:d&&Math.ceil(u)===l?`url(#${S})`:`url(#${C})`,(0,t.jsxs)(`svg`,{width:n,style:{forcedColorAdjust:`auto`,width:`var(--stars-rating-size)`,transform:f?`scaleX(-1)`:void 0},viewBox:e,xmlns:`http://www.w3.org/2000/svg`,xmlnsXlink:`http://www.w3.org/1999/xlink`,onPointerLeave:a,onPointerMove:i,onPointerDown:o,onPointerUp:s,onPointerCancel:c,onLostPointerCapture:p,children:[(0,t.jsx)(r,{primaryColor:m,secondaryColor:h,offset:b,index:l,value:u,fullId:x,halfId:S,noneId:C,hoverColor:g,hoverValue:_,committedValue:v,hoverGradientId:T}),(0,t.jsx)(`polygon`,{fill:w,points:`153,230.775 247.35,299.625 211.65,187.425 306,121.125 191.25,121.125 153,6.375 114.75,121.125 0,121.125 94.35,187.425 58.65,299.625`,pointerEvents:`none`})]})},a={activeContainer:{border:`none`,display:`inline-flex`},inActiveContainer:{border:`none`,outline:0,display:`inline-flex`}},o=e=>Number.isFinite(e)&&e>=1?Math.floor(e):5,s=(e,t,n=0)=>Number.isFinite(e)&&e>=n?e:t,c=(e,t,n)=>{let r=Math.min(Math.max(Number.isFinite(e)?e:0,0),t);return n?r:Math.round(r)},l=(0,e.forwardRef)(function({id:n,value:r,defaultValue:l=0,onChange:u=()=>{},onBlur:d,onFocus:f,name:p,form:m,disabled:h=!1,readOnly:g=!1,isEdit:_=!0,isHalf:v=!0,count:y=5,size:b=25,starGap:x=0,className:S=``,style:C,dir:w=`ltr`,primaryColor:T=`var(--stars-rating-primary-color, orange)`,secondaryColor:ee=`var(--stars-rating-secondary-color, grey)`,hoverColor:E,isArrowSubmit:te=!1,ariaLabel:ne=`Star rating`,ariaLabelledBy:D,getValueText:re=(e,t)=>`${e} of ${t}`,...ie},O){let k=w===`rtl`,A=_&&!g,j=o(y),M=s(b,25,2**-52),ae=s(x,0),N=r!==void 0,[oe,P]=(0,e.useState)(()=>c(l,j,v)),F=c(r??oe,j,v),I=(0,e.useId)().replace(/:/g,``),L=n??`react-stars-rating-${I}`,[R,z]=(0,e.useState)(()=>({sourceValue:F,displayValue:F})),B=(0,e.useRef)(null),V=(0,e.useRef)(null),[se,H]=(0,e.useState)(null),[ce,U]=(0,e.useState)(!1),W=(0,e.useRef)(null);(0,e.useImperativeHandle)(O,()=>W.current,[]),R.sourceValue!==F&&(z({sourceValue:F,displayValue:F}),H(null));let G=R.sourceValue===F?R.displayValue:F,K=e=>{z({sourceValue:F,displayValue:c(e,j,v)})},le=(0,e.useMemo)(()=>`fullId-${L}`,[L]),ue=(0,e.useMemo)(()=>`halfId-${L}`,[L]),de=(0,e.useMemo)(()=>`noneId-${L}`,[L]);(0,e.useEffect)(()=>{B.current=null},[F]),(0,e.useEffect)(()=>{if(N)return;let e=m?document.getElementById(m):W.current?.closest(`form`),t=!0,n=e=>{setTimeout(()=>{if(!t||e.defaultPrevented)return;let n=c(l,j,v);B.current=null,V.current=null,H(null),P(n),z({sourceValue:n,displayValue:n})})};return e?.addEventListener(`reset`,n),()=>{t=!1,e?.removeEventListener(`reset`,n)}},[l,m,N,v,j]);let q=(e,t)=>{let n=Array.from(W.current?.querySelectorAll(`svg`)??[]),r=n.find(t=>{let n=t.getBoundingClientRect();return n.width>0&&(k?e.clientX>=n.left:e.clientX<=n.right)})??n[n.length-1]??e.currentTarget,i=n.indexOf(r)+1||t;if(!v)return i;let a=r.getBoundingClientRect();return(k?a.right-e.clientX:e.clientX-a.left)>a.width/2?i:i-.5},fe=(e,t)=>{if(!A||h)return;let n=V.current;if(n!==null&&n!==e.pointerId||n===null&&(e.pointerType===`touch`||e.buttons!==0))return;let r=q(e,t);B.current=null,H(r),K(r)},pe=e=>{!A||h||e.buttons!==0||(H(null),K(F))},me=e=>{U(!1);let t=B.current;B.current=null,A&&!h&&t!==null&&J(t),d?.(e)},J=e=>{let t=c(e,j,v);K(t),N||P(t),u(t)},he=(e,t)=>{if(!A||h||e.button!==0||e.isPrimary===!1||V.current!==null)return;W.current?.focus(),V.current=e.pointerId,e.currentTarget.setPointerCapture?.(e.pointerId),B.current=null;let n=q(e,t);H(n),K(n)},ge=(e,t)=>{V.current===e.pointerId&&e.button===0&&(V.current=null,e.currentTarget.releasePointerCapture?.(e.pointerId),!(!A||h)&&(J(q(e,t)),e.pointerType===`touch`&&H(null)))},Y=e=>{V.current===e.pointerId&&(V.current=null,B.current=null,H(null),K(F))},X=e=>{let t=c(e,j,v);t!==G&&(K(t),te?(B.current=null,J(t)):B.current=t)},Z=e=>{let t=G%1==.5?G:Math.round(G);X(t+e)},_e=e=>{switch(e.key){case`ArrowLeft`:e.preventDefault(),Z((v?.5:1)*(k?1:-1));break;case`ArrowRight`:e.preventDefault(),Z((v?.5:1)*(k?-1:1));break;case`ArrowDown`:e.preventDefault(),Z(v?-.5:-1);break;case`ArrowUp`:e.preventDefault(),Z(v?.5:1);break;case`Home`:e.preventDefault(),X(0);break;case`End`:e.preventDefault(),X(j);break;case`Enter`:e.preventDefault(),B.current=null,J(G)}},ve=()=>Array.from({length:j},(e,n)=>{let r=n+1,a=r!==j;return(0,t.jsx)(`span`,{className:`star star-${r}`,style:a?{paddingInlineEnd:`var(--stars-rating-gap)`}:void 0,children:(0,t.jsx)(i,{index:r,value:G,size:M,isHalf:v,isRtl:k,fullId:le,halfId:ue,noneId:de,primaryColor:T,secondaryColor:ee,hoverColor:E,hoverValue:se,committedValue:F,onPointerMove:e=>fe(e,r),onPointerLeave:pe,onPointerDown:e=>he(e,r),onPointerUp:e=>ge(e,r),onPointerCancel:Y,onLostPointerCapture:Y})},`react-stars-rating-char${r}`)}),Q=A&&!h,$=c(G,j,v),ye=e=>{U(e.currentTarget.matches(`:focus-visible`)),f?.(e)},be={...A?a.activeContainer:a.inActiveContainer,"--stars-rating-gap":`${ae}px`,"--stars-rating-size":`${M}px`,...ce?{outline:`2px solid var(--stars-rating-focus-color, highlight)`,outlineOffset:2}:void 0,...C};return(0,t.jsxs)(`span`,{...ie,ref:W,id:L,dir:w,role:`slider`,"aria-label":D?void 0:ne,"aria-labelledby":D,"aria-valuemin":0,"aria-valuemax":j,"aria-valuenow":$,"aria-valuetext":re($,j),"aria-orientation":`horizontal`,"aria-readonly":!A,"aria-disabled":h||void 0,tabIndex:Q?0:-1,onKeyDown:Q?_e:void 0,onBlur:me,onFocus:ye,style:be,className:S,children:[ve(),p?(0,t.jsx)(`input`,{type:`hidden`,name:p,value:F,disabled:h,form:m}):null]})});exports.ReactStarsRating=l,exports.default=l;

package/dist/index.mjs

@@ -1 +1 @@
-"use client";import{forwardRef as e,useEffect as t,useId as n,useImperativeHandle as r,useMemo as i,useRef as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";var l=(e,t)=>Math.min(100,Math.max(0,Math.round((e-(t-1))*1e4)/100)),u=({primaryColor:e,secondaryColor:t,offset:n=50,index:r,value:i,fullId:a,halfId:o,noneId:u,hoverColor:d,hoverValue:f=null,committedValue:p=i,hoverGradientId:m})=>{if(d&&f!==null&&m){let n=Math.min(p,f),i=Math.max(p,f),a=l(n,r),o=l(i,r),c=[{start:0,end:a,color:f<=p?d:e},{start:a,end:o,color:f<=p?e:d},{start:o,end:100,color:t}].filter(({start:e,end:t})=>t>e);return s(`defs`,{children:s(`linearGradient`,{id:m,children:c.flatMap(({start:e,end:t,color:n},r)=>[s(`stop`,{offset:`${e}%`,stopColor:n},`${r}-start`),s(`stop`,{offset:`${t}%`,stopColor:n},`${r}-end`)])})})}let h=n;return r===1&&(h=Math.round(i%1*1e4)/100),r===1?c(`defs`,{children:[s(`linearGradient`,{id:a,children:s(`stop`,{offset:`100%`,stopColor:e})}),s(`linearGradient`,{id:u,children:s(`stop`,{offset:`100%`,stopColor:t})}),c(`linearGradient`,{id:o,children:[s(`stop`,{offset:`${h}%`,stopColor:e}),s(`stop`,{offset:`${h}%`,stopColor:t})]})]}):null},d=({viewBox:e=`0 0 306 306`,size:t,onPointerMove:n,onPointerLeave:r,onPointerDown:i,onPointerUp:a,onPointerCancel:o,index:l,value:d,isHalf:f,isRtl:p,onLostPointerCapture:m,primaryColor:h,secondaryColor:g,hoverColor:_,hoverValue:v=null,committedValue:y=d,fill:b,offset:x=50,fullId:S,halfId:C,noneId:w})=>{let T=b,E=`${S}-hover-${l}`;return T=_&&v!==null?`url(#${E})`:l<=d?`url(#${S})`:f&&Math.ceil(d)===l?`url(#${C})`:`url(#${w})`,c(`svg`,{width:t,style:{forcedColorAdjust:`auto`,width:`var(--stars-rating-size)`,transform:p?`scaleX(-1)`:void 0},viewBox:e,xmlns:`http://www.w3.org/2000/svg`,xmlnsXlink:`http://www.w3.org/1999/xlink`,onPointerLeave:r,onPointerMove:n,onPointerDown:i,onPointerUp:a,onPointerCancel:o,onLostPointerCapture:m,children:[s(u,{primaryColor:h,secondaryColor:g,offset:x,index:l,value:d,fullId:S,halfId:C,noneId:w,hoverColor:_,hoverValue:v,committedValue:y,hoverGradientId:E}),s(`polygon`,{fill:T,points:`153,230.775 247.35,299.625 211.65,187.425 306,121.125 191.25,121.125 153,6.375 114.75,121.125 0,121.125 94.35,187.425 58.65,299.625`,pointerEvents:`none`})]})},f={activeContainer:{border:`none`,display:`inline-flex`},inActiveContainer:{border:`none`,outline:0,display:`inline-flex`}},p=e=>Number.isFinite(e)&&e>=1?Math.floor(e):5,m=(e,t,n=0)=>Number.isFinite(e)&&e>=n?e:t,h=(e,t,n)=>{let r=Math.min(Math.max(Number.isFinite(e)?e:0,0),t);return n?r:Math.round(r)},g=e(function({id:e,value:l,defaultValue:u=0,onChange:g=()=>{},onBlur:_,onFocus:v,name:y,form:b,disabled:x=!1,readOnly:S=!1,isEdit:C=!0,isHalf:w=!0,count:T=5,size:E=25,starGap:ee=0,className:te=``,style:ne,dir:D=`ltr`,primaryColor:re=`var(--stars-rating-primary-color, orange)`,secondaryColor:ie=`var(--stars-rating-secondary-color, grey)`,hoverColor:ae,isArrowSubmit:oe=!1,ariaLabel:se=`Star rating`,ariaLabelledBy:O,getValueText:k=(e,t)=>`${e} of ${t}`,...ce},le){let A=D===`rtl`,j=C&&!S,M=p(T),N=m(E,25,2**-52),ue=m(ee,0),P=l!==void 0,[de,F]=o(()=>h(u,M,w)),I=h(l??de,M,w),fe=n().replace(/:/g,``),L=e??`react-stars-rating-${fe}`,[R,z]=o(()=>({sourceValue:I,displayValue:I})),B=a(null),V=a(null),[pe,H]=o(null),[me,U]=o(!1),W=a(null);r(le,()=>W.current,[]);let G=R.sourceValue===I?R.displayValue:I,K=e=>{z({sourceValue:I,displayValue:h(e,M,w)})},he=i(()=>`fullId-${L}`,[L]),ge=i(()=>`halfId-${L}`,[L]),_e=i(()=>`noneId-${L}`,[L]);t(()=>{B.current=null},[I]),t(()=>{if(P)return;let e=b?document.getElementById(b):W.current?.closest(`form`),t=!0,n=e=>{setTimeout(()=>{if(!t||e.defaultPrevented)return;let n=h(u,M,w);B.current=null,V.current=null,H(null),F(n),z({sourceValue:n,displayValue:n})})};return e?.addEventListener(`reset`,n),()=>{t=!1,e?.removeEventListener(`reset`,n)}},[u,b,P,w,M]);let q=(e,t)=>{let n=Array.from(W.current?.querySelectorAll(`svg`)??[]),r=n.find(t=>{let n=t.getBoundingClientRect();return n.width>0&&(A?e.clientX>=n.left:e.clientX<=n.right)})??n[n.length-1]??e.currentTarget,i=n.indexOf(r)+1||t;if(!w)return i;let a=r.getBoundingClientRect();return(A?a.right-e.clientX:e.clientX-a.left)>a.width/2?i:i-.5},ve=(e,t)=>{if(!j||x)return;let n=V.current;if(n!==null&&n!==e.pointerId||n===null&&(e.pointerType===`touch`||e.buttons!==0))return;let r=q(e,t);B.current=null,H(r),K(r)},ye=e=>{!j||x||e.buttons!==0||(H(null),K(I))},be=e=>{U(!1);let t=B.current;B.current=null,j&&!x&&t!==null&&J(t),_?.(e)},J=e=>{let t=h(e,M,w);K(t),P||F(t),g(t)},xe=(e,t)=>{if(!j||x||e.button!==0||e.isPrimary===!1||V.current!==null)return;W.current?.focus(),V.current=e.pointerId,e.currentTarget.setPointerCapture?.(e.pointerId),B.current=null;let n=q(e,t);H(n),K(n)},Se=(e,t)=>{V.current===e.pointerId&&e.button===0&&(V.current=null,e.currentTarget.releasePointerCapture?.(e.pointerId),!(!j||x)&&(J(q(e,t)),e.pointerType===`touch`&&H(null)))},Y=e=>{V.current===e.pointerId&&(V.current=null,B.current=null,H(null),K(I))},X=e=>{let t=h(e,M,w);t!==G&&(K(t),oe?(B.current=null,J(t)):B.current=t)},Z=e=>{let t=G%1==.5?G:Math.round(G);X(t+e)},Ce=e=>{switch(e.key){case`ArrowLeft`:e.preventDefault(),Z((w?.5:1)*(A?1:-1));break;case`ArrowRight`:e.preventDefault(),Z((w?.5:1)*(A?-1:1));break;case`ArrowDown`:e.preventDefault(),Z(w?-.5:-1);break;case`ArrowUp`:e.preventDefault(),Z(w?.5:1);break;case`Home`:e.preventDefault(),X(0);break;case`End`:e.preventDefault(),X(M);break;case`Enter`:e.preventDefault(),B.current=null,J(G)}},we=()=>Array.from({length:M},(e,t)=>{let n=t+1,r=n!==M;return s(`span`,{className:`star star-${n}`,style:r?{paddingInlineEnd:`var(--stars-rating-gap)`}:void 0,children:s(d,{index:n,value:G,size:N,isHalf:w,isRtl:A,fullId:he,halfId:ge,noneId:_e,primaryColor:re,secondaryColor:ie,hoverColor:ae,hoverValue:pe,committedValue:I,onPointerMove:e=>ve(e,n),onPointerLeave:ye,onPointerDown:e=>xe(e,n),onPointerUp:e=>Se(e,n),onPointerCancel:Y,onLostPointerCapture:Y})},`react-stars-rating-char${n}`)}),Q=j&&!x,$=h(G,M,w),Te=e=>{U(e.currentTarget.matches(`:focus-visible`)),v?.(e)},Ee={...j?f.activeContainer:f.inActiveContainer,"--stars-rating-gap":`${ue}px`,"--stars-rating-size":`${N}px`,...me?{outline:`2px solid var(--stars-rating-focus-color, highlight)`,outlineOffset:2}:void 0,...ne};return c(`span`,{...ce,ref:W,id:L,dir:D,role:`slider`,"aria-label":O?void 0:se,"aria-labelledby":O,"aria-valuemin":0,"aria-valuemax":M,"aria-valuenow":$,"aria-valuetext":k($,M),"aria-orientation":`horizontal`,"aria-readonly":!j,"aria-disabled":x||void 0,tabIndex:Q?0:-1,onKeyDown:Q?Ce:void 0,onBlur:be,onFocus:Te,style:Ee,className:te,children:[we(),y?s(`input`,{type:`hidden`,name:y,value:I,disabled:x,form:b}):null]})});export{g as ReactStarsRating,g as default};
+"use client";import{forwardRef as e,useEffect as t,useId as n,useImperativeHandle as r,useMemo as i,useRef as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";var l=(e,t)=>Math.min(100,Math.max(0,Math.round((e-(t-1))*1e4)/100)),u=({primaryColor:e,secondaryColor:t,offset:n=50,index:r,value:i,fullId:a,halfId:o,noneId:u,hoverColor:d,hoverValue:f=null,committedValue:p=i,hoverGradientId:m})=>{if(d&&f!==null&&m){let n=Math.min(p,f),i=Math.max(p,f),a=l(n,r),o=l(i,r),c=[{start:0,end:a,color:f<=p?d:e},{start:a,end:o,color:f<=p?e:d},{start:o,end:100,color:t}].filter(({start:e,end:t})=>t>e);return s(`defs`,{children:s(`linearGradient`,{id:m,children:c.flatMap(({start:e,end:t,color:n},r)=>[s(`stop`,{offset:`${e}%`,stopColor:n},`${r}-start`),s(`stop`,{offset:`${t}%`,stopColor:n},`${r}-end`)])})})}let h=n;return r===1&&(h=Math.round(i%1*1e4)/100),r===1?c(`defs`,{children:[s(`linearGradient`,{id:a,children:s(`stop`,{offset:`100%`,stopColor:e})}),s(`linearGradient`,{id:u,children:s(`stop`,{offset:`100%`,stopColor:t})}),c(`linearGradient`,{id:o,children:[s(`stop`,{offset:`${h}%`,stopColor:e}),s(`stop`,{offset:`${h}%`,stopColor:t})]})]}):null},d=({viewBox:e=`0 0 306 306`,size:t,onPointerMove:n,onPointerLeave:r,onPointerDown:i,onPointerUp:a,onPointerCancel:o,index:l,value:d,isHalf:f,isRtl:p,onLostPointerCapture:m,primaryColor:h,secondaryColor:g,hoverColor:_,hoverValue:v=null,committedValue:y=d,fill:b,offset:x=50,fullId:S,halfId:C,noneId:w})=>{let T=b,E=`${S}-hover-${l}`;return T=_&&v!==null?`url(#${E})`:l<=d?`url(#${S})`:f&&Math.ceil(d)===l?`url(#${C})`:`url(#${w})`,c(`svg`,{width:t,style:{forcedColorAdjust:`auto`,width:`var(--stars-rating-size)`,transform:p?`scaleX(-1)`:void 0},viewBox:e,xmlns:`http://www.w3.org/2000/svg`,xmlnsXlink:`http://www.w3.org/1999/xlink`,onPointerLeave:r,onPointerMove:n,onPointerDown:i,onPointerUp:a,onPointerCancel:o,onLostPointerCapture:m,children:[s(u,{primaryColor:h,secondaryColor:g,offset:x,index:l,value:d,fullId:S,halfId:C,noneId:w,hoverColor:_,hoverValue:v,committedValue:y,hoverGradientId:E}),s(`polygon`,{fill:T,points:`153,230.775 247.35,299.625 211.65,187.425 306,121.125 191.25,121.125 153,6.375 114.75,121.125 0,121.125 94.35,187.425 58.65,299.625`,pointerEvents:`none`})]})},f={activeContainer:{border:`none`,display:`inline-flex`},inActiveContainer:{border:`none`,outline:0,display:`inline-flex`}},p=e=>Number.isFinite(e)&&e>=1?Math.floor(e):5,m=(e,t,n=0)=>Number.isFinite(e)&&e>=n?e:t,h=(e,t,n)=>{let r=Math.min(Math.max(Number.isFinite(e)?e:0,0),t);return n?r:Math.round(r)},g=e(function({id:e,value:l,defaultValue:u=0,onChange:g=()=>{},onBlur:_,onFocus:v,name:y,form:b,disabled:x=!1,readOnly:S=!1,isEdit:C=!0,isHalf:w=!0,count:T=5,size:E=25,starGap:ee=0,className:te=``,style:ne,dir:D=`ltr`,primaryColor:re=`var(--stars-rating-primary-color, orange)`,secondaryColor:ie=`var(--stars-rating-secondary-color, grey)`,hoverColor:ae,isArrowSubmit:oe=!1,ariaLabel:se=`Star rating`,ariaLabelledBy:O,getValueText:ce=(e,t)=>`${e} of ${t}`,...le},ue){let k=D===`rtl`,A=C&&!S,j=p(T),M=m(E,25,2**-52),de=m(ee,0),N=l!==void 0,[fe,P]=o(()=>h(u,j,w)),F=h(l??fe,j,w),pe=n().replace(/:/g,``),I=e??`react-stars-rating-${pe}`,[L,R]=o(()=>({sourceValue:F,displayValue:F})),z=a(null),B=a(null),[me,V]=o(null),[he,H]=o(!1),U=a(null);r(ue,()=>U.current,[]),L.sourceValue!==F&&(R({sourceValue:F,displayValue:F}),V(null));let W=L.sourceValue===F?L.displayValue:F,G=e=>{R({sourceValue:F,displayValue:h(e,j,w)})},K=i(()=>`fullId-${I}`,[I]),ge=i(()=>`halfId-${I}`,[I]),_e=i(()=>`noneId-${I}`,[I]);t(()=>{z.current=null},[F]),t(()=>{if(N)return;let e=b?document.getElementById(b):U.current?.closest(`form`),t=!0,n=e=>{setTimeout(()=>{if(!t||e.defaultPrevented)return;let n=h(u,j,w);z.current=null,B.current=null,V(null),P(n),R({sourceValue:n,displayValue:n})})};return e?.addEventListener(`reset`,n),()=>{t=!1,e?.removeEventListener(`reset`,n)}},[u,b,N,w,j]);let q=(e,t)=>{let n=Array.from(U.current?.querySelectorAll(`svg`)??[]),r=n.find(t=>{let n=t.getBoundingClientRect();return n.width>0&&(k?e.clientX>=n.left:e.clientX<=n.right)})??n[n.length-1]??e.currentTarget,i=n.indexOf(r)+1||t;if(!w)return i;let a=r.getBoundingClientRect();return(k?a.right-e.clientX:e.clientX-a.left)>a.width/2?i:i-.5},ve=(e,t)=>{if(!A||x)return;let n=B.current;if(n!==null&&n!==e.pointerId||n===null&&(e.pointerType===`touch`||e.buttons!==0))return;let r=q(e,t);z.current=null,V(r),G(r)},ye=e=>{!A||x||e.buttons!==0||(V(null),G(F))},be=e=>{H(!1);let t=z.current;z.current=null,A&&!x&&t!==null&&J(t),_?.(e)},J=e=>{let t=h(e,j,w);G(t),N||P(t),g(t)},xe=(e,t)=>{if(!A||x||e.button!==0||e.isPrimary===!1||B.current!==null)return;U.current?.focus(),B.current=e.pointerId,e.currentTarget.setPointerCapture?.(e.pointerId),z.current=null;let n=q(e,t);V(n),G(n)},Se=(e,t)=>{B.current===e.pointerId&&e.button===0&&(B.current=null,e.currentTarget.releasePointerCapture?.(e.pointerId),!(!A||x)&&(J(q(e,t)),e.pointerType===`touch`&&V(null)))},Y=e=>{B.current===e.pointerId&&(B.current=null,z.current=null,V(null),G(F))},X=e=>{let t=h(e,j,w);t!==W&&(G(t),oe?(z.current=null,J(t)):z.current=t)},Z=e=>{let t=W%1==.5?W:Math.round(W);X(t+e)},Ce=e=>{switch(e.key){case`ArrowLeft`:e.preventDefault(),Z((w?.5:1)*(k?1:-1));break;case`ArrowRight`:e.preventDefault(),Z((w?.5:1)*(k?-1:1));break;case`ArrowDown`:e.preventDefault(),Z(w?-.5:-1);break;case`ArrowUp`:e.preventDefault(),Z(w?.5:1);break;case`Home`:e.preventDefault(),X(0);break;case`End`:e.preventDefault(),X(j);break;case`Enter`:e.preventDefault(),z.current=null,J(W)}},we=()=>Array.from({length:j},(e,t)=>{let n=t+1,r=n!==j;return s(`span`,{className:`star star-${n}`,style:r?{paddingInlineEnd:`var(--stars-rating-gap)`}:void 0,children:s(d,{index:n,value:W,size:M,isHalf:w,isRtl:k,fullId:K,halfId:ge,noneId:_e,primaryColor:re,secondaryColor:ie,hoverColor:ae,hoverValue:me,committedValue:F,onPointerMove:e=>ve(e,n),onPointerLeave:ye,onPointerDown:e=>xe(e,n),onPointerUp:e=>Se(e,n),onPointerCancel:Y,onLostPointerCapture:Y})},`react-stars-rating-char${n}`)}),Q=A&&!x,$=h(W,j,w),Te=e=>{H(e.currentTarget.matches(`:focus-visible`)),v?.(e)},Ee={...A?f.activeContainer:f.inActiveContainer,"--stars-rating-gap":`${de}px`,"--stars-rating-size":`${M}px`,...he?{outline:`2px solid var(--stars-rating-focus-color, highlight)`,outlineOffset:2}:void 0,...ne};return c(`span`,{...le,ref:U,id:I,dir:D,role:`slider`,"aria-label":O?void 0:se,"aria-labelledby":O,"aria-valuemin":0,"aria-valuemax":j,"aria-valuenow":$,"aria-valuetext":ce($,j),"aria-orientation":`horizontal`,"aria-readonly":!A,"aria-disabled":x||void 0,tabIndex:Q?0:-1,onKeyDown:Q?Ce:void 0,onBlur:be,onFocus:Te,style:Ee,className:te,children:[we(),y?s(`input`,{type:`hidden`,name:y,value:F,disabled:x,form:b}):null]})});export{g as ReactStarsRating,g as default};

package/dist/index.umd.cjs

@@ -1 +1 @@
-"use client";(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react")):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ReactAwesomeStarsRating={},e.React))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=(e,t)=>Math.min(100,Math.max(0,Math.round((e-(t-1))*1e4)/100)),r=({primaryColor:e,secondaryColor:t,offset:r=50,index:i,value:a,fullId:o,halfId:s,noneId:c,hoverColor:l,hoverValue:u=null,committedValue:d=a,hoverGradientId:f})=>{if(l&&u!==null&&f){let r=Math.min(d,u),a=Math.max(d,u),o=n(r,i),s=n(a,i),c=[{start:0,end:o,color:u<=d?l:e},{start:o,end:s,color:u<=d?e:l},{start:s,end:100,color:t}].filter(({start:e,end:t})=>t>e);return React.createElement(`defs`,null,React.createElement(`linearGradient`,{id:f},c.flatMap(({start:e,end:t,color:n},r)=>[React.createElement(`stop`,{key:`${r}-start`,offset:`${e}%`,stopColor:n}),React.createElement(`stop`,{key:`${r}-end`,offset:`${t}%`,stopColor:n})])))}let p=r;return i===1&&(p=Math.round(a%1*1e4)/100),i===1?React.createElement(`defs`,null,React.createElement(`linearGradient`,{id:o},React.createElement(`stop`,{offset:`100%`,stopColor:e})),React.createElement(`linearGradient`,{id:c},React.createElement(`stop`,{offset:`100%`,stopColor:t})),React.createElement(`linearGradient`,{id:s},React.createElement(`stop`,{offset:`${p}%`,stopColor:e}),React.createElement(`stop`,{offset:`${p}%`,stopColor:t}))):null},i=({viewBox:e=`0 0 306 306`,size:t,onPointerMove:n,onPointerLeave:i,onPointerDown:a,onPointerUp:o,onPointerCancel:s,index:c,value:l,isHalf:u,isRtl:d,onLostPointerCapture:f,primaryColor:p,secondaryColor:m,hoverColor:h,hoverValue:g=null,committedValue:_=l,fill:v,offset:y=50,fullId:b,halfId:x,noneId:S})=>{let C=v,w=`${b}-hover-${c}`;return C=h&&g!==null?`url(#${w})`:c<=l?`url(#${b})`:u&&Math.ceil(l)===c?`url(#${x})`:`url(#${S})`,React.createElement(`svg`,{width:t,style:{forcedColorAdjust:`auto`,width:`var(--stars-rating-size)`,transform:d?`scaleX(-1)`:void 0},viewBox:e,xmlns:`http://www.w3.org/2000/svg`,xmlnsXlink:`http://www.w3.org/1999/xlink`,onPointerLeave:i,onPointerMove:n,onPointerDown:a,onPointerUp:o,onPointerCancel:s,onLostPointerCapture:f},React.createElement(r,{primaryColor:p,secondaryColor:m,offset:y,index:c,value:l,fullId:b,halfId:x,noneId:S,hoverColor:h,hoverValue:g,committedValue:_,hoverGradientId:w}),React.createElement(`polygon`,{fill:C,points:`153,230.775 247.35,299.625 211.65,187.425 306,121.125 191.25,121.125 153,6.375 114.75,121.125 0,121.125 94.35,187.425 58.65,299.625`,pointerEvents:`none`}))},a={activeContainer:{border:`none`,display:`inline-flex`},inActiveContainer:{border:`none`,outline:0,display:`inline-flex`}},o=e=>Number.isFinite(e)&&e>=1?Math.floor(e):5,s=(e,t,n=0)=>Number.isFinite(e)&&e>=n?e:t,c=(e,t,n)=>{let r=Math.min(Math.max(Number.isFinite(e)?e:0,0),t);return n?r:Math.round(r)},l=(0,t.forwardRef)(function({id:e,value:n,defaultValue:r=0,onChange:l=()=>{},onBlur:u,onFocus:d,name:f,form:p,disabled:m=!1,readOnly:h=!1,isEdit:g=!0,isHalf:_=!0,count:v=5,size:y=25,starGap:b=0,className:x=``,style:S,dir:C=`ltr`,primaryColor:w=`var(--stars-rating-primary-color, orange)`,secondaryColor:ee=`var(--stars-rating-secondary-color, grey)`,hoverColor:te,isArrowSubmit:T=!1,ariaLabel:ne=`Star rating`,ariaLabelledBy:E,getValueText:re=(e,t)=>`${e} of ${t}`,...ie},D){let O=C===`rtl`,k=g&&!h,A=o(v),j=s(y,25,2**-52),ae=s(b,0),M=n!==void 0,[oe,N]=(0,t.useState)(()=>c(r,A,_)),P=c(n??oe,A,_),F=(0,t.useId)().replace(/:/g,``),I=e??`react-stars-rating-${F}`,[L,R]=(0,t.useState)(()=>({sourceValue:P,displayValue:P})),z=(0,t.useRef)(null),B=(0,t.useRef)(null),[se,V]=(0,t.useState)(null),[ce,H]=(0,t.useState)(!1),U=(0,t.useRef)(null);(0,t.useImperativeHandle)(D,()=>U.current,[]);let W=L.sourceValue===P?L.displayValue:P,G=e=>{R({sourceValue:P,displayValue:c(e,A,_)})},le=(0,t.useMemo)(()=>`fullId-${I}`,[I]),ue=(0,t.useMemo)(()=>`halfId-${I}`,[I]),de=(0,t.useMemo)(()=>`noneId-${I}`,[I]);(0,t.useEffect)(()=>{z.current=null},[P]),(0,t.useEffect)(()=>{if(M)return;let e=p?document.getElementById(p):U.current?.closest(`form`),t=!0,n=e=>{setTimeout(()=>{if(!t||e.defaultPrevented)return;let n=c(r,A,_);z.current=null,B.current=null,V(null),N(n),R({sourceValue:n,displayValue:n})})};return e?.addEventListener(`reset`,n),()=>{t=!1,e?.removeEventListener(`reset`,n)}},[r,p,M,_,A]);let K=(e,t)=>{let n=Array.from(U.current?.querySelectorAll(`svg`)??[]),r=n.find(t=>{let n=t.getBoundingClientRect();return n.width>0&&(O?e.clientX>=n.left:e.clientX<=n.right)})??n[n.length-1]??e.currentTarget,i=n.indexOf(r)+1||t;if(!_)return i;let a=r.getBoundingClientRect();return(O?a.right-e.clientX:e.clientX-a.left)>a.width/2?i:i-.5},fe=(e,t)=>{if(!k||m)return;let n=B.current;if(n!==null&&n!==e.pointerId||n===null&&(e.pointerType===`touch`||e.buttons!==0))return;let r=K(e,t);z.current=null,V(r),G(r)},pe=e=>{!k||m||e.buttons!==0||(V(null),G(P))},me=e=>{H(!1);let t=z.current;z.current=null,k&&!m&&t!==null&&q(t),u?.(e)},q=e=>{let t=c(e,A,_);G(t),M||N(t),l(t)},he=(e,t)=>{if(!k||m||e.button!==0||e.isPrimary===!1||B.current!==null)return;U.current?.focus(),B.current=e.pointerId,e.currentTarget.setPointerCapture?.(e.pointerId),z.current=null;let n=K(e,t);V(n),G(n)},ge=(e,t)=>{B.current===e.pointerId&&e.button===0&&(B.current=null,e.currentTarget.releasePointerCapture?.(e.pointerId),!(!k||m)&&(q(K(e,t)),e.pointerType===`touch`&&V(null)))},J=e=>{B.current===e.pointerId&&(B.current=null,z.current=null,V(null),G(P))},Y=e=>{let t=c(e,A,_);t!==W&&(G(t),T?(z.current=null,q(t)):z.current=t)},X=e=>{let t=W%1==.5?W:Math.round(W);Y(t+e)},Z=e=>{switch(e.key){case`ArrowLeft`:e.preventDefault(),X((_?.5:1)*(O?1:-1));break;case`ArrowRight`:e.preventDefault(),X((_?.5:1)*(O?-1:1));break;case`ArrowDown`:e.preventDefault(),X(_?-.5:-1);break;case`ArrowUp`:e.preventDefault(),X(_?.5:1);break;case`Home`:e.preventDefault(),Y(0);break;case`End`:e.preventDefault(),Y(A);break;case`Enter`:e.preventDefault(),z.current=null,q(W)}},_e=()=>Array.from({length:A},(e,t)=>{let n=t+1,r=n!==A;return React.createElement(`span`,{key:`react-stars-rating-char${n}`,className:`star star-${n}`,style:r?{paddingInlineEnd:`var(--stars-rating-gap)`}:void 0},React.createElement(i,{index:n,value:W,size:j,isHalf:_,isRtl:O,fullId:le,halfId:ue,noneId:de,primaryColor:w,secondaryColor:ee,hoverColor:te,hoverValue:se,committedValue:P,onPointerMove:e=>fe(e,n),onPointerLeave:pe,onPointerDown:e=>he(e,n),onPointerUp:e=>ge(e,n),onPointerCancel:J,onLostPointerCapture:J}))}),Q=k&&!m,$=c(W,A,_),ve=e=>{H(e.currentTarget.matches(`:focus-visible`)),d?.(e)},ye={...k?a.activeContainer:a.inActiveContainer,"--stars-rating-gap":`${ae}px`,"--stars-rating-size":`${j}px`,...ce?{outline:`2px solid var(--stars-rating-focus-color, highlight)`,outlineOffset:2}:void 0,...S};return React.createElement(`span`,{...ie,ref:U,id:I,dir:C,role:`slider`,"aria-label":E?void 0:ne,"aria-labelledby":E,"aria-valuemin":0,"aria-valuemax":A,"aria-valuenow":$,"aria-valuetext":re($,A),"aria-orientation":`horizontal`,"aria-readonly":!k,"aria-disabled":m||void 0,tabIndex:Q?0:-1,onKeyDown:Q?Z:void 0,onBlur:me,onFocus:ve,style:ye,className:x},_e(),f?React.createElement(`input`,{type:`hidden`,name:f,value:P,disabled:m,form:p}):null)});e.ReactStarsRating=l,e.default=l});
+"use client";(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react")):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ReactAwesomeStarsRating={},e.React))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=(e,t)=>Math.min(100,Math.max(0,Math.round((e-(t-1))*1e4)/100)),r=({primaryColor:e,secondaryColor:t,offset:r=50,index:i,value:a,fullId:o,halfId:s,noneId:c,hoverColor:l,hoverValue:u=null,committedValue:d=a,hoverGradientId:f})=>{if(l&&u!==null&&f){let r=Math.min(d,u),a=Math.max(d,u),o=n(r,i),s=n(a,i),c=[{start:0,end:o,color:u<=d?l:e},{start:o,end:s,color:u<=d?e:l},{start:s,end:100,color:t}].filter(({start:e,end:t})=>t>e);return React.createElement(`defs`,null,React.createElement(`linearGradient`,{id:f},c.flatMap(({start:e,end:t,color:n},r)=>[React.createElement(`stop`,{key:`${r}-start`,offset:`${e}%`,stopColor:n}),React.createElement(`stop`,{key:`${r}-end`,offset:`${t}%`,stopColor:n})])))}let p=r;return i===1&&(p=Math.round(a%1*1e4)/100),i===1?React.createElement(`defs`,null,React.createElement(`linearGradient`,{id:o},React.createElement(`stop`,{offset:`100%`,stopColor:e})),React.createElement(`linearGradient`,{id:c},React.createElement(`stop`,{offset:`100%`,stopColor:t})),React.createElement(`linearGradient`,{id:s},React.createElement(`stop`,{offset:`${p}%`,stopColor:e}),React.createElement(`stop`,{offset:`${p}%`,stopColor:t}))):null},i=({viewBox:e=`0 0 306 306`,size:t,onPointerMove:n,onPointerLeave:i,onPointerDown:a,onPointerUp:o,onPointerCancel:s,index:c,value:l,isHalf:u,isRtl:d,onLostPointerCapture:f,primaryColor:p,secondaryColor:m,hoverColor:h,hoverValue:g=null,committedValue:_=l,fill:v,offset:y=50,fullId:b,halfId:x,noneId:S})=>{let C=v,w=`${b}-hover-${c}`;return C=h&&g!==null?`url(#${w})`:c<=l?`url(#${b})`:u&&Math.ceil(l)===c?`url(#${x})`:`url(#${S})`,React.createElement(`svg`,{width:t,style:{forcedColorAdjust:`auto`,width:`var(--stars-rating-size)`,transform:d?`scaleX(-1)`:void 0},viewBox:e,xmlns:`http://www.w3.org/2000/svg`,xmlnsXlink:`http://www.w3.org/1999/xlink`,onPointerLeave:i,onPointerMove:n,onPointerDown:a,onPointerUp:o,onPointerCancel:s,onLostPointerCapture:f},React.createElement(r,{primaryColor:p,secondaryColor:m,offset:y,index:c,value:l,fullId:b,halfId:x,noneId:S,hoverColor:h,hoverValue:g,committedValue:_,hoverGradientId:w}),React.createElement(`polygon`,{fill:C,points:`153,230.775 247.35,299.625 211.65,187.425 306,121.125 191.25,121.125 153,6.375 114.75,121.125 0,121.125 94.35,187.425 58.65,299.625`,pointerEvents:`none`}))},a={activeContainer:{border:`none`,display:`inline-flex`},inActiveContainer:{border:`none`,outline:0,display:`inline-flex`}},o=e=>Number.isFinite(e)&&e>=1?Math.floor(e):5,s=(e,t,n=0)=>Number.isFinite(e)&&e>=n?e:t,c=(e,t,n)=>{let r=Math.min(Math.max(Number.isFinite(e)?e:0,0),t);return n?r:Math.round(r)},l=(0,t.forwardRef)(function({id:e,value:n,defaultValue:r=0,onChange:l=()=>{},onBlur:u,onFocus:d,name:f,form:p,disabled:m=!1,readOnly:h=!1,isEdit:g=!0,isHalf:_=!0,count:v=5,size:y=25,starGap:b=0,className:x=``,style:S,dir:C=`ltr`,primaryColor:w=`var(--stars-rating-primary-color, orange)`,secondaryColor:ee=`var(--stars-rating-secondary-color, grey)`,hoverColor:te,isArrowSubmit:ne=!1,ariaLabel:T=`Star rating`,ariaLabelledBy:E,getValueText:D=(e,t)=>`${e} of ${t}`,...O},re){let k=C===`rtl`,A=g&&!h,j=o(v),M=s(y,25,2**-52),ie=s(b,0),N=n!==void 0,[ae,P]=(0,t.useState)(()=>c(r,j,_)),F=c(n??ae,j,_),I=(0,t.useId)().replace(/:/g,``),L=e??`react-stars-rating-${I}`,[R,z]=(0,t.useState)(()=>({sourceValue:F,displayValue:F})),B=(0,t.useRef)(null),V=(0,t.useRef)(null),[oe,H]=(0,t.useState)(null),[se,U]=(0,t.useState)(!1),W=(0,t.useRef)(null);(0,t.useImperativeHandle)(re,()=>W.current,[]),R.sourceValue!==F&&(z({sourceValue:F,displayValue:F}),H(null));let G=R.sourceValue===F?R.displayValue:F,K=e=>{z({sourceValue:F,displayValue:c(e,j,_)})},ce=(0,t.useMemo)(()=>`fullId-${L}`,[L]),le=(0,t.useMemo)(()=>`halfId-${L}`,[L]),ue=(0,t.useMemo)(()=>`noneId-${L}`,[L]);(0,t.useEffect)(()=>{B.current=null},[F]),(0,t.useEffect)(()=>{if(N)return;let e=p?document.getElementById(p):W.current?.closest(`form`),t=!0,n=e=>{setTimeout(()=>{if(!t||e.defaultPrevented)return;let n=c(r,j,_);B.current=null,V.current=null,H(null),P(n),z({sourceValue:n,displayValue:n})})};return e?.addEventListener(`reset`,n),()=>{t=!1,e?.removeEventListener(`reset`,n)}},[r,p,N,_,j]);let q=(e,t)=>{let n=Array.from(W.current?.querySelectorAll(`svg`)??[]),r=n.find(t=>{let n=t.getBoundingClientRect();return n.width>0&&(k?e.clientX>=n.left:e.clientX<=n.right)})??n[n.length-1]??e.currentTarget,i=n.indexOf(r)+1||t;if(!_)return i;let a=r.getBoundingClientRect();return(k?a.right-e.clientX:e.clientX-a.left)>a.width/2?i:i-.5},de=(e,t)=>{if(!A||m)return;let n=V.current;if(n!==null&&n!==e.pointerId||n===null&&(e.pointerType===`touch`||e.buttons!==0))return;let r=q(e,t);B.current=null,H(r),K(r)},fe=e=>{!A||m||e.buttons!==0||(H(null),K(F))},pe=e=>{U(!1);let t=B.current;B.current=null,A&&!m&&t!==null&&J(t),u?.(e)},J=e=>{let t=c(e,j,_);K(t),N||P(t),l(t)},me=(e,t)=>{if(!A||m||e.button!==0||e.isPrimary===!1||V.current!==null)return;W.current?.focus(),V.current=e.pointerId,e.currentTarget.setPointerCapture?.(e.pointerId),B.current=null;let n=q(e,t);H(n),K(n)},he=(e,t)=>{V.current===e.pointerId&&e.button===0&&(V.current=null,e.currentTarget.releasePointerCapture?.(e.pointerId),!(!A||m)&&(J(q(e,t)),e.pointerType===`touch`&&H(null)))},Y=e=>{V.current===e.pointerId&&(V.current=null,B.current=null,H(null),K(F))},X=e=>{let t=c(e,j,_);t!==G&&(K(t),ne?(B.current=null,J(t)):B.current=t)},Z=e=>{let t=G%1==.5?G:Math.round(G);X(t+e)},ge=e=>{switch(e.key){case`ArrowLeft`:e.preventDefault(),Z((_?.5:1)*(k?1:-1));break;case`ArrowRight`:e.preventDefault(),Z((_?.5:1)*(k?-1:1));break;case`ArrowDown`:e.preventDefault(),Z(_?-.5:-1);break;case`ArrowUp`:e.preventDefault(),Z(_?.5:1);break;case`Home`:e.preventDefault(),X(0);break;case`End`:e.preventDefault(),X(j);break;case`Enter`:e.preventDefault(),B.current=null,J(G)}},_e=()=>Array.from({length:j},(e,t)=>{let n=t+1,r=n!==j;return React.createElement(`span`,{key:`react-stars-rating-char${n}`,className:`star star-${n}`,style:r?{paddingInlineEnd:`var(--stars-rating-gap)`}:void 0},React.createElement(i,{index:n,value:G,size:M,isHalf:_,isRtl:k,fullId:ce,halfId:le,noneId:ue,primaryColor:w,secondaryColor:ee,hoverColor:te,hoverValue:oe,committedValue:F,onPointerMove:e=>de(e,n),onPointerLeave:fe,onPointerDown:e=>me(e,n),onPointerUp:e=>he(e,n),onPointerCancel:Y,onLostPointerCapture:Y}))}),Q=A&&!m,$=c(G,j,_),ve=e=>{U(e.currentTarget.matches(`:focus-visible`)),d?.(e)},ye={...A?a.activeContainer:a.inActiveContainer,"--stars-rating-gap":`${ie}px`,"--stars-rating-size":`${M}px`,...se?{outline:`2px solid var(--stars-rating-focus-color, highlight)`,outlineOffset:2}:void 0,...S};return React.createElement(`span`,{...O,ref:W,id:L,dir:C,role:`slider`,"aria-label":E?void 0:T,"aria-labelledby":E,"aria-valuemin":0,"aria-valuemax":j,"aria-valuenow":$,"aria-valuetext":D($,j),"aria-orientation":`horizontal`,"aria-readonly":!A,"aria-disabled":m||void 0,tabIndex:Q?0:-1,onKeyDown:Q?ge:void 0,onBlur:pe,onFocus:ve,style:ye,className:x},_e(),f?React.createElement(`input`,{type:`hidden`,name:f,value:F,disabled:m,form:p}):null)});e.ReactStarsRating=l,e.default=l});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-awesome-stars-rating",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "Accessible star rating component for React, with half stars, keyboard control and any scale or palette.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -67,6 +67,7 @@
     "test:watch": "vitest",
     "test:e2e": "playwright test",
     "test:consumer": "node scripts/verify-consumer.mjs",
+    "test:next": "node scripts/verify-next.mjs",
     "coverage": "vitest run --coverage",
     "verify:package": "node scripts/verify-package.mjs",
     "verify:release": "node scripts/verify-release-notes.mjs",