Initial commit

This commit is contained in:
2025-03-07 19:22:02 +01:00
commit 4a98255d83
55743 changed files with 5280367 additions and 0 deletions
+14
View File
@@ -0,0 +1,14 @@
import * as React from 'react';
import { useRating_unstable } from './useRating';
import { renderRating_unstable } from './renderRating';
import { useRatingStyles_unstable } from './useRatingStyles.styles';
import { useRatingContextValues } from './useRatingContextValues';
/**
* Rating is a wrapper for one or more rating items that will be used to set a rating value.
*/ export const Rating = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useRating_unstable(props, ref);
const contextValues = useRatingContextValues(state);
useRatingStyles_unstable(state);
return renderRating_unstable(state, contextValues);
});
Rating.displayName = 'Rating';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Rating/Rating.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useRating_unstable } from './useRating';\nimport { renderRating_unstable } from './renderRating';\nimport { useRatingStyles_unstable } from './useRatingStyles.styles';\nimport type { RatingProps } from './Rating.types';\nimport { useRatingContextValues } from './useRatingContextValues';\n\n/**\n * Rating is a wrapper for one or more rating items that will be used to set a rating value.\n */\nexport const Rating: ForwardRefComponent<RatingProps> = React.forwardRef((props, ref) => {\n const state = useRating_unstable(props, ref);\n const contextValues = useRatingContextValues(state);\n\n useRatingStyles_unstable(state);\n return renderRating_unstable(state, contextValues);\n});\n\nRating.displayName = 'Rating';\n"],"names":["React","useRating_unstable","renderRating_unstable","useRatingStyles_unstable","useRatingContextValues","Rating","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,2BAA2B;AAEpE,SAASC,sBAAsB,QAAQ,2BAA2B;AAElE;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQR,mBAAmBM,OAAOC;IACxC,MAAME,gBAAgBN,uBAAuBK;IAE7CN,yBAAyBM;IACzB,OAAOP,sBAAsBO,OAAOC;AACtC,GAAG;AAEHL,OAAOM,WAAW,GAAG"}
@@ -0,0 +1 @@
import * as React from 'react';
@@ -0,0 +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":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+5
View File
@@ -0,0 +1,5 @@
export { Rating } from './Rating';
export { renderRating_unstable } from './renderRating';
export { useRating_unstable } from './useRating';
export { ratingClassNames, useRatingStyles_unstable } from './useRatingStyles.styles';
export { useRatingContextValues } from './useRatingContextValues';
@@ -0,0 +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"],"rangeMappings":";;;;","mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAQlC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,2BAA2B;AACtF,SAASC,sBAAsB,QAAQ,2BAA2B"}
@@ -0,0 +1,12 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
import { RatingItemProvider } from '../../contexts/RatingItemContext';
/**
* Render the final JSX of Rating
*/ export const renderRating_unstable = (state, contextValues)=>{
assertSlots(state);
return /*#__PURE__*/ _jsx(RatingItemProvider, {
value: contextValues.ratingItem,
children: /*#__PURE__*/ _jsx(state.root, {})
});
};
@@ -0,0 +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 { RatingState, 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: RatingState, contextValues: RatingContextValues) => {\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"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAoBC;IACxDJ,YAAyBG;IAEzB,qBACE,KAACF;QAAmBI,OAAOD,cAAcE,UAAU;kBACjD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
+83
View File
@@ -0,0 +1,83 @@
import * as React from 'react';
import { getIntrinsicElementProps, isHTMLElement, mergeCallbacks, slot, useControllableState, useId } from '@fluentui/react-utilities';
import { RatingItem } from '../../RatingItem';
import { StarFilled, StarRegular } from '@fluentui/react-icons';
/**
* Create the state required to render Rating.
*
* The returned state can be modified with hooks such as useRatingStyles_unstable,
* before being passed to renderRating_unstable.
*
* @param props - props from this instance of Rating
* @param ref - reference to root HTMLElement of Rating
*/ export const useRating_unstable = (props, ref)=>{
const generatedName = useId('rating-');
const { color = 'neutral', iconFilled = StarFilled, iconOutline = StarRegular, max = 5, name = generatedName, onChange, step = 1, size = 'extra-large', itemLabel } = props;
const [value, setValue] = useControllableState({
state: props.value,
defaultState: props.defaultValue,
initialState: 0
});
const isRatingRadioItem = (target)=>isHTMLElement(target, {
constructorName: 'HTMLInputElement'
}) && target.type === 'radio' && target.name === name;
const [hoveredValue, setHoveredValue] = React.useState(undefined);
// Generate the child RatingItems and memoize them to prevent unnecessary re-rendering
const rootChildren = React.useMemo(()=>{
return Array.from(Array(max), (_, i)=>/*#__PURE__*/ React.createElement(RatingItem, {
value: i + 1,
key: i + 1
}));
}, [
max
]);
const state = {
color,
iconFilled,
iconOutline,
name,
step,
size,
itemLabel,
value,
hoveredValue,
components: {
root: 'div'
},
root: slot.always(getIntrinsicElementProps('div', {
ref,
children: rootChildren,
role: 'radiogroup',
...props
}, [
'onChange'
]), {
elementType: 'div'
})
};
state.root.onChange = (ev)=>{
if (isRatingRadioItem(ev.target)) {
const newValue = parseFloat(ev.target.value);
if (!isNaN(newValue)) {
setValue(newValue);
onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
type: 'change',
event: ev,
value: newValue
});
}
}
};
state.root.onMouseOver = mergeCallbacks(props.onMouseOver, (ev)=>{
if (isRatingRadioItem(ev.target)) {
const newValue = parseFloat(ev.target.value);
if (!isNaN(newValue)) {
setHoveredValue(newValue);
}
}
});
state.root.onMouseLeave = mergeCallbacks(props.onMouseLeave, (ev)=>{
setHoveredValue(undefined);
});
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,29 @@
import * as React from 'react';
export const useRatingContextValues = (ratingState)=>{
const { color, hoveredValue, iconFilled, iconOutline, itemLabel, name, step, size, value } = ratingState;
const ratingItem = React.useMemo(()=>({
color,
hoveredValue,
iconFilled,
iconOutline,
interactive: true,
itemLabel,
name,
step,
size,
value
}), [
color,
hoveredValue,
iconFilled,
iconOutline,
itemLabel,
name,
step,
size,
value
]);
return {
ratingItem
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Rating/useRatingContextValues.ts"],"sourcesContent":["import * 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,MAAMC,yBAAyB,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,MAAMa,OAAO,CAC9B,IAAO,CAAA;YACLV;YACAC;YACAC;YACAC;YACAQ,aAAa;YACbP;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACR;QAAOC;QAAcC;QAAYC;QAAaC;QAAWC;QAAMC;QAAMC;QAAMC;KAAM;IAGpF,OAAO;QAAEC;IAAW;AACtB,EAAE"}
@@ -0,0 +1,18 @@
import { __resetStyles, mergeClasses } from '@griffel/react';
export const ratingClassNames = {
root: 'fui-Rating'
};
/**
* Styles for the root slot
*/
const useRootClassName = /*#__PURE__*/__resetStyles("r2imjyh", null, [".r2imjyh{display:flex;flex-wrap:wrap;}"]);
/**
* Apply styling to the Rating slots based on the state
*/
export const useRatingStyles_unstable = state => {
'use no memo';
const rootClassName = useRootClassName();
state.root.className = mergeClasses(ratingClassNames.root, rootClassName, state.root.className);
return state;
};
@@ -0,0 +1 @@
{"version":3,"names":["__resetStyles","mergeClasses","ratingClassNames","root","useRootClassName","useRatingStyles_unstable","state","rootClassName","className"],"sources":["useRatingStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nexport const ratingClassNames = {\n root: 'fui-Rating'\n};\n/**\n * Styles for the root slot\n */ const useRootClassName = makeResetStyles({\n display: 'flex',\n flexWrap: 'wrap'\n});\n/**\n * Apply styling to the Rating slots based on the state\n */ export const useRatingStyles_unstable = (state)=>{\n 'use no memo';\n const rootClassName = useRootClassName();\n state.root.className = mergeClasses(ratingClassNames.root, rootClassName, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,OAAO,MAAMC,gBAAgB,GAAG;EAC5BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,gBAAgB,gBAAGJ,aAAA,4DAG5B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,wBAAwB,GAAIC,KAAK,IAAG;EACjD,aAAa;;EACb,MAAMC,aAAa,GAAGH,gBAAgB,CAAC,CAAC;EACxCE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGP,YAAY,CAACC,gBAAgB,CAACC,IAAI,EAAEI,aAAa,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC/F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
@@ -0,0 +1,15 @@
import * as React from 'react';
import { useRatingDisplay_unstable } from './useRatingDisplay';
import { renderRatingDisplay_unstable } from './renderRatingDisplay';
import { useRatingDisplayStyles_unstable } from './useRatingDisplayStyles.styles';
import { useRatingDisplayContextValues } from './useRatingDisplayContextValues';
/**
* RatingDisplay is a wrapper for one or more rating items that will be used to display a rating value
* as well as the label for the rating.
*/ export const RatingDisplay = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useRatingDisplay_unstable(props, ref);
const contextValues = useRatingDisplayContextValues(state);
useRatingDisplayStyles_unstable(state);
return renderRatingDisplay_unstable(state, contextValues);
});
RatingDisplay.displayName = 'RatingDisplay';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/RatingDisplay/RatingDisplay.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useRatingDisplay_unstable } from './useRatingDisplay';\nimport { renderRatingDisplay_unstable } from './renderRatingDisplay';\nimport { useRatingDisplayStyles_unstable } from './useRatingDisplayStyles.styles';\nimport type { RatingDisplayProps } from './RatingDisplay.types';\nimport { useRatingDisplayContextValues } from './useRatingDisplayContextValues';\n\n/**\n * RatingDisplay is a wrapper for one or more rating items that will be used to display a rating value\n * as well as the label for the rating.\n */\nexport const RatingDisplay: ForwardRefComponent<RatingDisplayProps> = React.forwardRef((props, ref) => {\n const state = useRatingDisplay_unstable(props, ref);\n const contextValues = useRatingDisplayContextValues(state);\n\n useRatingDisplayStyles_unstable(state);\n return renderRatingDisplay_unstable(state, contextValues);\n});\n\nRatingDisplay.displayName = 'RatingDisplay';\n"],"names":["React","useRatingDisplay_unstable","renderRatingDisplay_unstable","useRatingDisplayStyles_unstable","useRatingDisplayContextValues","RatingDisplay","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAElF,SAASC,6BAA6B,QAAQ,kCAAkC;AAEhF;;;CAGC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAC/C,MAAME,gBAAgBN,8BAA8BK;IAEpDN,gCAAgCM;IAChC,OAAOP,6BAA6BO,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}
@@ -0,0 +1 @@
import * as React from 'react';
@@ -0,0 +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":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
@@ -0,0 +1,5 @@
export { RatingDisplay } from './RatingDisplay';
export { renderRatingDisplay_unstable } from './renderRatingDisplay';
export { useRatingDisplay_unstable } from './useRatingDisplay';
export { ratingDisplayClassNames, useRatingDisplayStyles_unstable } from './useRatingDisplayStyles.styles';
export { useRatingDisplayContextValues } from './useRatingDisplayContextValues';
@@ -0,0 +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"],"rangeMappings":";;;;","mappings":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAOhD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,kCAAkC;AAC3G,SAASC,6BAA6B,QAAQ,kCAAkC"}
@@ -0,0 +1,18 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
import { RatingItemProvider } from '../../contexts/RatingItemContext';
/**
* Render the final JSX of RatingDisplay
*/ export const renderRatingDisplay_unstable = (state, contextValues)=>{
assertSlots(state);
return /*#__PURE__*/ _jsx(RatingItemProvider, {
value: contextValues.ratingItem,
children: /*#__PURE__*/ _jsxs(state.root, {
children: [
state.root.children,
state.valueText && /*#__PURE__*/ _jsx(state.valueText, {}),
state.countText && /*#__PURE__*/ _jsx(state.countText, {})
]
})
});
};
@@ -0,0 +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 { RatingDisplayState, RatingDisplaySlots, RatingDisplayContextValues } from './RatingDisplay.types';\nimport { RatingItemProvider } from '../../contexts/RatingItemContext';\n\n/**\n * Render the final JSX of RatingDisplay\n */\nexport const renderRatingDisplay_unstable = (state: RatingDisplayState, contextValues: RatingDisplayContextValues) => {\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"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC;IACtEJ,YAAgCG;IAEhC,qBACE,KAACF;QAAmBI,OAAOD,cAAcE,UAAU;kBACjD,cAAA,MAACH,MAAMI,IAAI;;gBACRJ,MAAMI,IAAI,CAACC,QAAQ;gBACnBL,MAAMM,SAAS,kBAAI,KAACN,MAAMM,SAAS;gBACnCN,MAAMO,SAAS,kBAAI,KAACP,MAAMO,SAAS;;;;AAI5C,EAAE"}
@@ -0,0 +1,79 @@
import * as React from 'react';
import { getIntrinsicElementProps, slot, useId } from '@fluentui/react-utilities';
import { StarFilled } from '@fluentui/react-icons';
import { RatingItem } from '../RatingItem/RatingItem';
/**
* Create the state required to render RatingDisplay.
*
* The returned state can be modified with hooks such as useRatingDisplayStyles_unstable,
* before being passed to renderRatingDisplay_unstable.
*
* @param props - props from this instance of RatingDisplay
* @param ref - reference to root HTMLDivElement of RatingDisplay
*/ export const useRatingDisplay_unstable = (props, ref)=>{
const { color = 'neutral', count, compact = false, icon = StarFilled, max = 5, size = 'medium', value } = props;
const valueTextId = useId('rating-value-');
const countTextId = useId('rating-count-');
// Generate the child RatingItems and memoize them to prevent unnecessary re-rendering
const rootChildren = React.useMemo(()=>{
return compact ? /*#__PURE__*/ React.createElement(RatingItem, {
value: 1,
key: 1,
"aria-hidden": true
}) : Array.from(Array(max), (_, i)=>/*#__PURE__*/ React.createElement(RatingItem, {
value: i + 1,
key: i + 1,
"aria-hidden": true
}));
}, [
compact,
max
]);
const state = {
color,
compact,
icon,
max,
size,
value,
components: {
root: 'div',
valueText: 'span',
countText: 'span'
},
root: slot.always(getIntrinsicElementProps('div', {
ref,
children: rootChildren,
role: 'img',
...props
}), {
elementType: 'div'
}),
valueText: slot.optional(props.valueText, {
renderByDefault: value !== undefined,
defaultProps: {
children: value,
id: valueTextId,
'aria-hidden': true
},
elementType: 'span'
}),
countText: slot.optional(props.countText, {
renderByDefault: count !== undefined,
defaultProps: {
children: count === null || count === void 0 ? void 0 : count.toLocaleString(),
id: countTextId,
'aria-hidden': true
},
elementType: 'span'
})
};
if (!state.root['aria-label'] && !state.root['aria-labelledby']) {
var _state_valueText, _state_countText;
state.root['aria-labelledby'] = [
(_state_valueText = state.valueText) === null || _state_valueText === void 0 ? void 0 : _state_valueText.id,
(_state_countText = state.countText) === null || _state_countText === void 0 ? void 0 : _state_countText.id
].filter(Boolean).join(' ');
}
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/RatingDisplay/useRatingDisplay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useId } from '@fluentui/react-utilities';\nimport type { RatingDisplayProps, RatingDisplayState } 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', count, compact = false, icon = StarFilled, max = 5, size = 'medium', value } = props;\n\n const valueTextId = useId('rating-value-');\n const countTextId = useId('rating-count-');\n\n // Generate the child RatingItems and memoize them to prevent unnecessary re-rendering\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 const state: RatingDisplayState = {\n color,\n compact,\n icon,\n max,\n size,\n value,\n components: {\n root: 'div',\n valueText: 'span',\n countText: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n children: rootChildren,\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","count","compact","icon","max","size","value","valueTextId","countTextId","rootChildren","useMemo","key","aria-hidden","Array","from","_","i","state","components","root","valueText","countText","always","children","role","elementType","optional","renderByDefault","undefined","defaultProps","id","toLocaleString","filter","Boolean","join"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,KAAK,QAAQ,4BAA4B;AAElF,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,UAAU,QAAQ,2BAA2B;AAEtD;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,SAAS,EAAEC,KAAK,EAAEC,UAAU,KAAK,EAAEC,OAAOR,UAAU,EAAES,MAAM,CAAC,EAAEC,OAAO,QAAQ,EAAEC,KAAK,EAAE,GAAGR;IAE1G,MAAMS,cAAcb,MAAM;IAC1B,MAAMc,cAAcd,MAAM;IAE1B,sFAAsF;IACtF,MAAMe,eAAelB,MAAMmB,OAAO,CAAC;QACjC,OAAOR,wBACL,oBAACN;YAAWU,OAAO;YAAGK,KAAK;YAAGC,eAAa;aAE3CC,MAAMC,IAAI,CAACD,MAAMT,MAAM,CAACW,GAAGC,kBAAM,oBAACpB;gBAAWU,OAAOU,IAAI;gBAAGL,KAAKK,IAAI;gBAAGJ,eAAa;;IAExF,GAAG;QAACV;QAASE;KAAI;IAEjB,MAAMa,QAA4B;QAChCjB;QACAE;QACAC;QACAC;QACAC;QACAC;QACAY,YAAY;YACVC,MAAM;YACNC,WAAW;YACXC,WAAW;QACb;QACAF,MAAM1B,KAAK6B,MAAM,CACf9B,yBAAyB,OAAO;YAC9BO;YACAwB,UAAUd;YACVe,MAAM;YACN,GAAG1B,KAAK;QACV,IACA;YAAE2B,aAAa;QAAM;QAEvBL,WAAW3B,KAAKiC,QAAQ,CAAC5B,MAAMsB,SAAS,EAAE;YACxCO,iBAAiBrB,UAAUsB;YAC3BC,cAAc;gBAAEN,UAAUjB;gBAAOwB,IAAIvB;gBAAa,eAAe;YAAK;YACtEkB,aAAa;QACf;QACAJ,WAAW5B,KAAKiC,QAAQ,CAAC5B,MAAMuB,SAAS,EAAE;YACxCM,iBAAiB1B,UAAU2B;YAC3BC,cAAc;gBAAEN,QAAQ,EAAEtB,kBAAAA,4BAAAA,MAAO8B,cAAc;gBAAID,IAAItB;gBAAa,eAAe;YAAK;YACxFiB,aAAa;QACf;IACF;IACA,IAAI,CAACR,MAAME,IAAI,CAAC,aAAa,IAAI,CAACF,MAAME,IAAI,CAAC,kBAAkB,EAAE;YAC9BF,kBAAqBA;QAAtDA,MAAME,IAAI,CAAC,kBAAkB,GAAG;aAACF,mBAAAA,MAAMG,SAAS,cAAfH,uCAAAA,iBAAiBa,EAAE;aAAEb,mBAAAA,MAAMI,SAAS,cAAfJ,uCAAAA,iBAAiBa,EAAE;SAAC,CAACE,MAAM,CAACC,SAASC,IAAI,CAAC;IAClG;IACA,OAAOjB;AACT,EAAE"}
@@ -0,0 +1,23 @@
import * as React from 'react';
export const useRatingDisplayContextValues = (state)=>{
const { color, compact, icon, size, value } = state;
const ratingItem = React.useMemo(()=>({
color,
compact,
iconFilled: icon,
iconOutline: icon,
interactive: false,
step: 0.5,
size,
value
}), [
color,
compact,
icon,
size,
value
]);
return {
ratingItem
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/RatingDisplay/useRatingDisplayContextValues.ts"],"sourcesContent":["import * 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,MAAMC,gCAAgC,CAACC;IAC5C,MAAM,EAAEC,KAAK,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGL;IAE9C,MAAMM,aAAaR,MAAMS,OAAO,CAC9B,IAAO,CAAA;YACLN;YACAC;YACAM,YAAYL;YACZM,aAAaN;YACbO,aAAa;YACbC,MAAM;YACNP;YACAC;QACF,CAAA,GACA;QAACJ;QAAOC;QAASC;QAAMC;QAAMC;KAAM;IAGrC,OAAO;QAAEC;IAAW;AACtB,EAAE"}
@@ -0,0 +1,53 @@
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
export const ratingDisplayClassNames = {
root: 'fui-RatingDisplay',
valueText: 'fui-RatingDisplay__valueText',
countText: 'fui-RatingDisplay__countText'
};
/**
* Styles for the root slot
*/
const useRootClassName = /*#__PURE__*/__resetStyles("rxxdqwu", null, [".rxxdqwu{display:flex;flex-wrap:wrap;align-items:center;}"]);
const useLabelClassName = /*#__PURE__*/__resetStyles("rkwnos5", "rwei36a", [".rkwnos5{color:var(--colorNeutralForeground1);margin-left:var(--spacingHorizontalXS);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}", ".rwei36a{color:var(--colorNeutralForeground1);margin-right:var(--spacingHorizontalXS);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
const useLabelStyles = /*#__PURE__*/__styles({
large: {
Be2twd7: "fkhj508",
Bg96gwp: "f1i3iumi",
Frg6f3: ["f1t5qyk5", "f1ikr372"]
},
extraLarge: {
Be2twd7: "fod5ikn",
Bg96gwp: "faaz57k",
Frg6f3: ["foyynoy", "f1vcna3q"]
},
strong: {
Bhrd7zp: "fl43uef"
},
divider: {
Ftih45: "f169p45e"
}
}, {
d: [".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f169p45e::before{content:\"\xB7 \";}"]
});
/**
* Apply styling to the RatingDisplay slots based on the state
*/
export const useRatingDisplayStyles_unstable = state => {
'use no memo';
const {
size
} = state;
const rootClassName = useRootClassName();
state.root.className = mergeClasses(ratingDisplayClassNames.root, rootClassName, state.root.className);
const labelClassName = useLabelClassName();
const labelStyles = useLabelStyles();
if (state.valueText) {
state.valueText.className = mergeClasses(ratingDisplayClassNames.valueText, labelClassName, labelStyles.strong, size === 'large' && labelStyles.large, size === 'extra-large' && labelStyles.extraLarge, state.valueText.className);
}
if (state.countText) {
state.countText.className = mergeClasses(ratingDisplayClassNames.countText, labelClassName, size === 'large' && labelStyles.large, size === 'extra-large' && labelStyles.extraLarge, state.valueText && labelStyles.divider, state.countText.className);
}
return state;
};
@@ -0,0 +1 @@
{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","typographyStyles","ratingDisplayClassNames","root","valueText","countText","useRootClassName","useLabelClassName","useLabelStyles","large","Be2twd7","Bg96gwp","Frg6f3","extraLarge","strong","Bhrd7zp","divider","Ftih45","d","useRatingDisplayStyles_unstable","state","size","rootClassName","className","labelClassName","labelStyles"],"sources":["useRatingDisplayStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const ratingDisplayClassNames = {\n root: 'fui-RatingDisplay',\n valueText: 'fui-RatingDisplay__valueText',\n countText: 'fui-RatingDisplay__countText'\n};\n/**\n * Styles for the root slot\n */ const useRootClassName = makeResetStyles({\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center'\n});\nconst useLabelClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n marginLeft: tokens.spacingHorizontalXS,\n ...typographyStyles.caption1\n});\nconst useLabelStyles = makeStyles({\n large: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n marginLeft: tokens.spacingHorizontalSNudge\n },\n extraLarge: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n marginLeft: tokens.spacingHorizontalS\n },\n strong: {\n fontWeight: tokens.fontWeightSemibold\n },\n divider: {\n '::before': {\n content: '\"· \"'\n }\n }\n});\n/**\n * Apply styling to the RatingDisplay slots based on the state\n */ export const useRatingDisplayStyles_unstable = (state)=>{\n 'use no memo';\n const { size } = state;\n const rootClassName = useRootClassName();\n state.root.className = mergeClasses(ratingDisplayClassNames.root, rootClassName, state.root.className);\n const labelClassName = useLabelClassName();\n const labelStyles = useLabelStyles();\n if (state.valueText) {\n state.valueText.className = mergeClasses(ratingDisplayClassNames.valueText, labelClassName, labelStyles.strong, size === 'large' && labelStyles.large, size === 'extra-large' && labelStyles.extraLarge, state.valueText.className);\n }\n if (state.countText) {\n state.countText.className = mergeClasses(ratingDisplayClassNames.countText, labelClassName, size === 'large' && labelStyles.large, size === 'extra-large' && labelStyles.extraLarge, state.valueText && labelStyles.divider, state.countText.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,SAAS,EAAE,8BAA8B;EACzCC,SAAS,EAAE;AACf,CAAC;AACD;AACA;AACA;AAAI,MAAMC,gBAAgB,gBAAGT,aAAA,+EAI5B,CAAC;AACF,MAAMU,iBAAiB,gBAAGV,aAAA,seAIzB,CAAC;AACF,MAAMW,cAAc,gBAAGV,QAAA;EAAAW,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,UAAA;IAAAH,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAmBtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAM;IAAEC;EAAK,CAAC,GAAGD,KAAK;EACtB,MAAME,aAAa,GAAGhB,gBAAgB,CAAC,CAAC;EACxCc,KAAK,CAACjB,IAAI,CAACoB,SAAS,GAAGxB,YAAY,CAACG,uBAAuB,CAACC,IAAI,EAAEmB,aAAa,EAAEF,KAAK,CAACjB,IAAI,CAACoB,SAAS,CAAC;EACtG,MAAMC,cAAc,GAAGjB,iBAAiB,CAAC,CAAC;EAC1C,MAAMkB,WAAW,GAAGjB,cAAc,CAAC,CAAC;EACpC,IAAIY,KAAK,CAAChB,SAAS,EAAE;IACjBgB,KAAK,CAAChB,SAAS,CAACmB,SAAS,GAAGxB,YAAY,CAACG,uBAAuB,CAACE,SAAS,EAAEoB,cAAc,EAAEC,WAAW,CAACX,MAAM,EAAEO,IAAI,KAAK,OAAO,IAAII,WAAW,CAAChB,KAAK,EAAEY,IAAI,KAAK,aAAa,IAAII,WAAW,CAACZ,UAAU,EAAEO,KAAK,CAAChB,SAAS,CAACmB,SAAS,CAAC;EACvO;EACA,IAAIH,KAAK,CAACf,SAAS,EAAE;IACjBe,KAAK,CAACf,SAAS,CAACkB,SAAS,GAAGxB,YAAY,CAACG,uBAAuB,CAACG,SAAS,EAAEmB,cAAc,EAAEH,IAAI,KAAK,OAAO,IAAII,WAAW,CAAChB,KAAK,EAAEY,IAAI,KAAK,aAAa,IAAII,WAAW,CAACZ,UAAU,EAAEO,KAAK,CAAChB,SAAS,IAAIqB,WAAW,CAACT,OAAO,EAAEI,KAAK,CAACf,SAAS,CAACkB,SAAS,CAAC;EAC3P;EACA,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
@@ -0,0 +1,12 @@
import * as React from 'react';
import { useRatingItem_unstable } from './useRatingItem';
import { renderRatingItem_unstable } from './renderRatingItem';
import { useRatingItemStyles_unstable } from './useRatingItemStyles.styles';
/**
* RatingItem is an item that will be used to set or display a rating value.
*/ export const RatingItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useRatingItem_unstable(props, ref);
useRatingItemStyles_unstable(state);
return renderRatingItem_unstable(state);
});
RatingItem.displayName = 'RatingItem';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/RatingItem/RatingItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useRatingItem_unstable } from './useRatingItem';\nimport { renderRatingItem_unstable } from './renderRatingItem';\nimport { useRatingItemStyles_unstable } from './useRatingItemStyles.styles';\nimport type { RatingItemProps } from './RatingItem.types';\n\n/**\n * RatingItem is an item that will be used to set or display a rating value.\n */\nexport const RatingItem: ForwardRefComponent<RatingItemProps> = React.forwardRef((props, ref) => {\n const state = useRatingItem_unstable(props, ref);\n\n useRatingItemStyles_unstable(state);\n return renderRatingItem_unstable(state);\n});\n\nRatingItem.displayName = 'RatingItem';\n"],"names":["React","useRatingItem_unstable","renderRatingItem_unstable","useRatingItemStyles_unstable","RatingItem","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CJ,6BAA6BK;IAC7B,OAAON,0BAA0BM;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}
@@ -0,0 +1 @@
export { };
@@ -0,0 +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":[],"rangeMappings":"","mappings":"AAgDA,WAII"}
@@ -0,0 +1,4 @@
export { RatingItem } from './RatingItem';
export { renderRatingItem_unstable } from './renderRatingItem';
export { useRatingItem_unstable } from './useRatingItem';
export { ratingItemClassNames, useRatingItemStyles_unstable } from './useRatingItemStyles.styles';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/RatingItem/index.ts"],"sourcesContent":["export { RatingItem } from './RatingItem';\nexport type { RatingItemContextValue, RatingItemProps, RatingItemSlots, RatingItemState } from './RatingItem.types';\nexport { renderRatingItem_unstable } from './renderRatingItem';\nexport { useRatingItem_unstable } from './useRatingItem';\nexport { ratingItemClassNames, useRatingItemStyles_unstable } from './useRatingItemStyles.styles';\n"],"names":["RatingItem","renderRatingItem_unstable","useRatingItem_unstable","ratingItemClassNames","useRatingItemStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAE1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}
@@ -0,0 +1,15 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render the final JSX of RatingItem
*/ export const renderRatingItem_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsxs(state.root, {
children: [
state.halfValueInput && /*#__PURE__*/ _jsx(state.halfValueInput, {}),
state.fullValueInput && /*#__PURE__*/ _jsx(state.fullValueInput, {}),
state.unselectedIcon && /*#__PURE__*/ _jsx(state.unselectedIcon, {}),
state.selectedIcon && /*#__PURE__*/ _jsx(state.selectedIcon, {})
]
});
};
@@ -0,0 +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 { RatingItemState, RatingItemSlots } from './RatingItem.types';\n\n/**\n * Render the final JSX of RatingItem\n */\nexport const renderRatingItem_unstable = (state: RatingItemState) => {\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"],"rangeMappings":";;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,cAAc,kBAAI,KAACF,MAAME,cAAc;YAC7CF,MAAMG,cAAc,kBAAI,KAACH,MAAMG,cAAc;YAC7CH,MAAMI,cAAc,kBAAI,KAACJ,MAAMI,cAAc;YAC7CJ,MAAMK,YAAY,kBAAI,KAACL,MAAMK,YAAY;;;AAGhD,EAAE"}
@@ -0,0 +1,111 @@
import * as React from 'react';
import { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
import { useFocusWithin } from '@fluentui/react-tabster';
import { useRatingItemContextValue_unstable } from '../../contexts/RatingItemContext';
const defaultItemLabel = (num)=>num + '';
/**
* Create the state required to render RatingItem.
*
* The returned state can be modified with hooks such as useRatingItemStyles_unstable,
* before being passed to renderRatingItem_unstable.
*
* @param props - props from this instance of RatingItem
* @param ref - reference to root HTMLElement of RatingItem
*/ export const useRatingItem_unstable = (props, ref)=>{
const context = useRatingItemContextValue_unstable();
const { value = 0 } = props;
const { itemLabel = defaultItemLabel, iconFilled: IconFilled, iconOutline: IconOutline } = context;
const ratingValue = Math.round((context.value || 0) * 2) / 2; // round to the nearest 0.5
var _context_hoveredValue;
const displayedRatingValue = (_context_hoveredValue = context.hoveredValue) !== null && _context_hoveredValue !== void 0 ? _context_hoveredValue : ratingValue;
const appearance = context.interactive ? 'outline' : 'filled';
let iconFillWidth;
if (context.compact || displayedRatingValue >= value) {
iconFillWidth = 1;
} else if (displayedRatingValue >= value - 0.5) {
iconFillWidth = 0.5;
} else {
iconFillWidth = 0;
}
const root = slot.always(getIntrinsicElementProps('span', {
ref: useMergedRefs(useFocusWithin(), ref),
...props
}), {
elementType: 'span'
});
let unselectedIcon;
if (iconFillWidth < 1) {
unselectedIcon = slot.always(props.unselectedIcon, {
defaultProps: {
children: appearance === 'filled' ? /*#__PURE__*/ React.createElement(IconFilled, null) : /*#__PURE__*/ React.createElement(IconOutline, null),
'aria-hidden': true
},
elementType: 'div'
});
}
let selectedIcon;
if (iconFillWidth > 0) {
selectedIcon = slot.always(props.selectedIcon, {
defaultProps: {
children: /*#__PURE__*/ React.createElement(IconFilled, null),
'aria-hidden': true
},
elementType: 'div'
});
}
let halfValueInput;
if (context.interactive && context.step === 0.5) {
halfValueInput = slot.always(props.halfValueInput, {
defaultProps: {
type: 'radio',
name: context.name,
value: value - 0.5,
checked: ratingValue === value - 0.5,
'aria-label': itemLabel(value - 0.5),
onChange: ()=>{
// This empty onChange handler silences an incorrect React warning about not using onChange for a controlled input.
// The parent Rating component has the real onChange handler to listen to change events from this input.
}
},
elementType: 'input'
});
}
let fullValueInput;
if (context.interactive) {
fullValueInput = slot.always(props.fullValueInput, {
defaultProps: {
type: 'radio',
name: context.name,
value,
checked: ratingValue === value,
'aria-label': itemLabel(value),
onChange: ()=>{
// This empty onChange handler silences an incorrect React warning about not using onChange for a controlled input.
// The parent Rating component has the real onChange handler to listen to change events from this input.
}
},
elementType: 'input'
});
}
const state = {
appearance,
color: context.color,
step: context.step,
size: context.size,
iconFillWidth,
value,
components: {
root: 'span',
selectedIcon: 'div',
unselectedIcon: 'div',
halfValueInput: 'input',
fullValueInput: 'input'
},
root,
selectedIcon,
unselectedIcon,
halfValueInput,
fullValueInput
};
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,177 @@
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
export const ratingItemClassNames = {
root: 'fui-RatingItem',
selectedIcon: 'fui-RatingItem__selectedIcon',
unselectedIcon: 'fui-RatingItem__unselectedIcon',
halfValueInput: 'fui-RatingItem__halfValueInput',
fullValueInput: 'fui-RatingItem__fullValueInput'
};
/**
* Styles for the root slot
*/
const useStyles = /*#__PURE__*/__styles({
root: {
qhf8xq: "f10pi13n",
Brovlpu: "ftqa4ok",
B486eqv: "f2hkw1w",
Bssx7fj: "f1b1k54r",
uh7if5: ["f4ne723", "fqqcjud"],
clntm0: "fh7aioi",
Dlk2r6: ["fqqcjud", "f4ne723"],
Bm3wd5j: "f1k55ka9",
Bbrhkcr: ["fgclinu", "f16pcs8n"],
f1oku: "fycbxed",
aywvf2: ["f16pcs8n", "fgclinu"],
B2j2mmj: "ffht0p2",
wigs8: "f1p0ul1q",
pbfy6t: "f1c901ms",
B0v4ure: "f1alokd7",
Byrf0fs: 0,
Bsiemmq: 0,
Bwckmig: 0,
skfxo0: 0,
Iidy0u: 0,
B98u21t: 0,
Bvwlmkc: 0,
jo1ztg: 0,
Ba1iezr: 0,
Blmvk6g: 0,
B24cy0v: 0,
Bil7v7r: 0,
Br3gin4: 0,
nr063g: 0,
ghq09: 0,
Bbgo44z: 0,
Bseh09z: "fmj8fco",
az1dzo: 0,
Ba3ybja: 0,
B6352mv: 0,
vppk2z: 0,
Biaj6j7: "f1iwowo3",
B2pnrqr: "f1spmvte",
B29w5g4: ["fgp7k2s", "f13pb23"],
Bhhzhcn: "f1ihbrwi",
Bec0n69: ["f13pb23", "fgp7k2s"]
},
small: {
Be2twd7: "f1ugzwwg",
a9b677: "frx94fk",
Bqenvij: "fvblgha"
},
medium: {
Be2twd7: "f4ybsrx",
a9b677: "fjw5fx7",
Bqenvij: "fd461yt"
},
large: {
Be2twd7: "fe5j1ua",
a9b677: "f64fuq3",
Bqenvij: "fjamq6b"
},
"extra-large": {
Be2twd7: "f24l1pt",
a9b677: "f1w9dchk",
Bqenvij: "fxldao9"
}
}, {
d: [".f10pi13n{position:relative;}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", [".fmj8fco[data-fui-focus-within]:focus-within::after{border:2px solid var(--colorStrokeFocus2);}", {
p: -2
}], [".f1iwowo3[data-fui-focus-within]:focus-within::after{border-radius:var(--borderRadiusMedium);}", {
p: -1
}], ".f1spmvte[data-fui-focus-within]:focus-within::after{top:calc(2px * -1);}", ".fgp7k2s[data-fui-focus-within]:focus-within::after{right:calc(2px * -1);}", ".f13pb23[data-fui-focus-within]:focus-within::after{left:calc(2px * -1);}", ".f1ihbrwi[data-fui-focus-within]:focus-within::after{bottom:calc(2px * -1);}", ".f1ugzwwg{font-size:12px;}", ".frx94fk{width:12px;}", ".fvblgha{height:12px;}", ".f4ybsrx{font-size:16px;}", ".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".fe5j1ua{font-size:20px;}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".f24l1pt{font-size:28px;}", ".f1w9dchk{width:28px;}", ".fxldao9{height:28px;}"],
f: [".ftqa4ok:focus{outline-style:none;}"],
i: [".f2hkw1w:focus-visible{outline-style:none;}"],
m: [["@media (forced-colors: active){.f1k55ka9[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f16pcs8n[data-fui-focus-within]:focus-within::after{border-left-color:Highlight;}.fgclinu[data-fui-focus-within]:focus-within::after{border-right-color:Highlight;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fycbxed[data-fui-focus-within]:focus-within::after{border-bottom-color:Highlight;}}", {
m: "(forced-colors: active)"
}]]
});
const useInputBaseClassName = /*#__PURE__*/__resetStyles("r1qfsv1p", "rh8pzaz", [".r1qfsv1p{position:absolute;left:0;top:0;right:0;bottom:0;box-sizing:border-box;margin:0;opacity:0;cursor:pointer;height:100%;}", ".rh8pzaz{position:absolute;right:0;top:0;left:0;bottom:0;box-sizing:border-box;margin:0;opacity:0;cursor:pointer;height:100%;}"]);
const useInputStyles = /*#__PURE__*/__styles({
lowerHalf: {
j35jbq: ["ffenbu1", "f1ktbn1t"]
},
upperHalf: {
oyh7mz: ["f1ktbn1t", "ffenbu1"]
}
}, {
d: [".ffenbu1{right:50%;}", ".f1ktbn1t{left:50%;}"]
});
const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("r1420l2m", "r1yt29v5", [".r1420l2m{display:flex;overflow:hidden;color:var(--colorNeutralForeground1);fill:currentColor;pointer-events:none;position:absolute;left:0;right:0;top:0;bottom:0;}", ".r1yt29v5{display:flex;overflow:hidden;color:var(--colorNeutralForeground1);fill:currentColor;pointer-events:none;position:absolute;right:0;left:0;top:0;bottom:0;}"]);
const useIndicatorStyles = /*#__PURE__*/__styles({
lowerHalf: {
j35jbq: ["ffenbu1", "f1ktbn1t"],
l5kjut: 0,
uoufgc: 0,
v39lw8: 0,
Bbwb3tu: "f10jwh99"
},
upperHalf: {
oyh7mz: ["f1ktbn1t", "ffenbu1"],
Frg6f3: ["fbm7ezh", "f3ev47i"]
},
brand: {
sj55zd: "f16muhyy"
},
marigold: {
sj55zd: "f1whvut0"
},
filled: {
sj55zd: "f1qaymga",
ojy3ng: "f13qq9og",
Bbusuzp: "f1cg6951",
B6jmk37: "f1am6ztc"
},
brandFilled: {
sj55zd: "f1kdv6iu"
},
marigoldFilled: {
sj55zd: "f1ymbmfq"
}
}, {
d: [".ffenbu1{right:50%;}", ".f1ktbn1t{left:50%;}", [".f10jwh99>svg{flex:0 0 auto;}", {
p: -1
}], ".fbm7ezh{margin-left:-50%;}", ".f3ev47i{margin-right:-50%;}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f1whvut0{color:var(--colorPaletteMarigoldBorderActive);}", ".f1qaymga{color:var(--colorNeutralBackground6);}", ".f13qq9og{stroke:var(--colorTransparentStroke);}", ".f1kdv6iu{color:var(--colorBrandBackground2);}", ".f1ymbmfq{color:var(--colorPaletteMarigoldBackground2);}"],
m: [["@media (forced-colors: active){.f1cg6951{color:Canvas;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1am6ztc{stroke:CanvasText;}}", {
m: "(forced-colors: active)"
}]]
});
/**
* Apply styling to the RatingItem slots based on the state
*/
export const useRatingItemStyles_unstable = state => {
'use no memo';
const {
color,
size,
iconFillWidth,
appearance
} = state;
const styles = useStyles();
const inputBaseClassName = useInputBaseClassName();
const inputStyles = useInputStyles();
const indicatorBaseClassName = useIndicatorBaseClassName();
const indicatorStyles = useIndicatorStyles();
state.root.className = mergeClasses(ratingItemClassNames.root, styles.root, styles[size], state.root.className);
if (state.halfValueInput) {
state.halfValueInput.className = mergeClasses(ratingItemClassNames.halfValueInput, inputBaseClassName, inputStyles.lowerHalf, state.halfValueInput.className);
}
if (state.fullValueInput) {
state.fullValueInput.className = mergeClasses(ratingItemClassNames.fullValueInput, inputBaseClassName, state.halfValueInput && inputStyles.upperHalf, state.fullValueInput.className);
}
if (state.unselectedIcon) {
state.unselectedIcon.className = mergeClasses(ratingItemClassNames.unselectedIcon, indicatorBaseClassName, appearance === 'filled' && indicatorStyles.filled, color === 'brand' && (appearance === 'filled' ? indicatorStyles.brandFilled : indicatorStyles.brand), color === 'marigold' && (appearance === 'filled' ? indicatorStyles.marigoldFilled : indicatorStyles.marigold), iconFillWidth === 0.5 && indicatorStyles.upperHalf, state.unselectedIcon.className);
}
if (state.selectedIcon) {
state.selectedIcon.className = mergeClasses(ratingItemClassNames.selectedIcon, indicatorBaseClassName, color === 'brand' && indicatorStyles.brand, color === 'marigold' && indicatorStyles.marigold, iconFillWidth === 0.5 && indicatorStyles.lowerHalf, state.selectedIcon.className);
}
return state;
};
File diff suppressed because one or more lines are too long