Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Rating: function() {
return _index.Rating;
},
ratingClassNames: function() {
return _index.ratingClassNames;
},
renderRating_unstable: function() {
return _index.renderRating_unstable;
},
useRatingBase_unstable: function() {
return _index.useRatingBase_unstable;
},
useRatingContextValues: function() {
return _index.useRatingContextValues;
},
useRatingStyles_unstable: function() {
return _index.useRatingStyles_unstable;
},
useRating_unstable: function() {
return _index.useRating_unstable;
}
});
const _index = require("./components/Rating/index");

View File

@@ -0,0 +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"}

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
RatingDisplay: function() {
return _index.RatingDisplay;
},
ratingDisplayClassNames: function() {
return _index.ratingDisplayClassNames;
},
renderRatingDisplay_unstable: function() {
return _index.renderRatingDisplay_unstable;
},
useRatingDisplayBase_unstable: function() {
return _index.useRatingDisplayBase_unstable;
},
useRatingDisplayContextValues: function() {
return _index.useRatingDisplayContextValues;
},
useRatingDisplayStyles_unstable: function() {
return _index.useRatingDisplayStyles_unstable;
},
useRatingDisplay_unstable: function() {
return _index.useRatingDisplay_unstable;
}
});
const _index = require("./components/RatingDisplay/index");

View File

@@ -0,0 +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"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
RatingItem: function() {
return _index.RatingItem;
},
ratingItemClassNames: function() {
return _index.ratingItemClassNames;
},
renderRatingItem_unstable: function() {
return _index.renderRatingItem_unstable;
},
useRatingItemBase_unstable: function() {
return _index.useRatingItemBase_unstable;
},
useRatingItemStyles_unstable: function() {
return _index.useRatingItemStyles_unstable;
},
useRatingItem_unstable: function() {
return _index.useRatingItem_unstable;
}
});
const _index = require("./components/RatingItem/index");

View File

@@ -0,0 +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"}

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Rating", {
enumerable: true,
get: function() {
return Rating;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useRating = require("./useRating");
const _renderRating = require("./renderRating");
const _useRatingStylesstyles = require("./useRatingStyles.styles");
const _useRatingContextValues = require("./useRatingContextValues");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Rating = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useRating.useRating_unstable)(props, ref);
const contextValues = (0, _useRatingContextValues.useRatingContextValues)(state);
(0, _useRatingStylesstyles.useRatingStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useRatingStyles_unstable')(state);
return (0, _renderRating.renderRating_unstable)(state, contextValues);
});
Rating.displayName = 'Rating';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Rating/Rating.tsx"],"sourcesContent":["'use client';\n\nimport * 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';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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 useCustomStyleHook_unstable('useRatingStyles_unstable')(state);\n return renderRating_unstable(state, contextValues);\n});\n\nRating.displayName = 'Rating';\n"],"names":["React","useRating_unstable","renderRating_unstable","useRatingStyles_unstable","useRatingContextValues","useCustomStyleHook_unstable","Rating","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;2BAEI,cAAc;8BACX,iBAAiB;uCACd,2BAA2B;wCAE7B,2BAA2B;qCACtB,kCAAkC;AAKvE,MAAMM,SAAAA,WAAAA,GAA2CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,YAAQT,6BAAAA,EAAmBO,OAAOC;IACxC,MAAME,oBAAgBP,8CAAAA,EAAuBM;QAE7CP,+CAAAA,EAAyBO;QACzBL,gDAAAA,EAA4B,4BAA4BK;IACxD,WAAOR,mCAAAA,EAAsBQ,OAAOC;AACtC,GAAG;AAEHL,OAAOM,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -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 * 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":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

View File

@@ -0,0 +1,38 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Rating: function() {
return _Rating.Rating;
},
ratingClassNames: function() {
return _useRatingStylesstyles.ratingClassNames;
},
renderRating_unstable: function() {
return _renderRating.renderRating_unstable;
},
useRatingBase_unstable: function() {
return _useRating.useRatingBase_unstable;
},
useRatingContextValues: function() {
return _useRatingContextValues.useRatingContextValues;
},
useRatingStyles_unstable: function() {
return _useRatingStylesstyles.useRatingStyles_unstable;
},
useRating_unstable: function() {
return _useRating.useRating_unstable;
}
});
const _Rating = require("./Rating");
const _renderRating = require("./renderRating");
const _useRating = require("./useRating");
const _useRatingStylesstyles = require("./useRatingStyles.styles");
const _useRatingContextValues = require("./useRatingContextValues");

View File

@@ -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 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"}

View File

@@ -0,0 +1,20 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderRating_unstable", {
enumerable: true,
get: function() {
return renderRating_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _RatingItemContext = require("../../contexts/RatingItemContext");
const renderRating_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RatingItemContext.RatingItemProvider, {
value: contextValues.ratingItem,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
});
};

View File

@@ -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 { 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"}

View File

@@ -0,0 +1,106 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useRatingBase_unstable: function() {
return useRatingBase_unstable;
},
useRating_unstable: function() {
return useRating_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _RatingItem = require("../../RatingItem");
const _reacticons = require("@fluentui/react-icons");
const useRating_unstable = (props, ref)=>{
const { color = 'neutral', size = 'extra-large', iconFilled = _reacticons.StarFilled, iconOutline = _reacticons.StarRegular, ...baseProps } = props;
const state = useRatingBase_unstable({
iconFilled,
iconOutline,
...baseProps
}, ref);
return {
...state,
color,
size
};
};
const useRatingBase_unstable = (props, ref)=>{
const generatedName = (0, _reactutilities.useId)('rating-');
const { iconFilled = 'span', iconOutline = 'span', max = 5, name = generatedName, onChange, step = 1, itemLabel } = props;
const [value, setValue] = (0, _reactutilities.useControllableState)({
state: props.value,
defaultState: props.defaultValue,
initialState: 0
});
const isRatingRadioItem = (target)=>(0, _reactutilities.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.RatingItem, {
value: i + 1,
key: i + 1
}));
}, [
max
]);
const state = {
iconFilled,
iconOutline,
name,
step,
itemLabel,
value,
hoveredValue,
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.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 = (0, _reactutilities.mergeCallbacks)(props.onMouseOver, (ev)=>{
if (isRatingRadioItem(ev.target)) {
const newValue = parseFloat(ev.target.value);
if (!isNaN(newValue)) {
setHoveredValue(newValue);
}
}
});
state.root.onMouseLeave = (0, _reactutilities.mergeCallbacks)(props.onMouseLeave, (ev)=>{
setHoveredValue(undefined);
});
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,41 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useRatingContextValues", {
enumerable: true,
get: function() {
return useRatingContextValues;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
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
};
};

View File

@@ -0,0 +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"}

View File

@@ -0,0 +1,34 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ratingClassNames: function() {
return ratingClassNames;
},
useRatingStyles_unstable: function() {
return useRatingStyles_unstable;
}
});
const _react = require("@griffel/react");
const ratingClassNames = {
root: 'fui-Rating'
};
/**
* Styles for the root slot
*/ const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r2imjyh", null, [
".r2imjyh{display:flex;flex-wrap:wrap;}"
]);
const useRatingStyles_unstable = (state)=>{
'use no memo';
const rootClassName = useRootClassName();
state.root.className = (0, _react.mergeClasses)(ratingClassNames.root, rootClassName, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useRatingStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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"],"names":["__resetStyles","mergeClasses","ratingClassNames","root","useRootClassName","useRatingStyles_unstable","state","rootClassName","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;oBAEiB;;;4BAWY;;;;uBAZK,gBAAgB;AACvD,MAAME,mBAAmB;IAC5BC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,gBAAgB,GAAA,WAAA,OAAGJ,oBAAA,EAAA,WAAA,MAAA;IAAA;CAG5B,CAAC;AAGS,MAAMK,4BAA4BC,KAAK,IAAG;IACjD,aAAa;IACb,MAAMC,aAAa,GAAGH,gBAAgB,CAAC,CAAC;IACxCE,KAAK,CAACH,IAAI,CAACK,SAAS,OAAGP,mBAAY,EAACC,gBAAgB,CAACC,IAAI,EAAEI,aAAa,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;IAC/F,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,35 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ratingClassNames: function() {
return ratingClassNames;
},
useRatingStyles_unstable: function() {
return useRatingStyles_unstable;
}
});
const _react = require("@griffel/react");
const ratingClassNames = {
root: 'fui-Rating'
};
/**
* Styles for the root slot
*/ const useRootClassName = (0, _react.makeResetStyles)({
display: 'flex',
flexWrap: 'wrap'
});
const useRatingStyles_unstable = (state)=>{
'use no memo';
const rootClassName = useRootClassName();
state.root.className = (0, _react.mergeClasses)(ratingClassNames.root, rootClassName, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Rating/useRatingStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { RatingSlots, RatingState } from './Rating.types';\n\nexport const ratingClassNames: SlotClassNames<RatingSlots> = {\n root: 'fui-Rating',\n};\n\n/**\n * Styles for the root slot\n */\n\nconst useRootClassName = makeResetStyles({\n display: 'flex',\n flexWrap: 'wrap',\n});\n\n/**\n * Apply styling to the Rating slots based on the state\n */\nexport const useRatingStyles_unstable = (state: RatingState): RatingState => {\n 'use no memo';\n\n const rootClassName = useRootClassName();\n state.root.className = mergeClasses(ratingClassNames.root, rootClassName, state.root.className);\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","ratingClassNames","root","useRootClassName","display","flexWrap","useRatingStyles_unstable","state","rootClassName","className"],"mappings":"AAAA;;;;;;;;;;;;oBAMaE;;;IAgBAK,wBAAAA;;;;uBApBiC,iBAAiB;AAIxD,MAAML,mBAAgD;IAC3DC,MAAM;AACR,EAAE;AAEF;;CAEC,GAED,MAAMC,uBAAmBJ,sBAAAA,EAAgB;IACvCK,SAAS;IACTC,UAAU;AACZ;AAKO,iCAAiC,CAACE;IACvC;IAEA,MAAMC,gBAAgBL;IACtBI,MAAML,IAAI,CAACO,SAAS,OAAGT,mBAAAA,EAAaC,iBAAiBC,IAAI,EAAEM,eAAeD,MAAML,IAAI,CAACO,SAAS;IAC9F,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "RatingDisplay", {
enumerable: true,
get: function() {
return RatingDisplay;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useRatingDisplay = require("./useRatingDisplay");
const _renderRatingDisplay = require("./renderRatingDisplay");
const _useRatingDisplayStylesstyles = require("./useRatingDisplayStyles.styles");
const _useRatingDisplayContextValues = require("./useRatingDisplayContextValues");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const RatingDisplay = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useRatingDisplay.useRatingDisplay_unstable)(props, ref);
const contextValues = (0, _useRatingDisplayContextValues.useRatingDisplayContextValues)(state);
(0, _useRatingDisplayStylesstyles.useRatingDisplayStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useRatingDisplayStyles_unstable')(state);
return (0, _renderRatingDisplay.renderRatingDisplay_unstable)(state, contextValues);
});
RatingDisplay.displayName = 'RatingDisplay';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/RatingDisplay/RatingDisplay.tsx"],"sourcesContent":["'use client';\n\nimport * 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';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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 useCustomStyleHook_unstable('useRatingDisplayStyles_unstable')(state);\n\n return renderRatingDisplay_unstable(state, contextValues);\n});\n\nRatingDisplay.displayName = 'RatingDisplay';\n"],"names":["React","useRatingDisplay_unstable","renderRatingDisplay_unstable","useRatingDisplayStyles_unstable","useRatingDisplayContextValues","useCustomStyleHook_unstable","RatingDisplay","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;kCAEW,qBAAqB;qCAClB,wBAAwB;8CACrB,kCAAkC;+CAEpC,kCAAkC;qCACpC,kCAAkC;AAMvE,MAAMM,gBAAAA,WAAAA,GAAyDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,YAAQT,2CAAAA,EAA0BO,OAAOC;IAC/C,MAAME,oBAAgBP,4DAAAA,EAA8BM;QAEpDP,6DAAAA,EAAgCO;QAChCL,gDAAAA,EAA4B,mCAAmCK;IAE/D,WAAOR,iDAAAA,EAA6BQ,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -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 * 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":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

View File

@@ -0,0 +1,38 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
RatingDisplay: function() {
return _RatingDisplay.RatingDisplay;
},
ratingDisplayClassNames: function() {
return _useRatingDisplayStylesstyles.ratingDisplayClassNames;
},
renderRatingDisplay_unstable: function() {
return _renderRatingDisplay.renderRatingDisplay_unstable;
},
useRatingDisplayBase_unstable: function() {
return _useRatingDisplay.useRatingDisplayBase_unstable;
},
useRatingDisplayContextValues: function() {
return _useRatingDisplayContextValues.useRatingDisplayContextValues;
},
useRatingDisplayStyles_unstable: function() {
return _useRatingDisplayStylesstyles.useRatingDisplayStyles_unstable;
},
useRatingDisplay_unstable: function() {
return _useRatingDisplay.useRatingDisplay_unstable;
}
});
const _RatingDisplay = require("./RatingDisplay");
const _renderRatingDisplay = require("./renderRatingDisplay");
const _useRatingDisplay = require("./useRatingDisplay");
const _useRatingDisplayStylesstyles = require("./useRatingDisplayStyles.styles");
const _useRatingDisplayContextValues = require("./useRatingDisplayContextValues");

View File

@@ -0,0 +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"}

View File

@@ -0,0 +1,26 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderRatingDisplay_unstable", {
enumerable: true,
get: function() {
return renderRatingDisplay_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _RatingItemContext = require("../../contexts/RatingItemContext");
const renderRatingDisplay_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RatingItemContext.RatingItemProvider, {
value: contextValues.ratingItem,
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.root.children,
state.valueText && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.valueText, {}),
state.countText && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.countText, {})
]
})
});
};

View File

@@ -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 { 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"}

View File

@@ -0,0 +1,102 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useRatingDisplayBase_unstable: function() {
return useRatingDisplayBase_unstable;
},
useRatingDisplay_unstable: function() {
return useRatingDisplay_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reacticons = require("@fluentui/react-icons");
const _RatingItem = require("../RatingItem/RatingItem");
const useRatingDisplay_unstable = (props, ref)=>{
const { color = 'neutral', size = 'medium', icon = _reacticons.StarFilled, ...baseProps } = props;
const state = useRatingDisplayBase_unstable({
icon,
...baseProps
}, ref);
return {
...state,
icon,
color,
size
};
};
const useRatingDisplayBase_unstable = (props, ref)=>{
const { count, compact = false, icon, max = 5, value } = props;
const valueTextId = (0, _reactutilities.useId)('rating-value-');
const countTextId = (0, _reactutilities.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.RatingItem, {
value: 1,
key: 1,
"aria-hidden": true
}) : Array.from(Array(max), (_, i)=>/*#__PURE__*/ _react.createElement(_RatingItem.RatingItem, {
value: i + 1,
key: i + 1,
"aria-hidden": true
}));
}, [
compact,
max
]);
const state = {
compact,
icon,
max,
value,
components: {
root: 'div',
valueText: 'span',
countText: 'span'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref,
children: rootChildren,
role: 'img',
...props
}), {
elementType: 'div'
}),
valueText: _reactutilities.slot.optional(props.valueText, {
renderByDefault: value !== undefined,
defaultProps: {
children: value,
id: valueTextId,
'aria-hidden': true
},
elementType: 'span'
}),
countText: _reactutilities.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;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,35 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useRatingDisplayContextValues", {
enumerable: true,
get: function() {
return useRatingDisplayContextValues;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
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
};
};

View File

@@ -0,0 +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"}

View File

@@ -0,0 +1,86 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ratingDisplayClassNames: function() {
return ratingDisplayClassNames;
},
useRatingDisplayStyles_unstable: function() {
return useRatingDisplayStyles_unstable;
}
});
const _react = require("@griffel/react");
const ratingDisplayClassNames = {
root: 'fui-RatingDisplay',
valueText: 'fui-RatingDisplay__valueText',
countText: 'fui-RatingDisplay__countText'
};
/**
* Styles for the root slot
*/ const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rxxdqwu", null, [
".rxxdqwu{display:flex;flex-wrap:wrap;align-items:center;}"
]);
const useLabelClassName = /*#__PURE__*/ (0, _react.__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__*/ (0, _react.__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 \";}"
]
});
const useRatingDisplayStyles_unstable = (state)=>{
'use no memo';
const { size } = state;
const rootClassName = useRootClassName();
state.root.className = (0, _react.mergeClasses)(ratingDisplayClassNames.root, rootClassName, state.root.className);
const labelClassName = useLabelClassName();
const labelStyles = useLabelStyles();
if (state.valueText) {
state.valueText.className = (0, _react.mergeClasses)(ratingDisplayClassNames.valueText, labelClassName, labelStyles.strong, size === 'large' && labelStyles.large, size === 'extra-large' && labelStyles.extraLarge, state.valueText.className);
}
if (state.countText) {
state.countText.className = (0, _react.mergeClasses)(ratingDisplayClassNames.countText, labelClassName, size === 'large' && labelStyles.large, size === 'extra-large' && labelStyles.extraLarge, state.valueText && labelStyles.divider, state.countText.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useRatingDisplayStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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"],"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"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCK,uBAAuB;;;mCAuCY;eAA/BiB;;;uBAzCyC,gBAAgB;AAEnE,gCAAgC;IACnChB,IAAI,EAAE,mBAAmB;IACzBC,SAAS,EAAE,8BAA8B;IACzCC,SAAS,EAAE;AACf,CAAC;AACD;;CAEA,GAAI,MAAMC,gBAAgB,GAAA,WAAA,OAAGT,oBAAA,EAAA,WAAA,MAAA;IAAA;CAI5B,CAAC;AACF,MAAMU,iBAAiB,GAAA,WAAA,OAAGV,oBAAA,EAAA,WAAA,WAAA;IAAA;IAAA;CAIzB,CAAC;AACF,MAAMW,cAAc,GAAA,WAAA,OAAGV,eAAA,EAAA;IAAAW,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,UAAA,EAAA;QAAAH,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAmBtB,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,aAAa;IACb,MAAM,EAAEC,IAAAA,EAAM,GAAGD,KAAK;IACtB,MAAME,aAAa,GAAGhB,gBAAgB,CAAC,CAAC;IACxCc,KAAK,CAACjB,IAAI,CAACoB,SAAS,GAAGxB,uBAAY,EAACG,uBAAuB,CAACC,IAAI,EAAEmB,aAAa,EAAEF,KAAK,CAACjB,IAAI,CAACoB,SAAS,CAAC;IACtG,MAAMC,cAAc,GAAGjB,iBAAiB,CAAC,CAAC;IAC1C,MAAMkB,WAAW,GAAGjB,cAAc,CAAC,CAAC;IACpC,IAAIY,KAAK,CAAChB,SAAS,EAAE;QACjBgB,KAAK,CAAChB,SAAS,CAACmB,SAAS,OAAGxB,mBAAY,EAACG,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;IACvO;IACA,IAAIH,KAAK,CAACf,SAAS,EAAE;QACjBe,KAAK,CAACf,SAAS,CAACkB,SAAS,OAAGxB,mBAAY,EAACG,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;IAC3P;IACA,OAAOH,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,73 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ratingDisplayClassNames: function() {
return ratingDisplayClassNames;
},
useRatingDisplayStyles_unstable: function() {
return useRatingDisplayStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const ratingDisplayClassNames = {
root: 'fui-RatingDisplay',
valueText: 'fui-RatingDisplay__valueText',
countText: 'fui-RatingDisplay__countText'
};
/**
* Styles for the root slot
*/ const useRootClassName = (0, _react.makeResetStyles)({
display: 'flex',
flexWrap: 'wrap',
alignItems: 'center'
});
const useLabelClassName = (0, _react.makeResetStyles)({
color: _reacttheme.tokens.colorNeutralForeground1,
marginLeft: _reacttheme.tokens.spacingHorizontalXS,
..._reacttheme.typographyStyles.caption1
});
const useLabelStyles = (0, _react.makeStyles)({
large: {
fontSize: _reacttheme.tokens.fontSizeBase300,
lineHeight: _reacttheme.tokens.lineHeightBase300,
marginLeft: _reacttheme.tokens.spacingHorizontalSNudge
},
extraLarge: {
fontSize: _reacttheme.tokens.fontSizeBase400,
lineHeight: _reacttheme.tokens.lineHeightBase400,
marginLeft: _reacttheme.tokens.spacingHorizontalS
},
strong: {
fontWeight: _reacttheme.tokens.fontWeightSemibold
},
divider: {
'::before': {
content: '"· "'
}
}
});
const useRatingDisplayStyles_unstable = (state)=>{
'use no memo';
const { size } = state;
const rootClassName = useRootClassName();
state.root.className = (0, _react.mergeClasses)(ratingDisplayClassNames.root, rootClassName, state.root.className);
const labelClassName = useLabelClassName();
const labelStyles = useLabelStyles();
if (state.valueText) {
state.valueText.className = (0, _react.mergeClasses)(ratingDisplayClassNames.valueText, labelClassName, labelStyles.strong, size === 'large' && labelStyles.large, size === 'extra-large' && labelStyles.extraLarge, state.valueText.className);
}
if (state.countText) {
state.countText.className = (0, _react.mergeClasses)(ratingDisplayClassNames.countText, labelClassName, size === 'large' && labelStyles.large, size === 'extra-large' && labelStyles.extraLarge, state.valueText && labelStyles.divider, state.countText.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/RatingDisplay/useRatingDisplayStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { RatingDisplaySlots, RatingDisplayState } from './RatingDisplay.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const ratingDisplayClassNames: SlotClassNames<RatingDisplaySlots> = {\n root: 'fui-RatingDisplay',\n valueText: 'fui-RatingDisplay__valueText',\n countText: 'fui-RatingDisplay__countText',\n};\n\n/**\n * Styles for the root slot\n */\n\nconst useRootClassName = makeResetStyles({\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n});\n\nconst useLabelClassName = makeResetStyles({\n color: tokens.colorNeutralForeground1,\n marginLeft: tokens.spacingHorizontalXS,\n ...typographyStyles.caption1,\n});\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/**\n * Apply styling to the RatingDisplay slots based on the state\n */\nexport const useRatingDisplayStyles_unstable = (state: RatingDisplayState): RatingDisplayState => {\n 'use no memo';\n\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\n if (state.valueText) {\n state.valueText.className = mergeClasses(\n ratingDisplayClassNames.valueText,\n labelClassName,\n labelStyles.strong,\n size === 'large' && labelStyles.large,\n size === 'extra-large' && labelStyles.extraLarge,\n state.valueText.className,\n );\n }\n if (state.countText) {\n state.countText.className = mergeClasses(\n ratingDisplayClassNames.countText,\n labelClassName,\n size === 'large' && labelStyles.large,\n size === 'extra-large' && labelStyles.extraLarge,\n state.valueText && labelStyles.divider,\n state.countText.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","ratingDisplayClassNames","root","valueText","countText","useRootClassName","display","flexWrap","alignItems","useLabelClassName","color","colorNeutralForeground1","marginLeft","spacingHorizontalXS","caption1","useLabelStyles","large","fontSize","fontSizeBase300","lineHeight","lineHeightBase300","spacingHorizontalSNudge","extraLarge","fontSizeBase400","lineHeightBase400","spacingHorizontalS","strong","fontWeight","fontWeightSemibold","divider","content","useRatingDisplayStyles_unstable","state","size","rootClassName","className","labelClassName","labelStyles"],"mappings":"AAAA;;;;;;;;;;;;IAOaK,uBAAAA;;;mCA8CA8B;eAAAA;;;uBAnD6C,iBAAiB;4BAGlC,wBAAwB;AAE1D,gCAAoE;IACzE7B,MAAM;IACNC,WAAW;IACXC,WAAW;AACb,EAAE;AAEF;;CAEC,GAED,MAAMC,uBAAmBT,sBAAAA,EAAgB;IACvCU,SAAS;IACTC,UAAU;IACVC,YAAY;AACd;AAEA,MAAMC,wBAAoBb,sBAAAA,EAAgB;IACxCc,OAAOX,kBAAAA,CAAOY,uBAAuB;IACrCC,YAAYb,kBAAAA,CAAOc,mBAAmB;IACtC,GAAGb,4BAAAA,CAAiBc,QAAQ;AAC9B;AAEA,MAAMC,qBAAiBlB,iBAAAA,EAAW;IAChCmB,OAAO;QACLC,UAAUlB,kBAAAA,CAAOmB,eAAe;QAChCC,YAAYpB,kBAAAA,CAAOqB,iBAAiB;QACpCR,YAAYb,kBAAAA,CAAOsB,uBAAuB;IAC5C;IACAC,YAAY;QACVL,UAAUlB,kBAAAA,CAAOwB,eAAe;QAChCJ,YAAYpB,kBAAAA,CAAOyB,iBAAiB;QACpCZ,YAAYb,kBAAAA,CAAO0B,kBAAkB;IACvC;IACAC,QAAQ;QACNC,YAAY5B,kBAAAA,CAAO6B,kBAAkB;IACvC;IACAC,SAAS;QACP,YAAY;YACVC,SAAS;QACX;IACF;AACF;AAKO,wCAAwC,CAACE;IAC9C;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAME,gBAAgB7B;IACtB2B,MAAM9B,IAAI,CAACiC,SAAS,OAAGrC,mBAAAA,EAAaG,wBAAwBC,IAAI,EAAEgC,eAAeF,MAAM9B,IAAI,CAACiC,SAAS;IACrG,MAAMC,iBAAiB3B;IACvB,MAAM4B,cAActB;IAEpB,IAAIiB,MAAM7B,SAAS,EAAE;QACnB6B,MAAM7B,SAAS,CAACgC,SAAS,OAAGrC,mBAAAA,EAC1BG,wBAAwBE,SAAS,EACjCiC,gBACAC,YAAYX,MAAM,EAClBO,SAAS,WAAWI,YAAYrB,KAAK,EACrCiB,SAAS,iBAAiBI,YAAYf,UAAU,EAChDU,MAAM7B,SAAS,CAACgC,SAAS;IAE7B;IACA,IAAIH,MAAM5B,SAAS,EAAE;QACnB4B,MAAM5B,SAAS,CAAC+B,SAAS,OAAGrC,mBAAAA,EAC1BG,wBAAwBG,SAAS,EACjCgC,gBACAH,SAAS,WAAWI,YAAYrB,KAAK,EACrCiB,SAAS,iBAAiBI,YAAYf,UAAU,EAChDU,MAAM7B,SAAS,IAAIkC,YAAYR,OAAO,EACtCG,MAAM5B,SAAS,CAAC+B,SAAS;IAE7B;IAEA,OAAOH;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "RatingItem", {
enumerable: true,
get: function() {
return RatingItem;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useRatingItem = require("./useRatingItem");
const _renderRatingItem = require("./renderRatingItem");
const _useRatingItemStylesstyles = require("./useRatingItemStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const RatingItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useRatingItem.useRatingItem_unstable)(props, ref);
(0, _useRatingItemStylesstyles.useRatingItemStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useRatingItemStyles_unstable')(state);
return (0, _renderRatingItem.renderRatingItem_unstable)(state);
});
RatingItem.displayName = 'RatingItem';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/RatingItem/RatingItem.tsx"],"sourcesContent":["'use client';\n\nimport * 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';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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 useCustomStyleHook_unstable('useRatingItemStyles_unstable')(state);\n\n return renderRatingItem_unstable(state);\n});\n\nRatingItem.displayName = 'RatingItem';\n"],"names":["React","useRatingItem_unstable","renderRatingItem_unstable","useRatingItemStyles_unstable","useCustomStyleHook_unstable","RatingItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;+BAEQ,kBAAkB;kCACf,qBAAqB;2CAClB,+BAA+B;qCAEhC,kCAAkC;AAKvE,MAAMK,aAAAA,WAAAA,GAAmDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQR,qCAAAA,EAAuBM,OAAOC;QAE5CL,uDAAAA,EAA6BM;QAC7BL,gDAAAA,EAA4B,gCAAgCK;IAE5D,WAAOP,2CAAAA,EAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -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 * 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":""}

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
RatingItem: function() {
return _RatingItem.RatingItem;
},
ratingItemClassNames: function() {
return _useRatingItemStylesstyles.ratingItemClassNames;
},
renderRatingItem_unstable: function() {
return _renderRatingItem.renderRatingItem_unstable;
},
useRatingItemBase_unstable: function() {
return _useRatingItem.useRatingItemBase_unstable;
},
useRatingItemStyles_unstable: function() {
return _useRatingItemStylesstyles.useRatingItemStyles_unstable;
},
useRatingItem_unstable: function() {
return _useRatingItem.useRatingItem_unstable;
}
});
const _RatingItem = require("./RatingItem");
const _renderRatingItem = require("./renderRatingItem");
const _useRatingItem = require("./useRatingItem");
const _useRatingItemStylesstyles = require("./useRatingItemStyles.styles");

View File

@@ -0,0 +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"}

View File

@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderRatingItem_unstable", {
enumerable: true,
get: function() {
return renderRatingItem_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderRatingItem_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.halfValueInput && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.halfValueInput, {}),
state.fullValueInput && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.fullValueInput, {}),
state.unselectedIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.unselectedIcon, {}),
state.selectedIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.selectedIcon, {})
]
});
};

View File

@@ -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 { 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"}

View File

@@ -0,0 +1,129 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useRatingItemBase_unstable: function() {
return useRatingItemBase_unstable;
},
useRatingItem_unstable: function() {
return useRatingItem_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reacttabster = require("@fluentui/react-tabster");
const _RatingItemContext = require("../../contexts/RatingItemContext");
const defaultItemLabel = (num)=>num + '';
const useRatingItem_unstable = (props, ref)=>{
const context = (0, _RatingItemContext.useRatingItemContextValue_unstable)();
const state = useRatingItemBase_unstable(props, ref);
return {
...state,
color: context.color,
size: context.size
};
};
const useRatingItemBase_unstable = (props, ref)=>{
const context = (0, _RatingItemContext.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 = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('span', {
ref: (0, _reactutilities.useMergedRefs)((0, _reacttabster.useFocusWithin)(), ref),
...props
}), {
elementType: 'span'
});
let unselectedIcon;
if (iconFillWidth < 1) {
unselectedIcon = _reactutilities.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 = _reactutilities.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 = _reactutilities.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 = _reactutilities.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'
});
}
return {
appearance,
step: context.step,
iconFillWidth,
value,
components: {
root: 'span',
selectedIcon: 'div',
unselectedIcon: 'div',
halfValueInput: 'input',
fullValueInput: 'input'
},
root,
selectedIcon,
unselectedIcon,
halfValueInput,
fullValueInput
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,301 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ratingItemClassNames: function() {
return ratingItemClassNames;
},
useRatingItemStyles_unstable: function() {
return useRatingItemStyles_unstable;
}
});
const _react = require("@griffel/react");
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__*/ (0, _react.__styles)({
root: {
qhf8xq: "f10pi13n",
Brovlpu: "ftqa4ok",
B486eqv: "f2hkw1w",
Bssx7fj: "f1b1k54r",
uh7if5: [
"f4ne723",
"fqqcjud"
],
clntm0: "fh7aioi",
Dlk2r6: [
"fqqcjud",
"f4ne723"
],
h6p2u: "f1ufm4qn",
I6qiy5: [
"f1qnwcb4",
"fgrk5zm"
],
yzno9d: "fi52z01",
By0wis0: [
"fgrk5zm",
"f1qnwcb4"
],
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){.f1ufm4qn[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1qnwcb4[data-fui-focus-within]:focus-within::after{border-right-color:Highlight;}.fgrk5zm[data-fui-focus-within]:focus-within::after{border-left-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fi52z01[data-fui-focus-within]:focus-within::after{border-bottom-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useInputBaseClassName = /*#__PURE__*/ (0, _react.__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__*/ (0, _react.__styles)({
lowerHalf: {
j35jbq: [
"ffenbu1",
"f1ktbn1t"
]
},
upperHalf: {
oyh7mz: [
"f1ktbn1t",
"ffenbu1"
]
}
}, {
d: [
".ffenbu1{right:50%;}",
".f1ktbn1t{left:50%;}"
]
});
const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__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__*/ (0, _react.__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",
B7iucu3: "f1205bnn",
Biw2w6l: "f1nocmko"
},
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){.f1205bnn{color:Canvas;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1nocmko{stroke:CanvasText;}}",
{
m: "(forced-colors: active)"
}
]
]
});
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 = (0, _react.mergeClasses)(ratingItemClassNames.root, styles.root, styles[size], state.root.className);
if (state.halfValueInput) {
state.halfValueInput.className = (0, _react.mergeClasses)(ratingItemClassNames.halfValueInput, inputBaseClassName, inputStyles.lowerHalf, state.halfValueInput.className);
}
if (state.fullValueInput) {
state.fullValueInput.className = (0, _react.mergeClasses)(ratingItemClassNames.fullValueInput, inputBaseClassName, state.halfValueInput && inputStyles.upperHalf, state.fullValueInput.className);
}
if (state.unselectedIcon) {
state.unselectedIcon.className = (0, _react.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 = (0, _react.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

View File

@@ -0,0 +1,147 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ratingItemClassNames: function() {
return ratingItemClassNames;
},
useRatingItemStyles_unstable: function() {
return useRatingItemStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _reacttabster = require("@fluentui/react-tabster");
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 = (0, _react.makeStyles)({
root: {
position: 'relative',
...(0, _reacttabster.createFocusOutlineStyle)({
style: {},
selector: 'focus-within'
})
},
small: {
fontSize: '12px',
width: '12px',
height: '12px'
},
medium: {
fontSize: '16px',
width: '16px',
height: '16px'
},
large: {
fontSize: '20px',
width: '20px',
height: '20px'
},
'extra-large': {
fontSize: '28px',
width: '28px',
height: '28px'
}
});
const useInputBaseClassName = (0, _react.makeResetStyles)({
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
boxSizing: 'border-box',
margin: 0,
opacity: 0,
cursor: 'pointer',
height: '100%'
});
const useInputStyles = (0, _react.makeStyles)({
lowerHalf: {
right: '50%'
},
upperHalf: {
left: '50%'
}
});
const useIndicatorBaseClassName = (0, _react.makeResetStyles)({
display: 'flex',
overflow: 'hidden',
color: _reacttheme.tokens.colorNeutralForeground1,
fill: 'currentColor',
pointerEvents: 'none',
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0
});
const useIndicatorStyles = (0, _react.makeStyles)({
lowerHalf: {
right: '50%',
'& > svg': {
flex: '0 0 auto'
}
},
upperHalf: {
left: '50%',
marginLeft: '-50%'
},
brand: {
color: _reacttheme.tokens.colorBrandForeground1
},
marigold: {
color: _reacttheme.tokens.colorPaletteMarigoldBorderActive
},
filled: {
color: _reacttheme.tokens.colorNeutralBackground6,
stroke: _reacttheme.tokens.colorTransparentStroke,
'@media (forced-colors: active)': {
color: 'Canvas',
stroke: 'CanvasText'
}
},
brandFilled: {
color: _reacttheme.tokens.colorBrandBackground2
},
marigoldFilled: {
color: _reacttheme.tokens.colorPaletteMarigoldBackground2
}
});
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 = (0, _react.mergeClasses)(ratingItemClassNames.root, styles.root, styles[size], state.root.className);
if (state.halfValueInput) {
state.halfValueInput.className = (0, _react.mergeClasses)(ratingItemClassNames.halfValueInput, inputBaseClassName, inputStyles.lowerHalf, state.halfValueInput.className);
}
if (state.fullValueInput) {
state.fullValueInput.className = (0, _react.mergeClasses)(ratingItemClassNames.fullValueInput, inputBaseClassName, state.halfValueInput && inputStyles.upperHalf, state.fullValueInput.className);
}
if (state.unselectedIcon) {
state.unselectedIcon.className = (0, _react.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 = (0, _react.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

View File

@@ -0,0 +1,35 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
RatingItemContext: function() {
return RatingItemContext;
},
RatingItemProvider: function() {
return RatingItemProvider;
},
useRatingItemContextValue_unstable: function() {
return useRatingItemContextValue_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reacticons = require("@fluentui/react-icons");
const RatingItemContext = /*#__PURE__*/ _react.createContext(undefined);
const ratingItemContextDefaultValue = {
color: 'neutral',
iconFilled: _reacticons.StarFilled,
iconOutline: _reacticons.StarRegular,
step: 1,
size: 'medium'
};
const RatingItemProvider = RatingItemContext.Provider;
const useRatingItemContextValue_unstable = ()=>_react.useContext(RatingItemContext) || ratingItemContextDefaultValue;

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/RatingItemContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { RatingItemContextValue } from '../RatingItem';\nimport { StarFilled, StarRegular } from '@fluentui/react-icons';\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: StarFilled,\n iconOutline: StarRegular,\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","StarFilled","StarRegular","RatingItemContext","createContext","undefined","ratingItemContextDefaultValue","color","iconFilled","iconOutline","step","size","RatingItemProvider","Provider","useRatingItemContextValue_unstable","useContext"],"mappings":"AAAA;;;;;;;;;;;;qBASaG;;;sBAQAS;;;sCAKAE;;;;;iEApBU,QAAQ;4BAES,wBAAwB;AAKzD,MAAMX,oBAAAA,WAAAA,GAAoBH,OAAMI,aAAa,CAAqCC,WAAW;AACpG,MAAMC,gCAAwD;IAC5DC,OAAO;IACPC,YAAYP,sBAAAA;IACZQ,aAAaP,uBAAAA;IACbQ,MAAM;IACNC,MAAM;AACR;AACO,MAAMC,qBAAqBT,kBAAkBU,QAAQ,CAAC;AAKtD,MAAMC,qCAAqC,IAChDd,OAAMe,UAAU,CAACZ,sBAAsBG,8BAA8B"}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
RatingItemContext: function() {
return _RatingItemContext.RatingItemContext;
},
RatingItemProvider: function() {
return _RatingItemContext.RatingItemProvider;
},
useRatingItemContextValue_unstable: function() {
return _RatingItemContext.useRatingItemContextValue_unstable;
}
});
const _RatingItemContext = require("./RatingItemContext");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export { RatingItemContext, RatingItemProvider, useRatingItemContextValue_unstable } from './RatingItemContext';\n"],"names":["RatingItemContext","RatingItemProvider","useRatingItemContextValue_unstable"],"mappings":";;;;;;;;;;;;eAASA,oCAAiB;;;eAAEC,qCAAkB;;;eAAEC,qDAAkC;;;mCAAQ,sBAAsB"}

View File

@@ -0,0 +1,79 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Rating: function() {
return _Rating.Rating;
},
RatingDisplay: function() {
return _RatingDisplay.RatingDisplay;
},
RatingItem: function() {
return _RatingItem.RatingItem;
},
RatingItemProvider: function() {
return _index.RatingItemProvider;
},
ratingClassNames: function() {
return _Rating.ratingClassNames;
},
ratingDisplayClassNames: function() {
return _RatingDisplay.ratingDisplayClassNames;
},
ratingItemClassNames: function() {
return _RatingItem.ratingItemClassNames;
},
renderRatingDisplay_unstable: function() {
return _RatingDisplay.renderRatingDisplay_unstable;
},
renderRatingItem_unstable: function() {
return _RatingItem.renderRatingItem_unstable;
},
renderRating_unstable: function() {
return _Rating.renderRating_unstable;
},
useRatingBase_unstable: function() {
return _Rating.useRatingBase_unstable;
},
useRatingContextValues: function() {
return _Rating.useRatingContextValues;
},
useRatingDisplayBase_unstable: function() {
return _RatingDisplay.useRatingDisplayBase_unstable;
},
useRatingDisplayContextValues: function() {
return _RatingDisplay.useRatingDisplayContextValues;
},
useRatingDisplayStyles_unstable: function() {
return _RatingDisplay.useRatingDisplayStyles_unstable;
},
useRatingDisplay_unstable: function() {
return _RatingDisplay.useRatingDisplay_unstable;
},
useRatingItemContextValue_unstable: function() {
return _index.useRatingItemContextValue_unstable;
},
useRatingItemStyles_unstable: function() {
return _RatingItem.useRatingItemStyles_unstable;
},
useRatingItem_unstable: function() {
return _RatingItem.useRatingItem_unstable;
},
useRatingStyles_unstable: function() {
return _Rating.useRatingStyles_unstable;
},
useRating_unstable: function() {
return _Rating.useRating_unstable;
}
});
const _Rating = require("./Rating");
const _RatingItem = require("./RatingItem");
const _index = require("./contexts/index");
const _RatingDisplay = require("./RatingDisplay");

View File

@@ -0,0 +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} 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","RatingItemProvider","useRatingItemContextValue_unstable","RatingDisplay","ratingDisplayClassNames","renderRatingDisplay_unstable","useRatingDisplayStyles_unstable","useRatingDisplay_unstable","useRatingDisplayContextValues","useRatingDisplayBase_unstable"],"mappings":";;;;;;;;;;;IACEA,MAAM;;;iBAiCO;eAAbc;;IAfAP;qCAAU;;;eAaHK,yBAAkB;;;eA9BzBX,wBAAgB;;;eAiChBc,sCAAuB;;;eAfvBP,gCAAoB;;;eAgBpBQ,2CAA4B;;;eAf5BP,qCAAyB;;;eAlBzBP,6BAAqB;;;eAIrBI,8BAAsB;;;eADtBD,8BAAsB;;;eAkCtBe,4CAA6B;;;eAD7BD,4CAA6B;;;eAF7BF,8CAA+B;;;eAC/BC,wCAAyB;;;eANEL,yCAAkC;;;eAV7DH,wCAA4B;;;eAC5BC,kCAAsB;;;eAnBtBR,gCAAwB;;;eACxBC,0BAAkB;;;wBAGb,WAAW;4BAgBX,eAAe;uBAQiD,mBAAmB;+BASnF,kBAAkB"}