@fluentui/react-rating 0.0.0-nightly-20240318-0408.1

package/lib/components/Rating/useRating.js

@@ -0,0 +1,82 @@
+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' } = 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,
+        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;
+};

package/lib/components/Rating/useRating.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useRating.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  isHTMLElement,\n  mergeCallbacks,\n  slot,\n  useControllableState,\n  useId,\n} from '@fluentui/react-utilities';\nimport type { RatingProps, RatingState } from './Rating.types';\nimport { RatingItem } from '../../RatingItem';\nimport { StarFilled, StarRegular } from '@fluentui/react-icons';\n\n/**\n * Create the state required to render Rating.\n *\n * The returned state can be modified with hooks such as useRatingStyles_unstable,\n * before being passed to renderRating_unstable.\n *\n * @param props - props from this instance of Rating\n * @param ref - reference to root HTMLElement of Rating\n */\nexport const useRating_unstable = (props: RatingProps, ref: React.Ref<HTMLDivElement>): RatingState => {\n  const generatedName = useId('rating-');\n  const {\n    color = 'neutral',\n    iconFilled = StarFilled,\n    iconOutline = StarRegular,\n    max = 5,\n    name = generatedName,\n    onChange,\n    step = 1,\n    size = 'extra-large',\n  } = props;\n\n  const [value, setValue] = useControllableState({\n    state: props.value,\n    defaultState: props.defaultValue,\n    initialState: 0,\n  });\n\n  const isRatingRadioItem = (target: EventTarget): target is HTMLInputElement =>\n    isHTMLElement(target, { constructorName: 'HTMLInputElement' }) && target.type === 'radio' && target.name === name;\n\n  const [hoveredValue, setHoveredValue] = React.useState<number | undefined>(undefined);\n\n  // Generate the child RatingItems and memoize them to prevent unnecessary re-rendering\n  const rootChildren = React.useMemo(() => {\n    return Array.from(Array(max), (_, i) => <RatingItem value={i + 1} key={i + 1} />);\n  }, [max]);\n\n  const state: RatingState = {\n    color,\n    iconFilled,\n    iconOutline,\n    name,\n    step,\n    size,\n    value,\n    hoveredValue,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps(\n        'div',\n        {\n          ref,\n          children: rootChildren,\n          role: 'radiogroup',\n          ...props,\n        },\n        ['onChange'],\n      ),\n      { elementType: 'div' },\n    ),\n  };\n\n  state.root.onChange = ev => {\n    if (isRatingRadioItem(ev.target)) {\n      const newValue = parseFloat(ev.target.value);\n      if (!isNaN(newValue)) {\n        setValue(newValue);\n        onChange?.(ev, { type: 'change', event: ev, value: newValue });\n      }\n    }\n  };\n  state.root.onMouseOver = mergeCallbacks(props.onMouseOver, ev => {\n    if (isRatingRadioItem(ev.target)) {\n      const newValue = parseFloat(ev.target.value);\n      if (!isNaN(newValue)) {\n        setHoveredValue(newValue);\n      }\n    }\n  });\n  state.root.onMouseLeave = mergeCallbacks(props.onMouseLeave, ev => {\n    setHoveredValue(undefined);\n  });\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","isHTMLElement","mergeCallbacks","slot","useControllableState","useId","RatingItem","StarFilled","StarRegular","useRating_unstable","props","ref","generatedName","color","iconFilled","iconOutline","max","name","onChange","step","size","value","setValue","state","defaultState","defaultValue","initialState","isRatingRadioItem","target","constructorName","type","hoveredValue","setHoveredValue","useState","undefined","rootChildren","useMemo","Array","from","_","i","key","components","root","always","children","role","elementType","ev","newValue","parseFloat","isNaN","event","onMouseOver","onMouseLeave"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,aAAa,EACbC,cAAc,EACdC,IAAI,EACJC,oBAAoB,EACpBC,KAAK,QACA,4BAA4B;AAEnC,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,UAAU,EAAEC,WAAW,QAAQ,wBAAwB;AAEhE;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,MAAMC,gBAAgBP,MAAM;IAC5B,MAAM,EACJQ,QAAQ,SAAS,EACjBC,aAAaP,UAAU,EACvBQ,cAAcP,WAAW,EACzBQ,MAAM,CAAC,EACPC,OAAOL,aAAa,EACpBM,QAAQ,EACRC,OAAO,CAAC,EACRC,OAAO,aAAa,EACrB,GAAGV;IAEJ,MAAM,CAACW,OAAOC,SAAS,GAAGlB,qBAAqB;QAC7CmB,OAAOb,MAAMW,KAAK;QAClBG,cAAcd,MAAMe,YAAY;QAChCC,cAAc;IAChB;IAEA,MAAMC,oBAAoB,CAACC,SACzB3B,cAAc2B,QAAQ;YAAEC,iBAAiB;QAAmB,MAAMD,OAAOE,IAAI,KAAK,WAAWF,OAAOX,IAAI,KAAKA;IAE/G,MAAM,CAACc,cAAcC,gBAAgB,GAAGjC,MAAMkC,QAAQ,CAAqBC;IAE3E,sFAAsF;IACtF,MAAMC,eAAepC,MAAMqC,OAAO,CAAC;QACjC,OAAOC,MAAMC,IAAI,CAACD,MAAMrB,MAAM,CAACuB,GAAGC,kBAAM,oBAAClC;gBAAWe,OAAOmB,IAAI;gBAAGC,KAAKD,IAAI;;IAC7E,GAAG;QAACxB;KAAI;IAER,MAAMO,QAAqB;QACzBV;QACAC;QACAC;QACAE;QACAE;QACAC;QACAC;QACAU;QACAW,YAAY;YACVC,MAAM;QACR;QACAA,MAAMxC,KAAKyC,MAAM,CACf5C,yBACE,OACA;YACEW;YACAkC,UAAUV;YACVW,MAAM;YACN,GAAGpC,KAAK;QACV,GACA;YAAC;SAAW,GAEd;YAAEqC,aAAa;QAAM;IAEzB;IAEAxB,MAAMoB,IAAI,CAACzB,QAAQ,GAAG8B,CAAAA;QACpB,IAAIrB,kBAAkBqB,GAAGpB,MAAM,GAAG;YAChC,MAAMqB,WAAWC,WAAWF,GAAGpB,MAAM,CAACP,KAAK;YAC3C,IAAI,CAAC8B,MAAMF,WAAW;gBACpB3B,SAAS2B;gBACT/B,qBAAAA,+BAAAA,SAAW8B,IAAI;oBAAElB,MAAM;oBAAUsB,OAAOJ;oBAAI3B,OAAO4B;gBAAS;YAC9D;QACF;IACF;IACA1B,MAAMoB,IAAI,CAACU,WAAW,GAAGnD,eAAeQ,MAAM2C,WAAW,EAAEL,CAAAA;QACzD,IAAIrB,kBAAkBqB,GAAGpB,MAAM,GAAG;YAChC,MAAMqB,WAAWC,WAAWF,GAAGpB,MAAM,CAACP,KAAK;YAC3C,IAAI,CAAC8B,MAAMF,WAAW;gBACpBjB,gBAAgBiB;YAClB;QACF;IACF;IACA1B,MAAMoB,IAAI,CAACW,YAAY,GAAGpD,eAAeQ,MAAM4C,YAAY,EAAEN,CAAAA;QAC3DhB,gBAAgBE;IAClB;IAEA,OAAOX;AACT,EAAE"}

package/lib/components/Rating/useRatingContextValues.js

@@ -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
+    };
+};

package/lib/components/Rating/useRatingContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["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"],"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"}

package/lib/components/Rating/useRatingStyles.styles.js

@@ -0,0 +1,17 @@
+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 => {
+  const rootClassName = useRootClassName();
+  state.root.className = mergeClasses(ratingClassNames.root, rootClassName, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useRatingStyles.styles.js.map

package/lib/components/Rating/useRatingStyles.styles.js.map

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

package/lib/components/RatingDisplay/RatingDisplay.js

@@ -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';

package/lib/components/RatingDisplay/RatingDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["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"],"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"}

package/lib/components/RatingDisplay/RatingDisplay.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/lib/components/RatingDisplay/RatingDisplay.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/RatingDisplay/index.js

@@ -0,0 +1,6 @@
+export * from './RatingDisplay';
+export * from './RatingDisplay.types';
+export * from './renderRatingDisplay';
+export * from './useRatingDisplay';
+export * from './useRatingDisplayStyles.styles';
+export * from './useRatingDisplayContextValues';

package/lib/components/RatingDisplay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './RatingDisplay';\nexport * from './RatingDisplay.types';\nexport * from './renderRatingDisplay';\nexport * from './useRatingDisplay';\nexport * from './useRatingDisplayStyles.styles';\nexport * from './useRatingDisplayContextValues';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,wBAAwB;AACtC,cAAc,wBAAwB;AACtC,cAAc,qBAAqB;AACnC,cAAc,kCAAkC;AAChD,cAAc,kCAAkC"}

package/lib/components/RatingDisplay/renderRatingDisplay.js

@@ -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, {})
+            ]
+        })
+    });
+};

package/lib/components/RatingDisplay/renderRatingDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["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"],"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"}

package/lib/components/RatingDisplay/useRatingDisplay.js

@@ -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;
+};

package/lib/components/RatingDisplay/useRatingDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["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"],"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"}

package/lib/components/RatingDisplay/useRatingDisplayContextValues.js

@@ -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
+    };
+};

package/lib/components/RatingDisplay/useRatingDisplayContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["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"],"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"}

package/lib/components/RatingDisplay/useRatingDisplayStyles.styles.js

@@ -0,0 +1,50 @@
+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("r1okbz36", "rzju99d", [".r1okbz36{color:var(--colorNeutralForeground1);margin-left:var(--spacingHorizontalXXS);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}", ".rzju99d{color:var(--colorNeutralForeground1);margin-right:var(--spacingHorizontalXXS);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"
+  },
+  extraLarge: {
+    Be2twd7: "fod5ikn",
+    Bg96gwp: "faaz57k"
+  },
+  strong: {
+    Bhrd7zp: "fl43uef"
+  },
+  divider: {
+    Ftih45: "f169p45e"
+  }
+}, {
+  d: [".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f169p45e::before{content:\"\xB7 \";}"]
+});
+/**
+ * Apply styling to the RatingDisplay slots based on the state
+ */
+export const useRatingDisplayStyles_unstable = state => {
+  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;
+};
+//# sourceMappingURL=useRatingDisplayStyles.styles.js.map

package/lib/components/RatingDisplay/useRatingDisplayStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","typographyStyles","ratingDisplayClassNames","root","valueText","countText","useRootClassName","useLabelClassName","useLabelStyles","large","Be2twd7","Bg96gwp","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.spacingHorizontalXXS,\n    ...typographyStyles.caption1\n});\nconst useLabelStyles = makeStyles({\n    large: {\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300\n    },\n    extraLarge: {\n        fontSize: tokens.fontSizeBase400,\n        lineHeight: tokens.lineHeightBase400\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    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,0eAIzB,CAAC;AACF,MAAMW,cAAc,gBAAGV,QAAA;EAAAW,KAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,UAAA;IAAAF,OAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAiBtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAM;IAAEC;EAAK,CAAC,GAAGD,KAAK;EACtB,MAAME,aAAa,GAAGf,gBAAgB,CAAC,CAAC;EACxCa,KAAK,CAAChB,IAAI,CAACmB,SAAS,GAAGvB,YAAY,CAACG,uBAAuB,CAACC,IAAI,EAAEkB,aAAa,EAAEF,KAAK,CAAChB,IAAI,CAACmB,SAAS,CAAC;EACtG,MAAMC,cAAc,GAAGhB,iBAAiB,CAAC,CAAC;EAC1C,MAAMiB,WAAW,GAAGhB,cAAc,CAAC,CAAC;EACpC,IAAIW,KAAK,CAACf,SAAS,EAAE;IACjBe,KAAK,CAACf,SAAS,CAACkB,SAAS,GAAGvB,YAAY,CAACG,uBAAuB,CAACE,SAAS,EAAEmB,cAAc,EAAEC,WAAW,CAACX,MAAM,EAAEO,IAAI,KAAK,OAAO,IAAII,WAAW,CAACf,KAAK,EAAEW,IAAI,KAAK,aAAa,IAAII,WAAW,CAACZ,UAAU,EAAEO,KAAK,CAACf,SAAS,CAACkB,SAAS,CAAC;EACvO;EACA,IAAIH,KAAK,CAACd,SAAS,EAAE;IACjBc,KAAK,CAACd,SAAS,CAACiB,SAAS,GAAGvB,YAAY,CAACG,uBAAuB,CAACG,SAAS,EAAEkB,cAAc,EAAEH,IAAI,KAAK,OAAO,IAAII,WAAW,CAACf,KAAK,EAAEW,IAAI,KAAK,aAAa,IAAII,WAAW,CAACZ,UAAU,EAAEO,KAAK,CAACf,SAAS,IAAIoB,WAAW,CAACT,OAAO,EAAEI,KAAK,CAACd,SAAS,CAACiB,SAAS,CAAC;EAC3P;EACA,OAAOH,KAAK;AAChB,CAAC"}

package/lib/components/RatingItem/RatingItem.js

@@ -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';

package/lib/components/RatingItem/RatingItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["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"],"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"}

package/lib/components/RatingItem/RatingItem.types.js

@@ -0,0 +1 @@
+export { };

package/lib/components/RatingItem/RatingItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["RatingItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { RatingState } from '../Rating/Rating.types';\nimport { RatingDisplayState } from '../RatingDisplay/RatingDisplay.types';\n\nexport type RatingItemSlots = {\n  /**\n   * The root slot of the RatingItem.\n   * Default html element is span\n   */\n  root: NonNullable<Slot<'span'>>;\n  /**\n   * Icon displayed when the rating value is greater than or equal to the item's value.\n   */\n  selectedIcon?: NonNullable<Slot<'div'>>;\n  /**\n   * Icon displayed when the rating value is less than the item's value.\n   */\n  unselectedIcon?: NonNullable<Slot<'div'>>;\n  /**\n   * Radio input slot used for half star precision\n   */\n  halfValueInput?: NonNullable<Slot<'input'>>;\n  /**\n   * Radio input slot used for full star precision\n   */\n  fullValueInput?: NonNullable<Slot<'input'>>;\n};\n\n/**\n * RatingItem Props\n */\nexport type RatingItemProps = ComponentProps<Partial<RatingItemSlots>> & {\n  /**\n   * The positive whole number value that is displayed by this RatingItem\n   */\n  value?: number;\n};\n\n/**\n * State used in rendering RatingItem\n */\nexport type RatingItemState = ComponentState<RatingItemSlots> &\n  Required<Pick<RatingItemProps, 'value'>> &\n  Pick<RatingState, 'color' | 'step' | 'size'> & {\n    iconFillWidth: number;\n    appearance: 'outline' | 'filled';\n  };\n\nexport type RatingItemContextValue = Partial<Pick<RatingState, 'name' | 'hoveredValue' | 'value'>> &\n  Pick<RatingState, 'color' | 'iconFilled' | 'iconOutline' | 'itemLabel' | 'step' | 'size'> &\n  Partial<Pick<RatingDisplayState, 'compact'>> & {\n    interactive?: boolean;\n  };\n"],"names":[],"mappings":"AAgDA,WAII"}

package/lib/components/RatingItem/index.js

@@ -0,0 +1,5 @@
+export * from './RatingItem';
+export * from './RatingItem.types';
+export * from './renderRatingItem';
+export * from './useRatingItem';
+export * from './useRatingItemStyles.styles';

package/lib/components/RatingItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './RatingItem';\nexport * from './RatingItem.types';\nexport * from './renderRatingItem';\nexport * from './useRatingItem';\nexport * from './useRatingItemStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,qBAAqB;AACnC,cAAc,kBAAkB;AAChC,cAAc,+BAA+B"}

package/lib/components/RatingItem/renderRatingItem.js

@@ -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, {})
+        ]
+    });
+};

package/lib/components/RatingItem/renderRatingItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["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"],"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"}

package/lib/components/RatingItem/useRatingItem.js

@@ -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;
+};

package/lib/components/RatingItem/useRatingItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useRatingItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport type { RatingItemProps, RatingItemState } from './RatingItem.types';\nimport { useRatingItemContextValue_unstable } from '../../contexts/RatingItemContext';\n\nconst defaultItemLabel = (num: number) => num + '';\n\n/**\n * Create the state required to render RatingItem.\n *\n * The returned state can be modified with hooks such as useRatingItemStyles_unstable,\n * before being passed to renderRatingItem_unstable.\n *\n * @param props - props from this instance of RatingItem\n * @param ref - reference to root HTMLElement of RatingItem\n */\nexport const useRatingItem_unstable = (props: RatingItemProps, ref: React.Ref<HTMLSpanElement>): RatingItemState => {\n  const context = useRatingItemContextValue_unstable();\n  const { value = 0 } = props;\n  const { itemLabel = defaultItemLabel, iconFilled: IconFilled, iconOutline: IconOutline } = context;\n\n  const ratingValue = Math.round((context.value || 0) * 2) / 2; // round to the nearest 0.5\n\n  const displayedRatingValue = context.hoveredValue ?? ratingValue;\n\n  const appearance = context.interactive ? 'outline' : 'filled';\n\n  let iconFillWidth;\n  if (context.compact || displayedRatingValue >= value) {\n    iconFillWidth = 1;\n  } else if (displayedRatingValue >= value - 0.5) {\n    iconFillWidth = 0.5;\n  } else {\n    iconFillWidth = 0;\n  }\n\n  const root = slot.always(\n    getIntrinsicElementProps('span', {\n      ref: useMergedRefs(useFocusWithin<HTMLSpanElement>(), ref),\n      ...props,\n    }),\n    { elementType: 'span' },\n  );\n\n  let unselectedIcon;\n  if (iconFillWidth < 1) {\n    unselectedIcon = slot.always(props.unselectedIcon, {\n      defaultProps: {\n        children: appearance === 'filled' ? <IconFilled /> : <IconOutline />,\n        'aria-hidden': true,\n      },\n      elementType: 'div',\n    });\n  }\n\n  let selectedIcon;\n  if (iconFillWidth > 0) {\n    selectedIcon = slot.always(props.selectedIcon, {\n      defaultProps: {\n        children: <IconFilled />,\n        'aria-hidden': true,\n      },\n      elementType: 'div',\n    });\n  }\n\n  let halfValueInput;\n  if (context.interactive && context.step === 0.5) {\n    halfValueInput = slot.always(props.halfValueInput, {\n      defaultProps: {\n        type: 'radio',\n        name: context.name,\n        value: value - 0.5,\n        checked: ratingValue === value - 0.5,\n        'aria-label': itemLabel(value - 0.5),\n        onChange: () => {\n          // This empty onChange handler silences an incorrect React warning about not using onChange for a controlled input.\n          // The parent Rating component has the real onChange handler to listen to change events from this input.\n        },\n      },\n      elementType: 'input',\n    });\n  }\n\n  let fullValueInput;\n  if (context.interactive) {\n    fullValueInput = slot.always(props.fullValueInput, {\n      defaultProps: {\n        type: 'radio',\n        name: context.name,\n        value,\n        checked: ratingValue === value,\n        'aria-label': itemLabel(value),\n        onChange: () => {\n          // This empty onChange handler silences an incorrect React warning about not using onChange for a controlled input.\n          // The parent Rating component has the real onChange handler to listen to change events from this input.\n        },\n      },\n\n      elementType: 'input',\n    });\n  }\n\n  const state: RatingItemState = {\n    appearance,\n    color: context.color,\n    step: context.step,\n    size: context.size,\n    iconFillWidth,\n    value,\n    components: {\n      root: 'span',\n      selectedIcon: 'div',\n      unselectedIcon: 'div',\n      halfValueInput: 'input',\n      fullValueInput: 'input',\n    },\n    root,\n    selectedIcon,\n    unselectedIcon,\n    halfValueInput,\n    fullValueInput,\n  };\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMergedRefs","useFocusWithin","useRatingItemContextValue_unstable","defaultItemLabel","num","useRatingItem_unstable","props","ref","context","value","itemLabel","iconFilled","IconFilled","iconOutline","IconOutline","ratingValue","Math","round","displayedRatingValue","hoveredValue","appearance","interactive","iconFillWidth","compact","root","always","elementType","unselectedIcon","defaultProps","children","selectedIcon","halfValueInput","step","type","name","checked","onChange","fullValueInput","state","color","size","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAC1F,SAASC,cAAc,QAAQ,0BAA0B;AAEzD,SAASC,kCAAkC,QAAQ,mCAAmC;AAEtF,MAAMC,mBAAmB,CAACC,MAAgBA,MAAM;AAEhD;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAMC,UAAUN;IAChB,MAAM,EAAEO,QAAQ,CAAC,EAAE,GAAGH;IACtB,MAAM,EAAEI,YAAYP,gBAAgB,EAAEQ,YAAYC,UAAU,EAAEC,aAAaC,WAAW,EAAE,GAAGN;IAE3F,MAAMO,cAAcC,KAAKC,KAAK,CAAC,AAACT,CAAAA,QAAQC,KAAK,IAAI,CAAA,IAAK,KAAK,GAAG,2BAA2B;QAE5DD;IAA7B,MAAMU,uBAAuBV,CAAAA,wBAAAA,QAAQW,YAAY,cAApBX,mCAAAA,wBAAwBO;IAErD,MAAMK,aAAaZ,QAAQa,WAAW,GAAG,YAAY;IAErD,IAAIC;IACJ,IAAId,QAAQe,OAAO,IAAIL,wBAAwBT,OAAO;QACpDa,gBAAgB;IAClB,OAAO,IAAIJ,wBAAwBT,QAAQ,KAAK;QAC9Ca,gBAAgB;IAClB,OAAO;QACLA,gBAAgB;IAClB;IAEA,MAAME,OAAOzB,KAAK0B,MAAM,CACtB3B,yBAAyB,QAAQ;QAC/BS,KAAKP,cAAcC,kBAAmCM;QACtD,GAAGD,KAAK;IACV,IACA;QAAEoB,aAAa;IAAO;IAGxB,IAAIC;IACJ,IAAIL,gBAAgB,GAAG;QACrBK,iBAAiB5B,KAAK0B,MAAM,CAACnB,MAAMqB,cAAc,EAAE;YACjDC,cAAc;gBACZC,UAAUT,eAAe,yBAAW,oBAACR,kCAAgB,oBAACE;gBACtD,eAAe;YACjB;YACAY,aAAa;QACf;IACF;IAEA,IAAII;IACJ,IAAIR,gBAAgB,GAAG;QACrBQ,eAAe/B,KAAK0B,MAAM,CAACnB,MAAMwB,YAAY,EAAE;YAC7CF,cAAc;gBACZC,wBAAU,oBAACjB;gBACX,eAAe;YACjB;YACAc,aAAa;QACf;IACF;IAEA,IAAIK;IACJ,IAAIvB,QAAQa,WAAW,IAAIb,QAAQwB,IAAI,KAAK,KAAK;QAC/CD,iBAAiBhC,KAAK0B,MAAM,CAACnB,MAAMyB,cAAc,EAAE;YACjDH,cAAc;gBACZK,MAAM;gBACNC,MAAM1B,QAAQ0B,IAAI;gBAClBzB,OAAOA,QAAQ;gBACf0B,SAASpB,gBAAgBN,QAAQ;gBACjC,cAAcC,UAAUD,QAAQ;gBAChC2B,UAAU;gBACR,mHAAmH;gBACnH,wGAAwG;gBAC1G;YACF;YACAV,aAAa;QACf;IACF;IAEA,IAAIW;IACJ,IAAI7B,QAAQa,WAAW,EAAE;QACvBgB,iBAAiBtC,KAAK0B,MAAM,CAACnB,MAAM+B,cAAc,EAAE;YACjDT,cAAc;gBACZK,MAAM;gBACNC,MAAM1B,QAAQ0B,IAAI;gBAClBzB;gBACA0B,SAASpB,gBAAgBN;gBACzB,cAAcC,UAAUD;gBACxB2B,UAAU;gBACR,mHAAmH;gBACnH,wGAAwG;gBAC1G;YACF;YAEAV,aAAa;QACf;IACF;IAEA,MAAMY,QAAyB;QAC7BlB;QACAmB,OAAO/B,QAAQ+B,KAAK;QACpBP,MAAMxB,QAAQwB,IAAI;QAClBQ,MAAMhC,QAAQgC,IAAI;QAClBlB;QACAb;QACAgC,YAAY;YACVjB,MAAM;YACNM,cAAc;YACdH,gBAAgB;YAChBI,gBAAgB;YAChBM,gBAAgB;QAClB;QACAb;QACAM;QACAH;QACAI;QACAM;IACF;IAEA,OAAOC;AACT,EAAE"}