@fluentui/react-icons 2.0.211 → 2.0.214

package/lib-cjs/utils/fonts/createFluentFontIcon.d.ts

@@ -5,6 +5,9 @@ export declare const enum FontFile {
     Regular = 1,
     Resizable = 2
 }
-export declare function createFluentFontIcon(displayName: string, codepoint: string, font: FontFile, fontSize?: number): React.FC<FluentIconsProps<React.HTMLAttributes<HTMLElement>>> & {
+export declare type CreateFluentFontIconOptions = {
+    flipInRtl?: boolean;
+};
+export declare function createFluentFontIcon(displayName: string, codepoint: string, font: FontFile, fontSize?: number, options?: CreateFluentFontIconOptions): React.FC<FluentIconsProps<React.HTMLAttributes<HTMLElement>>> & {
     codepoint: string;
 };

package/lib-cjs/utils/fonts/createFluentFontIcon.js

@@ -62,7 +62,7 @@ const useRootStyles = react_1.__styles({
   "d": [".f9dzkbp{font-family:FluentSystemIconsFilled;}", ".f1krtbx5{font-family:FluentSystemIconsRegular;}", ".f1sxfq9t{font-family:FluentSystemIcons;}", ".f14t3ns0{display:inline-block;}", ".fmd4ok8{font-style:normal;}", ".fne0op0{line-height:1em;}"],
   "t": ["@media (forced-colors: active){.fg4l7m0{forced-color-adjust:auto;}}"]
 });
-function createFluentFontIcon(displayName, codepoint, font, fontSize) {
+function createFluentFontIcon(displayName, codepoint, font, fontSize, options) {
   const Component = props => {
     useStaticStyles();
     const styles = useRootStyles();
@@ -70,6 +70,8 @@ function createFluentFontIcon(displayName, codepoint, font, fontSize) {
     const state = useIconState_1.useIconState({
       ...props,
       className
+    }, {
+      flipInRtl: options === null || options === void 0 ? void 0 : options.flipInRtl
     });
     // We want to keep the same API surface as the SVG icons, so translate `primaryFill` to `color`
     if (props.primaryFill) {

package/lib-cjs/utils/useIconState.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
 import { FluentIconsProps } from "./FluentIconsProps.types";
-export declare const useIconState: <TBaseAttributes extends import("react").HTMLAttributes<HTMLElement> | import("react").SVGAttributes<SVGElement> = import("react").SVGAttributes<SVGElement>>(props: FluentIconsProps<TBaseAttributes>) => Pick<FluentIconsProps<TBaseAttributes>, "title" | "filled" | "ref" | "key" | "className" | Exclude<keyof TBaseAttributes, "primaryFill">>;
+export declare type UseIconStateOptions = {
+    flipInRtl?: boolean;
+};
+export declare const useIconState: <TBaseAttributes extends import("react").HTMLAttributes<HTMLElement> | import("react").SVGAttributes<SVGElement> = import("react").SVGAttributes<SVGElement>>(props: FluentIconsProps<TBaseAttributes>, options?: UseIconStateOptions | undefined) => Pick<FluentIconsProps<TBaseAttributes>, "title" | "filled" | "ref" | "key" | "className" | Exclude<keyof TBaseAttributes, "primaryFill">>;

package/lib-cjs/utils/useIconState.js

@@ -4,18 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useIconState = void 0;
+const contexts_1 = require("../contexts");
 const react_1 = require("@griffel/react");
 const useRootStyles = react_1.__styles({
   "root": {
     "mc9l5x": "f1w7gpdv",
     "Bg96gwp": "fez10in",
     "ycbfsm": "fg4l7m0"
+  },
+  "rtl": {
+    "Bz10aip": "f13rod7r"
   }
 }, {
-  "d": [".f1w7gpdv{display:inline;}", ".fez10in{line-height:0;}"],
+  "d": [".f1w7gpdv{display:inline;}", ".fez10in{line-height:0;}", ".f13rod7r{-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1);}"],
   "t": ["@media (forced-colors: active){.fg4l7m0{forced-color-adjust:auto;}}"]
 });
-const useIconState = props => {
+const useIconState = (props, options) => {
   const {
     title,
     primaryFill = "currentColor",
@@ -27,7 +31,8 @@ const useIconState = props => {
     fill: primaryFill
   };
   const styles = useRootStyles();
-  state.className = react_1.mergeClasses(styles.root, state.className);
+  const iconContext = contexts_1.useIconContext();
+  state.className = react_1.mergeClasses(styles.root, (options === null || options === void 0 ? void 0 : options.flipInRtl) && (iconContext === null || iconContext === void 0 ? void 0 : iconContext.textDirection) === 'rtl' && styles.rtl, state.className);
   if (title) {
     state['aria-label'] = title;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-icons",
-  "version": "2.0.211",
+  "version": "2.0.214",
   "sideEffects": false,
   "main": "lib-cjs/index.js",
   "module": "lib/index.js",
@@ -13,19 +13,21 @@
   },
   "scripts": {
     "clean": "find ./src -type f ! -name \"wrapIcon.tsx\" -name \"*.tsx\" -delete",
-    "cleanSvg": "rm -rf ./intermediate",
+    "clean:svg": "rm -rf ./intermediate",
     "copy": "node ../../importer/generate.js --source=../../assets --dest=./intermediate --extension=svg --target=react",
     "copy:font-files": "cpy './src/utils/fonts/*.{ttf,woff,woff2,json}' ./lib/utils/fonts/. && cpy './src/utils/fonts/*.{ttf,woff,woff2,json}' ./lib-cjs/utils/fonts/.",
-    "convert:svg": "node convert.js --source=./intermediate --dest=./src",
-    "convert:fonts": "node convert-font.js --source=./src/utils/fonts --dest=./src/fonts --codepointDest=./src/utils/fonts",
+    "convert:svg": "node convert.js --source=./intermediate --dest=./src --rtl=./intermediate/rtl.json",
+    "convert:fonts": "node convert-font.js --source=./src/utils/fonts --dest=./src/fonts --codepointDest=./src/utils/fonts --rtl=./intermediate/rtl.json",
     "generate:font-regular": "node ../../importer/generateFont.js --source=intermediate --dest=src/utils/fonts --iconType=Regular --codepoints=../../fonts/FluentSystemIcons-Regular.json",
     "generate:font-filled": "node ../../importer/generateFont.js --source=intermediate --dest=src/utils/fonts --iconType=Filled --codepoints=../../fonts/FluentSystemIcons-Filled.json",
     "generate:font-resizable": "node ../../importer/generateFont.js --source=intermediate --dest=src/utils/fonts --iconType=Resizable",
     "generate:font": "npm run generate:font-regular && npm run generate:font-filled && npm run generate:font-resizable",
+    "generate:rtl": "node ../../importer/rtlMetadata.js --source=../../assets --dest=./intermediate/rtl.json",
     "rollup": "node ./generateRollup.js",
     "optimize": "svgo --config svgo.config.js --folder=./intermediate --precision=2",
     "unfill": "find ./intermediate -type f -name \"*.svg\" -exec sed -i.bak 's/fill=\"none\"//g' {} \\; && find ./intermediate -type f -name \"*.bak\" -delete",
-    "build": "npm run copy && npm run generate:font && npm run optimize && npm run unfill && npm run convert:svg && npm run convert:fonts && npm run cleanSvg && npm run build:esm && npm run build:cjs && npm run copy:font-files",
+    "build": "npm run copy && npm run generate:font && npm run generate:rtl && npm run optimize && npm run unfill && npm run convert:svg && npm run convert:fonts && npm run clean:svg && npm run build:esm && npm run build:cjs && npm run copy:font-files",
+    "build:svg": "npm run copy && npm run generate:rtl && npm run optimize && npm run unfill && npm run convert:svg && npm run clean:svg && npm run build:esm && npm run build:cjs",
     "build:cjs": "tsc --module commonjs --outDir lib-cjs && babel lib-cjs --out-dir lib-cjs",
     "build:esm": "tsc && babel lib --out-dir lib"
   },