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

1885
node_modules/@fluentui/react-select/CHANGELOG.md generated vendored Normal file

File diff suppressed because it is too large Load Diff

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

@@ -0,0 +1,15 @@
@fluentui/react-select
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

5
node_modules/@fluentui/react-select/README.md generated vendored Normal file
View File

@@ -0,0 +1,5 @@
# @fluentui/react-select
**React Select components for [Fluent UI React](https://react.fluentui.dev)**
The Select component provides a styled wrapper around the native `<select>` element. It is recommended over Combobox when features like filtering and virtualization are not required. It provides better cross-platform functionality particularly on mobile, and better accessibility.

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

@@ -0,0 +1,89 @@
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { DistributiveOmit } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import { SlotClassNames } from '@fluentui/react-utilities';
/**
* Render the final JSX of Select
*/
export declare const renderSelect_unstable: (state: SelectBaseState) => JSXElement;
/**
* Select component
*/
export declare const Select: ForwardRefComponent<SelectProps>;
export declare type SelectBaseProps = DistributiveOmit<SelectProps, 'appearance' | 'size'>;
export declare type SelectBaseState = DistributiveOmit<SelectState, 'appearance' | 'size'>;
export declare const selectClassNames: SlotClassNames<SelectSlots>;
/**
* Data passed to the `onChange` callback when a new option is selected.
*/
export declare type SelectOnChangeData = {
/**
* Updated `<select>` value, taken from either the selected option's value prop or inner text.
*/
value: string;
};
export declare type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size' | 'onChange'> & {
/**
* Controls the colors and borders of the Select.
*
* @default 'outline'
*/
appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
/**
* Called when the user changes the select element's value by selecting an option.
*/
onChange?: (ev: React_2.ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void;
/**
* Matches the Input sizes
*
* @default 'medium'
*/
size?: 'small' | 'medium' | 'large';
};
export declare type SelectSlots = {
root: NonNullable<Slot<'span'>>;
/** Primary slot: the actual `<select>` element */
select: NonNullable<Slot<'select'>>;
/** the icon, typically a down arrow */
icon: Slot<'span'>;
};
export declare type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;
/**
* Create the state required to render Select.
*
* The returned state can be modified with hooks such as useSelectStyles,
* before being passed to renderSelect.
*
* @param props - props from this instance of Select
* @param ref - reference to the `<select>` element in Select
*/
export declare const useSelect_unstable: (props: SelectProps, ref: React_2.Ref<HTMLSelectElement>) => SelectState;
/**
* Create the base state required to render Select without design-specific props.
*
* @param props - props from this instance of Select (without appearance/size)
* @param ref - reference to the `<select>` element in Select
*/
export declare const useSelectBase_unstable: (props: SelectBaseProps, ref: React_2.Ref<HTMLSelectElement>) => SelectBaseState;
/**
* Apply styling to the Select slots based on the state
*/
export declare const useSelectStyles_unstable: (state: SelectState) => SelectState;
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, {
Select: function() {
return _index.Select;
},
renderSelect_unstable: function() {
return _index.renderSelect_unstable;
},
selectClassNames: function() {
return _index.selectClassNames;
},
useSelectBase_unstable: function() {
return _index.useSelectBase_unstable;
},
useSelectStyles_unstable: function() {
return _index.useSelectStyles_unstable;
},
useSelect_unstable: function() {
return _index.useSelect_unstable;
}
});
const _index = require("./components/Select/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Select.ts"],"sourcesContent":["export type {\n SelectBaseProps,\n SelectBaseState,\n SelectOnChangeData,\n SelectProps,\n SelectSlots,\n SelectState,\n} from './components/Select/index';\nexport {\n Select,\n renderSelect_unstable,\n selectClassNames,\n useSelectStyles_unstable,\n useSelectBase_unstable,\n useSelect_unstable,\n} from './components/Select/index';\n"],"names":["Select","renderSelect_unstable","selectClassNames","useSelectStyles_unstable","useSelectBase_unstable","useSelect_unstable"],"mappings":";;;;;;;;;;;;eASEA,aAAM;;;eACNC,4BAAqB;;;eACrBC,uBAAgB;;;eAEhBE,6BAAsB;;;eADtBD,+BAAwB;;;eAExBE,yBAAkB;;;uBACb,4BAA4B"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Select", {
enumerable: true,
get: function() {
return Select;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useSelect = require("./useSelect");
const _renderSelect = require("./renderSelect");
const _useSelectStylesstyles = require("./useSelectStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Select = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useSelect.useSelect_unstable)(props, ref);
(0, _useSelectStylesstyles.useSelectStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useSelectStyles_unstable')(state);
return (0, _renderSelect.renderSelect_unstable)(state);
});
Select.displayName = 'Select';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSelect_unstable } from './useSelect';\nimport { renderSelect_unstable } from './renderSelect';\nimport { useSelectStyles_unstable } from './useSelectStyles.styles';\nimport type { SelectProps } from './Select.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Select component\n */\nexport const Select: ForwardRefComponent<SelectProps> = React.forwardRef((props, ref) => {\n const state = useSelect_unstable(props, ref);\n\n useSelectStyles_unstable(state);\n\n useCustomStyleHook_unstable('useSelectStyles_unstable')(state);\n\n return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"],"names":["React","useSelect_unstable","renderSelect_unstable","useSelectStyles_unstable","useCustomStyleHook_unstable","Select","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/Select/Select.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\n\nexport type SelectSlots = {\n /*\n * Wrapper for both the select and icon, renders as a `<span>`.\n * The `className` and `style` props on `<Select>` are applied to this slot;\n * All other top-level props are applied to the primary slot, `select`.\n */\n root: NonNullable<Slot<'span'>>;\n\n /** Primary slot: the actual `<select>` element */\n select: NonNullable<Slot<'select'>>;\n\n /** the icon, typically a down arrow */\n icon: Slot<'span'>;\n};\n\nexport type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size' | 'onChange'> & {\n /**\n * Controls the colors and borders of the Select.\n *\n * @default 'outline'\n */\n appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';\n\n /**\n * Called when the user changes the select element's value by selecting an option.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (ev: React.ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void;\n\n /**\n * Matches the Input sizes\n *\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n};\n\nexport type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;\n\nexport type SelectBaseProps = DistributiveOmit<SelectProps, 'appearance' | 'size'>;\nexport type SelectBaseState = DistributiveOmit<SelectState, 'appearance' | 'size'>;\n\n/**\n * Data passed to the `onChange` callback when a new option is selected.\n */\nexport type SelectOnChangeData = {\n /**\n * Updated `<select>` value, taken from either the selected option's value prop or inner text.\n */\n value: string;\n};\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, {
Select: function() {
return _Select.Select;
},
renderSelect_unstable: function() {
return _renderSelect.renderSelect_unstable;
},
selectClassNames: function() {
return _useSelectStylesstyles.selectClassNames;
},
useSelectBase_unstable: function() {
return _useSelect.useSelectBase_unstable;
},
useSelectStyles_unstable: function() {
return _useSelectStylesstyles.useSelectStyles_unstable;
},
useSelect_unstable: function() {
return _useSelect.useSelect_unstable;
}
});
const _Select = require("./Select");
const _renderSelect = require("./renderSelect");
const _useSelect = require("./useSelect");
const _useSelectStylesstyles = require("./useSelectStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Select/index.ts"],"sourcesContent":["export { Select } from './Select';\nexport type {\n SelectBaseProps,\n SelectBaseState,\n SelectOnChangeData,\n SelectProps,\n SelectSlots,\n SelectState,\n} from './Select.types';\nexport { renderSelect_unstable } from './renderSelect';\nexport { useSelectBase_unstable, useSelect_unstable } from './useSelect';\nexport { selectClassNames, useSelectStyles_unstable } from './useSelectStyles.styles';\n"],"names":["Select","renderSelect_unstable","useSelectBase_unstable","useSelect_unstable","selectClassNames","useSelectStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,cAAM;;;eASNC,mCAAqB;;;eAErBG,uCAAgB;;;eADhBF,iCAAsB;;;eACJG,+CAAwB;;;eADlBF,6BAAkB;;;wBAV5B,WAAW;8BASI,iBAAiB;2BACI,cAAc;uCACd,2BAA2B"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Select/renderSelect.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 { SelectBaseState, SelectSlots } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectBaseState): JSXElement => {\n assertSlots<SelectSlots>(state);\n return (\n <state.root>\n <state.select>{state.select.children}</state.select>\n {state.icon && <state.icon />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderSelect_unstable","state","root","select","children","icon"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,8BAA8B,CAACC;QACpCF,2BAAAA,EAAyBE;IACzB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,MAAM,EAAA;0BAAEF,MAAME,MAAM,CAACC,QAAQ;;YACnCH,MAAMI,IAAI,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,IAAI,EAAA,CAAA;;;AAGhC,EAAE"}

View File

@@ -0,0 +1,89 @@
'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, {
useSelectBase_unstable: function() {
return useSelectBase_unstable;
},
useSelect_unstable: function() {
return useSelect_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 _reactutilities = require("@fluentui/react-utilities");
const _reacticons = require("@fluentui/react-icons");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const useSelect_unstable = (props, ref)=>{
// Merge props from surrounding <Field>, if any
props = (0, _reactfield.useFieldControlProps_unstable)(props, {
supportsLabelFor: true,
supportsRequired: true,
supportsSize: true
});
const overrides = (0, _reactsharedcontexts.useOverrides_unstable)();
var _overrides_inputDefaultAppearance;
const { appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', size = 'medium', ...baseProps } = props;
const state = useSelectBase_unstable(baseProps, ref);
if (state.icon) {
var _state_icon;
var _children;
(_children = (_state_icon = state.icon).children) !== null && _children !== void 0 ? _children : _state_icon.children = /*#__PURE__*/ _react.createElement(_reacticons.ChevronDownRegular, null);
}
return {
...state,
appearance,
size
};
};
const useSelectBase_unstable = (props, ref)=>{
const { defaultValue, value, select, icon, root, onChange } = props;
const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
props,
primarySlotTagName: 'select',
excludedPropNames: [
'defaultValue',
'onChange',
'value'
]
});
const state = {
components: {
root: 'span',
select: 'select',
icon: 'span'
},
select: _reactutilities.slot.always(select, {
defaultProps: {
defaultValue,
value,
ref,
...nativeProps.primary
},
elementType: 'select'
}),
icon: _reactutilities.slot.optional(icon, {
renderByDefault: true,
elementType: 'span'
}),
root: _reactutilities.slot.always(root, {
defaultProps: nativeProps.root,
elementType: 'span'
})
};
state.select.onChange = (0, _reactutilities.useEventCallback)((event)=>{
onChange === null || onChange === void 0 ? void 0 : onChange(event, {
value: event.target.value
});
});
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Select/useSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectBaseProps, SelectBaseState, SelectProps, SelectState } from './Select.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n const overrides = useOverrides();\n\n const { appearance = overrides.inputDefaultAppearance ?? 'outline', size = 'medium', ...baseProps } = props;\n\n const state = useSelectBase_unstable(baseProps, ref);\n\n if (state.icon) {\n state.icon.children ??= <ChevronDownRegular />;\n }\n\n return { ...state, appearance, size };\n};\n\n/**\n * Create the base state required to render Select without design-specific props.\n *\n * @param props - props from this instance of Select (without appearance/size)\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelectBase_unstable = (props: SelectBaseProps, ref: React.Ref<HTMLSelectElement>): SelectBaseState => {\n const { defaultValue, value, select, icon, root, onChange } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'select',\n excludedPropNames: ['defaultValue', 'onChange', 'value'],\n });\n\n const state: SelectBaseState = {\n components: {\n root: 'span',\n select: 'select',\n icon: 'span',\n },\n select: slot.always(select, {\n defaultProps: {\n defaultValue,\n value,\n ref,\n ...nativeProps.primary,\n },\n elementType: 'select',\n }),\n icon: slot.optional(icon, {\n renderByDefault: true,\n elementType: 'span',\n }),\n root: slot.always(root, {\n defaultProps: nativeProps.root,\n elementType: 'span',\n }),\n };\n\n state.select.onChange = useEventCallback(event => {\n onChange?.(event, { value: (event.target as HTMLSelectElement).value });\n });\n\n return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useEventCallback","slot","ChevronDownRegular","useOverrides_unstable","useOverrides","useSelect_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","overrides","appearance","inputDefaultAppearance","size","baseProps","state","useSelectBase_unstable","icon","children","defaultValue","value","select","root","onChange","nativeProps","primarySlotTagName","excludedPropNames","components","always","defaultProps","primary","elementType","optional","renderByDefault","event","target"],"mappings":"AAAA;;;;;;;;;;;;0BAyCaoB;eAAAA;;IAvBAZ,kBAAAA;;;;;iEAhBU,QAAQ;4BACe,wBAAwB;gCACJ,4BAA4B;4BAC3D,wBAAwB;qCAEL,kCAAkC;AAWjF,2BAA2B,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,YAAQR,yCAAAA,EAA8BQ,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAMC,gBAAYP,0CAAAA;QAEGO;IAArB,MAAM,EAAEC,aAAaD,CAAAA,oCAAAA,UAAUE,sBAAAA,AAAsB,MAAA,QAAhCF,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAAEG,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGT;IAEtG,MAAMU,QAAQC,uBAAuBF,WAAWR;IAEhD,IAAIS,MAAME,IAAI,EAAE;YACdF;;QAAAA,CAAAA,YAAAA,CAAAA,cAAAA,MAAME,IAAI,AAAJA,EAAKC,QAAAA,MAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAXH,YAAWG,QAAAA,GAAAA,WAAAA,GAAa,OAAA,aAAA,CAACjB,8BAAAA,EAAAA;IAC3B;IAEA,OAAO;QAAE,GAAGc,KAAK;QAAEJ;QAAYE;IAAK;AACtC,EAAE;AAQK,+BAA+B,CAACR,OAAwBC;IAC7D,MAAM,EAAEa,YAAY,EAAEC,KAAK,EAAEC,MAAM,EAAEJ,IAAI,EAAEK,IAAI,EAAEC,QAAQ,EAAE,GAAGlB;IAE9D,MAAMmB,kBAAc1B,yCAAAA,EAA0B;QAC5CO;QACAoB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAgB;YAAY;SAAQ;IAC1D;IAEA,MAAMX,QAAyB;QAC7BY,YAAY;YACVL,MAAM;YACND,QAAQ;YACRJ,MAAM;QACR;QACAI,QAAQrB,oBAAAA,CAAK4B,MAAM,CAACP,QAAQ;YAC1BQ,cAAc;gBACZV;gBACAC;gBACAd;gBACA,GAAGkB,YAAYM,OAAO;YACxB;YACAC,aAAa;QACf;QACAd,MAAMjB,oBAAAA,CAAKgC,QAAQ,CAACf,MAAM;YACxBgB,iBAAiB;YACjBF,aAAa;QACf;QACAT,MAAMtB,oBAAAA,CAAK4B,MAAM,CAACN,MAAM;YACtBO,cAAcL,YAAYF,IAAI;YAC9BS,aAAa;QACf;IACF;IAEAhB,MAAMM,MAAM,CAACE,QAAQ,OAAGxB,gCAAAA,EAAiBmC,CAAAA;QACvCX,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWW,OAAO;YAAEd,OAAQc,MAAMC,MAAM,CAAuBf,KAAK;QAAC;IACvE;IAEA,OAAOL;AACT,EAAE"}

View File

@@ -0,0 +1,568 @@
'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, {
selectClassNames: function() {
return selectClassNames;
},
useSelectStyles_unstable: function() {
return useSelectStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const selectClassNames = {
root: 'fui-Select',
select: 'fui-Select__select',
icon: 'fui-Select__icon'
};
const iconSizes = {
small: '16px',
medium: '20px',
large: '24px'
};
//TODO: Should fieldHeights be a set of global design tokens or constants?
const fieldHeights = {
small: '24px',
medium: '32px',
large: '40px'
};
/* Since the <select> element must span the full width and cannot have children,
* the right padding needs to be calculated from the sum of the following:
* 1. Field padding-right
* 2. Icon width
* 3. Content-icon spacing
* 4. Content inner padding
*/ const paddingRight = {
small: `calc(${_reacttheme.tokens.spacingHorizontalSNudge}
+ ${iconSizes.small}
+ ${_reacttheme.tokens.spacingHorizontalXXS}
+ ${_reacttheme.tokens.spacingHorizontalXXS})`,
medium: `calc(${_reacttheme.tokens.spacingHorizontalMNudge}
+ ${iconSizes.medium}
+ ${_reacttheme.tokens.spacingHorizontalXXS}
+ ${_reacttheme.tokens.spacingHorizontalXXS})`,
large: `calc(${_reacttheme.tokens.spacingHorizontalM}
+ ${iconSizes.large}
+ ${_reacttheme.tokens.spacingHorizontalSNudge}
+ ${_reacttheme.tokens.spacingHorizontalSNudge})`
};
/* Left padding is calculated from the outer padding + inner content padding values
* since <select> can't have additional child content or custom inner layout */ const paddingLeft = {
small: `calc(${_reacttheme.tokens.spacingHorizontalSNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`,
medium: `calc(${_reacttheme.tokens.spacingHorizontalMNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`,
large: `calc(${_reacttheme.tokens.spacingHorizontalM} + ${_reacttheme.tokens.spacingHorizontalSNudge})`
};
/* end of shared values */ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
Bt984gj: "f122n59",
B7ck84d: "f1ewtqcl",
mc9l5x: "f22iagw",
Eh141a: "flvyvdh",
Bahqtrf: "fk6fouc",
qhf8xq: "f10pi13n",
h62rwi: "f7ll8cq",
d9w3h3: 0,
B3778ie: 0,
B4j8arr: 0,
Bl18szs: 0,
Blrzh8d: "fe5s0lv",
li1rpt: "f1gw3sf2",
Bsft5z2: "f13zj6fq",
Dlnsje: "fhwjr99",
E3zdtr: "f1mdlcz9",
By385i5: "fo72kxq",
Eqx8gd: [
"f1n6gb5g",
"f15yvnhg"
],
B1piin3: [
"f15yvnhg",
"f1n6gb5g"
],
b1kco5: "f1yk9hq",
Ba2ppi3: "fhwpy7i",
F2fol1: "f14ee0xe",
lck23g: "f1xhbsuh",
wi16st: "fsrmcvb",
ywj3b2: "f1t3k7v9",
umuwi5: "fjw5xc1",
Blcqepd: "f1xdyd5c",
nplu4u: "fatpbeo",
Bioka5o: "fb7uyps",
Bnupc0a: "fx04xgm",
bing71: "f1c7in40"
}
}, {
d: [
".f122n59{align-items:center;}",
".f1ewtqcl{box-sizing:border-box;}",
".f22iagw{display:flex;}",
".flvyvdh{flex-wrap:nowrap;}",
".fk6fouc{font-family:var(--fontFamilyBase);}",
".f10pi13n{position:relative;}",
".f7ll8cq::after{background-image:linear-gradient(\n 0deg,\n var(--colorCompoundBrandStroke) 0%,\n var(--colorCompoundBrandStroke) 50%,\n transparent 50%,\n transparent 100%\n );}",
[
".fe5s0lv::after{border-radius:0 0 var(--borderRadiusMedium) var(--borderRadiusMedium);}",
{
p: -1
}
],
".f1gw3sf2::after{box-sizing:border-box;}",
".f13zj6fq::after{content:\"\";}",
".fhwjr99::after{height:var(--borderRadiusMedium);}",
".f1mdlcz9::after{position:absolute;}",
".fo72kxq::after{bottom:0;}",
".f1n6gb5g::after{left:0;}",
".f15yvnhg::after{right:0;}",
".f1yk9hq::after{transform:scaleX(0);}",
".fhwpy7i::after{transition-property:transform;}",
".f14ee0xe::after{transition-duration:var(--durationUltraFast);}",
".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}"
],
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)"
}
]
],
w: [
".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);}"
]
});
const useSelectStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
Bowrso0: "fqrijq1",
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: "faev5xe",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
E5pizo: "f1couhl3",
B7ck84d: "f1ewtqcl",
sj55zd: "f19n0e5",
Bceei9c: "f1k6fduh",
Bh6795r: "fqerorx",
B2u0y6b: "f6dzj5z",
Byoj8tv: "f1qch9an",
z8tnut: "f1g0x7ka",
B3aqqti: "fatbyko",
Brovlpu: "f1grzc83",
Bxa1mx5: "f19shzzi"
},
disabled: {
De3pzq: "f1c21dwh",
g2u3we: "f1jj8ep1",
h3c5rm: [
"f15xbau",
"fy0fskl"
],
B9xav0g: "f4ikngz",
zhjwy3: [
"fy0fskl",
"f15xbau"
],
sj55zd: "f1s2aq7o",
Bceei9c: "fdrzuqr",
Bcq6wej: "f9dbb4x",
Jcjdmf: [
"f3qs60o",
"f5u9ap2"
],
sc4o1m: "fwd1oij",
Bosien3: [
"f5u9ap2",
"f3qs60o"
]
},
disabledUnderline: {
g2u3we: "fgig46g",
h3c5rm: [
"f1mxt3zg",
"fziff3p"
],
B9xav0g: "f4ikngz",
zhjwy3: [
"fziff3p",
"f1mxt3zg"
]
},
small: {
Bqenvij: "frvgh55",
uwmqm3: [
"f1xile11",
"fqznh8f"
],
z189sj: [
"fiqd4sw",
"f11fkzut"
],
Bahqtrf: "fk6fouc",
Be2twd7: "fy9rknc",
Bhrd7zp: "figsok6",
Bg96gwp: "fwrc4pm"
},
medium: {
Bqenvij: "f1d2rq10",
uwmqm3: [
"f1e60jzv",
"f135dnwl"
],
z189sj: [
"f154vowv",
"flqamny"
],
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi"
},
large: {
Bqenvij: "fbhnoac",
uwmqm3: [
"fnphzt9",
"flt1dlf"
],
z189sj: [
"f1xi5ia2",
"f1xi1l47"
],
Bahqtrf: "fk6fouc",
Be2twd7: "fod5ikn",
Bhrd7zp: "figsok6",
Bg96gwp: "faaz57k"
},
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: "fm9niy"
},
outlineInteractive: {
Bgoe8wy: "fvcxoqz",
Bwzppfd: [
"f1ub3y4t",
"f1m52nbi"
],
oetu4i: "flmw63s",
gg5e9n: [
"f1m52nbi",
"f1ub3y4t"
],
B6oc9vd: "fvs00aa",
ak43y8: [
"f1assf6x",
"f4ruux4"
],
wmxk5l: "fqhmt4z",
B50zh58: [
"f4ruux4",
"f1assf6x"
]
},
underline: {
De3pzq: "f1c21dwh",
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
Bgfg5da: "fd91s9p",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "fokr779",
C8i20h: "fb77jct"
},
"filled-lighter": {
De3pzq: "fxugw4r"
},
"filled-darker": {
De3pzq: "f16xq7d1"
},
invalid: {
tvckwq: "fs4k3qj",
gk2u95: [
"fcee079",
"fmyw78r"
],
hhx65j: "f1fgmyf4",
Bxowmz0: [
"fmyw78r",
"fcee079"
]
},
invalidUnderline: {
hhx65j: "f1fgmyf4"
}
}, {
d: [
".fqrijq1{-webkit-appearance:none;-moz-appearance:none;appearance:none;}",
[
".faev5xe{border:1px solid transparent;}",
{
p: -2
}
],
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
".f1couhl3{box-shadow:none;}",
".f1ewtqcl{box-sizing:border-box;}",
".f19n0e5{color:var(--colorNeutralForeground1);}",
".f1k6fduh{cursor:pointer;}",
".fqerorx{flex-grow:1;}",
".f6dzj5z{max-width:100%;}",
".f1qch9an{padding-bottom:0;}",
".f1g0x7ka{padding-top:0;}",
".f1c21dwh{background-color:var(--colorTransparentBackground);}",
".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);}",
".fdrzuqr{cursor:not-allowed;}",
".fgig46g{border-top-color:var(--colorTransparentStrokeDisabled);}",
".f1mxt3zg{border-right-color:var(--colorTransparentStrokeDisabled);}",
".fziff3p{border-left-color:var(--colorTransparentStrokeDisabled);}",
".frvgh55{height:24px;}",
".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}",
".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}",
".fiqd4sw{padding-right:calc(var(--spacingHorizontalSNudge)\n + 16px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}",
".f11fkzut{padding-left:calc(var(--spacingHorizontalSNudge)\n + 16px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}",
".fk6fouc{font-family:var(--fontFamilyBase);}",
".fy9rknc{font-size:var(--fontSizeBase200);}",
".figsok6{font-weight:var(--fontWeightRegular);}",
".fwrc4pm{line-height:var(--lineHeightBase200);}",
".f1d2rq10{height:32px;}",
".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}",
".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}",
".f154vowv{padding-right:calc(var(--spacingHorizontalMNudge)\n + 20px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}",
".flqamny{padding-left:calc(var(--spacingHorizontalMNudge)\n + 20px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}",
".fkhj508{font-size:var(--fontSizeBase300);}",
".f1i3iumi{line-height:var(--lineHeightBase300);}",
".fbhnoac{height:40px;}",
".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}",
".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}",
".f1xi5ia2{padding-right:calc(var(--spacingHorizontalM)\n + 24px\n + var(--spacingHorizontalSNudge)\n + var(--spacingHorizontalSNudge));}",
".f1xi1l47{padding-left:calc(var(--spacingHorizontalM)\n + 24px\n + var(--spacingHorizontalSNudge)\n + var(--spacingHorizontalSNudge));}",
".fod5ikn{font-size:var(--fontSizeBase400);}",
".faaz57k{line-height:var(--lineHeightBase400);}",
".fxugw4r{background-color:var(--colorNeutralBackground1);}",
[
".fm9niy{border:1px solid var(--colorNeutralStroke1);}",
{
p: -2
}
],
".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}",
[
".fd91s9p{border-bottom:1px solid var(--colorNeutralStrokeAccessible);}",
{
p: -1
}
],
[
".fokr779{border-radius:0;}",
{
p: -1
}
],
".fb77jct option{background-color:var(--colorNeutralBackground1);}",
".f16xq7d1{background-color:var(--colorNeutralBackground3);}",
".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);}"
],
f: [
".fatbyko:focus{outline-width:2px;}",
".f1grzc83:focus{outline-style:solid;}",
".f19shzzi:focus{outline-color:transparent;}"
],
m: [
[
"@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);}",
".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}"
],
a: [
".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}",
".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}",
".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}",
".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}"
]
});
const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
icon: {
B7ck84d: "f1ewtqcl",
sj55zd: "fxkbij4",
mc9l5x: "ftgm304",
qhf8xq: "f1euv43f",
Bkecrkj: "f1aehjj5",
Bo70h7d: "fvc9v3g"
},
disabled: {
sj55zd: "f1s2aq7o",
B7iucu3: "f1cyfu5x"
},
small: {
Be2twd7: "f4ybsrx",
Bqenvij: "fd461yt",
j35jbq: [
"f13lnp83",
"f1i5nn0v"
],
a9b677: "fjw5fx7"
},
medium: {
Be2twd7: "fe5j1ua",
Bqenvij: "fjamq6b",
j35jbq: [
"fnyteob",
"f1enpzzf"
],
a9b677: "f64fuq3"
},
large: {
Be2twd7: "f1rt2boy",
Bqenvij: "frvgh55",
j35jbq: [
"f8b87gs",
"fedtrts"
],
a9b677: "fq4mcun"
}
}, {
d: [
".f1ewtqcl{box-sizing:border-box;}",
".fxkbij4{color:var(--colorNeutralStrokeAccessible);}",
".ftgm304{display:block;}",
".f1euv43f{position:absolute;}",
".f1aehjj5{pointer-events:none;}",
".fvc9v3g svg{display:block;}",
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
".f4ybsrx{font-size:16px;}",
".fd461yt{height:16px;}",
".f13lnp83{right:var(--spacingHorizontalSNudge);}",
".f1i5nn0v{left:var(--spacingHorizontalSNudge);}",
".fjw5fx7{width:16px;}",
".fe5j1ua{font-size:20px;}",
".fjamq6b{height:20px;}",
".fnyteob{right:var(--spacingHorizontalMNudge);}",
".f1enpzzf{left:var(--spacingHorizontalMNudge);}",
".f64fuq3{width:20px;}",
".f1rt2boy{font-size:24px;}",
".frvgh55{height:24px;}",
".f8b87gs{right:var(--spacingHorizontalM);}",
".fedtrts{left:var(--spacingHorizontalM);}",
".fq4mcun{width:24px;}"
],
m: [
[
"@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useSelectStyles_unstable = (state)=>{
'use no memo';
const { size, appearance } = state;
const disabled = state.select.disabled;
const invalid = `${state.select['aria-invalid']}` === 'true';
const iconStyles = useIconStyles();
const rootStyles = useRootStyles();
const selectStyles = useSelectStyles();
state.root.className = (0, _react.mergeClasses)(selectClassNames.root, rootStyles.base, state.root.className);
state.select.className = (0, _react.mergeClasses)(selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], !disabled && appearance === 'outline' && selectStyles.outlineInteractive, !disabled && invalid && appearance !== 'underline' && selectStyles.invalid, !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline, disabled && selectStyles.disabled, disabled && appearance === 'underline' && selectStyles.disabledUnderline, state.select.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,251 @@
'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, {
selectClassNames: function() {
return selectClassNames;
},
useSelectStyles_unstable: function() {
return useSelectStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const selectClassNames = {
root: 'fui-Select',
select: 'fui-Select__select',
icon: 'fui-Select__icon'
};
const iconSizes = {
small: '16px',
medium: '20px',
large: '24px'
};
//TODO: Should fieldHeights be a set of global design tokens or constants?
const fieldHeights = {
small: '24px',
medium: '32px',
large: '40px'
};
/* Since the <select> element must span the full width and cannot have children,
* the right padding needs to be calculated from the sum of the following:
* 1. Field padding-right
* 2. Icon width
* 3. Content-icon spacing
* 4. Content inner padding
*/ const paddingRight = {
small: `calc(${_reacttheme.tokens.spacingHorizontalSNudge}
+ ${iconSizes.small}
+ ${_reacttheme.tokens.spacingHorizontalXXS}
+ ${_reacttheme.tokens.spacingHorizontalXXS})`,
medium: `calc(${_reacttheme.tokens.spacingHorizontalMNudge}
+ ${iconSizes.medium}
+ ${_reacttheme.tokens.spacingHorizontalXXS}
+ ${_reacttheme.tokens.spacingHorizontalXXS})`,
large: `calc(${_reacttheme.tokens.spacingHorizontalM}
+ ${iconSizes.large}
+ ${_reacttheme.tokens.spacingHorizontalSNudge}
+ ${_reacttheme.tokens.spacingHorizontalSNudge})`
};
/* Left padding is calculated from the outer padding + inner content padding values
* since <select> can't have additional child content or custom inner layout */ const paddingLeft = {
small: `calc(${_reacttheme.tokens.spacingHorizontalSNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`,
medium: `calc(${_reacttheme.tokens.spacingHorizontalMNudge} + ${_reacttheme.tokens.spacingHorizontalXXS})`,
large: `calc(${_reacttheme.tokens.spacingHorizontalM} + ${_reacttheme.tokens.spacingHorizontalSNudge})`
};
/* end of shared values */ const useRootStyles = (0, _react.makeStyles)({
base: {
alignItems: 'center',
boxSizing: 'border-box',
display: 'flex',
flexWrap: 'nowrap',
fontFamily: _reacttheme.tokens.fontFamilyBase,
position: 'relative',
'&::after': {
backgroundImage: `linear-gradient(
0deg,
${_reacttheme.tokens.colorCompoundBrandStroke} 0%,
${_reacttheme.tokens.colorCompoundBrandStroke} 50%,
transparent 50%,
transparent 100%
)`,
borderRadius: `0 0 ${_reacttheme.tokens.borderRadiusMedium} ${_reacttheme.tokens.borderRadiusMedium}`,
boxSizing: 'border-box',
content: '""',
height: _reacttheme.tokens.borderRadiusMedium,
position: 'absolute',
bottom: '0',
left: '0',
right: '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'
}
}
}
});
const useSelectStyles = (0, _react.makeStyles)({
base: {
appearance: 'none',
border: '1px solid transparent',
borderRadius: _reacttheme.tokens.borderRadiusMedium,
boxShadow: 'none',
boxSizing: 'border-box',
color: _reacttheme.tokens.colorNeutralForeground1,
cursor: 'pointer',
flexGrow: 1,
maxWidth: '100%',
paddingBottom: 0,
paddingTop: 0,
':focus': {
outlineWidth: '2px',
outlineStyle: 'solid',
outlineColor: 'transparent'
}
},
disabled: {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
cursor: 'not-allowed',
'@media (forced-colors: active)': {
..._react.shorthands.borderColor('GrayText')
}
},
disabledUnderline: {
..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStrokeDisabled, _reacttheme.tokens.colorTransparentStrokeDisabled, _reacttheme.tokens.colorNeutralStrokeDisabled)
},
small: {
height: fieldHeights.small,
paddingLeft: paddingLeft.small,
paddingRight: paddingRight.small,
..._reacttheme.typographyStyles.caption1
},
medium: {
height: fieldHeights.medium,
paddingLeft: paddingLeft.medium,
paddingRight: paddingRight.medium,
..._reacttheme.typographyStyles.body1
},
large: {
height: fieldHeights.large,
paddingLeft: paddingLeft.large,
paddingRight: paddingRight.large,
..._reacttheme.typographyStyles.body2
},
outline: {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
border: `1px solid ${_reacttheme.tokens.colorNeutralStroke1}`,
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible
},
outlineInteractive: {
'&:hover': {
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Hover),
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible
},
'&:active': {
..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed),
borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible
}
},
underline: {
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
borderBottom: `1px solid ${_reacttheme.tokens.colorNeutralStrokeAccessible}`,
borderRadius: '0',
'& option': {
// The transparent select bg means the option background must be set so the text is visible in dark themes
backgroundColor: _reacttheme.tokens.colorNeutralBackground1
}
},
'filled-lighter': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1
},
'filled-darker': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground3
},
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
}
}
});
const useIconStyles = (0, _react.makeStyles)({
icon: {
boxSizing: 'border-box',
color: _reacttheme.tokens.colorNeutralStrokeAccessible,
display: 'block',
position: 'absolute',
pointerEvents: 'none',
// the SVG must have display: block for accurate positioning
// otherwise an extra inline space is inserted after the svg element
'& svg': {
display: 'block'
}
},
disabled: {
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
'@media (forced-colors: active)': {
color: 'GrayText'
}
},
small: {
fontSize: iconSizes.small,
height: iconSizes.small,
right: _reacttheme.tokens.spacingHorizontalSNudge,
width: iconSizes.small
},
medium: {
fontSize: iconSizes.medium,
height: iconSizes.medium,
right: _reacttheme.tokens.spacingHorizontalMNudge,
width: iconSizes.medium
},
large: {
fontSize: iconSizes.large,
height: iconSizes.large,
right: _reacttheme.tokens.spacingHorizontalM,
width: iconSizes.large
}
});
const useSelectStyles_unstable = (state)=>{
'use no memo';
const { size, appearance } = state;
const disabled = state.select.disabled;
const invalid = `${state.select['aria-invalid']}` === 'true';
const iconStyles = useIconStyles();
const rootStyles = useRootStyles();
const selectStyles = useSelectStyles();
state.root.className = (0, _react.mergeClasses)(selectClassNames.root, rootStyles.base, state.root.className);
state.select.className = (0, _react.mergeClasses)(selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], !disabled && appearance === 'outline' && selectStyles.outlineInteractive, !disabled && invalid && appearance !== 'underline' && selectStyles.invalid, !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline, disabled && selectStyles.disabled, disabled && appearance === 'underline' && selectStyles.disabledUnderline, state.select.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

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, {
Select: function() {
return _Select.Select;
},
renderSelect_unstable: function() {
return _Select.renderSelect_unstable;
},
selectClassNames: function() {
return _Select.selectClassNames;
},
useSelectBase_unstable: function() {
return _Select.useSelectBase_unstable;
},
useSelectStyles_unstable: function() {
return _Select.useSelectStyles_unstable;
},
useSelect_unstable: function() {
return _Select.useSelect_unstable;
}
});
const _Select = require("./Select");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Select,\n selectClassNames,\n renderSelect_unstable,\n useSelectStyles_unstable,\n useSelectBase_unstable,\n useSelect_unstable,\n} from './Select';\nexport type {\n SelectBaseProps,\n SelectBaseState,\n SelectOnChangeData,\n SelectProps,\n SelectSlots,\n SelectState,\n} from './Select';\n"],"names":["Select","selectClassNames","renderSelect_unstable","useSelectStyles_unstable","useSelectBase_unstable","useSelect_unstable"],"mappings":";;;;;;;;;;;;eACEA,cAAM;;;eAENE,6BAAqB;;;eADrBD,wBAAgB;;;eAGhBG,8BAAsB;;;eADtBD,gCAAwB;;;eAExBE,0BAAkB;;;wBACb,WAAW"}

1
node_modules/@fluentui/react-select/lib/Select.js generated vendored Normal file
View File

@@ -0,0 +1 @@
export { Select, renderSelect_unstable, selectClassNames, useSelectStyles_unstable, useSelectBase_unstable, useSelect_unstable } from './components/Select/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Select.ts"],"sourcesContent":["export type {\n SelectBaseProps,\n SelectBaseState,\n SelectOnChangeData,\n SelectProps,\n SelectSlots,\n SelectState,\n} from './components/Select/index';\nexport {\n Select,\n renderSelect_unstable,\n selectClassNames,\n useSelectStyles_unstable,\n useSelectBase_unstable,\n useSelect_unstable,\n} from './components/Select/index';\n"],"names":["Select","renderSelect_unstable","selectClassNames","useSelectStyles_unstable","useSelectBase_unstable","useSelect_unstable"],"mappings":"AAQA,SACEA,MAAM,EACNC,qBAAqB,EACrBC,gBAAgB,EAChBC,wBAAwB,EACxBC,sBAAsB,EACtBC,kBAAkB,QACb,4BAA4B"}

View File

@@ -0,0 +1,15 @@
'use client';
import * as React from 'react';
import { useSelect_unstable } from './useSelect';
import { renderSelect_unstable } from './renderSelect';
import { useSelectStyles_unstable } from './useSelectStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* Select component
*/ export const Select = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useSelect_unstable(props, ref);
useSelectStyles_unstable(state);
useCustomStyleHook_unstable('useSelectStyles_unstable')(state);
return renderSelect_unstable(state);
});
Select.displayName = 'Select';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSelect_unstable } from './useSelect';\nimport { renderSelect_unstable } from './renderSelect';\nimport { useSelectStyles_unstable } from './useSelectStyles.styles';\nimport type { SelectProps } from './Select.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Select component\n */\nexport const Select: ForwardRefComponent<SelectProps> = React.forwardRef((props, ref) => {\n const state = useSelect_unstable(props, ref);\n\n useSelectStyles_unstable(state);\n\n useCustomStyleHook_unstable('useSelectStyles_unstable')(state);\n\n return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"],"names":["React","useSelect_unstable","renderSelect_unstable","useSelectStyles_unstable","useCustomStyleHook_unstable","Select","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQR,mBAAmBM,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOP,sBAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

View File

@@ -0,0 +1 @@
import * as React from 'react';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Select/Select.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\n\nexport type SelectSlots = {\n /*\n * Wrapper for both the select and icon, renders as a `<span>`.\n * The `className` and `style` props on `<Select>` are applied to this slot;\n * All other top-level props are applied to the primary slot, `select`.\n */\n root: NonNullable<Slot<'span'>>;\n\n /** Primary slot: the actual `<select>` element */\n select: NonNullable<Slot<'select'>>;\n\n /** the icon, typically a down arrow */\n icon: Slot<'span'>;\n};\n\nexport type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size' | 'onChange'> & {\n /**\n * Controls the colors and borders of the Select.\n *\n * @default 'outline'\n */\n appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';\n\n /**\n * Called when the user changes the select element's value by selecting an option.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onChange?: (ev: React.ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void;\n\n /**\n * Matches the Input sizes\n *\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n};\n\nexport type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;\n\nexport type SelectBaseProps = DistributiveOmit<SelectProps, 'appearance' | 'size'>;\nexport type SelectBaseState = DistributiveOmit<SelectState, 'appearance' | 'size'>;\n\n/**\n * Data passed to the `onChange` callback when a new option is selected.\n */\nexport type SelectOnChangeData = {\n /**\n * Updated `<select>` value, taken from either the selected option's value prop or inner text.\n */\n value: string;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

View File

@@ -0,0 +1,4 @@
export { Select } from './Select';
export { renderSelect_unstable } from './renderSelect';
export { useSelectBase_unstable, useSelect_unstable } from './useSelect';
export { selectClassNames, useSelectStyles_unstable } from './useSelectStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Select/index.ts"],"sourcesContent":["export { Select } from './Select';\nexport type {\n SelectBaseProps,\n SelectBaseState,\n SelectOnChangeData,\n SelectProps,\n SelectSlots,\n SelectState,\n} from './Select.types';\nexport { renderSelect_unstable } from './renderSelect';\nexport { useSelectBase_unstable, useSelect_unstable } from './useSelect';\nexport { selectClassNames, useSelectStyles_unstable } from './useSelectStyles.styles';\n"],"names":["Select","renderSelect_unstable","useSelectBase_unstable","useSelect_unstable","selectClassNames","useSelectStyles_unstable"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AASlC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,sBAAsB,EAAEC,kBAAkB,QAAQ,cAAc;AACzE,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,2BAA2B"}

View File

@@ -0,0 +1,15 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render the final JSX of Select
*/ export const renderSelect_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsxs(state.root, {
children: [
/*#__PURE__*/ _jsx(state.select, {
children: state.select.children
}),
state.icon && /*#__PURE__*/ _jsx(state.icon, {})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Select/renderSelect.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 { SelectBaseState, SelectSlots } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectBaseState): JSXElement => {\n assertSlots<SelectSlots>(state);\n return (\n <state.root>\n <state.select>{state.select.children}</state.select>\n {state.icon && <state.icon />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderSelect_unstable","state","root","select","children","icon"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IACzB,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,MAAM;0BAAEF,MAAME,MAAM,CAACC,QAAQ;;YACnCH,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;;;AAGhC,EAAE"}

View File

@@ -0,0 +1,83 @@
'use client';
import * as React from 'react';
import { useFieldControlProps_unstable } from '@fluentui/react-field';
import { getPartitionedNativeProps, useEventCallback, slot } from '@fluentui/react-utilities';
import { ChevronDownRegular } from '@fluentui/react-icons';
import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';
/**
* Create the state required to render Select.
*
* The returned state can be modified with hooks such as useSelectStyles,
* before being passed to renderSelect.
*
* @param props - props from this instance of Select
* @param ref - reference to the `<select>` element in Select
*/ export const useSelect_unstable = (props, ref)=>{
// Merge props from surrounding <Field>, if any
props = useFieldControlProps_unstable(props, {
supportsLabelFor: true,
supportsRequired: true,
supportsSize: true
});
const overrides = useOverrides();
var _overrides_inputDefaultAppearance;
const { appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', size = 'medium', ...baseProps } = props;
const state = useSelectBase_unstable(baseProps, ref);
if (state.icon) {
var _state_icon;
var _children;
(_children = (_state_icon = state.icon).children) !== null && _children !== void 0 ? _children : _state_icon.children = /*#__PURE__*/ React.createElement(ChevronDownRegular, null);
}
return {
...state,
appearance,
size
};
};
/**
* Create the base state required to render Select without design-specific props.
*
* @param props - props from this instance of Select (without appearance/size)
* @param ref - reference to the `<select>` element in Select
*/ export const useSelectBase_unstable = (props, ref)=>{
const { defaultValue, value, select, icon, root, onChange } = props;
const nativeProps = getPartitionedNativeProps({
props,
primarySlotTagName: 'select',
excludedPropNames: [
'defaultValue',
'onChange',
'value'
]
});
const state = {
components: {
root: 'span',
select: 'select',
icon: 'span'
},
select: slot.always(select, {
defaultProps: {
defaultValue,
value,
ref,
...nativeProps.primary
},
elementType: 'select'
}),
icon: slot.optional(icon, {
renderByDefault: true,
elementType: 'span'
}),
root: slot.always(root, {
defaultProps: nativeProps.root,
elementType: 'span'
})
};
state.select.onChange = useEventCallback((event)=>{
onChange === null || onChange === void 0 ? void 0 : onChange(event, {
value: event.target.value
});
});
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Select/useSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectBaseProps, SelectBaseState, SelectProps, SelectState } from './Select.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n const overrides = useOverrides();\n\n const { appearance = overrides.inputDefaultAppearance ?? 'outline', size = 'medium', ...baseProps } = props;\n\n const state = useSelectBase_unstable(baseProps, ref);\n\n if (state.icon) {\n state.icon.children ??= <ChevronDownRegular />;\n }\n\n return { ...state, appearance, size };\n};\n\n/**\n * Create the base state required to render Select without design-specific props.\n *\n * @param props - props from this instance of Select (without appearance/size)\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelectBase_unstable = (props: SelectBaseProps, ref: React.Ref<HTMLSelectElement>): SelectBaseState => {\n const { defaultValue, value, select, icon, root, onChange } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'select',\n excludedPropNames: ['defaultValue', 'onChange', 'value'],\n });\n\n const state: SelectBaseState = {\n components: {\n root: 'span',\n select: 'select',\n icon: 'span',\n },\n select: slot.always(select, {\n defaultProps: {\n defaultValue,\n value,\n ref,\n ...nativeProps.primary,\n },\n elementType: 'select',\n }),\n icon: slot.optional(icon, {\n renderByDefault: true,\n elementType: 'span',\n }),\n root: slot.always(root, {\n defaultProps: nativeProps.root,\n elementType: 'span',\n }),\n };\n\n state.select.onChange = useEventCallback(event => {\n onChange?.(event, { value: (event.target as HTMLSelectElement).value });\n });\n\n return state;\n};\n"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useEventCallback","slot","ChevronDownRegular","useOverrides_unstable","useOverrides","useSelect_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","overrides","appearance","inputDefaultAppearance","size","baseProps","state","useSelectBase_unstable","icon","children","defaultValue","value","select","root","onChange","nativeProps","primarySlotTagName","excludedPropNames","components","always","defaultProps","primary","elementType","optional","renderByDefault","event","target"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAC9F,SAASC,kBAAkB,QAAQ,wBAAwB;AAE3D,SAASC,yBAAyBC,YAAY,QAAQ,kCAAkC;AAExF;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,QAAQR,8BAA8BQ,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAMC,YAAYP;QAEGO;IAArB,MAAM,EAAEC,aAAaD,CAAAA,oCAAAA,UAAUE,sBAAsB,cAAhCF,+CAAAA,oCAAoC,SAAS,EAAEG,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGT;IAEtG,MAAMU,QAAQC,uBAAuBF,WAAWR;IAEhD,IAAIS,MAAME,IAAI,EAAE;YACdF;;QAAAA,cAAAA,cAAAA,MAAME,IAAI,EAACC,yDAAXH,YAAWG,yBAAa,oBAACjB;IAC3B;IAEA,OAAO;QAAE,GAAGc,KAAK;QAAEJ;QAAYE;IAAK;AACtC,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMG,yBAAyB,CAACX,OAAwBC;IAC7D,MAAM,EAAEa,YAAY,EAAEC,KAAK,EAAEC,MAAM,EAAEJ,IAAI,EAAEK,IAAI,EAAEC,QAAQ,EAAE,GAAGlB;IAE9D,MAAMmB,cAAc1B,0BAA0B;QAC5CO;QACAoB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAgB;YAAY;SAAQ;IAC1D;IAEA,MAAMX,QAAyB;QAC7BY,YAAY;YACVL,MAAM;YACND,QAAQ;YACRJ,MAAM;QACR;QACAI,QAAQrB,KAAK4B,MAAM,CAACP,QAAQ;YAC1BQ,cAAc;gBACZV;gBACAC;gBACAd;gBACA,GAAGkB,YAAYM,OAAO;YACxB;YACAC,aAAa;QACf;QACAd,MAAMjB,KAAKgC,QAAQ,CAACf,MAAM;YACxBgB,iBAAiB;YACjBF,aAAa;QACf;QACAT,MAAMtB,KAAK4B,MAAM,CAACN,MAAM;YACtBO,cAAcL,YAAYF,IAAI;YAC9BS,aAAa;QACf;IACF;IAEAhB,MAAMM,MAAM,CAACE,QAAQ,GAAGxB,iBAAiBmC,CAAAA;QACvCX,qBAAAA,+BAAAA,SAAWW,OAAO;YAAEd,OAAO,AAACc,MAAMC,MAAM,CAAuBf,KAAK;QAAC;IACvE;IAEA,OAAOL;AACT,EAAE"}

View File

@@ -0,0 +1,321 @@
'use client';
import { __styles, mergeClasses, shorthands } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
export const selectClassNames = {
root: 'fui-Select',
select: 'fui-Select__select',
icon: 'fui-Select__icon'
};
const iconSizes = {
small: '16px',
medium: '20px',
large: '24px'
};
//TODO: Should fieldHeights be a set of global design tokens or constants?
const fieldHeights = {
small: '24px',
medium: '32px',
large: '40px'
};
/* Since the <select> element must span the full width and cannot have children,
* the right padding needs to be calculated from the sum of the following:
* 1. Field padding-right
* 2. Icon width
* 3. Content-icon spacing
* 4. Content inner padding
*/
const paddingRight = {
small: `calc(${tokens.spacingHorizontalSNudge}
+ ${iconSizes.small}
+ ${tokens.spacingHorizontalXXS}
+ ${tokens.spacingHorizontalXXS})`,
medium: `calc(${tokens.spacingHorizontalMNudge}
+ ${iconSizes.medium}
+ ${tokens.spacingHorizontalXXS}
+ ${tokens.spacingHorizontalXXS})`,
large: `calc(${tokens.spacingHorizontalM}
+ ${iconSizes.large}
+ ${tokens.spacingHorizontalSNudge}
+ ${tokens.spacingHorizontalSNudge})`
};
/* Left padding is calculated from the outer padding + inner content padding values
* since <select> can't have additional child content or custom inner layout */
const paddingLeft = {
small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,
medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,
large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`
};
/* end of shared values */
const useRootStyles = /*#__PURE__*/__styles({
base: {
Bt984gj: "f122n59",
B7ck84d: "f1ewtqcl",
mc9l5x: "f22iagw",
Eh141a: "flvyvdh",
Bahqtrf: "fk6fouc",
qhf8xq: "f10pi13n",
h62rwi: "f7ll8cq",
d9w3h3: 0,
B3778ie: 0,
B4j8arr: 0,
Bl18szs: 0,
Blrzh8d: "fe5s0lv",
li1rpt: "f1gw3sf2",
Bsft5z2: "f13zj6fq",
Dlnsje: "fhwjr99",
E3zdtr: "f1mdlcz9",
By385i5: "fo72kxq",
Eqx8gd: ["f1n6gb5g", "f15yvnhg"],
B1piin3: ["f15yvnhg", "f1n6gb5g"],
b1kco5: "f1yk9hq",
Ba2ppi3: "fhwpy7i",
F2fol1: "f14ee0xe",
lck23g: "f1xhbsuh",
wi16st: "fsrmcvb",
ywj3b2: "f1t3k7v9",
umuwi5: "fjw5xc1",
Blcqepd: "f1xdyd5c",
nplu4u: "fatpbeo",
Bioka5o: "fb7uyps",
Bnupc0a: "fx04xgm",
bing71: "f1c7in40"
}
}, {
d: [".f122n59{align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:flex;}", ".flvyvdh{flex-wrap:nowrap;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f10pi13n{position:relative;}", ".f7ll8cq::after{background-image:linear-gradient(\n 0deg,\n var(--colorCompoundBrandStroke) 0%,\n var(--colorCompoundBrandStroke) 50%,\n transparent 50%,\n transparent 100%\n );}", [".fe5s0lv::after{border-radius:0 0 var(--borderRadiusMedium) var(--borderRadiusMedium);}", {
p: -1
}], ".f1gw3sf2::after{box-sizing:border-box;}", ".f13zj6fq::after{content:\"\";}", ".fhwjr99::after{height:var(--borderRadiusMedium);}", ".f1mdlcz9::after{position:absolute;}", ".fo72kxq::after{bottom:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".f1yk9hq::after{transform:scaleX(0);}", ".fhwpy7i::after{transition-property:transform;}", ".f14ee0xe::after{transition-duration:var(--durationUltraFast);}", ".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}"],
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)"
}]],
w: [".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);}"]
});
const useSelectStyles = /*#__PURE__*/__styles({
base: {
Bowrso0: "fqrijq1",
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: "faev5xe",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
E5pizo: "f1couhl3",
B7ck84d: "f1ewtqcl",
sj55zd: "f19n0e5",
Bceei9c: "f1k6fduh",
Bh6795r: "fqerorx",
B2u0y6b: "f6dzj5z",
Byoj8tv: "f1qch9an",
z8tnut: "f1g0x7ka",
B3aqqti: "fatbyko",
Brovlpu: "f1grzc83",
Bxa1mx5: "f19shzzi"
},
disabled: {
De3pzq: "f1c21dwh",
g2u3we: "f1jj8ep1",
h3c5rm: ["f15xbau", "fy0fskl"],
B9xav0g: "f4ikngz",
zhjwy3: ["fy0fskl", "f15xbau"],
sj55zd: "f1s2aq7o",
Bceei9c: "fdrzuqr",
Bcq6wej: "f9dbb4x",
Jcjdmf: ["f3qs60o", "f5u9ap2"],
sc4o1m: "fwd1oij",
Bosien3: ["f5u9ap2", "f3qs60o"]
},
disabledUnderline: {
g2u3we: "fgig46g",
h3c5rm: ["f1mxt3zg", "fziff3p"],
B9xav0g: "f4ikngz",
zhjwy3: ["fziff3p", "f1mxt3zg"]
},
small: {
Bqenvij: "frvgh55",
uwmqm3: ["f1xile11", "fqznh8f"],
z189sj: ["fiqd4sw", "f11fkzut"],
Bahqtrf: "fk6fouc",
Be2twd7: "fy9rknc",
Bhrd7zp: "figsok6",
Bg96gwp: "fwrc4pm"
},
medium: {
Bqenvij: "f1d2rq10",
uwmqm3: ["f1e60jzv", "f135dnwl"],
z189sj: ["f154vowv", "flqamny"],
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi"
},
large: {
Bqenvij: "fbhnoac",
uwmqm3: ["fnphzt9", "flt1dlf"],
z189sj: ["f1xi5ia2", "f1xi1l47"],
Bahqtrf: "fk6fouc",
Be2twd7: "fod5ikn",
Bhrd7zp: "figsok6",
Bg96gwp: "faaz57k"
},
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: "fm9niy"
},
outlineInteractive: {
Bgoe8wy: "fvcxoqz",
Bwzppfd: ["f1ub3y4t", "f1m52nbi"],
oetu4i: "flmw63s",
gg5e9n: ["f1m52nbi", "f1ub3y4t"],
B6oc9vd: "fvs00aa",
ak43y8: ["f1assf6x", "f4ruux4"],
wmxk5l: "fqhmt4z",
B50zh58: ["f4ruux4", "f1assf6x"]
},
underline: {
De3pzq: "f1c21dwh",
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
Bgfg5da: "fd91s9p",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "fokr779",
C8i20h: "fb77jct"
},
"filled-lighter": {
De3pzq: "fxugw4r"
},
"filled-darker": {
De3pzq: "f16xq7d1"
},
invalid: {
tvckwq: "fs4k3qj",
gk2u95: ["fcee079", "fmyw78r"],
hhx65j: "f1fgmyf4",
Bxowmz0: ["fmyw78r", "fcee079"]
},
invalidUnderline: {
hhx65j: "f1fgmyf4"
}
}, {
d: [".fqrijq1{-webkit-appearance:none;-moz-appearance:none;appearance:none;}", [".faev5xe{border:1px solid transparent;}", {
p: -2
}], [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
p: -1
}], ".f1couhl3{box-shadow:none;}", ".f1ewtqcl{box-sizing:border-box;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1k6fduh{cursor:pointer;}", ".fqerorx{flex-grow:1;}", ".f6dzj5z{max-width:100%;}", ".f1qch9an{padding-bottom:0;}", ".f1g0x7ka{padding-top:0;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".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);}", ".fdrzuqr{cursor:not-allowed;}", ".fgig46g{border-top-color:var(--colorTransparentStrokeDisabled);}", ".f1mxt3zg{border-right-color:var(--colorTransparentStrokeDisabled);}", ".fziff3p{border-left-color:var(--colorTransparentStrokeDisabled);}", ".frvgh55{height:24px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fiqd4sw{padding-right:calc(var(--spacingHorizontalSNudge)\n + 16px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".f11fkzut{padding-left:calc(var(--spacingHorizontalSNudge)\n + 16px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1d2rq10{height:32px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f154vowv{padding-right:calc(var(--spacingHorizontalMNudge)\n + 20px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".flqamny{padding-left:calc(var(--spacingHorizontalMNudge)\n + 20px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbhnoac{height:40px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".f1xi5ia2{padding-right:calc(var(--spacingHorizontalM)\n + 24px\n + var(--spacingHorizontalSNudge)\n + var(--spacingHorizontalSNudge));}", ".f1xi1l47{padding-left:calc(var(--spacingHorizontalM)\n + 24px\n + var(--spacingHorizontalSNudge)\n + var(--spacingHorizontalSNudge));}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", [".fm9niy{border:1px solid var(--colorNeutralStroke1);}", {
p: -2
}], ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", [".fd91s9p{border-bottom:1px solid var(--colorNeutralStrokeAccessible);}", {
p: -1
}], [".fokr779{border-radius:0;}", {
p: -1
}], ".fb77jct option{background-color:var(--colorNeutralBackground1);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".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);}"],
f: [".fatbyko:focus{outline-width:2px;}", ".f1grzc83:focus{outline-style:solid;}", ".f19shzzi:focus{outline-color:transparent;}"],
m: [["@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);}", ".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}"],
a: [".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}"]
});
const useIconStyles = /*#__PURE__*/__styles({
icon: {
B7ck84d: "f1ewtqcl",
sj55zd: "fxkbij4",
mc9l5x: "ftgm304",
qhf8xq: "f1euv43f",
Bkecrkj: "f1aehjj5",
Bo70h7d: "fvc9v3g"
},
disabled: {
sj55zd: "f1s2aq7o",
B7iucu3: "f1cyfu5x"
},
small: {
Be2twd7: "f4ybsrx",
Bqenvij: "fd461yt",
j35jbq: ["f13lnp83", "f1i5nn0v"],
a9b677: "fjw5fx7"
},
medium: {
Be2twd7: "fe5j1ua",
Bqenvij: "fjamq6b",
j35jbq: ["fnyteob", "f1enpzzf"],
a9b677: "f64fuq3"
},
large: {
Be2twd7: "f1rt2boy",
Bqenvij: "frvgh55",
j35jbq: ["f8b87gs", "fedtrts"],
a9b677: "fq4mcun"
}
}, {
d: [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1euv43f{position:absolute;}", ".f1aehjj5{pointer-events:none;}", ".fvc9v3g svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".f13lnp83{right:var(--spacingHorizontalSNudge);}", ".f1i5nn0v{left:var(--spacingHorizontalSNudge);}", ".fjw5fx7{width:16px;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".fnyteob{right:var(--spacingHorizontalMNudge);}", ".f1enpzzf{left:var(--spacingHorizontalMNudge);}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".f8b87gs{right:var(--spacingHorizontalM);}", ".fedtrts{left:var(--spacingHorizontalM);}", ".fq4mcun{width:24px;}"],
m: [["@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}", {
m: "(forced-colors: active)"
}]]
});
/**
* Apply styling to the Select slots based on the state
*/
export const useSelectStyles_unstable = state => {
'use no memo';
const {
size,
appearance
} = state;
const disabled = state.select.disabled;
const invalid = `${state.select['aria-invalid']}` === 'true';
const iconStyles = useIconStyles();
const rootStyles = useRootStyles();
const selectStyles = useSelectStyles();
state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);
state.select.className = mergeClasses(selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], !disabled && appearance === 'outline' && selectStyles.outlineInteractive, !disabled && invalid && appearance !== 'underline' && selectStyles.invalid, !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline, disabled && selectStyles.disabled, disabled && appearance === 'underline' && selectStyles.disabledUnderline, state.select.className);
if (state.icon) {
state.icon.className = mergeClasses(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,235 @@
'use client';
import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
export const selectClassNames = {
root: 'fui-Select',
select: 'fui-Select__select',
icon: 'fui-Select__icon'
};
const iconSizes = {
small: '16px',
medium: '20px',
large: '24px'
};
//TODO: Should fieldHeights be a set of global design tokens or constants?
const fieldHeights = {
small: '24px',
medium: '32px',
large: '40px'
};
/* Since the <select> element must span the full width and cannot have children,
* the right padding needs to be calculated from the sum of the following:
* 1. Field padding-right
* 2. Icon width
* 3. Content-icon spacing
* 4. Content inner padding
*/ const paddingRight = {
small: `calc(${tokens.spacingHorizontalSNudge}
+ ${iconSizes.small}
+ ${tokens.spacingHorizontalXXS}
+ ${tokens.spacingHorizontalXXS})`,
medium: `calc(${tokens.spacingHorizontalMNudge}
+ ${iconSizes.medium}
+ ${tokens.spacingHorizontalXXS}
+ ${tokens.spacingHorizontalXXS})`,
large: `calc(${tokens.spacingHorizontalM}
+ ${iconSizes.large}
+ ${tokens.spacingHorizontalSNudge}
+ ${tokens.spacingHorizontalSNudge})`
};
/* Left padding is calculated from the outer padding + inner content padding values
* since <select> can't have additional child content or custom inner layout */ const paddingLeft = {
small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,
medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,
large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`
};
/* end of shared values */ const useRootStyles = makeStyles({
base: {
alignItems: 'center',
boxSizing: 'border-box',
display: 'flex',
flexWrap: 'nowrap',
fontFamily: tokens.fontFamilyBase,
position: 'relative',
'&::after': {
backgroundImage: `linear-gradient(
0deg,
${tokens.colorCompoundBrandStroke} 0%,
${tokens.colorCompoundBrandStroke} 50%,
transparent 50%,
transparent 100%
)`,
borderRadius: `0 0 ${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium}`,
boxSizing: 'border-box',
content: '""',
height: tokens.borderRadiusMedium,
position: 'absolute',
bottom: '0',
left: '0',
right: '0',
transform: 'scaleX(0)',
transitionProperty: 'transform',
transitionDuration: tokens.durationUltraFast,
transitionDelay: tokens.curveAccelerateMid,
'@media screen and (prefers-reduced-motion: reduce)': {
transitionDuration: '0.01ms',
transitionDelay: '0.01ms'
}
},
'&:focus-within::after': {
transform: 'scaleX(1)',
transitionProperty: 'transform',
transitionDuration: tokens.durationNormal,
transitionDelay: tokens.curveDecelerateMid,
'@media screen and (prefers-reduced-motion: reduce)': {
transitionDuration: '0.01ms',
transitionDelay: '0.01ms'
}
}
}
});
const useSelectStyles = makeStyles({
base: {
appearance: 'none',
border: '1px solid transparent',
borderRadius: tokens.borderRadiusMedium,
boxShadow: 'none',
boxSizing: 'border-box',
color: tokens.colorNeutralForeground1,
cursor: 'pointer',
flexGrow: 1,
maxWidth: '100%',
paddingBottom: 0,
paddingTop: 0,
':focus': {
outlineWidth: '2px',
outlineStyle: 'solid',
outlineColor: 'transparent'
}
},
disabled: {
backgroundColor: tokens.colorTransparentBackground,
...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
color: tokens.colorNeutralForegroundDisabled,
cursor: 'not-allowed',
'@media (forced-colors: active)': {
...shorthands.borderColor('GrayText')
}
},
disabledUnderline: {
...shorthands.borderColor(tokens.colorTransparentStrokeDisabled, tokens.colorTransparentStrokeDisabled, tokens.colorNeutralStrokeDisabled)
},
small: {
height: fieldHeights.small,
paddingLeft: paddingLeft.small,
paddingRight: paddingRight.small,
...typographyStyles.caption1
},
medium: {
height: fieldHeights.medium,
paddingLeft: paddingLeft.medium,
paddingRight: paddingRight.medium,
...typographyStyles.body1
},
large: {
height: fieldHeights.large,
paddingLeft: paddingLeft.large,
paddingRight: paddingRight.large,
...typographyStyles.body2
},
outline: {
backgroundColor: tokens.colorNeutralBackground1,
border: `1px solid ${tokens.colorNeutralStroke1}`,
borderBottomColor: tokens.colorNeutralStrokeAccessible
},
outlineInteractive: {
'&:hover': {
...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
borderBottomColor: tokens.colorNeutralStrokeAccessible
},
'&:active': {
...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
borderBottomColor: tokens.colorNeutralStrokeAccessible
}
},
underline: {
backgroundColor: tokens.colorTransparentBackground,
borderBottom: `1px solid ${tokens.colorNeutralStrokeAccessible}`,
borderRadius: '0',
'& option': {
// The transparent select bg means the option background must be set so the text is visible in dark themes
backgroundColor: tokens.colorNeutralBackground1
}
},
'filled-lighter': {
backgroundColor: tokens.colorNeutralBackground1
},
'filled-darker': {
backgroundColor: tokens.colorNeutralBackground3
},
invalid: {
':not(:focus-within),:hover:not(:focus-within)': {
...shorthands.borderColor(tokens.colorPaletteRedBorder2)
}
},
invalidUnderline: {
':not(:focus-within),:hover:not(:focus-within)': {
borderBottomColor: tokens.colorPaletteRedBorder2
}
}
});
const useIconStyles = makeStyles({
icon: {
boxSizing: 'border-box',
color: tokens.colorNeutralStrokeAccessible,
display: 'block',
position: 'absolute',
pointerEvents: 'none',
// the SVG must have display: block for accurate positioning
// otherwise an extra inline space is inserted after the svg element
'& svg': {
display: 'block'
}
},
disabled: {
color: tokens.colorNeutralForegroundDisabled,
'@media (forced-colors: active)': {
color: 'GrayText'
}
},
small: {
fontSize: iconSizes.small,
height: iconSizes.small,
right: tokens.spacingHorizontalSNudge,
width: iconSizes.small
},
medium: {
fontSize: iconSizes.medium,
height: iconSizes.medium,
right: tokens.spacingHorizontalMNudge,
width: iconSizes.medium
},
large: {
fontSize: iconSizes.large,
height: iconSizes.large,
right: tokens.spacingHorizontalM,
width: iconSizes.large
}
});
/**
* Apply styling to the Select slots based on the state
*/ export const useSelectStyles_unstable = (state)=>{
'use no memo';
const { size, appearance } = state;
const disabled = state.select.disabled;
const invalid = `${state.select['aria-invalid']}` === 'true';
const iconStyles = useIconStyles();
const rootStyles = useRootStyles();
const selectStyles = useSelectStyles();
state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);
state.select.className = mergeClasses(selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], !disabled && appearance === 'outline' && selectStyles.outlineInteractive, !disabled && invalid && appearance !== 'underline' && selectStyles.invalid, !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline, disabled && selectStyles.disabled, disabled && appearance === 'underline' && selectStyles.disabledUnderline, state.select.className);
if (state.icon) {
state.icon.className = mergeClasses(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

1
node_modules/@fluentui/react-select/lib/index.js generated vendored Normal file
View File

@@ -0,0 +1 @@
export { Select, selectClassNames, renderSelect_unstable, useSelectStyles_unstable, useSelectBase_unstable, useSelect_unstable } from './Select';

1
node_modules/@fluentui/react-select/lib/index.js.map generated vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Select,\n selectClassNames,\n renderSelect_unstable,\n useSelectStyles_unstable,\n useSelectBase_unstable,\n useSelect_unstable,\n} from './Select';\nexport type {\n SelectBaseProps,\n SelectBaseState,\n SelectOnChangeData,\n SelectProps,\n SelectSlots,\n SelectState,\n} from './Select';\n"],"names":["Select","selectClassNames","renderSelect_unstable","useSelectStyles_unstable","useSelectBase_unstable","useSelect_unstable"],"mappings":"AAAA,SACEA,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,sBAAsB,EACtBC,kBAAkB,QACb,WAAW"}

51
node_modules/@fluentui/react-select/package.json generated vendored Normal file
View File

@@ -0,0 +1,51 @@
{
"name": "@fluentui/react-select",
"version": "9.5.0",
"description": "Fluent UI React Select component",
"main": "lib-commonjs/index.js",
"module": "lib/index.js",
"typings": "./dist/index.d.ts",
"sideEffects": false,
"repository": {
"type": "git",
"url": "https://github.com/microsoft/fluentui"
},
"license": "MIT",
"dependencies": {
"@fluentui/react-field": "^9.5.0",
"@fluentui/react-icons": "^2.0.245",
"@fluentui/react-jsx-runtime": "^9.4.1",
"@fluentui/react-shared-contexts": "^9.26.2",
"@fluentui/react-theme": "^9.2.1",
"@fluentui/react-utilities": "^9.26.2",
"@griffel/react": "^1.5.32",
"@swc/helpers": "^0.5.1"
},
"peerDependencies": {
"@types/react": ">=16.14.0 <20.0.0",
"@types/react-dom": ">=16.9.0 <20.0.0",
"react": ">=16.14.0 <20.0.0",
"react-dom": ">=16.14.0 <20.0.0"
},
"beachball": {
"disallowedChangeTypes": [
"major",
"prerelease"
]
},
"exports": {
".": {
"types": "./dist/index.d.ts",
"node": "./lib-commonjs/index.js",
"import": "./lib/index.js",
"require": "./lib-commonjs/index.js"
},
"./package.json": "./package.json"
},
"files": [
"*.md",
"dist/*.d.ts",
"lib",
"lib-commonjs"
]
}