@fluentui/react-rating 9.3.15 → 9.4.1
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/CHANGELOG.md +23 -2
- package/dist/index.d.ts +63 -3
- package/lib/Rating.js +1 -1
- package/lib/Rating.js.map +1 -1
- package/lib/RatingDisplay.js +1 -1
- package/lib/RatingDisplay.js.map +1 -1
- package/lib/RatingItem.js +1 -1
- package/lib/RatingItem.js.map +1 -1
- package/lib/components/Rating/Rating.types.js +1 -1
- package/lib/components/Rating/Rating.types.js.map +1 -1
- package/lib/components/Rating/index.js +1 -1
- package/lib/components/Rating/index.js.map +1 -1
- package/lib/components/Rating/renderRating.js.map +1 -1
- package/lib/components/Rating/useRating.js +33 -13
- package/lib/components/Rating/useRating.js.map +1 -1
- package/lib/components/Rating/useRatingContextValues.js.map +1 -1
- package/lib/components/RatingDisplay/RatingDisplay.types.js +1 -1
- package/lib/components/RatingDisplay/RatingDisplay.types.js.map +1 -1
- package/lib/components/RatingDisplay/index.js +1 -1
- package/lib/components/RatingDisplay/index.js.map +1 -1
- package/lib/components/RatingDisplay/renderRatingDisplay.js.map +1 -1
- package/lib/components/RatingDisplay/useRatingDisplay.js +28 -7
- package/lib/components/RatingDisplay/useRatingDisplay.js.map +1 -1
- package/lib/components/RatingDisplay/useRatingDisplayContextValues.js.map +1 -1
- package/lib/components/RatingItem/RatingItem.types.js.map +1 -1
- package/lib/components/RatingItem/index.js +1 -1
- package/lib/components/RatingItem/index.js.map +1 -1
- package/lib/components/RatingItem/renderRatingItem.js.map +1 -1
- package/lib/components/RatingItem/useRatingItem.js +17 -4
- package/lib/components/RatingItem/useRatingItem.js.map +1 -1
- package/lib/contexts/RatingItemContext.js +2 -3
- package/lib/contexts/RatingItemContext.js.map +1 -1
- package/lib/index.js +3 -3
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Rating.js +3 -0
- package/lib-commonjs/Rating.js.map +1 -1
- package/lib-commonjs/RatingDisplay.js +3 -0
- package/lib-commonjs/RatingDisplay.js.map +1 -1
- package/lib-commonjs/RatingItem.js +3 -0
- package/lib-commonjs/RatingItem.js.map +1 -1
- package/lib-commonjs/components/Rating/Rating.types.js +0 -2
- package/lib-commonjs/components/Rating/Rating.types.js.map +1 -1
- package/lib-commonjs/components/Rating/index.js +3 -0
- package/lib-commonjs/components/Rating/index.js.map +1 -1
- package/lib-commonjs/components/Rating/renderRating.js.map +1 -1
- package/lib-commonjs/components/Rating/useRating.js +37 -16
- package/lib-commonjs/components/Rating/useRating.js.map +1 -1
- package/lib-commonjs/components/Rating/useRatingContextValues.js.map +1 -1
- package/lib-commonjs/components/RatingDisplay/RatingDisplay.types.js +0 -2
- package/lib-commonjs/components/RatingDisplay/RatingDisplay.types.js.map +1 -1
- package/lib-commonjs/components/RatingDisplay/index.js +3 -0
- package/lib-commonjs/components/RatingDisplay/index.js.map +1 -1
- package/lib-commonjs/components/RatingDisplay/renderRatingDisplay.js.map +1 -1
- package/lib-commonjs/components/RatingDisplay/useRatingDisplay.js +32 -10
- package/lib-commonjs/components/RatingDisplay/useRatingDisplay.js.map +1 -1
- package/lib-commonjs/components/RatingDisplay/useRatingDisplayContextValues.js.map +1 -1
- package/lib-commonjs/components/RatingItem/RatingItem.types.js.map +1 -1
- package/lib-commonjs/components/RatingItem/index.js +3 -0
- package/lib-commonjs/components/RatingItem/index.js.map +1 -1
- package/lib-commonjs/components/RatingItem/renderRatingItem.js.map +1 -1
- package/lib-commonjs/components/RatingItem/useRatingItem.js +21 -7
- package/lib-commonjs/components/RatingItem/useRatingItem.js.map +1 -1
- package/lib-commonjs/contexts/RatingItemContext.js +2 -3
- package/lib-commonjs/contexts/RatingItemContext.js.map +1 -1
- package/lib-commonjs/index.js +9 -0
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RatingItem/useRatingItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport type { RatingItemProps, RatingItemState } from './RatingItem.types';\nimport { useRatingItemContextValue_unstable } from '../../contexts/RatingItemContext';\n\nconst defaultItemLabel = (num: number) => num + '';\n\n/**\n * Create the state required to render RatingItem.\n *\n * The returned state can be modified with hooks such as useRatingItemStyles_unstable,\n * before being passed to renderRatingItem_unstable.\n *\n * @param props - props from this instance of RatingItem\n * @param ref - reference to root HTMLElement of RatingItem\n */\nexport const useRatingItem_unstable = (props: RatingItemProps, ref: React.Ref<HTMLSpanElement>): RatingItemState => {\n const context = useRatingItemContextValue_unstable();\n const { value = 0 } = props;\n const { itemLabel = defaultItemLabel, iconFilled: IconFilled, iconOutline: IconOutline } = context;\n\n const ratingValue = Math.round((context.value || 0) * 2) / 2; // round to the nearest 0.5\n\n const displayedRatingValue = context.hoveredValue ?? ratingValue;\n\n const appearance = context.interactive ? 'outline' : 'filled';\n\n let iconFillWidth;\n if (context.compact || displayedRatingValue >= value) {\n iconFillWidth = 1;\n } else if (displayedRatingValue >= value - 0.5) {\n iconFillWidth = 0.5;\n } else {\n iconFillWidth = 0;\n }\n\n const root = slot.always(\n getIntrinsicElementProps('span', {\n ref: useMergedRefs(useFocusWithin<HTMLSpanElement>(), ref),\n ...props,\n }),\n { elementType: 'span' },\n );\n\n let unselectedIcon;\n if (iconFillWidth < 1) {\n unselectedIcon = slot.always(props.unselectedIcon, {\n defaultProps: {\n children: appearance === 'filled' ? <IconFilled /> : <IconOutline />,\n 'aria-hidden': true,\n },\n elementType: 'div',\n });\n }\n\n let selectedIcon;\n if (iconFillWidth > 0) {\n selectedIcon = slot.always(props.selectedIcon, {\n defaultProps: {\n children: <IconFilled />,\n 'aria-hidden': true,\n },\n elementType: 'div',\n });\n }\n\n let halfValueInput;\n if (context.interactive && context.step === 0.5) {\n halfValueInput = slot.always(props.halfValueInput, {\n defaultProps: {\n type: 'radio',\n name: context.name,\n value: value - 0.5,\n checked: ratingValue === value - 0.5,\n 'aria-label': itemLabel(value - 0.5),\n onChange: () => {\n // This empty onChange handler silences an incorrect React warning about not using onChange for a controlled input.\n // The parent Rating component has the real onChange handler to listen to change events from this input.\n },\n },\n elementType: 'input',\n });\n }\n\n let fullValueInput;\n if (context.interactive) {\n fullValueInput = slot.always(props.fullValueInput, {\n defaultProps: {\n type: 'radio',\n name: context.name,\n value,\n checked: ratingValue === value,\n 'aria-label': itemLabel(value),\n onChange: () => {\n // This empty onChange handler silences an incorrect React warning about not using onChange for a controlled input.\n // The parent Rating component has the real onChange handler to listen to change events from this input.\n },\n },\n\n elementType: 'input',\n });\n }\n\n
|
|
1
|
+
{"version":3,"sources":["../src/components/RatingItem/useRatingItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport type { RatingItemBaseProps, RatingItemBaseState, RatingItemProps, RatingItemState } from './RatingItem.types';\nimport { useRatingItemContextValue_unstable } from '../../contexts/RatingItemContext';\n\nconst defaultItemLabel = (num: number) => num + '';\n\n/**\n * Create the state required to render RatingItem.\n *\n * The returned state can be modified with hooks such as useRatingItemStyles_unstable,\n * before being passed to renderRatingItem_unstable.\n *\n * @param props - props from this instance of RatingItem\n * @param ref - reference to root HTMLElement of RatingItem\n */\nexport const useRatingItem_unstable = (props: RatingItemProps, ref: React.Ref<HTMLSpanElement>): RatingItemState => {\n const context = useRatingItemContextValue_unstable();\n const state = useRatingItemBase_unstable(props, ref);\n\n return {\n ...state,\n color: context.color,\n size: context.size,\n };\n};\n\n/**\n * Base hook for RatingItem component. Manages state related to fill width calculation,\n * radio input slots (for ARIA rating interaction), icon slots, and interactive mode —\n * without design props (color, size from context).\n *\n * @param props - props from this instance of RatingItem\n * @param ref - reference to root HTMLElement of RatingItem\n */\nexport const useRatingItemBase_unstable = (\n props: RatingItemBaseProps,\n ref: React.Ref<HTMLSpanElement>,\n): RatingItemBaseState => {\n const context = useRatingItemContextValue_unstable();\n const { value = 0 } = props;\n const { itemLabel = defaultItemLabel, iconFilled: IconFilled, iconOutline: IconOutline } = context;\n\n const ratingValue = Math.round((context.value || 0) * 2) / 2; // round to the nearest 0.5\n\n const displayedRatingValue = context.hoveredValue ?? ratingValue;\n\n const appearance = context.interactive ? 'outline' : 'filled';\n\n let iconFillWidth;\n if (context.compact || displayedRatingValue >= value) {\n iconFillWidth = 1;\n } else if (displayedRatingValue >= value - 0.5) {\n iconFillWidth = 0.5;\n } else {\n iconFillWidth = 0;\n }\n\n const root = slot.always(\n getIntrinsicElementProps('span', {\n ref: useMergedRefs(useFocusWithin<HTMLSpanElement>(), ref),\n ...props,\n }),\n { elementType: 'span' },\n );\n\n let unselectedIcon;\n if (iconFillWidth < 1) {\n unselectedIcon = slot.always(props.unselectedIcon, {\n defaultProps: {\n children: appearance === 'filled' ? <IconFilled /> : <IconOutline />,\n 'aria-hidden': true,\n },\n elementType: 'div',\n });\n }\n\n let selectedIcon;\n if (iconFillWidth > 0) {\n selectedIcon = slot.always(props.selectedIcon, {\n defaultProps: {\n children: <IconFilled />,\n 'aria-hidden': true,\n },\n elementType: 'div',\n });\n }\n\n let halfValueInput;\n if (context.interactive && context.step === 0.5) {\n halfValueInput = slot.always(props.halfValueInput, {\n defaultProps: {\n type: 'radio',\n name: context.name,\n value: value - 0.5,\n checked: ratingValue === value - 0.5,\n 'aria-label': itemLabel(value - 0.5),\n onChange: () => {\n // This empty onChange handler silences an incorrect React warning about not using onChange for a controlled input.\n // The parent Rating component has the real onChange handler to listen to change events from this input.\n },\n },\n elementType: 'input',\n });\n }\n\n let fullValueInput;\n if (context.interactive) {\n fullValueInput = slot.always(props.fullValueInput, {\n defaultProps: {\n type: 'radio',\n name: context.name,\n value,\n checked: ratingValue === value,\n 'aria-label': itemLabel(value),\n onChange: () => {\n // This empty onChange handler silences an incorrect React warning about not using onChange for a controlled input.\n // The parent Rating component has the real onChange handler to listen to change events from this input.\n },\n },\n\n elementType: 'input',\n });\n }\n\n return {\n appearance,\n step: context.step,\n iconFillWidth,\n value,\n components: {\n root: 'span',\n selectedIcon: 'div',\n unselectedIcon: 'div',\n halfValueInput: 'input',\n fullValueInput: 'input',\n },\n root,\n selectedIcon,\n unselectedIcon,\n halfValueInput,\n fullValueInput,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMergedRefs","useFocusWithin","useRatingItemContextValue_unstable","defaultItemLabel","num","useRatingItem_unstable","props","ref","context","state","useRatingItemBase_unstable","color","size","value","itemLabel","iconFilled","IconFilled","iconOutline","IconOutline","ratingValue","Math","round","displayedRatingValue","hoveredValue","appearance","interactive","iconFillWidth","compact","root","always","elementType","unselectedIcon","defaultProps","children","selectedIcon","halfValueInput","step","type","name","checked","onChange","fullValueInput","components"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAC1F,SAASC,cAAc,QAAQ,0BAA0B;AAEzD,SAASC,kCAAkC,QAAQ,mCAAmC;AAEtF,MAAMC,mBAAmB,CAACC,MAAgBA,MAAM;AAEhD;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAMC,UAAUN;IAChB,MAAMO,QAAQC,2BAA2BJ,OAAOC;IAEhD,OAAO;QACL,GAAGE,KAAK;QACRE,OAAOH,QAAQG,KAAK;QACpBC,MAAMJ,QAAQI,IAAI;IACpB;AACF,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMF,6BAA6B,CACxCJ,OACAC;IAEA,MAAMC,UAAUN;IAChB,MAAM,EAAEW,QAAQ,CAAC,EAAE,GAAGP;IACtB,MAAM,EAAEQ,YAAYX,gBAAgB,EAAEY,YAAYC,UAAU,EAAEC,aAAaC,WAAW,EAAE,GAAGV;IAE3F,MAAMW,cAAcC,KAAKC,KAAK,CAAC,AAACb,CAAAA,QAAQK,KAAK,IAAI,CAAA,IAAK,KAAK,GAAG,2BAA2B;QAE5DL;IAA7B,MAAMc,uBAAuBd,CAAAA,wBAAAA,QAAQe,YAAY,cAApBf,mCAAAA,wBAAwBW;IAErD,MAAMK,aAAahB,QAAQiB,WAAW,GAAG,YAAY;IAErD,IAAIC;IACJ,IAAIlB,QAAQmB,OAAO,IAAIL,wBAAwBT,OAAO;QACpDa,gBAAgB;IAClB,OAAO,IAAIJ,wBAAwBT,QAAQ,KAAK;QAC9Ca,gBAAgB;IAClB,OAAO;QACLA,gBAAgB;IAClB;IAEA,MAAME,OAAO7B,KAAK8B,MAAM,CACtB/B,yBAAyB,QAAQ;QAC/BS,KAAKP,cAAcC,kBAAmCM;QACtD,GAAGD,KAAK;IACV,IACA;QAAEwB,aAAa;IAAO;IAGxB,IAAIC;IACJ,IAAIL,gBAAgB,GAAG;QACrBK,iBAAiBhC,KAAK8B,MAAM,CAACvB,MAAMyB,cAAc,EAAE;YACjDC,cAAc;gBACZC,UAAUT,eAAe,yBAAW,oBAACR,kCAAgB,oBAACE;gBACtD,eAAe;YACjB;YACAY,aAAa;QACf;IACF;IAEA,IAAII;IACJ,IAAIR,gBAAgB,GAAG;QACrBQ,eAAenC,KAAK8B,MAAM,CAACvB,MAAM4B,YAAY,EAAE;YAC7CF,cAAc;gBACZC,wBAAU,oBAACjB;gBACX,eAAe;YACjB;YACAc,aAAa;QACf;IACF;IAEA,IAAIK;IACJ,IAAI3B,QAAQiB,WAAW,IAAIjB,QAAQ4B,IAAI,KAAK,KAAK;QAC/CD,iBAAiBpC,KAAK8B,MAAM,CAACvB,MAAM6B,cAAc,EAAE;YACjDH,cAAc;gBACZK,MAAM;gBACNC,MAAM9B,QAAQ8B,IAAI;gBAClBzB,OAAOA,QAAQ;gBACf0B,SAASpB,gBAAgBN,QAAQ;gBACjC,cAAcC,UAAUD,QAAQ;gBAChC2B,UAAU;gBACR,mHAAmH;gBACnH,wGAAwG;gBAC1G;YACF;YACAV,aAAa;QACf;IACF;IAEA,IAAIW;IACJ,IAAIjC,QAAQiB,WAAW,EAAE;QACvBgB,iBAAiB1C,KAAK8B,MAAM,CAACvB,MAAMmC,cAAc,EAAE;YACjDT,cAAc;gBACZK,MAAM;gBACNC,MAAM9B,QAAQ8B,IAAI;gBAClBzB;gBACA0B,SAASpB,gBAAgBN;gBACzB,cAAcC,UAAUD;gBACxB2B,UAAU;gBACR,mHAAmH;gBACnH,wGAAwG;gBAC1G;YACF;YAEAV,aAAa;QACf;IACF;IAEA,OAAO;QACLN;QACAY,MAAM5B,QAAQ4B,IAAI;QAClBV;QACAb;QACA6B,YAAY;YACVd,MAAM;YACNM,cAAc;YACdH,gBAAgB;YAChBI,gBAAgB;YAChBM,gBAAgB;QAClB;QACAb;QACAM;QACAH;QACAI;QACAM;IACF;AACF,EAAE"}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { StarFilled, StarRegular } from '@fluentui/react-icons';
|
|
4
3
|
/**
|
|
5
4
|
* RatingContext is provided by Rating, and is consumed by Rating to determine default values of some props.
|
|
6
5
|
*/ export const RatingItemContext = /*#__PURE__*/ React.createContext(undefined);
|
|
7
6
|
const ratingItemContextDefaultValue = {
|
|
8
7
|
color: 'neutral',
|
|
9
|
-
iconFilled:
|
|
10
|
-
iconOutline:
|
|
8
|
+
iconFilled: 'span',
|
|
9
|
+
iconOutline: 'span',
|
|
11
10
|
step: 1,
|
|
12
11
|
size: 'medium'
|
|
13
12
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/RatingItemContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { RatingItemContextValue } from '../RatingItem';\
|
|
1
|
+
{"version":3,"sources":["../src/contexts/RatingItemContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { RatingItemContextValue } from '../RatingItem';\n\n/**\n * RatingContext is provided by Rating, and is consumed by Rating to determine default values of some props.\n */\nexport const RatingItemContext = React.createContext<RatingItemContextValue | undefined>(undefined);\nconst ratingItemContextDefaultValue: RatingItemContextValue = {\n color: 'neutral',\n iconFilled: 'span',\n iconOutline: 'span',\n step: 1,\n size: 'medium',\n};\nexport const RatingItemProvider = RatingItemContext.Provider;\n\n/**\n * Get the value of the RatingContext.\n */\nexport const useRatingItemContextValue_unstable = (): RatingItemContextValue =>\n React.useContext(RatingItemContext) || ratingItemContextDefaultValue;\n"],"names":["React","RatingItemContext","createContext","undefined","ratingItemContextDefaultValue","color","iconFilled","iconOutline","step","size","RatingItemProvider","Provider","useRatingItemContextValue_unstable","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B;;CAEC,GACD,OAAO,MAAMC,kCAAoBD,MAAME,aAAa,CAAqCC,WAAW;AACpG,MAAMC,gCAAwD;IAC5DC,OAAO;IACPC,YAAY;IACZC,aAAa;IACbC,MAAM;IACNC,MAAM;AACR;AACA,OAAO,MAAMC,qBAAqBT,kBAAkBU,QAAQ,CAAC;AAE7D;;CAEC,GACD,OAAO,MAAMC,qCAAqC,IAChDZ,MAAMa,UAAU,CAACZ,sBAAsBG,8BAA8B"}
|
package/lib/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { Rating, ratingClassNames, renderRating_unstable, useRatingStyles_unstable, useRating_unstable, useRatingContextValues } from './Rating';
|
|
2
|
-
export { RatingItem, ratingItemClassNames, renderRatingItem_unstable, useRatingItemStyles_unstable, useRatingItem_unstable } from './RatingItem';
|
|
1
|
+
export { Rating, ratingClassNames, renderRating_unstable, useRatingStyles_unstable, useRating_unstable, useRatingContextValues, useRatingBase_unstable } from './Rating';
|
|
2
|
+
export { RatingItem, ratingItemClassNames, renderRatingItem_unstable, useRatingItemStyles_unstable, useRatingItem_unstable, useRatingItemBase_unstable } from './RatingItem';
|
|
3
3
|
export { RatingItemProvider, useRatingItemContextValue_unstable } from './contexts/index';
|
|
4
|
-
export { RatingDisplay, ratingDisplayClassNames, renderRatingDisplay_unstable, useRatingDisplayStyles_unstable, useRatingDisplay_unstable, useRatingDisplayContextValues } from './RatingDisplay';
|
|
4
|
+
export { RatingDisplay, ratingDisplayClassNames, renderRatingDisplay_unstable, useRatingDisplayStyles_unstable, useRatingDisplay_unstable, useRatingDisplayContextValues, useRatingDisplayBase_unstable } from './RatingDisplay';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Rating,\n ratingClassNames,\n renderRating_unstable,\n useRatingStyles_unstable,\n useRating_unstable,\n useRatingContextValues,\n} from './Rating';\nexport type {
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Rating,\n ratingClassNames,\n renderRating_unstable,\n useRatingStyles_unstable,\n useRating_unstable,\n useRatingContextValues,\n useRatingBase_unstable,\n} from './Rating';\nexport type {\n RatingProps,\n RatingSlots,\n RatingState,\n RatingOnChangeEventData,\n RatingContextValues,\n RatingBaseProps,\n RatingBaseState,\n} from './Rating';\nexport {\n RatingItem,\n ratingItemClassNames,\n renderRatingItem_unstable,\n useRatingItemStyles_unstable,\n useRatingItem_unstable,\n useRatingItemBase_unstable,\n} from './RatingItem';\nexport type {\n RatingItemProps,\n RatingItemSlots,\n RatingItemState,\n RatingItemBaseProps,\n RatingItemBaseState,\n} from './RatingItem';\nexport { RatingItemProvider, useRatingItemContextValue_unstable } from './contexts/index';\nexport {\n RatingDisplay,\n ratingDisplayClassNames,\n renderRatingDisplay_unstable,\n useRatingDisplayStyles_unstable,\n useRatingDisplay_unstable,\n useRatingDisplayContextValues,\n useRatingDisplayBase_unstable,\n} from './RatingDisplay';\nexport type {\n RatingDisplayProps,\n RatingDisplaySlots,\n RatingDisplayState,\n RatingDisplayContextValues,\n RatingDisplayBaseProps,\n RatingDisplayBaseState,\n} from './RatingDisplay';\n"],"names":["Rating","ratingClassNames","renderRating_unstable","useRatingStyles_unstable","useRating_unstable","useRatingContextValues","useRatingBase_unstable","RatingItem","ratingItemClassNames","renderRatingItem_unstable","useRatingItemStyles_unstable","useRatingItem_unstable","useRatingItemBase_unstable","RatingItemProvider","useRatingItemContextValue_unstable","RatingDisplay","ratingDisplayClassNames","renderRatingDisplay_unstable","useRatingDisplayStyles_unstable","useRatingDisplay_unstable","useRatingDisplayContextValues","useRatingDisplayBase_unstable"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,EACtBC,sBAAsB,QACjB,WAAW;AAUlB,SACEC,UAAU,EACVC,oBAAoB,EACpBC,yBAAyB,EACzBC,4BAA4B,EAC5BC,sBAAsB,EACtBC,0BAA0B,QACrB,eAAe;AAQtB,SAASC,kBAAkB,EAAEC,kCAAkC,QAAQ,mBAAmB;AAC1F,SACEC,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,+BAA+B,EAC/BC,yBAAyB,EACzBC,6BAA6B,EAC7BC,6BAA6B,QACxB,kBAAkB"}
|
package/lib-commonjs/Rating.js
CHANGED
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
renderRating_unstable: function() {
|
|
19
19
|
return _index.renderRating_unstable;
|
|
20
20
|
},
|
|
21
|
+
useRatingBase_unstable: function() {
|
|
22
|
+
return _index.useRatingBase_unstable;
|
|
23
|
+
},
|
|
21
24
|
useRatingContextValues: function() {
|
|
22
25
|
return _index.useRatingContextValues;
|
|
23
26
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Rating.ts"],"sourcesContent":["export type {\n RatingContextValues,\n RatingOnChangeEventData,\n RatingProps,\n RatingSlots,\n RatingState,\n} from './components/Rating/index';\nexport {\n Rating,\n ratingClassNames,\n renderRating_unstable,\n useRatingContextValues,\n useRatingStyles_unstable,\n useRating_unstable,\n} from './components/Rating/index';\n"],"names":["Rating","ratingClassNames","renderRating_unstable","useRatingContextValues","useRatingStyles_unstable","useRating_unstable"],"mappings":";;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/Rating.ts"],"sourcesContent":["export type {\n RatingContextValues,\n RatingOnChangeEventData,\n RatingProps,\n RatingBaseProps,\n RatingSlots,\n RatingState,\n RatingBaseState,\n} from './components/Rating/index';\nexport {\n Rating,\n ratingClassNames,\n renderRating_unstable,\n useRatingContextValues,\n useRatingStyles_unstable,\n useRating_unstable,\n useRatingBase_unstable,\n} from './components/Rating/index';\n"],"names":["Rating","ratingClassNames","renderRating_unstable","useRatingContextValues","useRatingStyles_unstable","useRating_unstable","useRatingBase_unstable"],"mappings":";;;;;;;;;;;;eAUEA,aAAM;;;eACNC,uBAAgB;;;eAChBC,4BAAqB;;;eAIrBI,6BAAsB;;;eAHtBH,6BAAsB;;;eACtBC,+BAAwB;;;eACxBC,yBAAkB;;;uBAEb,4BAA4B"}
|
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
renderRatingDisplay_unstable: function() {
|
|
19
19
|
return _index.renderRatingDisplay_unstable;
|
|
20
20
|
},
|
|
21
|
+
useRatingDisplayBase_unstable: function() {
|
|
22
|
+
return _index.useRatingDisplayBase_unstable;
|
|
23
|
+
},
|
|
21
24
|
useRatingDisplayContextValues: function() {
|
|
22
25
|
return _index.useRatingDisplayContextValues;
|
|
23
26
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/RatingDisplay.ts"],"sourcesContent":["export type {\n RatingDisplayContextValues,\n RatingDisplayProps,\n RatingDisplaySlots,\n RatingDisplayState,\n} from './components/RatingDisplay/index';\nexport {\n RatingDisplay,\n ratingDisplayClassNames,\n renderRatingDisplay_unstable,\n useRatingDisplayContextValues,\n useRatingDisplayStyles_unstable,\n useRatingDisplay_unstable,\n} from './components/RatingDisplay/index';\n"],"names":["RatingDisplay","ratingDisplayClassNames","renderRatingDisplay_unstable","useRatingDisplayContextValues","useRatingDisplayStyles_unstable","useRatingDisplay_unstable"],"mappings":";;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/RatingDisplay.ts"],"sourcesContent":["export type {\n RatingDisplayContextValues,\n RatingDisplayProps,\n RatingDisplayBaseProps,\n RatingDisplaySlots,\n RatingDisplayState,\n RatingDisplayBaseState,\n} from './components/RatingDisplay/index';\nexport {\n RatingDisplay,\n ratingDisplayClassNames,\n renderRatingDisplay_unstable,\n useRatingDisplayContextValues,\n useRatingDisplayStyles_unstable,\n useRatingDisplay_unstable,\n useRatingDisplayBase_unstable,\n} from './components/RatingDisplay/index';\n"],"names":["RatingDisplay","ratingDisplayClassNames","renderRatingDisplay_unstable","useRatingDisplayContextValues","useRatingDisplayStyles_unstable","useRatingDisplay_unstable","useRatingDisplayBase_unstable"],"mappings":";;;;;;;;;;;;eASEA,oBAAa;;;eACbC,8BAAuB;;;eACvBC,mCAA4B;;;eAI5BI,oCAA6B;;;eAH7BH,oCAA6B;;;eAC7BC,sCAA+B;;;eAC/BC,gCAAyB;;;uBAEpB,mCAAmC"}
|
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
renderRatingItem_unstable: function() {
|
|
19
19
|
return _index.renderRatingItem_unstable;
|
|
20
20
|
},
|
|
21
|
+
useRatingItemBase_unstable: function() {
|
|
22
|
+
return _index.useRatingItemBase_unstable;
|
|
23
|
+
},
|
|
21
24
|
useRatingItemStyles_unstable: function() {
|
|
22
25
|
return _index.useRatingItemStyles_unstable;
|
|
23
26
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/RatingItem.ts"],"sourcesContent":["export type {\n RatingItemContextValue,\n RatingItemProps,\n RatingItemSlots,\n RatingItemState,\n} from './components/RatingItem/index';\nexport {\n RatingItem,\n ratingItemClassNames,\n renderRatingItem_unstable,\n useRatingItemStyles_unstable,\n useRatingItem_unstable,\n} from './components/RatingItem/index';\n"],"names":["RatingItem","ratingItemClassNames","renderRatingItem_unstable","useRatingItemStyles_unstable","useRatingItem_unstable"],"mappings":";;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/RatingItem.ts"],"sourcesContent":["export type {\n RatingItemContextValue,\n RatingItemProps,\n RatingItemBaseProps,\n RatingItemSlots,\n RatingItemState,\n RatingItemBaseState,\n} from './components/RatingItem/index';\nexport {\n RatingItem,\n ratingItemClassNames,\n renderRatingItem_unstable,\n useRatingItemStyles_unstable,\n useRatingItem_unstable,\n useRatingItemBase_unstable,\n} from './components/RatingItem/index';\n"],"names":["RatingItem","ratingItemClassNames","renderRatingItem_unstable","useRatingItemStyles_unstable","useRatingItem_unstable","useRatingItemBase_unstable"],"mappings":";;;;;;;;;;;;eASEA,iBAAU;;;eACVC,2BAAoB;;;eACpBC,gCAAyB;;;eAGzBG,iCAA0B;;;eAF1BF,mCAA4B;;;eAC5BC,6BAAsB;;;uBAEjB,gCAAgC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Rating/Rating.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport { RatingItemContextValue } from '../RatingItem/RatingItem.types';\n\nexport type RatingSlots = {\n root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Rating Props\n */\nexport type RatingProps = Omit<ComponentProps<Partial<RatingSlots>>, 'onChange'> & {\n /**\n * Controls the color of the Rating.\n * @default neutral\n */\n color?: 'brand' | 'marigold' | 'neutral';\n /**\n * Default value of the Rating\n */\n defaultValue?: number;\n /**\n * The icon to display when the rating value is greater than or equal to the item's value.\n */\n iconFilled?: React.ElementType;\n /**\n * The icon to display when the rating value is less than the item's value.\n */\n iconOutline?: React.ElementType;\n /**\n * Prop to generate the aria-label for the rating inputs.\n * @default (rating) =\\> `${rating}`\n */\n itemLabel?: (rating: number) => string;\n /**\n * The max value of the rating. This controls the number of rating items displayed.\n * Must be a whole number greater than 1.\n * @default 5\n */\n max?: number;\n /**\n * Name for the Radio inputs. If not provided, one will be automatically generated\n */\n name?: string;\n /**\n * Callback when the rating value is changed by the user.\n */\n onChange?: EventHandler<RatingOnChangeEventData>;\n /**\n * Sets the precision to allow half-filled shapes in Rating\n * @default 1\n */\n step?: 0.5 | 1;\n /**\n * Sets the size of the Rating items.\n * @default extra-large\n */\n size?: 'small' | 'medium' | 'large' | 'extra-large';\n /**\n * The value of the rating\n */\n value?: number;\n};\n\n/**\n * Data for the onChange event for Rating.\n */\nexport type RatingOnChangeEventData = EventData<'change', React.FormEvent<HTMLDivElement>> & {\n /**\n * The new value of the rating.\n */\n value: number;\n};\n\n/**\n * State used in rendering Rating\n */\nexport type RatingState = ComponentState<RatingSlots> &\n Required<Pick<RatingProps, 'color' | 'iconFilled' | 'iconOutline' | 'name' | 'step' | 'size' | 'value'>> &\n Pick<RatingProps, 'itemLabel'> & {\n hoveredValue?: number | undefined;\n };\n\nexport type RatingContextValues = {\n ratingItem: RatingItemContextValue;\n};\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/Rating/Rating.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport type { RatingItemContextValue } from '../RatingItem/RatingItem.types';\n\nexport type RatingSlots = {\n root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Rating Props\n */\nexport type RatingProps = Omit<ComponentProps<Partial<RatingSlots>>, 'onChange'> & {\n /**\n * Controls the color of the Rating.\n * @default neutral\n */\n color?: 'brand' | 'marigold' | 'neutral';\n /**\n * Default value of the Rating\n */\n defaultValue?: number;\n /**\n * The icon to display when the rating value is greater than or equal to the item's value.\n */\n iconFilled?: React.ElementType;\n /**\n * The icon to display when the rating value is less than the item's value.\n */\n iconOutline?: React.ElementType;\n /**\n * Prop to generate the aria-label for the rating inputs.\n * @default (rating) =\\> `${rating}`\n */\n itemLabel?: (rating: number) => string;\n /**\n * The max value of the rating. This controls the number of rating items displayed.\n * Must be a whole number greater than 1.\n * @default 5\n */\n max?: number;\n /**\n * Name for the Radio inputs. If not provided, one will be automatically generated\n */\n name?: string;\n /**\n * Callback when the rating value is changed by the user.\n */\n onChange?: EventHandler<RatingOnChangeEventData>;\n /**\n * Sets the precision to allow half-filled shapes in Rating\n * @default 1\n */\n step?: 0.5 | 1;\n /**\n * Sets the size of the Rating items.\n * @default extra-large\n */\n size?: 'small' | 'medium' | 'large' | 'extra-large';\n /**\n * The value of the rating\n */\n value?: number;\n};\n\n/**\n * Data for the onChange event for Rating.\n */\nexport type RatingOnChangeEventData = EventData<'change', React.FormEvent<HTMLDivElement>> & {\n /**\n * The new value of the rating.\n */\n value: number;\n};\n\n/**\n * Rating base props — excludes design props (color, size).\n */\nexport type RatingBaseProps = Omit<RatingProps, 'color' | 'size'>;\n\n/**\n * State used in rendering Rating\n */\nexport type RatingState = ComponentState<RatingSlots> &\n Required<Pick<RatingProps, 'color' | 'iconFilled' | 'iconOutline' | 'name' | 'step' | 'size' | 'value'>> &\n Pick<RatingProps, 'itemLabel'> & {\n hoveredValue?: number | undefined;\n };\n\n/**\n * Rating base state — excludes design props (color, size).\n */\nexport type RatingBaseState = Omit<RatingState, 'color' | 'size'>;\n\nexport type RatingContextValues = {\n ratingItem: RatingItemContextValue;\n};\n"],"names":[],"mappings":""}
|
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
renderRating_unstable: function() {
|
|
19
19
|
return _renderRating.renderRating_unstable;
|
|
20
20
|
},
|
|
21
|
+
useRatingBase_unstable: function() {
|
|
22
|
+
return _useRating.useRatingBase_unstable;
|
|
23
|
+
},
|
|
21
24
|
useRatingContextValues: function() {
|
|
22
25
|
return _useRatingContextValues.useRatingContextValues;
|
|
23
26
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Rating/index.ts"],"sourcesContent":["export { Rating } from './Rating';\nexport type {\n RatingContextValues,\n RatingOnChangeEventData,\n RatingProps,\n RatingSlots,\n RatingState,\n} from './Rating.types';\nexport { renderRating_unstable } from './renderRating';\nexport { useRating_unstable } from './useRating';\nexport { ratingClassNames, useRatingStyles_unstable } from './useRatingStyles.styles';\nexport { useRatingContextValues } from './useRatingContextValues';\n"],"names":["Rating","renderRating_unstable","useRating_unstable","ratingClassNames","useRatingStyles_unstable","useRatingContextValues"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/Rating/index.ts"],"sourcesContent":["export { Rating } from './Rating';\nexport type {\n RatingContextValues,\n RatingOnChangeEventData,\n RatingProps,\n RatingBaseProps,\n RatingSlots,\n RatingState,\n RatingBaseState,\n} from './Rating.types';\nexport { renderRating_unstable } from './renderRating';\nexport { useRating_unstable, useRatingBase_unstable } from './useRating';\nexport { ratingClassNames, useRatingStyles_unstable } from './useRatingStyles.styles';\nexport { useRatingContextValues } from './useRatingContextValues';\n"],"names":["Rating","renderRating_unstable","useRating_unstable","useRatingBase_unstable","ratingClassNames","useRatingStyles_unstable","useRatingContextValues"],"mappings":";;;;;;;;;;;IAASA;6BAAM;;IAYNI;sDAAgB;;;eAFhBH,mCAAqB;;;eACDE,iCAAsB;;;eAE1CG,8CAAsB;;;eADJD,+CAAwB;;;eAD1CH,6BAAkB;;;wBAXJ,WAAW;8BAUI,iBAAiB;2BACI,cAAc;uCACd,2BAA2B;wCAC/C,2BAA2B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Rating/renderRating.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/Rating/renderRating.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { RatingBaseState, RatingSlots, RatingContextValues } from './Rating.types';\nimport { RatingItemProvider } from '../../contexts/RatingItemContext';\n\n/**\n * Render the final JSX of Rating\n */\nexport const renderRating_unstable = (state: RatingBaseState, contextValues: RatingContextValues): JSXElement => {\n assertSlots<RatingSlots>(state);\n\n return (\n <RatingItemProvider value={contextValues.ratingItem}>\n <state.root />\n </RatingItemProvider>\n );\n};\n"],"names":["assertSlots","RatingItemProvider","renderRating_unstable","state","contextValues","value","ratingItem","root"],"mappings":";;;;+BAWaE;;;;;;4BAVb,gDAAiD;gCAErB,4BAA4B;mCAGrB,mCAAmC;AAK/D,8BAA8B,CAACC,OAAwBC;QAC5DJ,2BAAAA,EAAyBG;IAEzB,OAAA,WAAA,OACE,eAAA,EAACF,qCAAAA,EAAAA;QAAmBI,OAAOD,cAAcE,UAAU;kBACjD,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;AAGjB,EAAE"}
|
|
@@ -3,9 +3,17 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
function _export(target, all) {
|
|
7
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: all[name]
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
_export(exports, {
|
|
13
|
+
useRatingBase_unstable: function() {
|
|
14
|
+
return useRatingBase_unstable;
|
|
15
|
+
},
|
|
16
|
+
useRating_unstable: function() {
|
|
9
17
|
return useRating_unstable;
|
|
10
18
|
}
|
|
11
19
|
});
|
|
@@ -15,8 +23,33 @@ const _reactutilities = require("@fluentui/react-utilities");
|
|
|
15
23
|
const _RatingItem = require("../../RatingItem");
|
|
16
24
|
const _reacticons = require("@fluentui/react-icons");
|
|
17
25
|
const useRating_unstable = (props, ref)=>{
|
|
26
|
+
var _state_root;
|
|
27
|
+
const { color = 'neutral', size = 'extra-large', iconFilled = _reacticons.StarFilled, iconOutline = _reacticons.StarRegular, max = 5, ...baseProps } = props;
|
|
28
|
+
const state = useRatingBase_unstable({
|
|
29
|
+
iconFilled,
|
|
30
|
+
iconOutline,
|
|
31
|
+
...baseProps
|
|
32
|
+
}, ref);
|
|
33
|
+
// Generate the child RatingItems and memoize them to prevent unnecessary re-rendering
|
|
34
|
+
const rootChildren = _react.useMemo(()=>{
|
|
35
|
+
return Array.from(Array(max), (_, i)=>/*#__PURE__*/ _react.createElement(_RatingItem.RatingItem, {
|
|
36
|
+
value: i + 1,
|
|
37
|
+
key: i + 1
|
|
38
|
+
}));
|
|
39
|
+
}, [
|
|
40
|
+
max
|
|
41
|
+
]);
|
|
42
|
+
var _children;
|
|
43
|
+
(_children = (_state_root = state.root).children) !== null && _children !== void 0 ? _children : _state_root.children = rootChildren;
|
|
44
|
+
return {
|
|
45
|
+
...state,
|
|
46
|
+
color,
|
|
47
|
+
size
|
|
48
|
+
};
|
|
49
|
+
};
|
|
50
|
+
const useRatingBase_unstable = (props, ref)=>{
|
|
18
51
|
const generatedName = (0, _reactutilities.useId)('rating-');
|
|
19
|
-
const {
|
|
52
|
+
const { iconFilled = 'span', iconOutline = 'span', name = generatedName, onChange, step = 1, itemLabel } = props;
|
|
20
53
|
const [value, setValue] = (0, _reactutilities.useControllableState)({
|
|
21
54
|
state: props.value,
|
|
22
55
|
defaultState: props.defaultValue,
|
|
@@ -26,22 +59,11 @@ const useRating_unstable = (props, ref)=>{
|
|
|
26
59
|
constructorName: 'HTMLInputElement'
|
|
27
60
|
}) && target.type === 'radio' && target.name === name;
|
|
28
61
|
const [hoveredValue, setHoveredValue] = _react.useState(undefined);
|
|
29
|
-
// Generate the child RatingItems and memoize them to prevent unnecessary re-rendering
|
|
30
|
-
const rootChildren = _react.useMemo(()=>{
|
|
31
|
-
return Array.from(Array(max), (_, i)=>/*#__PURE__*/ _react.createElement(_RatingItem.RatingItem, {
|
|
32
|
-
value: i + 1,
|
|
33
|
-
key: i + 1
|
|
34
|
-
}));
|
|
35
|
-
}, [
|
|
36
|
-
max
|
|
37
|
-
]);
|
|
38
62
|
const state = {
|
|
39
|
-
color,
|
|
40
63
|
iconFilled,
|
|
41
64
|
iconOutline,
|
|
42
65
|
name,
|
|
43
66
|
step,
|
|
44
|
-
size,
|
|
45
67
|
itemLabel,
|
|
46
68
|
value,
|
|
47
69
|
hoveredValue,
|
|
@@ -50,7 +72,6 @@ const useRating_unstable = (props, ref)=>{
|
|
|
50
72
|
},
|
|
51
73
|
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
52
74
|
ref,
|
|
53
|
-
children: rootChildren,
|
|
54
75
|
role: 'radiogroup',
|
|
55
76
|
...props
|
|
56
77
|
}, [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Rating/useRating.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n getIntrinsicElementProps,\n isHTMLElement,\n mergeCallbacks,\n slot,\n useControllableState,\n useId,\n} from '@fluentui/react-utilities';\nimport type { RatingProps, RatingState } from './Rating.types';\nimport { RatingItem } from '../../RatingItem';\nimport { StarFilled, StarRegular } from '@fluentui/react-icons';\n\n/**\n * Create the state required to render Rating.\n *\n * The returned state can be modified with hooks such as useRatingStyles_unstable,\n * before being passed to renderRating_unstable.\n *\n * @param props - props from this instance of Rating\n * @param ref - reference to root HTMLElement of Rating\n */\nexport const useRating_unstable = (props: RatingProps, ref: React.Ref<HTMLDivElement>): RatingState => {\n const
|
|
1
|
+
{"version":3,"sources":["../src/components/Rating/useRating.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n getIntrinsicElementProps,\n isHTMLElement,\n mergeCallbacks,\n slot,\n useControllableState,\n useId,\n} from '@fluentui/react-utilities';\nimport type { RatingBaseProps, RatingBaseState, RatingProps, RatingState } from './Rating.types';\nimport { RatingItem } from '../../RatingItem';\nimport { StarFilled, StarRegular } from '@fluentui/react-icons';\n\n/**\n * Create the state required to render Rating.\n *\n * The returned state can be modified with hooks such as useRatingStyles_unstable,\n * before being passed to renderRating_unstable.\n *\n * @param props - props from this instance of Rating\n * @param ref - reference to root HTMLElement of Rating\n */\nexport const useRating_unstable = (props: RatingProps, ref: React.Ref<HTMLDivElement>): RatingState => {\n const {\n color = 'neutral',\n size = 'extra-large',\n iconFilled = StarFilled,\n iconOutline = StarRegular,\n max = 5,\n ...baseProps\n } = props;\n const state = useRatingBase_unstable({ iconFilled, iconOutline, ...baseProps }, ref);\n\n // Generate the child RatingItems and memoize them to prevent unnecessary re-rendering\n const rootChildren = React.useMemo(() => {\n return Array.from(Array(max), (_, i) => <RatingItem value={i + 1} key={i + 1} />);\n }, [max]);\n\n state.root.children ??= rootChildren;\n\n return {\n ...state,\n color,\n size,\n };\n};\n\n/**\n * Base hook for Rating component. Manages state related to controlled/uncontrolled\n * rating value, hover state, radiogroup ARIA role, and keyboard/mouse interaction —\n * without design props (color, size).\n *\n * @param props - props from this instance of Rating (without color, size)\n * @param ref - reference to root HTMLElement of Rating\n */\nexport const useRatingBase_unstable = (props: RatingBaseProps, ref: React.Ref<HTMLDivElement>): RatingBaseState => {\n const generatedName = useId('rating-');\n const { iconFilled = 'span', iconOutline = 'span', name = generatedName, onChange, step = 1, itemLabel } = props;\n\n const [value, setValue] = useControllableState({\n state: props.value,\n defaultState: props.defaultValue,\n initialState: 0,\n });\n\n const isRatingRadioItem = (target: EventTarget): target is HTMLInputElement =>\n isHTMLElement(target, { constructorName: 'HTMLInputElement' }) && target.type === 'radio' && target.name === name;\n\n const [hoveredValue, setHoveredValue] = React.useState<number | undefined>(undefined);\n const state: RatingBaseState = {\n iconFilled,\n iconOutline,\n name,\n step,\n itemLabel,\n value,\n hoveredValue,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps(\n 'div',\n {\n ref,\n role: 'radiogroup',\n ...props,\n },\n ['onChange'],\n ),\n { elementType: 'div' },\n ),\n };\n\n state.root.onChange = ev => {\n if (isRatingRadioItem(ev.target)) {\n const newValue = parseFloat(ev.target.value);\n if (!isNaN(newValue)) {\n setValue(newValue);\n onChange?.(ev, { type: 'change', event: ev, value: newValue });\n }\n }\n };\n state.root.onMouseOver = mergeCallbacks(props.onMouseOver, ev => {\n if (isRatingRadioItem(ev.target)) {\n const newValue = parseFloat(ev.target.value);\n if (!isNaN(newValue)) {\n setHoveredValue(newValue);\n }\n }\n });\n state.root.onMouseLeave = mergeCallbacks(props.onMouseLeave, ev => {\n setHoveredValue(undefined);\n });\n\n return state;\n};\n"],"names":["React","getIntrinsicElementProps","isHTMLElement","mergeCallbacks","slot","useControllableState","useId","RatingItem","StarFilled","StarRegular","useRating_unstable","props","ref","state","color","size","iconFilled","iconOutline","max","baseProps","useRatingBase_unstable","rootChildren","useMemo","Array","from","_","i","value","key","root","children","generatedName","name","onChange","step","itemLabel","setValue","defaultState","defaultValue","initialState","isRatingRadioItem","target","constructorName","type","hoveredValue","setHoveredValue","useState","undefined","components","always","role","elementType","ev","newValue","parseFloat","isNaN","event","onMouseOver","onMouseLeave"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Rating/useRatingContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { RatingContextValues, RatingState } from './Rating.types';\nimport { RatingItemContextValue } from '../RatingItem/RatingItem.types';\n\nexport const useRatingContextValues = (ratingState: RatingState): RatingContextValues => {\n const { color, hoveredValue, iconFilled, iconOutline, itemLabel, name, step, size, value } = ratingState;\n\n const ratingItem = React.useMemo<RatingItemContextValue>(\n () => ({\n color,\n hoveredValue,\n iconFilled,\n iconOutline,\n interactive: true,\n itemLabel,\n name,\n step,\n size,\n value,\n }),\n [color, hoveredValue, iconFilled, iconOutline, itemLabel, name, step, size, value],\n );\n\n return { ratingItem };\n};\n"],"names":["React","useRatingContextValues","ratingState","color","hoveredValue","iconFilled","iconOutline","itemLabel","name","step","size","value","ratingItem","useMemo","interactive"],"mappings":"AAAA;;;;;+BAMaC;;;;;;;iEAJU,QAAQ;AAIxB,+BAA+B,CAACC;IACrC,MAAM,EAAEC,KAAK,EAAEC,YAAY,EAAEC,UAAU,EAAEC,WAAW,EAAEC,SAAS,EAAEC,IAAI,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGT;IAE7F,MAAMU,aAAaZ,OAAMa,OAAO,CAC9B,IAAO,CAAA;YACLV;YACAC;YACAC;YACAC;YACAQ,aAAa;YACbP;YACAC;YACAC;YACAC;YACAC;SACF,CAAA,EACA;QAACR;QAAOC;QAAcC;QAAYC;QAAaC;QAAWC;QAAMC;QAAMC;QAAMC;KAAM;IAGpF,OAAO;QAAEC;IAAW;AACtB,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Rating/useRatingContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { RatingContextValues, RatingState } from './Rating.types';\nimport type { RatingItemContextValue } from '../RatingItem/RatingItem.types';\n\nexport const useRatingContextValues = (ratingState: RatingState): RatingContextValues => {\n const { color, hoveredValue, iconFilled, iconOutline, itemLabel, name, step, size, value } = ratingState;\n\n const ratingItem = React.useMemo<RatingItemContextValue>(\n () => ({\n color,\n hoveredValue,\n iconFilled,\n iconOutline,\n interactive: true,\n itemLabel,\n name,\n step,\n size,\n value,\n }),\n [color, hoveredValue, iconFilled, iconOutline, itemLabel, name, step, size, value],\n );\n\n return { ratingItem };\n};\n"],"names":["React","useRatingContextValues","ratingState","color","hoveredValue","iconFilled","iconOutline","itemLabel","name","step","size","value","ratingItem","useMemo","interactive"],"mappings":"AAAA;;;;;+BAMaC;;;;;;;iEAJU,QAAQ;AAIxB,+BAA+B,CAACC;IACrC,MAAM,EAAEC,KAAK,EAAEC,YAAY,EAAEC,UAAU,EAAEC,WAAW,EAAEC,SAAS,EAAEC,IAAI,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGT;IAE7F,MAAMU,aAAaZ,OAAMa,OAAO,CAC9B,IAAO,CAAA;YACLV;YACAC;YACAC;YACAC;YACAQ,aAAa;YACbP;YACAC;YACAC;YACAC;YACAC;SACF,CAAA,EACA;QAACR;QAAOC;QAAcC;QAAYC;QAAaC;QAAWC;QAAMC;QAAMC;QAAMC;KAAM;IAGpF,OAAO;QAAEC;IAAW;AACtB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RatingDisplay/RatingDisplay.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { RatingItemContextValue } from '../RatingItem/RatingItem.types';\n\nexport type RatingDisplaySlots = {\n root: NonNullable<Slot<'div'>>;\n valueText?: Slot<'span'>;\n countText?: Slot<'span'>;\n};\n\n/**\n * RatingDisplay Props\n */\nexport type RatingDisplayProps = ComponentProps<RatingDisplaySlots> & {\n /**\n * Color of the rating items (stars).\n * @default neutral\n */\n color?: 'brand' | 'marigold' | 'neutral';\n /**\n * Renders a single filled star, with the value written next to it.\n * @default false\n */\n compact?: boolean;\n /**\n * The number of ratings represented by the rating value.\n * This will be formatted with a thousands separator (if applicable) and displayed next to the value.\n */\n count?: number;\n /**\n * The icon used for rating items.\n * @default StarFilled\n */\n icon?: React.ElementType;\n /**\n * The max value of the rating. This controls the number of rating items displayed.\n * Must be a whole number greater than 1.\n * @default 5\n */\n max?: number;\n /**\n * Sets the size of the RatingDisplay items.\n * @default medium\n */\n size?: 'small' | 'medium' | 'large' | 'extra-large';\n /**\n * The value of the rating\n */\n value?: number;\n};\n\n/**\n * State used in rendering RatingDisplay\n */\nexport type RatingDisplayState = ComponentState<RatingDisplaySlots> &\n Required<Pick<RatingDisplayProps, 'color' | 'compact' | 'icon' | 'max' | 'size'>> &\n Pick<RatingDisplayProps, 'value'>;\n\nexport type RatingDisplayContextValues = { ratingItem: RatingItemContextValue };\n"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/components/RatingDisplay/RatingDisplay.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { RatingItemContextValue } from '../RatingItem/RatingItem.types';\n\nexport type RatingDisplaySlots = {\n root: NonNullable<Slot<'div'>>;\n valueText?: Slot<'span'>;\n countText?: Slot<'span'>;\n};\n\n/**\n * RatingDisplay Props\n */\nexport type RatingDisplayProps = ComponentProps<RatingDisplaySlots> & {\n /**\n * Color of the rating items (stars).\n * @default neutral\n */\n color?: 'brand' | 'marigold' | 'neutral';\n /**\n * Renders a single filled star, with the value written next to it.\n * @default false\n */\n compact?: boolean;\n /**\n * The number of ratings represented by the rating value.\n * This will be formatted with a thousands separator (if applicable) and displayed next to the value.\n */\n count?: number;\n /**\n * The icon used for rating items.\n * @default StarFilled\n */\n icon?: React.ElementType;\n /**\n * The max value of the rating. This controls the number of rating items displayed.\n * Must be a whole number greater than 1.\n * @default 5\n */\n max?: number;\n /**\n * Sets the size of the RatingDisplay items.\n * @default medium\n */\n size?: 'small' | 'medium' | 'large' | 'extra-large';\n /**\n * The value of the rating\n */\n value?: number;\n};\n\n/**\n * RatingDisplay base props — excludes design props (color, size).\n */\nexport type RatingDisplayBaseProps = Omit<RatingDisplayProps, 'color' | 'size'>;\n\n/**\n * State used in rendering RatingDisplay\n */\nexport type RatingDisplayState = ComponentState<RatingDisplaySlots> &\n Required<Pick<RatingDisplayProps, 'color' | 'compact' | 'icon' | 'max' | 'size'>> &\n Pick<RatingDisplayProps, 'value'>;\n\n/**\n * RatingDisplay base state — excludes design props (color, size).\n */\nexport type RatingDisplayBaseState = Omit<RatingDisplayState, 'color' | 'size' | 'icon'> &\n Pick<RatingDisplayProps, 'icon'>;\n\nexport type RatingDisplayContextValues = { ratingItem: RatingItemContextValue };\n"],"names":[],"mappings":""}
|
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
renderRatingDisplay_unstable: function() {
|
|
19
19
|
return _renderRatingDisplay.renderRatingDisplay_unstable;
|
|
20
20
|
},
|
|
21
|
+
useRatingDisplayBase_unstable: function() {
|
|
22
|
+
return _useRatingDisplay.useRatingDisplayBase_unstable;
|
|
23
|
+
},
|
|
21
24
|
useRatingDisplayContextValues: function() {
|
|
22
25
|
return _useRatingDisplayContextValues.useRatingDisplayContextValues;
|
|
23
26
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RatingDisplay/index.ts"],"sourcesContent":["export { RatingDisplay } from './RatingDisplay';\nexport type {\n RatingDisplayContextValues,\n RatingDisplayProps,\n RatingDisplaySlots,\n RatingDisplayState,\n} from './RatingDisplay.types';\nexport { renderRatingDisplay_unstable } from './renderRatingDisplay';\nexport { useRatingDisplay_unstable } from './useRatingDisplay';\nexport { ratingDisplayClassNames, useRatingDisplayStyles_unstable } from './useRatingDisplayStyles.styles';\nexport { useRatingDisplayContextValues } from './useRatingDisplayContextValues';\n"],"names":["RatingDisplay","renderRatingDisplay_unstable","useRatingDisplay_unstable","ratingDisplayClassNames","useRatingDisplayStyles_unstable","useRatingDisplayContextValues"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/RatingDisplay/index.ts"],"sourcesContent":["export { RatingDisplay } from './RatingDisplay';\nexport type {\n RatingDisplayContextValues,\n RatingDisplayProps,\n RatingDisplayBaseProps,\n RatingDisplaySlots,\n RatingDisplayState,\n RatingDisplayBaseState,\n} from './RatingDisplay.types';\nexport { renderRatingDisplay_unstable } from './renderRatingDisplay';\nexport { useRatingDisplay_unstable, useRatingDisplayBase_unstable } from './useRatingDisplay';\nexport { ratingDisplayClassNames, useRatingDisplayStyles_unstable } from './useRatingDisplayStyles.styles';\nexport { useRatingDisplayContextValues } from './useRatingDisplayContextValues';\n"],"names":["RatingDisplay","renderRatingDisplay_unstable","useRatingDisplay_unstable","useRatingDisplayBase_unstable","ratingDisplayClassNames","useRatingDisplayStyles_unstable","useRatingDisplayContextValues"],"mappings":";;;;;;;;;;;IAASA;2CAAa;;IAWbI;oEAAuB;;;eAFvBH,iDAA4B;;;eACDE,+CAA6B;;;eAExDG,4DAA6B;;;eADJD,6DAA+B;;;eADxDH,2CAAyB;;;+BAVJ,kBAAkB;qCASH,wBAAwB;kCACI,qBAAqB;8CACrB,kCAAkC;+CAC7D,kCAAkC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RatingDisplay/renderRatingDisplay.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/RatingDisplay/renderRatingDisplay.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { RatingDisplayBaseState, RatingDisplaySlots, RatingDisplayContextValues } from './RatingDisplay.types';\nimport { RatingItemProvider } from '../../contexts/RatingItemContext';\n\n/**\n * Render the final JSX of RatingDisplay\n */\nexport const renderRatingDisplay_unstable = (\n state: RatingDisplayBaseState,\n contextValues: RatingDisplayContextValues,\n): JSXElement => {\n assertSlots<RatingDisplaySlots>(state);\n\n return (\n <RatingItemProvider value={contextValues.ratingItem}>\n <state.root>\n {state.root.children}\n {state.valueText && <state.valueText />}\n {state.countText && <state.countText />}\n </state.root>\n </RatingItemProvider>\n );\n};\n"],"names":["assertSlots","RatingItemProvider","renderRatingDisplay_unstable","state","contextValues","value","ratingItem","root","children","valueText","countText"],"mappings":";;;;+BAWaE;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;mCAGrB,mCAAmC;AAK/D,qCAAqC,CAC1CC,OACAC;QAEAJ,2BAAAA,EAAgCG;IAEhC,OAAA,WAAA,OACE,eAAA,EAACF,qCAAAA,EAAAA;QAAmBI,OAAOD,cAAcE,UAAU;kBACjD,WAAA,OAAA,gBAAA,EAACH,MAAMI,IAAI,EAAA;;gBACRJ,MAAMI,IAAI,CAACC,QAAQ;gBACnBL,MAAMM,SAAS,IAAA,WAAA,OAAI,eAAA,EAACN,MAAMM,SAAS,EAAA,CAAA;gBACnCN,MAAMO,SAAS,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,SAAS,EAAA,CAAA;;;;AAI5C,EAAE"}
|
|
@@ -3,9 +3,17 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
function _export(target, all) {
|
|
7
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: all[name]
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
_export(exports, {
|
|
13
|
+
useRatingDisplayBase_unstable: function() {
|
|
14
|
+
return useRatingDisplayBase_unstable;
|
|
15
|
+
},
|
|
16
|
+
useRatingDisplay_unstable: function() {
|
|
9
17
|
return useRatingDisplay_unstable;
|
|
10
18
|
}
|
|
11
19
|
});
|
|
@@ -15,10 +23,12 @@ const _reactutilities = require("@fluentui/react-utilities");
|
|
|
15
23
|
const _reacticons = require("@fluentui/react-icons");
|
|
16
24
|
const _RatingItem = require("../RatingItem/RatingItem");
|
|
17
25
|
const useRatingDisplay_unstable = (props, ref)=>{
|
|
18
|
-
const { color = 'neutral',
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
26
|
+
const { color = 'neutral', size = 'medium', icon = _reacticons.StarFilled, ...baseProps } = props;
|
|
27
|
+
const state = useRatingDisplayBase_unstable({
|
|
28
|
+
icon,
|
|
29
|
+
...baseProps
|
|
30
|
+
}, ref);
|
|
31
|
+
const { compact, max } = state;
|
|
22
32
|
const rootChildren = _react.useMemo(()=>{
|
|
23
33
|
return compact ? /*#__PURE__*/ _react.createElement(_RatingItem.RatingItem, {
|
|
24
34
|
value: 1,
|
|
@@ -33,12 +43,25 @@ const useRatingDisplay_unstable = (props, ref)=>{
|
|
|
33
43
|
compact,
|
|
34
44
|
max
|
|
35
45
|
]);
|
|
36
|
-
|
|
46
|
+
return {
|
|
47
|
+
...state,
|
|
48
|
+
root: {
|
|
49
|
+
children: rootChildren,
|
|
50
|
+
...state.root
|
|
51
|
+
},
|
|
52
|
+
icon,
|
|
37
53
|
color,
|
|
54
|
+
size
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
const useRatingDisplayBase_unstable = (props, ref)=>{
|
|
58
|
+
const { count, compact = false, icon, max = 5, value } = props;
|
|
59
|
+
const valueTextId = (0, _reactutilities.useId)('rating-value-');
|
|
60
|
+
const countTextId = (0, _reactutilities.useId)('rating-count-');
|
|
61
|
+
const state = {
|
|
38
62
|
compact,
|
|
39
63
|
icon,
|
|
40
64
|
max,
|
|
41
|
-
size,
|
|
42
65
|
value,
|
|
43
66
|
components: {
|
|
44
67
|
root: 'div',
|
|
@@ -47,7 +70,6 @@ const useRatingDisplay_unstable = (props, ref)=>{
|
|
|
47
70
|
},
|
|
48
71
|
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
|
|
49
72
|
ref,
|
|
50
|
-
children: rootChildren,
|
|
51
73
|
role: 'img',
|
|
52
74
|
...props
|
|
53
75
|
}), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RatingDisplay/useRatingDisplay.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId } from '@fluentui/react-utilities';\nimport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/RatingDisplay/useRatingDisplay.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId } from '@fluentui/react-utilities';\nimport type {\n RatingDisplayBaseProps,\n RatingDisplayBaseState,\n RatingDisplayProps,\n RatingDisplayState,\n} from './RatingDisplay.types';\nimport { StarFilled } from '@fluentui/react-icons';\nimport { RatingItem } from '../RatingItem/RatingItem';\n\n/**\n * Create the state required to render RatingDisplay.\n *\n * The returned state can be modified with hooks such as useRatingDisplayStyles_unstable,\n * before being passed to renderRatingDisplay_unstable.\n *\n * @param props - props from this instance of RatingDisplay\n * @param ref - reference to root HTMLDivElement of RatingDisplay\n */\nexport const useRatingDisplay_unstable = (\n props: RatingDisplayProps,\n ref: React.Ref<HTMLDivElement>,\n): RatingDisplayState => {\n const { color = 'neutral', size = 'medium', icon = StarFilled, ...baseProps } = props;\n const state = useRatingDisplayBase_unstable({ icon, ...baseProps }, ref);\n\n const { compact, max } = state;\n\n const rootChildren = React.useMemo(() => {\n return compact ? (\n <RatingItem value={1} key={1} aria-hidden={true} />\n ) : (\n Array.from(Array(max), (_, i) => <RatingItem value={i + 1} key={i + 1} aria-hidden={true} />)\n );\n }, [compact, max]);\n\n return {\n ...state,\n root: {\n children: rootChildren,\n ...state.root,\n },\n icon,\n color,\n size,\n };\n};\n\n/**\n * Base hook for RatingDisplay component. Manages state related to ARIA img role,\n * aria-labelledby composition from valueText/countText IDs, slot structure, and\n * compact/full display modes — without design props (color, size).\n *\n * @param props - props from this instance of RatingDisplay (without color, size)\n * @param ref - reference to root HTMLDivElement of RatingDisplay\n */\nexport const useRatingDisplayBase_unstable = (\n props: RatingDisplayBaseProps,\n ref: React.Ref<HTMLDivElement>,\n): RatingDisplayBaseState => {\n const { count, compact = false, icon, max = 5, value } = props;\n\n const valueTextId = useId('rating-value-');\n const countTextId = useId('rating-count-');\n\n const state: RatingDisplayBaseState = {\n compact,\n icon,\n max,\n value,\n components: {\n root: 'div',\n valueText: 'span',\n countText: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'img',\n ...props,\n }),\n { elementType: 'div' },\n ),\n valueText: slot.optional(props.valueText, {\n renderByDefault: value !== undefined,\n defaultProps: { children: value, id: valueTextId, 'aria-hidden': true },\n elementType: 'span',\n }),\n countText: slot.optional(props.countText, {\n renderByDefault: count !== undefined,\n defaultProps: { children: count?.toLocaleString(), id: countTextId, 'aria-hidden': true },\n elementType: 'span',\n }),\n };\n if (!state.root['aria-label'] && !state.root['aria-labelledby']) {\n state.root['aria-labelledby'] = [state.valueText?.id, state.countText?.id].filter(Boolean).join(' ');\n }\n return state;\n};\n"],"names":["React","getIntrinsicElementProps","slot","useId","StarFilled","RatingItem","useRatingDisplay_unstable","props","ref","color","size","icon","baseProps","state","useRatingDisplayBase_unstable","compact","max","rootChildren","useMemo","value","key","aria-hidden","Array","from","_","i","root","children","count","valueTextId","countTextId","components","valueText","countText","always","role","elementType","optional","renderByDefault","undefined","defaultProps","id","toLocaleString","filter","Boolean","join"],"mappings":"AAAA;;;;;;;;;;;;iCA2Dac;eAAAA;;IArCAR,yBAAAA;;;;;iEApBU,QAAQ;gCACuB,4BAA4B;4BAOvD,wBAAwB;4BACxB,2BAA2B;AAW/C,kCAAkC,CACvCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,SAAS,EAAEC,OAAO,QAAQ,EAAEC,OAAOP,sBAAU,EAAE,GAAGQ,WAAW,GAAGL;IAChF,MAAMM,QAAQC,8BAA8B;QAAEH;QAAM,GAAGC,SAAS;IAAC,GAAGJ;IAEpE,MAAM,EAAEO,OAAO,EAAEC,GAAG,EAAE,GAAGH;IAEzB,MAAMI,eAAejB,OAAMkB,OAAO,CAAC;QACjC,OAAOH,UAAAA,WAAAA,GACL,OAAA,aAAA,CAACV,sBAAAA,EAAAA;YAAWc,OAAO;YAAGC,KAAK;YAAGC,eAAa;aAE3CC,MAAMC,IAAI,CAACD,MAAMN,MAAM,CAACQ,GAAGC,IAAAA,WAAAA,GAAM,OAAA,aAAA,CAACpB,sBAAAA,EAAAA;gBAAWc,OAAOM,IAAI;gBAAGL,KAAKK,IAAI;gBAAGJ,eAAa;;IAExF,GAAG;QAACN;QAASC;KAAI;IAEjB,OAAO;QACL,GAAGH,KAAK;QACRa,MAAM;YACJC,UAAUV;YACV,GAAGJ,MAAMa,IAAI;QACf;QACAf;QACAF;QACAC;IACF;AACF,EAAE;AAUK,sCAAsC,CAC3CH,OACAC;IAEA,MAAM,EAAEoB,KAAK,EAAEb,UAAU,KAAK,EAAEJ,IAAI,EAAEK,MAAM,CAAC,EAAEG,KAAK,EAAE,GAAGZ;IAEzD,MAAMsB,kBAAc1B,qBAAAA,EAAM;IAC1B,MAAM2B,kBAAc3B,qBAAAA,EAAM;IAE1B,MAAMU,QAAgC;QACpCE;QACAJ;QACAK;QACAG;QACAY,YAAY;YACVL,MAAM;YACNM,WAAW;YACXC,WAAW;QACb;QACAP,MAAMxB,oBAAAA,CAAKgC,MAAM,CACfjC,4CAAAA,EAAyB,OAAO;YAC9BO;YACA2B,MAAM;YACN,GAAG5B,KAAK;QACV,IACA;YAAE6B,aAAa;QAAM;QAEvBJ,WAAW9B,oBAAAA,CAAKmC,QAAQ,CAAC9B,MAAMyB,SAAS,EAAE;YACxCM,iBAAiBnB,UAAUoB;YAC3BC,cAAc;gBAAEb,UAAUR;gBAAOsB,IAAIZ;gBAAa,eAAe;YAAK;YACtEO,aAAa;QACf;QACAH,WAAW/B,oBAAAA,CAAKmC,QAAQ,CAAC9B,MAAM0B,SAAS,EAAE;YACxCK,iBAAiBV,UAAUW;YAC3BC,cAAc;gBAAEb,QAAQ,EAAEC,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOc,cAAc;gBAAID,IAAIX;gBAAa,eAAe;YAAK;YACxFM,aAAa;QACf;IACF;IACA,IAAI,CAACvB,MAAMa,IAAI,CAAC,aAAa,IAAI,CAACb,MAAMa,IAAI,CAAC,kBAAkB,EAAE;YAC9Bb,kBAAqBA;QAAtDA,MAAMa,IAAI,CAAC,kBAAkB,GAAG;aAACb,mBAAAA,MAAMmB,SAAAA,AAAS,MAAA,QAAfnB,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAiB4B,EAAE;aAAE5B,mBAAAA,MAAMoB,SAAAA,AAAS,MAAA,QAAfpB,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAiB4B,EAAE;SAAC,CAACE,MAAM,CAACC,SAASC,IAAI,CAAC;IAClG;IACA,OAAOhC;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RatingDisplay/useRatingDisplayContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { RatingDisplayContextValues, RatingDisplayState } from './RatingDisplay.types';\nimport { RatingItemContextValue } from '../RatingItem/RatingItem.types';\n\nexport const useRatingDisplayContextValues = (state: RatingDisplayState): RatingDisplayContextValues => {\n const { color, compact, icon, size, value } = state;\n\n const ratingItem = React.useMemo<RatingItemContextValue>(\n () => ({\n color,\n compact,\n iconFilled: icon,\n iconOutline: icon,\n interactive: false,\n step: 0.5,\n size,\n value,\n }),\n [color, compact, icon, size, value],\n );\n\n return { ratingItem };\n};\n"],"names":["React","useRatingDisplayContextValues","state","color","compact","icon","size","value","ratingItem","useMemo","iconFilled","iconOutline","interactive","step"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAIxB,MAAMC,gCAAgC,CAACC;IAC5C,MAAM,EAAEC,KAAK,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGL;IAE9C,MAAMM,aAAaR,OAAMS,OAAO,CAC9B,IAAO,CAAA;YACLN;YACAC;YACAM,YAAYL;YACZM,aAAaN;YACbO,aAAa;YACbC,MAAM;YACNP;YACAC;SACF,CAAA,EACA;QAACJ;QAAOC;QAASC;QAAMC;QAAMC;KAAM;IAGrC,OAAO;QAAEC;IAAW;AACtB,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/RatingDisplay/useRatingDisplayContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { RatingDisplayContextValues, RatingDisplayState } from './RatingDisplay.types';\nimport type { RatingItemContextValue } from '../RatingItem/RatingItem.types';\n\nexport const useRatingDisplayContextValues = (state: RatingDisplayState): RatingDisplayContextValues => {\n const { color, compact, icon, size, value } = state;\n\n const ratingItem = React.useMemo<RatingItemContextValue>(\n () => ({\n color,\n compact,\n iconFilled: icon,\n iconOutline: icon,\n interactive: false,\n step: 0.5,\n size,\n value,\n }),\n [color, compact, icon, size, value],\n );\n\n return { ratingItem };\n};\n"],"names":["React","useRatingDisplayContextValues","state","color","compact","icon","size","value","ratingItem","useMemo","iconFilled","iconOutline","interactive","step"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAIxB,MAAMC,gCAAgC,CAACC;IAC5C,MAAM,EAAEC,KAAK,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGL;IAE9C,MAAMM,aAAaR,OAAMS,OAAO,CAC9B,IAAO,CAAA;YACLN;YACAC;YACAM,YAAYL;YACZM,aAAaN;YACbO,aAAa;YACbC,MAAM;YACNP;YACAC;SACF,CAAA,EACA;QAACJ;QAAOC;QAASC;QAAMC;QAAMC;KAAM;IAGrC,OAAO;QAAEC;IAAW;AACtB,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RatingItem/RatingItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { RatingState } from '../Rating/Rating.types';\nimport { RatingDisplayState } from '../RatingDisplay/RatingDisplay.types';\n\nexport type RatingItemSlots = {\n /**\n * The root slot of the RatingItem.\n * Default html element is span\n */\n root: NonNullable<Slot<'span'>>;\n /**\n * Icon displayed when the rating value is greater than or equal to the item's value.\n */\n selectedIcon?: NonNullable<Slot<'div'>>;\n /**\n * Icon displayed when the rating value is less than the item's value.\n */\n unselectedIcon?: NonNullable<Slot<'div'>>;\n /**\n * Radio input slot used for half star precision\n */\n halfValueInput?: NonNullable<Slot<'input'>>;\n /**\n * Radio input slot used for full star precision\n */\n fullValueInput?: NonNullable<Slot<'input'>>;\n};\n\n/**\n * RatingItem Props\n */\nexport type RatingItemProps = ComponentProps<Partial<RatingItemSlots>> & {\n /**\n * The positive whole number value that is displayed by this RatingItem\n */\n value?: number;\n};\n\n/**\n * State used in rendering RatingItem\n */\nexport type RatingItemState = ComponentState<RatingItemSlots> &\n Required<Pick<RatingItemProps, 'value'>> &\n Pick<RatingState, 'color' | 'step' | 'size'> & {\n iconFillWidth: number;\n appearance: 'outline' | 'filled';\n };\n\nexport type RatingItemContextValue = Partial<Pick<RatingState, 'name' | 'hoveredValue' | 'value'>> &\n Pick<RatingState, 'color' | 'iconFilled' | 'iconOutline' | 'itemLabel' | 'step' | 'size'> &\n Partial<Pick<RatingDisplayState, 'compact'>> & {\n interactive?: boolean;\n };\n"],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"sources":["../src/components/RatingItem/RatingItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { RatingState } from '../Rating/Rating.types';\nimport type { RatingDisplayState } from '../RatingDisplay/RatingDisplay.types';\n\nexport type RatingItemSlots = {\n /**\n * The root slot of the RatingItem.\n * Default html element is span\n */\n root: NonNullable<Slot<'span'>>;\n /**\n * Icon displayed when the rating value is greater than or equal to the item's value.\n */\n selectedIcon?: NonNullable<Slot<'div'>>;\n /**\n * Icon displayed when the rating value is less than the item's value.\n */\n unselectedIcon?: NonNullable<Slot<'div'>>;\n /**\n * Radio input slot used for half star precision\n */\n halfValueInput?: NonNullable<Slot<'input'>>;\n /**\n * Radio input slot used for full star precision\n */\n fullValueInput?: NonNullable<Slot<'input'>>;\n};\n\n/**\n * RatingItem Props\n */\nexport type RatingItemProps = ComponentProps<Partial<RatingItemSlots>> & {\n /**\n * The positive whole number value that is displayed by this RatingItem\n */\n value?: number;\n};\n\n/**\n * RatingItem base props — same as RatingItemProps (no design-only props at this level).\n */\nexport type RatingItemBaseProps = RatingItemProps;\n\n/**\n * State used in rendering RatingItem\n */\nexport type RatingItemState = ComponentState<RatingItemSlots> &\n Required<Pick<RatingItemProps, 'value'>> &\n Pick<RatingState, 'color' | 'step' | 'size'> & {\n iconFillWidth: number;\n appearance: 'outline' | 'filled';\n };\n\n/**\n * RatingItem base state — excludes design props (color, size) from context.\n */\nexport type RatingItemBaseState = Omit<RatingItemState, 'color' | 'size'>;\n\nexport type RatingItemContextValue = Partial<Pick<RatingState, 'name' | 'hoveredValue' | 'value'>> &\n Pick<RatingState, 'color' | 'iconFilled' | 'iconOutline' | 'itemLabel' | 'step' | 'size'> &\n Partial<Pick<RatingDisplayState, 'compact'>> & {\n interactive?: boolean;\n };\n"],"names":[],"mappings":""}
|
|
@@ -18,6 +18,9 @@ _export(exports, {
|
|
|
18
18
|
renderRatingItem_unstable: function() {
|
|
19
19
|
return _renderRatingItem.renderRatingItem_unstable;
|
|
20
20
|
},
|
|
21
|
+
useRatingItemBase_unstable: function() {
|
|
22
|
+
return _useRatingItem.useRatingItemBase_unstable;
|
|
23
|
+
},
|
|
21
24
|
useRatingItemStyles_unstable: function() {
|
|
22
25
|
return _useRatingItemStylesstyles.useRatingItemStyles_unstable;
|
|
23
26
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RatingItem/index.ts"],"sourcesContent":["export { RatingItem } from './RatingItem';\nexport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/RatingItem/index.ts"],"sourcesContent":["export { RatingItem } from './RatingItem';\nexport type {\n RatingItemContextValue,\n RatingItemProps,\n RatingItemBaseProps,\n RatingItemSlots,\n RatingItemState,\n RatingItemBaseState,\n} from './RatingItem.types';\nexport { renderRatingItem_unstable } from './renderRatingItem';\nexport { useRatingItem_unstable, useRatingItemBase_unstable } from './useRatingItem';\nexport { ratingItemClassNames, useRatingItemStyles_unstable } from './useRatingItemStyles.styles';\n"],"names":["RatingItem","renderRatingItem_unstable","useRatingItem_unstable","useRatingItemBase_unstable","ratingItemClassNames","useRatingItemStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,sBAAU;;;eAWVI,+CAAoB;;;eAFpBH,2CAAyB;;;eACDE,yCAA0B;;;eAC5BE,uDAA4B;;;eADlDH,qCAAsB;;;4BAVJ,eAAe;kCASA,qBAAqB;+BACI,kBAAkB;2CAClB,+BAA+B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/RatingItem/renderRatingItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type {
|
|
1
|
+
{"version":3,"sources":["../src/components/RatingItem/renderRatingItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { RatingItemBaseState, RatingItemSlots } from './RatingItem.types';\n\n/**\n * Render the final JSX of RatingItem\n */\nexport const renderRatingItem_unstable = (state: RatingItemBaseState): JSXElement => {\n assertSlots<RatingItemSlots>(state);\n\n return (\n <state.root>\n {state.halfValueInput && <state.halfValueInput />}\n {state.fullValueInput && <state.fullValueInput />}\n {state.unselectedIcon && <state.unselectedIcon />}\n {state.selectedIcon && <state.selectedIcon />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderRatingItem_unstable","state","root","halfValueInput","fullValueInput","unselectedIcon","selectedIcon"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,kCAAkC,CAACC;QACxCF,2BAAAA,EAA6BE;IAE7B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,cAAc,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,cAAc,EAAA,CAAA;YAC7CF,MAAMG,cAAc,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,cAAc,EAAA,CAAA;YAC7CH,MAAMI,cAAc,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,cAAc,EAAA,CAAA;YAC7CJ,MAAMK,YAAY,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,YAAY,EAAA,CAAA;;;AAGhD,EAAE"}
|