@fluentui/react-tag-picker 0.0.0-nightly-20240510-0407.1

package/dist/index.d.ts

@@ -0,0 +1,453 @@
+/// <reference types="react" />
+
+import type { ActiveDescendantContextValue } from '@fluentui/react-aria';
+import { ComboboxBaseState } from '@fluentui/react-combobox';
+import { ComboboxProps } from '@fluentui/react-combobox';
+import { ComboboxSlots } from '@fluentui/react-combobox';
+import type { ComboboxState } from '@fluentui/react-combobox';
+import { ComponentProps } from '@fluentui/react-utilities';
+import { ComponentState } from '@fluentui/react-utilities';
+import { DropdownProps } from '@fluentui/react-combobox';
+import type { EventData } from '@fluentui/react-utilities';
+import type { EventHandler } from '@fluentui/react-utilities';
+import type { ExtractSlotProps } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { Listbox } from '@fluentui/react-combobox';
+import type { ListboxContextValue } from '@fluentui/react-combobox';
+import { OptionGroupProps } from '@fluentui/react-combobox';
+import { OptionGroupSlots } from '@fluentui/react-combobox';
+import { OptionGroupState } from '@fluentui/react-combobox';
+import { OptionSlots } from '@fluentui/react-combobox';
+import { OptionState } from '@fluentui/react-combobox';
+import * as React_2 from 'react';
+import { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import { TagGroupContextValues } from '@fluentui/react-tags';
+import type { TagGroupSlots } from '@fluentui/react-tags';
+import type { TagGroupState } from '@fluentui/react-tags';
+
+/**
+ * Render the final JSX of Picker
+ */
+export declare const renderTagPicker_unstable: (state: TagPickerState, contexts: TagPickerContextValues) => JSX.Element;
+
+/**
+ * Render the final JSX of PickerButton
+ */
+export declare const renderTagPickerButton_unstable: (state: TagPickerButtonState) => JSX.Element;
+
+/**
+ * Render the final JSX of PickerControl
+ */
+export declare const renderTagPickerControl_unstable: (state: TagPickerControlState) => JSX.Element;
+
+export declare function renderTagPickerGroup_unstable(state: TagPickerGroupState, contexts: TagGroupContextValues): JSX.Element | null;
+
+/**
+ * Render the final JSX of TagPickerInput
+ */
+export declare const renderTagPickerInput_unstable: (state: TagPickerInputState) => JSX.Element;
+
+/**
+ * Render the final JSX of TagPickerList
+ */
+export declare const renderTagPickerList_unstable: (state: TagPickerListState) => JSX.Element;
+
+/**
+ * Render the final JSX of TagPickerOption
+ */
+export declare const renderTagPickerOption_unstable: (state: TagPickerOptionState) => JSX.Element;
+
+/**
+ * Render the final JSX of TagPickerOptionGroup
+ */
+export declare const renderTagPickerOptionGroup: (state: TagPickerOptionGroupState) => JSX.Element;
+
+/**
+ * TagPicker component -
+ * A TagPicker is a composite component that allows users to pick tags from a list of options.
+ */
+export declare const TagPicker: React_2.FC<TagPickerProps>;
+
+/**
+ * TagPickerButton component -
+ * A TagPickerButton is an alternative to TagPickerInput that does not include an input field.
+ */
+export declare const TagPickerButton: ForwardRefComponent<TagPickerButtonProps>;
+
+export declare const tagPickerButtonClassNames: SlotClassNames<TagPickerButtonSlots>;
+
+/**
+ * PickerButton Props
+ */
+export declare type TagPickerButtonProps = ComponentProps<TagPickerButtonSlots> & Pick<DropdownProps, 'size' | 'appearance'> & {
+    disabled?: boolean;
+};
+
+export declare type TagPickerButtonSlots = {
+    root: Slot<'button'>;
+};
+
+/**
+ * State used in rendering PickerButton
+ */
+export declare type TagPickerButtonState = ComponentState<TagPickerButtonSlots> & Pick<TagPickerContextValue, 'size'> & {
+    hasSelectedOption: boolean;
+};
+
+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>;
+    popoverId: string;
+    targetRef: React_2.RefObject<HTMLDivElement>;
+    secondaryActionRef: React_2.RefObject<HTMLSpanElement>;
+    tagPickerGroupRef: React_2.RefObject<HTMLDivElement>;
+    size: TagPickerSize;
+}
+
+export declare type TagPickerContextValues = {
+    picker: TagPickerContextValue;
+    activeDescendant: ActiveDescendantContextValue;
+    listbox: ListboxContextValue;
+};
+
+/**
+ * TagPickerControl component -
+ * A TagPickerControl is a composite component that controls actions and state for a TagPicker.
+ */
+export declare const TagPickerControl: ForwardRefComponent<TagPickerControlProps>;
+
+export declare const tagPickerControlClassNames: SlotClassNames<TagPickerControlSlots & TagPickerControlInternalSlots>;
+
+declare type TagPickerControlCSSProperties = React_2.CSSProperties & {
+    '--fui-TagPickerControl-aside-width'?: string | number;
+};
+
+declare type TagPickerControlInternalSlots = {
+    aside?: NonNullable<Slot<'span'>>;
+};
+
+/**
+ * PickerControl Props
+ */
+export declare type TagPickerControlProps = ComponentProps<Partial<TagPickerControlSlots>>;
+
+export declare type TagPickerControlSlots = {
+    root: Slot<ExtractSlotProps<Slot<'div'> & {
+        style?: TagPickerControlCSSProperties;
+    }>>;
+    /**
+     * A secondary action should be a button-like element to be rendered right after
+     * the trigger responsible for opening/closing the tag picker popover.
+     */
+    secondaryAction: Slot<'span'>;
+} & Pick<ComboboxSlots, 'expandIcon'>;
+
+/**
+ * State used in rendering PickerControl
+ */
+export declare type TagPickerControlState = ComponentState<TagPickerControlSlots & TagPickerControlInternalSlots> & Pick<TagPickerContextValue, 'size' | 'appearance' | 'disabled'> & {
+    invalid: boolean;
+};
+
+/**
+ * TagPickerGroup component -
+ * A TagPickerGroup is a composite component that allows users to group tags together.
+ */
+export declare const TagPickerGroup: ForwardRefComponent<TagPickerGroupProps>;
+
+export declare const tagPickerGroupClassNames: SlotClassNames<TagPickerGroupSlots>;
+
+/**
+ * TagPickerGroup Props
+ */
+export declare type TagPickerGroupProps = ComponentProps<TagPickerGroupSlots>;
+
+export declare type TagPickerGroupSlots = TagGroupSlots;
+
+/**
+ * State used in rendering TagPickerGroup
+ */
+export declare type TagPickerGroupState = TagGroupState & {
+    hasSelectedOptions: boolean;
+};
+
+/**
+ * TagPickerInput component -
+ * A TagPickerInput is a composite component that allows users to query tags.
+ */
+export declare const TagPickerInput: ForwardRefComponent<TagPickerInputProps>;
+
+export declare const tagPickerInputClassNames: SlotClassNames<TagPickerInputSlots>;
+
+/**
+ * TagPickerInput Props
+ */
+export declare type TagPickerInputProps = Omit<ComponentProps<Partial<TagPickerInputSlots>>, 'children' | 'size' | 'defaultValue'> & Pick<ComboboxProps, 'clearable' | 'appearance'> & {
+    disabled?: boolean;
+    value?: string;
+};
+
+export declare type TagPickerInputSlots = {
+    root: NonNullable<Slot<'input'>>;
+};
+
+/**
+ * State used in rendering TagPickerInput
+ */
+export declare type TagPickerInputState = ComponentState<TagPickerInputSlots> & Pick<TagPickerContextValue, 'size' | 'disabled'>;
+
+/**
+ * TagPickerList component -
+ * A TagPickerList is a composite component that allows users to display a list of tag options to be selected.
+ */
+export declare const TagPickerList: ForwardRefComponent<TagPickerListProps>;
+
+export declare const tagPickerListClassNames: SlotClassNames<TagPickerListSlots>;
+
+/**
+ * TagPickerList Props
+ */
+export declare type TagPickerListProps = ComponentProps<TagPickerListSlots>;
+
+export declare type TagPickerListSlots = {
+    root: Slot<typeof Listbox>;
+};
+
+/**
+ * State used in rendering TagPickerList
+ */
+export declare type TagPickerListState = ComponentState<TagPickerListSlots> & Pick<TagPickerContextValue, 'open'>;
+
+export declare type TagPickerOnOpenChangeData = {
+    open: boolean;
+} & (EventData<'click', React_2.MouseEvent<HTMLDivElement>> | EventData<'keydown', React_2.KeyboardEvent<HTMLDivElement>>);
+
+/**
+ * Event data for the `onOptionSelect` event.
+ *
+ * * value - The value of the selected option that triggered the event
+ * * selectedOptions - The list of selected options
+ */
+export declare type TagPickerOnOptionSelectData = {
+    value: string;
+    selectedOptions: string[];
+} & (EventData<'click', React_2.MouseEvent<HTMLDivElement>> | EventData<'keydown', React_2.KeyboardEvent<HTMLDivElement>>);
+
+/**
+ * TagPickerOption component -
+ * A TagPickerOption is a composite component that allows users to select tags.
+ */
+export declare const TagPickerOption: ForwardRefComponent<TagPickerOptionProps>;
+
+export declare const tagPickerOptionClassNames: SlotClassNames<TagPickerOptionSlots>;
+
+/**
+ * TagPickerOptionGroup component -
+ * A TagPickerOptionGroup is a composite component that allows users to group TagPickerOptions.
+ */
+export declare const TagPickerOptionGroup: ForwardRefComponent<TagPickerOptionGroupProps>;
+
+export declare const tagPickerOptionGroupClassNames: SlotClassNames<TagPickerOptionGroupSlots>;
+
+/**
+ * TagPickerOptionGroup Props
+ */
+export declare type TagPickerOptionGroupProps = OptionGroupProps;
+
+export declare type TagPickerOptionGroupSlots = OptionGroupSlots;
+
+/**
+ * State used in rendering TagPickerOptionGroup
+ */
+export declare type TagPickerOptionGroupState = OptionGroupState;
+
+/**
+ * TagPickerOption Props
+ */
+export declare type TagPickerOptionProps = ComponentProps<TagPickerOptionSlots> & {
+    children: React_2.ReactNode;
+    value: string;
+};
+
+export declare type TagPickerOptionSlots = Pick<OptionSlots, 'root'> & {
+    media?: Slot<'div'>;
+    secondaryContent?: Slot<'span'>;
+};
+
+/**
+ * State used in rendering TagPickerOption
+ */
+export declare type TagPickerOptionState = ComponentState<TagPickerOptionSlots> & Pick<OptionState, 'components' | 'root'>;
+
+/**
+ * Picker Props
+ */
+export declare type TagPickerProps = ComponentProps<TagPickerSlots> & Pick<ComboboxProps, 'positioning' | 'disabled' | 'defaultOpen' | 'selectedOptions' | 'defaultSelectedOptions' | 'open'> & Pick<Partial<TagPickerContextValue>, 'size' | 'appearance'> & {
+    onOpenChange?: EventHandler<TagPickerOnOpenChangeData>;
+    onOptionSelect?: EventHandler<TagPickerOnOptionSelectData>;
+    /**
+     * Can contain two children including a trigger and a popover
+     */
+    children: [JSX.Element, JSX.Element] | JSX.Element;
+    /**
+     * TagPickers are rendered out of DOM order on `document.body` by default,
+     * use this to render the popover in DOM order
+     *
+     * @default false
+     */
+    inline?: boolean;
+};
+
+export declare type TagPickerSize = 'medium' | 'large' | 'extra-large';
+
+export declare type TagPickerSlots = {};
+
+/**
+ * State used in rendering Picker
+ */
+export declare type TagPickerState = ComponentState<TagPickerSlots> & Pick<ComboboxState, 'open' | 'activeDescendantController' | 'mountNode' | 'onOptionClick' | 'registerOption' | 'selectedOptions' | 'selectOption' | 'value' | 'setValue' | 'setOpen' | 'setHasFocus' | 'appearance' | 'clearSelection' | 'getOptionById' | 'disabled'> & Pick<TagPickerContextValue, 'triggerRef' | 'secondaryActionRef' | 'popoverId' | 'popoverRef' | 'targetRef' | 'tagPickerGroupRef' | 'size'> & {
+    trigger: React_2.ReactNode;
+    popover?: React_2.ReactNode;
+    inline: boolean;
+};
+
+/**
+ * Create the state required to render Picker.
+ *
+ * The returned state can be modified with hooks such as usePickerStyles_unstable,
+ * before being passed to renderPicker_unstable.
+ *
+ * @param props - props from this instance of Picker
+ */
+export declare const useTagPicker_unstable: (props: TagPickerProps) => TagPickerState;
+
+/**
+ * Create the state required to render PickerButton.
+ *
+ * The returned state can be modified with hooks such as usePickerButtonStyles_unstable,
+ * before being passed to renderPickerButton_unstable.
+ *
+ * @param props - props from this instance of PickerButton
+ * @param ref - reference to root HTMLDivElement of PickerButton
+ */
+export declare const useTagPickerButton_unstable: (props: TagPickerButtonProps, ref: React_2.Ref<HTMLButtonElement>) => TagPickerButtonState;
+
+/**
+ * Apply styling to the PickerButton slots based on the state
+ */
+export declare const useTagPickerButtonStyles_unstable: (state: TagPickerButtonState) => TagPickerButtonState;
+
+/**
+ * Create the state required to render PickerControl.
+ *
+ * The returned state can be modified with hooks such as usePickerControlStyles_unstable,
+ * before being passed to renderPickerControl_unstable.
+ *
+ * @param props - props from this instance of PickerControl
+ * @param ref - reference to root HTMLDivElement of PickerControl
+ */
+export declare const useTagPickerControl_unstable: (props: TagPickerControlProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerControlState;
+
+/**
+ * Apply styling to the PickerControl slots based on the state
+ */
+export declare const useTagPickerControlStyles_unstable: (state: TagPickerControlState) => TagPickerControlState;
+
+export declare function useTagPickerFilter({ filter: filterOverride, noOptionsElement, renderOption, query, options, }: UseTagPickerFilterConfig): JSX.Element[];
+
+declare type UseTagPickerFilterConfig = {
+    query: string;
+    options: string[];
+    /**
+     * Provides a custom filter for the option.
+     * By default the filter will check if the option includes the query.
+     */
+    filter?: (option: string, index: number) => boolean;
+    /** Provides an element to be displayed when there are no options. */
+    noOptionsElement: JSX.Element;
+    /** Provides a custom render for the option. */
+    renderOption?: (option: string) => JSX.Element;
+};
+
+/**
+ * Create the state required to render TagPickerGroup.
+ *
+ * The returned state can be modified with hooks such as usePickerTagGroupStyles_unstable,
+ * before being passed to renderPickerTagGroup_unstable.
+ *
+ * @param props - props from this instance of TagPickerGroup
+ * @param ref - reference to root HTMLDivElement of TagPickerGroup
+ */
+export declare const useTagPickerGroup_unstable: (props: TagPickerGroupProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerGroupState;
+
+/**
+ * Apply styling to the TagPickerGroup slots based on the state
+ */
+export declare const useTagPickerGroupStyles_unstable: (state: TagPickerGroupState) => TagPickerGroupState;
+
+/**
+ * Create the state required to render TagPickerInput.
+ *
+ * The returned state can be modified with hooks such as useTagPickerInputStyles_unstable,
+ * before being passed to renderTagPickerInput_unstable.
+ *
+ * @param props - props from this instance of TagPickerInput
+ * @param ref - reference to root HTMLDivElement of TagPickerInput
+ */
+export declare const useTagPickerInput_unstable: (props: TagPickerInputProps, ref: React_2.Ref<HTMLInputElement>) => TagPickerInputState;
+
+/**
+ * Apply styling to the TagPickerInput slots based on the state
+ */
+export declare const useTagPickerInputStyles_unstable: (state: TagPickerInputState) => TagPickerInputState;
+
+/**
+ * Create the state required to render TagPickerList.
+ *
+ * The returned state can be modified with hooks such as useTagPickerListStyles_unstable,
+ * before being passed to renderTagPickerList_unstable.
+ *
+ * @param props - props from this instance of TagPickerList
+ * @param ref - reference to root HTMLDivElement of TagPickerList
+ */
+export declare const useTagPickerList_unstable: (props: TagPickerListProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerListState;
+
+/**
+ * Apply styling to the TagPickerList slots based on the state
+ */
+export declare const useTagPickerListStyles_unstable: (state: TagPickerListState) => TagPickerListState;
+
+/**
+ * Create the state required to render TagPickerOption.
+ *
+ * The returned state can be modified with hooks such as useTagPickerOptionStyles_unstable,
+ * before being passed to renderTagPickerOption_unstable.
+ *
+ * @param props - props from this instance of TagPickerOption
+ * @param ref - reference to root HTMLDivElement of TagPickerOption
+ */
+export declare const useTagPickerOption_unstable: (props: TagPickerOptionProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerOptionState;
+
+/**
+ * Create the state required to render TagPickerOptionGroup.
+ *
+ * The returned state can be modified with hooks such as useTagPickerOptionGroupStyles_unstable,
+ * before being passed to renderTagPickerOptionGroup_unstable.
+ *
+ * @param props - props from this instance of TagPickerOptionGroup
+ * @param ref - reference to root HTMLDivElement of TagPickerOptionGroup
+ */
+export declare const useTagPickerOptionGroup: (props: TagPickerOptionGroupProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerOptionGroupState;
+
+/**
+ * Apply styling to the TagPickerOptionGroup slots based on the state
+ */
+export declare const useTagPickerOptionGroupStyles: (state: TagPickerOptionGroupState) => TagPickerOptionGroupState;
+
+/**
+ * Apply styling to the TagPickerOption slots based on the state
+ */
+export declare const useTagPickerOptionStyles_unstable: (state: TagPickerOptionState) => TagPickerOptionState;
+
+export { }

package/lib/TagPicker.js

@@ -0,0 +1 @@
+export * from './components/TagPicker/index';

package/lib/TagPicker.js.map

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

package/lib/TagPickerButton.js

@@ -0,0 +1 @@
+export * from './components/TagPickerButton/index';

package/lib/TagPickerButton.js.map

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

package/lib/TagPickerControl.js

@@ -0,0 +1 @@
+export * from './components/TagPickerControl/index';

package/lib/TagPickerControl.js.map

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

package/lib/TagPickerGroup.js

@@ -0,0 +1 @@
+export * from './components/TagPickerGroup/index';

package/lib/TagPickerGroup.js.map

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

package/lib/TagPickerInput.js

@@ -0,0 +1 @@
+export * from './components/TagPickerInput/index';

package/lib/TagPickerInput.js.map

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

package/lib/TagPickerList.js

@@ -0,0 +1 @@
+export * from './components/TagPickerList/index';

package/lib/TagPickerList.js.map

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

package/lib/TagPickerOption.js

@@ -0,0 +1 @@
+export * from './components/TagPickerOption/index';

package/lib/TagPickerOption.js.map

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

package/lib/TagPickerOptionGroup.js

@@ -0,0 +1 @@
+export * from './components/TagPickerOptionGroup/index';

package/lib/TagPickerOptionGroup.js.map

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

package/lib/components/TagPicker/TagPicker.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { useTagPicker_unstable } from './useTagPicker';
+import { renderTagPicker_unstable } from './renderTagPicker';
+import { useTagPickerContextValues } from './useTagPickerContextValues';
+/**
+ * TagPicker component -
+ * A TagPicker is a composite component that allows users to pick tags from a list of options.
+ */ export const TagPicker = /*#__PURE__*/ React.memo((props)=>{
+    const state = useTagPicker_unstable(props);
+    const contextValues = useTagPickerContextValues(state);
+    return renderTagPicker_unstable(state, contextValues);
+});
+TagPicker.displayName = 'TagPicker';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["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"}

package/lib/components/TagPicker/TagPicker.types.js

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["TagPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, EventData, EventHandler } from '@fluentui/react-utilities';\nimport type { ComboboxProps, ComboboxState, ListboxContextValue } from '@fluentui/react-combobox';\nimport type { TagPickerContextValue } from '../../contexts/TagPickerContext';\nimport type { ActiveDescendantContextValue } from '@fluentui/react-aria';\n\nexport type TagPickerSlots = {};\n\nexport type TagPickerSize = 'medium' | 'large' | 'extra-large';\n\n/**\n * Event data for the `onOptionSelect` event.\n *\n * * value - The value of the selected option that triggered the event\n * * selectedOptions - The list of selected options\n */\nexport type TagPickerOnOptionSelectData = {\n  value: string;\n  selectedOptions: string[];\n} & (EventData<'click', React.MouseEvent<HTMLDivElement>> | EventData<'keydown', React.KeyboardEvent<HTMLDivElement>>);\n\nexport type TagPickerOnOpenChangeData = { open: boolean } & (\n  | EventData<'click', React.MouseEvent<HTMLDivElement>>\n  | EventData<'keydown', React.KeyboardEvent<HTMLDivElement>>\n);\n\n/**\n * Picker Props\n */\nexport type TagPickerProps = ComponentProps<TagPickerSlots> &\n  Pick<\n    ComboboxProps,\n    'positioning' | 'disabled' | 'defaultOpen' | 'selectedOptions' | 'defaultSelectedOptions' | 'open'\n  > &\n  Pick<Partial<TagPickerContextValue>, 'size' | 'appearance'> & {\n    onOpenChange?: EventHandler<TagPickerOnOpenChangeData>;\n    onOptionSelect?: EventHandler<TagPickerOnOptionSelectData>;\n\n    /**\n     * Can contain two children including a trigger and a popover\n     */\n    children: [JSX.Element, JSX.Element] | JSX.Element;\n    /**\n     * TagPickers are rendered out of DOM order on `document.body` by default,\n     * use this to render the popover in DOM order\n     *\n     * @default false\n     */\n    inline?: boolean;\n  };\n\n/**\n * State used in rendering Picker\n */\nexport type TagPickerState = ComponentState<TagPickerSlots> &\n  Pick<\n    ComboboxState,\n    | 'open'\n    | 'activeDescendantController'\n    | 'mountNode'\n    | 'onOptionClick'\n    | 'registerOption'\n    | 'selectedOptions'\n    | 'selectOption'\n    | 'value'\n    | 'setValue'\n    | 'setOpen'\n    | 'setHasFocus'\n    | 'appearance'\n    | 'clearSelection'\n    | 'getOptionById'\n    | 'disabled'\n  > &\n  Pick<\n    TagPickerContextValue,\n    'triggerRef' | 'secondaryActionRef' | 'popoverId' | 'popoverRef' | 'targetRef' | 'tagPickerGroupRef' | 'size'\n  > & {\n    trigger: React.ReactNode;\n    popover?: React.ReactNode;\n    inline: boolean;\n  };\n\nexport type TagPickerContextValues = {\n  picker: TagPickerContextValue;\n  activeDescendant: ActiveDescendantContextValue;\n  listbox: ListboxContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAsFE"}

package/lib/components/TagPicker/index.js

@@ -0,0 +1,4 @@
+export * from './TagPicker';
+export * from './TagPicker.types';
+export * from './renderTagPicker';
+export * from './useTagPicker';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './TagPicker';\nexport * from './TagPicker.types';\nexport * from './renderTagPicker';\nexport * from './useTagPicker';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,iBAAiB"}

package/lib/components/TagPicker/renderTagPicker.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ActiveDescendantContextProvider } from '@fluentui/react-aria';
+import { ListboxProvider } from '@fluentui/react-combobox';
+import { Portal } from '@fluentui/react-portal';
+import { TagPickerContextProvider } from '../../contexts/TagPickerContext';
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of Picker
+ */ export const renderTagPicker_unstable = (state, contexts)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ React.createElement(TagPickerContextProvider, {
+        value: contexts.picker
+    }, /*#__PURE__*/ React.createElement(ActiveDescendantContextProvider, {
+        value: contexts.activeDescendant
+    }, /*#__PURE__*/ React.createElement(ListboxProvider, {
+        value: contexts.listbox
+    }, state.trigger, state.inline ? state.popover : /*#__PURE__*/ React.createElement(Portal, {
+        mountNode: state.mountNode
+    }, state.popover))));
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["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 { TagPickerContextProvider } from '../../contexts/TagPickerContext';\nimport { assertSlots } from '@fluentui/react-utilities';\n\n/**\n * Render the final JSX of Picker\n */\nexport const renderTagPicker_unstable = (state: TagPickerState, contexts: TagPickerContextValues) => {\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","TagPickerContextProvider","assertSlots","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,wBAAwB,QAAQ,kCAAkC;AAC3E,SAASC,WAAW,QAAQ,4BAA4B;AAExD;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAAuBC;IAC9DH,YAA4BE;IAC5B,qBACE,oBAACH;QAAyBK,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"}