@fluentui/react-tag-picker 9.6.6 → 9.7.0

package/lib-commonjs/components/TagPickerList/useTagPickerListStyles.styles.raw.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    tagPickerListClassNames: function() {
+        return tagPickerListClassNames;
+    },
+    useTagPickerListStyles_unstable: function() {
+        return useTagPickerListStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const tagPickerListClassNames = {
+    root: 'fui-TagPickerList'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        boxShadow: `${_reacttheme.tokens.shadow16}`,
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        maxHeight: '80vh',
+        boxSizing: 'border-box'
+    },
+    collapsed: {
+        display: 'none'
+    }
+});
+const useTagPickerListStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(tagPickerListClassNames.root, styles.root, !state.open && styles.collapsed, state.root.className);
+    return state;
+};

package/lib-commonjs/components/TagPickerList/useTagPickerListStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TagPickerList/useTagPickerListStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerListSlots, TagPickerListState } from './TagPickerList.types';\n\nexport const tagPickerListClassNames: SlotClassNames<TagPickerListSlots> = {\n  root: 'fui-TagPickerList',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    boxShadow: `${tokens.shadow16}`,\n    borderRadius: tokens.borderRadiusMedium,\n    maxHeight: '80vh',\n    boxSizing: 'border-box',\n  },\n\n  collapsed: {\n    display: 'none',\n  },\n});\n\n/**\n * Apply styling to the TagPickerList slots based on the state\n */\nexport const useTagPickerListStyles_unstable = (state: TagPickerListState): TagPickerListState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    tagPickerListClassNames.root,\n    styles.root,\n    !state.open && styles.collapsed,\n    state.root.className,\n  );\n  return state;\n};\n"],"names":["tagPickerListClassNames","useTagPickerListStyles_unstable","root","useStyles","makeStyles","boxShadow","tokens","shadow16","borderRadius","borderRadiusMedium","maxHeight","boxSizing","collapsed","display","state","styles","className","mergeClasses","open"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,uBAAAA;eAAAA;;IAuBAC,+BAAAA;eAAAA;;;uBA5B4B;4BAClB;AAIhB,MAAMD,0BAA8D;IACzEE,MAAM;AACR;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BF,MAAM;QACJG,WAAW,CAAC,EAAEC,kBAAAA,CAAOC,QAAQ,CAAC,CAAC;QAC/BC,cAAcF,kBAAAA,CAAOG,kBAAkB;QACvCC,WAAW;QACXC,WAAW;IACb;IAEAC,WAAW;QACTC,SAAS;IACX;AACF;AAKO,MAAMZ,kCAAkC,CAACa;IAC9C;IAEA,MAAMC,SAASZ;IACfW,MAAMZ,IAAI,CAACc,SAAS,GAAGC,IAAAA,mBAAAA,EACrBjB,wBAAwBE,IAAI,EAC5Ba,OAAOb,IAAI,EACX,CAACY,MAAMI,IAAI,IAAIH,OAAOH,SAAS,EAC/BE,MAAMZ,IAAI,CAACc,SAAS;IAEtB,OAAOF;AACT"}

package/lib-commonjs/components/TagPickerOption/useTagPickerOptionStyles.styles.raw.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    tagPickerOptionClassNames: function() {
+        return tagPickerOptionClassNames;
+    },
+    useTagPickerOptionStyles_unstable: function() {
+        return useTagPickerOptionStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reactcombobox = require("@fluentui/react-combobox");
+const _reacttheme = require("@fluentui/react-theme");
+const tagPickerOptionClassNames = {
+    root: 'fui-TagPickerOption',
+    media: 'fui-TagPickerOption__media',
+    secondaryContent: 'fui-TagPickerOption__secondaryContent'
+};
+const useRootBaseStyle = (0, _react.makeResetStyles)({
+    display: 'flex',
+    alignItems: 'center'
+});
+const useRootStyles = (0, _react.makeStyles)({
+    secondaryContent: {
+        display: 'grid',
+        gridTemplateColumns: 'auto 1fr'
+    }
+});
+const useSecondaryContentBaseStyle = (0, _react.makeResetStyles)({
+    gridColumnStart: 2,
+    gridRowStart: 2,
+    ..._reacttheme.typographyStyles.caption1
+});
+const useMediaBaseStyle = (0, _react.makeResetStyles)({
+    gridRowStart: 'span 2'
+});
+const useTagPickerOptionStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseStyle = useRootBaseStyle();
+    const rootStyles = useRootStyles();
+    const secondaryContentBaseStyle = useSecondaryContentBaseStyle();
+    const mediaBaseStyle = useMediaBaseStyle();
+    state.root.className = (0, _react.mergeClasses)(tagPickerOptionClassNames.root, rootBaseStyle, state.secondaryContent && rootStyles.secondaryContent, state.root.className);
+    (0, _reactcombobox.useOptionStyles_unstable)({
+        ...state,
+        active: false,
+        disabled: false,
+        focusVisible: false,
+        checkIcon: undefined,
+        selected: false
+    });
+    if (state.media) {
+        state.media.className = (0, _react.mergeClasses)(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);
+    }
+    if (state.secondaryContent) {
+        state.secondaryContent.className = (0, _react.mergeClasses)(tagPickerOptionClassNames.secondaryContent, secondaryContentBaseStyle, state.secondaryContent.className);
+    }
+    return state;
+};

package/lib-commonjs/components/TagPickerOption/useTagPickerOptionStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TagPickerOption/useTagPickerOptionStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerOptionSlots, TagPickerOptionState } from './TagPickerOption.types';\nimport { useOptionStyles_unstable } from '@fluentui/react-combobox';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const tagPickerOptionClassNames: SlotClassNames<TagPickerOptionSlots> = {\n  root: 'fui-TagPickerOption',\n  media: 'fui-TagPickerOption__media',\n  secondaryContent: 'fui-TagPickerOption__secondaryContent',\n};\n\nconst useRootBaseStyle = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nconst useRootStyles = makeStyles({\n  secondaryContent: {\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr',\n  },\n});\n\nconst useSecondaryContentBaseStyle = makeResetStyles({\n  gridColumnStart: 2,\n  gridRowStart: 2,\n  ...typographyStyles.caption1,\n});\n\nconst useMediaBaseStyle = makeResetStyles({\n  gridRowStart: 'span 2',\n});\n\n/**\n * Apply styling to the TagPickerOption slots based on the state\n */\nexport const useTagPickerOptionStyles_unstable = (state: TagPickerOptionState): TagPickerOptionState => {\n  'use no memo';\n\n  const rootBaseStyle = useRootBaseStyle();\n  const rootStyles = useRootStyles();\n  const secondaryContentBaseStyle = useSecondaryContentBaseStyle();\n  const mediaBaseStyle = useMediaBaseStyle();\n\n  state.root.className = mergeClasses(\n    tagPickerOptionClassNames.root,\n    rootBaseStyle,\n    state.secondaryContent && rootStyles.secondaryContent,\n    state.root.className,\n  );\n  useOptionStyles_unstable({\n    ...state,\n    active: false,\n    disabled: false,\n    focusVisible: false,\n    checkIcon: undefined,\n    selected: false,\n  });\n  if (state.media) {\n    state.media.className = mergeClasses(tagPickerOptionClassNames.media, mediaBaseStyle, state.media.className);\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      tagPickerOptionClassNames.secondaryContent,\n      secondaryContentBaseStyle,\n      state.secondaryContent.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["tagPickerOptionClassNames","useTagPickerOptionStyles_unstable","root","media","secondaryContent","useRootBaseStyle","makeResetStyles","display","alignItems","useRootStyles","makeStyles","gridTemplateColumns","useSecondaryContentBaseStyle","gridColumnStart","gridRowStart","typographyStyles","caption1","useMediaBaseStyle","state","rootBaseStyle","rootStyles","secondaryContentBaseStyle","mediaBaseStyle","className","mergeClasses","useOptionStyles_unstable","active","disabled","focusVisible","checkIcon","undefined","selected"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,yBAAAA;eAAAA;;IA+BAC,iCAAAA;eAAAA;;;uBArC6C;+BAGjB;4BACR;AAE1B,MAAMD,4BAAkE;IAC7EE,MAAM;IACNC,OAAO;IACPC,kBAAkB;AACpB;AAEA,MAAMC,mBAAmBC,IAAAA,sBAAAA,EAAgB;IACvCC,SAAS;IACTC,YAAY;AACd;AAEA,MAAMC,gBAAgBC,IAAAA,iBAAAA,EAAW;IAC/BN,kBAAkB;QAChBG,SAAS;QACTI,qBAAqB;IACvB;AACF;AAEA,MAAMC,+BAA+BN,IAAAA,sBAAAA,EAAgB;IACnDO,iBAAiB;IACjBC,cAAc;IACd,GAAGC,4BAAAA,CAAiBC,QAAQ;AAC9B;AAEA,MAAMC,oBAAoBX,IAAAA,sBAAAA,EAAgB;IACxCQ,cAAc;AAChB;AAKO,MAAMb,oCAAoC,CAACiB;IAChD;IAEA,MAAMC,gBAAgBd;IACtB,MAAMe,aAAaX;IACnB,MAAMY,4BAA4BT;IAClC,MAAMU,iBAAiBL;IAEvBC,MAAMhB,IAAI,CAACqB,SAAS,GAAGC,IAAAA,mBAAAA,EACrBxB,0BAA0BE,IAAI,EAC9BiB,eACAD,MAAMd,gBAAgB,IAAIgB,WAAWhB,gBAAgB,EACrDc,MAAMhB,IAAI,CAACqB,SAAS;IAEtBE,IAAAA,uCAAAA,EAAyB;QACvB,GAAGP,KAAK;QACRQ,QAAQ;QACRC,UAAU;QACVC,cAAc;QACdC,WAAWC;QACXC,UAAU;IACZ;IACA,IAAIb,MAAMf,KAAK,EAAE;QACfe,MAAMf,KAAK,CAACoB,SAAS,GAAGC,IAAAA,mBAAAA,EAAaxB,0BAA0BG,KAAK,EAAEmB,gBAAgBJ,MAAMf,KAAK,CAACoB,SAAS;IAC7G;IAEA,IAAIL,MAAMd,gBAAgB,EAAE;QAC1Bc,MAAMd,gBAAgB,CAACmB,SAAS,GAAGC,IAAAA,mBAAAA,EACjCxB,0BAA0BI,gBAAgB,EAC1CiB,2BACAH,MAAMd,gBAAgB,CAACmB,SAAS;IAEpC;IAEA,OAAOL;AACT"}

package/lib-commonjs/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.raw.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    tagPickerOptionGroupClassNames: function() {
+        return tagPickerOptionGroupClassNames;
+    },
+    useTagPickerOptionGroupStyles: function() {
+        return useTagPickerOptionGroupStyles;
+    }
+});
+const _react = require("@griffel/react");
+const _reactcombobox = require("@fluentui/react-combobox");
+const tagPickerOptionGroupClassNames = {
+    root: 'fui-TagPickerOptionGroup',
+    label: 'fui-TagPickerOptionGroup__label'
+};
+const useTagPickerOptionGroupStyles = (state)=>{
+    'use no memo';
+    (0, _reactcombobox.useOptionGroupStyles_unstable)(state);
+    state.root.className = (0, _react.mergeClasses)(tagPickerOptionGroupClassNames.root, state.root.className);
+    if (state.label) {
+        state.label.className = (0, _react.mergeClasses)(tagPickerOptionGroupClassNames.label, state.label.className);
+    }
+    return state;
+};

package/lib-commonjs/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TagPickerOptionGroup/useTagPickerOptionGroupStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerOptionGroupSlots, TagPickerOptionGroupState } from './TagPickerOptionGroup.types';\nimport { useOptionGroupStyles_unstable } from '@fluentui/react-combobox';\n\nexport const tagPickerOptionGroupClassNames: SlotClassNames<TagPickerOptionGroupSlots> = {\n  root: 'fui-TagPickerOptionGroup',\n  label: 'fui-TagPickerOptionGroup__label',\n};\n\n/**\n * Apply styling to the TagPickerOptionGroup slots based on the state\n */\nexport const useTagPickerOptionGroupStyles = (state: TagPickerOptionGroupState): TagPickerOptionGroupState => {\n  'use no memo';\n\n  useOptionGroupStyles_unstable(state);\n  state.root.className = mergeClasses(tagPickerOptionGroupClassNames.root, state.root.className);\n\n  if (state.label) {\n    state.label.className = mergeClasses(tagPickerOptionGroupClassNames.label, state.label.className);\n  }\n\n  return state;\n};\n"],"names":["tagPickerOptionGroupClassNames","useTagPickerOptionGroupStyles","root","label","state","useOptionGroupStyles_unstable","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,8BAAAA;eAAAA;;IAQAC,6BAAAA;eAAAA;;;uBAbgB;+BAGiB;AAEvC,MAAMD,iCAA4E;IACvFE,MAAM;IACNC,OAAO;AACT;AAKO,MAAMF,gCAAgC,CAACG;IAC5C;IAEAC,IAAAA,4CAAAA,EAA8BD;IAC9BA,MAAMF,IAAI,CAACI,SAAS,GAAGC,IAAAA,mBAAAA,EAAaP,+BAA+BE,IAAI,EAAEE,MAAMF,IAAI,CAACI,SAAS;IAE7F,IAAIF,MAAMD,KAAK,EAAE;QACfC,MAAMD,KAAK,CAACG,SAAS,GAAGC,IAAAA,mBAAAA,EAAaP,+BAA+BG,KAAK,EAAEC,MAAMD,KAAK,CAACG,SAAS;IAClG;IAEA,OAAOF;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tag-picker",
-  "version": "9.6.6",
+  "version": "9.7.0",
   "description": "FluentUI TagPicker component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,16 +32,16 @@
     "@fluentui/react-shared-contexts": "^9.24.0",
     "@fluentui/react-theme": "^9.1.24",
     "@fluentui/react-utilities": "^9.22.0",
-    "@fluentui/react-portal": "^9.6.4",
-    "@fluentui/react-tabster": "^9.25.3",
-    "@fluentui/react-aria": "^9.15.3",
+    "@fluentui/react-portal": "^9.7.0",
+    "@fluentui/react-tabster": "^9.26.0",
+    "@fluentui/react-aria": "^9.15.4",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-combobox": "^9.15.6",
-    "@fluentui/react-tags": "^9.6.6",
+    "@fluentui/react-combobox": "^9.16.0",
+    "@fluentui/react-tags": "^9.7.0",
     "@fluentui/react-context-selector": "^9.2.2",
-    "@fluentui/react-positioning": "^9.18.5",
+    "@fluentui/react-positioning": "^9.20.0",
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-field": "^9.3.6",
+    "@fluentui/react-field": "^9.4.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },