Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

2727
node_modules/@fluentui/react-combobox/CHANGELOG.md generated vendored Normal file

File diff suppressed because it is too large Load Diff

15
node_modules/@fluentui/react-combobox/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,15 @@
@fluentui/react-combobox
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

3
node_modules/@fluentui/react-combobox/README.md generated vendored Normal file
View File

@@ -0,0 +1,3 @@
# @fluentui/react-combobox
**Combobox component for [Fluent UI React](https://react.fluentui.dev)**

738
node_modules/@fluentui/react-combobox/dist/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,738 @@
import { ActiveDescendantChangeEvent } from '@fluentui/react-aria';
import type { ActiveDescendantContextValue } from '@fluentui/react-aria';
import { ActiveDescendantImperativeRef } from '@fluentui/react-aria';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import { ContextSelector } from '@fluentui/react-context-selector';
import type { DistributiveOmit } from '@fluentui/react-utilities';
import { EventData } from '@fluentui/react-utilities';
import { EventHandler } from '@fluentui/react-utilities';
import type { ExtractSlotProps } from '@fluentui/react-utilities';
import { FC } from 'react';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import { PortalProps } from '@fluentui/react-portal';
import type { PositioningShorthand } from '@fluentui/react-positioning';
import { Provider } from 'react';
import { ProviderProps } from 'react';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import { SlotClassNames } from '@fluentui/react-utilities';
import type { SlotComponentType } from '@fluentui/react-utilities';
declare type ActiveOptionChangeData = EventData<'change', ActiveDescendantChangeEvent> & {
previousOption: OptionValue | null | undefined;
nextOption: OptionValue | null | undefined;
};
/**
* Combobox Props without design-only props.
*/
export declare type BaseComboboxProps = DistributiveOmit<ComboboxProps, 'appearance' | 'size'>;
/**
* State used in rendering Combobox, without design-only state.
*/
export declare type BaseComboboxState = DistributiveOmit<ComboboxState, 'appearance' | 'size'>;
/**
* Combobox component: a selection control that allows users to choose from a set of possible options
*/
export declare const Combobox: ForwardRefComponent<ComboboxProps>;
declare type ComboboxBaseContextValues = {
combobox: ComboboxContextValue;
activeDescendant: ActiveDescendantContextValue;
listbox: ListboxContextValue;
};
/**
* Data for the Combobox onOpenChange event.
*/
declare type ComboboxBaseOpenChangeData = {
open: boolean;
};
/** Possible event types for onOpen */
declare type ComboboxBaseOpenEvents = React_2.MouseEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.FocusEvent<HTMLElement>;
/**
* ComboboxBase Props
* Shared types between Combobox and Dropdown components
*/
export declare type ComboboxBaseProps = SelectionProps & HighlightedOptionProps & Pick<PortalProps, 'mountNode'> & {
/**
* Controls the colors and borders of the combobox trigger.
* @default 'outline'
*/
appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';
/**
* If set, the combobox will show an icon to clear the current value.
*/
clearable?: boolean;
/**
* The default open state when open is uncontrolled
*/
defaultOpen?: boolean;
/**
* The default value displayed in the trigger input or button when the combobox's value is uncontrolled
*/
defaultValue?: string;
/**
* Disable auto-focusing on the first item when mounting.
*
* @default false
*/
disableAutoFocus?: boolean;
/**
* Render the combobox's popup inline in the DOM.
* This has accessibility benefits, particularly for touch screen readers.
*/
inlinePopup?: boolean;
/**
* Callback when the open/closed state of the dropdown changes
*/
onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;
/**
* Sets the open/closed state of the dropdown.
* Use together with onOpenChange to fully control the dropdown's visibility
*/
open?: boolean;
/**
* If set, the placeholder will show when no value is selected
*/
placeholder?: string;
/**
* Configure the positioning of the combobox dropdown.
* Please refer to the [positioning documentation](https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--default#anchor-to-target)
* for more details.
*
* @defaultvalue below
*/
positioning?: PositioningShorthand;
/**
* Controls the size of the combobox faceplate
* @default 'medium'
*/
size?: 'small' | 'medium' | 'large';
/**
* The value displayed by the Combobox.
* Use this with `onOptionSelect` to directly control the displayed value string
*/
value?: string;
};
/**
* State used in rendering Combobox
*/
export declare type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'>> & Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> & OptionCollectionState & SelectionState & {
/**
* @deprecated - no longer used internally
*/
activeOption?: OptionValue;
/**
* @deprecated - no longer used internally and handled automatically be activedescendant utilities
* @see ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE for writing styles involving focusVisible
*/
focusVisible: boolean;
/**
* @deprecated - no longer used internally
* Whether the next blur event should be ignored, and the combobox/dropdown will not close.
*/
ignoreNextBlur: React_2.MutableRefObject<boolean | null>;
/**
* @deprecated - no longer used internally
*/
setActiveOption: React_2.Dispatch<React_2.SetStateAction<OptionValue | undefined>>;
/**
* @deprecated - no longer used internally and handled automatically be activedescendant utilities
* @see useSetKeyboardNavigation for imperatively setting focus visible state
*/
setFocusVisible(focusVisible: boolean): void;
/**
* whether the combobox/dropdown currently has focus
*/
hasFocus: boolean;
setHasFocus(hasFocus: boolean): void;
setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;
setValue(newValue: string | undefined): void;
onOptionClick: (e: React_2.MouseEvent<HTMLElement>) => void;
disabled: boolean;
freeform: boolean;
onActiveDescendantChange: (event: ActiveDescendantChangeEvent) => void;
};
export declare const comboboxClassNames: SlotClassNames<ComboboxSlots>;
/**
* Context shared with Combobox, Listbox, & Options
*/
export declare type ComboboxContextValue = Pick<ComboboxState, 'activeOption' | 'appearance' | 'focusVisible' | 'open' | 'registerOption' | 'setActiveOption' | 'setOpen' | 'size'> & {
/**
* @deprecated - no longer used
*/
selectedOptions: ComboboxState['selectedOptions'];
/**
* @deprecated - no longer used
*/
selectOption: ComboboxState['selectOption'];
};
export declare type ComboboxContextValues = ComboboxBaseContextValues;
export declare type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;
export declare type ComboboxOpenEvents = ComboboxBaseOpenEvents;
/**
* Combobox Props
*/
export declare type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> & ComboboxBaseProps & {
freeform?: boolean;
/**
* The primary slot, `<input>`, does not support children so we need to explicitly include it here.
*/
children?: React_2.ReactNode;
};
/**
* @deprecated - render ListboxProvider instead
* @see ListboxProvider
* @see useListboxContext_unstable
*/
export declare const ComboboxProvider: Provider<ComboboxContextValue> & FC<ProviderProps<ComboboxContextValue>>;
export declare type ComboboxSlots = {
/** The root combobox slot */
root: NonNullable<Slot<'div'>>;
/** The dropdown arrow icon */
expandIcon?: Slot<'span'>;
/** The dropdown clear icon */
clearIcon?: Slot<'span'>;
/** The primary slot, an input with role="combobox" */
input: NonNullable<Slot<'input'>>;
/** The dropdown listbox slot */
listbox?: Slot<typeof Listbox>;
};
/**
* State used in rendering Combobox
*/
export declare type ComboboxState = ComponentState<ComboboxSlots> & ComboboxBaseState & {
showClearIcon?: boolean;
activeDescendantController: ActiveDescendantImperativeRef;
};
/**
* Dropdown component: a selection control that allows users to choose from a set of possible options
*/
export declare const Dropdown: ForwardRefComponent<DropdownProps>;
/**
* Dropdown Props without design-only props.
*/
export declare type DropdownBaseHookProps = DistributiveOmit<DropdownProps, 'appearance' | 'size'>;
/**
* State used in rendering Dropdown, without design-only state.
*/
export declare type DropdownBaseHookState = DistributiveOmit<DropdownState, 'appearance' | 'size'>;
export declare const dropdownClassNames: SlotClassNames<DropdownSlots>;
export declare type DropdownContextValues = ComboboxBaseContextValues;
export declare type DropdownOpenChangeData = ComboboxBaseOpenChangeData;
export declare type DropdownOpenEvents = ComboboxBaseOpenEvents;
/**
* Dropdown Props
*/
export declare type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;
export declare type DropdownSlots = {
/** The root dropdown slot */
root: NonNullable<Slot<'div'>>;
/** The dropdown arrow icon */
expandIcon?: Slot<'span'>;
/** The dropdown clear icon */
clearButton?: Slot<'button'>;
/** The primary slot, the element with role="combobox" */
button: NonNullable<Slot<'button'>>;
/** The dropdown listbox slot */
listbox?: Slot<typeof Listbox>;
};
/**
* State used in rendering Dropdown
*/
export declare type DropdownState = ComponentState<DropdownSlots> & Omit<ComboboxBaseState, 'freeform'> & {
/** Whether the placeholder is currently displayed */
placeholderVisible: boolean;
showClearButton?: boolean;
activeDescendantController: ActiveDescendantImperativeRef;
};
declare type HighlightedOptionProps = {
onActiveOptionChange?: EventHandler<ActiveOptionChangeData>;
};
/**
* Listbox component: a standalone selection control, or the popup in a Combobox
*/
export declare const Listbox: ForwardRefComponent<ListboxProps>;
export declare const listboxClassNames: SlotClassNames<ListboxSlots>;
/**
* Context shared with all Listbox Options
*/
export declare type ListboxContextValue = Pick<ListboxState, 'activeOption' | 'focusVisible' | 'getOptionById' | 'getOptionsMatchingValue' | 'multiselect' | 'registerOption' | 'selectedOptions' | 'selectOption' | 'setActiveOption'> & {
onOptionClick: (e: React_2.MouseEvent<HTMLElement>) => void;
onActiveDescendantChange?: (e: ActiveDescendantChangeEvent) => void;
};
export declare type ListboxContextValues = {
listbox: ListboxContextValue;
activeDescendant: ActiveDescendantContextValue;
};
/**
* Listbox Props
*/
export declare type ListboxProps = ComponentProps<ListboxSlots> & SelectionProps & {
/**
* Disable auto-focusing on the first item when mounting.
*
* @default false
*/
disableAutoFocus?: boolean;
};
export declare const ListboxProvider: React_2.Provider<ListboxContextValue | undefined> & React_2.FC<React_2.ProviderProps<ListboxContextValue | undefined>>;
export declare type ListboxSlots = {
/** The root slot, a `<div>` with `role="listbox"` */
root: Slot<'div'>;
};
/**
* State used in rendering Listbox
*/
export declare type ListboxState = ComponentState<ListboxSlots> & OptionCollectionState & Pick<SelectionProps, 'multiselect'> & SelectionState & {
/**
* @deprecated - no longer used internally
* @see activeDescendantController.active()
*/
activeOption?: OptionValue;
/**
* @deprecated - no longer used internally
*/
focusVisible: boolean;
/**
* @deprecated - no longer used internally
* @see activeDescendantController.focus(id)
*/
setActiveOption(option?: OptionValue): void;
standalone: boolean;
selectOption(event: SelectionEvents, option: OptionValue): void;
activeDescendantController: ActiveDescendantImperativeRef;
onActiveDescendantChange?: (event: ActiveDescendantChangeEvent) => void;
};
/**
* Option component: a styled child option of a Combobox
*/
declare const Option_2: ForwardRefComponent<OptionProps>;
export { Option_2 as Option }
export declare const optionClassNames: SlotClassNames<OptionSlots>;
declare type OptionCollectionState = {
/**
* @deprecated - no longer used internally
*/
getIndexOfId(id: string): number;
/**
* @deprecated - no longer used internally
*/
getOptionAtIndex(index: number): OptionValue | undefined;
/**
* @deprecated - no longer used internally
*/
getOptionsMatchingText(matcher: (text: string) => boolean): OptionValue[];
/** The total number of options in the collection. */
getCount: () => number;
/** Returns the option data by key. */
getOptionById(id: string): OptionValue | undefined;
/** Returns an array of options filtered by a value matching function against the option's value string. */
getOptionsMatchingValue(matcher: (value: string) => boolean): OptionValue[];
/** The unordered option data. */
options: OptionValue[];
/** A function that child options call to register their values. Returns a function to unregister the option. */
registerOption: (option: OptionValue, element: HTMLElement) => () => void;
};
/**
* OptionGroup component: allows grouping of Option components within a Combobox
*/
export declare const OptionGroup: ForwardRefComponent<OptionGroupProps>;
export declare const optionGroupClassNames: SlotClassNames<OptionGroupSlots>;
/**
* OptionGroup Props
*/
export declare type OptionGroupProps = ComponentProps<Partial<OptionGroupSlots>>;
export declare type OptionGroupSlots = {
/** The root group wrapper */
root: NonNullable<Slot<'div'>>;
/**
* The option group label, displayed as static text before the child options.
* If not using label, it's recommended to set `aria-label` directly on the OptionGroup instead.
*/
label?: Slot<'span'>;
};
/**
* State used in rendering OptionGroup
*/
export declare type OptionGroupState = ComponentState<OptionGroupSlots>;
/**
* Data for the onOptionSelect callback.
* `optionValue` and `optionText` will be undefined if multiple options are modified at once.
*/
export declare type OptionOnSelectData = {
optionValue: string | undefined;
optionText: string | undefined;
selectedOptions: string[];
};
/**
* Option Props
*/
export declare type OptionProps = ComponentProps<Partial<OptionSlots>> & {
/**
* Sets an option to the `disabled` state.
* Disabled options cannot be selected, but are still keyboard navigable
*/
disabled?: boolean;
/**
* Defines a unique identifier for the option.
* Use this to control selectedOptions, or to get the option value in the onOptionSelect callback.
* Defaults to `text` if not provided.
*/
value?: string;
} & ({
/**
* An optional override the string value of the Option's display text,
* defaulting to the Option's child content.
* This is used as the Dropdown button's or Combobox input's value when the option is selected,
* and as the comparison for type-to-find keyboard functionality.
*/
text?: string;
children: string;
} | {
/**
* The string value of the Option's display text when the Option's children are not a string.
* This is used as the Dropdown button's or Combobox input's value when the option is selected,
* and as the comparison for type-to-find keyboard functionality.
*/
text: string;
children?: React_2.ReactNode;
});
export declare type OptionSlots = {
/** The root option slot, with role="option" */
root: NonNullable<Slot<'div'>>;
/** The check icon that is visible for selected options */
checkIcon: Slot<'span'>;
};
/**
* State used in rendering Option
*/
export declare type OptionState = ComponentState<OptionSlots> & Pick<OptionProps, 'disabled'> & {
/**
* @deprecated - no longer used internally
*/
active: boolean;
/**
* @deprecated - no longer used internally
*/
focusVisible: boolean;
/** If true, the option is part of a multiselect combobox or listbox */
multiselect?: boolean;
/** If true, the option is selected */
selected: boolean;
};
declare type OptionValue = {
/** The disabled state of the option. */
disabled?: boolean;
/** The `id` attribute of the option. */
id: string;
/** The `text` string for the option. */
text: string;
/** The value string of the option. */
value: string;
};
/**
* Render the final JSX of Combobox
*/
export declare const renderCombobox_unstable: (state: BaseComboboxState, contextValues: ComboboxContextValues) => JSXElement;
/**
* Render the final JSX of Dropdown
*/
export declare const renderDropdown_unstable: (state: DropdownState, contextValues: DropdownContextValues) => JSXElement;
/**
* Render the final JSX of Listbox
*/
export declare const renderListbox_unstable: (state: ListboxState, contextValues: ListboxContextValues) => JSXElement;
/**
* Render the final JSX of Option
*/
export declare const renderOption_unstable: (state: OptionState) => JSXElement;
/**
* Render the final JSX of OptionGroup
*/
export declare const renderOptionGroup_unstable: (state: OptionGroupState) => JSXElement;
/** Possible event types for onOptionSelect */
export declare type SelectionEvents = React_2.ChangeEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.MouseEvent<HTMLElement>;
declare type SelectionProps = {
/**
* For an uncontrolled component, sets the initial selection.
* If this is set, the `defaultValue` prop MUST also be set.
*/
defaultSelectedOptions?: string[];
/**
* Sets the selection type to multiselect.
* Set this to true for multiselect, even if fully controlling selection state.
* This enables styles and accessibility properties to be set.
* @default false
*/
multiselect?: boolean;
/** Callback when an option is selected */
onOptionSelect?: (event: SelectionEvents, data: OptionOnSelectData) => void;
/**
* An array of selected option keys.
* Use this with `onOptionSelect` to directly control the selected option(s)
* If this is set, the `value` prop MUST also be controlled.
*/
selectedOptions?: string[];
};
/** Values returned by the useSelection hook */
declare type SelectionState = {
clearSelection: (event: SelectionEvents) => void;
selectedOptions: string[];
selectOption: (event: SelectionEvents, option: OptionValue) => void;
};
/**
* useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,
* with the semantics and event handlers needed for the Combobox and Dropdown components.
* The element type of the ref should always match the element type used in the trigger shorthand.
*
* @internal
*/
export declare function useButtonTriggerSlot(triggerFromProps: NonNullable<Slot<'button'>>, ref: React_2.Ref<HTMLButtonElement>, options: UseButtonTriggerSlotOptions): SlotComponentType<ExtractSlotProps<Slot<'button'>>>;
declare type UseButtonTriggerSlotOptions = {
state: UseTriggerSlotState;
defaultProps: unknown;
activeDescendantController: ActiveDescendantImperativeRef;
};
/**
* Create the state required to render Combobox.
*
* The returned state can be modified with hooks such as useComboboxStyles_unstable,
* before being passed to renderCombobox_unstable.
*
* @param props - props from this instance of Combobox
* @param ref - reference to root HTMLElement of Combobox
*/
export declare const useCombobox_unstable: (props: ComboboxProps, ref: React_2.Ref<HTMLInputElement>) => ComboboxState;
/**
* Create the base state required to render Combobox, without design-only props.
*
* @param props - props from this instance of Combobox (without appearance and size)
* @param ref - reference to root HTMLInputElement of Combobox
*/
export declare const useComboboxBase_unstable: (props: BaseComboboxProps, ref: React_2.Ref<HTMLInputElement>) => BaseComboboxState;
/**
* State shared between Combobox and Dropdown components
*
* @internal
*/
export declare const useComboboxBaseState: (props: ComboboxBaseProps & {
children?: React_2.ReactNode;
editable?: boolean;
disabled?: boolean;
freeform?: boolean;
activeDescendantController: ActiveDescendantImperativeRef;
}) => ComboboxBaseState;
export declare function useComboboxContextValues(state: Omit<ComboboxBaseState, 'freeform'> & Pick<ComboboxState, 'activeDescendantController'>): ComboboxBaseContextValues;
/**
* @internal
*/
export declare function useComboboxFilter<T extends {
children: React_2.ReactNode;
value: string;
} | string>(query: string, options: T[], config: UseComboboxFilterConfig<T>): JSXElement[];
declare type UseComboboxFilterConfig<T extends {
children: React_2.ReactNode;
value: string;
} | string> = {
/** Provides a custom filter for the option. */
filter?: (optionText: string, query: string) => boolean;
/** Provides a custom message to display when there are no options. */
noOptionsMessage?: React_2.ReactNode;
/** Provides a way to map an option object to a React key. By default, "value" is used. */
optionToReactKey?: (option: T) => string;
/** Provides a way to map an option object to a text used for search. By default, "value" is used. */
optionToText?: (option: T) => string;
/** Provides a custom render for the option. */
renderOption?: (option: T) => JSXElement;
};
/**
* Apply styling to the Combobox slots based on the state
*/
export declare const useComboboxStyles_unstable: (state: ComboboxState) => ComboboxState;
declare type UsedComboboxState = UseTriggerSlotState & Pick<ComboboxBaseState, 'value' | 'setValue' | 'selectedOptions' | 'clearSelection' | 'getOptionById'>;
/**
* Create the state required to render Dropdown.
*
* The returned state can be modified with hooks such as useDropdownStyles_unstable,
* before being passed to renderDropdown_unstable.
*
* @param props - props from this instance of Dropdown
* @param ref - reference to root HTMLElement of Dropdown
*/
export declare const useDropdown_unstable: (props: DropdownProps, ref: React_2.Ref<HTMLButtonElement>) => DropdownState;
/**
* Create the base state required to render Dropdown, without design-only props.
*
* @param props - props from this instance of Dropdown (without appearance and size)
* @param ref - reference to root HTMLButtonElement of Dropdown
*/
export declare const useDropdownBase_unstable: (props: DropdownBaseHookProps, ref: React_2.Ref<HTMLButtonElement>) => DropdownBaseHookState;
/**
* Apply styling to the Dropdown slots based on the state
*/
export declare const useDropdownStyles_unstable: (state: DropdownState) => DropdownState;
/**
* useInputTriggerSlot returns a tuple of trigger/listbox shorthand,
* with the semantics and event handlers needed for the Combobox and Dropdown components.
* The element type of the ref should always match the element type used in the trigger shorthand.
*
* @internal
*/
export declare function useInputTriggerSlot(triggerFromProps: NonNullable<Slot<'input'>>, ref: React_2.Ref<HTMLInputElement>, options: UseInputTriggerSlotOptions): SlotComponentType<ExtractSlotProps<Slot<'input'>>>;
declare type UseInputTriggerSlotOptions = {
state: UsedComboboxState;
freeform: boolean | undefined;
defaultProps?: Partial<ComboboxProps>;
activeDescendantController: ActiveDescendantImperativeRef;
};
/**
* Create the state required to render Listbox.
*
* The returned state can be modified with hooks such as useListboxStyles_unstable,
* before being passed to renderListbox_unstable.
*
* @param props - props from this instance of Listbox
* @param ref - reference to root HTMLElement of Listbox
*/
export declare const useListbox_unstable: (props: ListboxProps, ref: React_2.Ref<HTMLElement>) => ListboxState;
export declare const useListboxContext_unstable: <T>(selector: ContextSelector<ListboxContextValue, T>) => T;
export declare function useListboxContextValues(state: ListboxState): ListboxContextValues;
/**
* @internal
* @returns listbox slot with desired behaviour and props
*/
export declare function useListboxSlot(listboxSlotFromProp: Slot<typeof Listbox> | undefined, ref: React_2.Ref<HTMLDivElement>, options: UseListboxSlotOptions): SlotComponentType<ExtractSlotProps<Slot<typeof Listbox>>> | undefined;
declare type UseListboxSlotOptions = {
state: UseListboxSlotState;
triggerRef: React_2.RefObject<HTMLInputElement | null> | React_2.RefObject<HTMLButtonElement | null> | React_2.RefObject<HTMLButtonElement | HTMLInputElement | null>;
defaultProps?: Partial<ListboxProps>;
};
declare type UseListboxSlotState = Pick<ComboboxBaseState, 'multiselect'>;
/**
* Apply styling to the Listbox slots based on the state
*/
export declare const useListboxStyles_unstable: (state: ListboxState) => ListboxState;
/**
* Create the state required to render Option.
*
* The returned state can be modified with hooks such as useOptionStyles_unstable,
* before being passed to renderOption_unstable.
*
* @param props - props from this instance of Option
* @param ref - reference to root HTMLElement of Option
*/
export declare const useOption_unstable: (props: OptionProps, ref: React_2.Ref<HTMLElement>) => OptionState;
/**
* Create the base state required to render Option.
*
* @param props - props from this instance of Option
* @param ref - reference to root HTMLElement of Option
*/
export declare const useOptionBase_unstable: (props: OptionProps, ref: React_2.Ref<HTMLElement>) => OptionState;
/**
* Create the state required to render OptionGroup.
*
* The returned state can be modified with hooks such as useOptionGroupStyles_unstable,
* before being passed to renderOptionGroup_unstable.
*
* @param props - props from this instance of OptionGroup
* @param ref - reference to root HTMLElement of OptionGroup
*/
export declare const useOptionGroup_unstable: (props: OptionGroupProps, ref: React_2.Ref<HTMLElement>) => OptionGroupState;
/**
* Apply styling to the OptionGroup slots based on the state
*/
export declare const useOptionGroupStyles_unstable: (state: OptionGroupState) => OptionGroupState;
/**
* Apply styling to the Option slots based on the state
*/
export declare const useOptionStyles_unstable: (state: OptionState) => OptionState;
declare type UseTriggerSlotState = Pick<ComboboxBaseState, 'open' | 'getOptionById' | 'selectOption' | 'setOpen' | 'multiselect' | 'setHasFocus'>;
export { }

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Combobox: function() {
return _index.Combobox;
},
comboboxClassNames: function() {
return _index.comboboxClassNames;
},
renderCombobox_unstable: function() {
return _index.renderCombobox_unstable;
},
useComboboxBase_unstable: function() {
return _index.useComboboxBase_unstable;
},
useComboboxStyles_unstable: function() {
return _index.useComboboxStyles_unstable;
},
useCombobox_unstable: function() {
return _index.useCombobox_unstable;
}
});
const _index = require("./components/Combobox/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Combobox.ts"],"sourcesContent":["export type {\n ActiveOptionChangeData,\n BaseComboboxProps,\n BaseComboboxState,\n ComboboxContextValues,\n ComboboxOpenChangeData,\n ComboboxOpenEvents,\n ComboboxProps,\n ComboboxSlots,\n ComboboxState,\n} from './components/Combobox/index';\nexport {\n Combobox,\n comboboxClassNames,\n renderCombobox_unstable,\n useComboboxStyles_unstable,\n useComboboxBase_unstable,\n useCombobox_unstable,\n} from './components/Combobox/index';\n"],"names":["Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxBase_unstable","useCombobox_unstable"],"mappings":";;;;;;;;;;;;eAYEA,eAAQ;;;eACRC,yBAAkB;;;eAClBC,8BAAuB;;;eAEvBE,+BAAwB;;;eADxBD,iCAA0B;;;eAE1BE,2BAAoB;;;uBACf,8BAA8B"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Dropdown: function() {
return _index.Dropdown;
},
dropdownClassNames: function() {
return _index.dropdownClassNames;
},
renderDropdown_unstable: function() {
return _index.renderDropdown_unstable;
},
useDropdownBase_unstable: function() {
return _index.useDropdownBase_unstable;
},
useDropdownStyles_unstable: function() {
return _index.useDropdownStyles_unstable;
},
useDropdown_unstable: function() {
return _index.useDropdown_unstable;
}
});
const _index = require("./components/Dropdown/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Dropdown.ts"],"sourcesContent":["export type {\n ActiveOptionChangeData,\n DropdownBaseHookProps,\n DropdownBaseHookState,\n DropdownContextValues,\n DropdownOpenChangeData,\n DropdownOpenEvents,\n DropdownProps,\n DropdownSlots,\n DropdownState,\n} from './components/Dropdown/index';\nexport {\n Dropdown,\n dropdownClassNames,\n renderDropdown_unstable,\n useDropdownStyles_unstable,\n useDropdownBase_unstable,\n useDropdown_unstable,\n} from './components/Dropdown/index';\n"],"names":["Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdownBase_unstable","useDropdown_unstable"],"mappings":";;;;;;;;;;;;eAYEA,eAAQ;;;eACRC,yBAAkB;;;eAClBC,8BAAuB;;;eAEvBE,+BAAwB;;;eADxBD,iCAA0B;;;eAE1BE,2BAAoB;;;uBACf,8BAA8B"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Listbox: function() {
return _index.Listbox;
},
listboxClassNames: function() {
return _index.listboxClassNames;
},
renderListbox_unstable: function() {
return _index.renderListbox_unstable;
},
useListboxStyles_unstable: function() {
return _index.useListboxStyles_unstable;
},
useListbox_unstable: function() {
return _index.useListbox_unstable;
}
});
const _index = require("./components/Listbox/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Listbox.ts"],"sourcesContent":["export type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './components/Listbox/index';\nexport {\n Listbox,\n listboxClassNames,\n renderListbox_unstable,\n useListboxStyles_unstable,\n useListbox_unstable,\n} from './components/Listbox/index';\n"],"names":["Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable"],"mappings":";;;;;;;;;;;;eAEEA,cAAO;;;eACPC,wBAAiB;;;eACjBC,6BAAsB;;;eACtBC,gCAAyB;;;eACzBC,0BAAmB;;;uBACd,6BAA6B"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Option: function() {
return _index.Option;
},
optionClassNames: function() {
return _index.optionClassNames;
},
renderOption_unstable: function() {
return _index.renderOption_unstable;
},
useOptionBase_unstable: function() {
return _index.useOptionBase_unstable;
},
useOptionStyles_unstable: function() {
return _index.useOptionStyles_unstable;
},
useOption_unstable: function() {
return _index.useOption_unstable;
}
});
const _index = require("./components/Option/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Option.ts"],"sourcesContent":["export type { OptionProps, OptionSlots, OptionState } from './components/Option/index';\nexport {\n Option,\n optionClassNames,\n renderOption_unstable,\n useOptionStyles_unstable,\n useOption_unstable,\n useOptionBase_unstable,\n} from './components/Option/index';\n"],"names":["Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","useOptionBase_unstable"],"mappings":";;;;;;;;;;;;eAEEA,aAAM;;;eACNC,uBAAgB;;;eAChBC,4BAAqB;;;eAGrBG,6BAAsB;;;eAFtBF,+BAAwB;;;eACxBC,yBAAkB;;;uBAEb,4BAA4B"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
OptionGroup: function() {
return _index.OptionGroup;
},
optionGroupClassNames: function() {
return _index.optionGroupClassNames;
},
renderOptionGroup_unstable: function() {
return _index.renderOptionGroup_unstable;
},
useOptionGroupStyles_unstable: function() {
return _index.useOptionGroupStyles_unstable;
},
useOptionGroup_unstable: function() {
return _index.useOptionGroup_unstable;
}
});
const _index = require("./components/OptionGroup/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/OptionGroup.ts"],"sourcesContent":["export type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './components/OptionGroup/index';\nexport {\n OptionGroup,\n optionGroupClassNames,\n renderOptionGroup_unstable,\n useOptionGroupStyles_unstable,\n useOptionGroup_unstable,\n} from './components/OptionGroup/index';\n"],"names":["OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable"],"mappings":";;;;;;;;;;;;eAEEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,iCAAiC"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Selection.ts"],"sourcesContent":["export type { OptionOnSelectData, SelectionEvents, SelectionProps, SelectionState } from './utils/Selection.types';\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Combobox", {
enumerable: true,
get: function() {
return Combobox;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useCombobox = require("./useCombobox");
const _renderCombobox = require("./renderCombobox");
const _useComboboxStylesstyles = require("./useComboboxStyles.styles");
const _useComboboxContextValues = require("../../contexts/useComboboxContextValues");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Combobox = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCombobox.useCombobox_unstable)(props, ref);
const contextValues = (0, _useComboboxContextValues.useComboboxContextValues)(state);
(0, _useComboboxStylesstyles.useComboboxStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useComboboxStyles_unstable')(state);
return (0, _renderCombobox.renderCombobox_unstable)(state, contextValues);
});
Combobox.displayName = 'Combobox';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Combobox/Combobox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles.styles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n const state = useCombobox_unstable(props, ref);\n const contextValues = useComboboxContextValues(state);\n\n useComboboxStyles_unstable(state);\n\n useCustomStyleHook_unstable('useComboboxStyles_unstable')(state);\n\n return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"names":["React","useCombobox_unstable","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Combobox","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACM,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;0CAE/B,0CAA0C;qCAEvC,kCAAkC;AAKvE,MAAMM,WAAAA,WAAAA,GAA+CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,YAAQT,iCAAAA,EAAqBO,OAAOC;IAC1C,MAAME,oBAAgBP,kDAAAA,EAAyBM;QAE/CP,mDAAAA,EAA2BO;QAE3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,WAAOR,uCAAAA,EAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Combobox/Combobox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\n ComboboxBaseContextValues,\n ComboboxBaseOpenChangeData,\n ComboboxBaseOpenEvents,\n ComboboxBaseProps,\n ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type ComboboxSlots = {\n /** The root combobox slot */\n root: NonNullable<Slot<'div'>>;\n\n /** The dropdown arrow icon */\n expandIcon?: Slot<'span'>;\n\n /** The dropdown clear icon */\n clearIcon?: Slot<'span'>;\n\n /** The primary slot, an input with role=\"combobox\" */\n input: NonNullable<Slot<'input'>>;\n\n /** The dropdown listbox slot */\n listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Combobox Props\n */\nexport type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n ComboboxBaseProps & {\n freeform?: boolean;\n /**\n * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n */\n children?: React.ReactNode;\n };\n\n/**\n * Combobox Props without design-only props.\n */\nexport type BaseComboboxProps = DistributiveOmit<ComboboxProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxState = ComponentState<ComboboxSlots> &\n ComboboxBaseState & {\n showClearIcon?: boolean;\n activeDescendantController: ActiveDescendantImperativeRef;\n };\n\n/**\n * State used in rendering Combobox, without design-only state.\n */\nexport type BaseComboboxState = DistributiveOmit<ComboboxState, 'appearance' | 'size'>;\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Combobox: function() {
return _Combobox.Combobox;
},
comboboxClassNames: function() {
return _useComboboxStylesstyles.comboboxClassNames;
},
renderCombobox_unstable: function() {
return _renderCombobox.renderCombobox_unstable;
},
useComboboxBase_unstable: function() {
return _useCombobox.useComboboxBase_unstable;
},
useComboboxStyles_unstable: function() {
return _useComboboxStylesstyles.useComboboxStyles_unstable;
},
useCombobox_unstable: function() {
return _useCombobox.useCombobox_unstable;
}
});
const _Combobox = require("./Combobox");
const _renderCombobox = require("./renderCombobox");
const _useCombobox = require("./useCombobox");
const _useComboboxStylesstyles = require("./useComboboxStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Combobox/index.ts"],"sourcesContent":["export { Combobox } from './Combobox';\nexport type {\n ActiveOptionChangeData,\n BaseComboboxProps,\n BaseComboboxState,\n ComboboxContextValues,\n ComboboxOpenChangeData,\n ComboboxOpenEvents,\n ComboboxProps,\n ComboboxSlots,\n ComboboxState,\n} from './Combobox.types';\nexport { renderCombobox_unstable } from './renderCombobox';\nexport { useComboboxBase_unstable, useCombobox_unstable } from './useCombobox';\nexport { comboboxClassNames, useComboboxStyles_unstable } from './useComboboxStyles.styles';\n"],"names":["Combobox","renderCombobox_unstable","useComboboxBase_unstable","useCombobox_unstable","comboboxClassNames","useComboboxStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAcRI,2CAAkB;;;eAFlBH,uCAAuB;;;eACvBC,qCAAwB;;;eACJG,mDAA0B;;;eADpBF,iCAAoB;;;0BAb9B,aAAa;gCAYE,mBAAmB;6BACI,gBAAgB;yCAChB,6BAA6B"}

View File

@@ -0,0 +1,39 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderCombobox_unstable", {
enumerable: true,
get: function() {
return renderCombobox_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactportal = require("@fluentui/react-portal");
const _reactaria = require("@fluentui/react-aria");
const _reactutilities = require("@fluentui/react-utilities");
const _ComboboxContext = require("../../contexts/ComboboxContext");
const _ListboxContext = require("../../contexts/ListboxContext");
const renderCombobox_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactaria.ActiveDescendantContextProvider, {
value: contextValues.activeDescendant,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ListboxContext.ListboxProvider, {
value: contextValues.listbox,
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_ComboboxContext.ComboboxContext.Provider, {
value: contextValues.combobox,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.input, {}),
state.clearIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.clearIcon, {}),
state.expandIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {}),
state.listbox && (state.inlinePopup ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactportal.Portal, {
mountNode: state.mountNode,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {})
}))
]
})
})
})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Combobox/renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, BaseComboboxState, ComboboxSlots } from './Combobox.types';\nimport { ListboxProvider } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: BaseComboboxState, contextValues: ComboboxContextValues): JSXElement => {\n assertSlots<ComboboxSlots>(state);\n\n return (\n <state.root>\n <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n <ListboxProvider value={contextValues.listbox}>\n {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n <ComboboxContext.Provider value={contextValues.combobox}>\n <state.input />\n {state.clearIcon && <state.clearIcon />}\n {state.expandIcon && <state.expandIcon />}\n {state.listbox &&\n (state.inlinePopup ? (\n <state.listbox />\n ) : (\n <Portal mountNode={state.mountNode}>\n <state.listbox />\n </Portal>\n ))}\n {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n </ComboboxContext.Provider>\n </ListboxProvider>\n </ActiveDescendantContextProvider>\n </state.root>\n );\n};\n"],"names":["Portal","ActiveDescendantContextProvider","assertSlots","ComboboxContext","ListboxProvider","renderCombobox_unstable","state","contextValues","root","value","activeDescendant","listbox","Provider","combobox","input","clearIcon","expandIcon","inlinePopup","mountNode"],"mappings":";;;;+BAcaK;;;;;;4BAbb,iCAAiD;6BAC1B,yBAAyB;2BACA,uBAAuB;gCAE3C,4BAA4B;iCAExB,iCAAiC;gCAEjC,gCAAgC;AAKzD,gCAAgC,CAACC,OAA0BC;QAChEL,2BAAAA,EAA2BI;IAE3B,OAAA,WAAA,OACE,eAAA,EAACA,MAAME,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACP,0CAAAA,EAAAA;YAAgCQ,OAAOF,cAAcG,gBAAgB;sBACpE,WAAA,OAAA,eAAA,EAACN,+BAAAA,EAAAA;gBAAgBK,OAAOF,cAAcI,OAAO;0BAE3C,WAAA,OAAA,gBAAA,EAACR,gCAAAA,CAAgBS,QAAQ,EAAA;oBAACH,OAAOF,cAAcM,QAAQ;;0CACrD,eAAA,EAACP,MAAMQ,KAAK,EAAA,CAAA;wBACXR,MAAMS,SAAS,IAAA,WAAA,GAAI,mBAAA,EAACT,MAAMS,SAAS,EAAA,CAAA;wBACnCT,MAAMU,UAAU,IAAA,WAAA,OAAI,eAAA,EAACV,MAAMU,UAAU,EAAA,CAAA;wBACrCV,MAAMK,OAAO,IACXL,CAAAA,MAAMW,WAAW,GAAA,WAAA,OAChB,eAAA,EAACX,MAAMK,OAAO,EAAA,CAAA,KAAA,WAAA,OAEd,eAAA,EAACX,mBAAAA,EAAAA;4BAAOkB,WAAWZ,MAAMY,SAAS;sCAChC,WAAA,OAAA,eAAA,EAACZ,MAAMK,OAAO,EAAA,CAAA;2BAElB;;;;;;AAOd,EAAE"}

View File

@@ -0,0 +1,212 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useComboboxBase_unstable: function() {
return useComboboxBase_unstable;
},
useCombobox_unstable: function() {
return useCombobox_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactaria = require("@fluentui/react-aria");
const _reactfield = require("@fluentui/react-field");
const _reacticons = require("@fluentui/react-icons");
const _reactutilities = require("@fluentui/react-utilities");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useComboboxBaseState = require("../../utils/useComboboxBaseState");
const _useComboboxPositioning = require("../../utils/useComboboxPositioning");
const _Listbox = require("../Listbox/Listbox");
const _useListboxSlot = require("../../utils/useListboxSlot");
const _useInputTriggerSlot = require("./useInputTriggerSlot");
const _useOptionStylesstyles = require("../Option/useOptionStyles.styles");
const useComboboxBase_unstable = (props, ref)=>{
'use no memo';
var _state_clearIcon, _state_clearIcon1;
// Merge props from surrounding <Field>, if any
props = (0, _reactfield.useFieldControlProps_unstable)(props, {
supportsLabelFor: true,
supportsRequired: true
});
const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = (0, _reactaria.useActiveDescendant)({
matchOption: (el)=>el.classList.contains(_useOptionStylesstyles.optionClassNames.root)
});
const comboboxInternalState = (0, _useComboboxBaseState.useComboboxBaseState)({
...props,
editable: true,
activeDescendantController
});
const { appearance: _appearance, size: _size, ...baseState } = comboboxInternalState;
const { clearable, clearSelection, disabled, multiselect, open, selectedOptions, setOpen, value, hasFocus } = baseState;
const [comboboxPopupRef, comboboxTargetRef] = (0, _useComboboxPositioning.useComboboxPositioning)(props);
const { disableAutoFocus = false, freeform, inlinePopup } = props;
const comboId = (0, _reactutilities.useId)('combobox-');
const { primary: triggerNativeProps, root: rootNativeProps } = (0, _reactutilities.getPartitionedNativeProps)({
props,
primarySlotTagName: 'input',
excludedPropNames: [
'children'
]
});
const triggerRef = _react.useRef(null);
const listbox = (0, _useListboxSlot.useListboxSlot)(props.listbox, (0, _reactutilities.useMergedRefs)(comboboxPopupRef, activeDescendantListboxRef), {
state: comboboxInternalState,
triggerRef,
defaultProps: {
children: props.children,
disableAutoFocus
}
});
var _props_input;
const triggerSlot = (0, _useInputTriggerSlot.useInputTriggerSlot)((_props_input = props.input) !== null && _props_input !== void 0 ? _props_input : {}, (0, _reactutilities.useMergedRefs)(triggerRef, activeParentRef, ref), {
state: comboboxInternalState,
freeform,
defaultProps: {
type: 'text',
value: value !== null && value !== void 0 ? value : '',
'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
...triggerNativeProps
},
activeDescendantController
});
const rootSlot = _reactutilities.slot.always(props.root, {
defaultProps: {
'aria-owns': !inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
...rootNativeProps
},
elementType: 'div'
});
rootSlot.ref = (0, _reactutilities.useMergedRefs)(rootSlot.ref, comboboxTargetRef);
const showClearIcon = selectedOptions.length > 0 && !disabled && clearable && !multiselect;
const state = {
components: {
root: 'div',
input: 'input',
expandIcon: 'span',
listbox: _Listbox.Listbox,
clearIcon: 'span'
},
root: rootSlot,
input: triggerSlot,
listbox: open || hasFocus ? listbox : undefined,
clearIcon: _reactutilities.slot.optional(props.clearIcon, {
defaultProps: {
'aria-hidden': 'true'
},
elementType: 'span',
renderByDefault: true
}),
expandIcon: _reactutilities.slot.optional(props.expandIcon, {
renderByDefault: true,
defaultProps: {
'aria-disabled': disabled ? 'true' : undefined,
'aria-expanded': open,
role: 'button'
},
elementType: 'span'
}),
showClearIcon,
activeDescendantController,
...baseState
};
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
(0, _reactutilities.useOnClickOutside)({
element: targetDocument,
callback: (event)=>setOpen(event, false),
refs: [
triggerRef,
comboboxPopupRef,
comboboxTargetRef
],
disabled: !open
});
/* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown } = state.expandIcon || {};
const onExpandIconMouseDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onIconMouseDown, (event)=>{
var _triggerRef_current;
event.preventDefault();
state.setOpen(event, !state.open);
(_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
}));
if (state.expandIcon) {
state.expandIcon.onMouseDown = onExpandIconMouseDown;
// If there is no explicit aria-label, calculate default accName attribute for expandIcon button,
// using the following steps:
// 1. If there is an aria-label, it is "Open [aria-label]"
// 2. If there is an aria-labelledby, it is "Open [aria-labelledby target]" (using aria-labelledby + ids)
// 3. If there is no aria-label/ledby attr, it falls back to "Open"
// We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179
const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];
const defaultOpenString = 'Open'; // this is english-only since it is the fallback
if (!hasExpandLabel) {
if (props['aria-labelledby']) {
var _state_expandIcon_id;
const chevronId = (_state_expandIcon_id = state.expandIcon.id) !== null && _state_expandIcon_id !== void 0 ? _state_expandIcon_id : `${comboId}-chevron`;
const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;
state.expandIcon['aria-label'] = defaultOpenString;
state.expandIcon.id = chevronId;
state.expandIcon['aria-labelledby'] = chevronLabelledBy;
} else if (props['aria-label']) {
state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;
} else {
state.expandIcon['aria-label'] = defaultOpenString;
}
}
}
const onClearIconMouseDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)((_state_clearIcon = state.clearIcon) === null || _state_clearIcon === void 0 ? void 0 : _state_clearIcon.onMouseDown, (ev)=>{
ev.preventDefault();
}));
const onClearIconClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)((_state_clearIcon1 = state.clearIcon) === null || _state_clearIcon1 === void 0 ? void 0 : _state_clearIcon1.onClick, (ev)=>{
clearSelection(ev);
}));
if (state.clearIcon) {
state.clearIcon.onMouseDown = onClearIconMouseDown;
state.clearIcon.onClick = onClearIconClick;
}
// Heads up! We don't support "clearable" in multiselect mode, so we should never display a slot
if (multiselect) {
state.clearIcon = undefined;
}
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks -- "process.env" does not change in runtime
_react.useEffect(()=>{
if (clearable && multiselect) {
// eslint-disable-next-line no-console
console.error(`[@fluentui/react-combobox] "clearable" prop is not supported in multiselect mode.`);
}
}, [
clearable,
multiselect
]);
}
return state;
};
const useCombobox_unstable = (props, ref)=>{
'use no memo';
const { appearance = 'outline', size = 'medium', ...baseProps } = props;
const baseState = useComboboxBase_unstable(baseProps, ref);
if (baseState.clearIcon) {
var _baseState_clearIcon;
var _children;
(_children = (_baseState_clearIcon = baseState.clearIcon).children) !== null && _children !== void 0 ? _children : _baseState_clearIcon.children = /*#__PURE__*/ _react.createElement(_reacticons.DismissRegular, null);
}
if (baseState.expandIcon) {
var _baseState_expandIcon;
var _children1;
(_children1 = (_baseState_expandIcon = baseState.expandIcon).children) !== null && _children1 !== void 0 ? _children1 : _baseState_expandIcon.children = /*#__PURE__*/ _react.createElement(_reacticons.ChevronDownRegular, null);
}
return {
...baseState,
appearance,
size
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,709 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
comboboxClassNames: function() {
return comboboxClassNames;
},
useComboboxStyles_unstable: function() {
return useComboboxStyles_unstable;
}
});
const _react = require("@griffel/react");
const comboboxClassNames = {
root: 'fui-Combobox',
input: 'fui-Combobox__input',
expandIcon: 'fui-Combobox__expandIcon',
clearIcon: 'fui-Combobox__clearIcon',
listbox: 'fui-Combobox__listbox'
};
// Matches internal heights for Select and Input, but there are no theme variables for these
const fieldHeights = {
small: '24px',
medium: '32px',
large: '40px'
};
/**
* Styles for Combobox
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Bt984gj: "f122n59",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
B7ck84d: "f1ewtqcl",
i8kkvl: "f14mj54c",
mc9l5x: "fwk3njj",
Budl1dq: "fz17x9o",
Brf1p80: "f1869bpl",
Bf4jedk: "f1exfvgq",
qhf8xq: "f10pi13n",
ha4doy: "fmrv4ls",
Bbr2w1p: "f14a1fxs",
Bduesf4: "f3e99gv",
Bpq79vn: "fhljsf7",
li1rpt: "f1gw3sf2",
Bsft5z2: "f13zj6fq",
E3zdtr: "f1mdlcz9",
Eqx8gd: [
"f1a7op3",
"f1cjjd47"
],
By385i5: "f1gboi2j",
B1piin3: [
"f1cjjd47",
"f1a7op3"
],
Dlnsje: "f145g4dw",
d9w3h3: [
"f1kp91vd",
"f1ibwz09"
],
B3778ie: [
"f1ibwz09",
"f1kp91vd"
],
B1q35kw: 0,
Bw17bha: 0,
Bcgy8vk: 0,
Bjuhk93: "f1mnjydx",
Gjdm7m: "f13evtba",
b1kco5: "f1yk9hq",
Ba2ppi3: "fhwpy7i",
F2fol1: "f14ee0xe",
lck23g: "f1xhbsuh",
wi16st: "fsrmcvb",
ywj3b2: "f1t3k7v9",
umuwi5: "fjw5xc1",
Blcqepd: "f1xdyd5c",
nplu4u: "fatpbeo",
Bioka5o: "fb7uyps",
Bnupc0a: "fx04xgm",
bing71: "f1c7in40",
Bercvud: "f1ibeo51"
},
listbox: {
E5pizo: "f1hg901r",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
Bxyxcbc: "fmmk62d",
B7ck84d: "f1ewtqcl"
},
listboxCollapsed: {
mc9l5x: "fjseox"
},
inlineListbox: {
Bj3rh1h: "f19g0ac"
},
small: {
Bqenvij: "frvgh55",
z189sj: [
"fdw0yi8",
"fk8j09s"
]
},
medium: {
Bqenvij: "f1d2rq10",
z189sj: [
"f11gcy0p",
"f1ng84yb"
]
},
large: {
i8kkvl: "f1rjii52",
Bqenvij: "fbhnoac",
z189sj: [
"fw5db7e",
"f1uw59to"
]
},
outline: {
De3pzq: "fxugw4r",
Bgfg5da: 0,
B9xav0g: "f1c1zstj",
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "fhz96rm"
},
outlineInteractive: {
Bgoe8wy: "fvcxoqz",
Bwzppfd: [
"f1ub3y4t",
"f1m52nbi"
],
oetu4i: "f1l4zc64",
gg5e9n: [
"f1m52nbi",
"f1ub3y4t"
],
B6oc9vd: "fvs00aa",
ak43y8: [
"f1assf6x",
"f4ruux4"
],
wmxk5l: "f1z0osm6",
B50zh58: [
"f4ruux4",
"f1assf6x"
],
Bvq3b66: "f1b473iu",
Brahy3i: [
"f381qr8",
"ft4skwv"
],
zoxjo1: "f1qzcrsd",
an54nd: [
"ft4skwv",
"f381qr8"
]
},
underline: {
De3pzq: "f1c21dwh",
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
Bgfg5da: "f9ez7ne",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "fokr779"
},
"filled-lighter": {
De3pzq: "fxugw4r",
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f88035w"
},
"filled-darker": {
De3pzq: "f16xq7d1",
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f88035w"
},
invalid: {
tvckwq: "fs4k3qj",
gk2u95: [
"fcee079",
"fmyw78r"
],
hhx65j: "f1fgmyf4",
Bxowmz0: [
"fmyw78r",
"fcee079"
]
},
invalidUnderline: {
hhx65j: "f1fgmyf4"
},
disabled: {
Bceei9c: "fdrzuqr",
De3pzq: "f1c21dwh",
g2u3we: "f1jj8ep1",
h3c5rm: [
"f15xbau",
"fy0fskl"
],
B9xav0g: "f4ikngz",
zhjwy3: [
"fy0fskl",
"f15xbau"
],
Bcq6wej: "f9dbb4x",
Jcjdmf: [
"f3qs60o",
"f5u9ap2"
],
sc4o1m: "fwd1oij",
Bosien3: [
"f5u9ap2",
"f3qs60o"
]
}
}, {
d: [
".f122n59{align-items:center;}",
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
".f1ewtqcl{box-sizing:border-box;}",
".f14mj54c{column-gap:var(--spacingHorizontalXXS);}",
".fwk3njj{display:inline-grid;}",
".fz17x9o{grid-template-columns:1fr auto;}",
".f1869bpl{justify-content:space-between;}",
".f1exfvgq{min-width:250px;}",
".f10pi13n{position:relative;}",
".fmrv4ls{vertical-align:middle;}",
".f1gw3sf2::after{box-sizing:border-box;}",
".f13zj6fq::after{content:\"\";}",
".f1mdlcz9::after{position:absolute;}",
".f1a7op3::after{left:-1px;}",
".f1cjjd47::after{right:-1px;}",
".f1gboi2j::after{bottom:-1px;}",
".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}",
".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}",
".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}",
[
".f1mnjydx::after{border-bottom:var(--strokeWidthThick) solid var(--colorCompoundBrandStroke);}",
{
p: -1
}
],
".f13evtba::after{clip-path:inset(calc(100% - 2px) 0 0 0);}",
".f1yk9hq::after{transform:scaleX(0);}",
".fhwpy7i::after{transition-property:transform;}",
".f14ee0xe::after{transition-duration:var(--durationUltraFast);}",
".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}",
".f1hg901r{box-shadow:var(--shadow16);}",
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
".fmmk62d{max-height:80vh;}",
".fjseox{display:none;}",
".f19g0ac{z-index:1;}",
".frvgh55{height:24px;}",
".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}",
".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}",
".f1d2rq10{height:32px;}",
".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}",
".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}",
".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}",
".fbhnoac{height:40px;}",
".fw5db7e{padding-right:var(--spacingHorizontalM);}",
".f1uw59to{padding-left:var(--spacingHorizontalM);}",
".fxugw4r{background-color:var(--colorNeutralBackground1);}",
[
".fhz96rm{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);}",
{
p: -2
}
],
".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}",
".f1c21dwh{background-color:var(--colorTransparentBackground);}",
[
".f9ez7ne{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}",
{
p: -1
}
],
[
".fokr779{border-radius:0;}",
{
p: -1
}
],
[
".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
{
p: -2
}
],
".f16xq7d1{background-color:var(--colorNeutralBackground3);}",
[
".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
{
p: -2
}
],
".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}",
".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}",
".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}",
".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}",
".fdrzuqr{cursor:not-allowed;}",
".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}",
".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}",
".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}",
".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"
],
w: [
".f14a1fxs:focus-within{outline-width:2px;}",
".f3e99gv:focus-within{outline-style:solid;}",
".fhljsf7:focus-within{outline-color:transparent;}",
".fjw5xc1:focus-within::after{transform:scaleX(1);}",
".f1xdyd5c:focus-within::after{transition-property:transform;}",
".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}",
".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}",
".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}",
".f1b473iu:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}",
".f381qr8:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}",
".ft4skwv:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}",
".f1qzcrsd:focus-within{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"
],
m: [
[
"@media screen and (prefers-reduced-motion: reduce){.fsrmcvb::after{transition-duration:0.01ms;}}",
{
m: "screen and (prefers-reduced-motion: reduce)"
}
],
[
"@media screen and (prefers-reduced-motion: reduce){.f1t3k7v9::after{transition-delay:0.01ms;}}",
{
m: "screen and (prefers-reduced-motion: reduce)"
}
],
[
"@media screen and (prefers-reduced-motion: reduce){.fx04xgm:focus-within::after{transition-duration:0.01ms;}}",
{
m: "screen and (prefers-reduced-motion: reduce)"
}
],
[
"@media screen and (prefers-reduced-motion: reduce){.f1c7in40:focus-within::after{transition-delay:0.01ms;}}",
{
m: "screen and (prefers-reduced-motion: reduce)"
}
],
[
"@media (forced-colors: active){.f9dbb4x{border-top-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f3qs60o{border-right-color:GrayText;}.f5u9ap2{border-left-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fwd1oij{border-bottom-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
]
],
h: [
".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}",
".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}",
".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}",
".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}"
],
a: [
".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}",
".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}",
".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}",
".f1z0osm6:active{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"
]
});
const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
input: {
qb2dma: "f1ub7u0d",
De3pzq: "f1c21dwh",
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f3bhgqh",
sj55zd: "f19n0e5",
Bahqtrf: "fk6fouc",
Brovlpu: "ftqa4ok",
yvdlaj: "fwyc1cq",
B3o7kgh: "f13ta7ih"
},
small: {
Bahqtrf: "fk6fouc",
Be2twd7: "fy9rknc",
Bhrd7zp: "figsok6",
Bg96gwp: "fwrc4pm",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: [
"fxe2rs",
"f1gflqzi"
]
},
medium: {
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: [
"fzy81xo",
"f58b53b"
]
},
large: {
Bahqtrf: "fk6fouc",
Be2twd7: "fod5ikn",
Bhrd7zp: "figsok6",
Bg96gwp: "faaz57k",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: [
"f1kdav7a",
"footqm6"
]
},
disabled: {
sj55zd: "f1s2aq7o",
De3pzq: "f1c21dwh",
Bceei9c: "fdrzuqr",
yvdlaj: "fahhnxm"
}
}, {
d: [
".f1ub7u0d{align-self:stretch;}",
".f1c21dwh{background-color:var(--colorTransparentBackground);}",
[
".f3bhgqh{border:none;}",
{
p: -2
}
],
".f19n0e5{color:var(--colorNeutralForeground1);}",
".fk6fouc{font-family:var(--fontFamilyBase);}",
".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}",
".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}",
".f13ta7ih::-webkit-input-placeholder{opacity:1;}",
".f13ta7ih::-moz-placeholder{opacity:1;}",
".fy9rknc{font-size:var(--fontSizeBase200);}",
".figsok6{font-weight:var(--fontWeightRegular);}",
".fwrc4pm{line-height:var(--lineHeightBase200);}",
[
".fxe2rs{padding:0 0 0 calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}",
{
p: -1
}
],
[
".f1gflqzi{padding:0 calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS)) 0 0;}",
{
p: -1
}
],
".fkhj508{font-size:var(--fontSizeBase300);}",
".f1i3iumi{line-height:var(--lineHeightBase300);}",
[
".fzy81xo{padding:0 0 0 calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}",
{
p: -1
}
],
[
".f58b53b{padding:0 calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS)) 0 0;}",
{
p: -1
}
],
".fod5ikn{font-size:var(--fontSizeBase400);}",
".faaz57k{line-height:var(--lineHeightBase400);}",
[
".f1kdav7a{padding:0 0 0 calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}",
{
p: -1
}
],
[
".footqm6{padding:0 calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge)) 0 0;}",
{
p: -1
}
],
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
".fdrzuqr{cursor:not-allowed;}",
".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}",
".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"
],
f: [
".ftqa4ok:focus{outline-style:none;}"
]
});
const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
icon: {
B7ck84d: "f1ewtqcl",
sj55zd: "fxkbij4",
Bceei9c: "f1k6fduh",
mc9l5x: "ftgm304",
Be2twd7: "f1pp30po",
Bo70h7d: "fvc9v3g"
},
hidden: {
mc9l5x: "fjseox"
},
visuallyHidden: {
Bh84pgu: "f1ekcaio",
Bqenvij: "f1mpe4l3",
jrapky: 0,
Frg6f3: 0,
t21cq0: 0,
B6of3ja: 0,
B74szlk: "f1jlpb2r",
B68tc82: 0,
Bmxbyg5: 0,
Bpg54ce: "f1a3p1vp",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1c5fvqg",
a9b677: "frkrog8",
qhf8xq: "f1euv43f"
},
small: {
Be2twd7: "f4ybsrx",
Frg6f3: [
"f1h9en5y",
"f1xk557c"
]
},
medium: {
Be2twd7: "fe5j1ua",
Frg6f3: [
"f1h9en5y",
"f1xk557c"
]
},
large: {
Be2twd7: "f1rt2boy",
Frg6f3: [
"f1t5qyk5",
"f1ikr372"
]
},
disabled: {
sj55zd: "f1s2aq7o",
Bceei9c: "fdrzuqr"
}
}, {
d: [
".f1ewtqcl{box-sizing:border-box;}",
".fxkbij4{color:var(--colorNeutralStrokeAccessible);}",
".f1k6fduh{cursor:pointer;}",
".ftgm304{display:block;}",
".f1pp30po{font-size:var(--fontSizeBase500);}",
".fvc9v3g svg{display:block;}",
".fjseox{display:none;}",
".f1ekcaio{clip:rect(0px, 0px, 0px, 0px);}",
".f1mpe4l3{height:1px;}",
[
".f1jlpb2r{margin:-1px;}",
{
p: -1
}
],
[
".f1a3p1vp{overflow:hidden;}",
{
p: -1
}
],
[
".f1c5fvqg{padding:0px;}",
{
p: -1
}
],
".frkrog8{width:1px;}",
".f1euv43f{position:absolute;}",
".f4ybsrx{font-size:16px;}",
".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}",
".f1xk557c{margin-right:var(--spacingHorizontalXXS);}",
".fe5j1ua{font-size:20px;}",
".f1rt2boy{font-size:24px;}",
".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}",
".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}",
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
".fdrzuqr{cursor:not-allowed;}"
]
});
const useComboboxStyles_unstable = (state)=>{
'use no memo';
const { appearance, open, size, showClearIcon } = state;
const invalid = `${state.input['aria-invalid']}` === 'true';
const disabled = state.input.disabled;
const styles = useStyles();
const iconStyles = useIconStyles();
const inputStyles = useInputStyles();
state.root.className = (0, _react.mergeClasses)(comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
state.input.className = (0, _react.mergeClasses)(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
if (state.listbox) {
state.listbox.className = (0, _react.mergeClasses)(comboboxClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);
}
if (state.expandIcon) {
state.expandIcon.className = (0, _react.mergeClasses)(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);
}
if (state.clearIcon) {
state.clearIcon.className = (0, _react.mergeClasses)(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,272 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
comboboxClassNames: function() {
return comboboxClassNames;
},
useComboboxStyles_unstable: function() {
return useComboboxStyles_unstable;
}
});
const _reacttheme = require("@fluentui/react-theme");
const _react = require("@griffel/react");
const _internalTokens = require("../../utils/internalTokens");
const comboboxClassNames = {
root: 'fui-Combobox',
input: 'fui-Combobox__input',
expandIcon: 'fui-Combobox__expandIcon',
clearIcon: 'fui-Combobox__clearIcon',
listbox: 'fui-Combobox__listbox'
};
// Matches internal heights for Select and Input, but there are no theme variables for these
const fieldHeights = {
small: '24px',
medium: '32px',
large: '40px'
};
/**
* Styles for Combobox
*/ const useStyles = (0, _react.makeStyles)({
root: {
alignItems: 'center',
borderRadius: _reacttheme.tokens.borderRadiusMedium,
boxSizing: 'border-box',
columnGap: _reacttheme.tokens.spacingHorizontalXXS,
display: 'inline-grid',
gridTemplateColumns: '1fr auto',
justifyContent: 'space-between',
minWidth: '250px',
position: 'relative',
verticalAlign: 'middle',
// windows high contrast mode focus indicator
':focus-within': {
outlineWidth: '2px',
outlineStyle: 'solid',
outlineColor: 'transparent'
},
// bottom focus border, shared with Input, Select, and SpinButton
'::after': {
boxSizing: 'border-box',
content: '""',
position: 'absolute',
left: '-1px',
bottom: '-1px',
right: '-1px',
height: `max(2px, ${_reacttheme.tokens.borderRadiusMedium})`,
borderBottomLeftRadius: _reacttheme.tokens.borderRadiusMedium,
borderBottomRightRadius: _reacttheme.tokens.borderRadiusMedium,
borderBottom: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorCompoundBrandStroke}`,
clipPath: 'inset(calc(100% - 2px) 0 0 0)',
transform: 'scaleX(0)',
transitionProperty: 'transform',
transitionDuration: _reacttheme.tokens.durationUltraFast,
transitionDelay: _reacttheme.tokens.curveAccelerateMid,
'@media screen and (prefers-reduced-motion: reduce)': {
transitionDuration: '0.01ms',
transitionDelay: '0.01ms'
}
},
':focus-within::after': {
transform: 'scaleX(1)',
transitionProperty: 'transform',
transitionDuration: _reacttheme.tokens.durationNormal,
transitionDelay: _reacttheme.tokens.curveDecelerateMid,
'@media screen and (prefers-reduced-motion: reduce)': {
transitionDuration: '0.01ms',
transitionDelay: '0.01ms'
}
},
':focus-within:active::after': {
borderBottomColor: _reacttheme.tokens.colorCompoundBrandStrokePressed
}
},
listbox: {
boxShadow: `${_reacttheme.tokens.shadow16}`,
borderRadius: _reacttheme.tokens.borderRadiusMedium,
maxHeight: '80vh',
boxSizing: 'border-box'
},
listboxCollapsed: {
display: 'none'
},
// When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.
// This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.
inlineListbox: {
zIndex: 1
},
// size variants
small: {
height: fieldHeights.small,
paddingRight: _reacttheme.tokens.spacingHorizontalSNudge
},
medium: {
height: fieldHeights.medium,
paddingRight: _reacttheme.tokens.spacingHorizontalMNudge
},
large: {
columnGap: _reacttheme.tokens.spacingHorizontalSNudge,
height: fieldHeights.large,
paddingRight: _reacttheme.tokens.spacingHorizontalM
},
// appearance variants
outline: {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke1}`,
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible
},
outlineInteractive: {
'&:hover': {
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Hover),
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessibleHover
},
'&:active': {
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed),
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
},
'&:focus-within': {
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed),
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
}
},
underline: {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
borderBottom: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStrokeAccessible}`,
borderRadius: '0'
},
'filled-lighter': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorTransparentStroke}`
},
'filled-darker': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground3,
border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorTransparentStroke}`
},
invalid: {
':not(:focus-within),:hover:not(:focus-within)': {
..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder2)
}
},
invalidUnderline: {
':not(:focus-within),:hover:not(:focus-within)': {
borderBottomColor: _reacttheme.tokens.colorPaletteRedBorder2
}
},
disabled: {
cursor: 'not-allowed',
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
'@media (forced-colors: active)': {
..._react.shorthands.borderColor('GrayText')
}
}
});
const useInputStyles = (0, _react.makeStyles)({
input: {
alignSelf: 'stretch',
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
border: 'none',
color: _reacttheme.tokens.colorNeutralForeground1,
fontFamily: _reacttheme.tokens.fontFamilyBase,
'&:focus': {
outlineStyle: 'none'
},
'&::placeholder': {
color: _reacttheme.tokens.colorNeutralForeground4,
opacity: 1
}
},
// size variants
small: {
..._reacttheme.typographyStyles.caption1,
padding: `0 0 0 ${`calc(${_reacttheme.tokens.spacingHorizontalSNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`}`
},
medium: {
..._reacttheme.typographyStyles.body1,
padding: `0 0 0 ${`calc(${_reacttheme.tokens.spacingHorizontalMNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`}`
},
large: {
..._reacttheme.typographyStyles.body2,
padding: `0 0 0 ${`calc(${_reacttheme.tokens.spacingHorizontalM} + ${_reacttheme.tokens.spacingHorizontalSNudge})`}`
},
disabled: {
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
cursor: 'not-allowed',
'::placeholder': {
color: _reacttheme.tokens.colorNeutralForegroundDisabled
}
}
});
const useIconStyles = (0, _react.makeStyles)({
icon: {
boxSizing: 'border-box',
color: _reacttheme.tokens.colorNeutralStrokeAccessible,
cursor: 'pointer',
display: 'block',
fontSize: _reacttheme.tokens.fontSizeBase500,
// the SVG must have display: block for accurate positioning
// otherwise an extra inline space is inserted after the svg element
'& svg': {
display: 'block'
}
},
hidden: {
display: 'none'
},
visuallyHidden: {
clip: 'rect(0px, 0px, 0px, 0px)',
height: '1px',
margin: '-1px',
overflow: 'hidden',
padding: '0px',
width: '1px',
position: 'absolute'
},
// icon size variants
small: {
fontSize: _internalTokens.iconSizes.small,
marginLeft: _reacttheme.tokens.spacingHorizontalXXS
},
medium: {
fontSize: _internalTokens.iconSizes.medium,
marginLeft: _reacttheme.tokens.spacingHorizontalXXS
},
large: {
fontSize: _internalTokens.iconSizes.large,
marginLeft: _reacttheme.tokens.spacingHorizontalSNudge
},
disabled: {
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
cursor: 'not-allowed'
}
});
const useComboboxStyles_unstable = (state)=>{
'use no memo';
const { appearance, open, size, showClearIcon } = state;
const invalid = `${state.input['aria-invalid']}` === 'true';
const disabled = state.input.disabled;
const styles = useStyles();
const iconStyles = useIconStyles();
const inputStyles = useInputStyles();
state.root.className = (0, _react.mergeClasses)(comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
state.input.className = (0, _react.mergeClasses)(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
if (state.listbox) {
state.listbox.className = (0, _react.mergeClasses)(comboboxClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);
}
if (state.expandIcon) {
state.expandIcon.className = (0, _react.mergeClasses)(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);
}
if (state.clearIcon) {
state.clearIcon.className = (0, _react.mergeClasses)(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,114 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useInputTriggerSlot", {
enumerable: true,
get: function() {
return useInputTriggerSlot;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _keyboardkeys = require("@fluentui/keyboard-keys");
const _useTriggerSlot = require("../../utils/useTriggerSlot");
const _dropdownKeyActions = require("../../utils/dropdownKeyActions");
function useInputTriggerSlot(triggerFromProps, ref, options) {
'use no memo';
const { state: { open, value, selectOption, setValue, multiselect, selectedOptions, clearSelection, getOptionById, setOpen }, freeform, defaultProps, activeDescendantController } = options;
const onBlur = (event)=>{
// handle selection and updating value if freeform is false
if (!open && !freeform) {
const activeOptionId = activeDescendantController.active();
const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;
// select matching option, if the value fully matches
if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {
selectOption(event, activeOption);
}
// reset typed value when the input loses focus while collapsed, unless freeform is true
setValue(undefined);
}
};
const getOptionFromInput = (inputValue)=>{
const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();
if (!searchString || searchString.length === 0) {
activeDescendantController.blur();
return;
}
const matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString) === 0;
const match = activeDescendantController.find((id)=>{
const option = getOptionById(id);
return !!option && matcher(option.text);
});
if (!match) {
activeDescendantController.blur();
return undefined;
}
return getOptionById(match);
};
// update value and active option based on input
const onChange = (event)=>{
const inputValue = event.target.value;
// update uncontrolled value
setValue(inputValue);
// handle updating active option based on input
const matchingOption = getOptionFromInput(inputValue);
// clear selection for single-select if the input value no longer matches the selection
if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {
clearSelection(event);
}
};
const trigger = (0, _useTriggerSlot.useTriggerSlot)(triggerFromProps, ref, {
state: options.state,
defaultProps,
elementType: 'input',
activeDescendantController
});
trigger.onChange = (0, _reactutilities.mergeCallbacks)(trigger.onChange, onChange);
trigger.onBlur = (0, _reactutilities.mergeCallbacks)(trigger.onBlur, onBlur);
// NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set
// To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows
// ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888
const [hideActiveDescendant, setHideActiveDescendant] = _react.useState(false);
// save the typing vs. navigating options state, as the space key should behave differently in each case
// we do not want to update the combobox when this changes, just save the value between renders
const isTyping = _react.useRef(false);
/**
* Freeform combobox should not select
*/ const defaultOnKeyDown = trigger.onKeyDown;
const onKeyDown = (0, _reactutilities.useEventCallback)((event)=>{
if (!open && (0, _dropdownKeyActions.getDropdownActionFromKey)(event) === 'Type') {
setOpen(event, true);
}
// clear activedescendant when moving the text insertion cursor
if (event.key === _keyboardkeys.ArrowLeft || event.key === _keyboardkeys.ArrowRight) {
setHideActiveDescendant(true);
} else {
setHideActiveDescendant(false);
}
// update typing state to true if the user is typing
const action = (0, _dropdownKeyActions.getDropdownActionFromKey)(event, {
open,
multiselect
});
if (action === 'Type') {
isTyping.current = true;
} else if (action === 'Open' && event.key !== ' ' || action === 'Next' || action === 'Previous' || action === 'First' || action === 'Last' || action === 'PageUp' || action === 'PageDown') {
isTyping.current = false;
}
// allow space to insert a character if freeform & the last action was typing, or if the popup is closed
if ((isTyping.current || !open) && event.key === ' ') {
var _triggerFromProps_onKeyDown;
triggerFromProps === null || triggerFromProps === void 0 ? void 0 : (_triggerFromProps_onKeyDown = triggerFromProps.onKeyDown) === null || _triggerFromProps_onKeyDown === void 0 ? void 0 : _triggerFromProps_onKeyDown.call(triggerFromProps, event);
return;
}
defaultOnKeyDown === null || defaultOnKeyDown === void 0 ? void 0 : defaultOnKeyDown(event);
});
trigger.onKeyDown = onKeyDown;
if (hideActiveDescendant) {
trigger['aria-activedescendant'] = undefined;
}
return trigger;
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Dropdown", {
enumerable: true,
get: function() {
return Dropdown;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useDropdown = require("./useDropdown");
const _renderDropdown = require("./renderDropdown");
const _useDropdownStylesstyles = require("./useDropdownStyles.styles");
const _useComboboxContextValues = require("../../contexts/useComboboxContextValues");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Dropdown = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useDropdown.useDropdown_unstable)(props, ref);
const contextValues = (0, _useComboboxContextValues.useComboboxContextValues)(state);
(0, _useDropdownStylesstyles.useDropdownStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDropdownStyles_unstable')(state);
return (0, _renderDropdown.renderDropdown_unstable)(state, contextValues);
});
Dropdown.displayName = 'Dropdown';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDropdown_unstable } from './useDropdown';\nimport { renderDropdown_unstable } from './renderDropdown';\nimport { useDropdownStyles_unstable } from './useDropdownStyles.styles';\nimport type { DropdownProps } from './Dropdown.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Dropdown component: a selection control that allows users to choose from a set of possible options\n */\nexport const Dropdown: ForwardRefComponent<DropdownProps> = React.forwardRef((props, ref) => {\n const state = useDropdown_unstable(props, ref);\n const contextValues = useComboboxContextValues(state);\n\n useDropdownStyles_unstable(state);\n\n useCustomStyleHook_unstable('useDropdownStyles_unstable')(state);\n\n return renderDropdown_unstable(state, contextValues);\n});\n\nDropdown.displayName = 'Dropdown';\n"],"names":["React","useDropdown_unstable","renderDropdown_unstable","useDropdownStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Dropdown","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACM,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;0CAE/B,0CAA0C;qCAEvC,kCAAkC;AAKvE,MAAMM,WAAAA,WAAAA,GAA+CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,YAAQT,iCAAAA,EAAqBO,OAAOC;IAC1C,MAAME,oBAAgBP,kDAAAA,EAAyBM;QAE/CP,mDAAAA,EAA2BO;QAE3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,WAAOR,uCAAAA,EAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Dropdown/Dropdown.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\n ComboboxBaseContextValues,\n ComboboxBaseOpenChangeData,\n ComboboxBaseOpenEvents,\n ComboboxBaseProps,\n ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type DropdownSlots = {\n /** The root dropdown slot */\n root: NonNullable<Slot<'div'>>;\n\n /** The dropdown arrow icon */\n expandIcon?: Slot<'span'>;\n\n /** The dropdown clear icon */\n clearButton?: Slot<'button'>;\n\n /** The primary slot, the element with role=\"combobox\" */\n button: NonNullable<Slot<'button'>>;\n\n /** The dropdown listbox slot */\n listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Dropdown Props\n */\nexport type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;\n\n/**\n * Dropdown Props without design-only props.\n */\nexport type DropdownBaseProps = DistributiveOmit<DropdownProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering Dropdown\n */\nexport type DropdownState = ComponentState<DropdownSlots> &\n Omit<ComboboxBaseState, 'freeform'> & {\n /** Whether the placeholder is currently displayed */\n placeholderVisible: boolean;\n\n showClearButton?: boolean;\n\n activeDescendantController: ActiveDescendantImperativeRef;\n };\n\n/**\n * State used in rendering Dropdown, without design-only state.\n */\nexport type DropdownBaseState = DistributiveOmit<DropdownState, 'appearance' | 'size'>;\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Dropdown: function() {
return _Dropdown.Dropdown;
},
dropdownClassNames: function() {
return _useDropdownStylesstyles.dropdownClassNames;
},
renderDropdown_unstable: function() {
return _renderDropdown.renderDropdown_unstable;
},
useDropdownBase_unstable: function() {
return _useDropdown.useDropdownBase_unstable;
},
useDropdownStyles_unstable: function() {
return _useDropdownStylesstyles.useDropdownStyles_unstable;
},
useDropdown_unstable: function() {
return _useDropdown.useDropdown_unstable;
}
});
const _Dropdown = require("./Dropdown");
const _renderDropdown = require("./renderDropdown");
const _useDropdown = require("./useDropdown");
const _useDropdownStylesstyles = require("./useDropdownStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Dropdown/index.ts"],"sourcesContent":["export { Dropdown } from './Dropdown';\nexport type {\n ActiveOptionChangeData,\n DropdownBaseProps as DropdownBaseHookProps,\n DropdownBaseState as DropdownBaseHookState,\n DropdownContextValues,\n DropdownOpenChangeData,\n DropdownOpenEvents,\n DropdownProps,\n DropdownSlots,\n DropdownState,\n} from './Dropdown.types';\nexport { renderDropdown_unstable } from './renderDropdown';\nexport { useDropdownBase_unstable, useDropdown_unstable } from './useDropdown';\nexport { dropdownClassNames, useDropdownStyles_unstable } from './useDropdownStyles.styles';\n"],"names":["Dropdown","renderDropdown_unstable","useDropdownBase_unstable","useDropdown_unstable","dropdownClassNames","useDropdownStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAcRI,2CAAkB;;;eAFlBH,uCAAuB;;;eACvBC,qCAAwB;;;eACJG,mDAA0B;;;eADpBF,iCAAoB;;;0BAb9B,aAAa;gCAYE,mBAAmB;6BACI,gBAAgB;yCAChB,6BAA6B"}

View File

@@ -0,0 +1,43 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderDropdown_unstable", {
enumerable: true,
get: function() {
return renderDropdown_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactportal = require("@fluentui/react-portal");
const _reactutilities = require("@fluentui/react-utilities");
const _reactaria = require("@fluentui/react-aria");
const _ComboboxContext = require("../../contexts/ComboboxContext");
const _ListboxContext = require("../../contexts/ListboxContext");
const renderDropdown_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactaria.ActiveDescendantContextProvider, {
value: contextValues.activeDescendant,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ListboxContext.ListboxContext.Provider, {
value: contextValues.listbox,
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_ComboboxContext.ComboboxContext.Provider, {
value: contextValues.combobox,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)(state.button, {
children: [
state.button.children,
state.expandIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {})
]
}),
state.clearButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.clearButton, {}),
state.listbox && (state.inlinePopup ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactportal.Portal, {
mountNode: state.mountNode,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {})
}))
]
})
})
})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Dropdown/renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues): JSXElement => {\n assertSlots<DropdownSlots>(state);\n\n return (\n <state.root>\n <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n <ListboxContext.Provider value={contextValues.listbox}>\n {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n <ComboboxContext.Provider value={contextValues.combobox}>\n <state.button>\n {state.button.children}\n {state.expandIcon && <state.expandIcon />}\n </state.button>\n {state.clearButton && <state.clearButton />}\n {state.listbox &&\n (state.inlinePopup ? (\n <state.listbox />\n ) : (\n <Portal mountNode={state.mountNode}>\n <state.listbox />\n </Portal>\n ))}\n {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n </ComboboxContext.Provider>\n </ListboxContext.Provider>\n </ActiveDescendantContextProvider>\n </state.root>\n );\n};\n"],"names":["Portal","assertSlots","ActiveDescendantContextProvider","ComboboxContext","ListboxContext","renderDropdown_unstable","state","contextValues","root","value","activeDescendant","Provider","listbox","combobox","button","children","expandIcon","clearButton","inlinePopup","mountNode"],"mappings":";;;;+BAeaK;;;;;;4BAdb,iCAAiD;6BAE1B,yBAAyB;gCAEpB,4BAA4B;2BAER,uBAAuB;iCACvC,iCAAiC;gCAElC,gCAAgC;AAKxD,gCAAgC,CAACC,OAAsBC;QAC5DN,2BAAAA,EAA2BK;IAE3B,OAAA,WAAA,OACE,eAAA,EAACA,MAAME,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACN,0CAAAA,EAAAA;YAAgCO,OAAOF,cAAcG,gBAAgB;sBACpE,WAAA,OAAA,eAAA,EAACN,8BAAAA,CAAeO,QAAQ,EAAA;gBAACF,OAAOF,cAAcK,OAAO;0BAEnD,WAAA,OAAA,gBAAA,EAACT,gCAAAA,CAAgBQ,QAAQ,EAAA;oBAACF,OAAOF,cAAcM,QAAQ;;0CACrD,gBAAA,EAACP,MAAMQ,MAAM,EAAA;;gCACVR,MAAMQ,MAAM,CAACC,QAAQ;gCACrBT,MAAMU,UAAU,IAAA,WAAA,OAAI,eAAA,EAACV,MAAMU,UAAU,EAAA,CAAA;;;wBAEvCV,MAAMW,WAAW,IAAA,WAAA,OAAI,eAAA,EAACX,MAAMW,WAAW,EAAA,CAAA;wBACvCX,MAAMM,OAAO,IACXN,CAAAA,MAAMY,WAAW,GAAA,WAAA,OAChB,eAAA,EAACZ,MAAMM,OAAO,EAAA,CAAA,KAAA,WAAA,OAEd,eAAA,EAACZ,mBAAAA,EAAAA;4BAAOmB,WAAWb,MAAMa,SAAS;sCAChC,WAAA,OAAA,eAAA,EAACb,MAAMM,OAAO,EAAA,CAAA;2BAElB;;;;;;AAOd,EAAE"}

View File

@@ -0,0 +1,100 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useButtonTriggerSlot", {
enumerable: true,
get: function() {
return useButtonTriggerSlot;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _useTriggerSlot = require("../../utils/useTriggerSlot");
const _dropdownKeyActions = require("../../utils/dropdownKeyActions");
function useButtonTriggerSlot(triggerFromProps, ref, options) {
'use no memo';
const { state: { open, setOpen, getOptionById }, defaultProps, activeDescendantController } = options;
// jump to matching option based on typing
const searchString = _react.useRef('');
const [setKeyTimeout, clearKeyTimeout] = (0, _reactutilities.useTimeout)();
const moveToNextMatchingOption = (matcher, opt = {
startFromNext: false
})=>{
const { startFromNext } = opt;
const activeOptionId = activeDescendantController.active();
const nextInOrder = activeDescendantController.find((id)=>{
const option = getOptionById(id);
return !!option && matcher(option.text);
}, {
startFrom: startFromNext ? activeDescendantController.next({
passive: true
}) : activeOptionId
});
if (nextInOrder) {
return nextInOrder;
}
// Cycle back to first match
return activeDescendantController.find((id)=>{
const option = getOptionById(id);
return !!option && matcher(option.text);
});
};
const moveToNextMatchingOptionWithSameCharacterHandling = ()=>{
if (moveToNextMatchingOption((optionText)=>{
return optionText.toLocaleLowerCase().indexOf(searchString.current) === 0;
}, {
// Slowly pressing the same key will cycle through options
startFromNext: searchString.current.length === 1
})) {
return;
}
// if there are no direct matches, check if the search is all the same letter, e.g. "aaa"
if (allCharactersSame(searchString.current) && moveToNextMatchingOption((optionText)=>{
return optionText.toLocaleLowerCase().indexOf(searchString.current[0]) === 0;
}, {
// if the search is all the same letter, cycle through options starting with that letter
startFromNext: true
})) {
return;
}
activeDescendantController.blur();
};
const onTriggerKeyDown = (ev)=>{
// clear timeout, if it exists
clearKeyTimeout();
// if the key was a char key, update search string
if ((0, _dropdownKeyActions.getDropdownActionFromKey)(ev) === 'Type') {
// update search string
searchString.current += ev.key.toLowerCase();
setKeyTimeout(()=>{
searchString.current = '';
}, 500);
if (open) {
moveToNextMatchingOptionWithSameCharacterHandling();
}
// update state
!open && setOpen(ev, true);
}
};
const trigger = (0, _useTriggerSlot.useTriggerSlot)(triggerFromProps, ref, {
state: options.state,
defaultProps,
elementType: 'button',
activeDescendantController
});
trigger.onKeyDown = (0, _reactutilities.mergeCallbacks)(onTriggerKeyDown, trigger.onKeyDown);
return trigger;
}
/**
* @returns - whether every character in the string is the same
*/ function allCharactersSame(str) {
for(let i = 1; i < str.length; i++){
if (str[i] !== str[i - 1]) {
return false;
}
}
return true;
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,176 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useDropdownBase_unstable: function() {
return useDropdownBase_unstable;
},
useDropdown_unstable: function() {
return useDropdown_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactfield = require("@fluentui/react-field");
const _reactaria = require("@fluentui/react-aria");
const _reacticons = require("@fluentui/react-icons");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _reactutilities = require("@fluentui/react-utilities");
const _useComboboxBaseState = require("../../utils/useComboboxBaseState");
const _useComboboxPositioning = require("../../utils/useComboboxPositioning");
const _Listbox = require("../Listbox/Listbox");
const _useListboxSlot = require("../../utils/useListboxSlot");
const _useButtonTriggerSlot = require("./useButtonTriggerSlot");
const _useOptionStylesstyles = require("../Option/useOptionStyles.styles");
const useDropdownBase_unstable = (props, ref)=>{
'use no memo';
var _state_clearButton;
// Merge props from surrounding <Field>, if any
props = (0, _reactfield.useFieldControlProps_unstable)(props, {
supportsLabelFor: true
});
const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = (0, _reactaria.useActiveDescendant)({
matchOption: (el)=>el.classList.contains(_useOptionStylesstyles.optionClassNames.root)
});
const dropdownInternalState = (0, _useComboboxBaseState.useComboboxBaseState)({
...props,
activeDescendantController,
freeform: false
});
const { appearance: _appearance, size: _size, freeform: _freeform, ...baseState } = dropdownInternalState;
const { clearable, clearSelection, disabled, hasFocus, multiselect, open, selectedOptions, setOpen } = baseState;
const { primary: triggerNativeProps, root: rootNativeProps } = (0, _reactutilities.getPartitionedNativeProps)({
props,
primarySlotTagName: 'button',
excludedPropNames: [
'children'
]
});
const [comboboxPopupRef, comboboxTargetRef] = (0, _useComboboxPositioning.useComboboxPositioning)(props);
const triggerRef = _react.useRef(null);
const listbox = (0, _useListboxSlot.useListboxSlot)(props.listbox, (0, _reactutilities.useMergedRefs)(comboboxPopupRef, activeDescendantListboxRef), {
state: dropdownInternalState,
triggerRef,
defaultProps: {
children: props.children
}
});
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
(0, _reactutilities.useOnClickOutside)({
element: targetDocument,
callback: (event)=>setOpen(event, false),
refs: [
triggerRef,
comboboxPopupRef,
comboboxTargetRef
],
disabled: !open
});
var _props_button;
const trigger = (0, _useButtonTriggerSlot.useButtonTriggerSlot)((_props_button = props.button) !== null && _props_button !== void 0 ? _props_button : {}, (0, _reactutilities.useMergedRefs)(triggerRef, activeParentRef, ref), {
state: dropdownInternalState,
defaultProps: {
type: 'button',
// tabster navigation breaks if the button is disabled and tabIndex is 0
tabIndex: triggerNativeProps.disabled ? undefined : 0,
children: baseState.value || props.placeholder,
'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
...triggerNativeProps
},
activeDescendantController
});
const rootSlot = _reactutilities.slot.always(props.root, {
defaultProps: {
'aria-owns': !props.inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
children: props.children,
...rootNativeProps
},
elementType: 'div'
});
rootSlot.ref = (0, _reactutilities.useMergedRefs)(rootSlot.ref, comboboxTargetRef);
const showClearButton = selectedOptions.length > 0 && !disabled && clearable && !multiselect;
const state = {
components: {
root: 'div',
button: 'button',
clearButton: 'button',
expandIcon: 'span',
listbox: _Listbox.Listbox
},
root: rootSlot,
button: trigger,
listbox: open || hasFocus ? listbox : undefined,
clearButton: _reactutilities.slot.optional(props.clearButton, {
defaultProps: {
'aria-label': 'Clear selection',
// Safari doesn't allow to focus an element with this
// when the element is not visible (display: none) we need to remove it to avoid tabster issues
tabIndex: showClearButton ? 0 : undefined,
type: 'button'
},
elementType: 'button',
renderByDefault: true
}),
expandIcon: _reactutilities.slot.optional(props.expandIcon, {
renderByDefault: true,
elementType: 'span'
}),
placeholderVisible: !baseState.value && !!props.placeholder,
showClearButton,
activeDescendantController,
...baseState
};
const onClearButtonClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)((_state_clearButton = state.clearButton) === null || _state_clearButton === void 0 ? void 0 : _state_clearButton.onClick, (ev)=>{
var _triggerRef_current;
clearSelection(ev);
(_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
}));
if (state.clearButton) {
state.clearButton.onClick = onClearButtonClick;
}
// Heads up! We don't support "clearable" in multiselect mode, so we should never display a slot
if (multiselect) {
state.clearButton = undefined;
}
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks -- "process.env" does not change in runtime
_react.useEffect(()=>{
if (clearable && multiselect) {
// eslint-disable-next-line no-console
console.error(`[@fluentui/react-combobox] "clearable" prop is not supported in multiselect mode.`);
}
}, [
clearable,
multiselect
]);
}
return state;
};
const useDropdown_unstable = (props, ref)=>{
'use no memo';
const { appearance = 'outline', size = 'medium', ...baseProps } = props;
const baseState = useDropdownBase_unstable(baseProps, ref);
if (baseState.clearButton) {
var _baseState_clearButton;
var _children;
(_children = (_baseState_clearButton = baseState.clearButton).children) !== null && _children !== void 0 ? _children : _baseState_clearButton.children = /*#__PURE__*/ _react.createElement(_reacticons.DismissRegular, null);
}
if (baseState.expandIcon) {
var _baseState_expandIcon;
var _children1;
(_children1 = (_baseState_expandIcon = baseState.expandIcon).children) !== null && _children1 !== void 0 ? _children1 : _baseState_expandIcon.children = /*#__PURE__*/ _react.createElement(_reacticons.ChevronDownRegular, null);
}
return {
...baseState,
appearance,
size
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,653 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
dropdownClassNames: function() {
return dropdownClassNames;
},
useDropdownStyles_unstable: function() {
return useDropdownStyles_unstable;
}
});
const _react = require("@griffel/react");
const dropdownClassNames = {
root: 'fui-Dropdown',
button: 'fui-Dropdown__button',
clearButton: 'fui-Dropdown__clearButton',
expandIcon: 'fui-Dropdown__expandIcon',
listbox: 'fui-Dropdown__listbox'
};
/**
* Styles for Dropdown
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
B7ck84d: "f1ewtqcl",
mc9l5x: "ftuwxu6",
Bf4jedk: "f1exfvgq",
qhf8xq: "f10pi13n",
ha4doy: "fmrv4ls",
Bbr2w1p: "f14a1fxs",
Bduesf4: "f3e99gv",
Bpq79vn: "fhljsf7",
li1rpt: "f1gw3sf2",
Bsft5z2: "f13zj6fq",
E3zdtr: "f1mdlcz9",
Eqx8gd: [
"f1a7op3",
"f1cjjd47"
],
By385i5: "f1gboi2j",
B1piin3: [
"f1cjjd47",
"f1a7op3"
],
Dlnsje: "ffyw7fx",
d9w3h3: [
"f1kp91vd",
"f1ibwz09"
],
B3778ie: [
"f1ibwz09",
"f1kp91vd"
],
B1q35kw: 0,
Bw17bha: 0,
Bcgy8vk: 0,
Bjuhk93: "f1mnjydx",
Gjdm7m: "f13evtba",
b1kco5: "f1yk9hq",
Ba2ppi3: "fhwpy7i",
F2fol1: "f14ee0xe",
lck23g: "f1xhbsuh",
wi16st: "fsrmcvb",
ywj3b2: "f1t3k7v9",
umuwi5: "fjw5xc1",
Blcqepd: "f1xdyd5c",
nplu4u: "fatpbeo",
Bioka5o: "fb7uyps",
Bnupc0a: "fx04xgm",
bing71: "f1c7in40",
Bercvud: "f1ibeo51",
Br277j9: "f18qfb8s",
Btis473: "f1m082s7"
},
listbox: {
B7ck84d: "f1ewtqcl",
E5pizo: "f1hg901r",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
Bxyxcbc: "fmmk62d"
},
listboxCollapsed: {
mc9l5x: "fjseox"
},
inlineListbox: {
Bj3rh1h: "f19g0ac"
},
button: {
Bt984gj: "f122n59",
De3pzq: "f1c21dwh",
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f3bhgqh",
B7ck84d: "f1ewtqcl",
sj55zd: "f19n0e5",
i8kkvl: "f14mj54c",
Bceei9c: "f1k6fduh",
mc9l5x: "f13qh94s",
Bahqtrf: "fk6fouc",
Budl1dq: "f12nh0o2",
Brf1p80: "f1869bpl",
fsow6f: [
"f1o700av",
"fes3tcz"
],
a9b677: "fly5x3f",
Brovlpu: "ftqa4ok"
},
placeholder: {
sj55zd: "fxc4j92"
},
small: {
Bahqtrf: "fk6fouc",
Be2twd7: "fy9rknc",
Bhrd7zp: "figsok6",
Bg96gwp: "fwrc4pm",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: [
"fye6m5k",
"f3cq2dl"
]
},
medium: {
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: [
"f14ev680",
"f58uxzw"
]
},
large: {
i8kkvl: "f1rjii52",
Bahqtrf: "fk6fouc",
Be2twd7: "fod5ikn",
Bhrd7zp: "figsok6",
Bg96gwp: "faaz57k",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: [
"f139mn7i",
"f1v3q0m"
]
},
outline: {
De3pzq: "fxugw4r",
Bgfg5da: 0,
B9xav0g: "f1c1zstj",
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "fhz96rm"
},
outlineInteractive: {
Bgoe8wy: "fvcxoqz",
Bwzppfd: [
"f1ub3y4t",
"f1m52nbi"
],
oetu4i: "f1l4zc64",
gg5e9n: [
"f1m52nbi",
"f1ub3y4t"
],
B6oc9vd: "fvs00aa",
ak43y8: [
"f1assf6x",
"f4ruux4"
],
wmxk5l: "f1z0osm6",
B50zh58: [
"f4ruux4",
"f1assf6x"
],
Bvq3b66: "f1b473iu",
Brahy3i: [
"f381qr8",
"ft4skwv"
],
zoxjo1: "f1qzcrsd",
an54nd: [
"ft4skwv",
"f381qr8"
]
},
underline: {
De3pzq: "f1c21dwh",
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
Bgfg5da: "f9ez7ne",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "fokr779"
},
"filled-lighter": {
De3pzq: "fxugw4r",
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "fs2rfia"
},
"filled-darker": {
De3pzq: "f16xq7d1",
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "fs2rfia"
},
invalid: {
tvckwq: "fs4k3qj",
gk2u95: [
"fcee079",
"fmyw78r"
],
hhx65j: "f1fgmyf4",
Bxowmz0: [
"fmyw78r",
"fcee079"
]
},
invalidUnderline: {
hhx65j: "f1fgmyf4"
},
disabled: {
Bceei9c: "fdrzuqr",
De3pzq: "f1c21dwh",
g2u3we: "f1jj8ep1",
h3c5rm: [
"f15xbau",
"fy0fskl"
],
B9xav0g: "f4ikngz",
zhjwy3: [
"fy0fskl",
"f15xbau"
],
Bcq6wej: "f9dbb4x",
Jcjdmf: [
"f3qs60o",
"f5u9ap2"
],
sc4o1m: "fwd1oij",
Bosien3: [
"f5u9ap2",
"f3qs60o"
]
},
disabledText: {
sj55zd: "f1s2aq7o",
Bceei9c: "fdrzuqr"
},
hidden: {
mc9l5x: "fjseox"
}
}, {
d: [
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
".f1ewtqcl{box-sizing:border-box;}",
".ftuwxu6{display:inline-flex;}",
".f1exfvgq{min-width:250px;}",
".f10pi13n{position:relative;}",
".fmrv4ls{vertical-align:middle;}",
".f1gw3sf2::after{box-sizing:border-box;}",
".f13zj6fq::after{content:\"\";}",
".f1mdlcz9::after{position:absolute;}",
".f1a7op3::after{left:-1px;}",
".f1cjjd47::after{right:-1px;}",
".f1gboi2j::after{bottom:-1px;}",
".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}",
".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}",
".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}",
[
".f1mnjydx::after{border-bottom:var(--strokeWidthThick) solid var(--colorCompoundBrandStroke);}",
{
p: -1
}
],
".f13evtba::after{clip-path:inset(calc(100% - 2px) 0 0 0);}",
".f1yk9hq::after{transform:scaleX(0);}",
".fhwpy7i::after{transition-property:transform;}",
".f14ee0xe::after{transition-duration:var(--durationUltraFast);}",
".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}",
".f1hg901r{box-shadow:var(--shadow16);}",
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
".fmmk62d{max-height:80vh;}",
".fjseox{display:none;}",
".f19g0ac{z-index:1;}",
".f122n59{align-items:center;}",
".f1c21dwh{background-color:var(--colorTransparentBackground);}",
[
".f3bhgqh{border:none;}",
{
p: -2
}
],
".f19n0e5{color:var(--colorNeutralForeground1);}",
".f14mj54c{column-gap:var(--spacingHorizontalXXS);}",
".f1k6fduh{cursor:pointer;}",
".f13qh94s{display:grid;}",
".fk6fouc{font-family:var(--fontFamilyBase);}",
".f12nh0o2{grid-template-columns:[content] 1fr [icon] auto [end];}",
".f1869bpl{justify-content:space-between;}",
".f1o700av{text-align:left;}",
".fes3tcz{text-align:right;}",
".fly5x3f{width:100%;}",
".fxc4j92{color:var(--colorNeutralForeground4);}",
".fy9rknc{font-size:var(--fontSizeBase200);}",
".figsok6{font-weight:var(--fontWeightRegular);}",
".fwrc4pm{line-height:var(--lineHeightBase200);}",
[
".fye6m5k{padding:3px var(--spacingHorizontalSNudge) 3px calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}",
{
p: -1
}
],
[
".f3cq2dl{padding:3px calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS)) 3px var(--spacingHorizontalSNudge);}",
{
p: -1
}
],
".fkhj508{font-size:var(--fontSizeBase300);}",
".f1i3iumi{line-height:var(--lineHeightBase300);}",
[
".f14ev680{padding:5px var(--spacingHorizontalMNudge) 5px calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}",
{
p: -1
}
],
[
".f58uxzw{padding:5px calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS)) 5px var(--spacingHorizontalMNudge);}",
{
p: -1
}
],
".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}",
".fod5ikn{font-size:var(--fontSizeBase400);}",
".faaz57k{line-height:var(--lineHeightBase400);}",
[
".f139mn7i{padding:7px var(--spacingHorizontalM) 7px calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}",
{
p: -1
}
],
[
".f1v3q0m{padding:7px calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge)) 7px var(--spacingHorizontalM);}",
{
p: -1
}
],
".fxugw4r{background-color:var(--colorNeutralBackground1);}",
[
".fhz96rm{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);}",
{
p: -2
}
],
".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}",
[
".f9ez7ne{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}",
{
p: -1
}
],
[
".fokr779{border-radius:0;}",
{
p: -1
}
],
[
".fs2rfia{border:var(--strokeWidthThin) solid transparent;}",
{
p: -2
}
],
".f16xq7d1{background-color:var(--colorNeutralBackground3);}",
[
".fs2rfia{border:var(--strokeWidthThin) solid transparent;}",
{
p: -2
}
],
".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}",
".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}",
".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}",
".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}",
".fdrzuqr{cursor:not-allowed;}",
".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}",
".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}",
".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}",
".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}",
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"
],
w: [
".f14a1fxs:focus-within{outline-width:2px;}",
".f3e99gv:focus-within{outline-style:solid;}",
".fhljsf7:focus-within{outline-color:transparent;}",
".fjw5xc1:focus-within::after{transform:scaleX(1);}",
".f1xdyd5c:focus-within::after{transition-property:transform;}",
".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}",
".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}",
".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}",
".f1b473iu:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}",
".f381qr8:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}",
".ft4skwv:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}",
".f1qzcrsd:focus-within{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"
],
m: [
[
"@media screen and (prefers-reduced-motion: reduce){.fsrmcvb::after{transition-duration:0.01ms;}}",
{
m: "screen and (prefers-reduced-motion: reduce)"
}
],
[
"@media screen and (prefers-reduced-motion: reduce){.f1t3k7v9::after{transition-delay:0.01ms;}}",
{
m: "screen and (prefers-reduced-motion: reduce)"
}
],
[
"@media screen and (prefers-reduced-motion: reduce){.fx04xgm:focus-within::after{transition-duration:0.01ms;}}",
{
m: "screen and (prefers-reduced-motion: reduce)"
}
],
[
"@media screen and (prefers-reduced-motion: reduce){.f1c7in40:focus-within::after{transition-delay:0.01ms;}}",
{
m: "screen and (prefers-reduced-motion: reduce)"
}
],
[
"@media (forced-colors: active){.f9dbb4x{border-top-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f3qs60o{border-right-color:GrayText;}.f5u9ap2{border-left-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fwd1oij{border-bottom-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
]
],
t: [
"@supports selector(:has(*)){.f18qfb8s:has(.fui-Dropdown__clearButton:focus)::after{border-bottom-color:initial;}}",
"@supports selector(:has(*)){.f1m082s7:has(.fui-Dropdown__clearButton:focus)::after{transform:scaleX(0);}}"
],
f: [
".ftqa4ok:focus{outline-style:none;}"
],
h: [
".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}",
".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}",
".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}",
".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}"
],
a: [
".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}",
".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}",
".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}",
".f1z0osm6:active{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"
]
});
const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
icon: {
B7ck84d: "f1ewtqcl",
sj55zd: "fxkbij4",
mc9l5x: "ftgm304",
Be2twd7: "f1pp30po",
Br312pm: "f12w6cgp",
Bw0ie65: "f8bv1bt",
Bo70h7d: "fvc9v3g"
},
small: {
Be2twd7: "f4ybsrx",
Frg6f3: [
"f1h9en5y",
"f1xk557c"
]
},
medium: {
Be2twd7: "fe5j1ua",
Frg6f3: [
"f1h9en5y",
"f1xk557c"
]
},
large: {
Be2twd7: "f1rt2boy",
Frg6f3: [
"f1t5qyk5",
"f1ikr372"
]
},
disabled: {
sj55zd: "f1s2aq7o"
}
}, {
d: [
".f1ewtqcl{box-sizing:border-box;}",
".fxkbij4{color:var(--colorNeutralStrokeAccessible);}",
".ftgm304{display:block;}",
".f1pp30po{font-size:var(--fontSizeBase500);}",
".f12w6cgp{grid-column-start:icon;}",
".f8bv1bt{grid-column-end:end;}",
".fvc9v3g svg{display:block;}",
".f4ybsrx{font-size:16px;}",
".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}",
".f1xk557c{margin-right:var(--spacingHorizontalXXS);}",
".fe5j1ua{font-size:20px;}",
".f1rt2boy{font-size:24px;}",
".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}",
".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}",
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"
]
});
const useBaseClearButtonStyle = /*#__PURE__*/ (0, _react.__resetStyles)("rticfuj", "r1vp6jef", {
r: [
".rticfuj{align-self:center;background-color:var(--colorTransparentBackground);border:none;cursor:pointer;height:fit-content;margin:0;margin-right:var(--spacingHorizontalMNudge);padding:0;position:relative;}",
".rticfuj:focus{outline-style:none;}",
".rticfuj:focus-visible{outline-style:none;}",
".rticfuj[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
".rticfuj[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
".r1vp6jef{align-self:center;background-color:var(--colorTransparentBackground);border:none;cursor:pointer;height:fit-content;margin:0;margin-left:var(--spacingHorizontalMNudge);padding:0;position:relative;}",
".r1vp6jef:focus{outline-style:none;}",
".r1vp6jef:focus-visible{outline-style:none;}",
".r1vp6jef[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
".r1vp6jef[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
],
s: [
"@media (forced-colors: active){.rticfuj[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}",
"@media (forced-colors: active){.r1vp6jef[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"
]
});
const useDropdownStyles_unstable = (state)=>{
'use no memo';
const { appearance, open, placeholderVisible, showClearButton, size } = state;
const invalid = `${state.button['aria-invalid']}` === 'true';
const disabled = state.button.disabled;
const styles = useStyles();
const iconStyles = useIconStyles();
const clearButtonStyle = useBaseClearButtonStyle();
state.root.className = (0, _react.mergeClasses)(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
state.button.className = (0, _react.mergeClasses)(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);
if (state.listbox) {
state.listbox.className = (0, _react.mergeClasses)(dropdownClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);
}
if (state.expandIcon) {
state.expandIcon.className = (0, _react.mergeClasses)(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearButton && styles.hidden, state.expandIcon.className);
}
if (state.clearButton) {
state.clearButton.className = (0, _react.mergeClasses)(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,260 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
dropdownClassNames: function() {
return dropdownClassNames;
},
useDropdownStyles_unstable: function() {
return useDropdownStyles_unstable;
}
});
const _reacttabster = require("@fluentui/react-tabster");
const _reacttheme = require("@fluentui/react-theme");
const _react = require("@griffel/react");
const _internalTokens = require("../../utils/internalTokens");
const dropdownClassNames = {
root: 'fui-Dropdown',
button: 'fui-Dropdown__button',
clearButton: 'fui-Dropdown__clearButton',
expandIcon: 'fui-Dropdown__expandIcon',
listbox: 'fui-Dropdown__listbox'
};
/**
* Styles for Dropdown
*/ const useStyles = (0, _react.makeStyles)({
root: {
borderRadius: _reacttheme.tokens.borderRadiusMedium,
boxSizing: 'border-box',
display: 'inline-flex',
minWidth: '250px',
position: 'relative',
verticalAlign: 'middle',
// windows high contrast mode focus indicator
':focus-within': {
outlineWidth: '2px',
outlineStyle: 'solid',
outlineColor: 'transparent'
},
// bottom focus border, shared with Input, Select, and SpinButton
'::after': {
boxSizing: 'border-box',
content: '""',
position: 'absolute',
left: '-1px',
bottom: '-1px',
right: '-1px',
height: `max(${_reacttheme.tokens.strokeWidthThick}, ${_reacttheme.tokens.borderRadiusMedium})`,
borderBottomLeftRadius: _reacttheme.tokens.borderRadiusMedium,
borderBottomRightRadius: _reacttheme.tokens.borderRadiusMedium,
borderBottom: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorCompoundBrandStroke}`,
clipPath: 'inset(calc(100% - 2px) 0 0 0)',
transform: 'scaleX(0)',
transitionProperty: 'transform',
transitionDuration: _reacttheme.tokens.durationUltraFast,
transitionDelay: _reacttheme.tokens.curveAccelerateMid,
'@media screen and (prefers-reduced-motion: reduce)': {
transitionDuration: '0.01ms',
transitionDelay: '0.01ms'
}
},
':focus-within::after': {
transform: 'scaleX(1)',
transitionProperty: 'transform',
transitionDuration: _reacttheme.tokens.durationNormal,
transitionDelay: _reacttheme.tokens.curveDecelerateMid,
'@media screen and (prefers-reduced-motion: reduce)': {
transitionDuration: '0.01ms',
transitionDelay: '0.01ms'
}
},
':focus-within:active::after': {
borderBottomColor: _reacttheme.tokens.colorCompoundBrandStrokePressed
},
'@supports selector(:has(*))': {
[`:has(.${dropdownClassNames.clearButton}:focus)::after`]: {
borderBottomColor: 'initial',
transform: 'scaleX(0)'
}
}
},
listbox: {
boxSizing: 'border-box',
boxShadow: `${_reacttheme.tokens.shadow16}`,
borderRadius: _reacttheme.tokens.borderRadiusMedium,
maxHeight: '80vh'
},
listboxCollapsed: {
display: 'none'
},
// When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.
// This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.
inlineListbox: {
zIndex: 1
},
button: {
alignItems: 'center',
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
border: 'none',
boxSizing: 'border-box',
color: _reacttheme.tokens.colorNeutralForeground1,
columnGap: _reacttheme.tokens.spacingHorizontalXXS,
cursor: 'pointer',
display: 'grid',
fontFamily: _reacttheme.tokens.fontFamilyBase,
gridTemplateColumns: '[content] 1fr [icon] auto [end]',
justifyContent: 'space-between',
textAlign: 'left',
width: '100%',
'&:focus': {
outlineStyle: 'none'
}
},
placeholder: {
color: _reacttheme.tokens.colorNeutralForeground4
},
// size variants
small: {
..._reacttheme.typographyStyles.caption1,
padding: `3px ${_reacttheme.tokens.spacingHorizontalSNudge} 3px ${`calc(${_reacttheme.tokens.spacingHorizontalSNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`}`
},
medium: {
..._reacttheme.typographyStyles.body1,
padding: `5px ${_reacttheme.tokens.spacingHorizontalMNudge} 5px ${`calc(${_reacttheme.tokens.spacingHorizontalMNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`}`
},
large: {
columnGap: _reacttheme.tokens.spacingHorizontalSNudge,
..._reacttheme.typographyStyles.body2,
padding: `7px ${_reacttheme.tokens.spacingHorizontalM} 7px ${`calc(${_reacttheme.tokens.spacingHorizontalM} + ${_reacttheme.tokens.spacingHorizontalSNudge})`}`
},
// appearance variants
outline: {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke1}`,
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible
},
outlineInteractive: {
'&:hover': {
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Hover),
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessibleHover
},
'&:active': {
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed),
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
},
'&:focus-within': {
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed),
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
}
},
underline: {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
borderBottom: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStrokeAccessible}`,
borderRadius: '0'
},
'filled-lighter': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
border: `${_reacttheme.tokens.strokeWidthThin} solid transparent`
},
'filled-darker': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground3,
border: `${_reacttheme.tokens.strokeWidthThin} solid transparent`
},
invalid: {
':not(:focus-within),:hover:not(:focus-within)': {
..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder2)
}
},
invalidUnderline: {
':not(:focus-within),:hover:not(:focus-within)': {
borderBottomColor: _reacttheme.tokens.colorPaletteRedBorder2
}
},
disabled: {
cursor: 'not-allowed',
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
'@media (forced-colors: active)': {
..._react.shorthands.borderColor('GrayText')
}
},
disabledText: {
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
cursor: 'not-allowed'
},
hidden: {
display: 'none'
}
});
const useIconStyles = (0, _react.makeStyles)({
icon: {
boxSizing: 'border-box',
color: _reacttheme.tokens.colorNeutralStrokeAccessible,
display: 'block',
fontSize: _reacttheme.tokens.fontSizeBase500,
gridColumnStart: 'icon',
gridColumnEnd: 'end',
// the SVG must have display: block for accurate positioning
// otherwise an extra inline space is inserted after the svg element
'& svg': {
display: 'block'
}
},
// icon size variants
small: {
fontSize: _internalTokens.iconSizes.small,
marginLeft: _reacttheme.tokens.spacingHorizontalXXS
},
medium: {
fontSize: _internalTokens.iconSizes.medium,
marginLeft: _reacttheme.tokens.spacingHorizontalXXS
},
large: {
fontSize: _internalTokens.iconSizes.large,
marginLeft: _reacttheme.tokens.spacingHorizontalSNudge
},
disabled: {
color: _reacttheme.tokens.colorNeutralForegroundDisabled
}
});
const useBaseClearButtonStyle = (0, _react.makeResetStyles)({
alignSelf: 'center',
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
border: 'none',
cursor: 'pointer',
height: 'fit-content',
margin: 0,
marginRight: _reacttheme.tokens.spacingHorizontalMNudge,
padding: 0,
position: 'relative',
...(0, _reacttabster.createFocusOutlineStyle)()
});
const useDropdownStyles_unstable = (state)=>{
'use no memo';
const { appearance, open, placeholderVisible, showClearButton, size } = state;
const invalid = `${state.button['aria-invalid']}` === 'true';
const disabled = state.button.disabled;
const styles = useStyles();
const iconStyles = useIconStyles();
const clearButtonStyle = useBaseClearButtonStyle();
state.root.className = (0, _react.mergeClasses)(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
state.button.className = (0, _react.mergeClasses)(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);
if (state.listbox) {
state.listbox.className = (0, _react.mergeClasses)(dropdownClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);
}
if (state.expandIcon) {
state.expandIcon.className = (0, _react.mergeClasses)(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearButton && styles.hidden, state.expandIcon.className);
}
if (state.clearButton) {
state.clearButton.className = (0, _react.mergeClasses)(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Listbox", {
enumerable: true,
get: function() {
return Listbox;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useListbox = require("./useListbox");
const _renderListbox = require("./renderListbox");
const _useListboxStylesstyles = require("./useListboxStyles.styles");
const _useListboxContextValues = require("../../contexts/useListboxContextValues");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Listbox = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useListbox.useListbox_unstable)(props, ref);
const contextValues = (0, _useListboxContextValues.useListboxContextValues)(state);
(0, _useListboxStylesstyles.useListboxStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useListboxStyles_unstable')(state);
return (0, _renderListbox.renderListbox_unstable)(state, contextValues);
});
Listbox.displayName = 'Listbox';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Listbox/Listbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles.styles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n const state = useListbox_unstable(props, ref);\n const contextValues = useListboxContextValues(state);\n\n useListboxStyles_unstable(state);\n\n useCustomStyleHook_unstable('useListboxStyles_unstable')(state);\n\n return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"],"names":["React","useListbox_unstable","renderListbox_unstable","useListboxStyles_unstable","useListboxContextValues","useCustomStyleHook_unstable","Listbox","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;4BACK,eAAe;+BACZ,kBAAkB;wCACf,4BAA4B;yCAE9B,yCAAyC;qCAErC,kCAAkC;AAKvE,MAAMM,UAAAA,WAAAA,GAA6CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,YAAQT,+BAAAA,EAAoBO,OAAOC;IACzC,MAAME,oBAAgBP,gDAAAA,EAAwBM;QAE9CP,iDAAAA,EAA0BO;QAE1BL,gDAAAA,EAA4B,6BAA6BK;IAEzD,WAAOR,qCAAAA,EAAuBQ,OAAOC;AACvC,GAAG;AAEHL,QAAQM,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Listbox/Listbox.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n ActiveDescendantChangeEvent,\n ActiveDescendantContextValue,\n ActiveDescendantImperativeRef,\n} from '@fluentui/react-aria';\nimport { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';\nimport type { ListboxContextValue } from '../../contexts/ListboxContext';\n\nexport type ListboxSlots = {\n /** The root slot, a `<div>` with `role=\"listbox\"` */\n root: Slot<'div'>;\n};\n\n/**\n * Listbox Props\n */\nexport type ListboxProps = ComponentProps<ListboxSlots> &\n SelectionProps & {\n /**\n * Disable auto-focusing on the first item when mounting.\n *\n * @default false\n */\n disableAutoFocus?: boolean;\n };\n\n/**\n * State used in rendering Listbox\n */\nexport type ListboxState = ComponentState<ListboxSlots> &\n OptionCollectionState &\n Pick<SelectionProps, 'multiselect'> &\n SelectionState & {\n /**\n * @deprecated - no longer used internally\n * @see activeDescendantController.active()\n */\n activeOption?: OptionValue;\n\n /**\n * @deprecated - no longer used internally\n */\n focusVisible: boolean;\n\n /**\n * @deprecated - no longer used internally\n * @see activeDescendantController.focus(id)\n */\n setActiveOption(option?: OptionValue): void;\n\n // Whether the Listbox renders within a Combobox, Dropdown, or picker, or as a standalone widget\n standalone: boolean;\n\n selectOption(event: SelectionEvents, option: OptionValue): void;\n\n activeDescendantController: ActiveDescendantImperativeRef;\n\n onActiveDescendantChange?: (event: ActiveDescendantChangeEvent) => void;\n };\n\nexport type ListboxContextValues = {\n listbox: ListboxContextValue;\n activeDescendant: ActiveDescendantContextValue;\n};\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Listbox: function() {
return _Listbox.Listbox;
},
listboxClassNames: function() {
return _useListboxStylesstyles.listboxClassNames;
},
renderListbox_unstable: function() {
return _renderListbox.renderListbox_unstable;
},
useListboxStyles_unstable: function() {
return _useListboxStylesstyles.useListboxStyles_unstable;
},
useListbox_unstable: function() {
return _useListbox.useListbox_unstable;
}
});
const _Listbox = require("./Listbox");
const _renderListbox = require("./renderListbox");
const _useListbox = require("./useListbox");
const _useListboxStylesstyles = require("./useListboxStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Listbox/index.ts"],"sourcesContent":["export { Listbox } from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox.types';\nexport { renderListbox_unstable } from './renderListbox';\nexport { useListbox_unstable } from './useListbox';\nexport { listboxClassNames, useListboxStyles_unstable } from './useListboxStyles.styles';\n"],"names":["Listbox","renderListbox_unstable","useListbox_unstable","listboxClassNames","useListboxStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAIPG,yCAAiB;;;eAFjBF,qCAAsB;;;eAEHG,iDAAyB;;;eAD5CF,+BAAmB;;;yBAHJ,YAAY;+BAEG,kBAAkB;4BACrB,eAAe;wCACU,4BAA4B"}

View File

@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderListbox_unstable", {
enumerable: true,
get: function() {
return renderListbox_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _reactaria = require("@fluentui/react-aria");
const _ListboxContext = require("../../contexts/ListboxContext");
const renderListbox_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactaria.ActiveDescendantContextProvider, {
value: contextValues.activeDescendant,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ListboxContext.ListboxContext.Provider, {
value: contextValues.listbox,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Listbox/renderListbox.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 { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues): JSXElement => {\n assertSlots<ListboxSlots>(state);\n\n return (\n <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n <ListboxContext.Provider value={contextValues.listbox}>\n <state.root />\n </ListboxContext.Provider>\n </ActiveDescendantContextProvider>\n );\n};\n"],"names":["assertSlots","ActiveDescendantContextProvider","ListboxContext","renderListbox_unstable","state","contextValues","value","activeDescendant","Provider","listbox","root"],"mappings":";;;;+BAYaG;;;;;;4BAXb,gDAAiD;gCAErB,4BAA4B;2BAER,uBAAuB;gCAExC,gCAAgC;AAKxD,+BAA+B,CAACC,OAAqBC;QAC1DL,2BAAAA,EAA0BI;IAE1B,OAAA,WAAA,OACE,eAAA,EAACH,0CAAAA,EAAAA;QAAgCK,OAAOD,cAAcE,gBAAgB;kBACpE,WAAA,OAAA,eAAA,EAACL,8BAAAA,CAAeM,QAAQ,EAAA;YAACF,OAAOD,cAAcI,OAAO;sBACnD,WAAA,OAAA,eAAA,EAACL,MAAMM,IAAI,EAAA,CAAA;;;AAInB,EAAE"}

View File

@@ -0,0 +1,199 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useListbox_unstable", {
enumerable: true,
get: function() {
return useListbox_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reactcontextselector = require("@fluentui/react-context-selector");
const _reactaria = require("@fluentui/react-aria");
const _dropdownKeyActions = require("../../utils/dropdownKeyActions");
const _useOptionCollection = require("../../utils/useOptionCollection");
const _useSelection = require("../../utils/useSelection");
const _useOptionStylesstyles = require("../Option/useOptionStyles.styles");
const _ListboxContext = require("../../contexts/ListboxContext");
const _reacttabster = require("@fluentui/react-tabster");
// eslint-disable-next-line @typescript-eslint/naming-convention
const UNSAFE_noLongerUsed = {
activeOption: undefined,
focusVisible: false,
setActiveOption: ()=>null
};
const useListbox_unstable = (props, ref)=>{
'use no memo';
const { multiselect, disableAutoFocus = false } = props;
const optionCollection = (0, _useOptionCollection.useOptionCollection)();
const { listboxRef: activeDescendantListboxRef, activeParentRef, controller } = (0, _reactaria.useActiveDescendant)({
matchOption: (el)=>el.classList.contains(_useOptionStylesstyles.optionClassNames.root)
});
const hasListboxContext = (0, _reactcontextselector.useHasParentContext)(_ListboxContext.ListboxContext);
const onActiveDescendantChange = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.onActiveDescendantChange);
const contextGetOptionById = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.getOptionById);
const contextGetOptionsMatchingValue = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.getOptionsMatchingValue);
const getOptionById = hasListboxContext ? contextGetOptionById : optionCollection.getOptionById;
const getOptionsMatchingValue = hasListboxContext ? contextGetOptionsMatchingValue : optionCollection.getOptionsMatchingValue;
const listenerRef = _react.useMemo(()=>{
let element = null;
const listener = (untypedEvent)=>{
// Typescript doesn't support custom event types on handler
const event = untypedEvent;
onActiveDescendantChange === null || onActiveDescendantChange === void 0 ? void 0 : onActiveDescendantChange(event);
};
return (el)=>{
if (!el) {
element === null || element === void 0 ? void 0 : element.removeEventListener('activedescendantchange', listener);
return;
}
element = el;
element.addEventListener('activedescendantchange', listener);
};
}, [
onActiveDescendantChange
]);
const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = _react.useState(false);
(0, _reacttabster.useOnKeyboardNavigationChange)(setIsNavigatingWithKeyboard);
const activeDescendantContext = (0, _reactaria.useActiveDescendantContext)();
const hasParentActiveDescendantContext = (0, _reactaria.useHasParentActiveDescendantContext)();
const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;
const { clearSelection, selectedOptions, selectOption } = (0, _useSelection.useSelection)(props);
const onKeyDown = (event)=>{
const action = (0, _dropdownKeyActions.getDropdownActionFromKey)(event, {
open: true
});
const activeOptionId = activeDescendantController.active();
const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;
switch(action){
case 'First':
case 'Last':
case 'Next':
case 'Previous':
case 'PageDown':
case 'PageUp':
case 'CloseSelect':
case 'Select':
event.preventDefault();
break;
}
switch(action){
case 'Next':
if (activeOption) {
activeDescendantController.next();
} else {
activeDescendantController.first();
}
break;
case 'Previous':
if (activeOption) {
activeDescendantController.prev();
} else {
activeDescendantController.first();
}
break;
case 'PageUp':
case 'First':
activeDescendantController.first();
break;
case 'PageDown':
case 'Last':
activeDescendantController.last();
break;
case 'Select':
case 'CloseSelect':
activeOption && selectOption(event, activeOption);
break;
}
};
// get state from parent combobox, if it exists
const contextSelectedOptions = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.selectedOptions);
const contextSelectOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.selectOption);
// without a parent combobox context, provide values directly from Listbox
const optionContextValues = hasListboxContext ? {
selectedOptions: contextSelectedOptions,
selectOption: contextSelectOption,
...UNSAFE_noLongerUsed
} : {
selectedOptions,
selectOption,
...UNSAFE_noLongerUsed
};
_react.useEffect(()=>{
// if the listbox has a parent context, that parent context should handle the activedescendant
if (hasParentActiveDescendantContext) {
return;
}
// disable focus-visible attributes until focus is received
activeDescendantController.hideFocusVisibleAttributes();
if (!disableAutoFocus) {
// if it is single-select and there is a selected option, start at the selected option
if (!multiselect && optionContextValues.selectedOptions.length > 0) {
const selectedOption = getOptionsMatchingValue((v)=>v === optionContextValues.selectedOptions[0]).pop();
if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) {
activeDescendantController.focus(selectedOption.id);
}
} else {
activeDescendantController.first();
}
}
return ()=>{
activeDescendantController.blur();
};
// this should only be run once in the lifecycle of the Listbox
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const onFocus = _react.useCallback(()=>{
if (hasParentActiveDescendantContext) {
return;
}
activeDescendantController.showFocusVisibleAttributes();
if (isNavigatingWithKeyboard) {
activeDescendantController.scrollActiveIntoView();
}
}, [
activeDescendantController,
hasParentActiveDescendantContext,
isNavigatingWithKeyboard
]);
const onBlur = _react.useCallback(()=>{
if (hasParentActiveDescendantContext) {
return;
}
activeDescendantController.hideFocusVisibleAttributes();
}, [
activeDescendantController,
hasParentActiveDescendantContext
]);
const state = {
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: (0, _reactutilities.useMergedRefs)(ref, activeParentRef, activeDescendantListboxRef, listenerRef),
role: multiselect ? 'menu' : 'listbox',
tabIndex: 0,
...props
}), {
elementType: 'div'
}),
standalone: !hasListboxContext,
multiselect,
clearSelection,
activeDescendantController,
onActiveDescendantChange,
...optionCollection,
...optionContextValues
};
state.root.onKeyDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.root.onKeyDown, onKeyDown));
state.root.onFocus = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.root.onFocus, onFocus));
state.root.onBlur = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.root.onBlur, onBlur));
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,73 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
listboxClassNames: function() {
return listboxClassNames;
},
useListboxStyles_unstable: function() {
return useListboxStyles_unstable;
}
});
const _react = require("@griffel/react");
const listboxClassNames = {
root: 'fui-Listbox'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
De3pzq: "fxugw4r",
B7ck84d: "f1ewtqcl",
mc9l5x: "f22iagw",
Beiy3e4: "f1vx9l62",
Bf4jedk: "f3hsy1e",
Bmxbyg5: "f5zp4f",
Bw0xxkn: 0,
oeaueh: 0,
Bpd4iqm: 0,
Befb4lg: "f1iepc6i",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1t35pdg",
Belr9w4: "fiut8dr"
}
}, {
d: [
".fxugw4r{background-color:var(--colorNeutralBackground1);}",
".f1ewtqcl{box-sizing:border-box;}",
".f22iagw{display:flex;}",
".f1vx9l62{flex-direction:column;}",
".f3hsy1e{min-width:160px;}",
".f5zp4f{overflow-y:auto;}",
[
".f1iepc6i{outline:1px solid var(--colorTransparentStroke);}",
{
p: -1
}
],
[
".f1t35pdg{padding:var(--spacingHorizontalXS);}",
{
p: -1
}
],
".fiut8dr{row-gap:var(--spacingHorizontalXXS);}"
]
});
const useListboxStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(listboxClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useListboxStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const listboxClassNames = {\n root: 'fui-Listbox'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n minWidth: '160px',\n overflowY: 'auto',\n outline: `1px solid ${tokens.colorTransparentStroke}`,\n padding: tokens.spacingHorizontalXS,\n rowGap: tokens.spacingHorizontalXXS\n }\n});\n/**\n * Apply styling to the Listbox slots based on the state\n */ export const useListboxStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["tokens","__styles","mergeClasses","listboxClassNames","root","useStyles","De3pzq","B7ck84d","mc9l5x","Beiy3e4","Bf4jedk","Bmxbyg5","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Belr9w4","d","p","useListboxStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,iBAAiB;;;6BAoBY;;;;uBArBD,gBAAgB;AAClD,0BAA0B;IAC7BC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAYrB,CAAC;AAGS,MAAMC,6BAA6BC,KAAK,IAAG;IAClD,aAAa;IACb,MAAMC,MAAM,GAAGrB,SAAS,CAAC,CAAC;IAC1BoB,KAAK,CAACrB,IAAI,CAACuB,SAAS,OAAGzB,mBAAY,EAACC,iBAAiB,CAACC,IAAI,EAAEsB,MAAM,CAACtB,IAAI,EAAEqB,KAAK,CAACrB,IAAI,CAACuB,SAAS,CAAC;IAC9F,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,45 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
listboxClassNames: function() {
return listboxClassNames;
},
useListboxStyles_unstable: function() {
return useListboxStyles_unstable;
}
});
const _reacttheme = require("@fluentui/react-theme");
const _react = require("@griffel/react");
const listboxClassNames = {
root: 'fui-Listbox'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
root: {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'column',
minWidth: '160px',
overflowY: 'auto',
outline: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`,
padding: _reacttheme.tokens.spacingHorizontalXS,
rowGap: _reacttheme.tokens.spacingHorizontalXXS
}
});
const useListboxStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(listboxClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Listbox/useListboxStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { ListboxSlots, ListboxState } from './Listbox.types';\n\nexport const listboxClassNames: SlotClassNames<ListboxSlots> = {\n root: 'fui-Listbox',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n minWidth: '160px',\n overflowY: 'auto',\n outline: `1px solid ${tokens.colorTransparentStroke}`,\n padding: tokens.spacingHorizontalXS,\n rowGap: tokens.spacingHorizontalXXS,\n },\n});\n\n/**\n * Apply styling to the Listbox slots based on the state\n */\nexport const useListboxStyles_unstable = (state: ListboxState): ListboxState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","listboxClassNames","root","useStyles","backgroundColor","colorNeutralBackground1","boxSizing","display","flexDirection","minWidth","overflowY","outline","colorTransparentStroke","padding","spacingHorizontalXS","rowGap","spacingHorizontalXXS","useListboxStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,iBAAAA;;;IAwBAgB,yBAAAA;;;;4BA7BU,wBAAwB;uBAEN,iBAAiB;AAGnD,0BAAwD;IAC7Df,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,iBAAiBN,kBAAAA,CAAOO,uBAAuB;QAC/CC,WAAW;QACXC,SAAS;QACTC,eAAe;QACfC,UAAU;QACVC,WAAW;QACXC,SAAS,CAAC,UAAU,EAAEb,kBAAAA,CAAOc,sBAAsB,EAAE;QACrDC,SAASf,kBAAAA,CAAOgB,mBAAmB;QACnCC,QAAQjB,kBAAAA,CAAOkB,oBAAoB;IACrC;AACF;AAKO,kCAAkC,CAACE;IACxC;IAEA,MAAMC,SAAShB;IACfe,MAAMhB,IAAI,CAACkB,SAAS,OAAGpB,mBAAAA,EAAaC,kBAAkBC,IAAI,EAAEiB,OAAOjB,IAAI,EAAEgB,MAAMhB,IAAI,CAACkB,SAAS;IAE7F,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Option", {
enumerable: true,
get: function() {
return Option;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useOption = require("./useOption");
const _renderOption = require("./renderOption");
const _useOptionStylesstyles = require("./useOptionStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Option = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useOption.useOption_unstable)(props, ref);
(0, _useOptionStylesstyles.useOptionStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useOptionStyles_unstable')(state);
return (0, _renderOption.renderOption_unstable)(state);
});
Option.displayName = 'Option';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Option/Option.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useOption_unstable } from './useOption';\nimport { renderOption_unstable } from './renderOption';\nimport { useOptionStyles_unstable } from './useOptionStyles.styles';\nimport type { OptionProps } from './Option.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Option component: a styled child option of a Combobox\n */\nexport const Option: ForwardRefComponent<OptionProps> = React.forwardRef((props, ref) => {\n const state = useOption_unstable(props, ref);\n\n useOptionStyles_unstable(state);\n\n useCustomStyleHook_unstable('useOptionStyles_unstable')(state);\n\n return renderOption_unstable(state);\n});\n\nOption.displayName = 'Option';\n"],"names":["React","useOption_unstable","renderOption_unstable","useOptionStyles_unstable","useCustomStyleHook_unstable","Option","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;2BACI,cAAc;8BACX,iBAAiB;uCACd,2BAA2B;qCAGxB,kCAAkC;AAKvE,MAAMK,SAAAA,WAAAA,GAA2CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,YAAQR,6BAAAA,EAAmBM,OAAOC;QAExCL,+CAAAA,EAAyBM;QAEzBL,gDAAAA,EAA4B,4BAA4BK;IAExD,WAAOP,mCAAAA,EAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Option/Option.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type OptionSlots = {\n /** The root option slot, with role=\"option\" */\n root: NonNullable<Slot<'div'>>;\n\n /** The check icon that is visible for selected options */\n checkIcon: Slot<'span'>;\n};\n\n/**\n * Option Props\n */\nexport type OptionProps = ComponentProps<Partial<OptionSlots>> & {\n /**\n * Sets an option to the `disabled` state.\n * Disabled options cannot be selected, but are still keyboard navigable\n */\n disabled?: boolean;\n\n /**\n * Defines a unique identifier for the option.\n * Use this to control selectedOptions, or to get the option value in the onOptionSelect callback.\n * Defaults to `text` if not provided.\n */\n value?: string;\n} & (\n | {\n /**\n * An optional override the string value of the Option's display text,\n * defaulting to the Option's child content.\n * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n */\n text?: string;\n children: string;\n }\n | {\n /**\n * The string value of the Option's display text when the Option's children are not a string.\n * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n */\n text: string;\n children?: React.ReactNode;\n }\n );\n\n/**\n * State used in rendering Option\n */\nexport type OptionState = ComponentState<OptionSlots> &\n Pick<OptionProps, 'disabled'> & {\n /**\n * @deprecated - no longer used internally\n */\n active: boolean;\n\n /**\n * @deprecated - no longer used internally\n */\n focusVisible: boolean;\n\n /** If true, the option is part of a multiselect combobox or listbox */\n multiselect?: boolean;\n\n /** If true, the option is selected */\n selected: boolean;\n };\n"],"names":["React"],"mappings":";;;;;iEACuB,QAAQ"}

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Option: function() {
return _Option.Option;
},
optionClassNames: function() {
return _useOptionStylesstyles.optionClassNames;
},
renderOption_unstable: function() {
return _renderOption.renderOption_unstable;
},
useOptionBase_unstable: function() {
return _useOption.useOptionBase_unstable;
},
useOptionStyles_unstable: function() {
return _useOptionStylesstyles.useOptionStyles_unstable;
},
useOption_unstable: function() {
return _useOption.useOption_unstable;
}
});
const _Option = require("./Option");
const _renderOption = require("./renderOption");
const _useOption = require("./useOption");
const _useOptionStylesstyles = require("./useOptionStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Option/index.ts"],"sourcesContent":["export { Option } from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option.types';\nexport { renderOption_unstable } from './renderOption';\nexport { useOption_unstable, useOptionBase_unstable } from './useOption';\nexport { optionClassNames, useOptionStyles_unstable } from './useOptionStyles.styles';\n"],"names":["Option","renderOption_unstable","useOption_unstable","useOptionBase_unstable","optionClassNames","useOptionStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,cAAM;;;eAINI,uCAAgB;;;eAFhBH,mCAAqB;;;eACDE,iCAAsB;;;eACxBE,+CAAwB;;;eAD1CH,6BAAkB;;;wBAHJ,WAAW;8BAEI,iBAAiB;2BACI,cAAc;uCACd,2BAA2B"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Option/renderOption.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 { OptionState, OptionSlots } from './Option.types';\n\n/**\n * Render the final JSX of Option\n */\nexport const renderOption_unstable = (state: OptionState): JSXElement => {\n assertSlots<OptionSlots>(state);\n\n return (\n <state.root>\n {state.checkIcon && <state.checkIcon />}\n {state.root.children}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderOption_unstable","state","root","checkIcon","children"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,8BAA8B,CAACC;QACpCF,2BAAAA,EAAyBE;IAEzB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,SAAS,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,SAAS,EAAA,CAAA;YACnCF,MAAMC,IAAI,CAACE,QAAQ;;;AAG1B,EAAE"}

View File

@@ -0,0 +1,151 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useOptionBase_unstable: function() {
return useOptionBase_unstable;
},
useOption_unstable: function() {
return useOption_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reactaria = require("@fluentui/react-aria");
const _reacticons = require("@fluentui/react-icons");
const _ListboxContext = require("../../contexts/ListboxContext");
function getTextString(text, children) {
if (text !== undefined) {
return text;
}
let textString = '';
let hasNonStringChild = false;
_react.Children.forEach(children, (child)=>{
if (typeof child === 'string') {
textString += child;
} else {
hasNonStringChild = true;
}
});
// warn if an Option has non-string children and no text prop
if (hasNonStringChild) {
// eslint-disable-next-line no-console
console.warn('Provide a `text` prop to Option components when they contain non-string children.');
}
return textString;
}
const useOption_unstable = (props, ref)=>{
'use no memo';
const state = useOptionBase_unstable(props, ref);
// check icon
let CheckIcon = /*#__PURE__*/ _react.createElement(_reacticons.CheckmarkFilled, null);
if (state.multiselect) {
CheckIcon = state.selected ? /*#__PURE__*/ _react.createElement(_reacticons.Checkmark12Filled, null) : '';
}
if (state.checkIcon) {
var _state_checkIcon;
var _children;
(_children = (_state_checkIcon = state.checkIcon).children) !== null && _children !== void 0 ? _children : _state_checkIcon.children = CheckIcon;
}
return state;
};
const useOptionBase_unstable = (props, ref)=>{
const { children, disabled, text, value } = props;
const optionRef = _react.useRef(null);
const optionText = getTextString(text, children);
const optionValue = value !== null && value !== void 0 ? value : optionText;
// use the id if provided, otherwise use a generated id
const id = (0, _reactutilities.useId)('fluent-option', props.id);
// data used for context registration & events
const optionData = _react.useMemo(()=>({
id,
disabled,
text: optionText,
value: optionValue
}), [
id,
disabled,
optionText,
optionValue
]);
// context values
const { controller: activeDescendantController } = (0, _reactaria.useActiveDescendantContext)();
const multiselect = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.multiselect);
const registerOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.registerOption);
const selected = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>{
const selectedOptions = ctx.selectedOptions;
return optionValue !== undefined && selectedOptions.find((o)=>o === optionValue) !== undefined;
});
const selectOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.selectOption);
const onOptionClick = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.onOptionClick);
const onClick = (event)=>{
var _props_onClick;
if (disabled) {
event.preventDefault();
return;
}
activeDescendantController.focus(id);
// handle selection change
selectOption(event, optionData);
onOptionClick(event);
(_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
};
// register option data with context
_react.useEffect(()=>{
if (id && optionRef.current) {
return registerOption(optionData, optionRef.current);
}
}, [
id,
optionData,
registerOption
]);
const semanticProps = multiselect ? {
role: 'menuitemcheckbox',
'aria-checked': selected
} : {
role: 'option',
'aria-selected': selected
};
return {
components: {
root: 'div',
checkIcon: 'span'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: (0, _reactutilities.useMergedRefs)(ref, optionRef),
'aria-disabled': disabled ? 'true' : undefined,
id,
...semanticProps,
...props,
onClick
}), {
elementType: 'div'
}),
checkIcon: _reactutilities.slot.optional(props.checkIcon, {
renderByDefault: true,
defaultProps: {
'aria-hidden': 'true'
},
elementType: 'span'
}),
disabled,
multiselect,
selected,
// no longer used
focusVisible: false,
active: false
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,348 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
optionClassNames: function() {
return optionClassNames;
},
useOptionStyles_unstable: function() {
return useOptionStyles_unstable;
}
});
const _react = require("@griffel/react");
const optionClassNames = {
root: 'fui-Option',
checkIcon: 'fui-Option__checkIcon'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Bt984gj: "f122n59",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
sj55zd: "f19n0e5",
i8kkvl: "f1ufnopg",
Bceei9c: "f1k6fduh",
mc9l5x: "f22iagw",
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bg96gwp: "f1i3iumi",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "fm5eomj",
qhf8xq: "f10pi13n",
Jwef8y: "f1knas48",
Bi91k9c: "feu1g3u",
zqbkvg: "fo79ri9",
h82x05: [
"f1osiabc",
"f1e8le25"
],
cqj998: "f1yusjty",
j3hlsh: [
"f1e8le25",
"f1osiabc"
],
ecr2s2: "fb40n2d",
lj723h: "f1g4hkjv",
Btxx2vb: "f1lnr2zp",
sltcwy: [
"f1ogfk9z",
"f1g7j8ec"
],
dnwvvm: "fiuf46r",
Blyvkvs: [
"f1g7j8ec",
"f1ogfk9z"
]
},
active: {
Bowz1zl: "f11vrvdw",
oxogb1: "f17hxjb7",
Ix2sn8: "f1dha69c",
q7v32p: "f1lm7500",
B7cbj04: 0,
Bewtojm: 0,
b50fsz: 0,
B1wzb3v: 0,
Bqwk70n: 0,
B37u8z8: 0,
avt0cx: 0,
f0sref: 0,
B9fkznv: 0,
Be3o27t: 0,
Bertapg: 0,
B53xpsf: 0,
Bsv72rj: 0,
B39dzdd: 0,
Btq9bd3: 0,
Bqfxd14: 0,
atup0s: "fo7xqb",
Fffuxt: 0,
Bttcd12: 0,
Beitzug: 0,
Bqougee: 0,
B86i8pi: "f1kurthe",
Bhijsxg: "fwq15dy",
kktds4: "f1pb3wry",
Bmau3bo: [
"ftjv2f4",
"f1flhb1f"
],
npektv: [
"f1flhb1f",
"ftjv2f4"
]
},
disabled: {
sj55zd: "f1s2aq7o",
Jwef8y: "f9ql6rf",
Bi91k9c: "fvgxktp",
zqbkvg: "f185j3qj",
h82x05: [
"f1dligi3",
"f1vydzie"
],
cqj998: "fjw1di3",
j3hlsh: [
"f1vydzie",
"f1dligi3"
],
ecr2s2: "fgj9um3",
lj723h: "f19wldhg",
Btxx2vb: "f1ss0kt2",
sltcwy: [
"f1t6oli3",
"fjy9ci8"
],
dnwvvm: "fresaxk",
Blyvkvs: [
"fjy9ci8",
"f1t6oli3"
],
B7iucu3: "f1cyfu5x"
},
selected: {},
checkIcon: {
Bnnss6s: "fi64zpg",
Be2twd7: "fod5ikn",
Frg6f3: [
"f18b9hdq",
"fn6qj8t"
],
t21cq0: [
"f1xk557c",
"f1h9en5y"
],
Bcdw1i0: "fd7fpy0",
Bo70h7d: "fvc9v3g"
},
selectedCheck: {
Bcdw1i0: "f1022m68"
},
multiselectCheck: {
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f1l3cf7o",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "fq9zq91",
B7ck84d: "f1ewtqcl",
mc9l5x: "f22iagw",
Bt984gj: "f122n59",
Brf1p80: "f4d9j23",
Bkfmm31: "f1w9h62z",
Be2twd7: "f1ugzwwg",
Bqenvij: "fd461yt",
a9b677: "fjw5fx7",
Bcdw1i0: "f1022m68"
},
selectedMultiselectCheck: {
De3pzq: "ftywsgz",
sj55zd: "fqpbvvt",
g2u3we: "f3xi7mh",
h3c5rm: [
"ftovhe4",
"f1wczvin"
],
B9xav0g: "f68vbr6",
zhjwy3: [
"f1wczvin",
"ftovhe4"
]
},
checkDisabled: {
sj55zd: "f1s2aq7o",
B7iucu3: "f1cyfu5x"
},
multiselectCheckDisabled: {
g2u3we: "f1r1t4y1",
h3c5rm: [
"fmj8ijw",
"figx54m"
],
B9xav0g: "f360ss8",
zhjwy3: [
"figx54m",
"fmj8ijw"
]
}
}, {
d: [
".f122n59{align-items:center;}",
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
".f19n0e5{color:var(--colorNeutralForeground1);}",
".f1ufnopg{column-gap:var(--spacingHorizontalXS);}",
".f1k6fduh{cursor:pointer;}",
".f22iagw{display:flex;}",
".fk6fouc{font-family:var(--fontFamilyBase);}",
".fkhj508{font-size:var(--fontSizeBase300);}",
".f1i3iumi{line-height:var(--lineHeightBase300);}",
[
".fm5eomj{padding:var(--spacingVerticalSNudge) var(--spacingHorizontalS);}",
{
p: -1
}
],
".f10pi13n{position:relative;}",
".f11vrvdw[data-activedescendant-focusvisible]::after{content:\"\";}",
".f17hxjb7[data-activedescendant-focusvisible]::after{position:absolute;}",
".f1dha69c[data-activedescendant-focusvisible]::after{pointer-events:none;}",
".f1lm7500[data-activedescendant-focusvisible]::after{z-index:1;}",
[
".fo7xqb[data-activedescendant-focusvisible]::after{border:2px solid var(--colorStrokeFocus2);}",
{
p: -2
}
],
[
".f1kurthe[data-activedescendant-focusvisible]::after{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
".fwq15dy[data-activedescendant-focusvisible]::after{top:-2px;}",
".f1pb3wry[data-activedescendant-focusvisible]::after{bottom:-2px;}",
".ftjv2f4[data-activedescendant-focusvisible]::after{left:-2px;}",
".f1flhb1f[data-activedescendant-focusvisible]::after{right:-2px;}",
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
".fi64zpg{flex-shrink:0;}",
".fod5ikn{font-size:var(--fontSizeBase400);}",
".f18b9hdq{margin-left:calc(var(--spacingHorizontalXXS) * -1);}",
".fn6qj8t{margin-right:calc(var(--spacingHorizontalXXS) * -1);}",
".f1xk557c{margin-right:var(--spacingHorizontalXXS);}",
".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}",
".fd7fpy0{visibility:hidden;}",
".fvc9v3g svg{display:block;}",
".f1022m68{visibility:visible;}",
[
".f1l3cf7o{border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}",
{
p: -2
}
],
[
".fq9zq91{border-radius:var(--borderRadiusSmall);}",
{
p: -1
}
],
".f1ewtqcl{box-sizing:border-box;}",
".f4d9j23{justify-content:center;}",
".f1w9h62z{fill:currentColor;}",
".f1ugzwwg{font-size:12px;}",
".fd461yt{height:16px;}",
".fjw5fx7{width:16px;}",
".ftywsgz{background-color:var(--colorCompoundBrandBackground);}",
".fqpbvvt{color:var(--colorNeutralForegroundInverted);}",
".f3xi7mh{border-top-color:var(--colorCompoundBrandBackground);}",
".ftovhe4{border-right-color:var(--colorCompoundBrandBackground);}",
".f1wczvin{border-left-color:var(--colorCompoundBrandBackground);}",
".f68vbr6{border-bottom-color:var(--colorCompoundBrandBackground);}",
".f1r1t4y1{border-top-color:var(--colorNeutralForegroundDisabled);}",
".fmj8ijw{border-right-color:var(--colorNeutralForegroundDisabled);}",
".figx54m{border-left-color:var(--colorNeutralForegroundDisabled);}",
".f360ss8{border-bottom-color:var(--colorNeutralForegroundDisabled);}"
],
h: [
".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}",
".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}",
".fo79ri9:hover .fui-Option__checkIcon{border-top-color:var(--colorNeutralForeground1Hover);}",
".f1osiabc:hover .fui-Option__checkIcon{border-right-color:var(--colorNeutralForeground1Hover);}",
".f1e8le25:hover .fui-Option__checkIcon{border-left-color:var(--colorNeutralForeground1Hover);}",
".f1yusjty:hover .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForeground1Hover);}",
".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}",
".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}",
".f185j3qj:hover .fui-Option__checkIcon{border-top-color:var(--colorNeutralForegroundDisabled);}",
".f1dligi3:hover .fui-Option__checkIcon{border-right-color:var(--colorNeutralForegroundDisabled);}",
".f1vydzie:hover .fui-Option__checkIcon{border-left-color:var(--colorNeutralForegroundDisabled);}",
".fjw1di3:hover .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForegroundDisabled);}"
],
a: [
".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}",
".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}",
".f1lnr2zp:active .fui-Option__checkIcon{border-top-color:var(--colorNeutralForeground1Hover);}",
".f1ogfk9z:active .fui-Option__checkIcon{border-right-color:var(--colorNeutralForeground1Hover);}",
".f1g7j8ec:active .fui-Option__checkIcon{border-left-color:var(--colorNeutralForeground1Hover);}",
".fiuf46r:active .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForeground1Hover);}",
".fgj9um3:active{background-color:var(--colorTransparentBackground);}",
".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}",
".f1ss0kt2:active .fui-Option__checkIcon{border-top-color:var(--colorNeutralForegroundDisabled);}",
".f1t6oli3:active .fui-Option__checkIcon{border-right-color:var(--colorNeutralForegroundDisabled);}",
".fjy9ci8:active .fui-Option__checkIcon{border-left-color:var(--colorNeutralForegroundDisabled);}",
".fresaxk:active .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForegroundDisabled);}"
],
m: [
[
"@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useOptionStyles_unstable = (state)=>{
'use no memo';
const { disabled, multiselect, selected } = state;
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
if (state.checkIcon) {
state.checkIcon.className = (0, _react.mergeClasses)(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,134 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
optionClassNames: function() {
return optionClassNames;
},
useOptionStyles_unstable: function() {
return useOptionStyles_unstable;
}
});
const _reacttheme = require("@fluentui/react-theme");
const _reactaria = require("@fluentui/react-aria");
const _react = require("@griffel/react");
const optionClassNames = {
root: 'fui-Option',
checkIcon: 'fui-Option__checkIcon'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
root: {
alignItems: 'center',
borderRadius: _reacttheme.tokens.borderRadiusMedium,
color: _reacttheme.tokens.colorNeutralForeground1,
columnGap: _reacttheme.tokens.spacingHorizontalXS,
cursor: 'pointer',
display: 'flex',
fontFamily: _reacttheme.tokens.fontFamilyBase,
fontSize: _reacttheme.tokens.fontSizeBase300,
lineHeight: _reacttheme.tokens.lineHeightBase300,
padding: `${_reacttheme.tokens.spacingVerticalSNudge} ${_reacttheme.tokens.spacingHorizontalS}`,
position: 'relative',
':hover': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
color: _reacttheme.tokens.colorNeutralForeground1Hover,
[`& .${optionClassNames.checkIcon}`]: _react.shorthands.borderColor(_reacttheme.tokens.colorNeutralForeground1Hover)
},
':active': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1Pressed,
color: _reacttheme.tokens.colorNeutralForeground1Pressed,
[`& .${optionClassNames.checkIcon}`]: _react.shorthands.borderColor(_reacttheme.tokens.colorNeutralForeground1Hover)
}
},
active: {
[`[${_reactaria.ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {
content: '""',
position: 'absolute',
pointerEvents: 'none',
zIndex: 1,
border: `2px solid ${_reacttheme.tokens.colorStrokeFocus2}`,
borderRadius: _reacttheme.tokens.borderRadiusMedium,
top: '-2px',
bottom: '-2px',
left: '-2px',
right: '-2px'
}
},
disabled: {
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
':hover': {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
[`& .${optionClassNames.checkIcon}`]: _react.shorthands.borderColor(_reacttheme.tokens.colorNeutralForegroundDisabled)
},
':active': {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
[`& .${optionClassNames.checkIcon}`]: _react.shorthands.borderColor(_reacttheme.tokens.colorNeutralForegroundDisabled)
},
'@media (forced-colors: active)': {
color: 'GrayText'
}
},
selected: {},
checkIcon: {
flexShrink: 0,
fontSize: _reacttheme.tokens.fontSizeBase400,
// Shift icon(s) to the left to give text content extra spacing without needing an extra node
// This is done instead of gap since the extra space only exists between icon > content, not icon > icon
marginLeft: `calc(${_reacttheme.tokens.spacingHorizontalXXS} * -1)`,
marginRight: _reacttheme.tokens.spacingHorizontalXXS,
visibility: 'hidden',
'& svg': {
display: 'block'
}
},
selectedCheck: {
visibility: 'visible'
},
multiselectCheck: {
border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStrokeAccessible}`,
borderRadius: _reacttheme.tokens.borderRadiusSmall,
boxSizing: 'border-box',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fill: 'currentColor',
fontSize: '12px',
height: '16px',
width: '16px',
visibility: 'visible'
},
selectedMultiselectCheck: {
backgroundColor: _reacttheme.tokens.colorCompoundBrandBackground,
color: _reacttheme.tokens.colorNeutralForegroundInverted,
..._react.shorthands.borderColor(_reacttheme.tokens.colorCompoundBrandBackground)
},
checkDisabled: {
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
'@media (forced-colors: active)': {
color: 'GrayText'
}
},
multiselectCheckDisabled: _react.shorthands.borderColor(_reacttheme.tokens.colorNeutralForegroundDisabled)
});
const useOptionStyles_unstable = (state)=>{
'use no memo';
const { disabled, multiselect, selected } = state;
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
if (state.checkIcon) {
state.checkIcon.className = (0, _react.mergeClasses)(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "OptionGroup", {
enumerable: true,
get: function() {
return OptionGroup;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useOptionGroup = require("./useOptionGroup");
const _renderOptionGroup = require("./renderOptionGroup");
const _useOptionGroupStylesstyles = require("./useOptionGroupStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const OptionGroup = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useOptionGroup.useOptionGroup_unstable)(props, ref);
(0, _useOptionGroupStylesstyles.useOptionGroupStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useOptionGroupStyles_unstable')(state);
return (0, _renderOptionGroup.renderOptionGroup_unstable)(state);
});
OptionGroup.displayName = 'OptionGroup';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OptionGroup/OptionGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useOptionGroup_unstable } from './useOptionGroup';\nimport { renderOptionGroup_unstable } from './renderOptionGroup';\nimport { useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';\nimport type { OptionGroupProps } from './OptionGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * OptionGroup component: allows grouping of Option components within a Combobox\n */\nexport const OptionGroup: ForwardRefComponent<OptionGroupProps> = React.forwardRef((props, ref) => {\n const state = useOptionGroup_unstable(props, ref);\n\n useOptionGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useOptionGroupStyles_unstable')(state);\n\n return renderOptionGroup_unstable(state);\n});\n\nOptionGroup.displayName = 'OptionGroup';\n"],"names":["React","useOptionGroup_unstable","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useCustomStyleHook_unstable","OptionGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACS,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAGlC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAE9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering OptionGroup
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OptionGroup/OptionGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type OptionGroupSlots = {\n /** The root group wrapper */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The option group label, displayed as static text before the child options.\n * If not using label, it's recommended to set `aria-label` directly on the OptionGroup instead.\n */\n label?: Slot<'span'>;\n};\n\n/**\n * OptionGroup Props\n */\nexport type OptionGroupProps = ComponentProps<Partial<OptionGroupSlots>>;\n\n/**\n * State used in rendering OptionGroup\n */\nexport type OptionGroupState = ComponentState<OptionGroupSlots>;\n"],"names":[],"mappings":"AAkBA;;CAEC,GACD,WAAgE"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
OptionGroup: function() {
return _OptionGroup.OptionGroup;
},
optionGroupClassNames: function() {
return _useOptionGroupStylesstyles.optionGroupClassNames;
},
renderOptionGroup_unstable: function() {
return _renderOptionGroup.renderOptionGroup_unstable;
},
useOptionGroupStyles_unstable: function() {
return _useOptionGroupStylesstyles.useOptionGroupStyles_unstable;
},
useOptionGroup_unstable: function() {
return _useOptionGroup.useOptionGroup_unstable;
}
});
const _OptionGroup = require("./OptionGroup");
const _renderOptionGroup = require("./renderOptionGroup");
const _useOptionGroup = require("./useOptionGroup");
const _useOptionGroupStylesstyles = require("./useOptionGroupStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OptionGroup/index.ts"],"sourcesContent":["export { OptionGroup } from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup.types';\nexport { renderOptionGroup_unstable } from './renderOptionGroup';\nexport { useOptionGroup_unstable } from './useOptionGroup';\nexport { optionGroupClassNames, useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';\n"],"names":["OptionGroup","renderOptionGroup_unstable","useOptionGroup_unstable","optionGroupClassNames","useOptionGroupStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAIXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yDAA6B;;;eADpDF,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CACU,gCAAgC"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OptionGroup/renderOptionGroup.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 { OptionGroupState, OptionGroupSlots } from './OptionGroup.types';\n\n/**\n * Render the final JSX of OptionGroup\n */\nexport const renderOptionGroup_unstable = (state: OptionGroupState): JSXElement => {\n assertSlots<OptionGroupSlots>(state);\n\n return (\n <state.root>\n {state.label && <state.label>{state.label.children}</state.label>}\n {state.root.children}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderOptionGroup_unstable","state","root","label","children"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,mCAAmC,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,KAAK,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,KAAK,EAAA;0BAAEF,MAAME,KAAK,CAACC,QAAQ;;YACjDH,MAAMC,IAAI,CAACE,QAAQ;;;AAG1B,EAAE"}

View File

@@ -0,0 +1,41 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useOptionGroup_unstable", {
enumerable: true,
get: function() {
return useOptionGroup_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const useOptionGroup_unstable = (props, ref)=>{
const labelId = (0, _reactutilities.useId)('group-label');
const { label } = props;
return {
components: {
root: 'div',
label: 'span'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: ref,
role: 'group',
'aria-labelledby': label ? labelId : undefined,
...props
}), {
elementType: 'div'
}),
label: _reactutilities.slot.optional(label, {
defaultProps: {
id: labelId,
role: 'presentation'
},
elementType: 'span'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OptionGroup/useOptionGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { OptionGroupProps, OptionGroupState } from './OptionGroup.types';\n\n/**\n * Create the state required to render OptionGroup.\n *\n * The returned state can be modified with hooks such as useOptionGroupStyles_unstable,\n * before being passed to renderOptionGroup_unstable.\n *\n * @param props - props from this instance of OptionGroup\n * @param ref - reference to root HTMLElement of OptionGroup\n */\nexport const useOptionGroup_unstable = (props: OptionGroupProps, ref: React.Ref<HTMLElement>): OptionGroupState => {\n const labelId = useId('group-label');\n const { label } = props;\n\n return {\n components: {\n root: 'div',\n label: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n role: 'group',\n 'aria-labelledby': label ? labelId : undefined,\n ...props,\n }),\n { elementType: 'div' },\n ),\n label: slot.optional(label, {\n defaultProps: {\n id: labelId,\n role: 'presentation',\n },\n elementType: 'span',\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useOptionGroup_unstable","props","ref","labelId","label","components","root","always","role","undefined","elementType","optional","defaultProps","id"],"mappings":";;;;+BAaaI;;;;;;;iEAbU,QAAQ;gCACuB,4BAA4B;AAY3E,gCAAgC,CAACC,OAAyBC;IAC/D,MAAMC,cAAUL,qBAAAA,EAAM;IACtB,MAAM,EAAEM,KAAK,EAAE,GAAGH;IAElB,OAAO;QACLI,YAAY;YACVC,MAAM;YACNF,OAAO;QACT;QACAE,MAAMP,oBAAAA,CAAKQ,MAAM,KACfV,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FK,KAAKA;YACLM,MAAM;YACN,mBAAmBJ,QAAQD,UAAUM;YACrC,GAAGR,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBN,OAAOL,oBAAAA,CAAKY,QAAQ,CAACP,OAAO;YAC1BQ,cAAc;gBACZC,IAAIV;gBACJK,MAAM;YACR;YACAE,aAAa;QACf;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,109 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
optionGroupClassNames: function() {
return optionGroupClassNames;
},
useOptionGroupStyles_unstable: function() {
return useOptionGroupStyles_unstable;
}
});
const _react = require("@griffel/react");
const optionGroupClassNames = {
root: 'fui-OptionGroup',
label: 'fui-OptionGroup__label'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
mc9l5x: "f22iagw",
Beiy3e4: "f1vx9l62",
Belr9w4: "fiut8dr",
B8lkq7l: "f1xxzjds",
eii1in: 0,
H93o2g: 0,
Gwp8xu: 0,
Bd39igo: "f16cmn8k",
om0q45: "f5642y",
Hl9o3s: "ffdf81h",
sl1c2c: 0,
z4hxbw: 0,
B0i58d9: 0,
Bi9x0x4: 0,
Bgurq3m: "f1bsn9kn"
},
label: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
sj55zd: "f11d4kpn",
mc9l5x: "ftgm304",
Be2twd7: "fy9rknc",
Bhrd7zp: "fl43uef",
Bg96gwp: "fwrc4pm",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1mpq0zz"
}
}, {
d: [
".f22iagw{display:flex;}",
".f1vx9l62{flex-direction:column;}",
".fiut8dr{row-gap:var(--spacingHorizontalXXS);}",
".f1xxzjds:not(:last-child)::after{content:\"\";}",
[
".f16cmn8k:not(:last-child)::after{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2);}",
{
p: -1
}
],
".f5642y:not(:last-child)::after{display:block;}",
".ffdf81h:not(:last-child)::after{padding-bottom:var(--spacingHorizontalXS);}",
[
".f1bsn9kn:not(:last-child)::after{margin:0 calc(var(--spacingHorizontalXS) * -1) var(--spacingVerticalXS);}",
{
p: -1
}
],
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
".f11d4kpn{color:var(--colorNeutralForeground3);}",
".ftgm304{display:block;}",
".fy9rknc{font-size:var(--fontSizeBase200);}",
".fl43uef{font-weight:var(--fontWeightSemibold);}",
".fwrc4pm{line-height:var(--lineHeightBase200);}",
[
".f1mpq0zz{padding:var(--spacingHorizontalS) var(--spacingHorizontalSNudge);}",
{
p: -1
}
]
]
});
const useOptionGroupStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(optionGroupClassNames.root, styles.root, state.root.className);
if (state.label) {
state.label.className = (0, _react.mergeClasses)(optionGroupClassNames.label, styles.label, state.label.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useOptionGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const optionGroupClassNames = {\n root: 'fui-OptionGroup',\n label: 'fui-OptionGroup__label'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingHorizontalXXS,\n '&:not(:last-child)::after': {\n content: '\"\"',\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n display: 'block',\n paddingBottom: tokens.spacingHorizontalXS,\n margin: `0 ${`calc(${tokens.spacingHorizontalXS} * -1)`} ${tokens.spacingVerticalXS}`\n }\n },\n label: {\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground3,\n display: 'block',\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase200,\n padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalSNudge}`\n }\n});\n/**\n * Apply styling to the OptionGroup slots based on the state\n */ export const useOptionGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n if (state.label) {\n state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n }\n return state;\n};\n"],"names":["tokens","__styles","mergeClasses","optionGroupClassNames","root","label","useStyles","mc9l5x","Beiy3e4","Belr9w4","B8lkq7l","eii1in","H93o2g","Gwp8xu","Bd39igo","om0q45","Hl9o3s","sl1c2c","z4hxbw","B0i58d9","Bi9x0x4","Bgurq3m","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useOptionGroupStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,qBAAqB;;;IA+BjBmC,6BAA6B;;;;uBAhCL,gBAAgB;AAClD,8BAA8B;IACjClC,IAAI,EAAE,iBAAiB;IACvBC,KAAK,EAAE;AACX,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAhB,KAAA,EAAA;QAAAiB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAApB,MAAA,EAAA;QAAAqB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAsBrB,CAAC;AAGS,sCAAuCE,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,MAAM,GAAGlC,SAAS,CAAC,CAAC;IAC1BiC,KAAK,CAACnC,IAAI,CAACqC,SAAS,OAAGvC,mBAAY,EAACC,qBAAqB,CAACC,IAAI,EAAEoC,MAAM,CAACpC,IAAI,EAAEmC,KAAK,CAACnC,IAAI,CAACqC,SAAS,CAAC;IAClG,IAAIF,KAAK,CAAClC,KAAK,EAAE;QACbkC,KAAK,CAAClC,KAAK,CAACoC,SAAS,OAAGvC,mBAAY,EAACC,qBAAqB,CAACE,KAAK,EAAEmC,MAAM,CAACnC,KAAK,EAAEkC,KAAK,CAAClC,KAAK,CAACoC,SAAS,CAAC;IAC1G;IACA,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,59 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
optionGroupClassNames: function() {
return optionGroupClassNames;
},
useOptionGroupStyles_unstable: function() {
return useOptionGroupStyles_unstable;
}
});
const _reacttheme = require("@fluentui/react-theme");
const _react = require("@griffel/react");
const optionGroupClassNames = {
root: 'fui-OptionGroup',
label: 'fui-OptionGroup__label'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
root: {
display: 'flex',
flexDirection: 'column',
rowGap: _reacttheme.tokens.spacingHorizontalXXS,
'&:not(:last-child)::after': {
content: '""',
borderBottom: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke2}`,
display: 'block',
paddingBottom: _reacttheme.tokens.spacingHorizontalXS,
margin: `0 ${`calc(${_reacttheme.tokens.spacingHorizontalXS} * -1)`} ${_reacttheme.tokens.spacingVerticalXS}`
}
},
label: {
borderRadius: _reacttheme.tokens.borderRadiusMedium,
color: _reacttheme.tokens.colorNeutralForeground3,
display: 'block',
fontSize: _reacttheme.tokens.fontSizeBase200,
fontWeight: _reacttheme.tokens.fontWeightSemibold,
lineHeight: _reacttheme.tokens.lineHeightBase200,
padding: `${_reacttheme.tokens.spacingHorizontalS} ${_reacttheme.tokens.spacingHorizontalSNudge}`
}
});
const useOptionGroupStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(optionGroupClassNames.root, styles.root, state.root.className);
if (state.label) {
state.label.className = (0, _react.mergeClasses)(optionGroupClassNames.label, styles.label, state.label.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OptionGroup/useOptionGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';\n\nexport const optionGroupClassNames: SlotClassNames<OptionGroupSlots> = {\n root: 'fui-OptionGroup',\n label: 'fui-OptionGroup__label',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingHorizontalXXS,\n\n '&:not(:last-child)::after': {\n content: '\"\"',\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n display: 'block',\n paddingBottom: tokens.spacingHorizontalXS,\n margin: `0 ${`calc(${tokens.spacingHorizontalXS} * -1)`} ${tokens.spacingVerticalXS}`,\n },\n },\n\n label: {\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground3,\n display: 'block',\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase200,\n padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalSNudge}`,\n },\n});\n\n/**\n * Apply styling to the OptionGroup slots based on the state\n */\nexport const useOptionGroupStyles_unstable = (state: OptionGroupState): OptionGroupState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n\n if (state.label) {\n state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n }\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","optionGroupClassNames","root","label","useStyles","display","flexDirection","rowGap","spacingHorizontalXXS","content","borderBottom","strokeWidthThin","colorNeutralStroke2","paddingBottom","spacingHorizontalXS","margin","spacingVerticalXS","borderRadius","borderRadiusMedium","color","colorNeutralForeground3","fontSize","fontSizeBase200","fontWeight","fontWeightSemibold","lineHeight","lineHeightBase200","padding","spacingHorizontalS","spacingHorizontalSNudge","useOptionGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,qBAAAA;;;IAqCA6B,6BAAAA;;;;4BA1CU,wBAAwB;uBAEN,iBAAiB;AAGnD,8BAAgE;IACrE5B,MAAM;IACNC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BG,MAAM;QACJG,SAAS;QACTC,eAAe;QACfC,QAAQT,kBAAAA,CAAOU,oBAAoB;QAEnC,6BAA6B;YAC3BC,SAAS;YACTC,cAAc,GAAGZ,kBAAAA,CAAOa,eAAe,CAAC,OAAO,EAAEb,kBAAAA,CAAOc,mBAAmB,EAAE;YAC7EP,SAAS;YACTQ,eAAef,kBAAAA,CAAOgB,mBAAmB;YACzCC,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAEjB,kBAAAA,CAAOgB,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAEhB,kBAAAA,CAAOkB,iBAAiB,EAAE;QACvF;IACF;IAEAb,OAAO;QACLc,cAAcnB,kBAAAA,CAAOoB,kBAAkB;QACvCC,OAAOrB,kBAAAA,CAAOsB,uBAAuB;QACrCf,SAAS;QACTgB,UAAUvB,kBAAAA,CAAOwB,eAAe;QAChCC,YAAYzB,kBAAAA,CAAO0B,kBAAkB;QACrCC,YAAY3B,kBAAAA,CAAO4B,iBAAiB;QACpCC,SAAS,GAAG7B,kBAAAA,CAAO8B,kBAAkB,CAAC,CAAC,EAAE9B,kBAAAA,CAAO+B,uBAAuB,EAAE;IAC3E;AACF;AAKO,sCAAsC,CAACE;IAC5C;IAEA,MAAMC,SAAS5B;IACf2B,MAAM7B,IAAI,CAAC+B,SAAS,OAAGjC,mBAAAA,EAAaC,sBAAsBC,IAAI,EAAE8B,OAAO9B,IAAI,EAAE6B,MAAM7B,IAAI,CAAC+B,SAAS;IAEjG,IAAIF,MAAM5B,KAAK,EAAE;QACf4B,MAAM5B,KAAK,CAAC8B,SAAS,OAAGjC,mBAAAA,EAAaC,sBAAsBE,KAAK,EAAE6B,OAAO7B,KAAK,EAAE4B,MAAM5B,KAAK,CAAC8B,SAAS;IACvG;IAEA,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,41 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ComboboxContext: function() {
return ComboboxContext;
},
ComboboxProvider: function() {
return ComboboxProvider;
}
});
const _reactcontextselector = require("@fluentui/react-context-selector");
const ComboboxContext = (0, _reactcontextselector.createContext)({
activeOption: undefined,
appearance: 'outline',
focusVisible: false,
open: false,
registerOption () {
return ()=>undefined;
},
selectedOptions: [],
selectOption () {
// noop
},
setActiveOption () {
// noop
},
setOpen () {
// noop
},
size: 'medium'
});
const ComboboxProvider = ComboboxContext.Provider;

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/ComboboxContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext } from '@fluentui/react-context-selector';\nimport { ComboboxState } from '../components/Combobox/Combobox.types';\n\n/**\n * Context shared with Combobox, Listbox, & Options\n */\nexport type ComboboxContextValue = Pick<\n ComboboxState,\n 'activeOption' | 'appearance' | 'focusVisible' | 'open' | 'registerOption' | 'setActiveOption' | 'setOpen' | 'size'\n> & {\n /**\n * @deprecated - no longer used\n */\n selectedOptions: ComboboxState['selectedOptions'];\n\n /**\n * @deprecated - no longer used\n */\n selectOption: ComboboxState['selectOption'];\n};\n\n/**\n * @deprecated - use ListboxContext instead\n * @see ListboxContext\n */\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext<ComboboxContextValue>({\n activeOption: undefined,\n appearance: 'outline',\n focusVisible: false,\n open: false,\n registerOption() {\n return () => undefined;\n },\n selectedOptions: [],\n selectOption() {\n // noop\n },\n setActiveOption() {\n // noop\n },\n setOpen() {\n // noop\n },\n size: 'medium',\n});\n\n/**\n * @deprecated - render ListboxProvider instead\n * @see ListboxProvider\n * @see useListboxContext_unstable\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"names":["createContext","ComboboxContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","ComboboxProvider","Provider"],"mappings":"AAAA;;;;;;;;;;;;mBA4BaC;;;oBA2BAY;;;;sCArDiB,mCAAmC;AA0B1D,MAAMZ,sBAAkBD,mCAAAA,EAAoC;IACjEE,cAAcC;IACdC,YAAY;IACZC,cAAc;IACdC,MAAM;IACNC;QACE,OAAO,IAAMJ;IACf;IACAK,iBAAiB,EAAE;IACnBC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC,MAAM;AACR,GAAG;AAQI,MAAMC,mBAAmBZ,gBAAgBa,QAAQ,CAAC"}

View File

@@ -0,0 +1,55 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ListboxContext: function() {
return ListboxContext;
},
ListboxProvider: function() {
return ListboxProvider;
},
useListboxContext_unstable: function() {
return useListboxContext_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactcontextselector = require("@fluentui/react-context-selector");
const listboxContextDefaultValue = {
activeOption: undefined,
focusVisible: false,
multiselect: false,
getOptionById () {
return undefined;
},
getOptionsMatchingValue () {
return [];
},
registerOption () {
return ()=>undefined;
},
selectedOptions: [],
onOptionClick () {
// noop
},
onActiveDescendantChange () {
// noop
},
selectOption () {
// noop
},
setActiveOption () {
// noop
}
};
const ListboxContext = (0, _reactcontextselector.createContext)(undefined);
const useListboxContext_unstable = (selector)=>(0, _reactcontextselector.useContextSelector)(ListboxContext, (ctx = listboxContextDefaultValue)=>selector(ctx));
const ListboxProvider = ListboxContext.Provider;

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/ListboxContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\nimport { ListboxState } from '../components/Listbox/Listbox.types';\n\n/**\n * Context shared with all Listbox Options\n */\nexport type ListboxContextValue = Pick<\n ListboxState,\n | 'activeOption'\n | 'focusVisible'\n | 'getOptionById'\n | 'getOptionsMatchingValue'\n | 'multiselect'\n | 'registerOption'\n | 'selectedOptions'\n | 'selectOption'\n | 'setActiveOption'\n> & {\n onOptionClick: (e: React.MouseEvent<HTMLElement>) => void;\n onActiveDescendantChange?: (e: ActiveDescendantChangeEvent) => void;\n};\n\nconst listboxContextDefaultValue = {\n activeOption: undefined,\n focusVisible: false,\n multiselect: false,\n getOptionById() {\n return undefined;\n },\n getOptionsMatchingValue() {\n return [];\n },\n registerOption() {\n return () => undefined;\n },\n selectedOptions: [],\n onOptionClick() {\n // noop\n },\n onActiveDescendantChange() {\n // noop\n },\n selectOption() {\n // noop\n },\n setActiveOption() {\n // noop\n },\n};\n\nexport const ListboxContext = createContext<ListboxContextValue | undefined>(undefined);\n\nexport const useListboxContext_unstable = <T>(selector: ContextSelector<ListboxContextValue, T>): T =>\n useContextSelector(ListboxContext, (ctx = listboxContextDefaultValue) => selector(ctx));\n\nexport const ListboxProvider = ListboxContext.Provider;\n"],"names":["React","createContext","useContextSelector","listboxContextDefaultValue","activeOption","undefined","focusVisible","multiselect","getOptionById","getOptionsMatchingValue","registerOption","selectedOptions","onOptionClick","onActiveDescendantChange","selectOption","setActiveOption","ListboxContext","useListboxContext_unstable","selector","ctx","ListboxProvider","Provider"],"mappings":"AAAA;;;;;;;;;;;;kBAsDagB;;;mBAKAI;;;8BAHAH;;;;;iEAtDU,QAAQ;sCACoC,mCAAmC;AAuBtG,MAAMd,6BAA6B;IACjCC,cAAcC;IACdC,cAAc;IACdC,aAAa;IACbC;QACE,OAAOH;IACT;IACAI;QACE,OAAO,EAAE;IACX;IACAC;QACE,OAAO,IAAML;IACf;IACAM,iBAAiB,EAAE;IACnBC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;AACF;AAEO,MAAMC,qBAAiBf,mCAAAA,EAA+CI,WAAW;AAEjF,MAAMY,6BAA6B,CAAIC,eAC5ChB,wCAAAA,EAAmBc,gBAAgB,CAACG,MAAMhB,0BAA0B,GAAKe,SAASC,MAAM;AAEnF,MAAMC,kBAAkBJ,eAAeK,QAAQ,CAAC"}

View File

@@ -0,0 +1,50 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useComboboxContextValues", {
enumerable: true,
get: function() {
return useComboboxContextValues;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
function useComboboxContextValues(state) {
const { appearance, open, getOptionById, getOptionsMatchingValue, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, onOptionClick, onActiveDescendantChange } = state;
const combobox = {
activeOption: undefined,
appearance,
focusVisible: false,
open,
registerOption,
selectedOptions,
selectOption,
setActiveOption: ()=>null,
setOpen,
size
};
const listbox = {
activeOption: undefined,
focusVisible: false,
getOptionById,
getOptionsMatchingValue,
registerOption,
selectedOptions,
selectOption,
setActiveOption: ()=>null,
onOptionClick,
onActiveDescendantChange
};
const activeDescendant = _react.useMemo(()=>({
controller: activeDescendantController
}), [
activeDescendantController
]);
return {
combobox,
activeDescendant,
listbox
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/useComboboxContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ComboboxState } from '../Combobox';\nimport type { ComboboxBaseContextValues, ComboboxBaseState } from '../utils/ComboboxBase.types';\n\nexport function useComboboxContextValues(\n state: Omit<ComboboxBaseState, 'freeform'> & Pick<ComboboxState, 'activeDescendantController'>,\n): ComboboxBaseContextValues {\n const {\n appearance,\n open,\n getOptionById,\n getOptionsMatchingValue,\n registerOption,\n selectedOptions,\n selectOption,\n setOpen,\n size,\n activeDescendantController,\n onOptionClick,\n onActiveDescendantChange,\n } = state;\n\n const combobox = {\n activeOption: undefined,\n appearance,\n focusVisible: false,\n open,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption: () => null,\n setOpen,\n size,\n };\n\n const listbox = {\n activeOption: undefined,\n focusVisible: false,\n getOptionById,\n getOptionsMatchingValue,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption: () => null,\n onOptionClick,\n onActiveDescendantChange,\n };\n\n const activeDescendant = React.useMemo(\n () => ({\n controller: activeDescendantController,\n }),\n [activeDescendantController],\n );\n\n return { combobox, activeDescendant, listbox };\n}\n"],"names":["React","useComboboxContextValues","state","appearance","open","getOptionById","getOptionsMatchingValue","registerOption","selectedOptions","selectOption","setOpen","size","activeDescendantController","onOptionClick","onActiveDescendantChange","combobox","activeOption","undefined","focusVisible","setActiveOption","listbox","activeDescendant","useMemo","controller"],"mappings":"AAAA;;;;;+BAMgBC;;;;;;;iEAJO,QAAQ;AAIxB,kCACLC,KAA8F;IAE9F,MAAM,EACJC,UAAU,EACVC,IAAI,EACJC,aAAa,EACbC,uBAAuB,EACvBC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,OAAO,EACPC,IAAI,EACJC,0BAA0B,EAC1BC,aAAa,EACbC,wBAAwB,EACzB,GAAGZ;IAEJ,MAAMa,WAAW;QACfC,cAAcC;QACdd;QACAe,cAAc;QACdd;QACAG;QACAC;QACAC;QACAU,iBAAiB,IAAM;QACvBT;QACAC;IACF;IAEA,MAAMS,UAAU;QACdJ,cAAcC;QACdC,cAAc;QACdb;QACAC;QACAC;QACAC;QACAC;QACAU,iBAAiB,IAAM;QACvBN;QACAC;IACF;IAEA,MAAMO,mBAAmBrB,OAAMsB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYX;SACd,CAAA,EACA;QAACA;KAA2B;IAG9B,OAAO;QAAEG;QAAUM;QAAkBD;IAAQ;AAC/C"}

View File

@@ -0,0 +1,46 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useListboxContextValues", {
enumerable: true,
get: function() {
return useListboxContextValues;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactcontextselector = require("@fluentui/react-context-selector");
const _ListboxContext = require("./ListboxContext");
function useListboxContextValues(state) {
const hasListboxContext = (0, _reactcontextselector.useHasParentContext)(_ListboxContext.ListboxContext);
const { getOptionById, getOptionsMatchingValue, multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;
// get register/unregister functions from parent combobox context
const parentRegisterOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.registerOption);
const onOptionClick = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.onOptionClick);
const onActiveDescendantChange = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.onActiveDescendantChange);
const registerOptionValue = hasListboxContext ? parentRegisterOption : registerOption;
const listbox = {
activeOption: undefined,
focusVisible: false,
getOptionById,
getOptionsMatchingValue,
multiselect,
registerOption: registerOptionValue,
selectedOptions,
selectOption,
setActiveOption: ()=>undefined,
onOptionClick,
onActiveDescendantChange
};
const activeDescendant = _react.useMemo(()=>({
controller: activeDescendantController
}), [
activeDescendantController
]);
return {
listbox,
activeDescendant
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/useListboxContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';\nimport { ListboxContext, useListboxContext_unstable } from './ListboxContext';\n\nexport function useListboxContextValues(state: ListboxState): ListboxContextValues {\n const hasListboxContext = useHasParentContext(ListboxContext);\n const {\n getOptionById,\n getOptionsMatchingValue,\n multiselect,\n registerOption,\n selectedOptions,\n selectOption,\n activeDescendantController,\n } = state;\n\n // get register/unregister functions from parent combobox context\n const parentRegisterOption = useListboxContext_unstable(ctx => ctx.registerOption);\n const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n\n const registerOptionValue = hasListboxContext ? parentRegisterOption : registerOption;\n\n const listbox = {\n activeOption: undefined,\n focusVisible: false,\n getOptionById,\n getOptionsMatchingValue,\n multiselect,\n registerOption: registerOptionValue,\n selectedOptions,\n selectOption,\n setActiveOption: () => undefined,\n onOptionClick,\n onActiveDescendantChange,\n };\n\n const activeDescendant = React.useMemo(\n () => ({\n controller: activeDescendantController,\n }),\n [activeDescendantController],\n );\n\n return { listbox, activeDescendant };\n}\n"],"names":["React","useHasParentContext","ListboxContext","useListboxContext_unstable","useListboxContextValues","state","hasListboxContext","getOptionById","getOptionsMatchingValue","multiselect","registerOption","selectedOptions","selectOption","activeDescendantController","parentRegisterOption","ctx","onOptionClick","onActiveDescendantChange","registerOptionValue","listbox","activeOption","undefined","focusVisible","setActiveOption","activeDescendant","useMemo","controller"],"mappings":"AAAA;;;;;+BAOgBI;;;;;;;iEALO,QAAQ;sCACK,mCAAmC;gCAEZ,mBAAmB;AAEvE,iCAAiCC,KAAmB;IACzD,MAAMC,wBAAoBL,yCAAAA,EAAoBC,8BAAAA;IAC9C,MAAM,EACJK,aAAa,EACbC,uBAAuB,EACvBC,WAAW,EACXC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,0BAA0B,EAC3B,GAAGR;IAEJ,iEAAiE;IACjE,MAAMS,2BAAuBX,0CAAAA,EAA2BY,CAAAA,MAAOA,IAAIL,cAAc;IACjF,MAAMM,oBAAgBb,0CAAAA,EAA2BY,CAAAA,MAAOA,IAAIC,aAAa;IACzE,MAAMC,2BAA2Bd,8CAAAA,EAA2BY,CAAAA,MAAOA,IAAIE,wBAAwB;IAE/F,MAAMC,sBAAsBZ,oBAAoBQ,uBAAuBJ;IAEvE,MAAMS,UAAU;QACdC,cAAcC;QACdC,cAAc;QACdf;QACAC;QACAC;QACAC,gBAAgBQ;QAChBP;QACAC;QACAW,iBAAiB,IAAMF;QACvBL;QACAC;IACF;IAEA,MAAMO,mBAAmBxB,OAAMyB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYb;SACd,CAAA,EACA;QAACA;KAA2B;IAG9B,OAAO;QAAEM;QAASK;IAAiB;AACrC"}

View File

@@ -0,0 +1,57 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useComboboxFilter", {
enumerable: true,
get: function() {
return useComboboxFilter;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _Option = require("../Option");
function defaultFilter(optionText, query) {
if (query === '') {
return true;
}
return optionText.toLowerCase().includes(query.toLowerCase());
}
function defaultToString(option) {
return typeof option === 'string' ? option : option.value;
}
function useComboboxFilter(query, options, config) {
const { filter = defaultFilter, noOptionsMessage = "We couldn't find any matches.", optionToReactKey = defaultToString, optionToText = defaultToString, renderOption = (option)=>{
if (typeof option === 'string') {
return /*#__PURE__*/ _react.createElement(_Option.Option, {
key: option
}, option);
}
return /*#__PURE__*/ _react.createElement(_Option.Option, {
...option,
key: optionToReactKey(option),
text: optionToText(option),
value: option.value
}, option.children);
} } = config;
const filteredOptions = _react.useMemo(()=>{
const searchValue = query.trim();
return options.filter((option)=>filter(optionToText(option), searchValue));
}, [
options,
optionToText,
filter,
query
]);
if (filteredOptions.length === 0) {
return [
/*#__PURE__*/ _react.createElement(_Option.Option, {
"aria-disabled": "true",
key: "no-results",
text: ""
}, noOptionsMessage)
];
}
return filteredOptions.map((option)=>renderOption(option));
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/useComboboxFilter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Option } from '../Option';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\ntype UseComboboxFilterConfig<T extends { children: React.ReactNode; value: string } | string> = {\n /** Provides a custom filter for the option. */\n filter?: (optionText: string, query: string) => boolean;\n\n /** Provides a custom message to display when there are no options. */\n noOptionsMessage?: React.ReactNode;\n\n /** Provides a way to map an option object to a React key. By default, \"value\" is used. */\n optionToReactKey?: (option: T) => string;\n\n /** Provides a way to map an option object to a text used for search. By default, \"value\" is used. */\n optionToText?: (option: T) => string;\n\n /** Provides a custom render for the option. */\n renderOption?: (option: T) => JSXElement;\n};\n\nfunction defaultFilter(optionText: string, query: string) {\n if (query === '') {\n return true;\n }\n\n return optionText.toLowerCase().includes(query.toLowerCase());\n}\n\nfunction defaultToString(option: string | { value: string }) {\n return typeof option === 'string' ? option : option.value;\n}\n\n/**\n * @internal\n */\nexport function useComboboxFilter<T extends { children: React.ReactNode; value: string } | string>(\n query: string,\n options: T[],\n config: UseComboboxFilterConfig<T>,\n): JSXElement[] {\n const {\n filter = defaultFilter,\n noOptionsMessage = \"We couldn't find any matches.\",\n optionToReactKey = defaultToString,\n optionToText = defaultToString,\n\n renderOption = (option: T) => {\n if (typeof option === 'string') {\n return <Option key={option}>{option}</Option>;\n }\n\n return (\n <Option {...option} key={optionToReactKey(option)} text={optionToText(option)} value={option.value}>\n {option.children}\n </Option>\n );\n },\n } = config;\n\n const filteredOptions = React.useMemo(() => {\n const searchValue = query.trim();\n\n return options.filter(option => filter(optionToText(option), searchValue));\n }, [options, optionToText, filter, query]);\n\n if (filteredOptions.length === 0) {\n return [\n <Option aria-disabled=\"true\" key=\"no-results\" text=\"\">\n {noOptionsMessage}\n </Option>,\n ];\n }\n\n return filteredOptions.map(option => renderOption(option));\n}\n"],"names":["React","Option","defaultFilter","optionText","query","toLowerCase","includes","defaultToString","option","value","useComboboxFilter","options","config","filter","noOptionsMessage","optionToReactKey","optionToText","renderOption","key","text","children","filteredOptions","useMemo","searchValue","trim","length","aria-disabled","map"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;wBACR,YAAY;AAoBnC,SAASE,cAAcC,UAAkB,EAAEC,KAAa;IACtD,IAAIA,UAAU,IAAI;QAChB,OAAO;IACT;IAEA,OAAOD,WAAWE,WAAW,GAAGC,QAAQ,CAACF,MAAMC,WAAW;AAC5D;AAEA,SAASE,gBAAgBC,MAAkC;IACzD,OAAO,OAAOA,WAAW,WAAWA,SAASA,OAAOC,KAAK;AAC3D;AAKO,SAASC,kBACdN,KAAa,EACbO,OAAY,EACZC,MAAkC;IAElC,MAAM,EACJC,SAASX,aAAa,EACtBY,mBAAmB,+BAA+B,EAClDC,mBAAmBR,eAAe,EAClCS,eAAeT,eAAe,EAE9BU,eAAe,CAACT;QACd,IAAI,OAAOA,WAAW,UAAU;YAC9B,OAAA,WAAA,GAAO,OAAA,aAAA,CAACP,cAAAA,EAAAA;gBAAOiB,KAAKV;eAASA;QAC/B;QAEA,OAAA,WAAA,GACE,OAAA,aAAA,CAACP,cAAAA,EAAAA;YAAQ,GAAGO,MAAM;YAAEU,KAAKH,iBAAiBP;YAASW,MAAMH,aAAaR;YAASC,OAAOD,OAAOC,KAAK;WAC/FD,OAAOY,QAAQ;IAGtB,CAAC,EACF,GAAGR;IAEJ,MAAMS,kBAAkBrB,OAAMsB,OAAO,CAAC;QACpC,MAAMC,cAAcnB,MAAMoB,IAAI;QAE9B,OAAOb,QAAQE,MAAM,CAACL,CAAAA,SAAUK,OAAOG,aAAaR,SAASe;IAC/D,GAAG;QAACZ;QAASK;QAAcH;QAAQT;KAAM;IAEzC,IAAIiB,gBAAgBI,MAAM,KAAK,GAAG;QAChC,OAAO;0BACL,OAAA,aAAA,CAACxB,cAAAA,EAAAA;gBAAOyB,iBAAc;gBAAOR,KAAI;gBAAaC,MAAK;eAChDL;SAEJ;IACH;IAEA,OAAOO,gBAAgBM,GAAG,CAACnB,CAAAA,SAAUS,aAAaT;AACpD"}

Some files were not shown because too many files have changed in this diff Show More