react-awesome-stars-rating 1.3.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +107 -27
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +150 -7
- package/dist/index.d.ts +150 -7
- package/dist/index.mjs +1 -1
- package/dist/index.umd.cjs +1 -1
- package/package.json +27 -24
package/README.md
CHANGED
|
@@ -4,15 +4,15 @@
|
|
|
4
4
|
[](https://github.com/fedoryakubovich/react-awesome-stars-rating/actions/workflows/ci.yml)
|
|
5
5
|
[](https://github.com/fedoryakubovich/react-awesome-stars-rating/blob/main/LICENSE)
|
|
6
6
|
|
|
7
|
-
An accessible star rating component for React. Half stars from pointer position, full keyboard control, any scale or palette — in
|
|
7
|
+
An accessible star rating component for React. Half stars from pointer position, full keyboard control, any scale or palette — in approximately 3 kB gzipped with no runtime dependencies.
|
|
8
8
|
|
|
9
|
-
**[Live demo](https://react-awesome-stars-rating.vercel.app)** · **[Storybook](https://react-awesome-stars-rating.vercel.app/storybook)**
|
|
9
|
+
**[Live demo](https://react-awesome-stars-rating-orpin.vercel.app/)** · **[Storybook](https://react-awesome-stars-rating-orpin.vercel.app/storybook/)**
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
## Highlights
|
|
14
14
|
|
|
15
|
-
-
|
|
15
|
+
- Approximately 3 kB gzipped (ESM under 3 kB), no runtime dependencies
|
|
16
16
|
- Half-star precision from pointer position, plus arrow-key stepping
|
|
17
17
|
- `role="slider"` with live `aria-valuenow` / `aria-valuetext`, verified with axe-core
|
|
18
18
|
- ESM + CJS with correct types for each, and a UMD bundle for CDN use
|
|
@@ -69,27 +69,32 @@ export default function Example() {
|
|
|
69
69
|
|
|
70
70
|
## Props
|
|
71
71
|
|
|
72
|
-
| Name
|
|
73
|
-
|
|
|
74
|
-
| id
|
|
75
|
-
| value
|
|
76
|
-
| defaultValue
|
|
77
|
-
| onChange
|
|
78
|
-
|
|
|
79
|
-
|
|
|
80
|
-
|
|
|
81
|
-
|
|
|
82
|
-
|
|
|
83
|
-
|
|
|
84
|
-
|
|
|
85
|
-
|
|
|
86
|
-
|
|
|
87
|
-
|
|
|
88
|
-
|
|
|
89
|
-
|
|
|
90
|
-
|
|
|
91
|
-
|
|
|
92
|
-
|
|
|
72
|
+
| Name | Description | Type | Default |
|
|
73
|
+
| :--------------- | :---------------------------------------- | :----------------------------------------- | :-------------- |
|
|
74
|
+
| id | Identifier | `string` | auto-generated |
|
|
75
|
+
| value | Controlled current value | `number` | `undefined` |
|
|
76
|
+
| defaultValue | Initial uncontrolled value | `number` | `0` |
|
|
77
|
+
| onChange | Called when value changes | `(value: number) => void` | `() => {}` |
|
|
78
|
+
| onBlur / onFocus | Native slider focus callbacks | `React.FocusEventHandler<HTMLSpanElement>` | `undefined` |
|
|
79
|
+
| dir | Layout, fill and horizontal key direction | `'ltr' \| 'rtl'` | `'ltr'` |
|
|
80
|
+
| name | Hidden native form input name | `string` | `undefined` |
|
|
81
|
+
| form | Associated form ID | `string` | `undefined` |
|
|
82
|
+
| disabled | Disable interaction and form submission | `boolean` | `false` |
|
|
83
|
+
| readOnly | Prevent editing | `boolean` | `false` |
|
|
84
|
+
| isEdit | Deprecated inverse editing switch | `boolean` | `true` |
|
|
85
|
+
| isHalf | Allow half stars | `boolean` | `true` |
|
|
86
|
+
| count | Number of stars | `number` | `5` |
|
|
87
|
+
| size | Star size (px) | `number` | `25` |
|
|
88
|
+
| starGap | Gap between stars | `number` | `0` |
|
|
89
|
+
| className | Container class | `string` | `''` |
|
|
90
|
+
| style | Container style and CSS variables | `ReactStarsRatingStyle` | `undefined` |
|
|
91
|
+
| primaryColor | Active star color | `string` | `'orange'` |
|
|
92
|
+
| secondaryColor | Inactive star color | `string` | `'grey'` |
|
|
93
|
+
| hoverColor | Optional pointer-preview color | `string` | `undefined` |
|
|
94
|
+
| isArrowSubmit | Arrow keys trigger `onChange` immediately | `boolean` | `false` |
|
|
95
|
+
| ariaLabel | Accessible label (if no `ariaLabelledBy`) | `string` | `'Star rating'` |
|
|
96
|
+
| ariaLabelledBy | ID of element that labels the control | `string` | `undefined` |
|
|
97
|
+
| getValueText | Formats accessible value text | `(value, count) => string` | English text |
|
|
93
98
|
|
|
94
99
|
## Keyboard and accessibility
|
|
95
100
|
|
|
@@ -105,7 +110,15 @@ The control renders as a single `role="slider"` element with `aria-valuemin`, `a
|
|
|
105
110
|
|
|
106
111
|
With `isArrowSubmit`, each arrow step reports through `onChange` immediately rather than waiting for `Enter` or blur.
|
|
107
112
|
|
|
108
|
-
|
|
113
|
+
Pointer changes commit only when a primary, left-button gesture starts on the
|
|
114
|
+
control and completes. Right/middle clicks, unrelated releases and canceled
|
|
115
|
+
gestures do not submit a rating. Touch dragging uses the same gesture tracking.
|
|
116
|
+
|
|
117
|
+
`onFocus` and `onBlur` receive native React focus events without replacing the
|
|
118
|
+
internal focus handling. A pending keyboard change is committed before `onBlur`,
|
|
119
|
+
so form libraries can mark the field touched with its latest value.
|
|
120
|
+
|
|
121
|
+
When `readOnly` is `true` the control is inert regardless of `isArrowSubmit`: no hover preview, no keyboard, `tabIndex={-1}`, and `aria-readonly="true"`. The older `isEdit={false}` API remains supported but is deprecated.
|
|
109
122
|
|
|
110
123
|
The slider explicitly reports `aria-orientation="horizontal"`. Use
|
|
111
124
|
`getValueText` to localize its spoken value:
|
|
@@ -117,6 +130,18 @@ The slider explicitly reports `aria-orientation="horizontal"`. Use
|
|
|
117
130
|
/>
|
|
118
131
|
```
|
|
119
132
|
|
|
133
|
+
### Right-to-left layouts
|
|
134
|
+
|
|
135
|
+
Pass `dir="rtl"` explicitly to reverse star order, half-star filling, pointer
|
|
136
|
+
selection and horizontal keyboard direction. The default is `ltr`, independent
|
|
137
|
+
of ancestor direction. In RTL, `ArrowLeft` increases and `ArrowRight` decreases;
|
|
138
|
+
`ArrowUp`, `ArrowDown`, `Home` and `End` retain their normal behavior. Star gaps
|
|
139
|
+
use logical spacing in both directions.
|
|
140
|
+
|
|
141
|
+
```tsx
|
|
142
|
+
<ReactStarsRating dir="rtl" defaultValue={2.5} ariaLabel="التقييم" />
|
|
143
|
+
```
|
|
144
|
+
|
|
120
145
|
### Hover preview color
|
|
121
146
|
|
|
122
147
|
Set `hoverColor` to distinguish the pointer preview from both the saved value
|
|
@@ -137,6 +162,27 @@ remainder of the saved value uses `primaryColor`, and inactive stars use
|
|
|
137
162
|
`secondaryColor`. When previewing above the saved value, only the additional
|
|
138
163
|
preview region uses `hoverColor`.
|
|
139
164
|
|
|
165
|
+
### Styling
|
|
166
|
+
|
|
167
|
+
The forwarded `ref`, `className`, `style`, `title`, and `data-*` attributes
|
|
168
|
+
target the slider container. CSS variables provide lightweight theming:
|
|
169
|
+
|
|
170
|
+
```tsx
|
|
171
|
+
<ReactStarsRating
|
|
172
|
+
defaultValue={3.5}
|
|
173
|
+
style={{
|
|
174
|
+
'--stars-rating-primary-color': '#f59e0b',
|
|
175
|
+
'--stars-rating-secondary-color': '#475569',
|
|
176
|
+
'--stars-rating-focus-color': '#2563eb',
|
|
177
|
+
'--stars-rating-size': '2rem',
|
|
178
|
+
'--stars-rating-gap': '0.25rem',
|
|
179
|
+
}}
|
|
180
|
+
/>
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
The default focus-visible ring uses the system `Highlight` color, and SVG
|
|
184
|
+
stars allow browser forced-colors adjustments for high-contrast modes.
|
|
185
|
+
|
|
140
186
|
## Server components
|
|
141
187
|
|
|
142
188
|
The package carries the `'use client'` directive, so it can be imported directly from a server component in the Next.js App Router without a wrapper.
|
|
@@ -157,7 +203,17 @@ uncontrolled usage and native form reset behavior.
|
|
|
157
203
|
```
|
|
158
204
|
|
|
159
205
|
Use `value` with `onChange` for controlled state. Supplying `value` always
|
|
160
|
-
takes precedence over `defaultValue`.
|
|
206
|
+
takes precedence over `defaultValue`. Use `form="form-id"` when the rating is
|
|
207
|
+
rendered outside its associated form.
|
|
208
|
+
|
|
209
|
+
An uncanceled native reset restores `defaultValue` without calling `onChange`.
|
|
210
|
+
Calling `event.preventDefault()` in the form's `onReset` preserves the rating.
|
|
211
|
+
Controlled values remain the responsibility of the parent.
|
|
212
|
+
|
|
213
|
+
HTML hidden inputs do not participate in native constraint validation, so a
|
|
214
|
+
`required` attribute would be misleading and is intentionally not exposed.
|
|
215
|
+
For required ratings, validate the controlled value or submitted `FormData`
|
|
216
|
+
and expose the result with `aria-invalid` and descriptive error text.
|
|
161
217
|
|
|
162
218
|
### React Hook Form
|
|
163
219
|
|
|
@@ -171,7 +227,12 @@ const { control } = useForm({ defaultValues: { rating: 3.5 } });
|
|
|
171
227
|
control={control}
|
|
172
228
|
name="rating"
|
|
173
229
|
render={({ field }) => (
|
|
174
|
-
<ReactStarsRating
|
|
230
|
+
<ReactStarsRating
|
|
231
|
+
ref={field.ref}
|
|
232
|
+
value={field.value}
|
|
233
|
+
onChange={field.onChange}
|
|
234
|
+
onBlur={field.onBlur}
|
|
235
|
+
/>
|
|
175
236
|
)}
|
|
176
237
|
/>;
|
|
177
238
|
```
|
|
@@ -187,6 +248,7 @@ import ReactStarsRating from 'react-awesome-stars-rating';
|
|
|
187
248
|
<ReactStarsRating
|
|
188
249
|
value={field.value}
|
|
189
250
|
onChange={(value) => form.setFieldValue('rating', value)}
|
|
251
|
+
onBlur={() => form.setFieldTouched('rating', true)}
|
|
190
252
|
/>
|
|
191
253
|
)}
|
|
192
254
|
</Field>;
|
|
@@ -218,6 +280,7 @@ const form = useForm<FormValues>({
|
|
|
218
280
|
<ReactStarsRating
|
|
219
281
|
value={field.state.value}
|
|
220
282
|
onChange={field.handleChange}
|
|
283
|
+
onBlur={field.handleBlur}
|
|
221
284
|
/>
|
|
222
285
|
)}
|
|
223
286
|
</form.Field>
|
|
@@ -239,6 +302,9 @@ npm run build # library build (ESM + CJS + UMD + types) → dist/
|
|
|
239
302
|
npm run verify:package # render every entry point from dist/
|
|
240
303
|
npm run lint:package # publint + are-the-types-wrong on the packed tarball
|
|
241
304
|
npm run size # size-limit budgets for every entry point
|
|
305
|
+
npm run test:e2e # Chromium, Firefox and WebKit interaction/a11y tests
|
|
306
|
+
npm run verify:links # README HTTPS links (requires network)
|
|
307
|
+
npm run verify:site # public demo + Storybook smoke tests (requires Chromium/network)
|
|
242
308
|
npm run build:site # demo site → dist-site/
|
|
243
309
|
```
|
|
244
310
|
|
|
@@ -249,6 +315,20 @@ Pre-commit (Husky) runs lint-staged (Prettier + ESLint on staged files) and comm
|
|
|
249
315
|
- **CI** — on push/PR to `main`: format, lint, commitlint, typecheck, tests, coverage, build, package verification, publint/attw, size budgets, Storybook and site builds.
|
|
250
316
|
- **Deploy** — Vercel builds the demo site on every push (see `vercel.json`), serving Storybook at `/storybook`.
|
|
251
317
|
- **Release** — [semantic-release](https://github.com/semantic-release/semantic-release) on push to `main`: analyzes Conventional Commits, publishes to npm and creates a GitHub release.
|
|
318
|
+
- **Recovery** — the manually dispatched `Verify or repair a published release` workflow verifies an exact npm version and its provenance, and can recreate a missing GitHub release only when its tag already exists.
|
|
319
|
+
- **Security** — CodeQL and OpenSSF Scorecard publish findings to GitHub code scanning; dependency review checks pull requests for vulnerable dependencies.
|
|
320
|
+
- **Documentation health** — changed documentation/check scripts, pushes to `main`, a weekly schedule and manual runs check README links and the deployed demo/Storybook. These external-service checks are separate from release gates. If npm's website blocks automated requests, the check explicitly reports that limitation and verifies the package through the registry instead.
|
|
321
|
+
|
|
322
|
+
Browser failures retain screenshots, traces and an HTML report in GitHub Actions
|
|
323
|
+
artifacts for seven days. Local browser tests require `npx playwright install`.
|
|
324
|
+
Development and release tooling use the Node 22 version in `.nvmrc`; consumer
|
|
325
|
+
compatibility is tested separately.
|
|
326
|
+
|
|
327
|
+
Published-release verification cryptographically checks the Sigstore signature
|
|
328
|
+
and transparency proofs, requires this repository's `ci.yml` identity on `main`,
|
|
329
|
+
and checks the signed package digest against the downloaded tarball. The signed
|
|
330
|
+
source commit must match the version's Git tag; release CI also requires it to
|
|
331
|
+
match the current build commit. Verification never republishes the package.
|
|
252
332
|
|
|
253
333
|
Publishing uses npm trusted publishing (OIDC) from `.github/workflows/ci.yml`; the workflow does not use an npm token.
|
|
254
334
|
|
package/dist/index.cjs
CHANGED
|
@@ -1 +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,
|
|
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;
|
package/dist/index.d.cts
CHANGED
|
@@ -1,4 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
import { type ComponentPropsWithoutRef, type CSSProperties } from 'react';
|
|
2
|
+
type ReservedSpanProps = 'aria-disabled' | 'aria-label' | 'aria-labelledby' | 'aria-orientation' | 'aria-readonly' | 'aria-valuemax' | 'aria-valuemin' | 'aria-valuenow' | 'aria-valuetext' | 'children' | 'className' | 'dangerouslySetInnerHTML' | 'defaultValue' | 'dir' | 'id' | 'onChange' | 'onKeyDown' | 'onPointerCancel' | 'onPointerDown' | 'onPointerLeave' | 'onPointerMove' | 'onPointerUp' | 'role' | 'style' | 'tabIndex';
|
|
3
|
+
export type ReactStarsRatingStyle = CSSProperties & {
|
|
4
|
+
'--stars-rating-focus-color'?: string;
|
|
5
|
+
'--stars-rating-gap'?: string;
|
|
6
|
+
'--stars-rating-primary-color'?: string;
|
|
7
|
+
'--stars-rating-secondary-color'?: string;
|
|
8
|
+
'--stars-rating-size'?: string;
|
|
9
|
+
};
|
|
10
|
+
export type ReactStarsRatingProps = Omit<ComponentPropsWithoutRef<'span'>, ReservedSpanProps> & {
|
|
2
11
|
/**
|
|
3
12
|
* `id` of the rendered element. Defaults to a generated, SSR-safe id, so
|
|
4
13
|
* only set this when something else needs to reference the control.
|
|
@@ -18,20 +27,27 @@ export type ReactStarsRatingProps = {
|
|
|
18
27
|
*/
|
|
19
28
|
defaultValue?: number;
|
|
20
29
|
/**
|
|
21
|
-
* Called
|
|
30
|
+
* Called when a pointer gesture commits, on `Enter`, and on blur — and on
|
|
22
31
|
* every arrow key when {@link ReactStarsRatingProps.isArrowSubmit} is set.
|
|
23
|
-
*
|
|
32
|
+
* Pointer previews never call it.
|
|
24
33
|
*/
|
|
25
34
|
onChange?: (value: number) => void;
|
|
26
35
|
/** Name of the hidden input contributed to the nearest HTML form. */
|
|
27
36
|
name?: string;
|
|
37
|
+
/** `id` of a form to associate with the hidden input. */
|
|
38
|
+
form?: string;
|
|
39
|
+
/** Layout, fill and horizontal keyboard direction. Defaults to `ltr`. */
|
|
40
|
+
dir?: 'ltr' | 'rtl';
|
|
28
41
|
/** Disable interaction and native form submission. */
|
|
29
42
|
disabled?: boolean;
|
|
43
|
+
/** Prevent editing while keeping the current value exposed to assistive technology. */
|
|
44
|
+
readOnly?: boolean;
|
|
30
45
|
/**
|
|
31
46
|
* Whether the rating can be changed. When `false` the control has no hover
|
|
32
47
|
* preview, no keyboard handling, and is removed from the tab order.
|
|
33
48
|
*
|
|
34
49
|
* @defaultValue true
|
|
50
|
+
* @deprecated Prefer {@link ReactStarsRatingProps.readOnly}.
|
|
35
51
|
*/
|
|
36
52
|
isEdit?: boolean;
|
|
37
53
|
/**
|
|
@@ -55,7 +71,7 @@ export type ReactStarsRatingProps = {
|
|
|
55
71
|
*/
|
|
56
72
|
size?: number;
|
|
57
73
|
/**
|
|
58
|
-
* Space between stars, in pixels. Applied as
|
|
74
|
+
* Space between stars, in pixels. Applied as inline-end padding to every star
|
|
59
75
|
* except the last.
|
|
60
76
|
*
|
|
61
77
|
* @defaultValue 0
|
|
@@ -68,16 +84,18 @@ export type ReactStarsRatingProps = {
|
|
|
68
84
|
* @defaultValue ''
|
|
69
85
|
*/
|
|
70
86
|
className?: string;
|
|
87
|
+
/** Container styles, including the documented `--stars-rating-*` variables. */
|
|
88
|
+
style?: ReactStarsRatingStyle;
|
|
71
89
|
/**
|
|
72
90
|
* Any CSS color for the filled part of a star.
|
|
73
91
|
*
|
|
74
|
-
* @defaultValue 'orange'
|
|
92
|
+
* @defaultValue 'var(--stars-rating-primary-color, orange)'
|
|
75
93
|
*/
|
|
76
94
|
primaryColor?: string;
|
|
77
95
|
/**
|
|
78
96
|
* Any CSS color for the empty part of a star.
|
|
79
97
|
*
|
|
80
|
-
* @defaultValue 'grey'
|
|
98
|
+
* @defaultValue 'var(--stars-rating-secondary-color, grey)'
|
|
81
99
|
*/
|
|
82
100
|
secondaryColor?: string;
|
|
83
101
|
/**
|
|
@@ -126,6 +144,131 @@ export type ReactStarsRatingProps = {
|
|
|
126
144
|
* <ReactStarsRating value={value} onChange={setValue} isHalf size={32} />
|
|
127
145
|
* ```
|
|
128
146
|
*/
|
|
129
|
-
declare const ReactStarsRating: (
|
|
147
|
+
declare const ReactStarsRating: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, ReservedSpanProps> & {
|
|
148
|
+
/**
|
|
149
|
+
* `id` of the rendered element. Defaults to a generated, SSR-safe id, so
|
|
150
|
+
* only set this when something else needs to reference the control.
|
|
151
|
+
*/
|
|
152
|
+
id?: string;
|
|
153
|
+
/**
|
|
154
|
+
* Controlled current rating. Values outside `0` to
|
|
155
|
+
* {@link ReactStarsRatingProps.count} are clamped. When omitted, the
|
|
156
|
+
* component manages its own value.
|
|
157
|
+
*/
|
|
158
|
+
value?: number;
|
|
159
|
+
/**
|
|
160
|
+
* Initial value when the component is uncontrolled. Ignored when
|
|
161
|
+
* {@link ReactStarsRatingProps.value} is provided.
|
|
162
|
+
*
|
|
163
|
+
* @defaultValue 0
|
|
164
|
+
*/
|
|
165
|
+
defaultValue?: number;
|
|
166
|
+
/**
|
|
167
|
+
* Called when a pointer gesture commits, on `Enter`, and on blur — and on
|
|
168
|
+
* every arrow key when {@link ReactStarsRatingProps.isArrowSubmit} is set.
|
|
169
|
+
* Pointer previews never call it.
|
|
170
|
+
*/
|
|
171
|
+
onChange?: (value: number) => void;
|
|
172
|
+
/** Name of the hidden input contributed to the nearest HTML form. */
|
|
173
|
+
name?: string;
|
|
174
|
+
/** `id` of a form to associate with the hidden input. */
|
|
175
|
+
form?: string;
|
|
176
|
+
/** Layout, fill and horizontal keyboard direction. Defaults to `ltr`. */
|
|
177
|
+
dir?: "ltr" | "rtl";
|
|
178
|
+
/** Disable interaction and native form submission. */
|
|
179
|
+
disabled?: boolean;
|
|
180
|
+
/** Prevent editing while keeping the current value exposed to assistive technology. */
|
|
181
|
+
readOnly?: boolean;
|
|
182
|
+
/**
|
|
183
|
+
* Whether the rating can be changed. When `false` the control has no hover
|
|
184
|
+
* preview, no keyboard handling, and is removed from the tab order.
|
|
185
|
+
*
|
|
186
|
+
* @defaultValue true
|
|
187
|
+
* @deprecated Prefer {@link ReactStarsRatingProps.readOnly}.
|
|
188
|
+
*/
|
|
189
|
+
isEdit?: boolean;
|
|
190
|
+
/**
|
|
191
|
+
* Whether half stars can be selected. When `true` the half of the star the
|
|
192
|
+
* pointer is over decides between `n - 0.5` and `n`, and the arrow keys step
|
|
193
|
+
* by `0.5` instead of `1`.
|
|
194
|
+
*
|
|
195
|
+
* @defaultValue true
|
|
196
|
+
*/
|
|
197
|
+
isHalf?: boolean;
|
|
198
|
+
/**
|
|
199
|
+
* How many stars to render. Also becomes `aria-valuemax`.
|
|
200
|
+
*
|
|
201
|
+
* @defaultValue 5
|
|
202
|
+
*/
|
|
203
|
+
count?: number;
|
|
204
|
+
/**
|
|
205
|
+
* Width of one star, in pixels.
|
|
206
|
+
*
|
|
207
|
+
* @defaultValue 25
|
|
208
|
+
*/
|
|
209
|
+
size?: number;
|
|
210
|
+
/**
|
|
211
|
+
* Space between stars, in pixels. Applied as inline-end padding to every star
|
|
212
|
+
* except the last.
|
|
213
|
+
*
|
|
214
|
+
* @defaultValue 0
|
|
215
|
+
*/
|
|
216
|
+
starGap?: number;
|
|
217
|
+
/**
|
|
218
|
+
* Class name for the container element. The stars themselves always carry
|
|
219
|
+
* `star` and `star-1`, `star-2`, … class names.
|
|
220
|
+
*
|
|
221
|
+
* @defaultValue ''
|
|
222
|
+
*/
|
|
223
|
+
className?: string;
|
|
224
|
+
/** Container styles, including the documented `--stars-rating-*` variables. */
|
|
225
|
+
style?: ReactStarsRatingStyle;
|
|
226
|
+
/**
|
|
227
|
+
* Any CSS color for the filled part of a star.
|
|
228
|
+
*
|
|
229
|
+
* @defaultValue 'var(--stars-rating-primary-color, orange)'
|
|
230
|
+
*/
|
|
231
|
+
primaryColor?: string;
|
|
232
|
+
/**
|
|
233
|
+
* Any CSS color for the empty part of a star.
|
|
234
|
+
*
|
|
235
|
+
* @defaultValue 'var(--stars-rating-secondary-color, grey)'
|
|
236
|
+
*/
|
|
237
|
+
secondaryColor?: string;
|
|
238
|
+
/**
|
|
239
|
+
* Optional color for the portion being previewed by the pointer. The saved
|
|
240
|
+
* value keeps {@link ReactStarsRatingProps.primaryColor}, so moving below an
|
|
241
|
+
* existing rating can display preview, saved, and inactive regions at once.
|
|
242
|
+
* When omitted, hover previews retain the original two-color behavior.
|
|
243
|
+
*/
|
|
244
|
+
hoverColor?: string;
|
|
245
|
+
/**
|
|
246
|
+
* Report every arrow-key step through
|
|
247
|
+
* {@link ReactStarsRatingProps.onChange} immediately, instead of waiting for
|
|
248
|
+
* `Enter` or blur.
|
|
249
|
+
*
|
|
250
|
+
* @defaultValue false
|
|
251
|
+
*/
|
|
252
|
+
isArrowSubmit?: boolean;
|
|
253
|
+
/**
|
|
254
|
+
* Accessible name for the control. Ignored when
|
|
255
|
+
* {@link ReactStarsRatingProps.ariaLabelledBy} is set.
|
|
256
|
+
*
|
|
257
|
+
* @defaultValue 'Star rating'
|
|
258
|
+
*/
|
|
259
|
+
ariaLabel?: string;
|
|
260
|
+
/**
|
|
261
|
+
* `id` of an element that labels this control, for when the label already
|
|
262
|
+
* exists on the page. Takes precedence over
|
|
263
|
+
* {@link ReactStarsRatingProps.ariaLabel}.
|
|
264
|
+
*/
|
|
265
|
+
ariaLabelledBy?: string;
|
|
266
|
+
/**
|
|
267
|
+
* Formats the accessible value description.
|
|
268
|
+
*
|
|
269
|
+
* @defaultValue `(value, count) => `${value} of ${count}``
|
|
270
|
+
*/
|
|
271
|
+
getValueText?: (value: number, count: number) => string;
|
|
272
|
+
} & import("react").RefAttributes<HTMLSpanElement>>;
|
|
130
273
|
export { ReactStarsRating };
|
|
131
274
|
export default ReactStarsRating;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
import { type ComponentPropsWithoutRef, type CSSProperties } from 'react';
|
|
2
|
+
type ReservedSpanProps = 'aria-disabled' | 'aria-label' | 'aria-labelledby' | 'aria-orientation' | 'aria-readonly' | 'aria-valuemax' | 'aria-valuemin' | 'aria-valuenow' | 'aria-valuetext' | 'children' | 'className' | 'dangerouslySetInnerHTML' | 'defaultValue' | 'dir' | 'id' | 'onChange' | 'onKeyDown' | 'onPointerCancel' | 'onPointerDown' | 'onPointerLeave' | 'onPointerMove' | 'onPointerUp' | 'role' | 'style' | 'tabIndex';
|
|
3
|
+
export type ReactStarsRatingStyle = CSSProperties & {
|
|
4
|
+
'--stars-rating-focus-color'?: string;
|
|
5
|
+
'--stars-rating-gap'?: string;
|
|
6
|
+
'--stars-rating-primary-color'?: string;
|
|
7
|
+
'--stars-rating-secondary-color'?: string;
|
|
8
|
+
'--stars-rating-size'?: string;
|
|
9
|
+
};
|
|
10
|
+
export type ReactStarsRatingProps = Omit<ComponentPropsWithoutRef<'span'>, ReservedSpanProps> & {
|
|
2
11
|
/**
|
|
3
12
|
* `id` of the rendered element. Defaults to a generated, SSR-safe id, so
|
|
4
13
|
* only set this when something else needs to reference the control.
|
|
@@ -18,20 +27,27 @@ export type ReactStarsRatingProps = {
|
|
|
18
27
|
*/
|
|
19
28
|
defaultValue?: number;
|
|
20
29
|
/**
|
|
21
|
-
* Called
|
|
30
|
+
* Called when a pointer gesture commits, on `Enter`, and on blur — and on
|
|
22
31
|
* every arrow key when {@link ReactStarsRatingProps.isArrowSubmit} is set.
|
|
23
|
-
*
|
|
32
|
+
* Pointer previews never call it.
|
|
24
33
|
*/
|
|
25
34
|
onChange?: (value: number) => void;
|
|
26
35
|
/** Name of the hidden input contributed to the nearest HTML form. */
|
|
27
36
|
name?: string;
|
|
37
|
+
/** `id` of a form to associate with the hidden input. */
|
|
38
|
+
form?: string;
|
|
39
|
+
/** Layout, fill and horizontal keyboard direction. Defaults to `ltr`. */
|
|
40
|
+
dir?: 'ltr' | 'rtl';
|
|
28
41
|
/** Disable interaction and native form submission. */
|
|
29
42
|
disabled?: boolean;
|
|
43
|
+
/** Prevent editing while keeping the current value exposed to assistive technology. */
|
|
44
|
+
readOnly?: boolean;
|
|
30
45
|
/**
|
|
31
46
|
* Whether the rating can be changed. When `false` the control has no hover
|
|
32
47
|
* preview, no keyboard handling, and is removed from the tab order.
|
|
33
48
|
*
|
|
34
49
|
* @defaultValue true
|
|
50
|
+
* @deprecated Prefer {@link ReactStarsRatingProps.readOnly}.
|
|
35
51
|
*/
|
|
36
52
|
isEdit?: boolean;
|
|
37
53
|
/**
|
|
@@ -55,7 +71,7 @@ export type ReactStarsRatingProps = {
|
|
|
55
71
|
*/
|
|
56
72
|
size?: number;
|
|
57
73
|
/**
|
|
58
|
-
* Space between stars, in pixels. Applied as
|
|
74
|
+
* Space between stars, in pixels. Applied as inline-end padding to every star
|
|
59
75
|
* except the last.
|
|
60
76
|
*
|
|
61
77
|
* @defaultValue 0
|
|
@@ -68,16 +84,18 @@ export type ReactStarsRatingProps = {
|
|
|
68
84
|
* @defaultValue ''
|
|
69
85
|
*/
|
|
70
86
|
className?: string;
|
|
87
|
+
/** Container styles, including the documented `--stars-rating-*` variables. */
|
|
88
|
+
style?: ReactStarsRatingStyle;
|
|
71
89
|
/**
|
|
72
90
|
* Any CSS color for the filled part of a star.
|
|
73
91
|
*
|
|
74
|
-
* @defaultValue 'orange'
|
|
92
|
+
* @defaultValue 'var(--stars-rating-primary-color, orange)'
|
|
75
93
|
*/
|
|
76
94
|
primaryColor?: string;
|
|
77
95
|
/**
|
|
78
96
|
* Any CSS color for the empty part of a star.
|
|
79
97
|
*
|
|
80
|
-
* @defaultValue 'grey'
|
|
98
|
+
* @defaultValue 'var(--stars-rating-secondary-color, grey)'
|
|
81
99
|
*/
|
|
82
100
|
secondaryColor?: string;
|
|
83
101
|
/**
|
|
@@ -126,6 +144,131 @@ export type ReactStarsRatingProps = {
|
|
|
126
144
|
* <ReactStarsRating value={value} onChange={setValue} isHalf size={32} />
|
|
127
145
|
* ```
|
|
128
146
|
*/
|
|
129
|
-
declare const ReactStarsRating: (
|
|
147
|
+
declare const ReactStarsRating: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, ReservedSpanProps> & {
|
|
148
|
+
/**
|
|
149
|
+
* `id` of the rendered element. Defaults to a generated, SSR-safe id, so
|
|
150
|
+
* only set this when something else needs to reference the control.
|
|
151
|
+
*/
|
|
152
|
+
id?: string;
|
|
153
|
+
/**
|
|
154
|
+
* Controlled current rating. Values outside `0` to
|
|
155
|
+
* {@link ReactStarsRatingProps.count} are clamped. When omitted, the
|
|
156
|
+
* component manages its own value.
|
|
157
|
+
*/
|
|
158
|
+
value?: number;
|
|
159
|
+
/**
|
|
160
|
+
* Initial value when the component is uncontrolled. Ignored when
|
|
161
|
+
* {@link ReactStarsRatingProps.value} is provided.
|
|
162
|
+
*
|
|
163
|
+
* @defaultValue 0
|
|
164
|
+
*/
|
|
165
|
+
defaultValue?: number;
|
|
166
|
+
/**
|
|
167
|
+
* Called when a pointer gesture commits, on `Enter`, and on blur — and on
|
|
168
|
+
* every arrow key when {@link ReactStarsRatingProps.isArrowSubmit} is set.
|
|
169
|
+
* Pointer previews never call it.
|
|
170
|
+
*/
|
|
171
|
+
onChange?: (value: number) => void;
|
|
172
|
+
/** Name of the hidden input contributed to the nearest HTML form. */
|
|
173
|
+
name?: string;
|
|
174
|
+
/** `id` of a form to associate with the hidden input. */
|
|
175
|
+
form?: string;
|
|
176
|
+
/** Layout, fill and horizontal keyboard direction. Defaults to `ltr`. */
|
|
177
|
+
dir?: "ltr" | "rtl";
|
|
178
|
+
/** Disable interaction and native form submission. */
|
|
179
|
+
disabled?: boolean;
|
|
180
|
+
/** Prevent editing while keeping the current value exposed to assistive technology. */
|
|
181
|
+
readOnly?: boolean;
|
|
182
|
+
/**
|
|
183
|
+
* Whether the rating can be changed. When `false` the control has no hover
|
|
184
|
+
* preview, no keyboard handling, and is removed from the tab order.
|
|
185
|
+
*
|
|
186
|
+
* @defaultValue true
|
|
187
|
+
* @deprecated Prefer {@link ReactStarsRatingProps.readOnly}.
|
|
188
|
+
*/
|
|
189
|
+
isEdit?: boolean;
|
|
190
|
+
/**
|
|
191
|
+
* Whether half stars can be selected. When `true` the half of the star the
|
|
192
|
+
* pointer is over decides between `n - 0.5` and `n`, and the arrow keys step
|
|
193
|
+
* by `0.5` instead of `1`.
|
|
194
|
+
*
|
|
195
|
+
* @defaultValue true
|
|
196
|
+
*/
|
|
197
|
+
isHalf?: boolean;
|
|
198
|
+
/**
|
|
199
|
+
* How many stars to render. Also becomes `aria-valuemax`.
|
|
200
|
+
*
|
|
201
|
+
* @defaultValue 5
|
|
202
|
+
*/
|
|
203
|
+
count?: number;
|
|
204
|
+
/**
|
|
205
|
+
* Width of one star, in pixels.
|
|
206
|
+
*
|
|
207
|
+
* @defaultValue 25
|
|
208
|
+
*/
|
|
209
|
+
size?: number;
|
|
210
|
+
/**
|
|
211
|
+
* Space between stars, in pixels. Applied as inline-end padding to every star
|
|
212
|
+
* except the last.
|
|
213
|
+
*
|
|
214
|
+
* @defaultValue 0
|
|
215
|
+
*/
|
|
216
|
+
starGap?: number;
|
|
217
|
+
/**
|
|
218
|
+
* Class name for the container element. The stars themselves always carry
|
|
219
|
+
* `star` and `star-1`, `star-2`, … class names.
|
|
220
|
+
*
|
|
221
|
+
* @defaultValue ''
|
|
222
|
+
*/
|
|
223
|
+
className?: string;
|
|
224
|
+
/** Container styles, including the documented `--stars-rating-*` variables. */
|
|
225
|
+
style?: ReactStarsRatingStyle;
|
|
226
|
+
/**
|
|
227
|
+
* Any CSS color for the filled part of a star.
|
|
228
|
+
*
|
|
229
|
+
* @defaultValue 'var(--stars-rating-primary-color, orange)'
|
|
230
|
+
*/
|
|
231
|
+
primaryColor?: string;
|
|
232
|
+
/**
|
|
233
|
+
* Any CSS color for the empty part of a star.
|
|
234
|
+
*
|
|
235
|
+
* @defaultValue 'var(--stars-rating-secondary-color, grey)'
|
|
236
|
+
*/
|
|
237
|
+
secondaryColor?: string;
|
|
238
|
+
/**
|
|
239
|
+
* Optional color for the portion being previewed by the pointer. The saved
|
|
240
|
+
* value keeps {@link ReactStarsRatingProps.primaryColor}, so moving below an
|
|
241
|
+
* existing rating can display preview, saved, and inactive regions at once.
|
|
242
|
+
* When omitted, hover previews retain the original two-color behavior.
|
|
243
|
+
*/
|
|
244
|
+
hoverColor?: string;
|
|
245
|
+
/**
|
|
246
|
+
* Report every arrow-key step through
|
|
247
|
+
* {@link ReactStarsRatingProps.onChange} immediately, instead of waiting for
|
|
248
|
+
* `Enter` or blur.
|
|
249
|
+
*
|
|
250
|
+
* @defaultValue false
|
|
251
|
+
*/
|
|
252
|
+
isArrowSubmit?: boolean;
|
|
253
|
+
/**
|
|
254
|
+
* Accessible name for the control. Ignored when
|
|
255
|
+
* {@link ReactStarsRatingProps.ariaLabelledBy} is set.
|
|
256
|
+
*
|
|
257
|
+
* @defaultValue 'Star rating'
|
|
258
|
+
*/
|
|
259
|
+
ariaLabel?: string;
|
|
260
|
+
/**
|
|
261
|
+
* `id` of an element that labels this control, for when the label already
|
|
262
|
+
* exists on the page. Takes precedence over
|
|
263
|
+
* {@link ReactStarsRatingProps.ariaLabel}.
|
|
264
|
+
*/
|
|
265
|
+
ariaLabelledBy?: string;
|
|
266
|
+
/**
|
|
267
|
+
* Formats the accessible value description.
|
|
268
|
+
*
|
|
269
|
+
* @defaultValue `(value, count) => `${value} of ${count}``
|
|
270
|
+
*/
|
|
271
|
+
getValueText?: (value: number, count: number) => string;
|
|
272
|
+
} & import("react").RefAttributes<HTMLSpanElement>>;
|
|
130
273
|
export { ReactStarsRating };
|
|
131
274
|
export default ReactStarsRating;
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{
|
|
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};
|
package/dist/index.umd.cjs
CHANGED
|
@@ -1 +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,
|
|
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});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-awesome-stars-rating",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "Accessible star rating component for React, with half stars, keyboard control and any scale or palette.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"type": "git",
|
|
49
49
|
"url": "git+https://github.com/fedoryakubovich/react-awesome-stars-rating.git"
|
|
50
50
|
},
|
|
51
|
-
"homepage": "https://react-awesome-stars-rating.vercel.app",
|
|
51
|
+
"homepage": "https://react-awesome-stars-rating-orpin.vercel.app/",
|
|
52
52
|
"author": "Fedor Yakubovich",
|
|
53
53
|
"bugs": {
|
|
54
54
|
"url": "https://github.com/fedoryakubovich/react-awesome-stars-rating/issues"
|
|
@@ -59,9 +59,10 @@
|
|
|
59
59
|
"build": "vite build && vite build -c vite.umd.config.ts && tsc -p tsconfig.build.json && node scripts/emit-cjs-types.mjs",
|
|
60
60
|
"build:site": "vite build --config vite.site.config.ts",
|
|
61
61
|
"preview": "vite preview",
|
|
62
|
-
"lint": "
|
|
63
|
-
"
|
|
64
|
-
"format
|
|
62
|
+
"lint": "oxlint .",
|
|
63
|
+
"verify:lint": "node scripts/verify-lint.mjs",
|
|
64
|
+
"format": "oxfmt --check .",
|
|
65
|
+
"format:write": "oxfmt --write .",
|
|
65
66
|
"test": "vitest run",
|
|
66
67
|
"test:watch": "vitest",
|
|
67
68
|
"test:e2e": "playwright test",
|
|
@@ -70,6 +71,8 @@
|
|
|
70
71
|
"verify:package": "node scripts/verify-package.mjs",
|
|
71
72
|
"verify:release": "node scripts/verify-release-notes.mjs",
|
|
72
73
|
"verify:published": "node scripts/verify-published.mjs",
|
|
74
|
+
"verify:links": "node scripts/verify-links.mjs",
|
|
75
|
+
"verify:site": "playwright test --config playwright.deployed.config.ts",
|
|
73
76
|
"lint:package": "publint && attw --pack",
|
|
74
77
|
"size": "size-limit",
|
|
75
78
|
"typecheck": "tsc -p tsconfig.json --noEmit",
|
|
@@ -94,70 +97,70 @@
|
|
|
94
97
|
"@semantic-release/github": "^12.0.9",
|
|
95
98
|
"@semantic-release/npm": "^13.1.5",
|
|
96
99
|
"@size-limit/file": "^13.0.3",
|
|
97
|
-
"@storybook/addon-a11y": "^10.
|
|
98
|
-
"@storybook/addon-links": "^10.
|
|
99
|
-
"@storybook/react-vite": "^10.
|
|
100
|
+
"@storybook/addon-a11y": "^10.6.0",
|
|
101
|
+
"@storybook/addon-links": "^10.6.0",
|
|
102
|
+
"@storybook/react-vite": "^10.6.0",
|
|
100
103
|
"@tailwindcss/postcss": "^4.3.3",
|
|
101
104
|
"@tanstack/react-form": "^1.33.5",
|
|
102
105
|
"@testing-library/dom": "^10.4.1",
|
|
103
106
|
"@testing-library/jest-dom": "^7.0.1",
|
|
104
107
|
"@testing-library/react": "^16.3.3",
|
|
105
|
-
"@testing-library/user-event": "^14.6.
|
|
108
|
+
"@testing-library/user-event": "^14.6.7",
|
|
106
109
|
"@types/react": "^19.2.18",
|
|
107
|
-
"@types/react-dom": "^19.2.
|
|
108
|
-
"@typescript-eslint/eslint-plugin": "^8.68.0",
|
|
109
|
-
"@typescript-eslint/parser": "^8.68.0",
|
|
110
|
+
"@types/react-dom": "^19.2.7",
|
|
110
111
|
"@vitejs/plugin-react": "^6.1.1",
|
|
111
|
-
"@vitest/coverage-v8": "^
|
|
112
|
+
"@vitest/coverage-v8": "^5.0.0",
|
|
112
113
|
"axe-core": "^4.13.0",
|
|
113
114
|
"conventional-changelog-conventionalcommits": "^9.3.1",
|
|
114
115
|
"conventional-commits-filter": "^6.0.1",
|
|
115
116
|
"eslint": "^9.39.5",
|
|
116
|
-
"eslint-config-prettier": "^10.1.8",
|
|
117
|
-
"eslint-plugin-jsx-a11y": "^6.10.2",
|
|
118
117
|
"eslint-plugin-react": "^7.37.5",
|
|
119
118
|
"eslint-plugin-react-hooks": "^7.1.1",
|
|
120
|
-
"eslint-plugin-storybook": "10.5.10",
|
|
121
119
|
"formik": "^2.4.9",
|
|
122
120
|
"husky": "^9.1.7",
|
|
123
121
|
"jsdom": "^30.0.1",
|
|
124
122
|
"lint-staged": "^17.4.1",
|
|
125
|
-
"
|
|
123
|
+
"oxfmt": "^0.66.0",
|
|
124
|
+
"oxlint": "^1.81.0",
|
|
126
125
|
"publint": "^0.3.24",
|
|
127
126
|
"react": "^19.2.8",
|
|
128
127
|
"react-dom": "^19.2.8",
|
|
129
128
|
"react-hook-form": "^7.87.0",
|
|
130
129
|
"rimraf": "^6.1.3",
|
|
131
130
|
"semantic-release": "^25.0.9",
|
|
131
|
+
"sigstore": "^5.0.0",
|
|
132
132
|
"size-limit": "^13.0.3",
|
|
133
|
-
"storybook": "^10.
|
|
133
|
+
"storybook": "^10.6.0",
|
|
134
134
|
"tailwindcss": "^4.3.3",
|
|
135
135
|
"typescript": "^6.0.3",
|
|
136
136
|
"vite": "^8.2.2",
|
|
137
|
-
"vitest": "^
|
|
137
|
+
"vitest": "^5.0.0"
|
|
138
138
|
},
|
|
139
139
|
"size-limit": [
|
|
140
140
|
{
|
|
141
141
|
"name": "ESM entry",
|
|
142
142
|
"path": "dist/index.mjs",
|
|
143
|
-
"limit": "
|
|
143
|
+
"limit": "3 kB",
|
|
144
144
|
"gzip": true
|
|
145
145
|
},
|
|
146
146
|
{
|
|
147
147
|
"name": "CJS entry",
|
|
148
148
|
"path": "dist/index.cjs",
|
|
149
|
-
"limit": "
|
|
149
|
+
"limit": "3.05 kB",
|
|
150
150
|
"gzip": true
|
|
151
151
|
},
|
|
152
152
|
{
|
|
153
153
|
"name": "UMD bundle",
|
|
154
154
|
"path": "dist/index.umd.cjs",
|
|
155
|
-
"limit": "
|
|
155
|
+
"limit": "3.1 kB",
|
|
156
156
|
"gzip": true
|
|
157
157
|
}
|
|
158
158
|
],
|
|
159
159
|
"lint-staged": {
|
|
160
|
-
"*.{ts,tsx,js,jsx,mjs,cjs
|
|
161
|
-
|
|
160
|
+
"*.{ts,tsx,js,jsx,mjs,cjs}": [
|
|
161
|
+
"oxlint --fix",
|
|
162
|
+
"oxfmt --write"
|
|
163
|
+
],
|
|
164
|
+
"*.{json,jsonc,css,md,yml,yaml,html}": "oxfmt --write"
|
|
162
165
|
}
|
|
163
166
|
}
|