@fluentui/react-migration-v8-v9 9.4.44 → 9.5.0

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/react-migration-v8-v9
 
-This log was last generated on Tue, 09 Jan 2024 10:19:07 GMT and should not be manually modified.
+This log was last generated on Thu, 11 Jan 2024 09:02:15 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v9.5.0)
+
+Thu, 11 Jan 2024 09:02:15 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v8-v9_v9.4.44..@fluentui/react-migration-v8-v9_v9.5.0)
+
+### Minor changes
+
+- feat: implement CheckboxShim component for Checkbox migration ([PR #29968](https://github.com/microsoft/fluentui/pull/29968) by liminliu@microsoft.com)
+- Bump @fluentui/react-components to v9.44.3 ([PR #30250](https://github.com/microsoft/fluentui/pull/30250) by beachball)
+
 ## [9.4.44](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v9.4.44)
 
-Tue, 09 Jan 2024 10:19:07 GMT 
+Tue, 09 Jan 2024 10:21:34 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v8-v9_v9.4.43..@fluentui/react-migration-v8-v9_v9.4.44)
 
 ### Patches

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import { BrandVariants } from '@fluentui/react-components';
 import type { ButtonProps } from '@fluentui/react-components';
 import type { IBaseButtonProps } from '@fluentui/react';
 import type { IButtonProps } from '@fluentui/react';
+import { ICheckboxProps } from '@fluentui/react';
 import type { IContextualMenuItem } from '@fluentui/react';
 import type { IContextualMenuProps } from '@fluentui/react';
 import type { IPalette } from '@fluentui/react';
@@ -31,6 +32,8 @@ export declare const brandWeb: BrandVariants;
 
 export declare const ButtonShim: React_2.ForwardRefExoticComponent<IBaseButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
 
+export declare const CheckboxShim: React_2.ForwardRefExoticComponent<Pick<ICheckboxProps, "label" | "title" | "className" | "key" | "disabled" | "name" | "defaultChecked" | "id" | "onChange" | "componentRef" | "styles" | "theme" | "checked" | "ariaLabel" | "required" | "ariaDescribedBy" | "ariaLabelledBy" | "ariaPositionInSet" | "ariaSetSize" | "boxSide" | "checkmarkIconProps" | "defaultIndeterminate" | "indeterminate" | "inputProps" | "onRenderLabel"> & React_2.RefAttributes<HTMLInputElement>>;
+
 /**
  * Possible color variant values
  */

package/lib/components/Checkbox/Checkbox.styles.js

@@ -0,0 +1,9 @@
+import { __styles } from '@fluentui/react-components';
+export const useCheckboxStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw"
+  }
+}, {
+  d: [".f22iagw{display:flex;}"]
+});
+//# sourceMappingURL=Checkbox.styles.js.map

package/lib/components/Checkbox/Checkbox.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","useCheckboxStyles","root","mc9l5x","d"],"sources":["Checkbox.styles.js"],"sourcesContent":["import { makeStyles } from '@fluentui/react-components';\nexport const useCheckboxStyles = makeStyles({\n    root: {\n        display: 'flex'\n    }\n});\n"],"mappings":"AAAA,SAAAA,QAAA,QAA2B,4BAA4B;AACvD,OAAO,MAAMC,iBAAiB,gBAAGD,QAAA;EAAAE,IAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIhC,CAAC"}

package/lib/components/Checkbox/CheckboxShim.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { classNamesFunction } from '@fluentui/react';
+import { Checkbox, mergeClasses } from '@fluentui/react-components';
+import { useCheckboxProps } from './shimCheckboxProps';
+import { useCheckboxStyles } from './Checkbox.styles';
+const getClassNames = classNamesFunction({
+    useStaticStyles: false
+});
+export const CheckboxShim = /*#__PURE__*/ React.forwardRef((props, _ref)=>{
+    const { className, styles: stylesV8, onRenderLabel, label, componentRef } = props;
+    const shimProps = useCheckboxProps(props);
+    const styles = getClassNames(stylesV8);
+    const stylesV9 = useCheckboxStyles();
+    const checkboxRef = _ref || /*#__PURE__*/ React.createRef();
+    React.useImperativeHandle(componentRef, ()=>{
+        var _checkboxRef_current, _checkboxRef_current1;
+        var _checkboxRef_current_checked, _checkboxRef_current_indeterminate;
+        return {
+            checked: (_checkboxRef_current_checked = (_checkboxRef_current = checkboxRef.current) === null || _checkboxRef_current === void 0 ? void 0 : _checkboxRef_current.checked) !== null && _checkboxRef_current_checked !== void 0 ? _checkboxRef_current_checked : false,
+            indeterminate: (_checkboxRef_current_indeterminate = (_checkboxRef_current1 = checkboxRef.current) === null || _checkboxRef_current1 === void 0 ? void 0 : _checkboxRef_current1.indeterminate) !== null && _checkboxRef_current_indeterminate !== void 0 ? _checkboxRef_current_indeterminate : false,
+            focus: ()=>{
+                var _checkboxRef_current;
+                return (_checkboxRef_current = checkboxRef.current) === null || _checkboxRef_current === void 0 ? void 0 : _checkboxRef_current.focus();
+            }
+        };
+    });
+    const defaultLabelRenderer = (checkboxProps)=>{
+        if (!checkboxProps) {
+            return null;
+        }
+        const { label: defualtLabel, title } = checkboxProps;
+        return defualtLabel ? /*#__PURE__*/ React.createElement("span", {
+            title: title,
+            className: styles.text
+        }, defualtLabel) : null;
+    };
+    if (label || onRenderLabel) {
+        shimProps.label = {
+            className: mergeClasses('ms-Checkbox-text', styles.label, styles.text),
+            children: onRenderLabel ? onRenderLabel(props, defaultLabelRenderer) : label
+        };
+    }
+    return /*#__PURE__*/ React.createElement(Checkbox, {
+        ...shimProps,
+        ref: checkboxRef,
+        className: mergeClasses(stylesV9.root, 'ms-Checkbox', className, styles.root),
+        indicator: {
+            className: mergeClasses('ms-Checkbox-checkbox', styles.checkbox)
+        }
+    });
+});
+CheckboxShim.displayName = 'CheckboxShim';

package/lib/components/Checkbox/CheckboxShim.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CheckboxShim.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { classNamesFunction, ICheckboxProps, ICheckboxStyles, ICheckboxStyleProps } from '@fluentui/react';\nimport { Checkbox, mergeClasses } from '@fluentui/react-components';\nimport { useCheckboxProps } from './shimCheckboxProps';\nimport { useCheckboxStyles } from './Checkbox.styles';\n\nconst getClassNames = classNamesFunction<ICheckboxStyleProps, ICheckboxStyles>({\n  useStaticStyles: false,\n});\n\nexport const CheckboxShim = React.forwardRef((props: ICheckboxProps, _ref: React.ForwardedRef<HTMLInputElement>) => {\n  const { className, styles: stylesV8, onRenderLabel, label, componentRef } = props;\n  const shimProps = useCheckboxProps(props);\n  const styles = getClassNames(stylesV8);\n  const stylesV9 = useCheckboxStyles();\n  const checkboxRef = (_ref as React.RefObject<HTMLInputElement>) || React.createRef<HTMLInputElement>();\n\n  React.useImperativeHandle(componentRef, () => ({\n    checked: checkboxRef.current?.checked ?? false,\n    indeterminate: checkboxRef.current?.indeterminate ?? false,\n    focus: () => checkboxRef.current?.focus(),\n  }));\n\n  const defaultLabelRenderer = (checkboxProps?: ICheckboxProps): JSX.Element | null => {\n    if (!checkboxProps) {\n      return null;\n    }\n    const { label: defualtLabel, title } = checkboxProps;\n    return defualtLabel ? (\n      <span title={title} className={styles.text}>\n        {defualtLabel}\n      </span>\n    ) : null;\n  };\n\n  if (label || onRenderLabel) {\n    shimProps.label = {\n      className: mergeClasses('ms-Checkbox-text', styles.label, styles.text),\n      children: onRenderLabel ? onRenderLabel(props, defaultLabelRenderer) : label,\n    };\n  }\n\n  return (\n    <Checkbox\n      {...shimProps}\n      ref={checkboxRef}\n      className={mergeClasses(stylesV9.root, 'ms-Checkbox', className, styles.root)}\n      indicator={{ className: mergeClasses('ms-Checkbox-checkbox', styles.checkbox) }}\n    />\n  );\n});\n\nCheckboxShim.displayName = 'CheckboxShim';\n"],"names":["React","classNamesFunction","Checkbox","mergeClasses","useCheckboxProps","useCheckboxStyles","getClassNames","useStaticStyles","CheckboxShim","forwardRef","props","_ref","className","styles","stylesV8","onRenderLabel","label","componentRef","shimProps","stylesV9","checkboxRef","createRef","useImperativeHandle","checked","current","indeterminate","focus","defaultLabelRenderer","checkboxProps","defualtLabel","title","span","text","children","ref","root","indicator","checkbox","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAA8D,kBAAkB;AAC3G,SAASC,QAAQ,EAAEC,YAAY,QAAQ,6BAA6B;AACpE,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,iBAAiB,QAAQ,oBAAoB;AAEtD,MAAMC,gBAAgBL,mBAAyD;IAC7EM,iBAAiB;AACnB;AAEA,OAAO,MAAMC,6BAAeR,MAAMS,UAAU,CAAC,CAACC,OAAuBC;IACnE,MAAM,EAAEC,SAAS,EAAEC,QAAQC,QAAQ,EAAEC,aAAa,EAAEC,KAAK,EAAEC,YAAY,EAAE,GAAGP;IAC5E,MAAMQ,YAAYd,iBAAiBM;IACnC,MAAMG,SAASP,cAAcQ;IAC7B,MAAMK,WAAWd;IACjB,MAAMe,cAAc,AAACT,sBAA8CX,MAAMqB,SAAS;IAElFrB,MAAMsB,mBAAmB,CAACL,cAAc;YAC7BG,sBACMA;YADNA,8BACMA;eAF8B;YAC7CG,SAASH,CAAAA,gCAAAA,uBAAAA,YAAYI,OAAO,cAAnBJ,2CAAAA,qBAAqBG,OAAO,cAA5BH,0CAAAA,+BAAgC;YACzCK,eAAeL,CAAAA,sCAAAA,wBAAAA,YAAYI,OAAO,cAAnBJ,4CAAAA,sBAAqBK,aAAa,cAAlCL,gDAAAA,qCAAsC;YACrDM,OAAO;oBAAMN;wBAAAA,uBAAAA,YAAYI,OAAO,cAAnBJ,2CAAAA,qBAAqBM,KAAK;;QACzC;IAAA;IAEA,MAAMC,uBAAuB,CAACC;QAC5B,IAAI,CAACA,eAAe;YAClB,OAAO;QACT;QACA,MAAM,EAAEZ,OAAOa,YAAY,EAAEC,KAAK,EAAE,GAAGF;QACvC,OAAOC,6BACL,oBAACE;YAAKD,OAAOA;YAAOlB,WAAWC,OAAOmB,IAAI;WACvCH,gBAED;IACN;IAEA,IAAIb,SAASD,eAAe;QAC1BG,UAAUF,KAAK,GAAG;YAChBJ,WAAWT,aAAa,oBAAoBU,OAAOG,KAAK,EAAEH,OAAOmB,IAAI;YACrEC,UAAUlB,gBAAgBA,cAAcL,OAAOiB,wBAAwBX;QACzE;IACF;IAEA,qBACE,oBAACd;QACE,GAAGgB,SAAS;QACbgB,KAAKd;QACLR,WAAWT,aAAagB,SAASgB,IAAI,EAAE,eAAevB,WAAWC,OAAOsB,IAAI;QAC5EC,WAAW;YAAExB,WAAWT,aAAa,wBAAwBU,OAAOwB,QAAQ;QAAE;;AAGpF,GAAG;AAEH7B,aAAa8B,WAAW,GAAG"}

package/lib/components/Checkbox/index.js

@@ -0,0 +1 @@
+export * from './CheckboxShim';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './CheckboxShim';\n"],"names":[],"mappings":"AAAA,cAAc,iBAAiB"}

package/lib/components/Checkbox/shimCheckboxProps.js

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { useControllableValue } from '@fluentui/react-hooks';
+import { getHTMLAttributes } from '../utils';
+// https://react.fluentui.dev/?path=/docs/concepts-migration-from-v8-components-checkbox-migration--page [Link of the fluent v9 migration guide]
+// https://github.com/microsoft/fluentui/blob/master/packages/react/src/components/Checkbox/Checkbox.types.ts [Link of the fluent v8 checkbox types definition]
+// https://github.com/microsoft/fluentui/blob/103b8977f8d5f8dd8c430bab46ff5308a2c76371/packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.types.ts [Link of the fluent v9 checkbox types definition]
+const CHECKBOX_PROPS_V8 = new Set([
+    'ariaDescribedBy',
+    'ariaLabel',
+    'ariaLabelledBy',
+    'ariaPositionInSet',
+    'ariaSetSize',
+    'boxSide',
+    'checked',
+    'checkmarkIconProps',
+    'className',
+    'componentRef',
+    'defaultChecked',
+    'defaultIndeterminate',
+    'disabled',
+    'indeterminate',
+    'inputProps',
+    'label',
+    'name',
+    'onChange',
+    'onRenderLabel',
+    'required',
+    'styles',
+    'theme',
+    'title'
+]);
+export const useCheckboxProps = (props)=>{
+    const { ariaDescribedBy, ariaLabel, ariaLabelledBy, ariaPositionInSet, ariaSetSize, boxSide, checked: checkedV8, indeterminate, defaultChecked, defaultIndeterminate, disabled, inputProps, name, required, title, onChange: onChangeV8 } = props;
+    const [checked, setChecked] = useControllableValue(checkedV8, defaultChecked);
+    const [mixed, setMixed] = React.useState(indeterminate || defaultIndeterminate);
+    const onChange = React.useCallback((event, data)=>{
+        let val = checked !== undefined ? data.checked : undefined;
+        // Ensure the checkbox is controlled
+        if (checked !== undefined) {
+            if (mixed) {
+                val = checkedV8 !== undefined ? checkedV8 : defaultChecked !== undefined ? defaultChecked : val;
+            }
+        }
+        if (mixed) {
+            setMixed(mixed && !indeterminate ? false : mixed);
+        }
+        setChecked(val);
+        onChangeV8 === null || onChangeV8 === void 0 ? void 0 : onChangeV8(event, data.checked);
+    }, [
+        setChecked,
+        checked,
+        onChangeV8,
+        mixed,
+        indeterminate,
+        checkedV8,
+        defaultChecked
+    ]);
+    const v9Props = {
+        checked: mixed ? 'mixed' : checked,
+        defaultChecked: mixed ? 'mixed' : defaultChecked,
+        labelPosition: boxSide === 'end' ? 'before' : 'after',
+        disabled,
+        required,
+        title,
+        name,
+        onChange
+    };
+    return {
+        ...inputProps,
+        'aria-describedby': ariaDescribedBy,
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy,
+        'aria-posinset': ariaPositionInSet,
+        'aria-setsize': ariaSetSize,
+        ...v9Props,
+        ...getHTMLAttributes(props, CHECKBOX_PROPS_V8)
+    };
+};

package/lib/components/Checkbox/shimCheckboxProps.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["shimCheckboxProps.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { ICheckboxProps } from '@fluentui/react';\nimport { CheckboxProps, CheckboxOnChangeData } from '@fluentui/react-components';\nimport { useControllableValue } from '@fluentui/react-hooks';\nimport { getHTMLAttributes } from '../utils';\n\n// https://react.fluentui.dev/?path=/docs/concepts-migration-from-v8-components-checkbox-migration--page [Link of the fluent v9 migration guide]\n// https://github.com/microsoft/fluentui/blob/master/packages/react/src/components/Checkbox/Checkbox.types.ts [Link of the fluent v8 checkbox types definition]\n// https://github.com/microsoft/fluentui/blob/103b8977f8d5f8dd8c430bab46ff5308a2c76371/packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.types.ts [Link of the fluent v9 checkbox types definition]\n\nconst CHECKBOX_PROPS_V8: Set<string> = new Set([\n  'ariaDescribedBy',\n  'ariaLabel',\n  'ariaLabelledBy',\n  'ariaPositionInSet',\n  'ariaSetSize',\n  'boxSide',\n  'checked',\n  'checkmarkIconProps', // one case used this\n  'className',\n  'componentRef',\n  'defaultChecked',\n  'defaultIndeterminate',\n  'disabled',\n  'indeterminate',\n  'inputProps',\n  'label',\n  'name',\n  'onChange',\n  'onRenderLabel',\n  'required',\n  'styles',\n  'theme',\n  'title',\n]);\n\nexport const useCheckboxProps = (props: ICheckboxProps): CheckboxProps => {\n  const {\n    ariaDescribedBy,\n    ariaLabel,\n    ariaLabelledBy,\n    ariaPositionInSet,\n    ariaSetSize,\n    boxSide,\n    checked: checkedV8,\n    indeterminate,\n    defaultChecked,\n    defaultIndeterminate,\n    disabled,\n    inputProps,\n    name,\n    required,\n    title,\n    onChange: onChangeV8,\n  } = props;\n\n  const [checked, setChecked] = useControllableValue(checkedV8, defaultChecked);\n  const [mixed, setMixed] = React.useState(indeterminate || defaultIndeterminate);\n\n  const onChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLElement>, data: CheckboxOnChangeData): void => {\n      let val: boolean | undefined = checked !== undefined ? (data.checked as boolean) : undefined;\n      // Ensure the checkbox is controlled\n      if (checked !== undefined) {\n        if (mixed) {\n          val = checkedV8 !== undefined ? checkedV8 : defaultChecked !== undefined ? defaultChecked : val;\n        }\n      }\n\n      if (mixed) {\n        setMixed(mixed && !indeterminate ? false : mixed);\n      }\n\n      setChecked(val);\n      onChangeV8?.(event, data.checked as boolean);\n    },\n    [setChecked, checked, onChangeV8, mixed, indeterminate, checkedV8, defaultChecked],\n  );\n\n  const v9Props: Partial<CheckboxProps> = {\n    checked: mixed ? 'mixed' : checked,\n    defaultChecked: mixed ? 'mixed' : defaultChecked,\n    labelPosition: boxSide === 'end' ? 'before' : 'after',\n    disabled,\n    required,\n    title,\n    name,\n    onChange,\n  };\n\n  return {\n    ...inputProps, // This inputProps is specific for the input element, and the html attributes are also used here instead of props.\n    'aria-describedby': ariaDescribedBy,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-posinset': ariaPositionInSet,\n    'aria-setsize': ariaSetSize,\n    ...v9Props,\n    ...getHTMLAttributes(props, CHECKBOX_PROPS_V8),\n  } as CheckboxProps;\n};\n"],"names":["React","useControllableValue","getHTMLAttributes","CHECKBOX_PROPS_V8","Set","useCheckboxProps","props","ariaDescribedBy","ariaLabel","ariaLabelledBy","ariaPositionInSet","ariaSetSize","boxSide","checked","checkedV8","indeterminate","defaultChecked","defaultIndeterminate","disabled","inputProps","name","required","title","onChange","onChangeV8","setChecked","mixed","setMixed","useState","useCallback","event","data","val","undefined","v9Props","labelPosition"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,iBAAiB,QAAQ,WAAW;AAE7C,gJAAgJ;AAChJ,+JAA+J;AAC/J,2NAA2N;AAE3N,MAAMC,oBAAiC,IAAIC,IAAI;IAC7C;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAED,OAAO,MAAMC,mBAAmB,CAACC;IAC/B,MAAM,EACJC,eAAe,EACfC,SAAS,EACTC,cAAc,EACdC,iBAAiB,EACjBC,WAAW,EACXC,OAAO,EACPC,SAASC,SAAS,EAClBC,aAAa,EACbC,cAAc,EACdC,oBAAoB,EACpBC,QAAQ,EACRC,UAAU,EACVC,IAAI,EACJC,QAAQ,EACRC,KAAK,EACLC,UAAUC,UAAU,EACrB,GAAGlB;IAEJ,MAAM,CAACO,SAASY,WAAW,GAAGxB,qBAAqBa,WAAWE;IAC9D,MAAM,CAACU,OAAOC,SAAS,GAAG3B,MAAM4B,QAAQ,CAACb,iBAAiBE;IAE1D,MAAMM,WAAWvB,MAAM6B,WAAW,CAChC,CAACC,OAAuCC;QACtC,IAAIC,MAA2BnB,YAAYoB,YAAaF,KAAKlB,OAAO,GAAeoB;QACnF,oCAAoC;QACpC,IAAIpB,YAAYoB,WAAW;YACzB,IAAIP,OAAO;gBACTM,MAAMlB,cAAcmB,YAAYnB,YAAYE,mBAAmBiB,YAAYjB,iBAAiBgB;YAC9F;QACF;QAEA,IAAIN,OAAO;YACTC,SAASD,SAAS,CAACX,gBAAgB,QAAQW;QAC7C;QAEAD,WAAWO;QACXR,uBAAAA,iCAAAA,WAAaM,OAAOC,KAAKlB,OAAO;IAClC,GACA;QAACY;QAAYZ;QAASW;QAAYE;QAAOX;QAAeD;QAAWE;KAAe;IAGpF,MAAMkB,UAAkC;QACtCrB,SAASa,QAAQ,UAAUb;QAC3BG,gBAAgBU,QAAQ,UAAUV;QAClCmB,eAAevB,YAAY,QAAQ,WAAW;QAC9CM;QACAG;QACAC;QACAF;QACAG;IACF;IAEA,OAAO;QACL,GAAGJ,UAAU;QACb,oBAAoBZ;QACpB,cAAcC;QACd,mBAAmBC;QACnB,iBAAiBC;QACjB,gBAAgBC;QAChB,GAAGuB,OAAO;QACV,GAAGhC,kBAAkBI,OAAOH,kBAAkB;IAChD;AACF,EAAE"}

package/lib/components/utils.js

@@ -0,0 +1,12 @@
+export function getHTMLAttributes(props, allV8PropsSet) {
+    const v8Props = {
+        ...props
+    };
+    const propsKeys = Object.keys(v8Props);
+    propsKeys.forEach((key)=>{
+        if (allV8PropsSet.has(key)) {
+            delete v8Props[key];
+        }
+    });
+    return v8Props;
+}

package/lib/components/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils.ts"],"sourcesContent":["export function getHTMLAttributes<T extends object>(props: T, allV8PropsSet: Set<string>): T {\n  const v8Props: T = { ...props };\n  const propsKeys: string[] = Object.keys(v8Props);\n  propsKeys.forEach(key => {\n    if (allV8PropsSet.has(key)) {\n      delete v8Props[key as keyof typeof v8Props];\n    }\n  });\n  return v8Props;\n}\n"],"names":["getHTMLAttributes","props","allV8PropsSet","v8Props","propsKeys","Object","keys","forEach","key","has"],"mappings":"AAAA,OAAO,SAASA,kBAAoCC,KAAQ,EAAEC,aAA0B;IACtF,MAAMC,UAAa;QAAE,GAAGF,KAAK;IAAC;IAC9B,MAAMG,YAAsBC,OAAOC,IAAI,CAACH;IACxCC,UAAUG,OAAO,CAACC,CAAAA;QAChB,IAAIN,cAAcO,GAAG,CAACD,MAAM;YAC1B,OAAOL,OAAO,CAACK,IAA4B;QAC7C;IACF;IACA,OAAOL;AACT"}

package/lib/index.js

@@ -1,4 +1,5 @@
 export { ActionButtonShim, ButtonShim, CommandButtonShim, CompoundButtonShim, DefaultButtonShim, MenuButtonShim, PrimaryButtonShim, shimButtonProps, ToggleButtonShim } from './components/Button/index';
 export { MenuItemShim, shimMenuProps } from './components/Menu/index';
 export { StackItemShim, StackShim } from './components/Stack/index';
+export { CheckboxShim } from './components/Checkbox/index';
 export { black, blackAlpha, brandWeb, createBrandVariants, createV8Theme, createV9Theme, grey, grey14Alpha, hcButtonFace, hcButtonText, hcCanvas, hcCanvasText, hcDisabled, hcHighlight, hcHighlightText, hcHyperlink, sharedColors, white, whiteAlpha } from './components/Theme/index';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  ActionButtonShim,\n  ButtonShim,\n  CommandButtonShim,\n  CompoundButtonShim,\n  DefaultButtonShim,\n  MenuButtonShim,\n  PrimaryButtonShim,\n  shimButtonProps,\n  ToggleButtonShim,\n} from './components/Button/index';\n\nexport { MenuItemShim, shimMenuProps } from './components/Menu/index';\n\nexport { StackItemShim, StackShim } from './components/Stack/index';\n\nexport {\n  black,\n  blackAlpha,\n  brandWeb,\n  createBrandVariants,\n  createV8Theme,\n  createV9Theme,\n  grey,\n  grey14Alpha,\n  hcButtonFace,\n  hcButtonText,\n  hcCanvas,\n  hcCanvasText,\n  hcDisabled,\n  hcHighlight,\n  hcHighlightText,\n  hcHyperlink,\n  sharedColors,\n  white,\n  whiteAlpha,\n} from './components/Theme/index';\n\nexport type {\n  AlphaColors,\n  ColorVariants,\n  GlobalSharedColors,\n  Greys,\n  TextAlignment,\n  TextAlignments,\n} from './components/Theme/index';\n"],"names":["ActionButtonShim","ButtonShim","CommandButtonShim","CompoundButtonShim","DefaultButtonShim","MenuButtonShim","PrimaryButtonShim","shimButtonProps","ToggleButtonShim","MenuItemShim","shimMenuProps","StackItemShim","StackShim","black","blackAlpha","brandWeb","createBrandVariants","createV8Theme","createV9Theme","grey","grey14Alpha","hcButtonFace","hcButtonText","hcCanvas","hcCanvasText","hcDisabled","hcHighlight","hcHighlightText","hcHyperlink","sharedColors","white","whiteAlpha"],"mappings":"AAAA,SACEA,gBAAgB,EAChBC,UAAU,EACVC,iBAAiB,EACjBC,kBAAkB,EAClBC,iBAAiB,EACjBC,cAAc,EACdC,iBAAiB,EACjBC,eAAe,EACfC,gBAAgB,QACX,4BAA4B;AAEnC,SAASC,YAAY,EAAEC,aAAa,QAAQ,0BAA0B;AAEtE,SAASC,aAAa,EAAEC,SAAS,QAAQ,2BAA2B;AAEpE,SACEC,KAAK,EACLC,UAAU,EACVC,QAAQ,EACRC,mBAAmB,EACnBC,aAAa,EACbC,aAAa,EACbC,IAAI,EACJC,WAAW,EACXC,YAAY,EACZC,YAAY,EACZC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,eAAe,EACfC,WAAW,EACXC,YAAY,EACZC,KAAK,EACLC,UAAU,QACL,2BAA2B"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  ActionButtonShim,\n  ButtonShim,\n  CommandButtonShim,\n  CompoundButtonShim,\n  DefaultButtonShim,\n  MenuButtonShim,\n  PrimaryButtonShim,\n  shimButtonProps,\n  ToggleButtonShim,\n} from './components/Button/index';\n\nexport { MenuItemShim, shimMenuProps } from './components/Menu/index';\n\nexport { StackItemShim, StackShim } from './components/Stack/index';\n\nexport { CheckboxShim } from './components/Checkbox/index';\n\nexport {\n  black,\n  blackAlpha,\n  brandWeb,\n  createBrandVariants,\n  createV8Theme,\n  createV9Theme,\n  grey,\n  grey14Alpha,\n  hcButtonFace,\n  hcButtonText,\n  hcCanvas,\n  hcCanvasText,\n  hcDisabled,\n  hcHighlight,\n  hcHighlightText,\n  hcHyperlink,\n  sharedColors,\n  white,\n  whiteAlpha,\n} from './components/Theme/index';\n\nexport type {\n  AlphaColors,\n  ColorVariants,\n  GlobalSharedColors,\n  Greys,\n  TextAlignment,\n  TextAlignments,\n} from './components/Theme/index';\n"],"names":["ActionButtonShim","ButtonShim","CommandButtonShim","CompoundButtonShim","DefaultButtonShim","MenuButtonShim","PrimaryButtonShim","shimButtonProps","ToggleButtonShim","MenuItemShim","shimMenuProps","StackItemShim","StackShim","CheckboxShim","black","blackAlpha","brandWeb","createBrandVariants","createV8Theme","createV9Theme","grey","grey14Alpha","hcButtonFace","hcButtonText","hcCanvas","hcCanvasText","hcDisabled","hcHighlight","hcHighlightText","hcHyperlink","sharedColors","white","whiteAlpha"],"mappings":"AAAA,SACEA,gBAAgB,EAChBC,UAAU,EACVC,iBAAiB,EACjBC,kBAAkB,EAClBC,iBAAiB,EACjBC,cAAc,EACdC,iBAAiB,EACjBC,eAAe,EACfC,gBAAgB,QACX,4BAA4B;AAEnC,SAASC,YAAY,EAAEC,aAAa,QAAQ,0BAA0B;AAEtE,SAASC,aAAa,EAAEC,SAAS,QAAQ,2BAA2B;AAEpE,SAASC,YAAY,QAAQ,8BAA8B;AAE3D,SACEC,KAAK,EACLC,UAAU,EACVC,QAAQ,EACRC,mBAAmB,EACnBC,aAAa,EACbC,aAAa,EACbC,IAAI,EACJC,WAAW,EACXC,YAAY,EACZC,YAAY,EACZC,QAAQ,EACRC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,eAAe,EACfC,WAAW,EACXC,YAAY,EACZC,KAAK,EACLC,UAAU,QACL,2BAA2B"}

package/lib-commonjs/components/Checkbox/Checkbox.styles.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCheckboxStyles", {
+    enumerable: true,
+    get: function() {
+        return useCheckboxStyles;
+    }
+});
+const _reactcomponents = require("@fluentui/react-components");
+const useCheckboxStyles = /*#__PURE__*/ (0, _reactcomponents.__styles)({
+    root: {
+        mc9l5x: "f22iagw"
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}"
+    ]
+}); //# sourceMappingURL=Checkbox.styles.js.map

package/lib-commonjs/components/Checkbox/Checkbox.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Checkbox.styles.js"],"sourcesContent":["import { __styles } from '@fluentui/react-components';\nexport const useCheckboxStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\"\n  }\n}, {\n  d: [\".f22iagw{display:flex;}\"]\n});\n//# sourceMappingURL=Checkbox.styles.js.map"],"names":["useCheckboxStyles","__styles","root","mc9l5x","d"],"mappings":";;;;+BACaA;;;eAAAA;;;iCADY;AAClB,MAAMA,oBAAoB,WAAW,GAAEC,IAAAA,yBAAQ,EAAC;IACrDC,MAAM;QACJC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;KAA0B;AAChC,IACA,2CAA2C"}

package/lib-commonjs/components/Checkbox/CheckboxShim.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CheckboxShim", {
+    enumerable: true,
+    get: function() {
+        return CheckboxShim;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _react1 = require("@fluentui/react");
+const _reactcomponents = require("@fluentui/react-components");
+const _shimCheckboxProps = require("./shimCheckboxProps");
+const _Checkboxstyles = require("./Checkbox.styles");
+const getClassNames = (0, _react1.classNamesFunction)({
+    useStaticStyles: false
+});
+const CheckboxShim = /*#__PURE__*/ _react.forwardRef((props, _ref)=>{
+    const { className, styles: stylesV8, onRenderLabel, label, componentRef } = props;
+    const shimProps = (0, _shimCheckboxProps.useCheckboxProps)(props);
+    const styles = getClassNames(stylesV8);
+    const stylesV9 = (0, _Checkboxstyles.useCheckboxStyles)();
+    const checkboxRef = _ref || /*#__PURE__*/ _react.createRef();
+    _react.useImperativeHandle(componentRef, ()=>{
+        var _checkboxRef_current, _checkboxRef_current1;
+        var _checkboxRef_current_checked, _checkboxRef_current_indeterminate;
+        return {
+            checked: (_checkboxRef_current_checked = (_checkboxRef_current = checkboxRef.current) === null || _checkboxRef_current === void 0 ? void 0 : _checkboxRef_current.checked) !== null && _checkboxRef_current_checked !== void 0 ? _checkboxRef_current_checked : false,
+            indeterminate: (_checkboxRef_current_indeterminate = (_checkboxRef_current1 = checkboxRef.current) === null || _checkboxRef_current1 === void 0 ? void 0 : _checkboxRef_current1.indeterminate) !== null && _checkboxRef_current_indeterminate !== void 0 ? _checkboxRef_current_indeterminate : false,
+            focus: ()=>{
+                var _checkboxRef_current;
+                return (_checkboxRef_current = checkboxRef.current) === null || _checkboxRef_current === void 0 ? void 0 : _checkboxRef_current.focus();
+            }
+        };
+    });
+    const defaultLabelRenderer = (checkboxProps)=>{
+        if (!checkboxProps) {
+            return null;
+        }
+        const { label: defualtLabel, title } = checkboxProps;
+        return defualtLabel ? /*#__PURE__*/ _react.createElement("span", {
+            title: title,
+            className: styles.text
+        }, defualtLabel) : null;
+    };
+    if (label || onRenderLabel) {
+        shimProps.label = {
+            className: (0, _reactcomponents.mergeClasses)('ms-Checkbox-text', styles.label, styles.text),
+            children: onRenderLabel ? onRenderLabel(props, defaultLabelRenderer) : label
+        };
+    }
+    return /*#__PURE__*/ _react.createElement(_reactcomponents.Checkbox, {
+        ...shimProps,
+        ref: checkboxRef,
+        className: (0, _reactcomponents.mergeClasses)(stylesV9.root, 'ms-Checkbox', className, styles.root),
+        indicator: {
+            className: (0, _reactcomponents.mergeClasses)('ms-Checkbox-checkbox', styles.checkbox)
+        }
+    });
+});
+CheckboxShim.displayName = 'CheckboxShim';

package/lib-commonjs/components/Checkbox/CheckboxShim.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CheckboxShim.js"],"sourcesContent":["import * as React from 'react';\nimport { classNamesFunction } from '@fluentui/react';\nimport { Checkbox, mergeClasses } from '@fluentui/react-components';\nimport { useCheckboxProps } from './shimCheckboxProps';\nimport { useCheckboxStyles } from './Checkbox.styles';\nconst getClassNames = classNamesFunction({\n    useStaticStyles: false\n});\nexport const CheckboxShim = /*#__PURE__*/ React.forwardRef((props, _ref)=>{\n    const { className, styles: stylesV8, onRenderLabel, label, componentRef } = props;\n    const shimProps = useCheckboxProps(props);\n    const styles = getClassNames(stylesV8);\n    const stylesV9 = useCheckboxStyles();\n    const checkboxRef = _ref || /*#__PURE__*/ React.createRef();\n    React.useImperativeHandle(componentRef, ()=>{\n        var _checkboxRef_current, _checkboxRef_current1;\n        var _checkboxRef_current_checked, _checkboxRef_current_indeterminate;\n        return {\n            checked: (_checkboxRef_current_checked = (_checkboxRef_current = checkboxRef.current) === null || _checkboxRef_current === void 0 ? void 0 : _checkboxRef_current.checked) !== null && _checkboxRef_current_checked !== void 0 ? _checkboxRef_current_checked : false,\n            indeterminate: (_checkboxRef_current_indeterminate = (_checkboxRef_current1 = checkboxRef.current) === null || _checkboxRef_current1 === void 0 ? void 0 : _checkboxRef_current1.indeterminate) !== null && _checkboxRef_current_indeterminate !== void 0 ? _checkboxRef_current_indeterminate : false,\n            focus: ()=>{\n                var _checkboxRef_current;\n                return (_checkboxRef_current = checkboxRef.current) === null || _checkboxRef_current === void 0 ? void 0 : _checkboxRef_current.focus();\n            }\n        };\n    });\n    const defaultLabelRenderer = (checkboxProps)=>{\n        if (!checkboxProps) {\n            return null;\n        }\n        const { label: defualtLabel, title } = checkboxProps;\n        return defualtLabel ? /*#__PURE__*/ React.createElement(\"span\", {\n            title: title,\n            className: styles.text\n        }, defualtLabel) : null;\n    };\n    if (label || onRenderLabel) {\n        shimProps.label = {\n            className: mergeClasses('ms-Checkbox-text', styles.label, styles.text),\n            children: onRenderLabel ? onRenderLabel(props, defaultLabelRenderer) : label\n        };\n    }\n    return /*#__PURE__*/ React.createElement(Checkbox, {\n        ...shimProps,\n        ref: checkboxRef,\n        className: mergeClasses(stylesV9.root, 'ms-Checkbox', className, styles.root),\n        indicator: {\n            className: mergeClasses('ms-Checkbox-checkbox', styles.checkbox)\n        }\n    });\n});\nCheckboxShim.displayName = 'CheckboxShim';\n"],"names":["CheckboxShim","getClassNames","classNamesFunction","useStaticStyles","React","forwardRef","props","_ref","className","styles","stylesV8","onRenderLabel","label","componentRef","shimProps","useCheckboxProps","stylesV9","useCheckboxStyles","checkboxRef","createRef","useImperativeHandle","_checkboxRef_current","_checkboxRef_current1","_checkboxRef_current_checked","_checkboxRef_current_indeterminate","checked","current","indeterminate","focus","defaultLabelRenderer","checkboxProps","defualtLabel","title","createElement","text","mergeClasses","children","Checkbox","ref","root","indicator","checkbox","displayName"],"mappings":";;;;+BAQaA;;;eAAAA;;;;iEARU;wBACY;iCACI;mCACN;gCACC;AAClC,MAAMC,gBAAgBC,IAAAA,0BAAkB,EAAC;IACrCC,iBAAiB;AACrB;AACO,MAAMH,eAAe,WAAW,GAAGI,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/D,MAAM,EAAEC,SAAS,EAAEC,QAAQC,QAAQ,EAAEC,aAAa,EAAEC,KAAK,EAAEC,YAAY,EAAE,GAAGP;IAC5E,MAAMQ,YAAYC,IAAAA,mCAAgB,EAACT;IACnC,MAAMG,SAASR,cAAcS;IAC7B,MAAMM,WAAWC,IAAAA,iCAAiB;IAClC,MAAMC,cAAcX,QAAQ,WAAW,GAAGH,OAAMe,SAAS;IACzDf,OAAMgB,mBAAmB,CAACP,cAAc;QACpC,IAAIQ,sBAAsBC;QAC1B,IAAIC,8BAA8BC;QAClC,OAAO;YACHC,SAAS,AAACF,CAAAA,+BAA+B,AAACF,CAAAA,uBAAuBH,YAAYQ,OAAO,AAAD,MAAO,QAAQL,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBI,OAAO,AAAD,MAAO,QAAQF,iCAAiC,KAAK,IAAIA,+BAA+B;YAChQI,eAAe,AAACH,CAAAA,qCAAqC,AAACF,CAAAA,wBAAwBJ,YAAYQ,OAAO,AAAD,MAAO,QAAQJ,0BAA0B,KAAK,IAAI,KAAK,IAAIA,sBAAsBK,aAAa,AAAD,MAAO,QAAQH,uCAAuC,KAAK,IAAIA,qCAAqC;YACjSI,OAAO;gBACH,IAAIP;gBACJ,OAAO,AAACA,CAAAA,uBAAuBH,YAAYQ,OAAO,AAAD,MAAO,QAAQL,yBAAyB,KAAK,IAAI,KAAK,IAAIA,qBAAqBO,KAAK;YACzI;QACJ;IACJ;IACA,MAAMC,uBAAuB,CAACC;QAC1B,IAAI,CAACA,eAAe;YAChB,OAAO;QACX;QACA,MAAM,EAAElB,OAAOmB,YAAY,EAAEC,KAAK,EAAE,GAAGF;QACvC,OAAOC,eAAe,WAAW,GAAG3B,OAAM6B,aAAa,CAAC,QAAQ;YAC5DD,OAAOA;YACPxB,WAAWC,OAAOyB,IAAI;QAC1B,GAAGH,gBAAgB;IACvB;IACA,IAAInB,SAASD,eAAe;QACxBG,UAAUF,KAAK,GAAG;YACdJ,WAAW2B,IAAAA,6BAAY,EAAC,oBAAoB1B,OAAOG,KAAK,EAAEH,OAAOyB,IAAI;YACrEE,UAAUzB,gBAAgBA,cAAcL,OAAOuB,wBAAwBjB;QAC3E;IACJ;IACA,OAAO,WAAW,GAAGR,OAAM6B,aAAa,CAACI,yBAAQ,EAAE;QAC/C,GAAGvB,SAAS;QACZwB,KAAKpB;QACLV,WAAW2B,IAAAA,6BAAY,EAACnB,SAASuB,IAAI,EAAE,eAAe/B,WAAWC,OAAO8B,IAAI;QAC5EC,WAAW;YACPhC,WAAW2B,IAAAA,6BAAY,EAAC,wBAAwB1B,OAAOgC,QAAQ;QACnE;IACJ;AACJ;AACAzC,aAAa0C,WAAW,GAAG"}

package/lib-commonjs/components/Checkbox/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./CheckboxShim"), exports);

package/lib-commonjs/components/Checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './CheckboxShim';\n"],"names":[],"mappings":";;;;;uBAAc"}

package/lib-commonjs/components/Checkbox/shimCheckboxProps.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCheckboxProps", {
+    enumerable: true,
+    get: function() {
+        return useCheckboxProps;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reacthooks = require("@fluentui/react-hooks");
+const _utils = require("../utils");
+// https://react.fluentui.dev/?path=/docs/concepts-migration-from-v8-components-checkbox-migration--page [Link of the fluent v9 migration guide]
+// https://github.com/microsoft/fluentui/blob/master/packages/react/src/components/Checkbox/Checkbox.types.ts [Link of the fluent v8 checkbox types definition]
+// https://github.com/microsoft/fluentui/blob/103b8977f8d5f8dd8c430bab46ff5308a2c76371/packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.types.ts [Link of the fluent v9 checkbox types definition]
+const CHECKBOX_PROPS_V8 = new Set([
+    'ariaDescribedBy',
+    'ariaLabel',
+    'ariaLabelledBy',
+    'ariaPositionInSet',
+    'ariaSetSize',
+    'boxSide',
+    'checked',
+    'checkmarkIconProps',
+    'className',
+    'componentRef',
+    'defaultChecked',
+    'defaultIndeterminate',
+    'disabled',
+    'indeterminate',
+    'inputProps',
+    'label',
+    'name',
+    'onChange',
+    'onRenderLabel',
+    'required',
+    'styles',
+    'theme',
+    'title'
+]);
+const useCheckboxProps = (props)=>{
+    const { ariaDescribedBy, ariaLabel, ariaLabelledBy, ariaPositionInSet, ariaSetSize, boxSide, checked: checkedV8, indeterminate, defaultChecked, defaultIndeterminate, disabled, inputProps, name, required, title, onChange: onChangeV8 } = props;
+    const [checked, setChecked] = (0, _reacthooks.useControllableValue)(checkedV8, defaultChecked);
+    const [mixed, setMixed] = _react.useState(indeterminate || defaultIndeterminate);
+    const onChange = _react.useCallback((event, data)=>{
+        let val = checked !== undefined ? data.checked : undefined;
+        // Ensure the checkbox is controlled
+        if (checked !== undefined) {
+            if (mixed) {
+                val = checkedV8 !== undefined ? checkedV8 : defaultChecked !== undefined ? defaultChecked : val;
+            }
+        }
+        if (mixed) {
+            setMixed(mixed && !indeterminate ? false : mixed);
+        }
+        setChecked(val);
+        onChangeV8 === null || onChangeV8 === void 0 ? void 0 : onChangeV8(event, data.checked);
+    }, [
+        setChecked,
+        checked,
+        onChangeV8,
+        mixed,
+        indeterminate,
+        checkedV8,
+        defaultChecked
+    ]);
+    const v9Props = {
+        checked: mixed ? 'mixed' : checked,
+        defaultChecked: mixed ? 'mixed' : defaultChecked,
+        labelPosition: boxSide === 'end' ? 'before' : 'after',
+        disabled,
+        required,
+        title,
+        name,
+        onChange
+    };
+    return {
+        ...inputProps,
+        'aria-describedby': ariaDescribedBy,
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy,
+        'aria-posinset': ariaPositionInSet,
+        'aria-setsize': ariaSetSize,
+        ...v9Props,
+        ...(0, _utils.getHTMLAttributes)(props, CHECKBOX_PROPS_V8)
+    };
+};

package/lib-commonjs/components/Checkbox/shimCheckboxProps.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["shimCheckboxProps.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableValue } from '@fluentui/react-hooks';\nimport { getHTMLAttributes } from '../utils';\n// https://react.fluentui.dev/?path=/docs/concepts-migration-from-v8-components-checkbox-migration--page [Link of the fluent v9 migration guide]\n// https://github.com/microsoft/fluentui/blob/master/packages/react/src/components/Checkbox/Checkbox.types.ts [Link of the fluent v8 checkbox types definition]\n// https://github.com/microsoft/fluentui/blob/103b8977f8d5f8dd8c430bab46ff5308a2c76371/packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.types.ts [Link of the fluent v9 checkbox types definition]\nconst CHECKBOX_PROPS_V8 = new Set([\n    'ariaDescribedBy',\n    'ariaLabel',\n    'ariaLabelledBy',\n    'ariaPositionInSet',\n    'ariaSetSize',\n    'boxSide',\n    'checked',\n    'checkmarkIconProps',\n    'className',\n    'componentRef',\n    'defaultChecked',\n    'defaultIndeterminate',\n    'disabled',\n    'indeterminate',\n    'inputProps',\n    'label',\n    'name',\n    'onChange',\n    'onRenderLabel',\n    'required',\n    'styles',\n    'theme',\n    'title'\n]);\nexport const useCheckboxProps = (props)=>{\n    const { ariaDescribedBy, ariaLabel, ariaLabelledBy, ariaPositionInSet, ariaSetSize, boxSide, checked: checkedV8, indeterminate, defaultChecked, defaultIndeterminate, disabled, inputProps, name, required, title, onChange: onChangeV8 } = props;\n    const [checked, setChecked] = useControllableValue(checkedV8, defaultChecked);\n    const [mixed, setMixed] = React.useState(indeterminate || defaultIndeterminate);\n    const onChange = React.useCallback((event, data)=>{\n        let val = checked !== undefined ? data.checked : undefined;\n        // Ensure the checkbox is controlled\n        if (checked !== undefined) {\n            if (mixed) {\n                val = checkedV8 !== undefined ? checkedV8 : defaultChecked !== undefined ? defaultChecked : val;\n            }\n        }\n        if (mixed) {\n            setMixed(mixed && !indeterminate ? false : mixed);\n        }\n        setChecked(val);\n        onChangeV8 === null || onChangeV8 === void 0 ? void 0 : onChangeV8(event, data.checked);\n    }, [\n        setChecked,\n        checked,\n        onChangeV8,\n        mixed,\n        indeterminate,\n        checkedV8,\n        defaultChecked\n    ]);\n    const v9Props = {\n        checked: mixed ? 'mixed' : checked,\n        defaultChecked: mixed ? 'mixed' : defaultChecked,\n        labelPosition: boxSide === 'end' ? 'before' : 'after',\n        disabled,\n        required,\n        title,\n        name,\n        onChange\n    };\n    return {\n        ...inputProps,\n        'aria-describedby': ariaDescribedBy,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        'aria-posinset': ariaPositionInSet,\n        'aria-setsize': ariaSetSize,\n        ...v9Props,\n        ...getHTMLAttributes(props, CHECKBOX_PROPS_V8)\n    };\n};\n"],"names":["useCheckboxProps","CHECKBOX_PROPS_V8","Set","props","ariaDescribedBy","ariaLabel","ariaLabelledBy","ariaPositionInSet","ariaSetSize","boxSide","checked","checkedV8","indeterminate","defaultChecked","defaultIndeterminate","disabled","inputProps","name","required","title","onChange","onChangeV8","setChecked","useControllableValue","mixed","setMixed","React","useState","useCallback","event","data","val","undefined","v9Props","labelPosition","getHTMLAttributes"],"mappings":";;;;+BA+BaA;;;eAAAA;;;;iEA/BU;4BACc;uBACH;AAClC,gJAAgJ;AAChJ,+JAA+J;AAC/J,2NAA2N;AAC3N,MAAMC,oBAAoB,IAAIC,IAAI;IAC9B;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACH;AACM,MAAMF,mBAAmB,CAACG;IAC7B,MAAM,EAAEC,eAAe,EAAEC,SAAS,EAAEC,cAAc,EAAEC,iBAAiB,EAAEC,WAAW,EAAEC,OAAO,EAAEC,SAASC,SAAS,EAAEC,aAAa,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,UAAUC,UAAU,EAAE,GAAGlB;IAC5O,MAAM,CAACO,SAASY,WAAW,GAAGC,IAAAA,gCAAoB,EAACZ,WAAWE;IAC9D,MAAM,CAACW,OAAOC,SAAS,GAAGC,OAAMC,QAAQ,CAACf,iBAAiBE;IAC1D,MAAMM,WAAWM,OAAME,WAAW,CAAC,CAACC,OAAOC;QACvC,IAAIC,MAAMrB,YAAYsB,YAAYF,KAAKpB,OAAO,GAAGsB;QACjD,oCAAoC;QACpC,IAAItB,YAAYsB,WAAW;YACvB,IAAIR,OAAO;gBACPO,MAAMpB,cAAcqB,YAAYrB,YAAYE,mBAAmBmB,YAAYnB,iBAAiBkB;YAChG;QACJ;QACA,IAAIP,OAAO;YACPC,SAASD,SAAS,CAACZ,gBAAgB,QAAQY;QAC/C;QACAF,WAAWS;QACXV,eAAe,QAAQA,eAAe,KAAK,IAAI,KAAK,IAAIA,WAAWQ,OAAOC,KAAKpB,OAAO;IAC1F,GAAG;QACCY;QACAZ;QACAW;QACAG;QACAZ;QACAD;QACAE;KACH;IACD,MAAMoB,UAAU;QACZvB,SAASc,QAAQ,UAAUd;QAC3BG,gBAAgBW,QAAQ,UAAUX;QAClCqB,eAAezB,YAAY,QAAQ,WAAW;QAC9CM;QACAG;QACAC;QACAF;QACAG;IACJ;IACA,OAAO;QACH,GAAGJ,UAAU;QACb,oBAAoBZ;QACpB,cAAcC;QACd,mBAAmBC;QACnB,iBAAiBC;QACjB,gBAAgBC;QAChB,GAAGyB,OAAO;QACV,GAAGE,IAAAA,wBAAiB,EAAChC,OAAOF,kBAAkB;IAClD;AACJ"}

package/lib-commonjs/components/utils.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getHTMLAttributes", {
+    enumerable: true,
+    get: function() {
+        return getHTMLAttributes;
+    }
+});
+function getHTMLAttributes(props, allV8PropsSet) {
+    const v8Props = {
+        ...props
+    };
+    const propsKeys = Object.keys(v8Props);
+    propsKeys.forEach((key)=>{
+        if (allV8PropsSet.has(key)) {
+            delete v8Props[key];
+        }
+    });
+    return v8Props;
+}

package/lib-commonjs/components/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils.js"],"sourcesContent":["export function getHTMLAttributes(props, allV8PropsSet) {\n    const v8Props = {\n        ...props\n    };\n    const propsKeys = Object.keys(v8Props);\n    propsKeys.forEach((key)=>{\n        if (allV8PropsSet.has(key)) {\n            delete v8Props[key];\n        }\n    });\n    return v8Props;\n}\n"],"names":["getHTMLAttributes","props","allV8PropsSet","v8Props","propsKeys","Object","keys","forEach","key","has"],"mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA,kBAAkBC,KAAK,EAAEC,aAAa;IAClD,MAAMC,UAAU;QACZ,GAAGF,KAAK;IACZ;IACA,MAAMG,YAAYC,OAAOC,IAAI,CAACH;IAC9BC,UAAUG,OAAO,CAAC,CAACC;QACf,IAAIN,cAAcO,GAAG,CAACD,MAAM;YACxB,OAAOL,OAAO,CAACK,IAAI;QACvB;IACJ;IACA,OAAOL;AACX"}

package/lib-commonjs/index.js

@@ -48,65 +48,69 @@ _export(exports, {
     StackShim: function() {
         return _index2.StackShim;
     },
+    CheckboxShim: function() {
+        return _index3.CheckboxShim;
+    },
     black: function() {
-        return _index3.black;
+        return _index4.black;
     },
     blackAlpha: function() {
-        return _index3.blackAlpha;
+        return _index4.blackAlpha;
     },
     brandWeb: function() {
-        return _index3.brandWeb;
+        return _index4.brandWeb;
     },
     createBrandVariants: function() {
-        return _index3.createBrandVariants;
+        return _index4.createBrandVariants;
     },
     createV8Theme: function() {
-        return _index3.createV8Theme;
+        return _index4.createV8Theme;
     },
     createV9Theme: function() {
-        return _index3.createV9Theme;
+        return _index4.createV9Theme;
     },
     grey: function() {
-        return _index3.grey;
+        return _index4.grey;
     },
     grey14Alpha: function() {
-        return _index3.grey14Alpha;
+        return _index4.grey14Alpha;
     },
     hcButtonFace: function() {
-        return _index3.hcButtonFace;
+        return _index4.hcButtonFace;
     },
     hcButtonText: function() {
-        return _index3.hcButtonText;
+        return _index4.hcButtonText;
     },
     hcCanvas: function() {
-        return _index3.hcCanvas;
+        return _index4.hcCanvas;
     },
     hcCanvasText: function() {
-        return _index3.hcCanvasText;
+        return _index4.hcCanvasText;
     },
     hcDisabled: function() {
-        return _index3.hcDisabled;
+        return _index4.hcDisabled;
     },
     hcHighlight: function() {
-        return _index3.hcHighlight;
+        return _index4.hcHighlight;
     },
     hcHighlightText: function() {
-        return _index3.hcHighlightText;
+        return _index4.hcHighlightText;
     },
     hcHyperlink: function() {
-        return _index3.hcHyperlink;
+        return _index4.hcHyperlink;
     },
     sharedColors: function() {
-        return _index3.sharedColors;
+        return _index4.sharedColors;
     },
     white: function() {
-        return _index3.white;
+        return _index4.white;
     },
     whiteAlpha: function() {
-        return _index3.whiteAlpha;
+        return _index4.whiteAlpha;
     }
 });
 const _index = require("./components/Button/index");
 const _index1 = require("./components/Menu/index");
 const _index2 = require("./components/Stack/index");
-const _index3 = require("./components/Theme/index");
+const _index3 = require("./components/Checkbox/index");
+const _index4 = require("./components/Theme/index");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export { ActionButtonShim, ButtonShim, CommandButtonShim, CompoundButtonShim, DefaultButtonShim, MenuButtonShim, PrimaryButtonShim, shimButtonProps, ToggleButtonShim } from './components/Button/index';\nexport { MenuItemShim, shimMenuProps } from './components/Menu/index';\nexport { StackItemShim, StackShim } from './components/Stack/index';\nexport { black, blackAlpha, brandWeb, createBrandVariants, createV8Theme, createV9Theme, grey, grey14Alpha, hcButtonFace, hcButtonText, hcCanvas, hcCanvasText, hcDisabled, hcHighlight, hcHighlightText, hcHyperlink, sharedColors, white, whiteAlpha } from './components/Theme/index';\n"],"names":["ActionButtonShim","ButtonShim","CommandButtonShim","CompoundButtonShim","DefaultButtonShim","MenuButtonShim","PrimaryButtonShim","shimButtonProps","ToggleButtonShim","MenuItemShim","shimMenuProps","StackItemShim","StackShim","black","blackAlpha","brandWeb","createBrandVariants","createV8Theme","createV9Theme","grey","grey14Alpha","hcButtonFace","hcButtonText","hcCanvas","hcCanvasText","hcDisabled","hcHighlight","hcHighlightText","hcHyperlink","sharedColors","white","whiteAlpha"],"mappings":";;;;;;;;;;;IAASA,gBAAgB;eAAhBA,uBAAgB;;IAAEC,UAAU;eAAVA,iBAAU;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;IAAEC,cAAc;eAAdA,qBAAc;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;IAAEC,eAAe;eAAfA,sBAAe;;IAAEC,gBAAgB;eAAhBA,uBAAgB;;IAC5JC,YAAY;eAAZA,oBAAY;;IAAEC,aAAa;eAAbA,qBAAa;;IAC3BC,aAAa;eAAbA,qBAAa;;IAAEC,SAAS;eAATA,iBAAS;;IACxBC,KAAK;eAALA,aAAK;;IAAEC,UAAU;eAAVA,kBAAU;;IAAEC,QAAQ;eAARA,gBAAQ;;IAAEC,mBAAmB;eAAnBA,2BAAmB;;IAAEC,aAAa;eAAbA,qBAAa;;IAAEC,aAAa;eAAbA,qBAAa;;IAAEC,IAAI;eAAJA,YAAI;;IAAEC,WAAW;eAAXA,mBAAW;;IAAEC,YAAY;eAAZA,oBAAY;;IAAEC,YAAY;eAAZA,oBAAY;;IAAEC,QAAQ;eAARA,gBAAQ;;IAAEC,YAAY;eAAZA,oBAAY;;IAAEC,UAAU;eAAVA,kBAAU;;IAAEC,WAAW;eAAXA,mBAAW;;IAAEC,eAAe;eAAfA,uBAAe;;IAAEC,WAAW;eAAXA,mBAAW;;IAAEC,YAAY;eAAZA,oBAAY;;IAAEC,KAAK;eAALA,aAAK;;IAAEC,UAAU;eAAVA,kBAAU;;;uBAHzE;wBACjI;wBACH;wBACqN"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export { ActionButtonShim, ButtonShim, CommandButtonShim, CompoundButtonShim, DefaultButtonShim, MenuButtonShim, PrimaryButtonShim, shimButtonProps, ToggleButtonShim } from './components/Button/index';\nexport { MenuItemShim, shimMenuProps } from './components/Menu/index';\nexport { StackItemShim, StackShim } from './components/Stack/index';\nexport { CheckboxShim } from './components/Checkbox/index';\nexport { black, blackAlpha, brandWeb, createBrandVariants, createV8Theme, createV9Theme, grey, grey14Alpha, hcButtonFace, hcButtonText, hcCanvas, hcCanvasText, hcDisabled, hcHighlight, hcHighlightText, hcHyperlink, sharedColors, white, whiteAlpha } from './components/Theme/index';\n"],"names":["ActionButtonShim","ButtonShim","CommandButtonShim","CompoundButtonShim","DefaultButtonShim","MenuButtonShim","PrimaryButtonShim","shimButtonProps","ToggleButtonShim","MenuItemShim","shimMenuProps","StackItemShim","StackShim","CheckboxShim","black","blackAlpha","brandWeb","createBrandVariants","createV8Theme","createV9Theme","grey","grey14Alpha","hcButtonFace","hcButtonText","hcCanvas","hcCanvasText","hcDisabled","hcHighlight","hcHighlightText","hcHyperlink","sharedColors","white","whiteAlpha"],"mappings":";;;;;;;;;;;IAASA,gBAAgB;eAAhBA,uBAAgB;;IAAEC,UAAU;eAAVA,iBAAU;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;IAAEC,cAAc;eAAdA,qBAAc;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;IAAEC,eAAe;eAAfA,sBAAe;;IAAEC,gBAAgB;eAAhBA,uBAAgB;;IAC5JC,YAAY;eAAZA,oBAAY;;IAAEC,aAAa;eAAbA,qBAAa;;IAC3BC,aAAa;eAAbA,qBAAa;;IAAEC,SAAS;eAATA,iBAAS;;IACxBC,YAAY;eAAZA,oBAAY;;IACZC,KAAK;eAALA,aAAK;;IAAEC,UAAU;eAAVA,kBAAU;;IAAEC,QAAQ;eAARA,gBAAQ;;IAAEC,mBAAmB;eAAnBA,2BAAmB;;IAAEC,aAAa;eAAbA,qBAAa;;IAAEC,aAAa;eAAbA,qBAAa;;IAAEC,IAAI;eAAJA,YAAI;;IAAEC,WAAW;eAAXA,mBAAW;;IAAEC,YAAY;eAAZA,oBAAY;;IAAEC,YAAY;eAAZA,oBAAY;;IAAEC,QAAQ;eAARA,gBAAQ;;IAAEC,YAAY;eAAZA,oBAAY;;IAAEC,UAAU;eAAVA,kBAAU;;IAAEC,WAAW;eAAXA,mBAAW;;IAAEC,eAAe;eAAfA,uBAAe;;IAAEC,WAAW;eAAXA,mBAAW;;IAAEC,YAAY;eAAZA,oBAAY;;IAAEC,KAAK;eAALA,aAAK;;IAAEC,UAAU;eAAVA,kBAAU;;;uBAJzE;wBACjI;wBACH;wBACZ;wBACiO"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-migration-v8-v9",
-  "version": "9.4.44",
+  "version": "9.5.0",
   "description": "Migration shim components and methods for hybrid v8/v9 applications building on Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,10 +32,11 @@
   },
   "dependencies": {
     "@ctrl/tinycolor": "3.3.4",
-    "@fluentui/fluent2-theme": "^8.107.55",
-    "@fluentui/react": "^8.114.1",
-    "@fluentui/react-components": "^9.44.2",
+    "@fluentui/fluent2-theme": "^8.107.56",
+    "@fluentui/react": "^8.114.2",
+    "@fluentui/react-components": "^9.44.3",
     "@fluentui/react-icons": "^2.0.224",
+    "@fluentui/react-hooks": "^8.6.35",
     "@fluentui/react-theme": "^9.1.16",
     "@fluentui/react-utilities": "^9.15.6",
     "@griffel/react": "^1.5.14",