@smastrom/react-rating - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

dist/index.d.ts

@@ -45,2 +45,4 @@ import { CSSProperties } from 'react';
     resetLabel?: string;
+    /** Whether or not to call event.preventDefault on click and Enter/Space select. */
+    preventDefault?: 'click' | 'keydown' | 'all' | 'none';
 };
@@ -47,0 +49,0 @@

dist/index.js

 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=e=>{},n="undefined"==typeof window?r.useEffect:r.useLayoutEffect,o=e=>"number"==typeof e&&e>0,s=e=>o(e)?e:0,a=e=>Math.round(100*e)/100,i=e=>Math.round(2*e)/2,l=e=>0===e?0:-1*a(e),c={},u="rr--focus-reset",f="rr--on",d="rr--off",h="rr--fx-zoom",m="rr--fx-position",p="rr--fx-opacity",g="rr--fx-colors",b="rr--rx-sm",y="rr--rx-md",x="rr--rx-lg",v="rr--rx-full",S="rr--gap-sm",R="rr--gap-md",B="rr--gap-lg",O="rr--space-sm",w="rr--space-md",C="rr--space-lg",L={FILL:"--rr--fill-on-color",BOX:"--rr--box-on-color",BORDER:"--rr--border-on-color",STROKE:"--rr--stroke-on-color"},E={FILL:"--rr--fill-off-color",BOX:"--rr--box-off-color",BORDER:"--rr--border-off-color",STROKE:"--rr--stroke-off-color"},k="horizontal",$="vertical",A="svg",j="none",I="small",D="medium",F="large",M="full",N="none",T="zoom",W="position",K="opacity",X="colors",V={FILL:"activeFillColor",BOX:"activeBoxColor",BORDER:"activeBoxBorderColor",STROKE:"activeStrokeColor"},H={FILL:"inactiveFillColor",BOX:"inactiveBoxColor",BORDER:"inactiveBoxBorderColor",STROKE:"inactiveStrokeColor"};function P({itemShapes:t,testId:o,itemStrokeWidth:s=0,orientation:i=k,hasHF:c=!1}){const u=s>0?-s/2:0,f=s>0?`${u} ${u}`:"0 0",d=r.useId(),h=r.useRef(null),[m,p]=r.useState(null),[g,b]=r.useState(!1),y=r.useRef(null),x=r.useRef(null),v=r.useCallback((e=>{const{width:r,height:t,x:n,y:o}=e.getBBox();if(((...e)=>e.every((e=>"number"==typeof e)))(r,t,n,o)){const e=`${f} ${a(r+s)} ${a(t+s)}`,i=`${l(n)} ${l(o)}`;p({viewBox:e,translateData:i})}}),[s,f]);return n((()=>{if(h.current){const{width:e,height:r,x:t,y:n}=h.current.getBBox();if(0===e&&0===r&&0===t&&0===n){const e=function(e){if(!e||!e.parentElement)return null;let r=null==e?void 0:e.parentElement;for(;r&&"none"!==window.getComputedStyle(r).display;)r=r.parentElement;return r}(h.current);e&&(x.current=e,b(!0))}else b(!1);v(h.current)}}),[t,s,c]),n((()=>{if(g&&x.current)return y.current=new MutationObserver(((e,r)=>{e.forEach((()=>{"none"===window.getComputedStyle(x.current).display||(v(h.current),r.disconnect())}))})),y.current.observe(x.current,{attributes:!0}),()=>{var e;null==(e=y.current)||e.disconnect()}}),[g,v]),e.jsxs("svg",{"aria-hidden":"true",className:"rr--svg",xmlns:"http://www.w3.org/2000/svg",viewBox:m?m.viewBox:"0 0 0 0",preserveAspectRatio:"xMidYMid meet",...s>0?{strokeWidth:s}:{},...o,children:[c&&e.jsx("defs",{children:e.jsxs("linearGradient",{id:d,...i===$?{gradientTransform:"rotate(90)"}:{},children:[e.jsx("stop",{className:"rr--svg-stop-1",offset:"50%"}),e.jsx("stop",{className:"rr--svg-stop-2",offset:"50%"})]})}),e.jsx("g",{ref:h,shapeRendering:"geometricPrecision",...function(){if(m){const e=`translate(${null==m?void 0:m.translateData})`;return"translate(0 0)"===e?{}:{transform:e}}return{transform:void 0}}(),...c?{fill:`url('#${d}')`}:{},children:t})]})}function Z(e,r,t){switch(r){case V.FILL:return e[L.FILL]=t,!0;case V.BOX:return e[L.BOX]=t,!0;case V.BORDER:return e[L.BORDER]=t,!0;case V.STROKE:return e[L.STROKE]=t,!0}return!1}function q(e,r,t){if(!Z(e,r,t))switch(r){case H.FILL:e[E.FILL]=t;break;case H.BOX:e[E.BOX]=t;break;case H.BORDER:e[E.BORDER]=t;break;case H.STROKE:e[E.STROKE]=t}}function z(e,r,t){const n={};let o;for(const[s,a]of Object.entries(e))Z(n,s,a[r]);return t?(o=Array(r).fill({}),o.push(n)):o=Array(r+1).fill(n),o}const G=e=>`${e} ${g}`;function J(e,r,t){return Array.from({length:r},((r,n)=>e?n===t?f:d:n<=t?f:d))}function U(e,r,t){const n=Math.floor(i(e));return Array.from({length:r},((e,r)=>"box"===t?r>n?"rr--hf-box-off":r===n?"rr--hf-box-int":"rr--hf-box-on":r>n?"rr--hf-svg-off":"rr--hf-svg-on"))}function Y(e,r){const t={};o(r)&&(t["--rr--border-width"]=`${r}px`);const n=Object.entries(e);if(n.length>0)for(const[o,s]of n)q(t,o,s);return t}const Q=[V.FILL,V.BOX,V.STROKE,V.BORDER];function _(e,r,t=!1){return Array.from({length:e},((n,o)=>t&&r<0?o===e-1?0:-1:r<=0?0===o?0:-1:r>0?o===r?0:-1:void 0))}function ee(e,r){return e.shouldRender=!1,e.reason=(e=>`[@smastrom/react-rating] - Nothing's returned from rendering. Reason: ${e}.`)(r),e}const re="itemShapes is not a valid JSX element",te=e.jsx("polygon",{points:"25 9.02 16.4 7.75 12.46 0 8.59 7.79 0 9.14 6.21 15.23 4.85 23.81 12.55 19.79 20.3 23.74 18.85 15.17 25 9.02"}),ne=e.jsx("path",{d:"M12.5,18.16l-7.73,5.61,2.95-9.08L0,9.07H9.55S12.5,0,12.5,0l2.95,9.07h9.55l-7.73,5.62,2.95,9.08-7.73-5.61Z"}),oe=e.jsx("path",{d:"M112.46,57.88c-.23-.72-.88-1.22-1.63-1.27l-6.63-.46-2.45-6.19c-.27-.7-.95-1.16-1.7-1.16h0c-.75,0-1.42,.46-1.7,1.16l-2.5,6.23-6.58,.42c-.75,.05-1.4,.55-1.63,1.27-.24,.73,0,1.53,.58,2.02l5.07,4.28-1.51,5.92c-.21,.82,.1,1.69,.78,2.19,.66,.48,1.55,.5,2.24,.07l5.23-3.31h.02l5.63,3.56c.29,.19,.63,.29,.97,.29,1.02,0,1.83-.84,1.83-1.86,0-.16-.02-.31-.06-.47l-1.6-6.48,5.04-4.2c.59-.49,.82-1.29,.58-2.02Z"}),se=e.jsx("path",{d:"M22.72,8.24h-6.68L13.97,1.88c-.81-2.51-2.13-2.51-2.95,0l-2.07,6.36H2.28c-2.63,0-3.04,1.25-.91,2.8l5.41,3.93-2.06,6.36c-.81,2.51,.25,3.28,2.39,1.73l5.41-3.93,5.41,3.93c2.13,1.55,3.2,.77,2.39-1.73l-2.07-6.36,5.41-3.93c2.13-1.55,1.72-2.8-.91-2.8Z"}),ae=e.jsx("path",{d:"M11.58,.77c.51-1.02,1.33-1.02,1.84,0l2.34,4.73c.5,1.02,1.84,2,2.98,2.16l5.22,.76c1.13,.17,1.39,.95,.57,1.75l-3.78,3.68c-.82,.8-1.33,2.37-1.14,3.5l.89,5.2c.19,1.13-.48,1.61-1.49,1.08l-4.67-2.45c-1.01-.53-2.67-.53-3.68,0l-4.67,2.46c-1.01,.53-1.68,.05-1.49-1.08l.89-5.2c.19-1.13-.32-2.7-1.14-3.5L.48,10.17c-.82-.8-.56-1.58,.57-1.75l5.22-.76c1.13-.16,2.47-1.14,2.98-2.16L11.58,.77h0Z"}),ie=e.jsx("path",{d:"M19.29,1.61c-2.15-2.15-5.63-2.15-7.78,0,0,0,0,0,0,0l-1.06,1.06-1.06-1.06C7.24-.54,3.76-.54,1.61,1.61-.54,3.76-.54,7.24,1.61,9.39l1.06,1.06,7.78,7.78,7.78-7.78,1.06-1.06c2.15-2.15,2.15-5.63,0-7.78,0,0,0,0,0,0Z"}),le={itemShapes:te,itemStrokeWidth:2,activeFillColor:"#ffb23f",inactiveFillColor:"#fff7ed",activeStrokeColor:"#e17b21",inactiveStrokeColor:"#eda76a"},ce=r.forwardRef((({value:o,items:a=5,readOnly:l=!1,onChange:f=t,onHoverChange:d=t,onFocus:L=t,onBlur:E=t,isDisabled:V=!1,highlightOnlySelected:H=!1,orientation:Z=k,spaceBetween:q=j,spaceInside:te=I,radius:ne=j,transition:oe=X,itemStyles:se=le,isRequired:ae=!1,halfFillMode:ie=A,visibleLabelId:ce,visibleItemLabelIds:ue,invisibleItemLabels:fe,invisibleLabel:de=(l?o>0?`Rated ${o} on ${a}`:"Not rated":"Rating Selection"),resetLabel:he="Reset rating",id:me,className:pe,style:ge},be)=>{const ye=Array.from({length:a},((e,r)=>r+1)),xe=l&&!Number.isInteger(o),ve=xe&&!H,Se=xe&&H?Math.round(o):o,Re=!l&&!V,Be=Se>=.25,Oe="string"==typeof pe?pe:"",we="box"===ie?"box":A,Ce=ve&&(ze=Se,!Number.isInteger(i(ze))),Le=!ae&&!l,Ee=ae?a:a+1,ke=ve?function(e,r){const t=i(r);return Number.isInteger(t)?e.indexOf(t):Math.floor(t)}(ye,Se):ye.indexOf(Se),{staticColors:$e,arrayColors:Ae,itemShapes:je,absoluteStrokeWidth:Ie,absoluteBoxBorderWidth:De}=r.useMemo((()=>{const{itemShapes:e,itemStrokeWidth:r,boxBorderWidth:t,...n}=se,o=function(e){const r={...e},t={},n=Object.entries(r);if(n.length>0)for(const[o,s]of n)if(Array.isArray(s)||"string"==typeof s){if(Array.isArray(s))for(const e of Q)if(e===o){const e=s.filter((e=>"string"==typeof e));e.length>0&&(t[o]=e,delete r[o])}else delete r[o]}else delete r[o];return{arrayColors:t,staticColors:r}}(n);return{itemShapes:e,absoluteStrokeWidth:s(r),absoluteBoxBorderWidth:s(t),...o}}),[se]),Fe=Object.keys(Ae).length>0,Me=r.useCallback(((e,r)=>({dynamicClassNames:Ce?U(Se,a,we):J(H,a,e),dynamicCssVars:r&&Fe?z(Ae,e,H):[]})),[Ae,Fe,H,we,Ce,a,Se]),Ne=r.useCallback((()=>qe(_(Ee,ke,!ae))),[ke,Ee,ae]),Te=r.useRef(!0),We=r.useRef(!0),Ke=r.useRef(null),Xe=r.useRef([]),Ve=r.useRef(!1),[He,Pe]=r.useState({staticCssVars:Y($e,De),...Me(ke,Be)}),[Ze,qe]=r.useState((()=>Re?_(Ee,ke,!ae):[]));var ze;n((()=>{Re&&Xe.current&&(Ve.current=function(e){return!!e&&"rtl"===getComputedStyle(e).getPropertyValue("direction")}(Xe.current[0]))}),[Re]),r.useEffect((()=>{if(!Te.current)return Pe({staticCssVars:Y($e,De),...Me(ke,Be)});Te.current=!1}),[$e,Me,De,ke,Be]),r.useEffect((()=>{if(!We.current&&Re)return Ne();We.current=!1}),[Re,Ne]);const{shouldRender:Ge,reason:Je}=function({items:e,itemShapes:t}){const n={shouldRender:!0,reason:""};if("number"!=typeof e||e<1||e>10)return ee(n,"items is invalid");if(!t)return ee(n,"itemStyles needs at least the property itemShapes set");if(!Array.isArray(t)&&!r.isValidElement(t))return ee(n,re);if(Array.isArray(t)){if(t.length!==e)return ee(n,"itemShapes length mismatch");if(!t.every((e=>r.isValidElement(e))))return ee(n,re)}return n}({items:a,itemShapes:je});if(!Ge)return console.error(Je),null;function Ue(e,r,t=(()=>{})){Xe.current.some((r=>r===e.relatedTarget))?t():r()}function Ye(){d(0),Ne()}function Qe(e){Ue(e,(()=>{Ye()})),Pe({...He,...Me(ke,Be)})}function _e(e){Ue(e,(()=>{Ye(),E()}))}function er(e,r){const t=ae||r!==ye.length?r+1:0;Ue(e,(()=>{L(),d(t)}),(()=>{d(t)}))}function rr(e){qe(_(Ee,e,!ae)),Xe.current[e].focus()}const tr=function({className:e,radius:r,readOnly:t,isDisabled:n,isDynamic:o,transition:s,orientation:a,absoluteBoxBorderWidth:i,absoluteStrokeWidth:l,spaceBetween:c,spaceInside:u}){const f=o?"rr--pointer":"",d=function(e){switch(e){case I:return S;case D:return R;case F:return B;default:return""}}(c),L=function(e){switch(e){case I:return O;case D:return w;case F:return C;default:return""}}(u),E=!t&&n?"rr--disabled":"",k=o&&s!==N?function(e){switch(e){case T:return G(h);case W:return G(m);case K:return G(p);case X:return g;default:return""}}(s):"";return`rr--group ${a===$?"rr--dir-y":"rr--dir-x"} ${l>0?"rr--has-stroke":""} ${i>0?"rr--has-border":""}\n${k} ${function(e){switch(e){case I:return b;case D:return y;case F:return x;case M:return v;default:return""}}(r)} ${f} ${E} ${d}\n${L} ${e}`.replace(/  +/g," ").trimEnd()}({className:Oe,radius:ne,readOnly:l,isDisabled:V,isDynamic:Re,transition:oe,orientation:Z,absoluteBoxBorderWidth:De,absoluteStrokeWidth:Ie,spaceBetween:q,spaceInside:te});function nr(e){return{ref:r=>Xe.current[e]=r}}function or(e){return{tabIndex:Ze[e],onKeyDown:r=>function(e,r){let t=0;const n=ae?ye.length-1:ye.length,o=r-1,s=r+1,a=!ae&&r===ye.length,i=0===r?n:o,l=n===r?0:s;switch(e.code){case"Shift":case"Tab":return!0;case"ArrowDown":case"ArrowRight":return t=Ve.current?i:l,rr(t);case"ArrowUp":case"ArrowLeft":return t=Ve.current?l:i,rr(t);case"Enter":case"Space":return e.preventDefault(),f(a?0:r+1)}e.preventDefault(),e.stopPropagation()}(r,e)}}function sr(e){return{onClick:r=>{return n=e,(t=r).preventDefault(),t.stopPropagation(),void f(ae||ke!==n?n+1:0);var t,n},onMouseEnter:()=>{return d((r=e)+1),void Pe({...He,...Me(r,!0)});var r},onMouseLeave:Qe}}function ar(e){if(l)return{};const r={};if(Array.isArray(ue))r["aria-labelledby"]=ue[e];else{const t=Array.isArray(fe)?fe:ye.map(((e,r)=>`Rate ${r+1}`));r["aria-label"]=t[e]}return V&&(r["aria-disabled"]="true"),{role:"radio","aria-checked":e+1===Se,...r}}function ir(e){const r={itemShapes:Array.isArray(je)?je[e]:je,itemStrokeWidth:Ie,orientation:Z,hasHF:!1,testId:{}};return Ce&&we===A&&(r.hasHF=e===ke),r}return e.jsx("div",{id:me,className:tr,style:{...ge,...He.staticCssVars},ref:function(e){Re&&!ae&&(Ke.current=e),be&&(be.current=e)},...function(){if(!l){const e=ae&&!V,r={role:"radiogroup","aria-required":e};return e&&(r["aria-invalid"]=Se<=0),"string"==typeof ce&&ce.length>0?r["aria-labelledby"]=ce:r["aria-label"]=de,r}return{role:"img","aria-label":de}}(),...c,children:ye.map(((t,n)=>{return e.jsxs(r.Fragment,{children:[e.jsx("div",{className:`rr--box ${He.dynamicClassNames[n]}`,style:He.dynamicCssVars[n],...ar(n),...(s=n,Re?{...nr(s),...or(s),...sr(s),onFocus:e=>er(e,s),onBlur:e=>_e(e)}:{}),children:e.jsx(P,{...ir(n)})}),Le&&n===ye.length-1&&e.jsx("div",{...(o=n+1,{className:"rr--reset",role:"radio","aria-label":he,"aria-checked":0===Se,onClick:()=>f(0),onFocus:e=>{var r;er(e,o),null==(r=Ke.current)||r.classList.add(u)},onBlur:e=>{var r;_e(e),null==(r=Ke.current)||r.classList.remove(u)},...or(o),...nr(o),...V?{"aria-disabled":"true"}:{}})})]},t);var o,s}))})}));ce.displayName="Rating",exports.Heart=ie,exports.Rating=ce,exports.RoundedStar=oe,exports.Star=te,exports.StickerStar=ae,exports.ThinRoundedStar=se,exports.ThinStar=ne;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=e=>{},n="undefined"==typeof window?r.useEffect:r.useLayoutEffect,o=e=>"number"==typeof e&&e>0,s=e=>o(e)?e:0,a=e=>Math.round(100*e)/100,i=e=>Math.round(2*e)/2,l=e=>0===e?0:-1*a(e),c={},u="rr--focus-reset",f="rr--on",d="rr--off",h="rr--fx-zoom",m="rr--fx-position",p="rr--fx-opacity",g="rr--fx-colors",b="rr--rx-sm",y="rr--rx-md",x="rr--rx-lg",v="rr--rx-full",S="rr--gap-sm",R="rr--gap-md",B="rr--gap-lg",O="rr--space-sm",w="rr--space-md",C="rr--space-lg",L={FILL:"--rr--fill-on-color",BOX:"--rr--box-on-color",BORDER:"--rr--border-on-color",STROKE:"--rr--stroke-on-color"},E={FILL:"--rr--fill-off-color",BOX:"--rr--box-off-color",BORDER:"--rr--border-off-color",STROKE:"--rr--stroke-off-color"},k="horizontal",$="vertical",A="svg",j="none",I="small",D="medium",F="large",M="full",N="none",T="zoom",W="position",K="opacity",X="colors",V={FILL:"activeFillColor",BOX:"activeBoxColor",BORDER:"activeBoxBorderColor",STROKE:"activeStrokeColor"},H={FILL:"inactiveFillColor",BOX:"inactiveBoxColor",BORDER:"inactiveBoxBorderColor",STROKE:"inactiveStrokeColor"};function P({itemShapes:t,testId:o,itemStrokeWidth:s=0,orientation:i=k,hasHF:c=!1}){const u=s>0?-s/2:0,f=s>0?`${u} ${u}`:"0 0",d=r.useId(),h=r.useRef(null),[m,p]=r.useState(null),[g,b]=r.useState(!1),y=r.useRef(null),x=r.useRef(null),v=r.useCallback((e=>{const{width:r,height:t,x:n,y:o}=e.getBBox();if(((...e)=>e.every((e=>"number"==typeof e)))(r,t,n,o)){const e=`${f} ${a(r+s)} ${a(t+s)}`,i=`${l(n)} ${l(o)}`;p({viewBox:e,translateData:i})}}),[s,f]);return n((()=>{if(h.current){const{width:e,height:r,x:t,y:n}=h.current.getBBox();if(0===e&&0===r&&0===t&&0===n){const e=function(e){if(!e||!e.parentElement)return null;let r=null==e?void 0:e.parentElement;for(;r&&"none"!==window.getComputedStyle(r).display;)r=r.parentElement;return r}(h.current);e&&(x.current=e,b(!0))}else b(!1);v(h.current)}}),[t,s,c]),n((()=>{if(g&&x.current)return y.current=new MutationObserver(((e,r)=>{e.forEach((()=>{"none"===window.getComputedStyle(x.current).display||(v(h.current),r.disconnect())}))})),y.current.observe(x.current,{attributes:!0}),()=>{var e;null==(e=y.current)||e.disconnect()}}),[g,v]),e.jsxs("svg",{"aria-hidden":"true",className:"rr--svg",xmlns:"http://www.w3.org/2000/svg",viewBox:m?m.viewBox:"0 0 0 0",preserveAspectRatio:"xMidYMid meet",...s>0?{strokeWidth:s}:{},...o,children:[c&&e.jsx("defs",{children:e.jsxs("linearGradient",{id:d,...i===$?{gradientTransform:"rotate(90)"}:{},children:[e.jsx("stop",{className:"rr--svg-stop-1",offset:"50%"}),e.jsx("stop",{className:"rr--svg-stop-2",offset:"50%"})]})}),e.jsx("g",{ref:h,shapeRendering:"geometricPrecision",...function(){if(m){const e=`translate(${null==m?void 0:m.translateData})`;return"translate(0 0)"===e?{}:{transform:e}}return{transform:void 0}}(),...c?{fill:`url('#${d}')`}:{},children:t})]})}function Z(e,r,t){switch(r){case V.FILL:return e[L.FILL]=t,!0;case V.BOX:return e[L.BOX]=t,!0;case V.BORDER:return e[L.BORDER]=t,!0;case V.STROKE:return e[L.STROKE]=t,!0}return!1}function q(e,r,t){if(!Z(e,r,t))switch(r){case H.FILL:e[E.FILL]=t;break;case H.BOX:e[E.BOX]=t;break;case H.BORDER:e[E.BORDER]=t;break;case H.STROKE:e[E.STROKE]=t}}function z(e,r,t){const n={};let o;for(const[s,a]of Object.entries(e))Z(n,s,a[r]);return t?(o=Array(r).fill({}),o.push(n)):o=Array(r+1).fill(n),o}const G=e=>`${e} ${g}`;function J(e,r,t){return Array.from({length:r},((r,n)=>e?n===t?f:d:n<=t?f:d))}function U(e,r,t){const n=Math.floor(i(e));return Array.from({length:r},((e,r)=>"box"===t?r>n?"rr--hf-box-off":r===n?"rr--hf-box-int":"rr--hf-box-on":r>n?"rr--hf-svg-off":"rr--hf-svg-on"))}function Y(e,r){const t={};o(r)&&(t["--rr--border-width"]=`${r}px`);const n=Object.entries(e);if(n.length>0)for(const[o,s]of n)q(t,o,s);return t}const Q=[V.FILL,V.BOX,V.STROKE,V.BORDER];function _(e,r,t=!1){return Array.from({length:e},((n,o)=>t&&r<0?o===e-1?0:-1:r<=0?0===o?0:-1:r>0?o===r?0:-1:void 0))}function ee(e,r){return e.shouldRender=!1,e.reason=(e=>`[@smastrom/react-rating] - Nothing's returned from rendering. Reason: ${e}.`)(r),e}const re="itemShapes is not a valid JSX element",te=e.jsx("polygon",{points:"25 9.02 16.4 7.75 12.46 0 8.59 7.79 0 9.14 6.21 15.23 4.85 23.81 12.55 19.79 20.3 23.74 18.85 15.17 25 9.02"}),ne=e.jsx("path",{d:"M12.5,18.16l-7.73,5.61,2.95-9.08L0,9.07H9.55S12.5,0,12.5,0l2.95,9.07h9.55l-7.73,5.62,2.95,9.08-7.73-5.61Z"}),oe=e.jsx("path",{d:"M112.46,57.88c-.23-.72-.88-1.22-1.63-1.27l-6.63-.46-2.45-6.19c-.27-.7-.95-1.16-1.7-1.16h0c-.75,0-1.42,.46-1.7,1.16l-2.5,6.23-6.58,.42c-.75,.05-1.4,.55-1.63,1.27-.24,.73,0,1.53,.58,2.02l5.07,4.28-1.51,5.92c-.21,.82,.1,1.69,.78,2.19,.66,.48,1.55,.5,2.24,.07l5.23-3.31h.02l5.63,3.56c.29,.19,.63,.29,.97,.29,1.02,0,1.83-.84,1.83-1.86,0-.16-.02-.31-.06-.47l-1.6-6.48,5.04-4.2c.59-.49,.82-1.29,.58-2.02Z"}),se=e.jsx("path",{d:"M22.72,8.24h-6.68L13.97,1.88c-.81-2.51-2.13-2.51-2.95,0l-2.07,6.36H2.28c-2.63,0-3.04,1.25-.91,2.8l5.41,3.93-2.06,6.36c-.81,2.51,.25,3.28,2.39,1.73l5.41-3.93,5.41,3.93c2.13,1.55,3.2,.77,2.39-1.73l-2.07-6.36,5.41-3.93c2.13-1.55,1.72-2.8-.91-2.8Z"}),ae=e.jsx("path",{d:"M11.58,.77c.51-1.02,1.33-1.02,1.84,0l2.34,4.73c.5,1.02,1.84,2,2.98,2.16l5.22,.76c1.13,.17,1.39,.95,.57,1.75l-3.78,3.68c-.82,.8-1.33,2.37-1.14,3.5l.89,5.2c.19,1.13-.48,1.61-1.49,1.08l-4.67-2.45c-1.01-.53-2.67-.53-3.68,0l-4.67,2.46c-1.01,.53-1.68,.05-1.49-1.08l.89-5.2c.19-1.13-.32-2.7-1.14-3.5L.48,10.17c-.82-.8-.56-1.58,.57-1.75l5.22-.76c1.13-.16,2.47-1.14,2.98-2.16L11.58,.77h0Z"}),ie=e.jsx("path",{d:"M19.29,1.61c-2.15-2.15-5.63-2.15-7.78,0,0,0,0,0,0,0l-1.06,1.06-1.06-1.06C7.24-.54,3.76-.54,1.61,1.61-.54,3.76-.54,7.24,1.61,9.39l1.06,1.06,7.78,7.78,7.78-7.78,1.06-1.06c2.15-2.15,2.15-5.63,0-7.78,0,0,0,0,0,0Z"}),le={itemShapes:te,itemStrokeWidth:2,activeFillColor:"#ffb23f",inactiveFillColor:"#fff7ed",activeStrokeColor:"#e17b21",inactiveStrokeColor:"#eda76a"},ce=r.forwardRef((({value:o,items:a=5,readOnly:l=!1,onChange:f=t,onHoverChange:d=t,onFocus:L=t,onBlur:E=t,preventDefault:V="all",isDisabled:H=!1,highlightOnlySelected:Z=!1,orientation:q=k,spaceBetween:te=j,spaceInside:ne=I,radius:oe=j,transition:se=X,itemStyles:ae=le,isRequired:ie=!1,halfFillMode:ce=A,visibleLabelId:ue,visibleItemLabelIds:fe,invisibleItemLabels:de,invisibleLabel:he=(l?o>0?`Rated ${o} on ${a}`:"Not rated":"Rating Selection"),resetLabel:me="Reset rating",id:pe,className:ge,style:be},ye)=>{const xe=Array.from({length:a},((e,r)=>r+1)),ve=l&&!Number.isInteger(o),Se=ve&&!Z,Re=ve&&Z?Math.round(o):o,Be=!l&&!H,Oe=Re>=.25,we="string"==typeof ge?ge:"",Ce="box"===ce?"box":A,Le=Se&&(Ge=Re,!Number.isInteger(i(Ge))),Ee=!ie&&!l,ke=ie?a:a+1,$e=Se?function(e,r){const t=i(r);return Number.isInteger(t)?e.indexOf(t):Math.floor(t)}(xe,Re):xe.indexOf(Re),{staticColors:Ae,arrayColors:je,itemShapes:Ie,absoluteStrokeWidth:De,absoluteBoxBorderWidth:Fe}=r.useMemo((()=>{const{itemShapes:e,itemStrokeWidth:r,boxBorderWidth:t,...n}=ae,o=function(e){const r={...e},t={},n=Object.entries(r);if(n.length>0)for(const[o,s]of n)if(Array.isArray(s)||"string"==typeof s){if(Array.isArray(s))for(const e of Q)if(e===o){const e=s.filter((e=>"string"==typeof e));e.length>0&&(t[o]=e,delete r[o])}else delete r[o]}else delete r[o];return{arrayColors:t,staticColors:r}}(n);return{itemShapes:e,absoluteStrokeWidth:s(r),absoluteBoxBorderWidth:s(t),...o}}),[ae]),Me=Object.keys(je).length>0,Ne=r.useCallback(((e,r)=>({dynamicClassNames:Le?U(Re,a,Ce):J(Z,a,e),dynamicCssVars:r&&Me?z(je,e,Z):[]})),[je,Me,Z,Ce,Le,a,Re]),Te=r.useCallback((()=>ze(_(ke,$e,!ie))),[$e,ke,ie]),We=r.useRef(!0),Ke=r.useRef(!0),Xe=r.useRef(null),Ve=r.useRef([]),He=r.useRef(!1),[Pe,Ze]=r.useState({staticCssVars:Y(Ae,Fe),...Ne($e,Oe)}),[qe,ze]=r.useState((()=>Be?_(ke,$e,!ie):[]));var Ge;n((()=>{Be&&Ve.current&&(He.current=function(e){return!!e&&"rtl"===getComputedStyle(e).getPropertyValue("direction")}(Ve.current[0]))}),[Be]),r.useEffect((()=>{if(!We.current)return Ze({staticCssVars:Y(Ae,Fe),...Ne($e,Oe)});We.current=!1}),[Ae,Ne,Fe,$e,Oe]),r.useEffect((()=>{if(!Ke.current&&Be)return Te();Ke.current=!1}),[Be,Te]);const{shouldRender:Je,reason:Ue}=function({items:e,itemShapes:t}){const n={shouldRender:!0,reason:""};if("number"!=typeof e||e<1||e>10)return ee(n,"items is invalid");if(!t)return ee(n,"itemStyles needs at least the property itemShapes set");if(!Array.isArray(t)&&!r.isValidElement(t))return ee(n,re);if(Array.isArray(t)){if(t.length!==e)return ee(n,"itemShapes length mismatch");if(!t.every((e=>r.isValidElement(e))))return ee(n,re)}return n}({items:a,itemShapes:Ie});if(!Je)return console.error(Ue),null;function Ye(e,r,t=(()=>{})){Ve.current.some((r=>r===e.relatedTarget))?t():r()}function Qe(){d(0),Te()}function _e(e){Ye(e,(()=>{Qe()})),Ze({...Pe,...Ne($e,Oe)})}function er(e){Ye(e,(()=>{Qe(),E()}))}function rr(e,r){const t=ie||r!==xe.length?r+1:0;Ye(e,(()=>{L(),d(t)}),(()=>{d(t)}))}function tr(e){ze(_(ke,e,!ie)),Ve.current[e].focus()}const nr=function({className:e,radius:r,readOnly:t,isDisabled:n,isDynamic:o,transition:s,orientation:a,absoluteBoxBorderWidth:i,absoluteStrokeWidth:l,spaceBetween:c,spaceInside:u}){const f=o?"rr--pointer":"",d=function(e){switch(e){case I:return S;case D:return R;case F:return B;default:return""}}(c),L=function(e){switch(e){case I:return O;case D:return w;case F:return C;default:return""}}(u),E=!t&&n?"rr--disabled":"",k=o&&s!==N?function(e){switch(e){case T:return G(h);case W:return G(m);case K:return G(p);case X:return g;default:return""}}(s):"";return`rr--group ${a===$?"rr--dir-y":"rr--dir-x"} ${l>0?"rr--has-stroke":""} ${i>0?"rr--has-border":""}\n${k} ${function(e){switch(e){case I:return b;case D:return y;case F:return x;case M:return v;default:return""}}(r)} ${f} ${E} ${d}\n${L} ${e}`.replace(/  +/g," ").trimEnd()}({className:we,radius:oe,readOnly:l,isDisabled:H,isDynamic:Be,transition:se,orientation:q,absoluteBoxBorderWidth:Fe,absoluteStrokeWidth:De,spaceBetween:te,spaceInside:ne});function or(e){return{ref:r=>Ve.current[e]=r}}function sr(e){return{tabIndex:qe[e],onKeyDown:r=>function(e,r){let t=0;const n=ie?xe.length-1:xe.length,o=r-1,s=r+1,a=!ie&&r===xe.length,i=0===r?n:o,l=n===r?0:s;switch(e.code){case"Shift":case"Tab":return!0;case"ArrowDown":case"ArrowRight":return t=He.current?i:l,tr(t);case"ArrowUp":case"ArrowLeft":return t=He.current?l:i,tr(t);case"Enter":case"Space":return"all"!==V&&"click"!==V||e.preventDefault(),f(a?0:r+1)}e.stopPropagation()}(r,e)}}function ar(e){return{onClick:r=>{return t=r,n=e,"all"!==V&&"keydown"!==V||t.preventDefault(),t.stopPropagation(),void f(ie||$e!==n?n+1:0);var t,n},onMouseEnter:()=>{return d((r=e)+1),void Ze({...Pe,...Ne(r,!0)});var r},onMouseLeave:_e}}function ir(e){if(l)return{};const r={};if(Array.isArray(fe))r["aria-labelledby"]=fe[e];else{const t=Array.isArray(de)?de:xe.map(((e,r)=>`Rate ${r+1}`));r["aria-label"]=t[e]}return H&&(r["aria-disabled"]="true"),{role:"radio","aria-checked":e+1===Re,...r}}function lr(e){const r={itemShapes:Array.isArray(Ie)?Ie[e]:Ie,itemStrokeWidth:De,orientation:q,hasHF:!1,testId:{}};return Le&&Ce===A&&(r.hasHF=e===$e),r}return e.jsx("div",{id:pe,className:nr,style:{...be,...Pe.staticCssVars},ref:function(e){Be&&!ie&&(Xe.current=e),ye&&(ye.current=e)},...function(){if(!l){const e=ie&&!H,r={role:"radiogroup","aria-required":e};return e&&(r["aria-invalid"]=Re<=0),"string"==typeof ue&&ue.length>0?r["aria-labelledby"]=ue:r["aria-label"]=he,r}return{role:"img","aria-label":he}}(),...c,children:xe.map(((t,n)=>{return e.jsxs(r.Fragment,{children:[e.jsx("div",{className:`rr--box ${Pe.dynamicClassNames[n]}`,style:Pe.dynamicCssVars[n],...ir(n),...(s=n,Be?{...or(s),...sr(s),...ar(s),onFocus:e=>rr(e,s),onBlur:e=>er(e)}:{}),children:e.jsx(P,{...lr(n)})}),Ee&&n===xe.length-1&&e.jsx("div",{...(o=n+1,{className:"rr--reset",role:"radio","aria-label":me,"aria-checked":0===Re,onClick:()=>f(0),onFocus:e=>{var r;rr(e,o),null==(r=Xe.current)||r.classList.add(u)},onBlur:e=>{var r;er(e),null==(r=Xe.current)||r.classList.remove(u)},...sr(o),...or(o),...H?{"aria-disabled":"true"}:{}})})]},t);var o,s}))})}));ce.displayName="Rating",exports.Heart=ie,exports.Rating=ce,exports.RoundedStar=oe,exports.Star=te,exports.StickerStar=ae,exports.ThinRoundedStar=se,exports.ThinStar=ne;

package.json

 {
   "name": "@smastrom/react-rating",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "private": false,
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -273,11 +273,12 @@ ![react-rating-version](https://img.shields.io/npm/v/@smastrom/react-rating?color=22C55E) ![react-rating-build-workflow](https://img.shields.io/github/actions/workflow/status/smastrom/react-rating/build.yml?branch=main&color=22C55E)
 
-| :thinking:          | Prop            | Description                                                                | Type                                            | Default   | Required                        |
-| ------------------- | --------------- | -------------------------------------------------------------------------- | ----------------------------------------------- | --------- | ------------------------------- |
-| :green_circle:      | `value`         | An integer from 0 to `items`. It can be a float if `readOnly` is **true**. | number                                          | undefined | :white_check_mark:              |
-| :large_blue_circle: | `onChange`      | Setter or custom function to update the rating.                            | RatingChange                                    | () => {}  | Only if `readOnly` is **false** |
-| :large_blue_circle: | `onHoverChange` | Callback to execute while navigating the rating items.                     | (hoveredValue: number) => void                  | () => {}  | :x:                             |
-| :green_circle:      | `items`         | Rating items to display.                                                   | 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 | 5         | :x:                             |
-| :green_circle:      | `readOnly`      | Whether to render an accessible image element or not.                      | boolean                                         | false     | :x:                             |
-| :large_blue_circle: | `isDisabled`    | Whether to disable the radio group or not.                                 | boolean                                         | false     | :x:                             |
-| :large_blue_circle: | `isRequired`    | Whether users should be able to set rating to 0 or not.                    | boolean                                         | false     | :x:                             |
+| :thinking:          | Prop             | Description                                                                    | Type                                            | Default   | Required                        |
+| ------------------- | ---------------- | ------------------------------------------------------------------------------ | ----------------------------------------------- | --------- | ------------------------------- |
+| :green_circle:      | `value`          | An integer from 0 to `items`. It can be a float if `readOnly` is **true**.     | number                                          | undefined | :white_check_mark:              |
+| :large_blue_circle: | `onChange`       | Setter or custom function to update the rating.                                | RatingChange                                    | () => {}  | Only if `readOnly` is **false** |
+| :large_blue_circle: | `onHoverChange`  | Callback to execute while navigating the rating items.                         | (hoveredValue: number) => void                  | () => {}  | :x:                             |
+| :green_circle:      | `items`          | Rating items to display.                                                       | 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 | 5         | :x:                             |
+| :green_circle:      | `readOnly`       | Whether to render an accessible image element or not.                          | boolean                                         | false     | :x:                             |
+| :large_blue_circle: | `isDisabled`     | Whether to disable the radio group or not.                                     | boolean                                         | false     | :x:                             |
+| :large_blue_circle: | `isRequired`     | Whether users should be able to set rating to 0 or not.                        | boolean                                         | false     | :x:                             |
+| :green_circle:      | `preventDefault` | Whether or not to call `event.preventDefault` on click and Enter/Space select. | `click` \| `keydown` \| `all` \| `none`         | `all`     | :x:                             |
 
@@ -284,0 +285,0 @@ `ref`, `id`, `className`, `style`, `onBlur`, `onFocus` are also available.

No alert changes

Improved metrics

Total package byte prevSize

75333

increased by0.73%

Lines of code

526

increased by0.38%

Number of lines in readme file

866

increased by0.12%

No dependency changes