@fluentui/react-tag-picker 9.7.5 → 9.7.7

package/CHANGELOG.md

@@ -1,27 +1,70 @@
 # Change Log - @fluentui/react-tag-picker
 
-This log was last generated on Thu, 21 Aug 2025 12:20:25 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Oct 2025 15:07:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.7.7)
+
+Thu, 02 Oct 2025 15:07:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.7.6..@fluentui/react-tag-picker_v9.7.7)
+
+### Patches
+
+- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
+- fix: render portal only when popover is defined to prevent hydration mismatch ([PR #35182](https://github.com/microsoft/fluentui/pull/35182) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.2.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-portal to v9.8.3 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-tabster to v9.26.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-aria to v9.17.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-combobox to v9.16.7 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-tags to v9.7.7 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.8 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-positioning to v9.20.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-field to v9.4.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+
+## [9.7.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.7.6)
+
+Mon, 08 Sep 2025 12:50:43 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.7.5..@fluentui/react-tag-picker_v9.7.6)
+
+### Patches
+
+- fix: react 19 type issues ([PR #34864](https://github.com/microsoft/fluentui/pull/34864) by dmytrokirpa@microsoft.com)
+- chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
+- chore: enforce explicit module boundary types ([PR #35080](https://github.com/microsoft/fluentui/pull/35080) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.2.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-portal to v9.8.2 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-tabster to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-aria to v9.17.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-combobox to v9.16.6 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-tags to v9.7.6 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.7 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-positioning to v9.20.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-field to v9.4.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+
 ## [9.7.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.7.5)
 
-Thu, 21 Aug 2025 12:20:25 GMT 
+Thu, 21 Aug 2025 12:25:21 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tag-picker_v9.7.4..@fluentui/react-tag-picker_v9.7.5)
 
 ### Patches
 
-- Bump @fluentui/react-jsx-runtime to v9.1.6 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.25.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-utilities to v9.24.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-portal to v9.8.1 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-tabster to v9.26.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-aria to v9.16.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-combobox to v9.16.5 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-tags to v9.7.5 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-context-selector to v9.2.6 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-positioning to v9.20.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-field to v9.4.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-portal to v9.8.1 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-tabster to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-aria to v9.16.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-combobox to v9.16.5 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-tags to v9.7.5 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-positioning to v9.20.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-field to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
 
 ## [9.7.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tag-picker_v9.7.4)
 

package/dist/index.d.ts

@@ -34,29 +34,29 @@ export declare const renderTagPicker_unstable: (state: TagPickerState, contexts:
 /**
  * Render the final JSX of PickerButton
  */
-export declare const renderTagPickerButton_unstable: (state: TagPickerButtonState) => JSX.Element;
+export declare const renderTagPickerButton_unstable: (state: TagPickerButtonState) => JSXElement;
 
 /**
  * Render the final JSX of PickerControl
  */
-export declare const renderTagPickerControl_unstable: (state: TagPickerControlState) => JSX.Element;
+export declare const renderTagPickerControl_unstable: (state: TagPickerControlState) => JSXElement;
 
-export declare function renderTagPickerGroup_unstable(state: TagPickerGroupState, contexts: TagGroupContextValues): JSX.Element | null;
+export declare function renderTagPickerGroup_unstable(state: TagPickerGroupState, contexts: TagGroupContextValues): JSXElement | null;
 
 /**
  * Render the final JSX of TagPickerInput
  */
-export declare const renderTagPickerInput_unstable: (state: TagPickerInputState) => JSX.Element;
+export declare const renderTagPickerInput_unstable: (state: TagPickerInputState) => JSXElement;
 
 /**
  * Render the final JSX of TagPickerList
  */
-export declare const renderTagPickerList_unstable: (state: TagPickerListState) => JSX.Element;
+export declare const renderTagPickerList_unstable: (state: TagPickerListState) => JSXElement;
 
 /**
  * Render the final JSX of TagPickerOption
  */
-export declare const renderTagPickerOption_unstable: (state: TagPickerOptionState) => JSX.Element;
+export declare const renderTagPickerOption_unstable: (state: TagPickerOptionState) => JSXElement;
 
 /**
  * Render the final JSX of TagPickerOptionGroup
@@ -96,12 +96,12 @@ export declare type TagPickerButtonState = ComponentState<TagPickerButtonSlots>
 };
 
 export declare interface TagPickerContextValue extends Pick<ComboboxBaseState, 'open' | 'clearSelection' | 'getOptionById' | 'selectedOptions' | 'selectOption' | 'setHasFocus' | 'setOpen' | 'setValue' | 'value' | 'appearance' | 'disabled'> {
-    triggerRef: React_2.RefObject<HTMLInputElement | HTMLButtonElement>;
-    popoverRef: React_2.RefObject<HTMLDivElement>;
+    triggerRef: React_2.RefObject<HTMLInputElement | HTMLButtonElement | null>;
+    popoverRef: React_2.RefObject<HTMLDivElement | null>;
     popoverId: string;
-    targetRef: React_2.RefObject<HTMLDivElement>;
-    secondaryActionRef: React_2.RefObject<HTMLSpanElement>;
-    tagPickerGroupRef: React_2.RefObject<HTMLDivElement>;
+    targetRef: React_2.RefObject<HTMLDivElement | null>;
+    secondaryActionRef: React_2.RefObject<HTMLSpanElement | null>;
+    tagPickerGroupRef: React_2.RefObject<HTMLDivElement | null>;
     size: TagPickerSize;
     noPopover?: boolean;
 }

package/lib/components/TagPicker/TagPicker.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTagPicker_unstable } from './useTagPicker';
 import { renderTagPicker_unstable } from './renderTagPicker';

package/lib/components/TagPicker/TagPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPicker/TagPicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTagPicker_unstable } from './useTagPicker';\nimport { renderTagPicker_unstable } from './renderTagPicker';\nimport type { TagPickerProps } from './TagPicker.types';\nimport { useTagPickerContextValues } from './useTagPickerContextValues';\n\n/**\n * TagPicker component -\n * A TagPicker is a composite component that allows users to pick tags from a list of options.\n */\nexport const TagPicker: React.FC<TagPickerProps> = React.memo(props => {\n  const state = useTagPicker_unstable(props);\n  const contextValues = useTagPickerContextValues(state);\n  return renderTagPicker_unstable(state, contextValues);\n});\n\nTagPicker.displayName = 'TagPicker';\n"],"names":["React","useTagPicker_unstable","renderTagPicker_unstable","useTagPickerContextValues","TagPicker","memo","props","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,oBAAoB;AAE7D,SAASC,yBAAyB,QAAQ,8BAA8B;AAExE;;;CAGC,GACD,OAAO,MAAMC,0BAAsCJ,MAAMK,IAAI,CAACC,CAAAA;IAC5D,MAAMC,QAAQN,sBAAsBK;IACpC,MAAME,gBAAgBL,0BAA0BI;IAChD,OAAOL,yBAAyBK,OAAOC;AACzC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TagPicker/TagPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTagPicker_unstable } from './useTagPicker';\nimport { renderTagPicker_unstable } from './renderTagPicker';\nimport type { TagPickerProps } from './TagPicker.types';\nimport { useTagPickerContextValues } from './useTagPickerContextValues';\n\n/**\n * TagPicker component -\n * A TagPicker is a composite component that allows users to pick tags from a list of options.\n */\nexport const TagPicker: React.FC<TagPickerProps> = React.memo(props => {\n  const state = useTagPicker_unstable(props);\n  const contextValues = useTagPickerContextValues(state);\n  return renderTagPicker_unstable(state, contextValues);\n});\n\nTagPicker.displayName = 'TagPicker';\n"],"names":["React","useTagPicker_unstable","renderTagPicker_unstable","useTagPickerContextValues","TagPicker","memo","props","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,oBAAoB;AAE7D,SAASC,yBAAyB,QAAQ,8BAA8B;AAExE;;;CAGC,GACD,OAAO,MAAMC,0BAAsCJ,MAAMK,IAAI,CAACC,CAAAA;IAC5D,MAAMC,QAAQN,sBAAsBK;IACpC,MAAME,gBAAgBL,0BAA0BI;IAChD,OAAOL,yBAAyBK,OAAOC;AACzC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}

package/lib/components/TagPicker/renderTagPicker.js

@@ -14,7 +14,7 @@ import { TagPickerContextProvider } from '../../contexts/TagPickerContext';
         value: contexts.activeDescendant
     }, /*#__PURE__*/ React.createElement(ListboxProvider, {
         value: contexts.listbox
-    }, state.trigger, state.inline ? state.popover : /*#__PURE__*/ React.createElement(Portal, {
+    }, state.trigger, state.popover && (state.inline ? state.popover : /*#__PURE__*/ React.createElement(Portal, {
         mountNode: state.mountNode
-    }, state.popover))));
+    }, state.popover)))));
 };

package/lib/components/TagPicker/renderTagPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPicker/renderTagPicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { TagPickerState, TagPickerContextValues, TagPickerSlots } from './TagPicker.types';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ListboxProvider } from '@fluentui/react-combobox';\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { TagPickerContextProvider } from '../../contexts/TagPickerContext';\n\n/**\n * Render the final JSX of Picker\n */\n\nexport const renderTagPicker_unstable = (state: TagPickerState, contexts: TagPickerContextValues): JSXElement => {\n  assertSlots<TagPickerSlots>(state);\n  return (\n    <TagPickerContextProvider value={contexts.picker}>\n      <ActiveDescendantContextProvider value={contexts.activeDescendant}>\n        <ListboxProvider value={contexts.listbox}>\n          {state.trigger}\n          {state.inline ? state.popover : <Portal mountNode={state.mountNode}>{state.popover}</Portal>}\n        </ListboxProvider>\n      </ActiveDescendantContextProvider>\n    </TagPickerContextProvider>\n  );\n};\n"],"names":["React","ActiveDescendantContextProvider","ListboxProvider","Portal","assertSlots","TagPickerContextProvider","renderTagPicker_unstable","state","contexts","value","picker","activeDescendant","listbox","trigger","inline","popover","mountNode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,+BAA+B,QAAQ,uBAAuB;AACvE,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,wBAAwB,QAAQ,kCAAkC;AAE3E;;CAEC,GAED,OAAO,MAAMC,2BAA2B,CAACC,OAAuBC;IAC9DJ,YAA4BG;IAC5B,qBACE,oBAACF;QAAyBI,OAAOD,SAASE,MAAM;qBAC9C,oBAACT;QAAgCQ,OAAOD,SAASG,gBAAgB;qBAC/D,oBAACT;QAAgBO,OAAOD,SAASI,OAAO;OACrCL,MAAMM,OAAO,EACbN,MAAMO,MAAM,GAAGP,MAAMQ,OAAO,iBAAG,oBAACZ;QAAOa,WAAWT,MAAMS,SAAS;OAAGT,MAAMQ,OAAO;AAK5F,EAAE"}
+{"version":3,"sources":["../src/components/TagPicker/renderTagPicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { TagPickerState, TagPickerContextValues, TagPickerSlots } from './TagPicker.types';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ListboxProvider } from '@fluentui/react-combobox';\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { TagPickerContextProvider } from '../../contexts/TagPickerContext';\n\n/**\n * Render the final JSX of Picker\n */\n\nexport const renderTagPicker_unstable = (state: TagPickerState, contexts: TagPickerContextValues): JSXElement => {\n  assertSlots<TagPickerSlots>(state);\n  return (\n    <TagPickerContextProvider value={contexts.picker}>\n      <ActiveDescendantContextProvider value={contexts.activeDescendant}>\n        <ListboxProvider value={contexts.listbox}>\n          {state.trigger}\n          {state.popover &&\n            (state.inline ? state.popover : <Portal mountNode={state.mountNode}>{state.popover}</Portal>)}\n        </ListboxProvider>\n      </ActiveDescendantContextProvider>\n    </TagPickerContextProvider>\n  );\n};\n"],"names":["React","ActiveDescendantContextProvider","ListboxProvider","Portal","assertSlots","TagPickerContextProvider","renderTagPicker_unstable","state","contexts","value","picker","activeDescendant","listbox","trigger","popover","inline","mountNode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,+BAA+B,QAAQ,uBAAuB;AACvE,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,wBAAwB,QAAQ,kCAAkC;AAE3E;;CAEC,GAED,OAAO,MAAMC,2BAA2B,CAACC,OAAuBC;IAC9DJ,YAA4BG;IAC5B,qBACE,oBAACF;QAAyBI,OAAOD,SAASE,MAAM;qBAC9C,oBAACT;QAAgCQ,OAAOD,SAASG,gBAAgB;qBAC/D,oBAACT;QAAgBO,OAAOD,SAASI,OAAO;OACrCL,MAAMM,OAAO,EACbN,MAAMO,OAAO,IACXP,CAAAA,MAAMQ,MAAM,GAAGR,MAAMO,OAAO,iBAAG,oBAACX;QAAOa,WAAWT,MAAMS,SAAS;OAAGT,MAAMO,OAAO,CAAS;AAKvG,EAAE"}

package/lib/components/TagPicker/useTagPicker.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { elementContains, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';
 import { optionClassNames } from '@fluentui/react-combobox';

package/lib/components/TagPicker/useTagPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPicker/useTagPicker.ts"],"sourcesContent":["import * as React from 'react';\nimport { elementContains, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport type {\n  TagPickerOnOpenChangeData,\n  TagPickerOnOptionSelectData,\n  TagPickerProps,\n  TagPickerState,\n} from './TagPicker.types';\nimport { optionClassNames } from '@fluentui/react-combobox';\nimport { PositioningShorthandValue, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useComboboxBaseState } from '@fluentui/react-combobox';\n\n// Set a default set of fallback positions to try if the dropdown does not fit on screen\nconst fallbackPositions: PositioningShorthandValue[] = ['above', 'after', 'after-top', 'before', 'before-top'];\n\n/**\n * Create the state required to render Picker.\n *\n * The returned state can be modified with hooks such as usePickerStyles_unstable,\n * before being passed to renderPicker_unstable.\n *\n * @param props - props from this instance of Picker\n */\nexport const useTagPicker_unstable = (props: TagPickerProps): TagPickerState => {\n  const popoverId = useId('picker-listbox');\n  const triggerInnerRef = React.useRef<HTMLInputElement | HTMLButtonElement>(null);\n  const secondaryActionRef = React.useRef<HTMLSpanElement>(null);\n  const tagPickerGroupRef = React.useRef<HTMLDivElement>(null);\n  const { positioning, size = 'medium', inline = false, noPopover = false } = props;\n\n  const { targetRef, containerRef } = usePositioning({\n    position: 'below' as const,\n    align: 'start' as const,\n    offset: { crossAxis: 0, mainAxis: 2 },\n    fallbackPositions,\n    matchTargetSize: 'width' as const,\n    ...resolvePositioningShorthand(positioning),\n  });\n\n  const {\n    controller: activeDescendantController,\n    activeParentRef,\n    listboxRef,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const comboboxState = useComboboxBaseState({\n    ...props,\n    onOptionSelect: useEventCallback((event, data) =>\n      props.onOptionSelect?.(event, {\n        selectedOptions: data.selectedOptions,\n        value: data.optionValue,\n        type: event.type,\n        event,\n      } as TagPickerOnOptionSelectData),\n    ),\n    onOpenChange: useEventCallback((event, data) =>\n      props.onOpenChange?.(event, {\n        ...data,\n        type: event.type,\n        event,\n      } as TagPickerOnOpenChangeData),\n    ),\n    activeDescendantController,\n    editable: true,\n    multiselect: true,\n    size: 'medium',\n  });\n\n  const { trigger, popover } = childrenToTriggerAndPopover(props.children, noPopover);\n  return {\n    activeDescendantController,\n    components: {},\n    trigger,\n    popover: comboboxState.open || comboboxState.hasFocus ? popover : undefined,\n    popoverId,\n    noPopover,\n    disabled: comboboxState.disabled,\n    triggerRef: useMergedRefs(triggerInnerRef, activeParentRef),\n    popoverRef: useMergedRefs(listboxRef, containerRef),\n    secondaryActionRef,\n    tagPickerGroupRef,\n    targetRef,\n    size,\n    inline,\n    open: comboboxState.open,\n    mountNode: comboboxState.mountNode,\n    onOptionClick: useEventCallback(event => {\n      comboboxState.onOptionClick(event);\n      comboboxState.setOpen(event, false);\n    }),\n    appearance: comboboxState.appearance,\n    clearSelection: comboboxState.clearSelection,\n    getOptionById: comboboxState.getOptionById,\n    getOptionsMatchingValue: comboboxState.getOptionsMatchingValue,\n    registerOption: comboboxState.registerOption,\n    selectedOptions: comboboxState.selectedOptions,\n    selectOption: useEventCallback((event, data) => {\n      // if the option is already selected, invoke onOptionSelect callback with current selected values\n      // the combobox state would unselect the option, which is not the behavior expected\n      if (\n        comboboxState.selectedOptions.includes(data.value) &&\n        !elementContains(tagPickerGroupRef.current, event.target as Node)\n      ) {\n        props.onOptionSelect?.(event, {\n          selectedOptions: comboboxState.selectedOptions,\n          value: data.value,\n          type: event.type,\n          event,\n        } as TagPickerOnOptionSelectData);\n        return;\n      }\n      comboboxState.selectOption(event, data);\n    }),\n    setHasFocus: comboboxState.setHasFocus,\n    setOpen: comboboxState.setOpen,\n    setValue: comboboxState.setValue,\n    value: comboboxState.value,\n  };\n};\n\nconst childrenToTriggerAndPopover = (children: React.ReactNode, noPopover: boolean) => {\n  const childrenArray = React.Children.toArray(children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (childrenArray.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('TagPicker must contain at least one child');\n    }\n\n    if (childrenArray.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('TagPicker must contain at most two children');\n    }\n  }\n\n  if (noPopover) {\n    return { trigger: childrenArray[0] };\n  }\n\n  let trigger: React.ReactElement | undefined = undefined;\n  let popover: React.ReactElement | undefined = undefined;\n\n  if (childrenArray.length === 2) {\n    trigger = childrenArray[0];\n    popover = childrenArray[1];\n  } else if (childrenArray.length === 1) {\n    popover = childrenArray[0];\n  }\n\n  return { trigger, popover };\n};\n"],"names":["React","elementContains","useEventCallback","useId","useMergedRefs","optionClassNames","resolvePositioningShorthand","usePositioning","useActiveDescendant","useComboboxBaseState","fallbackPositions","useTagPicker_unstable","props","popoverId","triggerInnerRef","useRef","secondaryActionRef","tagPickerGroupRef","positioning","size","inline","noPopover","targetRef","containerRef","position","align","offset","crossAxis","mainAxis","matchTargetSize","controller","activeDescendantController","activeParentRef","listboxRef","matchOption","el","classList","contains","root","comboboxState","onOptionSelect","event","data","selectedOptions","value","optionValue","type","onOpenChange","editable","multiselect","trigger","popover","childrenToTriggerAndPopover","children","components","open","hasFocus","undefined","disabled","triggerRef","popoverRef","mountNode","onOptionClick","setOpen","appearance","clearSelection","getOptionById","getOptionsMatchingValue","registerOption","selectOption","includes","current","target","setHasFocus","setValue","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TagPicker/useTagPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { elementContains, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport type {\n  TagPickerOnOpenChangeData,\n  TagPickerOnOptionSelectData,\n  TagPickerProps,\n  TagPickerState,\n} from './TagPicker.types';\nimport { optionClassNames } from '@fluentui/react-combobox';\nimport { PositioningShorthandValue, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useComboboxBaseState } from '@fluentui/react-combobox';\n\n// Set a default set of fallback positions to try if the dropdown does not fit on screen\nconst fallbackPositions: PositioningShorthandValue[] = ['above', 'after', 'after-top', 'before', 'before-top'];\n\n/**\n * Create the state required to render Picker.\n *\n * The returned state can be modified with hooks such as usePickerStyles_unstable,\n * before being passed to renderPicker_unstable.\n *\n * @param props - props from this instance of Picker\n */\nexport const useTagPicker_unstable = (props: TagPickerProps): TagPickerState => {\n  const popoverId = useId('picker-listbox');\n  const triggerInnerRef = React.useRef<HTMLInputElement | HTMLButtonElement>(null);\n  const secondaryActionRef = React.useRef<HTMLSpanElement>(null);\n  const tagPickerGroupRef = React.useRef<HTMLDivElement>(null);\n  const { positioning, size = 'medium', inline = false, noPopover = false } = props;\n\n  const { targetRef, containerRef } = usePositioning({\n    position: 'below' as const,\n    align: 'start' as const,\n    offset: { crossAxis: 0, mainAxis: 2 },\n    fallbackPositions,\n    matchTargetSize: 'width' as const,\n    ...resolvePositioningShorthand(positioning),\n  });\n\n  const {\n    controller: activeDescendantController,\n    activeParentRef,\n    listboxRef,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const comboboxState = useComboboxBaseState({\n    ...props,\n    onOptionSelect: useEventCallback((event, data) =>\n      props.onOptionSelect?.(event, {\n        selectedOptions: data.selectedOptions,\n        value: data.optionValue,\n        type: event.type,\n        event,\n      } as TagPickerOnOptionSelectData),\n    ),\n    onOpenChange: useEventCallback((event, data) =>\n      props.onOpenChange?.(event, {\n        ...data,\n        type: event.type,\n        event,\n      } as TagPickerOnOpenChangeData),\n    ),\n    activeDescendantController,\n    editable: true,\n    multiselect: true,\n    size: 'medium',\n  });\n\n  const { trigger, popover } = childrenToTriggerAndPopover(props.children, noPopover);\n  return {\n    activeDescendantController,\n    components: {},\n    trigger,\n    popover: comboboxState.open || comboboxState.hasFocus ? popover : undefined,\n    popoverId,\n    noPopover,\n    disabled: comboboxState.disabled,\n    triggerRef: useMergedRefs(triggerInnerRef, activeParentRef),\n    popoverRef: useMergedRefs(listboxRef, containerRef),\n    secondaryActionRef,\n    tagPickerGroupRef,\n    targetRef,\n    size,\n    inline,\n    open: comboboxState.open,\n    mountNode: comboboxState.mountNode,\n    onOptionClick: useEventCallback(event => {\n      comboboxState.onOptionClick(event);\n      comboboxState.setOpen(event, false);\n    }),\n    appearance: comboboxState.appearance,\n    clearSelection: comboboxState.clearSelection,\n    getOptionById: comboboxState.getOptionById,\n    getOptionsMatchingValue: comboboxState.getOptionsMatchingValue,\n    registerOption: comboboxState.registerOption,\n    selectedOptions: comboboxState.selectedOptions,\n    selectOption: useEventCallback((event, data) => {\n      // if the option is already selected, invoke onOptionSelect callback with current selected values\n      // the combobox state would unselect the option, which is not the behavior expected\n      if (\n        comboboxState.selectedOptions.includes(data.value) &&\n        !elementContains(tagPickerGroupRef.current, event.target as Node)\n      ) {\n        props.onOptionSelect?.(event, {\n          selectedOptions: comboboxState.selectedOptions,\n          value: data.value,\n          type: event.type,\n          event,\n        } as TagPickerOnOptionSelectData);\n        return;\n      }\n      comboboxState.selectOption(event, data);\n    }),\n    setHasFocus: comboboxState.setHasFocus,\n    setOpen: comboboxState.setOpen,\n    setValue: comboboxState.setValue,\n    value: comboboxState.value,\n  };\n};\n\nconst childrenToTriggerAndPopover = (children: React.ReactNode, noPopover: boolean) => {\n  const childrenArray = React.Children.toArray(children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (childrenArray.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('TagPicker must contain at least one child');\n    }\n\n    if (childrenArray.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('TagPicker must contain at most two children');\n    }\n  }\n\n  if (noPopover) {\n    return { trigger: childrenArray[0] };\n  }\n\n  let trigger: React.ReactElement | undefined = undefined;\n  let popover: React.ReactElement | undefined = undefined;\n\n  if (childrenArray.length === 2) {\n    trigger = childrenArray[0];\n    popover = childrenArray[1];\n  } else if (childrenArray.length === 1) {\n    popover = childrenArray[0];\n  }\n\n  return { trigger, popover };\n};\n"],"names":["React","elementContains","useEventCallback","useId","useMergedRefs","optionClassNames","resolvePositioningShorthand","usePositioning","useActiveDescendant","useComboboxBaseState","fallbackPositions","useTagPicker_unstable","props","popoverId","triggerInnerRef","useRef","secondaryActionRef","tagPickerGroupRef","positioning","size","inline","noPopover","targetRef","containerRef","position","align","offset","crossAxis","mainAxis","matchTargetSize","controller","activeDescendantController","activeParentRef","listboxRef","matchOption","el","classList","contains","root","comboboxState","onOptionSelect","event","data","selectedOptions","value","optionValue","type","onOpenChange","editable","multiselect","trigger","popover","childrenToTriggerAndPopover","children","components","open","hasFocus","undefined","disabled","triggerRef","popoverRef","mountNode","onOptionClick","setOpen","appearance","clearSelection","getOptionById","getOptionsMatchingValue","registerOption","selectOption","includes","current","target","setHasFocus","setValue","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"mappings":"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"}

package/lib/components/TagPicker/useTagPickerContextValues.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export function useTagPickerContextValues(state) {
     const { onOptionClick, registerOption, selectedOptions, selectOption, value, triggerRef, secondaryActionRef, tagPickerGroupRef, targetRef, size, setValue, setOpen, setHasFocus, popoverRef, appearance, clearSelection, getOptionById, getOptionsMatchingValue, open, popoverId, disabled, noPopover } = state;

package/lib/components/TagPicker/useTagPickerContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPicker/useTagPickerContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { TagPickerContextValues, TagPickerState } from './TagPicker.types';\n\nexport function useTagPickerContextValues(state: TagPickerState): TagPickerContextValues {\n  const {\n    onOptionClick,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    value,\n    triggerRef,\n    secondaryActionRef,\n    tagPickerGroupRef,\n    targetRef,\n    size,\n    setValue,\n    setOpen,\n    setHasFocus,\n    popoverRef,\n    appearance,\n    clearSelection,\n    getOptionById,\n    getOptionsMatchingValue,\n    open,\n    popoverId,\n    disabled,\n    noPopover,\n  } = state;\n  return {\n    activeDescendant: React.useMemo(\n      () => ({ controller: state.activeDescendantController }),\n      [state.activeDescendantController],\n    ),\n    listbox: {\n      onOptionClick,\n      registerOption,\n      getOptionById,\n      getOptionsMatchingValue,\n      selectedOptions,\n      selectOption,\n      focusVisible: false,\n      setActiveOption: noop,\n    },\n    picker: {\n      value,\n      triggerRef,\n      targetRef,\n      secondaryActionRef,\n      tagPickerGroupRef,\n      size,\n      setValue,\n      setOpen,\n      setHasFocus,\n      selectOption,\n      popoverRef,\n      selectedOptions,\n      appearance,\n      clearSelection,\n      getOptionById,\n      open,\n      popoverId,\n      disabled,\n      noPopover,\n    },\n  };\n}\n\nconst noop = () => {\n  /** noop */\n};\n"],"names":["React","useTagPickerContextValues","state","onOptionClick","registerOption","selectedOptions","selectOption","value","triggerRef","secondaryActionRef","tagPickerGroupRef","targetRef","size","setValue","setOpen","setHasFocus","popoverRef","appearance","clearSelection","getOptionById","getOptionsMatchingValue","open","popoverId","disabled","noPopover","activeDescendant","useMemo","controller","activeDescendantController","listbox","focusVisible","setActiveOption","noop","picker"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,0BAA0BC,KAAqB;IAC7D,MAAM,EACJC,aAAa,EACbC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,KAAK,EACLC,UAAU,EACVC,kBAAkB,EAClBC,iBAAiB,EACjBC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,WAAW,EACXC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,aAAa,EACbC,uBAAuB,EACvBC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACV,GAAGtB;IACJ,OAAO;QACLuB,kBAAkBzB,MAAM0B,OAAO,CAC7B,IAAO,CAAA;gBAAEC,YAAYzB,MAAM0B,0BAA0B;YAAC,CAAA,GACtD;YAAC1B,MAAM0B,0BAA0B;SAAC;QAEpCC,SAAS;YACP1B;YACAC;YACAe;YACAC;YACAf;YACAC;YACAwB,cAAc;YACdC,iBAAiBC;QACnB;QACAC,QAAQ;YACN1B;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAT;YACAU;YACAX;YACAY;YACAC;YACAC;YACAE;YACAC;YACAC;YACAC;QACF;IACF;AACF;AAEA,MAAMQ,OAAO;AACX,SAAS,GACX"}
+{"version":3,"sources":["../src/components/TagPicker/useTagPickerContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { TagPickerContextValues, TagPickerState } from './TagPicker.types';\n\nexport function useTagPickerContextValues(state: TagPickerState): TagPickerContextValues {\n  const {\n    onOptionClick,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    value,\n    triggerRef,\n    secondaryActionRef,\n    tagPickerGroupRef,\n    targetRef,\n    size,\n    setValue,\n    setOpen,\n    setHasFocus,\n    popoverRef,\n    appearance,\n    clearSelection,\n    getOptionById,\n    getOptionsMatchingValue,\n    open,\n    popoverId,\n    disabled,\n    noPopover,\n  } = state;\n  return {\n    activeDescendant: React.useMemo(\n      () => ({ controller: state.activeDescendantController }),\n      [state.activeDescendantController],\n    ),\n    listbox: {\n      onOptionClick,\n      registerOption,\n      getOptionById,\n      getOptionsMatchingValue,\n      selectedOptions,\n      selectOption,\n      focusVisible: false,\n      setActiveOption: noop,\n    },\n    picker: {\n      value,\n      triggerRef,\n      targetRef,\n      secondaryActionRef,\n      tagPickerGroupRef,\n      size,\n      setValue,\n      setOpen,\n      setHasFocus,\n      selectOption,\n      popoverRef,\n      selectedOptions,\n      appearance,\n      clearSelection,\n      getOptionById,\n      open,\n      popoverId,\n      disabled,\n      noPopover,\n    },\n  };\n}\n\nconst noop = () => {\n  /** noop */\n};\n"],"names":["React","useTagPickerContextValues","state","onOptionClick","registerOption","selectedOptions","selectOption","value","triggerRef","secondaryActionRef","tagPickerGroupRef","targetRef","size","setValue","setOpen","setHasFocus","popoverRef","appearance","clearSelection","getOptionById","getOptionsMatchingValue","open","popoverId","disabled","noPopover","activeDescendant","useMemo","controller","activeDescendantController","listbox","focusVisible","setActiveOption","noop","picker"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,0BAA0BC,KAAqB;IAC7D,MAAM,EACJC,aAAa,EACbC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,KAAK,EACLC,UAAU,EACVC,kBAAkB,EAClBC,iBAAiB,EACjBC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,WAAW,EACXC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,aAAa,EACbC,uBAAuB,EACvBC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACRC,SAAS,EACV,GAAGtB;IACJ,OAAO;QACLuB,kBAAkBzB,MAAM0B,OAAO,CAC7B,IAAO,CAAA;gBAAEC,YAAYzB,MAAM0B,0BAA0B;YAAC,CAAA,GACtD;YAAC1B,MAAM0B,0BAA0B;SAAC;QAEpCC,SAAS;YACP1B;YACAC;YACAe;YACAC;YACAf;YACAC;YACAwB,cAAc;YACdC,iBAAiBC;QACnB;QACAC,QAAQ;YACN1B;YACAC;YACAG;YACAF;YACAC;YACAE;YACAC;YACAC;YACAC;YACAT;YACAU;YACAX;YACAY;YACAC;YACAC;YACAE;YACAC;YACAC;YACAC;QACF;IACF;AACF;AAEA,MAAMQ,OAAO;AACX,SAAS,GACX"}

package/lib/components/TagPickerButton/TagPickerButton.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTagPickerButton_unstable } from './useTagPickerButton';
 import { renderTagPickerButton_unstable } from './renderTagPickerButton';

package/lib/components/TagPickerButton/TagPickerButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerButton/TagPickerButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerButton_unstable } from './useTagPickerButton';\nimport { renderTagPickerButton_unstable } from './renderTagPickerButton';\nimport { useTagPickerButtonStyles_unstable } from './useTagPickerButtonStyles.styles';\nimport type { TagPickerButtonProps } from './TagPickerButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TagPickerButton component -\n * A TagPickerButton is an alternative to TagPickerInput that does not include an input field.\n */\nexport const TagPickerButton: ForwardRefComponent<TagPickerButtonProps> = React.forwardRef((props, ref) => {\n  const state = useTagPickerButton_unstable(props, ref);\n\n  useTagPickerButtonStyles_unstable(state);\n  useCustomStyleHook_unstable('useTagPickerButtonStyles_unstable')(state);\n  return renderTagPickerButton_unstable(state);\n});\n\nTagPickerButton.displayName = 'TagPickerButton';\n"],"names":["React","useTagPickerButton_unstable","renderTagPickerButton_unstable","useTagPickerButtonStyles_unstable","useCustomStyleHook_unstable","TagPickerButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,oCAAoC;AAEtF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQR,4BAA4BM,OAAOC;IAEjDL,kCAAkCM;IAClCL,4BAA4B,qCAAqCK;IACjE,OAAOP,+BAA+BO;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TagPickerButton/TagPickerButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerButton_unstable } from './useTagPickerButton';\nimport { renderTagPickerButton_unstable } from './renderTagPickerButton';\nimport { useTagPickerButtonStyles_unstable } from './useTagPickerButtonStyles.styles';\nimport type { TagPickerButtonProps } from './TagPickerButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TagPickerButton component -\n * A TagPickerButton is an alternative to TagPickerInput that does not include an input field.\n */\nexport const TagPickerButton: ForwardRefComponent<TagPickerButtonProps> = React.forwardRef((props, ref) => {\n  const state = useTagPickerButton_unstable(props, ref);\n\n  useTagPickerButtonStyles_unstable(state);\n  useCustomStyleHook_unstable('useTagPickerButtonStyles_unstable')(state);\n  return renderTagPickerButton_unstable(state);\n});\n\nTagPickerButton.displayName = 'TagPickerButton';\n"],"names":["React","useTagPickerButton_unstable","renderTagPickerButton_unstable","useTagPickerButtonStyles_unstable","useCustomStyleHook_unstable","TagPickerButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,oCAAoC;AAEtF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQR,4BAA4BM,OAAOC;IAEjDL,kCAAkCM;IAClCL,4BAA4B,qCAAqCK;IACjE,OAAOP,+BAA+BO;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

package/lib/components/TagPickerButton/renderTagPickerButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerButton/renderTagPickerButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { TagPickerButtonState, TagPickerButtonSlots } from './TagPickerButton.types';\n\n/**\n * Render the final JSX of PickerButton\n */\nexport const renderTagPickerButton_unstable = (state: TagPickerButtonState) => {\n  assertSlots<TagPickerButtonSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderTagPickerButton_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAElC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
+{"version":3,"sources":["../src/components/TagPickerButton/renderTagPickerButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TagPickerButtonState, TagPickerButtonSlots } from './TagPickerButton.types';\n\n/**\n * Render the final JSX of PickerButton\n */\nexport const renderTagPickerButton_unstable = (state: TagPickerButtonState): JSXElement => {\n  assertSlots<TagPickerButtonSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderTagPickerButton_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAElC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/TagPickerButton/useTagPickerButton.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useActiveDescendantContext } from '@fluentui/react-aria';
 import { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';

package/lib/components/TagPickerButton/useTagPickerButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerButton/useTagPickerButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport type { TagPickerButtonProps, TagPickerButtonState } from './TagPickerButton.types';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { useButtonTriggerSlot } from '@fluentui/react-combobox';\n\n/**\n * Create the state required to render PickerButton.\n *\n * The returned state can be modified with hooks such as usePickerButtonStyles_unstable,\n * before being passed to renderPickerButton_unstable.\n *\n * @param props - props from this instance of PickerButton\n * @param ref - reference to root HTMLDivElement of PickerButton\n */\nexport const useTagPickerButton_unstable = (\n  props: TagPickerButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): TagPickerButtonState => {\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n  const value = useTagPickerContext_unstable(ctx => ctx.value);\n  const hasSelectedOption = useTagPickerContext_unstable(ctx => ctx.selectedOptions.length > 0);\n  const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n  const getOptionById = useTagPickerContext_unstable(ctx => ctx.getOptionById);\n  const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n  const setHasFocus = useTagPickerContext_unstable(ctx => ctx.setHasFocus);\n  const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n\n  // casting is required here as triggerRef can either be button or input,\n  // but in this case we can assure it's a button\n  const root = useButtonTriggerSlot(props, triggerRef as React.RefObject<HTMLButtonElement>, {\n    activeDescendantController,\n    defaultProps: {\n      type: 'button',\n      tabIndex: 0,\n      children:\n        value ||\n        // @ts-expect-error - FIXME: TS2339: Property 'placeholder' does not exist on type 'TagPickerButtonProps'\n        props.placeholder,\n      'aria-controls': open ? popoverId : undefined,\n      ref,\n    },\n    state: {\n      getOptionById,\n      open,\n      selectOption,\n      setHasFocus,\n      setOpen,\n      multiselect: true,\n    },\n  });\n\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n\n  const state: TagPickerButtonState = {\n    components: {\n      root: 'button',\n    },\n    root,\n    size,\n    hasSelectedOption,\n  };\n\n  return state;\n};\n"],"names":["React","useActiveDescendantContext","useTagPickerContext_unstable","useButtonTriggerSlot","useTagPickerButton_unstable","props","ref","controller","activeDescendantController","triggerRef","ctx","open","value","hasSelectedOption","selectedOptions","length","popoverId","getOptionById","selectOption","setHasFocus","setOpen","root","defaultProps","type","tabIndex","children","placeholder","undefined","state","multiselect","size","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,uBAAuB;AAElE,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,oBAAoB,QAAQ,2BAA2B;AAEhE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,YAAYC,0BAA0B,EAAE,GAAGP;IACnD,MAAMQ,aAAaP,6BAA6BQ,CAAAA,MAAOA,IAAID,UAAU;IACrE,MAAME,OAAOT,6BAA6BQ,CAAAA,MAAOA,IAAIC,IAAI;IACzD,MAAMC,QAAQV,6BAA6BQ,CAAAA,MAAOA,IAAIE,KAAK;IAC3D,MAAMC,oBAAoBX,6BAA6BQ,CAAAA,MAAOA,IAAII,eAAe,CAACC,MAAM,GAAG;IAC3F,MAAMC,YAAYd,6BAA6BQ,CAAAA,MAAOA,IAAIM,SAAS;IACnE,MAAMC,gBAAgBf,6BAA6BQ,CAAAA,MAAOA,IAAIO,aAAa;IAC3E,MAAMC,eAAehB,6BAA6BQ,CAAAA,MAAOA,IAAIQ,YAAY;IACzE,MAAMC,cAAcjB,6BAA6BQ,CAAAA,MAAOA,IAAIS,WAAW;IACvE,MAAMC,UAAUlB,6BAA6BQ,CAAAA,MAAOA,IAAIU,OAAO;IAE/D,wEAAwE;IACxE,+CAA+C;IAC/C,MAAMC,OAAOlB,qBAAqBE,OAAOI,YAAkD;QACzFD;QACAc,cAAc;YACZC,MAAM;YACNC,UAAU;YACVC,UACEb,SACA,yGAAyG;YACzGP,MAAMqB,WAAW;YACnB,iBAAiBf,OAAOK,YAAYW;YACpCrB;QACF;QACAsB,OAAO;YACLX;YACAN;YACAO;YACAC;YACAC;YACAS,aAAa;QACf;IACF;IAEA,MAAMC,OAAO5B,6BAA6BQ,CAAAA,MAAOA,IAAIoB,IAAI;IAEzD,MAAMF,QAA8B;QAClCG,YAAY;YACVV,MAAM;QACR;QACAA;QACAS;QACAjB;IACF;IAEA,OAAOe;AACT,EAAE"}
+{"version":3,"sources":["../src/components/TagPickerButton/useTagPickerButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport type { TagPickerButtonProps, TagPickerButtonState } from './TagPickerButton.types';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { useButtonTriggerSlot } from '@fluentui/react-combobox';\n\n/**\n * Create the state required to render PickerButton.\n *\n * The returned state can be modified with hooks such as usePickerButtonStyles_unstable,\n * before being passed to renderPickerButton_unstable.\n *\n * @param props - props from this instance of PickerButton\n * @param ref - reference to root HTMLDivElement of PickerButton\n */\nexport const useTagPickerButton_unstable = (\n  props: TagPickerButtonProps,\n  ref: React.Ref<HTMLButtonElement>,\n): TagPickerButtonState => {\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n  const value = useTagPickerContext_unstable(ctx => ctx.value);\n  const hasSelectedOption = useTagPickerContext_unstable(ctx => ctx.selectedOptions.length > 0);\n  const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n  const getOptionById = useTagPickerContext_unstable(ctx => ctx.getOptionById);\n  const selectOption = useTagPickerContext_unstable(ctx => ctx.selectOption);\n  const setHasFocus = useTagPickerContext_unstable(ctx => ctx.setHasFocus);\n  const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n\n  // casting is required here as triggerRef can either be button or input,\n  // but in this case we can assure it's a button\n  const root = useButtonTriggerSlot(props, triggerRef as React.RefObject<HTMLButtonElement>, {\n    activeDescendantController,\n    defaultProps: {\n      type: 'button',\n      tabIndex: 0,\n      children:\n        value ||\n        // @ts-expect-error - FIXME: TS2339: Property 'placeholder' does not exist on type 'TagPickerButtonProps'\n        props.placeholder,\n      'aria-controls': open ? popoverId : undefined,\n      ref,\n    },\n    state: {\n      getOptionById,\n      open,\n      selectOption,\n      setHasFocus,\n      setOpen,\n      multiselect: true,\n    },\n  });\n\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n\n  const state: TagPickerButtonState = {\n    components: {\n      root: 'button',\n    },\n    root,\n    size,\n    hasSelectedOption,\n  };\n\n  return state;\n};\n"],"names":["React","useActiveDescendantContext","useTagPickerContext_unstable","useButtonTriggerSlot","useTagPickerButton_unstable","props","ref","controller","activeDescendantController","triggerRef","ctx","open","value","hasSelectedOption","selectedOptions","length","popoverId","getOptionById","selectOption","setHasFocus","setOpen","root","defaultProps","type","tabIndex","children","placeholder","undefined","state","multiselect","size","components"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,uBAAuB;AAElE,SAASC,4BAA4B,QAAQ,kCAAkC;AAC/E,SAASC,oBAAoB,QAAQ,2BAA2B;AAEhE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,YAAYC,0BAA0B,EAAE,GAAGP;IACnD,MAAMQ,aAAaP,6BAA6BQ,CAAAA,MAAOA,IAAID,UAAU;IACrE,MAAME,OAAOT,6BAA6BQ,CAAAA,MAAOA,IAAIC,IAAI;IACzD,MAAMC,QAAQV,6BAA6BQ,CAAAA,MAAOA,IAAIE,KAAK;IAC3D,MAAMC,oBAAoBX,6BAA6BQ,CAAAA,MAAOA,IAAII,eAAe,CAACC,MAAM,GAAG;IAC3F,MAAMC,YAAYd,6BAA6BQ,CAAAA,MAAOA,IAAIM,SAAS;IACnE,MAAMC,gBAAgBf,6BAA6BQ,CAAAA,MAAOA,IAAIO,aAAa;IAC3E,MAAMC,eAAehB,6BAA6BQ,CAAAA,MAAOA,IAAIQ,YAAY;IACzE,MAAMC,cAAcjB,6BAA6BQ,CAAAA,MAAOA,IAAIS,WAAW;IACvE,MAAMC,UAAUlB,6BAA6BQ,CAAAA,MAAOA,IAAIU,OAAO;IAE/D,wEAAwE;IACxE,+CAA+C;IAC/C,MAAMC,OAAOlB,qBAAqBE,OAAOI,YAAkD;QACzFD;QACAc,cAAc;YACZC,MAAM;YACNC,UAAU;YACVC,UACEb,SACA,yGAAyG;YACzGP,MAAMqB,WAAW;YACnB,iBAAiBf,OAAOK,YAAYW;YACpCrB;QACF;QACAsB,OAAO;YACLX;YACAN;YACAO;YACAC;YACAC;YACAS,aAAa;QACf;IACF;IAEA,MAAMC,OAAO5B,6BAA6BQ,CAAAA,MAAOA,IAAIoB,IAAI;IAEzD,MAAMF,QAA8B;QAClCG,YAAY;YACVV,MAAM;QACR;QACAA;QACAS;QACAjB;IACF;IAEA,OAAOe;AACT,EAAE"}

package/lib/components/TagPickerButton/useTagPickerButtonStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 export const tagPickerButtonClassNames = {

package/lib/components/TagPickerButton/useTagPickerButtonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","tagPickerButtonClassNames","root","useStyles","button","Bt984gj","sshi5w","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","B7ck84d","sj55zd","i8kkvl","Bceei9c","Bahqtrf","fsow6f","Bh6795r","Brovlpu","placeholder","medium","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","large","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","disabledText","hidden","mc9l5x","visuallyHidden","Bh84pgu","Bqenvij","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","B68tc82","Bmxbyg5","Bpg54ce","a9b677","qhf8xq","d","p","f","h","a","m","useTagPickerButtonStyles_unstable","state","styles","className","size","hasSelectedOption"],"sources":["useTagPickerButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const tagPickerButtonClassNames = {\n    root: 'fui-TagPickerButton'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    button: {\n        alignItems: 'center',\n        minHeight: '32px',\n        backgroundColor: tokens.colorTransparentBackground,\n        border: 'none',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground1,\n        columnGap: tokens.spacingHorizontalXXS,\n        cursor: 'pointer',\n        fontFamily: tokens.fontFamilyBase,\n        textAlign: 'left',\n        flexGrow: 1,\n        '&:focus': {\n            outlineStyle: 'none'\n        }\n    },\n    placeholder: {\n        color: tokens.colorNeutralForeground4\n    },\n    // size variants\n    medium: {\n        ...typographyStyles.caption1,\n        padding: `3px ${tokens.spacingHorizontalSNudge} 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    large: {\n        ...typographyStyles.body1,\n        padding: `5px ${tokens.spacingHorizontalMNudge} 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    'extra-large': {\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...typographyStyles.body2,\n        padding: `7px ${tokens.spacingHorizontalM} 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`\n    },\n    // appearance variants\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        '&:hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        },\n        '&:active': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: '0'\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid transparent`\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        border: `${tokens.strokeWidthThin} solid transparent`\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    invalidUnderline: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            borderBottomColor: tokens.colorPaletteRedBorder2\n        }\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    },\n    disabledText: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    },\n    hidden: {\n        display: 'none'\n    },\n    visuallyHidden: {\n        clip: 'rect(0px, 0px, 0px, 0px)',\n        height: '1px',\n        margin: '-1px',\n        overflow: 'hidden',\n        padding: '0px',\n        width: '1px',\n        position: 'absolute'\n    }\n});\n/**\n * Apply styling to the PickerButton slots based on the state\n */ export const useTagPickerButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(tagPickerButtonClassNames.root, styles.button, styles[state.size], state.hasSelectedOption && styles.visuallyHidden, state.root.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","tagPickerButtonClassNames","root","useStyles","button","Bt984gj","sshi5w","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","B7ck84d","sj55zd","i8kkvl","Bceei9c","Bahqtrf","fsow6f","Bh6795r","Brovlpu","placeholder","medium","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","large","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","disabledText","hidden","mc9l5x","visuallyHidden","Bh84pgu","Bqenvij","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","B68tc82","Bmxbyg5","Bpg54ce","a9b677","qhf8xq","d","p","f","h","a","m","useTagPickerButtonStyles_unstable","state","styles","className","size","hasSelectedOption"],"sources":["useTagPickerButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const tagPickerButtonClassNames = {\n    root: 'fui-TagPickerButton'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    button: {\n        alignItems: 'center',\n        minHeight: '32px',\n        backgroundColor: tokens.colorTransparentBackground,\n        border: 'none',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground1,\n        columnGap: tokens.spacingHorizontalXXS,\n        cursor: 'pointer',\n        fontFamily: tokens.fontFamilyBase,\n        textAlign: 'left',\n        flexGrow: 1,\n        '&:focus': {\n            outlineStyle: 'none'\n        }\n    },\n    placeholder: {\n        color: tokens.colorNeutralForeground4\n    },\n    // size variants\n    medium: {\n        ...typographyStyles.caption1,\n        padding: `3px ${tokens.spacingHorizontalSNudge} 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    large: {\n        ...typographyStyles.body1,\n        padding: `5px ${tokens.spacingHorizontalMNudge} 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    'extra-large': {\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...typographyStyles.body2,\n        padding: `7px ${tokens.spacingHorizontalM} 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`\n    },\n    // appearance variants\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        '&:hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        },\n        '&:active': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessible\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: '0'\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid transparent`\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        border: `${tokens.strokeWidthThin} solid transparent`\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    invalidUnderline: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            borderBottomColor: tokens.colorPaletteRedBorder2\n        }\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    },\n    disabledText: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    },\n    hidden: {\n        display: 'none'\n    },\n    visuallyHidden: {\n        clip: 'rect(0px, 0px, 0px, 0px)',\n        height: '1px',\n        margin: '-1px',\n        overflow: 'hidden',\n        padding: '0px',\n        width: '1px',\n        position: 'absolute'\n    }\n});\n/**\n * Apply styling to the PickerButton slots based on the state\n */ export const useTagPickerButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(tagPickerButtonClassNames.root, styles.button, styles[state.size], state.hasSelectedOption && styles.visuallyHidden, state.root.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/TagPickerButton/useTagPickerButtonStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 export const tagPickerButtonClassNames = {

package/lib/components/TagPickerButton/useTagPickerButtonStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerButton/useTagPickerButtonStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerButtonSlots, TagPickerButtonState } from './TagPickerButton.types';\n\nexport const tagPickerButtonClassNames: SlotClassNames<TagPickerButtonSlots> = {\n  root: 'fui-TagPickerButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  button: {\n    alignItems: 'center',\n    minHeight: '32px',\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    columnGap: tokens.spacingHorizontalXXS,\n    cursor: 'pointer',\n    fontFamily: tokens.fontFamilyBase,\n    textAlign: 'left',\n    flexGrow: 1,\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n  },\n\n  placeholder: {\n    color: tokens.colorNeutralForeground4,\n  },\n\n  // size variants\n  medium: {\n    ...typographyStyles.caption1,\n    padding: `3px ${\n      tokens.spacingHorizontalSNudge\n    } 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  large: {\n    ...typographyStyles.body1,\n    padding: `5px ${\n      tokens.spacingHorizontalMNudge\n    } 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  'extra-large': {\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.body2,\n    padding: `7px ${\n      tokens.spacingHorizontalM\n    } 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n    borderRadius: '0',\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid transparent`,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    border: `${tokens.strokeWidthThin} solid transparent`,\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  invalidUnderline: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      borderBottomColor: tokens.colorPaletteRedBorder2,\n    },\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  disabledText: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n\n  hidden: {\n    display: 'none',\n  },\n  visuallyHidden: {\n    clip: 'rect(0px, 0px, 0px, 0px)',\n    height: '1px',\n    margin: '-1px',\n    overflow: 'hidden',\n    padding: '0px',\n    width: '1px',\n    position: 'absolute',\n  },\n});\n\n/**\n * Apply styling to the PickerButton slots based on the state\n */\nexport const useTagPickerButtonStyles_unstable = (state: TagPickerButtonState): TagPickerButtonState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    tagPickerButtonClassNames.root,\n    styles.button,\n    styles[state.size],\n    state.hasSelectedOption && styles.visuallyHidden,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","tagPickerButtonClassNames","root","useStyles","button","alignItems","minHeight","backgroundColor","colorTransparentBackground","border","boxSizing","color","colorNeutralForeground1","columnGap","spacingHorizontalXXS","cursor","fontFamily","fontFamilyBase","textAlign","flexGrow","outlineStyle","placeholder","colorNeutralForeground4","medium","caption1","padding","spacingHorizontalSNudge","large","body1","spacingHorizontalMNudge","body2","spacingHorizontalM","outline","colorNeutralBackground1","strokeWidthThin","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStroke1Pressed","underline","borderBottom","borderRadius","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","colorNeutralStrokeDisabled","disabledText","colorNeutralForegroundDisabled","hidden","display","visuallyHidden","clip","height","margin","overflow","width","position","useTagPickerButtonStyles_unstable","state","styles","className","size","hasSelectedOption"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TagPickerButton/useTagPickerButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { TagPickerButtonSlots, TagPickerButtonState } from './TagPickerButton.types';\n\nexport const tagPickerButtonClassNames: SlotClassNames<TagPickerButtonSlots> = {\n  root: 'fui-TagPickerButton',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  button: {\n    alignItems: 'center',\n    minHeight: '32px',\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    columnGap: tokens.spacingHorizontalXXS,\n    cursor: 'pointer',\n    fontFamily: tokens.fontFamilyBase,\n    textAlign: 'left',\n    flexGrow: 1,\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n  },\n\n  placeholder: {\n    color: tokens.colorNeutralForeground4,\n  },\n\n  // size variants\n  medium: {\n    ...typographyStyles.caption1,\n    padding: `3px ${\n      tokens.spacingHorizontalSNudge\n    } 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  large: {\n    ...typographyStyles.body1,\n    padding: `5px ${\n      tokens.spacingHorizontalMNudge\n    } 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  'extra-large': {\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.body2,\n    padding: `7px ${\n      tokens.spacingHorizontalM\n    } 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n    borderRadius: '0',\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid transparent`,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    border: `${tokens.strokeWidthThin} solid transparent`,\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  invalidUnderline: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      borderBottomColor: tokens.colorPaletteRedBorder2,\n    },\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  disabledText: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n\n  hidden: {\n    display: 'none',\n  },\n  visuallyHidden: {\n    clip: 'rect(0px, 0px, 0px, 0px)',\n    height: '1px',\n    margin: '-1px',\n    overflow: 'hidden',\n    padding: '0px',\n    width: '1px',\n    position: 'absolute',\n  },\n});\n\n/**\n * Apply styling to the PickerButton slots based on the state\n */\nexport const useTagPickerButtonStyles_unstable = (state: TagPickerButtonState): TagPickerButtonState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    tagPickerButtonClassNames.root,\n    styles.button,\n    styles[state.size],\n    state.hasSelectedOption && styles.visuallyHidden,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","tagPickerButtonClassNames","root","useStyles","button","alignItems","minHeight","backgroundColor","colorTransparentBackground","border","boxSizing","color","colorNeutralForeground1","columnGap","spacingHorizontalXXS","cursor","fontFamily","fontFamilyBase","textAlign","flexGrow","outlineStyle","placeholder","colorNeutralForeground4","medium","caption1","padding","spacingHorizontalSNudge","large","body1","spacingHorizontalMNudge","body2","spacingHorizontalM","outline","colorNeutralBackground1","strokeWidthThin","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStroke1Pressed","underline","borderBottom","borderRadius","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","colorNeutralStrokeDisabled","disabledText","colorNeutralForegroundDisabled","hidden","display","visuallyHidden","clip","height","margin","overflow","width","position","useTagPickerButtonStyles_unstable","state","styles","className","size","hasSelectedOption"],"mappings":"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"}

package/lib/components/TagPickerControl/TagPickerControl.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useTagPickerControl_unstable } from './useTagPickerControl';
 import { renderTagPickerControl_unstable } from './renderTagPickerControl';

package/lib/components/TagPickerControl/TagPickerControl.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerControl/TagPickerControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerControl_unstable } from './useTagPickerControl';\nimport { renderTagPickerControl_unstable } from './renderTagPickerControl';\nimport { useTagPickerControlStyles_unstable } from './useTagPickerControlStyles.styles';\nimport type { TagPickerControlProps } from './TagPickerControl.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TagPickerControl component -\n * A TagPickerControl is a composite component that controls actions and state for a TagPicker.\n */\nexport const TagPickerControl: ForwardRefComponent<TagPickerControlProps> = React.forwardRef((props, ref) => {\n  const state = useTagPickerControl_unstable(props, ref);\n\n  useTagPickerControlStyles_unstable(state);\n  useCustomStyleHook_unstable('useTagPickerControlStyles_unstable')(state);\n  return renderTagPickerControl_unstable(state);\n});\n\nTagPickerControl.displayName = 'TagPickerControl';\n"],"names":["React","useTagPickerControl_unstable","renderTagPickerControl_unstable","useTagPickerControlStyles_unstable","useCustomStyleHook_unstable","TagPickerControl","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,kCAAkC,QAAQ,qCAAqC;AAExF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,iCAA+DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,QAAQR,6BAA6BM,OAAOC;IAElDL,mCAAmCM;IACnCL,4BAA4B,sCAAsCK;IAClE,OAAOP,gCAAgCO;AACzC,GAAG;AAEHJ,iBAAiBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/TagPickerControl/TagPickerControl.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTagPickerControl_unstable } from './useTagPickerControl';\nimport { renderTagPickerControl_unstable } from './renderTagPickerControl';\nimport { useTagPickerControlStyles_unstable } from './useTagPickerControlStyles.styles';\nimport type { TagPickerControlProps } from './TagPickerControl.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TagPickerControl component -\n * A TagPickerControl is a composite component that controls actions and state for a TagPicker.\n */\nexport const TagPickerControl: ForwardRefComponent<TagPickerControlProps> = React.forwardRef((props, ref) => {\n  const state = useTagPickerControl_unstable(props, ref);\n\n  useTagPickerControlStyles_unstable(state);\n  useCustomStyleHook_unstable('useTagPickerControlStyles_unstable')(state);\n  return renderTagPickerControl_unstable(state);\n});\n\nTagPickerControl.displayName = 'TagPickerControl';\n"],"names":["React","useTagPickerControl_unstable","renderTagPickerControl_unstable","useTagPickerControlStyles_unstable","useCustomStyleHook_unstable","TagPickerControl","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,kCAAkC,QAAQ,qCAAqC;AAExF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,iCAA+DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,QAAQR,6BAA6BM,OAAOC;IAElDL,mCAAmCM;IACnCL,4BAA4B,sCAAsCK;IAClE,OAAOP,gCAAgCO;AACzC,GAAG;AAEHJ,iBAAiBK,WAAW,GAAG"}

package/lib/components/TagPickerControl/renderTagPickerControl.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerControl/renderTagPickerControl.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type {\n  TagPickerControlState,\n  TagPickerControlSlots,\n  TagPickerControlInternalSlots,\n} from './TagPickerControl.types';\n\n/**\n * Render the final JSX of PickerControl\n */\nexport const renderTagPickerControl_unstable = (state: TagPickerControlState) => {\n  assertSlots<TagPickerControlSlots & TagPickerControlInternalSlots>(state);\n\n  return (\n    <state.root>\n      {state.root.children}\n      {state.aside && (\n        <state.aside>\n          {state.secondaryAction && <state.secondaryAction />}\n          {state.expandIcon && <state.expandIcon />}\n        </state.aside>\n      )}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTagPickerControl_unstable","state","root","children","aside","secondaryAction","expandIcon"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAOxD;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9CF,YAAmEE;IAEnE,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,KAAK,kBACV,MAACH,MAAMG,KAAK;;oBACTH,MAAMI,eAAe,kBAAI,KAACJ,MAAMI,eAAe;oBAC/CJ,MAAMK,UAAU,kBAAI,KAACL,MAAMK,UAAU;;;;;AAKhD,EAAE"}
+{"version":3,"sources":["../src/components/TagPickerControl/renderTagPickerControl.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type {\n  TagPickerControlState,\n  TagPickerControlSlots,\n  TagPickerControlInternalSlots,\n} from './TagPickerControl.types';\n\n/**\n * Render the final JSX of PickerControl\n */\nexport const renderTagPickerControl_unstable = (state: TagPickerControlState): JSXElement => {\n  assertSlots<TagPickerControlSlots & TagPickerControlInternalSlots>(state);\n\n  return (\n    <state.root>\n      {state.root.children}\n      {state.aside && (\n        <state.aside>\n          {state.secondaryAction && <state.secondaryAction />}\n          {state.expandIcon && <state.expandIcon />}\n        </state.aside>\n      )}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTagPickerControl_unstable","state","root","children","aside","secondaryAction","expandIcon"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAQxD;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9CF,YAAmEE;IAEnE,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,KAAK,kBACV,MAACH,MAAMG,KAAK;;oBACTH,MAAMI,eAAe,kBAAI,KAACJ,MAAMI,eAAe;oBAC/CJ,MAAMK,UAAU,kBAAI,KAACL,MAAMK,UAAU;;;;;AAKhD,EAAE"}

package/lib/components/TagPickerControl/useTagPickerControl.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { elementContains, getIntrinsicElementProps, slot, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';
 import { useFluent_unstable } from '@fluentui/react-shared-contexts';

package/lib/components/TagPickerControl/useTagPickerControl.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ExtractSlotProps,\n  Slot,\n  elementContains,\n  getIntrinsicElementProps,\n  slot,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport type { TagPickerControlProps, TagPickerControlState } from './TagPickerControl.types';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { useResizeObserverRef } from '../../utils/useResizeObserverRef';\nimport { tagPickerControlAsideWidthToken } from './useTagPickerControlStyles.styles';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\nimport { useExpandLabel } from '../../utils/useExpandLabel';\n\n/**\n * Create the state required to render PickerControl.\n *\n * The returned state can be modified with hooks such as usePickerControlStyles_unstable,\n * before being passed to renderPickerControl_unstable.\n *\n * @param props - props from this instance of PickerControl\n * @param ref - reference to root HTMLDivElement of PickerControl\n */\nexport const useTagPickerControl_unstable = (\n  props: TagPickerControlProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagPickerControlState => {\n  const targetRef = useTagPickerContext_unstable(ctx => ctx.targetRef);\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n  const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n  const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n  const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n  const secondaryInnerActionRef = useTagPickerContext_unstable(ctx => ctx.secondaryActionRef);\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n  const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n  const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n  const invalid = useFieldContext_unstable()?.validationState === 'error';\n  const noPopover = useTagPickerContext_unstable(ctx => ctx.noPopover ?? false);\n\n  const { targetDocument } = useFluent_unstable();\n  const tagPickerId = useId('tagPicker-');\n  const rafIdRef = React.useRef<number | null>(null);\n\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLSpanElement>(null);\n  const asideRef = React.useRef<HTMLSpanElement>(null);\n\n  const secondaryAction = slot.optional(props.secondaryAction, {\n    elementType: 'span',\n  });\n  const secondaryActionRef = useMergedRefs(secondaryInnerActionRef, secondaryAction?.ref);\n  if (secondaryAction) {\n    secondaryAction.ref = secondaryActionRef;\n  }\n\n  const expandIcon = slot.optional(props.expandIcon, {\n    renderByDefault: !noPopover,\n    defaultProps: {\n      'aria-expanded': open,\n      'aria-disabled': disabled ? 'true' : undefined,\n      children: <ChevronDownRegular />,\n      role: 'button',\n    },\n    elementType: 'span',\n  });\n\n  const expandIconMergeRef = useMergedRefs(expandIcon?.ref, expandIconRef);\n  if (expandIcon) {\n    expandIcon.ref = expandIconMergeRef;\n  }\n\n  const observerRef = useResizeObserverRef<HTMLSpanElement>(([entry]) => {\n    const targetWindow = targetDocument?.defaultView;\n\n    if (targetWindow) {\n      rafIdRef.current = targetWindow.requestAnimationFrame(() => {\n        innerRef.current?.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n      });\n    }\n  });\n  const aside = slot.optional<ExtractSlotProps<Slot<'span'>>>(undefined, {\n    elementType: 'span',\n    renderByDefault: Boolean(secondaryAction || expandIcon),\n    defaultProps: {\n      ref: observerRef,\n    },\n  });\n  const mergedAsideRefs = useMergedRefs(asideRef, aside?.ref);\n  if (aside) {\n    aside.ref = mergedAsideRefs;\n  }\n\n  const handleMouseDown = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    if (\n      elementContains(expandIconRef.current, event.target as Node) ||\n      event.target === innerRef.current ||\n      event.target === tagPickerGroupRef.current ||\n      event.target === asideRef.current\n    ) {\n      event.preventDefault();\n      setOpen(event, !open);\n      triggerRef.current?.focus();\n    }\n  });\n\n  const state: TagPickerControlState = {\n    components: {\n      root: 'div',\n      expandIcon: 'span',\n      secondaryAction: 'span',\n      aside: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, targetRef, innerRef),\n        'aria-owns': open && !noPopover ? popoverId : undefined,\n        ...props,\n        onMouseDown: handleMouseDown,\n      }),\n      { elementType: 'div' },\n    ),\n    aside,\n    expandIcon,\n    secondaryAction,\n    size,\n    appearance,\n    disabled,\n    invalid,\n  };\n\n  const expandIconLabelRef = useExpandLabel({ tagPickerId, state: state as Pick<TagPickerControlState, 'expandIcon'> });\n\n  const expandIconLabelMergeRef = useMergedRefs(expandIcon?.ref, expandIconLabelRef);\n  if (state.expandIcon) {\n    state.expandIcon.ref = expandIconLabelMergeRef;\n  }\n\n  React.useEffect(() => {\n    if (rafIdRef.current && targetDocument?.defaultView) {\n      targetDocument.defaultView.cancelAnimationFrame(rafIdRef.current);\n    }\n  }, [targetDocument]);\n\n  return state;\n};\n"],"names":["React","elementContains","getIntrinsicElementProps","slot","useEventCallback","useId","useMergedRefs","useFluent_unstable","useTagPickerContext_unstable","ChevronDownRegular","useResizeObserverRef","tagPickerControlAsideWidthToken","useFieldContext_unstable","useExpandLabel","useTagPickerControl_unstable","props","ref","targetRef","ctx","triggerRef","tagPickerGroupRef","open","popoverId","setOpen","secondaryInnerActionRef","secondaryActionRef","size","appearance","disabled","invalid","validationState","noPopover","targetDocument","tagPickerId","rafIdRef","useRef","innerRef","expandIconRef","asideRef","secondaryAction","optional","elementType","expandIcon","renderByDefault","defaultProps","undefined","children","role","expandIconMergeRef","observerRef","entry","targetWindow","defaultView","current","requestAnimationFrame","style","setProperty","contentRect","width","aside","Boolean","mergedAsideRefs","handleMouseDown","event","isDefaultPrevented","target","preventDefault","focus","state","components","root","always","onMouseDown","expandIconLabelRef","expandIconLabelMergeRef","useEffect","cancelAnimationFrame"],"mappings":"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"}
+{"version":3,"sources":["../src/components/TagPickerControl/useTagPickerControl.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  ExtractSlotProps,\n  Slot,\n  elementContains,\n  getIntrinsicElementProps,\n  slot,\n  useEventCallback,\n  useId,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport type { TagPickerControlProps, TagPickerControlState } from './TagPickerControl.types';\nimport { useTagPickerContext_unstable } from '../../contexts/TagPickerContext';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { useResizeObserverRef } from '../../utils/useResizeObserverRef';\nimport { tagPickerControlAsideWidthToken } from './useTagPickerControlStyles.styles';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\nimport { useExpandLabel } from '../../utils/useExpandLabel';\n\n/**\n * Create the state required to render PickerControl.\n *\n * The returned state can be modified with hooks such as usePickerControlStyles_unstable,\n * before being passed to renderPickerControl_unstable.\n *\n * @param props - props from this instance of PickerControl\n * @param ref - reference to root HTMLDivElement of PickerControl\n */\nexport const useTagPickerControl_unstable = (\n  props: TagPickerControlProps,\n  ref: React.Ref<HTMLDivElement>,\n): TagPickerControlState => {\n  const targetRef = useTagPickerContext_unstable(ctx => ctx.targetRef);\n  const triggerRef = useTagPickerContext_unstable(ctx => ctx.triggerRef);\n  const tagPickerGroupRef = useTagPickerContext_unstable(ctx => ctx.tagPickerGroupRef);\n  const open = useTagPickerContext_unstable(ctx => ctx.open);\n  const popoverId = useTagPickerContext_unstable(ctx => ctx.popoverId);\n  const setOpen = useTagPickerContext_unstable(ctx => ctx.setOpen);\n  const secondaryInnerActionRef = useTagPickerContext_unstable(ctx => ctx.secondaryActionRef);\n  const size = useTagPickerContext_unstable(ctx => ctx.size);\n  const appearance = useTagPickerContext_unstable(ctx => ctx.appearance);\n  const disabled = useTagPickerContext_unstable(ctx => ctx.disabled);\n  const invalid = useFieldContext_unstable()?.validationState === 'error';\n  const noPopover = useTagPickerContext_unstable(ctx => ctx.noPopover ?? false);\n\n  const { targetDocument } = useFluent_unstable();\n  const tagPickerId = useId('tagPicker-');\n  const rafIdRef = React.useRef<number | null>(null);\n\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLSpanElement>(null);\n  const asideRef = React.useRef<HTMLSpanElement>(null);\n\n  const secondaryAction = slot.optional(props.secondaryAction, {\n    elementType: 'span',\n  });\n  const secondaryActionRef = useMergedRefs(secondaryInnerActionRef, secondaryAction?.ref);\n  if (secondaryAction) {\n    secondaryAction.ref = secondaryActionRef;\n  }\n\n  const expandIcon = slot.optional(props.expandIcon, {\n    renderByDefault: !noPopover,\n    defaultProps: {\n      'aria-expanded': open,\n      'aria-disabled': disabled ? 'true' : undefined,\n      children: <ChevronDownRegular />,\n      role: 'button',\n    },\n    elementType: 'span',\n  });\n\n  const expandIconMergeRef = useMergedRefs(expandIcon?.ref, expandIconRef);\n  if (expandIcon) {\n    expandIcon.ref = expandIconMergeRef;\n  }\n\n  const observerRef = useResizeObserverRef<HTMLSpanElement>(([entry]) => {\n    const targetWindow = targetDocument?.defaultView;\n\n    if (targetWindow) {\n      rafIdRef.current = targetWindow.requestAnimationFrame(() => {\n        innerRef.current?.style.setProperty(tagPickerControlAsideWidthToken, `${entry.contentRect.width}px`);\n      });\n    }\n  });\n  const aside = slot.optional<ExtractSlotProps<Slot<'span'>>>(undefined, {\n    elementType: 'span',\n    renderByDefault: Boolean(secondaryAction || expandIcon),\n    defaultProps: {\n      ref: observerRef,\n    },\n  });\n  const mergedAsideRefs = useMergedRefs(asideRef, aside?.ref);\n  if (aside) {\n    aside.ref = mergedAsideRefs;\n  }\n\n  const handleMouseDown = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    if (\n      elementContains(expandIconRef.current, event.target as Node) ||\n      event.target === innerRef.current ||\n      event.target === tagPickerGroupRef.current ||\n      event.target === asideRef.current\n    ) {\n      event.preventDefault();\n      setOpen(event, !open);\n      triggerRef.current?.focus();\n    }\n  });\n\n  const state: TagPickerControlState = {\n    components: {\n      root: 'div',\n      expandIcon: 'span',\n      secondaryAction: 'span',\n      aside: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, targetRef, innerRef),\n        'aria-owns': open && !noPopover ? popoverId : undefined,\n        ...props,\n        onMouseDown: handleMouseDown,\n      }),\n      { elementType: 'div' },\n    ),\n    aside,\n    expandIcon,\n    secondaryAction,\n    size,\n    appearance,\n    disabled,\n    invalid,\n  };\n\n  const expandIconLabelRef = useExpandLabel({ tagPickerId, state: state as Pick<TagPickerControlState, 'expandIcon'> });\n\n  const expandIconLabelMergeRef = useMergedRefs(expandIcon?.ref, expandIconLabelRef);\n  if (state.expandIcon) {\n    state.expandIcon.ref = expandIconLabelMergeRef;\n  }\n\n  React.useEffect(() => {\n    if (rafIdRef.current && targetDocument?.defaultView) {\n      targetDocument.defaultView.cancelAnimationFrame(rafIdRef.current);\n    }\n  }, [targetDocument]);\n\n  return state;\n};\n"],"names":["React","elementContains","getIntrinsicElementProps","slot","useEventCallback","useId","useMergedRefs","useFluent_unstable","useTagPickerContext_unstable","ChevronDownRegular","useResizeObserverRef","tagPickerControlAsideWidthToken","useFieldContext_unstable","useExpandLabel","useTagPickerControl_unstable","props","ref","targetRef","ctx","triggerRef","tagPickerGroupRef","open","popoverId","setOpen","secondaryInnerActionRef","secondaryActionRef","size","appearance","disabled","invalid","validationState","noPopover","targetDocument","tagPickerId","rafIdRef","useRef","innerRef","expandIconRef","asideRef","secondaryAction","optional","elementType","expandIcon","renderByDefault","defaultProps","undefined","children","role","expandIconMergeRef","observerRef","entry","targetWindow","defaultView","current","requestAnimationFrame","style","setProperty","contentRect","width","aside","Boolean","mergedAsideRefs","handleMouseDown","event","isDefaultPrevented","target","preventDefault","focus","state","components","root","always","onMouseDown","expandIconLabelRef","expandIconLabelMergeRef","useEffect","cancelAnimationFrame"],"mappings":"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"}

package/lib/components/TagPickerControl/useTagPickerControlStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const tagPickerControlClassNames = {