@fluentui/react-tag-picker 9.0.0

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./TagPickerGroup"), exports);
+_export_star._(require("./TagPickerGroup.types"), exports);
+_export_star._(require("./renderTagPickerGroup"), exports);
+_export_star._(require("./useTagPickerGroup"), exports);
+_export_star._(require("./useTagPickerGroupStyles.styles"), exports);

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './TagPickerGroup';\nexport * from './TagPickerGroup.types';\nexport * from './renderTagPickerGroup';\nexport * from './useTagPickerGroup';\nexport * from './useTagPickerGroupStyles.styles';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/components/TagPickerGroup/renderTagPickerGroup.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderTagPickerGroup_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderTagPickerGroup_unstable;
+    }
+});
+const _reacttags = require("@fluentui/react-tags");
+function renderTagPickerGroup_unstable(state, contexts) {
+    if (!state.hasSelectedOptions) {
+        return null;
+    }
+    return (0, _reacttags.renderTagGroup_unstable)(state, contexts);
+}

package/lib-commonjs/components/TagPickerGroup/renderTagPickerGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderTagPickerGroup.js"],"sourcesContent":["import { renderTagGroup_unstable } from '@fluentui/react-tags';\nexport function renderTagPickerGroup_unstable(state, contexts) {\n    if (!state.hasSelectedOptions) {\n        return null;\n    }\n    return renderTagGroup_unstable(state, contexts);\n}\n"],"names":["renderTagPickerGroup_unstable","state","contexts","hasSelectedOptions","renderTagGroup_unstable"],"mappings":";;;;+BACgBA;;;eAAAA;;;2BADwB;AACjC,SAASA,8BAA8BC,KAAK,EAAEC,QAAQ;IACzD,IAAI,CAACD,MAAME,kBAAkB,EAAE;QAC3B,OAAO;IACX;IACA,OAAOC,IAAAA,kCAAuB,EAACH,OAAOC;AAC1C"}

package/lib-commonjs/components/TagPickerGroup/useTagPickerGroup.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTagPickerGroup_unstable", {
+    enumerable: true,
+    get: function() {
+        return useTagPickerGroup_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reacttags = require("@fluentui/react-tags");
+const _TagPickerContext = require("../../contexts/TagPickerContext");
+const _reactutilities = require("@fluentui/react-utilities");
+const _tagPicker2Tag = require("../../utils/tagPicker2Tag");
+const _reacttabster = require("@fluentui/react-tabster");
+const _keyboardkeys = require("@fluentui/keyboard-keys");
+const useTagPickerGroup_unstable = (props, ref)=>{
+    const hasSelectedOptions = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.selectedOptions.length > 0);
+    const hasOneSelectedOption = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.selectedOptions.length === 1);
+    const triggerRef = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.triggerRef);
+    const tagPickerGroupRef = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.tagPickerGroupRef);
+    const selectOption = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.selectOption);
+    const size = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>(0, _tagPicker2Tag.tagPickerSizeToTagSize)(ctx.size));
+    const appearance = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.appearance);
+    const arrowNavigationProps = (0, _reacttabster.useArrowNavigationGroup)({
+        circular: false,
+        axis: 'both',
+        memorizeCurrent: true
+    });
+    const state = (0, _reacttags.useTagGroup_unstable)({
+        role: 'listbox',
+        ...props,
+        ...arrowNavigationProps,
+        size,
+        appearance: (0, _tagPicker2Tag.tagPickerAppearanceToTagAppearance)(appearance),
+        dismissible: true,
+        onKeyDown: (0, _reactutilities.useEventCallback)((event)=>{
+            var _props_onKeyDown;
+            (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
+            if ((0, _reactutilities.isHTMLElement)(event.target) && event.key === _keyboardkeys.ArrowRight) {
+                var _triggerRef_current;
+                (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
+            }
+        }),
+        onDismiss: (0, _reactutilities.useEventCallback)((event, data)=>{
+            selectOption(event, {
+                value: data.value,
+                // These values no longer exist because the option has unregistered itself
+                // for the purposes of selection - these values aren't actually used
+                id: 'ERROR_DO_NOT_USE',
+                text: 'ERROR_DO_NOT_USE'
+            });
+            if (hasOneSelectedOption && !event.isDefaultPrevented()) {
+                var _triggerRef_current;
+                (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
+            }
+        })
+    }, (0, _reactutilities.useMergedRefs)(ref, tagPickerGroupRef));
+    return {
+        ...state,
+        hasSelectedOptions
+    };
+};

package/lib-commonjs/components/TagPickerGroup/useTagPickerGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTagPickerGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { useTagGroup_unstable } from '@fluentui/react-tags';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { isHTMLElement, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { tagPickerAppearanceToTagAppearance, tagPickerSizeToTagSize } from '../../utils/tagPicker2Tag';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { ArrowRight } from '@fluentui/keyboard-keys';\n/**\n * Create the state required to render TagPickerGroup.\n *\n * The returned state can be modified with hooks such as usePickerTagGroupStyles_unstable,\n * before being passed to renderPickerTagGroup_unstable.\n *\n * @param props - props from this instance of TagPickerGroup\n * @param ref - reference to root HTMLDivElement of TagPickerGroup\n */ export const useTagPickerGroup_unstable = (props, ref)=>{\n    const hasSelectedOptions = useTagPickerContext_unstable((ctx)=>ctx.selectedOptions.length > 0);\n    const hasOneSelectedOption = useTagPickerContext_unstable((ctx)=>ctx.selectedOptions.length === 1);\n    const triggerRef = useTagPickerContext_unstable((ctx)=>ctx.triggerRef);\n    const tagPickerGroupRef = useTagPickerContext_unstable((ctx)=>ctx.tagPickerGroupRef);\n    const selectOption = useTagPickerContext_unstable((ctx)=>ctx.selectOption);\n    const size = useTagPickerContext_unstable((ctx)=>tagPickerSizeToTagSize(ctx.size));\n    const appearance = useTagPickerContext_unstable((ctx)=>ctx.appearance);\n    const arrowNavigationProps = useArrowNavigationGroup({\n        circular: false,\n        axis: 'both',\n        memorizeCurrent: true\n    });\n    const state = useTagGroup_unstable({\n        role: 'listbox',\n        ...props,\n        ...arrowNavigationProps,\n        size,\n        appearance: tagPickerAppearanceToTagAppearance(appearance),\n        dismissible: true,\n        onKeyDown: useEventCallback((event)=>{\n            var _props_onKeyDown;\n            (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);\n            if (isHTMLElement(event.target) && event.key === ArrowRight) {\n                var _triggerRef_current;\n                (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n            }\n        }),\n        onDismiss: useEventCallback((event, data)=>{\n            selectOption(event, {\n                value: data.value,\n                // These values no longer exist because the option has unregistered itself\n                // for the purposes of selection - these values aren't actually used\n                id: 'ERROR_DO_NOT_USE',\n                text: 'ERROR_DO_NOT_USE'\n            });\n            if (hasOneSelectedOption && !event.isDefaultPrevented()) {\n                var _triggerRef_current;\n                (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();\n            }\n        })\n    }, useMergedRefs(ref, tagPickerGroupRef));\n    return {\n        ...state,\n        hasSelectedOptions\n    };\n};\n"],"names":["useTagPickerGroup_unstable","props","ref","hasSelectedOptions","useTagPickerContext_unstable","ctx","selectedOptions","length","hasOneSelectedOption","triggerRef","tagPickerGroupRef","selectOption","size","tagPickerSizeToTagSize","appearance","arrowNavigationProps","useArrowNavigationGroup","circular","axis","memorizeCurrent","state","useTagGroup_unstable","role","tagPickerAppearanceToTagAppearance","dismissible","onKeyDown","useEventCallback","event","_props_onKeyDown","call","isHTMLElement","target","key","ArrowRight","_triggerRef_current","current","focus","onDismiss","data","value","id","text","isDefaultPrevented","useMergedRefs"],"mappings":";;;;+BAeiBA;;;eAAAA;;;;iEAfM;2BACc;kCACQ;gCACkB;+BACY;8BACnC;8BACb;AAShB,MAAMA,6BAA6B,CAACC,OAAOC;IAClD,MAAMC,qBAAqBC,IAAAA,8CAA4B,EAAC,CAACC,MAAMA,IAAIC,eAAe,CAACC,MAAM,GAAG;IAC5F,MAAMC,uBAAuBJ,IAAAA,8CAA4B,EAAC,CAACC,MAAMA,IAAIC,eAAe,CAACC,MAAM,KAAK;IAChG,MAAME,aAAaL,IAAAA,8CAA4B,EAAC,CAACC,MAAMA,IAAII,UAAU;IACrE,MAAMC,oBAAoBN,IAAAA,8CAA4B,EAAC,CAACC,MAAMA,IAAIK,iBAAiB;IACnF,MAAMC,eAAeP,IAAAA,8CAA4B,EAAC,CAACC,MAAMA,IAAIM,YAAY;IACzE,MAAMC,OAAOR,IAAAA,8CAA4B,EAAC,CAACC,MAAMQ,IAAAA,qCAAsB,EAACR,IAAIO,IAAI;IAChF,MAAME,aAAaV,IAAAA,8CAA4B,EAAC,CAACC,MAAMA,IAAIS,UAAU;IACrE,MAAMC,uBAAuBC,IAAAA,qCAAuB,EAAC;QACjDC,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACrB;IACA,MAAMC,QAAQC,IAAAA,+BAAoB,EAAC;QAC/BC,MAAM;QACN,GAAGrB,KAAK;QACR,GAAGc,oBAAoB;QACvBH;QACAE,YAAYS,IAAAA,iDAAkC,EAACT;QAC/CU,aAAa;QACbC,WAAWC,IAAAA,gCAAgB,EAAC,CAACC;YACzB,IAAIC;YACHA,CAAAA,mBAAmB3B,MAAMwB,SAAS,AAAD,MAAO,QAAQG,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBC,IAAI,CAAC5B,OAAO0B;YACrH,IAAIG,IAAAA,6BAAa,EAACH,MAAMI,MAAM,KAAKJ,MAAMK,GAAG,KAAKC,wBAAU,EAAE;gBACzD,IAAIC;gBACHA,CAAAA,sBAAsBzB,WAAW0B,OAAO,AAAD,MAAO,QAAQD,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBE,KAAK;YAC9H;QACJ;QACAC,WAAWX,IAAAA,gCAAgB,EAAC,CAACC,OAAOW;YAChC3B,aAAagB,OAAO;gBAChBY,OAAOD,KAAKC,KAAK;gBACjB,0EAA0E;gBAC1E,oEAAoE;gBACpEC,IAAI;gBACJC,MAAM;YACV;YACA,IAAIjC,wBAAwB,CAACmB,MAAMe,kBAAkB,IAAI;gBACrD,IAAIR;gBACHA,CAAAA,sBAAsBzB,WAAW0B,OAAO,AAAD,MAAO,QAAQD,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBE,KAAK;YAC9H;QACJ;IACJ,GAAGO,IAAAA,6BAAa,EAACzC,KAAKQ;IACtB,OAAO;QACH,GAAGU,KAAK;QACRjB;IACJ;AACJ"}

package/lib-commonjs/components/TagPickerGroup/useTagPickerGroupStyles.styles.js

@@ -0,0 +1,97 @@
+"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, {
+    tagPickerGroupClassNames: function() {
+        return tagPickerGroupClassNames;
+    },
+    useTagPickerGroupStyles_unstable: function() {
+        return useTagPickerGroupStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttags = require("@fluentui/react-tags");
+const _tagPicker2Tag = require("../../utils/tagPicker2Tag");
+const tagPickerGroupClassNames = {
+    root: 'fui-TagPickerGroup'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        Eh141a: "fni485r",
+        B7ck84d: "f1ewtqcl",
+        Bceei9c: "f113hnb5"
+    },
+    medium: {
+        z8tnut: "fp2oml8",
+        z189sj: [
+            "fhxju0i",
+            "f1cnd47f"
+        ],
+        Byoj8tv: "f1tdddsa",
+        uwmqm3: [
+            "f1cnd47f",
+            "fhxju0i"
+        ],
+        i8kkvl: "f1ufnopg",
+        Belr9w4: "f14sijuj"
+    },
+    large: {
+        z8tnut: "f1kwiid1",
+        z189sj: [
+            "fhxju0i",
+            "f1cnd47f"
+        ],
+        Byoj8tv: "f5b47ha",
+        uwmqm3: [
+            "f1cnd47f",
+            "fhxju0i"
+        ],
+        i8kkvl: "f1rjii52",
+        Belr9w4: "f1r7g2jn"
+    },
+    "extra-large": {
+        z8tnut: "f1kwiid1",
+        z189sj: [
+            "fhxju0i",
+            "f1cnd47f"
+        ],
+        Byoj8tv: "f5b47ha",
+        uwmqm3: [
+            "f1cnd47f",
+            "fhxju0i"
+        ],
+        i8kkvl: "f1rjii52",
+        Belr9w4: "f1r7g2jn"
+    }
+}, {
+    d: [
+        ".fni485r{flex-wrap:wrap;}",
+        ".f1ewtqcl{box-sizing:border-box;}",
+        ".f113hnb5{cursor:text;}",
+        ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}",
+        ".fhxju0i{padding-right:0;}",
+        ".f1cnd47f{padding-left:0;}",
+        ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}",
+        ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}",
+        ".f14sijuj{row-gap:var(--spacingHorizontalXS);}",
+        ".f1kwiid1{padding-top:var(--spacingVerticalS);}",
+        ".f5b47ha{padding-bottom:var(--spacingVerticalS);}",
+        ".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}",
+        ".f1r7g2jn{row-gap:var(--spacingHorizontalSNudge);}"
+    ]
+});
+const useTagPickerGroupStyles_unstable = (state)=>{
+    (0, _reacttags.useTagGroupStyles_unstable)(state);
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(tagPickerGroupClassNames.root, styles[(0, _tagPicker2Tag.tagSizeToTagPickerSize)(state.size)], styles.root, state.root.className);
+    return state;
+}; //# sourceMappingURL=useTagPickerGroupStyles.styles.js.map

package/lib-commonjs/components/TagPickerGroup/useTagPickerGroupStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTagPickerGroupStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { useTagGroupStyles_unstable } from '@fluentui/react-tags';\nimport { tokens } from '@fluentui/react-theme';\nimport { tagSizeToTagPickerSize } from '../../utils/tagPicker2Tag';\nexport const tagPickerGroupClassNames = {\n  root: 'fui-TagPickerGroup'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    Eh141a: \"fni485r\",\n    B7ck84d: \"f1ewtqcl\",\n    Bceei9c: \"f113hnb5\"\n  },\n  medium: {\n    z8tnut: \"fp2oml8\",\n    z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n    Byoj8tv: \"f1tdddsa\",\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"],\n    i8kkvl: \"f1ufnopg\",\n    Belr9w4: \"f14sijuj\"\n  },\n  large: {\n    z8tnut: \"f1kwiid1\",\n    z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n    Byoj8tv: \"f5b47ha\",\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"],\n    i8kkvl: \"f1rjii52\",\n    Belr9w4: \"f1r7g2jn\"\n  },\n  \"extra-large\": {\n    z8tnut: \"f1kwiid1\",\n    z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n    Byoj8tv: \"f5b47ha\",\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"],\n    i8kkvl: \"f1rjii52\",\n    Belr9w4: \"f1r7g2jn\"\n  }\n}, {\n  d: [\".fni485r{flex-wrap:wrap;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f113hnb5{cursor:text;}\", \".fp2oml8{padding-top:var(--spacingVerticalSNudge);}\", \".fhxju0i{padding-right:0;}\", \".f1cnd47f{padding-left:0;}\", \".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}\", \".f1ufnopg{column-gap:var(--spacingHorizontalXS);}\", \".f14sijuj{row-gap:var(--spacingHorizontalXS);}\", \".f1kwiid1{padding-top:var(--spacingVerticalS);}\", \".f5b47ha{padding-bottom:var(--spacingVerticalS);}\", \".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}\", \".f1r7g2jn{row-gap:var(--spacingHorizontalSNudge);}\"]\n});\n/**\n * Apply styling to the TagPickerGroup slots based on the state\n */\nexport const useTagPickerGroupStyles_unstable = state => {\n  useTagGroupStyles_unstable(state);\n  const styles = useStyles();\n  state.root.className = mergeClasses(tagPickerGroupClassNames.root, styles[tagSizeToTagPickerSize(state.size)], styles.root, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useTagPickerGroupStyles.styles.js.map"],"names":["tagPickerGroupClassNames","useTagPickerGroupStyles_unstable","root","useStyles","__styles","Eh141a","B7ck84d","Bceei9c","medium","z8tnut","z189sj","Byoj8tv","uwmqm3","i8kkvl","Belr9w4","large","d","state","useTagGroupStyles_unstable","styles","className","mergeClasses","tagSizeToTagPickerSize","size"],"mappings":";;;;;;;;;;;IAIaA,wBAAwB;eAAxBA;;IA0CAC,gCAAgC;eAAhCA;;;uBA9CsC;2BACR;+BAEJ;AAChC,MAAMD,2BAA2B;IACtCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;QACTC,SAAS;IACX;IACAC,QAAQ;QACNC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,QAAQ;QACRC,SAAS;IACX;IACAC,OAAO;QACLN,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,QAAQ;QACRC,SAAS;IACX;IACA,eAAe;QACbL,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDE,GAAG;QAAC;QAA6B;QAAqC;QAA2B;QAAuD;QAA8B;QAA8B;QAA2D;QAAqD;QAAkD;QAAmD;QAAqD;QAAyD;KAAqD;AAC9kB;AAIO,MAAMf,mCAAmCgB,CAAAA;IAC9CC,IAAAA,qCAA0B,EAACD;IAC3B,MAAME,SAAShB;IACfc,MAAMf,IAAI,CAACkB,SAAS,GAAGC,IAAAA,mBAAY,EAACrB,yBAAyBE,IAAI,EAAEiB,MAAM,CAACG,IAAAA,qCAAsB,EAACL,MAAMM,IAAI,EAAE,EAAEJ,OAAOjB,IAAI,EAAEe,MAAMf,IAAI,CAACkB,SAAS;IAChJ,OAAOH;AACT,GACA,0DAA0D"}

package/lib-commonjs/components/TagPickerInput/TagPickerInput.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TagPickerInput", {
+    enumerable: true,
+    get: function() {
+        return TagPickerInput;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useTagPickerInput = require("./useTagPickerInput");
+const _renderTagPickerInput = require("./renderTagPickerInput");
+const _useTagPickerInputStylesstyles = require("./useTagPickerInputStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const TagPickerInput = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useTagPickerInput.useTagPickerInput_unstable)(props, ref);
+    (0, _useTagPickerInputStylesstyles.useTagPickerInputStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTagPickerInputStyles_unstable')(state);
+    return (0, _renderTagPickerInput.renderTagPickerInput_unstable)(state);
+});
+TagPickerInput.displayName = 'TagPickerInput';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["TagPickerInput.js"],"sourcesContent":["import * as React from 'react';\nimport { useTagPickerInput_unstable } from './useTagPickerInput';\nimport { renderTagPickerInput_unstable } from './renderTagPickerInput';\nimport { useTagPickerInputStyles_unstable } from './useTagPickerInputStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * TagPickerInput component -\n * A TagPickerInput is a composite component that allows users to query tags.\n */ export const TagPickerInput = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useTagPickerInput_unstable(props, ref);\n    useTagPickerInputStyles_unstable(state);\n    useCustomStyleHook_unstable('useTagPickerInputStyles_unstable')(state);\n    return renderTagPickerInput_unstable(state);\n});\nTagPickerInput.displayName = 'TagPickerInput';\n"],"names":["TagPickerInput","React","forwardRef","props","ref","state","useTagPickerInput_unstable","useTagPickerInputStyles_unstable","useCustomStyleHook_unstable","renderTagPickerInput_unstable","displayName"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;mCACoB;sCACG;+CACG;qCACL;AAIjC,MAAMA,iBAAiB,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACrE,MAAMC,QAAQC,IAAAA,6CAA0B,EAACH,OAAOC;IAChDG,IAAAA,+DAAgC,EAACF;IACjCG,IAAAA,gDAA2B,EAAC,oCAAoCH;IAChE,OAAOI,IAAAA,mDAA6B,EAACJ;AACzC;AACAL,eAAeU,WAAW,GAAG"}

package/lib-commonjs/components/TagPickerInput/TagPickerInput.types.js

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

package/lib-commonjs/components/TagPickerInput/TagPickerInput.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./TagPickerInput"), exports);
+_export_star._(require("./TagPickerInput.types"), exports);
+_export_star._(require("./renderTagPickerInput"), exports);
+_export_star._(require("./useTagPickerInput"), exports);
+_export_star._(require("./useTagPickerInputStyles.styles"), exports);

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './TagPickerInput';\nexport * from './TagPickerInput.types';\nexport * from './renderTagPickerInput';\nexport * from './useTagPickerInput';\nexport * from './useTagPickerInputStyles.styles';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/components/TagPickerInput/renderTagPickerInput.js

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

package/lib-commonjs/components/TagPickerInput/renderTagPickerInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderTagPickerInput.js"],"sourcesContent":["  import { jsx as _jsx } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of TagPickerInput\n */ export const renderTagPickerInput_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(state.root, {});\n};\n"],"names":["renderTagPickerInput_unstable","state","assertSlots","_jsx","root"],"mappings":";;;;+BAIiBA;;;eAAAA;;;4BAJa;gCACF;AAGjB,MAAMA,gCAAgC,CAACC;IAC9CC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,eAAI,EAACF,MAAMG,IAAI,EAAE,CAAC;AAC3C"}

package/lib-commonjs/components/TagPickerInput/useTagPickerInput.js

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTagPickerInput_unstable", {
+    enumerable: true,
+    get: function() {
+        return useTagPickerInput_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactdom = /*#__PURE__*/ _interop_require_wildcard._(require("react-dom"));
+const _reactaria = require("@fluentui/react-aria");
+const _TagPickerContext = require("../../contexts/TagPickerContext");
+const _reactutilities = require("@fluentui/react-utilities");
+const _keyboardkeys = require("@fluentui/keyboard-keys");
+const _reactcombobox = require("@fluentui/react-combobox");
+const _reactfield = require("@fluentui/react-field");
+const _tokens = require("../../utils/tokens");
+const _reacttabster = require("@fluentui/react-tabster");
+const useTagPickerInput_unstable = (props, ref)=>{
+    props = (0, _reactfield.useFieldControlProps_unstable)(props, {
+        supportsLabelFor: true,
+        supportsRequired: true,
+        supportsSize: true
+    });
+    const { controller: activeDescendantController } = (0, _reactaria.useActiveDescendantContext)();
+    const size = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.size);
+    const contextDisabled = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.disabled);
+    const tagPickerGroupRef = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.tagPickerGroupRef);
+    const triggerRef = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.triggerRef);
+    const selectedOptions = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.selectedOptions);
+    const setValue = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.setValue);
+    const setOpen = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.setOpen);
+    const setHasFocus = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.setHasFocus);
+    const clearSelection = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.clearSelection);
+    const open = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.open);
+    const popoverId = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.popoverId);
+    const selectOption = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.selectOption);
+    const getOptionById = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.getOptionById);
+    const contextValue = (0, _TagPickerContext.useTagPickerContext_unstable)((ctx)=>ctx.value);
+    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        if (!triggerRef.current) {
+            return;
+        }
+        setTagPickerInputStretchStyle(triggerRef.current);
+    }, [
+        selectedOptions,
+        triggerRef
+    ]);
+    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        if (triggerRef.current) {
+            const input = triggerRef.current;
+            const cb = ()=>setTagPickerInputStretchStyle(input);
+            input.addEventListener('input', cb);
+            return ()=>{
+                input.removeEventListener('input', cb);
+            };
+        }
+    }, [
+        triggerRef
+    ]);
+    const { value = contextValue, disabled = contextDisabled } = props;
+    const { findLastFocusable } = (0, _reacttabster.useFocusFinders)();
+    const isTypingRef = _react.useRef(false);
+    const root = (0, _reactcombobox.useInputTriggerSlot)({
+        type: 'text',
+        value: value !== null && value !== void 0 ? value : '',
+        'aria-controls': open ? popoverId : undefined,
+        disabled,
+        ...(0, _reactutilities.getIntrinsicElementProps)('input', props),
+        onKeyDown: (0, _reactutilities.useEventCallback)((event)=>{
+            var _props_onKeyDown;
+            (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);
+            if ((event.key === _keyboardkeys.ArrowLeft || event.key === _keyboardkeys.Backspace) && event.currentTarget.selectionStart === 0 && tagPickerGroupRef.current) {
+                var _findLastFocusable;
+                (_findLastFocusable = findLastFocusable(tagPickerGroupRef.current)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();
+            } else if (event.key === _keyboardkeys.Space) {
+                if (open && !isTypingRef.current) {
+                    setOpen(event, false);
+                }
+            } else if (event.key === _keyboardkeys.Enter) {
+                if (open) {
+                    _reactdom.unstable_batchedUpdates(()=>{
+                        setValue(undefined);
+                        setOpen(event, false);
+                    });
+                } else {
+                    setOpen(event, true);
+                }
+            }
+            isTypingRef.current = event.key.length === 1 && event.code !== _keyboardkeys.Space && !event.altKey && !event.ctrlKey && !event.metaKey;
+        })
+    }, (0, _reactutilities.useMergedRefs)(triggerRef, ref), {
+        activeDescendantController,
+        freeform: false,
+        state: {
+            clearSelection,
+            getOptionById,
+            open,
+            selectedOptions,
+            selectOption,
+            setHasFocus,
+            setOpen,
+            setValue,
+            multiselect: true,
+            value: props.value
+        }
+    });
+    const state = {
+        components: {
+            root: 'input'
+        },
+        root,
+        disabled,
+        size
+    };
+    return state;
+};
+/**
+ * while typing the user might need a bit more of space to see the text,
+ * which means the input should stretch to 100% width
+ * occupying a whole new line.
+ *
+ * This function will set the CSS variable `--width` to `100%` if the scrollWidth is greater than the offsetWidth,
+ * meaning the text is overflowing the input.
+ *
+ * @param input - input element to apply the style
+ * @returns void
+ */ const setTagPickerInputStretchStyle = (input)=>{
+    // first we need to remove the CSS variable
+    // to properly calculate the difference between scrollWidth and offsetWidth
+    input.style.removeProperty(_tokens.tagPickerInputCSSRules.width);
+    if (input.scrollWidth > input.offsetWidth + 1) {
+        input.style.setProperty(_tokens.tagPickerInputCSSRules.width, '100%');
+    } else {
+        input.style.removeProperty(_tokens.tagPickerInputCSSRules.width);
+    }
+};

package/lib-commonjs/components/TagPickerInput/useTagPickerInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTagPickerInput.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { useMergedRefs, getIntrinsicElementProps, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { ArrowLeft, Backspace, Enter, Space } from '@fluentui/keyboard-keys';\nimport { useInputTriggerSlot } from '@fluentui/react-combobox';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { tagPickerInputCSSRules } from '../../utils/tokens';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n/**\n * Create the state required to render TagPickerInput.\n *\n * The returned state can be modified with hooks such as useTagPickerInputStyles_unstable,\n * before being passed to renderTagPickerInput_unstable.\n *\n * @param props - props from this instance of TagPickerInput\n * @param ref - reference to root HTMLDivElement of TagPickerInput\n */ export const useTagPickerInput_unstable = (props, ref)=>{\n    props = useFieldControlProps_unstable(props, {\n        supportsLabelFor: true,\n        supportsRequired: true,\n        supportsSize: true\n    });\n    const { controller: activeDescendantController } = useActiveDescendantContext();\n    const size = useTagPickerContext_unstable((ctx)=>ctx.size);\n    const contextDisabled = useTagPickerContext_unstable((ctx)=>ctx.disabled);\n    const tagPickerGroupRef = useTagPickerContext_unstable((ctx)=>ctx.tagPickerGroupRef);\n    const triggerRef = useTagPickerContext_unstable((ctx)=>ctx.triggerRef);\n    const selectedOptions = useTagPickerContext_unstable((ctx)=>ctx.selectedOptions);\n    const setValue = useTagPickerContext_unstable((ctx)=>ctx.setValue);\n    const setOpen = useTagPickerContext_unstable((ctx)=>ctx.setOpen);\n    const setHasFocus = useTagPickerContext_unstable((ctx)=>ctx.setHasFocus);\n    const clearSelection = useTagPickerContext_unstable((ctx)=>ctx.clearSelection);\n    const open = useTagPickerContext_unstable((ctx)=>ctx.open);\n    const popoverId = useTagPickerContext_unstable((ctx)=>ctx.popoverId);\n    const selectOption = useTagPickerContext_unstable((ctx)=>ctx.selectOption);\n    const getOptionById = useTagPickerContext_unstable((ctx)=>ctx.getOptionById);\n    const contextValue = useTagPickerContext_unstable((ctx)=>ctx.value);\n    useIsomorphicLayoutEffect(()=>{\n        if (!triggerRef.current) {\n            return;\n        }\n        setTagPickerInputStretchStyle(triggerRef.current);\n    }, [\n        selectedOptions,\n        triggerRef\n    ]);\n    useIsomorphicLayoutEffect(()=>{\n        if (triggerRef.current) {\n            const input = triggerRef.current;\n            const cb = ()=>setTagPickerInputStretchStyle(input);\n            input.addEventListener('input', cb);\n            return ()=>{\n                input.removeEventListener('input', cb);\n            };\n        }\n    }, [\n        triggerRef\n    ]);\n    const { value = contextValue, disabled = contextDisabled } = props;\n    const { findLastFocusable } = useFocusFinders();\n    const isTypingRef = React.useRef(false);\n    const root = useInputTriggerSlot({\n        type: 'text',\n        value: value !== null && value !== void 0 ? value : '',\n        'aria-controls': open ? popoverId : undefined,\n        disabled,\n        ...getIntrinsicElementProps('input', props),\n        onKeyDown: useEventCallback((event)=>{\n            var _props_onKeyDown;\n            (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);\n            if ((event.key === ArrowLeft || event.key === Backspace) && event.currentTarget.selectionStart === 0 && tagPickerGroupRef.current) {\n                var _findLastFocusable;\n                (_findLastFocusable = findLastFocusable(tagPickerGroupRef.current)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();\n            } else if (event.key === Space) {\n                if (open && !isTypingRef.current) {\n                    setOpen(event, false);\n                }\n            } else if (event.key === Enter) {\n                if (open) {\n                    ReactDOM.unstable_batchedUpdates(()=>{\n                        setValue(undefined);\n                        setOpen(event, false);\n                    });\n                } else {\n                    setOpen(event, true);\n                }\n            }\n            isTypingRef.current = event.key.length === 1 && event.code !== Space && !event.altKey && !event.ctrlKey && !event.metaKey;\n        })\n    }, useMergedRefs(triggerRef, ref), {\n        activeDescendantController,\n        freeform: false,\n        state: {\n            clearSelection,\n            getOptionById,\n            open,\n            selectedOptions,\n            selectOption,\n            setHasFocus,\n            setOpen,\n            setValue,\n            multiselect: true,\n            value: props.value\n        }\n    });\n    const state = {\n        components: {\n            root: 'input'\n        },\n        root,\n        disabled,\n        size\n    };\n    return state;\n};\n/**\n * while typing the user might need a bit more of space to see the text,\n * which means the input should stretch to 100% width\n * occupying a whole new line.\n *\n * This function will set the CSS variable `--width` to `100%` if the scrollWidth is greater than the offsetWidth,\n * meaning the text is overflowing the input.\n *\n * @param input - input element to apply the style\n * @returns void\n */ const setTagPickerInputStretchStyle = (input)=>{\n    // first we need to remove the CSS variable\n    // to properly calculate the difference between scrollWidth and offsetWidth\n    input.style.removeProperty(tagPickerInputCSSRules.width);\n    if (input.scrollWidth > input.offsetWidth + 1) {\n        input.style.setProperty(tagPickerInputCSSRules.width, '100%');\n    } else {\n        input.style.removeProperty(tagPickerInputCSSRules.width);\n    }\n};\n"],"names":["useTagPickerInput_unstable","props","ref","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","controller","activeDescendantController","useActiveDescendantContext","size","useTagPickerContext_unstable","ctx","contextDisabled","disabled","tagPickerGroupRef","triggerRef","selectedOptions","setValue","setOpen","setHasFocus","clearSelection","open","popoverId","selectOption","getOptionById","contextValue","value","useIsomorphicLayoutEffect","current","setTagPickerInputStretchStyle","input","cb","addEventListener","removeEventListener","findLastFocusable","useFocusFinders","isTypingRef","React","useRef","root","useInputTriggerSlot","type","undefined","getIntrinsicElementProps","onKeyDown","useEventCallback","event","_props_onKeyDown","call","key","ArrowLeft","Backspace","currentTarget","selectionStart","_findLastFocusable","focus","Space","Enter","ReactDOM","unstable_batchedUpdates","length","code","altKey","ctrlKey","metaKey","useMergedRefs","freeform","state","multiselect","components","style","removeProperty","tagPickerInputCSSRules","width","scrollWidth","offsetWidth","setProperty"],"mappings":"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"}

package/lib-commonjs/components/TagPickerInput/useTagPickerInputStyles.styles.js

@@ -0,0 +1,122 @@
+"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, {
+    tagPickerInputClassNames: function() {
+        return tagPickerInputClassNames;
+    },
+    useTagPickerInputStyles_unstable: function() {
+        return useTagPickerInputStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const tagPickerInputClassNames = {
+    root: 'fui-TagPickerInput'
+};
+const useBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("rk7r7zd", "r123qfvl", [
+    ".rk7r7zd{background-color:var(--colorTransparentBackground);color:var(--colorNeutralForeground1);font-family:var(--fontFamilyBase);box-sizing:border-box;border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;min-width:24px;max-width:100%;width:var(--fluent-TagPickerInput__width, 0);flex-grow:1;}",
+    ".rk7r7zd:focus{outline-style:none;}",
+    ".rk7r7zd::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}",
+    ".rk7r7zd::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}",
+    ".rk7r7zd:-ms-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}",
+    ".rk7r7zd::placeholder{color:var(--colorNeutralForeground4);opacity:1;}",
+    ".rk7r7zd::after{visibility:hidden;white-space:pre-wrap;}",
+    ".r123qfvl{background-color:var(--colorTransparentBackground);color:var(--colorNeutralForeground1);font-family:var(--fontFamilyBase);box-sizing:border-box;border-top-width:0;border-left-width:0;border-bottom-width:0;border-right-width:0;min-width:24px;max-width:100%;width:var(--fluent-TagPickerInput__width, 0);flex-grow:1;}",
+    ".r123qfvl:focus{outline-style:none;}",
+    ".r123qfvl::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}",
+    ".r123qfvl::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}",
+    ".r123qfvl:-ms-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}",
+    ".r123qfvl::placeholder{color:var(--colorNeutralForeground4);opacity:1;}",
+    ".r123qfvl::after{visibility:hidden;white-space:pre-wrap;}"
+]);
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    medium: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi",
+        z8tnut: "fp2oml8",
+        z189sj: [
+            "fhxju0i",
+            "f1cnd47f"
+        ],
+        Byoj8tv: "f1tdddsa",
+        uwmqm3: [
+            "f1cnd47f",
+            "fhxju0i"
+        ]
+    },
+    large: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi",
+        z8tnut: "f1ngh7ph",
+        z189sj: [
+            "fhxju0i",
+            "f1cnd47f"
+        ],
+        Byoj8tv: "f5o476b",
+        uwmqm3: [
+            "f1cnd47f",
+            "fhxju0i"
+        ]
+    },
+    "extra-large": {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi",
+        z8tnut: "f5yzyt",
+        z189sj: [
+            "fhxju0i",
+            "f1cnd47f"
+        ],
+        Byoj8tv: "fx3omr",
+        uwmqm3: [
+            "f1cnd47f",
+            "fhxju0i"
+        ]
+    },
+    disabled: {
+        sj55zd: "f1s2aq7o",
+        De3pzq: "f1c21dwh",
+        Bceei9c: "fdrzuqr",
+        yvdlaj: "fahhnxm"
+    }
+}, {
+    d: [
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}",
+        ".fhxju0i{padding-right:0;}",
+        ".f1cnd47f{padding-left:0;}",
+        ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}",
+        ".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}",
+        ".f5o476b{padding-bottom:var(--spacingVerticalMNudge);}",
+        ".f5yzyt{padding-top:var(--spacingVerticalM);}",
+        ".fx3omr{padding-bottom:var(--spacingVerticalM);}",
+        ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
+        ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
+        ".fdrzuqr{cursor:not-allowed;}",
+        ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}",
+        ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"
+    ]
+});
+const useTagPickerInputStyles_unstable = (state)=>{
+    const baseStyle = useBaseStyle();
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(tagPickerInputClassNames.root, baseStyle, styles[state.size], state.disabled && styles.disabled, state.root.className);
+    return state;
+}; //# sourceMappingURL=useTagPickerInputStyles.styles.js.map

package/lib-commonjs/components/TagPickerInput/useTagPickerInputStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useTagPickerInputStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { typographyStyles, tokens } from '@fluentui/react-theme';\nimport { tagPickerInputTokens } from '../../utils/tokens';\nexport const tagPickerInputClassNames = {\n  root: 'fui-TagPickerInput'\n};\nconst useBaseStyle = /*#__PURE__*/__resetStyles(\"rk7r7zd\", \"r123qfvl\", [\".rk7r7zd{background-color:var(--colorTransparentBackground);color:var(--colorNeutralForeground1);font-family:var(--fontFamilyBase);box-sizing:border-box;border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;min-width:24px;max-width:100%;width:var(--fluent-TagPickerInput__width, 0);flex-grow:1;}\", \".rk7r7zd:focus{outline-style:none;}\", \".rk7r7zd::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}\", \".rk7r7zd::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}\", \".rk7r7zd:-ms-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}\", \".rk7r7zd::placeholder{color:var(--colorNeutralForeground4);opacity:1;}\", \".rk7r7zd::after{visibility:hidden;white-space:pre-wrap;}\", \".r123qfvl{background-color:var(--colorTransparentBackground);color:var(--colorNeutralForeground1);font-family:var(--fontFamilyBase);box-sizing:border-box;border-top-width:0;border-left-width:0;border-bottom-width:0;border-right-width:0;min-width:24px;max-width:100%;width:var(--fluent-TagPickerInput__width, 0);flex-grow:1;}\", \".r123qfvl:focus{outline-style:none;}\", \".r123qfvl::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}\", \".r123qfvl::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}\", \".r123qfvl:-ms-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}\", \".r123qfvl::placeholder{color:var(--colorNeutralForeground4);opacity:1;}\", \".r123qfvl::after{visibility:hidden;white-space:pre-wrap;}\"]);\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  medium: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\",\n    z8tnut: \"fp2oml8\",\n    z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n    Byoj8tv: \"f1tdddsa\",\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"]\n  },\n  large: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\",\n    z8tnut: \"f1ngh7ph\",\n    z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n    Byoj8tv: \"f5o476b\",\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"]\n  },\n  \"extra-large\": {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\",\n    z8tnut: \"f5yzyt\",\n    z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n    Byoj8tv: \"fx3omr\",\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"]\n  },\n  disabled: {\n    sj55zd: \"f1s2aq7o\",\n    De3pzq: \"f1c21dwh\",\n    Bceei9c: \"fdrzuqr\",\n    yvdlaj: \"fahhnxm\"\n  }\n}, {\n  d: [\".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", \".fp2oml8{padding-top:var(--spacingVerticalSNudge);}\", \".fhxju0i{padding-right:0;}\", \".f1cnd47f{padding-left:0;}\", \".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}\", \".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}\", \".f5o476b{padding-bottom:var(--spacingVerticalMNudge);}\", \".f5yzyt{padding-top:var(--spacingVerticalM);}\", \".fx3omr{padding-bottom:var(--spacingVerticalM);}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".f1c21dwh{background-color:var(--colorTransparentBackground);}\", \".fdrzuqr{cursor:not-allowed;}\", \".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}\", \".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}\"]\n});\n/**\n * Apply styling to the TagPickerInput slots based on the state\n */\nexport const useTagPickerInputStyles_unstable = state => {\n  const baseStyle = useBaseStyle();\n  const styles = useStyles();\n  state.root.className = mergeClasses(tagPickerInputClassNames.root, baseStyle, styles[state.size], state.disabled && styles.disabled, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useTagPickerInputStyles.styles.js.map"],"names":["tagPickerInputClassNames","useTagPickerInputStyles_unstable","root","useBaseStyle","__resetStyles","useStyles","__styles","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","large","disabled","sj55zd","De3pzq","Bceei9c","yvdlaj","d","state","baseStyle","styles","className","mergeClasses","size"],"mappings":";;;;;;;;;;;IAGaA,wBAAwB;eAAxBA;;IAkDAC,gCAAgC;eAAhCA;;;uBArDqD;AAG3D,MAAMD,2BAA2B;IACtCE,MAAM;AACR;AACA,MAAMC,eAAe,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,YAAY;IAAC;IAAuU;IAAuC;IAAwF;IAA+E;IAAmF;IAA0E;IAA4D;IAAwU;IAAwC;IAAyF;IAAgF;IAAoF;IAA2E;CAA4D;AAC1iD;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,QAAQ;QACNC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;IACjC;IACAC,OAAO;QACLR,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;IACjC;IACA,eAAe;QACbP,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;IACjC;IACAE,UAAU;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAAgD;QAA+C;QAAmD;QAAoD;QAAuD;QAA8B;QAA8B;QAA2D;QAAwD;QAA0D;QAAiD;QAAoD;QAA2D;QAAkE;QAAiC;QAAqF;KAA2E;AAC/4B;AAIO,MAAMrB,mCAAmCsB,CAAAA;IAC9C,MAAMC,YAAYrB;IAClB,MAAMsB,SAASpB;IACfkB,MAAMrB,IAAI,CAACwB,SAAS,GAAGC,IAAAA,mBAAY,EAAC3B,yBAAyBE,IAAI,EAAEsB,WAAWC,MAAM,CAACF,MAAMK,IAAI,CAAC,EAAEL,MAAMN,QAAQ,IAAIQ,OAAOR,QAAQ,EAAEM,MAAMrB,IAAI,CAACwB,SAAS;IACzJ,OAAOH;AACT,GACA,0DAA0D"}

package/lib-commonjs/components/TagPickerList/TagPickerList.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TagPickerList", {
+    enumerable: true,
+    get: function() {
+        return TagPickerList;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useTagPickerList = require("./useTagPickerList");
+const _renderTagPickerList = require("./renderTagPickerList");
+const _useTagPickerListStylesstyles = require("./useTagPickerListStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const TagPickerList = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useTagPickerList.useTagPickerList_unstable)(props, ref);
+    (0, _useTagPickerListStylesstyles.useTagPickerListStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTagPickerListStyles_unstable')(state);
+    return (0, _renderTagPickerList.renderTagPickerList_unstable)(state);
+});
+TagPickerList.displayName = 'TagPickerList';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["TagPickerList.js"],"sourcesContent":["import * as React from 'react';\nimport { useTagPickerList_unstable } from './useTagPickerList';\nimport { renderTagPickerList_unstable } from './renderTagPickerList';\nimport { useTagPickerListStyles_unstable } from './useTagPickerListStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * TagPickerList component -\n * A TagPickerList is a composite component that allows users to display a list of tag options to be selected.\n */ export const TagPickerList = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useTagPickerList_unstable(props, ref);\n    useTagPickerListStyles_unstable(state);\n    useCustomStyleHook_unstable('useTagPickerListStyles_unstable')(state);\n    return renderTagPickerList_unstable(state);\n});\nTagPickerList.displayName = 'TagPickerList';\n"],"names":["TagPickerList","React","forwardRef","props","ref","state","useTagPickerList_unstable","useTagPickerListStyles_unstable","useCustomStyleHook_unstable","renderTagPickerList_unstable","displayName"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;kCACmB;qCACG;8CACG;qCACJ;AAIjC,MAAMA,gBAAgB,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACpE,MAAMC,QAAQC,IAAAA,2CAAyB,EAACH,OAAOC;IAC/CG,IAAAA,6DAA+B,EAACF;IAChCG,IAAAA,gDAA2B,EAAC,mCAAmCH;IAC/D,OAAOI,IAAAA,iDAA4B,EAACJ;AACxC;AACAL,cAAcU,WAAW,GAAG"}