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

3085
node_modules/@fluentui/react-link/CHANGELOG.md generated vendored Normal file

File diff suppressed because it is too large Load Diff

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

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

39
node_modules/@fluentui/react-link/README.md generated vendored Normal file
View File

@@ -0,0 +1,39 @@
# @fluentui/react-link
**Link components for [Fluent UI](https://react.fluentui.dev/)**
Links reference data that a user can follow by clicking or tapping it.
## Usage
To import Link:
```js
import { Link } from '@fluentui/react-components';
```
### Examples
```jsx
<Link>This is a link</Link>
<Link href="https://www.bing.com">This is a link</Link>
<Link href="https://www.bing.com" appearance="subtle">This is a link</Link>
<Link href="https://www.bing.com" disabled>This is a link</Link>
<Link href="https://www.bing.com" target="_blank">This is a link</Link>
<Link as="button" appearance="subtle">This is a link</Link>
```
See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
Alternatively, run Storybook locally with:
1. `yarn start`
2. Select `react-link` from the list.
### Specification
See [SPEC.md](./SPEC.md).
### Migration Guide
If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Link implementation.

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

@@ -0,0 +1,104 @@
import { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';
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 type { SlotClassNames } from '@fluentui/react-utilities';
/**
* A Link is a reference to data that a user can follow by clicking or tapping it.
*/
export declare const Link: ForwardRefComponent<LinkProps>;
/**
* Link props without design-specific props (appearance).
* Use this when building a base link that is unstyled or uses a custom design system.
*/
export declare type LinkBaseProps = DistributiveOmit<LinkProps, 'appearance'>;
/**
* Link state without design-specific state (appearance, backgroundAppearance).
*/
export declare type LinkBaseState = DistributiveOmit<LinkState, 'appearance' | 'backgroundAppearance'>;
export declare const linkClassNames: SlotClassNames<LinkSlots>;
export declare const linkContextDefaultValue: LinkContextValue;
export declare const LinkContextProvider: React_2.Provider<LinkContextValue | undefined>;
export declare type LinkContextValue = {
inline?: boolean;
};
export declare type LinkProps = ComponentProps<LinkSlots> & {
/**
* A link can appear either with its default style or subtle.
* If not specified, the link appears with its default styling.
* @default 'default'
*/
appearance?: 'default' | 'subtle';
/**
* Whether the link is disabled.
* @default false
*/
disabled?: boolean;
/**
* When set, allows the link to be focusable even when it has been disabled. This is used in scenarios where it is
* important to keep a consistent tab order for screen reader and keyboard users.
* @default false
*/
disabledFocusable?: boolean;
/**
* If true, changes styling when the link is being used alongside other text content.
* @default false
*/
inline?: boolean;
};
export declare type LinkSlots = {
/**
* Root of the component that renders as either an <a> or a <button> tag.
*/
root: Slot<'a', 'button' | 'span'>;
};
export declare type LinkState = ComponentState<LinkSlots> & Required<Pick<LinkProps, 'appearance' | 'disabled' | 'disabledFocusable' | 'inline'>> & {
backgroundAppearance?: BackgroundAppearanceContextValue;
};
/**
* Renders a Link component by passing the state defined props to the appropriate slots.
*/
export declare const renderLink_unstable: (state: LinkBaseState) => JSXElement;
/**
* Given user props, defines default props for the Link, calls useLinkState_unstable, and returns processed state.
* @param props - User provided props to the Link component.
* @param ref - User provided ref to be passed to the Link component.
*/
export declare const useLink_unstable: (props: LinkProps, ref: React_2.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>) => LinkState;
/**
* Base hook for Link component, which manages state related to ARIA, keyboard handling,
* disabled behavior, and slot structure. This hook excludes design-specific props (appearance).
*
* @param props - User provided props to the Link component.
* @param ref - User provided ref to be passed to the Link component.
*/
export declare const useLinkBase_unstable: (props: LinkBaseProps, ref: React_2.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>) => LinkBaseState;
export declare const useLinkContext: () => LinkContextValue;
/**
* The useLinkState_unstable hook processes the Link state.
* @param state - Link state to mutate.
*/
export declare const useLinkState_unstable: (state: LinkBaseState) => LinkBaseState;
export declare const useLinkStyles_unstable: (state: LinkState) => LinkState;
export { }

44
node_modules/@fluentui/react-link/lib-commonjs/Link.js generated vendored Normal file
View File

@@ -0,0 +1,44 @@
"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, {
Link: function() {
return _index.Link;
},
LinkContextProvider: function() {
return _contexts.LinkContextProvider;
},
linkClassNames: function() {
return _index.linkClassNames;
},
linkContextDefaultValue: function() {
return _contexts.linkContextDefaultValue;
},
renderLink_unstable: function() {
return _index.renderLink_unstable;
},
useLinkBase_unstable: function() {
return _index.useLinkBase_unstable;
},
useLinkContext: function() {
return _contexts.useLinkContext;
},
useLinkState_unstable: function() {
return _index.useLinkState_unstable;
},
useLinkStyles_unstable: function() {
return _index.useLinkStyles_unstable;
},
useLink_unstable: function() {
return _index.useLink_unstable;
}
});
const _index = require("./components/Link/index");
const _contexts = require("./contexts");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Link.ts"],"sourcesContent":["export type { LinkProps, LinkSlots, LinkState, LinkBaseProps, LinkBaseState } from './components/Link/index';\nexport {\n Link,\n linkClassNames,\n renderLink_unstable,\n useLinkState_unstable,\n useLinkStyles_unstable,\n useLink_unstable,\n useLinkBase_unstable,\n} from './components/Link/index';\nexport type { LinkContextValue } from './contexts';\nexport { LinkContextProvider, linkContextDefaultValue, useLinkContext } from './contexts';\n"],"names":["Link","linkClassNames","renderLink_unstable","useLinkState_unstable","useLinkStyles_unstable","useLink_unstable","useLinkBase_unstable","LinkContextProvider","linkContextDefaultValue","useLinkContext"],"mappings":";;;;;;;;;;;IAEEA;0BAAI;;uBASsB;eAAnBO;;;eARPN,qBAAc;;;eAQcO,iCAAuB;;;eAPnDN,0BAAmB;;;eAInBI,2BAAoB;;;eAGiCG,wBAAc;;;eANnEN,4BAAqB;;0BACC;eAAtBC;;;eACAC,uBAAgB;;;uBAEX,0BAA0B;0BAE4C,aAAa"}

View File

@@ -0,0 +1,25 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Link", {
enumerable: true,
get: function() {
return Link;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useLink = require("./useLink");
const _useLinkStylesstyles = require("./useLinkStyles.styles");
const _renderLink = require("./renderLink");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Link = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useLink.useLink_unstable)(props, ref);
(0, _useLinkStylesstyles.useLinkStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useLinkStyles_unstable')(state);
return (0, _renderLink.renderLink_unstable)(state);
// Work around some small mismatches in inferred types which don't matter in practice
});
Link.displayName = 'Link';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Link/Link.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useLink_unstable } from './useLink';\nimport { useLinkStyles_unstable } from './useLinkStyles.styles';\nimport { renderLink_unstable } from './renderLink';\nimport type { LinkProps } from './Link.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A Link is a reference to data that a user can follow by clicking or tapping it.\n */\nexport const Link: ForwardRefComponent<LinkProps> = React.forwardRef((props, ref) => {\n const state = useLink_unstable(props, ref);\n\n useLinkStyles_unstable(state);\n\n useCustomStyleHook_unstable('useLinkStyles_unstable')(state);\n\n return renderLink_unstable(state);\n // Work around some small mismatches in inferred types which don't matter in practice\n}) as ForwardRefComponent<LinkProps>;\n\nLink.displayName = 'Link';\n"],"names":["React","useLink_unstable","useLinkStyles_unstable","renderLink_unstable","useCustomStyleHook_unstable","Link","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;yBACE,YAAY;qCACN,yBAAyB;4BAC5B,eAAe;qCAGP,kCAAkC;AAKvE,MAAMK,OAAAA,WAAAA,GAAuCL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,YAAQR,yBAAAA,EAAiBM,OAAOC;QAEtCN,2CAAAA,EAAuBO;QAEvBL,gDAAAA,EAA4B,0BAA0BK;IAEtD,WAAON,+BAAAA,EAAoBM;AAC3B,qFAAqF;AACvF,GAAqC;AAErCJ,KAAKK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* Link state without design-specific state (appearance, backgroundAppearance).
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Link/Link.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';\n\nexport type LinkSlots = {\n /**\n * Root of the component that renders as either an <a> or a <button> tag.\n */\n root: Slot<'a', 'button' | 'span'>;\n};\n\nexport type LinkProps = ComponentProps<LinkSlots> & {\n /**\n * A link can appear either with its default style or subtle.\n * If not specified, the link appears with its default styling.\n * @default 'default'\n */\n appearance?: 'default' | 'subtle';\n\n /**\n * Whether the link is disabled.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * When set, allows the link to be focusable even when it has been disabled. This is used in scenarios where it is\n * important to keep a consistent tab order for screen reader and keyboard users.\n * @default false\n */\n disabledFocusable?: boolean;\n\n /**\n * If true, changes styling when the link is being used alongside other text content.\n * @default false\n */\n inline?: boolean;\n};\n\n/**\n * Link props without design-specific props (appearance).\n * Use this when building a base link that is unstyled or uses a custom design system.\n */\nexport type LinkBaseProps = DistributiveOmit<LinkProps, 'appearance'>;\n\nexport type LinkState = ComponentState<LinkSlots> &\n Required<Pick<LinkProps, 'appearance' | 'disabled' | 'disabledFocusable' | 'inline'>> & {\n backgroundAppearance?: BackgroundAppearanceContextValue;\n };\n\n/**\n * Link state without design-specific state (appearance, backgroundAppearance).\n */\nexport type LinkBaseState = DistributiveOmit<LinkState, 'appearance' | 'backgroundAppearance'>;\n"],"names":[],"mappings":"AAiDA;;CAEC,GACD,WAA+F"}

View File

@@ -0,0 +1,38 @@
"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, {
Link: function() {
return _Link.Link;
},
linkClassNames: function() {
return _useLinkStylesstyles.linkClassNames;
},
renderLink_unstable: function() {
return _renderLink.renderLink_unstable;
},
useLinkBase_unstable: function() {
return _useLink.useLinkBase_unstable;
},
useLinkState_unstable: function() {
return _useLinkState.useLinkState_unstable;
},
useLinkStyles_unstable: function() {
return _useLinkStylesstyles.useLinkStyles_unstable;
},
useLink_unstable: function() {
return _useLink.useLink_unstable;
}
});
const _Link = require("./Link");
const _renderLink = require("./renderLink");
const _useLink = require("./useLink");
const _useLinkState = require("./useLinkState");
const _useLinkStylesstyles = require("./useLinkStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Link/index.ts"],"sourcesContent":["export { Link } from './Link';\nexport type { LinkBaseProps, LinkBaseState, LinkProps, LinkSlots, LinkState } from './Link.types';\nexport { renderLink_unstable } from './renderLink';\nexport { useLink_unstable, useLinkBase_unstable } from './useLink';\nexport { useLinkState_unstable } from './useLinkState';\nexport { linkClassNames, useLinkStyles_unstable } from './useLinkStyles.styles';\n"],"names":["Link","renderLink_unstable","useLink_unstable","useLinkBase_unstable","useLinkState_unstable","linkClassNames","useLinkStyles_unstable"],"mappings":";;;;;;;;;;;IAASA;yBAAI;;IAKJK;kDAAc;;;eAHdJ,+BAAmB;;;eACDE,6BAAoB;;;eACtCC,mCAAqB;;;eACLE,2CAAsB;;;eAFtCJ,yBAAgB;;;sBAHJ,SAAS;4BAEM,eAAe;yBACI,YAAY;8BAC7B,iBAAiB;qCACA,yBAAyB"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Link/renderLink.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 { LinkSlots, LinkBaseState } from './Link.types';\n\n/**\n * Renders a Link component by passing the state defined props to the appropriate slots.\n */\nexport const renderLink_unstable = (state: LinkBaseState): JSXElement => {\n assertSlots<LinkSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderLink_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,sBAAsB,CAACC;QAClCF,2BAAAA,EAAuBE;IAEvB,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

View File

@@ -0,0 +1,65 @@
'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, {
useLinkBase_unstable: function() {
return useLinkBase_unstable;
},
useLink_unstable: function() {
return useLink_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 _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useLinkState = require("./useLinkState");
const _linkContext = require("../../contexts/linkContext");
const useLink_unstable = (props, ref)=>{
const backgroundAppearance = (0, _reactsharedcontexts.useBackgroundAppearance)();
const { appearance = 'default', ...baseProps } = props;
const state = useLinkBase_unstable(baseProps, ref);
return {
appearance,
backgroundAppearance,
...state
};
};
const useLinkBase_unstable = (props, ref)=>{
const { inline: inlineContext } = (0, _linkContext.useLinkContext)();
const { disabled = false, disabledFocusable = false, inline = false } = props;
const elementType = props.as || (props.href ? 'a' : 'button');
// Casting is required here as `as` prop would break the union between `a`, `button` and `span` types
const propsWithAssignedAs = {
role: elementType === 'span' ? 'button' : undefined,
type: elementType === 'button' ? 'button' : undefined,
...props,
as: elementType
};
const state = {
// Props passed at the top-level
disabled,
disabledFocusable,
inline: inline !== null && inline !== void 0 ? inline : !!inlineContext,
// Slots definition
components: {
root: elementType
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(elementType, {
ref,
...propsWithAssignedAs
}), {
elementType
})
};
(0, _useLinkState.useLinkState_unstable)(state);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Link/useLink.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\nimport { useLinkState_unstable } from './useLinkState';\nimport type { LinkBaseProps, LinkBaseState, LinkProps, LinkState } from './Link.types';\nimport { useLinkContext } from '../../contexts/linkContext';\n\n/**\n * Given user props, defines default props for the Link, calls useLinkState_unstable, and returns processed state.\n * @param props - User provided props to the Link component.\n * @param ref - User provided ref to be passed to the Link component.\n */\nexport const useLink_unstable = (\n props: LinkProps,\n ref: React.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>,\n): LinkState => {\n const backgroundAppearance = useBackgroundAppearance();\n const { appearance = 'default', ...baseProps } = props;\n\n const state = useLinkBase_unstable(baseProps, ref);\n\n return {\n appearance,\n backgroundAppearance,\n ...state,\n };\n};\n\n/**\n * Base hook for Link component, which manages state related to ARIA, keyboard handling,\n * disabled behavior, and slot structure. This hook excludes design-specific props (appearance).\n *\n * @param props - User provided props to the Link component.\n * @param ref - User provided ref to be passed to the Link component.\n */\nexport const useLinkBase_unstable = (\n props: LinkBaseProps,\n ref: React.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>,\n): LinkBaseState => {\n const { inline: inlineContext } = useLinkContext();\n const { disabled = false, disabledFocusable = false, inline = false } = props;\n\n const elementType = props.as || (props.href ? 'a' : 'button');\n\n // Casting is required here as `as` prop would break the union between `a`, `button` and `span` types\n const propsWithAssignedAs = {\n role: elementType === 'span' ? 'button' : undefined,\n type: elementType === 'button' ? 'button' : undefined,\n ...props,\n as: elementType,\n } as LinkBaseProps;\n\n const state: LinkBaseState = {\n // Props passed at the top-level\n disabled,\n disabledFocusable,\n inline: inline ?? !!inlineContext,\n\n // Slots definition\n components: {\n root: elementType,\n },\n\n root: slot.always(\n getIntrinsicElementProps<LinkBaseProps>(elementType, {\n ref,\n ...propsWithAssignedAs,\n } as const),\n { elementType },\n ),\n };\n\n useLinkState_unstable(state);\n\n return state;\n};\n"],"names":["React","getIntrinsicElementProps","slot","useBackgroundAppearance","useLinkState_unstable","useLinkContext","useLink_unstable","props","ref","backgroundAppearance","appearance","baseProps","state","useLinkBase_unstable","inline","inlineContext","disabled","disabledFocusable","elementType","as","href","propsWithAssignedAs","role","undefined","type","components","root","always"],"mappings":"AAAA;;;;;;;;;;;;wBAqCaa;eAAAA;;oBAvBAP;;;;;iEAZU,QAAQ;gCACgB,4BAA4B;qCACnC,kCAAkC;8BACpC,iBAAiB;6BAExB,6BAA6B;AAOrD,MAAMA,mBAAmB,CAC9BC,OACAC;IAEA,MAAMC,2BAAuBN,4CAAAA;IAC7B,MAAM,EAAEO,aAAa,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAEjD,MAAMK,QAAQC,qBAAqBF,WAAWH;IAE9C,OAAO;QACLE;QACAD;QACA,GAAGG,KAAK;IACV;AACF,EAAE;AASK,6BAA6B,CAClCL,OACAC;IAEA,MAAM,EAAEM,QAAQC,aAAa,EAAE,OAAGV,2BAAAA;IAClC,MAAM,EAAEW,WAAW,KAAK,EAAEC,oBAAoB,KAAK,EAAEH,SAAS,KAAK,EAAE,GAAGP;IAExE,MAAMW,cAAcX,MAAMY,EAAE,IAAKZ,CAAAA,MAAMa,IAAI,GAAG,MAAM,QAAA,CAAO;IAE3D,qGAAqG;IACrG,MAAMC,sBAAsB;QAC1BC,MAAMJ,gBAAgB,SAAS,WAAWK;QAC1CC,MAAMN,gBAAgB,WAAW,WAAWK;QAC5C,GAAGhB,KAAK;QACRY,IAAID;IACN;IAEA,MAAMN,QAAuB;QAC3B,gCAAgC;QAChCI;QACAC;QACAH,QAAQA,WAAAA,QAAAA,WAAAA,KAAAA,IAAAA,SAAU,CAAC,CAACC;QAEpB,mBAAmB;QACnBU,YAAY;YACVC,MAAMR;QACR;QAEAQ,MAAMxB,oBAAAA,CAAKyB,MAAM,KACf1B,wCAAAA,EAAwCiB,aAAa;YACnDV;YACA,GAAGa,mBAAmB;QACxB,IACA;YAAEH;QAAY;IAElB;QAEAd,mCAAAA,EAAsBQ;IAEtB,OAAOA;AACT,EAAE"}

View File

@@ -0,0 +1,59 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useLinkState_unstable", {
enumerable: true,
get: function() {
return useLinkState_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _keyboardkeys = require("@fluentui/keyboard-keys");
const useLinkState_unstable = (state)=>{
const { disabled, disabledFocusable } = state;
const { onClick, onKeyDown, role, tabIndex } = state.root;
// Add href for anchor elements.
if (state.root.as === 'a') {
state.root.href = disabled ? undefined : state.root.href;
// Add role="link" for disabled and disabledFocusable links.
if (disabled || disabledFocusable) {
state.root.role = role || 'link';
}
}
// Add tabIndex=0 for anchor and span elements.
if (state.root.as === 'a' || state.root.as === 'span') {
state.root.tabIndex = tabIndex !== null && tabIndex !== void 0 ? tabIndex : disabled && !disabledFocusable ? undefined : 0;
}
// Disallow click event when component is disabled and eat events when disabledFocusable is set to true.
state.root.onClick = (ev)=>{
if (disabled || disabledFocusable) {
ev.preventDefault();
} else {
onClick === null || onClick === void 0 ? void 0 : onClick(ev);
}
};
// Disallow keydown event when component is disabled and eat events when disabledFocusable is set to true.
state.root.onKeyDown = (ev)=>{
const keyPressed = ev.key === _keyboardkeys.Enter || ev.key === _keyboardkeys.Space;
if ((disabled || disabledFocusable) && keyPressed) {
ev.preventDefault();
ev.stopPropagation();
} else {
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(ev);
// if there is already onKeyDown provided - respect it
if (state.root.as === 'span' && !!state.root.onClick && !onKeyDown && keyPressed) {
ev.preventDefault();
ev.currentTarget.click();
}
}
};
// Set the aria-disabled and disabled props correctly.
state.disabled = disabled || disabledFocusable;
state.root['aria-disabled'] = disabled || disabledFocusable || undefined;
if (state.root.as === 'button') {
state.root.disabled = disabled && !disabledFocusable;
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Link/useLinkState.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport type { LinkBaseState } from './Link.types';\n\n/**\n * The useLinkState_unstable hook processes the Link state.\n * @param state - Link state to mutate.\n */\nexport const useLinkState_unstable = (state: LinkBaseState): LinkBaseState => {\n const { disabled, disabledFocusable } = state;\n const { onClick, onKeyDown, role, tabIndex } = state.root;\n\n // Add href for anchor elements.\n if (state.root.as === 'a') {\n state.root.href = disabled ? undefined : state.root.href;\n\n // Add role=\"link\" for disabled and disabledFocusable links.\n if (disabled || disabledFocusable) {\n state.root.role = role || 'link';\n }\n }\n\n // Add tabIndex=0 for anchor and span elements.\n if (state.root.as === 'a' || state.root.as === 'span') {\n state.root.tabIndex = tabIndex ?? (disabled && !disabledFocusable ? undefined : 0);\n }\n\n // Disallow click event when component is disabled and eat events when disabledFocusable is set to true.\n state.root.onClick = (ev: React.MouseEvent<HTMLAnchorElement & HTMLButtonElement>) => {\n if (disabled || disabledFocusable) {\n ev.preventDefault();\n } else {\n onClick?.(ev);\n }\n };\n\n // Disallow keydown event when component is disabled and eat events when disabledFocusable is set to true.\n state.root.onKeyDown = (ev: React.KeyboardEvent<HTMLAnchorElement & HTMLButtonElement>) => {\n const keyPressed = ev.key === Enter || ev.key === Space;\n\n if ((disabled || disabledFocusable) && keyPressed) {\n ev.preventDefault();\n ev.stopPropagation();\n } else {\n onKeyDown?.(ev);\n // if there is already onKeyDown provided - respect it\n if (state.root.as === 'span' && !!state.root.onClick && !onKeyDown && keyPressed) {\n ev.preventDefault();\n ev.currentTarget.click();\n }\n }\n };\n\n // Set the aria-disabled and disabled props correctly.\n state.disabled = disabled || disabledFocusable;\n state.root['aria-disabled'] = disabled || disabledFocusable || undefined;\n if (state.root.as === 'button') {\n state.root.disabled = disabled && !disabledFocusable;\n }\n\n return state;\n};\n"],"names":["React","Enter","Space","useLinkState_unstable","state","disabled","disabledFocusable","onClick","onKeyDown","role","tabIndex","root","as","href","undefined","ev","preventDefault","keyPressed","key","stopPropagation","currentTarget","click"],"mappings":";;;;+BAQaG;;;;;;;iEARU,QAAQ;8BACF,0BAA0B;AAOhD,8BAA8B,CAACC;IACpC,MAAM,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE,GAAGF;IACxC,MAAM,EAAEG,OAAO,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGN,MAAMO,IAAI;IAEzD,gCAAgC;IAChC,IAAIP,MAAMO,IAAI,CAACC,EAAE,KAAK,KAAK;QACzBR,MAAMO,IAAI,CAACE,IAAI,GAAGR,WAAWS,YAAYV,MAAMO,IAAI,CAACE,IAAI;QAExD,4DAA4D;QAC5D,IAAIR,YAAYC,mBAAmB;YACjCF,MAAMO,IAAI,CAACF,IAAI,GAAGA,QAAQ;QAC5B;IACF;IAEA,+CAA+C;IAC/C,IAAIL,MAAMO,IAAI,CAACC,EAAE,KAAK,OAAOR,MAAMO,IAAI,CAACC,EAAE,KAAK,QAAQ;QACrDR,MAAMO,IAAI,CAACD,QAAQ,GAAGA,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,WAAaL,YAAY,CAACC,oBAAoBQ,YAAY;IAClF;IAEA,wGAAwG;IACxGV,MAAMO,IAAI,CAACJ,OAAO,GAAG,CAACQ;QACpB,IAAIV,YAAYC,mBAAmB;YACjCS,GAAGC,cAAc;QACnB,OAAO;YACLT,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUQ;QACZ;IACF;IAEA,0GAA0G;IAC1GX,MAAMO,IAAI,CAACH,SAAS,GAAG,CAACO;QACtB,MAAME,aAAaF,GAAGG,GAAG,KAAKjB,mBAAAA,IAASc,GAAGG,GAAG,KAAKhB,mBAAAA;QAElD,IAAKG,CAAAA,YAAYC,iBAAAA,CAAgB,IAAMW,YAAY;YACjDF,GAAGC,cAAc;YACjBD,GAAGI,eAAe;QACpB,OAAO;YACLX,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAYO;YACZ,sDAAsD;YACtD,IAAIX,MAAMO,IAAI,CAACC,EAAE,KAAK,UAAU,CAAC,CAACR,MAAMO,IAAI,CAACJ,OAAO,IAAI,CAACC,aAAaS,YAAY;gBAChFF,GAAGC,cAAc;gBACjBD,GAAGK,aAAa,CAACC,KAAK;YACxB;QACF;IACF;IAEA,sDAAsD;IACtDjB,MAAMC,QAAQ,GAAGA,YAAYC;IAC7BF,MAAMO,IAAI,CAAC,gBAAgB,GAAGN,YAAYC,qBAAqBQ;IAC/D,IAAIV,MAAMO,IAAI,CAACC,EAAE,KAAK,UAAU;QAC9BR,MAAMO,IAAI,CAACN,QAAQ,GAAGA,YAAY,CAACC;IACrC;IAEA,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,189 @@
'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, {
linkClassNames: function() {
return linkClassNames;
},
useLinkStyles_unstable: function() {
return useLinkStyles_unstable;
}
});
const _react = require("@griffel/react");
const linkClassNames = {
root: 'fui-Link'
};
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
focusIndicator: {
Bttzg6e: "fhgqx19",
B3uz8dt: "f1olyrje",
B6ihwck: "f1p93eir",
g9k6zt: "f1nev41a"
},
root: {
B486eqv: "f2hkw1w",
De3pzq: "f3rmtva",
B7ck84d: "f1ewtqcl",
sj55zd: "fyind8e",
Bceei9c: "f1k6fduh",
mc9l5x: "f1w7gpdv",
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
jrapky: 0,
Frg6f3: 0,
t21cq0: 0,
B6of3ja: 0,
B74szlk: "f1s184ao",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1mk8lai",
B68tc82: 0,
Bmxbyg5: 0,
Bpg54ce: "fnbmjn9",
fsow6f: [
"f1o700av",
"fes3tcz"
],
w71qe1: "f1iuv45f",
Bkioxbp: "f1cmlufx",
ygn44y: "f9n3di6",
famaaq: "f1ids18y",
Bde5pd6: "f1tx3yz7",
Bi91k9c: "f1deo86v",
i089h6: "f1eh06m1",
lj723h: "f1iescvh"
},
button: {
icvyot: "f1ern45e",
vrafjx: [
"f1n71otn",
"f1deefiw"
],
oivjwe: "f1h8hb77",
wvpqe5: [
"f1deefiw",
"f1n71otn"
]
},
href: {
Be2twd7: "fjoy568"
},
subtle: {
sj55zd: "f2yjg6r",
Bde5pd6: "f1tx3yz7",
Bi91k9c: "fj1cjhr",
i089h6: "f1eh06m1",
lj723h: "fhucn0c"
},
inline: {
w71qe1: "f13mvf36"
},
disabled: {
w71qe1: "f1iuv45f",
sj55zd: "f1s2aq7o",
Bceei9c: "fdrzuqr",
Bde5pd6: "fbnuktb",
Bi91k9c: "fvgxktp",
i089h6: "fljg2da",
lj723h: "f19wldhg"
},
inverted: {
sj55zd: "f1qz2gb0",
Bi91k9c: "f1ujg2k6",
lj723h: "f1ebemlp"
},
brand: {
sj55zd: "f179xftw",
Bi91k9c: "f1sk1dtk",
lj723h: "f182g21t"
}
}, {
d: [
".fhgqx19[data-fui-focus-visible]{text-decoration-color:var(--colorStrokeFocus2);}",
".f1olyrje[data-fui-focus-visible]{text-decoration-line:underline;}",
".f1p93eir[data-fui-focus-visible]{text-decoration-style:double;}",
".f1nev41a[data-fui-focus-visible]{outline-style:none;}",
".f3rmtva{background-color:transparent;}",
".f1ewtqcl{box-sizing:border-box;}",
".fyind8e{color:var(--colorBrandForegroundLink);}",
".f1k6fduh{cursor:pointer;}",
".f1w7gpdv{display:inline;}",
".fk6fouc{font-family:var(--fontFamilyBase);}",
".fkhj508{font-size:var(--fontSizeBase300);}",
".figsok6{font-weight:var(--fontWeightRegular);}",
[
".f1s184ao{margin:0;}",
{
p: -1
}
],
[
".f1mk8lai{padding:0;}",
{
p: -1
}
],
[
".fnbmjn9{overflow:inherit;}",
{
p: -1
}
],
".f1o700av{text-align:left;}",
".fes3tcz{text-align:right;}",
".f1iuv45f{text-decoration-line:none;}",
".f1cmlufx{text-decoration-thickness:var(--strokeWidthThin);}",
".f9n3di6{text-overflow:inherit;}",
".f1ids18y{-webkit-user-select:text;-moz-user-select:text;user-select:text;}",
".f1ern45e{border-top-style:none;}",
".f1n71otn{border-right-style:none;}",
".f1deefiw{border-left-style:none;}",
".f1h8hb77{border-bottom-style:none;}",
".fjoy568{font-size:inherit;}",
".f2yjg6r{color:var(--colorNeutralForeground2Link);}",
".f13mvf36{text-decoration-line:underline;}",
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
".fdrzuqr{cursor:not-allowed;}",
".f1qz2gb0{color:var(--colorBrandForegroundInverted);}",
".f179xftw{color:var(--colorNeutralForegroundInvertedLink);}"
],
i: [
".f2hkw1w:focus-visible{outline-style:none;}"
],
h: [
".f1tx3yz7:hover{text-decoration-line:underline;}",
".f1deo86v:hover{color:var(--colorBrandForegroundLinkHover);}",
".fj1cjhr:hover{color:var(--colorNeutralForeground2LinkHover);}",
".fbnuktb:hover{text-decoration-line:none;}",
".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}",
".f1ujg2k6:hover{color:var(--colorBrandForegroundInverted);}",
".f1sk1dtk:hover{color:var(--colorNeutralForegroundInvertedLinkHover);}"
],
a: [
".f1eh06m1:active{text-decoration-line:underline;}",
".f1iescvh:active{color:var(--colorBrandForegroundLinkPressed);}",
".fhucn0c:active{color:var(--colorNeutralForeground2LinkPressed);}",
".fljg2da:active{text-decoration-line:none;}",
".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}",
".f1ebemlp:active{color:var(--colorBrandForegroundInverted);}",
".f182g21t:active{color:var(--colorNeutralForegroundInvertedLinkPressed);}"
]
});
const useLinkStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const { appearance, disabled, inline, root, backgroundAppearance } = state;
state.root.className = (0, _react.mergeClasses)(linkClassNames.root, styles.root, styles.focusIndicator, root.as === 'a' && root.href && styles.href, root.as === 'button' && styles.button, appearance === 'subtle' && styles.subtle, backgroundAppearance === 'inverted' && styles.inverted, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,126 @@
'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, {
linkClassNames: function() {
return linkClassNames;
},
useLinkStyles_unstable: function() {
return useLinkStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttabster = require("@fluentui/react-tabster");
const _reacttheme = require("@fluentui/react-theme");
const linkClassNames = {
root: 'fui-Link'
};
const useStyles = (0, _react.makeStyles)({
focusIndicator: (0, _reacttabster.createCustomFocusIndicatorStyle)({
textDecorationColor: _reacttheme.tokens.colorStrokeFocus2,
textDecorationLine: 'underline',
textDecorationStyle: 'double',
outlineStyle: 'none'
}),
// Common styles.
root: {
':focus-visible': {
outlineStyle: 'none'
},
backgroundColor: 'transparent',
boxSizing: 'border-box',
color: _reacttheme.tokens.colorBrandForegroundLink,
cursor: 'pointer',
display: 'inline',
fontFamily: _reacttheme.tokens.fontFamilyBase,
fontSize: _reacttheme.tokens.fontSizeBase300,
fontWeight: _reacttheme.tokens.fontWeightRegular,
margin: '0',
padding: '0',
overflow: 'inherit',
textAlign: 'left',
textDecorationLine: 'none',
textDecorationThickness: _reacttheme.tokens.strokeWidthThin,
textOverflow: 'inherit',
userSelect: 'text',
':hover': {
textDecorationLine: 'underline',
color: _reacttheme.tokens.colorBrandForegroundLinkHover
},
':active': {
textDecorationLine: 'underline',
color: _reacttheme.tokens.colorBrandForegroundLinkPressed
}
},
// Overrides when the Link renders as a button.
button: {
..._react.shorthands.borderStyle('none')
},
// Overrides when an href is present so the Link renders as an anchor.
href: {
fontSize: 'inherit'
},
// Overrides when the Link appears subtle.
subtle: {
color: _reacttheme.tokens.colorNeutralForeground2Link,
':hover': {
textDecorationLine: 'underline',
color: _reacttheme.tokens.colorNeutralForeground2LinkHover
},
':active': {
textDecorationLine: 'underline',
color: _reacttheme.tokens.colorNeutralForeground2LinkPressed
}
},
// Overrides when the Link is rendered inline within text.
inline: {
textDecorationLine: 'underline'
},
// Overrides when the Link is disabled.
disabled: {
textDecorationLine: 'none',
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
cursor: 'not-allowed',
':hover': {
textDecorationLine: 'none',
color: _reacttheme.tokens.colorNeutralForegroundDisabled
},
':active': {
textDecorationLine: 'none',
color: _reacttheme.tokens.colorNeutralForegroundDisabled
}
},
inverted: {
color: _reacttheme.tokens.colorBrandForegroundInverted,
':hover': {
color: _reacttheme.tokens.colorBrandForegroundInverted
},
':active': {
color: _reacttheme.tokens.colorBrandForegroundInverted
}
},
brand: {
color: _reacttheme.tokens.colorNeutralForegroundInvertedLink,
':hover': {
color: _reacttheme.tokens.colorNeutralForegroundInvertedLinkHover
},
':active': {
color: _reacttheme.tokens.colorNeutralForegroundInvertedLinkPressed
}
}
});
const useLinkStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const { appearance, disabled, inline, root, backgroundAppearance } = state;
state.root.className = (0, _react.mergeClasses)(linkClassNames.root, styles.root, styles.focusIndicator, root.as === 'a' && root.href && styles.href, root.as === 'button' && styles.button, appearance === 'subtle' && styles.subtle, backgroundAppearance === 'inverted' && styles.inverted, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,22 @@
"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, {
LinkContextProvider: function() {
return _linkContext.LinkContextProvider;
},
linkContextDefaultValue: function() {
return _linkContext.linkContextDefaultValue;
},
useLinkContext: function() {
return _linkContext.useLinkContext;
}
});
const _linkContext = require("./linkContext");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { LinkContextValue } from './linkContext';\nexport { LinkContextProvider, linkContextDefaultValue, useLinkContext } from './linkContext';\n"],"names":["LinkContextProvider","linkContextDefaultValue","useLinkContext"],"mappings":";;;;;;;;;;;;eACSA,gCAAmB;;;eAAEC,oCAAuB;;;eAAEC,2BAAc;;;6BAAQ,gBAAgB"}

View File

@@ -0,0 +1,33 @@
'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, {
LinkContextProvider: function() {
return LinkContextProvider;
},
linkContextDefaultValue: function() {
return linkContextDefaultValue;
},
useLinkContext: function() {
return useLinkContext;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const LinkContext = /*#__PURE__*/ _react.createContext(undefined);
const linkContextDefaultValue = {
inline: false
};
const LinkContextProvider = LinkContext.Provider;
const useLinkContext = ()=>{
var _React_useContext;
return (_React_useContext = _react.useContext(LinkContext)) !== null && _React_useContext !== void 0 ? _React_useContext : linkContextDefaultValue;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/linkContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nexport type LinkContextValue = {\n inline?: boolean;\n};\n\nconst LinkContext = React.createContext<LinkContextValue | undefined>(undefined);\n\nexport const linkContextDefaultValue: LinkContextValue = {\n inline: false,\n};\n\nexport const LinkContextProvider = LinkContext.Provider;\nexport const useLinkContext = (): LinkContextValue => React.useContext(LinkContext) ?? linkContextDefaultValue;\n"],"names":["React","LinkContext","createContext","undefined","linkContextDefaultValue","inline","LinkContextProvider","Provider","useLinkContext","useContext"],"mappings":"AAAA;;;;;;;;;;;;uBAcaM;eAAAA;;2BAJAF;;;kBAKAI;;;;;iEAbU,QAAQ;AAM/B,MAAMP,4BAAcD,OAAME,aAAa,CAA+BC;AAE/D,MAAMC,0BAA4C;IACvDC,QAAQ;AACV,EAAE;AAEK,4BAA4BJ,YAAYM,QAAQ,CAAC;AACjD,MAAMC,iBAAiB;QAAwBR;WAAAA,CAAAA,oBAAAA,OAAMS,UAAU,CAACR,YAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAiCI;EAAwB"}

View File

@@ -0,0 +1,44 @@
"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, {
Link: function() {
return _Link.Link;
},
LinkContextProvider: function() {
return _contexts.LinkContextProvider;
},
linkClassNames: function() {
return _Link.linkClassNames;
},
linkContextDefaultValue: function() {
return _contexts.linkContextDefaultValue;
},
renderLink_unstable: function() {
return _Link.renderLink_unstable;
},
useLinkBase_unstable: function() {
return _Link.useLinkBase_unstable;
},
useLinkContext: function() {
return _contexts.useLinkContext;
},
useLinkState_unstable: function() {
return _Link.useLinkState_unstable;
},
useLinkStyles_unstable: function() {
return _Link.useLinkStyles_unstable;
},
useLink_unstable: function() {
return _Link.useLink_unstable;
}
});
const _Link = require("./Link");
const _contexts = require("./contexts");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Link,\n linkClassNames,\n renderLink_unstable,\n useLinkState_unstable,\n useLinkStyles_unstable,\n useLink_unstable,\n useLinkBase_unstable,\n} from './Link';\nexport type { LinkProps, LinkSlots, LinkState, LinkBaseProps, LinkBaseState } from './Link';\nexport { linkContextDefaultValue, LinkContextProvider, useLinkContext } from './contexts';\nexport type { LinkContextValue } from './contexts';\n"],"names":["Link","linkClassNames","renderLink_unstable","useLinkState_unstable","useLinkStyles_unstable","useLink_unstable","useLinkBase_unstable","linkContextDefaultValue","LinkContextProvider","useLinkContext"],"mappings":";;;;;;;;;;;IACEA;yBAAI;;uBAS+C;eAAnBQ;;;eARhCP,oBAAc;;;eAQPM,iCAAuB;;;eAP9BL,yBAAmB;;;eAInBI,0BAAoB;;;eAGiCG,wBAAc;;;eANnEN,2BAAqB;;0BACC;eAAtBC;;;eACAC,sBAAgB;;;sBAEX,SAAS;0BAE6D,aAAa"}

2
node_modules/@fluentui/react-link/lib/Link.js generated vendored Normal file
View File

@@ -0,0 +1,2 @@
export { Link, linkClassNames, renderLink_unstable, useLinkState_unstable, useLinkStyles_unstable, useLink_unstable, useLinkBase_unstable } from './components/Link/index';
export { LinkContextProvider, linkContextDefaultValue, useLinkContext } from './contexts';

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

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Link.ts"],"sourcesContent":["export type { LinkProps, LinkSlots, LinkState, LinkBaseProps, LinkBaseState } from './components/Link/index';\nexport {\n Link,\n linkClassNames,\n renderLink_unstable,\n useLinkState_unstable,\n useLinkStyles_unstable,\n useLink_unstable,\n useLinkBase_unstable,\n} from './components/Link/index';\nexport type { LinkContextValue } from './contexts';\nexport { LinkContextProvider, linkContextDefaultValue, useLinkContext } from './contexts';\n"],"names":["Link","linkClassNames","renderLink_unstable","useLinkState_unstable","useLinkStyles_unstable","useLink_unstable","useLinkBase_unstable","LinkContextProvider","linkContextDefaultValue","useLinkContext"],"mappings":"AACA,SACEA,IAAI,EACJC,cAAc,EACdC,mBAAmB,EACnBC,qBAAqB,EACrBC,sBAAsB,EACtBC,gBAAgB,EAChBC,oBAAoB,QACf,0BAA0B;AAEjC,SAASC,mBAAmB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,aAAa"}

View File

@@ -0,0 +1,16 @@
'use client';
import * as React from 'react';
import { useLink_unstable } from './useLink';
import { useLinkStyles_unstable } from './useLinkStyles.styles';
import { renderLink_unstable } from './renderLink';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* A Link is a reference to data that a user can follow by clicking or tapping it.
*/ export const Link = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useLink_unstable(props, ref);
useLinkStyles_unstable(state);
useCustomStyleHook_unstable('useLinkStyles_unstable')(state);
return renderLink_unstable(state);
// Work around some small mismatches in inferred types which don't matter in practice
});
Link.displayName = 'Link';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Link/Link.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useLink_unstable } from './useLink';\nimport { useLinkStyles_unstable } from './useLinkStyles.styles';\nimport { renderLink_unstable } from './renderLink';\nimport type { LinkProps } from './Link.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A Link is a reference to data that a user can follow by clicking or tapping it.\n */\nexport const Link: ForwardRefComponent<LinkProps> = React.forwardRef((props, ref) => {\n const state = useLink_unstable(props, ref);\n\n useLinkStyles_unstable(state);\n\n useCustomStyleHook_unstable('useLinkStyles_unstable')(state);\n\n return renderLink_unstable(state);\n // Work around some small mismatches in inferred types which don't matter in practice\n}) as ForwardRefComponent<LinkProps>;\n\nLink.displayName = 'Link';\n"],"names":["React","useLink_unstable","useLinkStyles_unstable","renderLink_unstable","useCustomStyleHook_unstable","Link","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,sBAAsB,QAAQ,yBAAyB;AAChE,SAASC,mBAAmB,QAAQ,eAAe;AAGnD,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,qBAAuCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,QAAQR,iBAAiBM,OAAOC;IAEtCN,uBAAuBO;IAEvBL,4BAA4B,0BAA0BK;IAEtD,OAAON,oBAAoBM;AAC3B,qFAAqF;AACvF,GAAqC;AAErCJ,KAAKK,WAAW,GAAG"}

View File

@@ -0,0 +1,3 @@
/**
* Link state without design-specific state (appearance, backgroundAppearance).
*/ export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Link/Link.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';\n\nexport type LinkSlots = {\n /**\n * Root of the component that renders as either an <a> or a <button> tag.\n */\n root: Slot<'a', 'button' | 'span'>;\n};\n\nexport type LinkProps = ComponentProps<LinkSlots> & {\n /**\n * A link can appear either with its default style or subtle.\n * If not specified, the link appears with its default styling.\n * @default 'default'\n */\n appearance?: 'default' | 'subtle';\n\n /**\n * Whether the link is disabled.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * When set, allows the link to be focusable even when it has been disabled. This is used in scenarios where it is\n * important to keep a consistent tab order for screen reader and keyboard users.\n * @default false\n */\n disabledFocusable?: boolean;\n\n /**\n * If true, changes styling when the link is being used alongside other text content.\n * @default false\n */\n inline?: boolean;\n};\n\n/**\n * Link props without design-specific props (appearance).\n * Use this when building a base link that is unstyled or uses a custom design system.\n */\nexport type LinkBaseProps = DistributiveOmit<LinkProps, 'appearance'>;\n\nexport type LinkState = ComponentState<LinkSlots> &\n Required<Pick<LinkProps, 'appearance' | 'disabled' | 'disabledFocusable' | 'inline'>> & {\n backgroundAppearance?: BackgroundAppearanceContextValue;\n };\n\n/**\n * Link state without design-specific state (appearance, backgroundAppearance).\n */\nexport type LinkBaseState = DistributiveOmit<LinkState, 'appearance' | 'backgroundAppearance'>;\n"],"names":[],"mappings":"AAiDA;;CAEC,GACD,WAA+F"}

View File

@@ -0,0 +1,5 @@
export { Link } from './Link';
export { renderLink_unstable } from './renderLink';
export { useLink_unstable, useLinkBase_unstable } from './useLink';
export { useLinkState_unstable } from './useLinkState';
export { linkClassNames, useLinkStyles_unstable } from './useLinkStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Link/index.ts"],"sourcesContent":["export { Link } from './Link';\nexport type { LinkBaseProps, LinkBaseState, LinkProps, LinkSlots, LinkState } from './Link.types';\nexport { renderLink_unstable } from './renderLink';\nexport { useLink_unstable, useLinkBase_unstable } from './useLink';\nexport { useLinkState_unstable } from './useLinkState';\nexport { linkClassNames, useLinkStyles_unstable } from './useLinkStyles.styles';\n"],"names":["Link","renderLink_unstable","useLink_unstable","useLinkBase_unstable","useLinkState_unstable","linkClassNames","useLinkStyles_unstable"],"mappings":"AAAA,SAASA,IAAI,QAAQ,SAAS;AAE9B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,gBAAgB,EAAEC,oBAAoB,QAAQ,YAAY;AACnE,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,cAAc,EAAEC,sBAAsB,QAAQ,yBAAyB"}

View File

@@ -0,0 +1,8 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Renders a Link component by passing the state defined props to the appropriate slots.
*/ export const renderLink_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsx(state.root, {});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Link/renderLink.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 { LinkSlots, LinkBaseState } from './Link.types';\n\n/**\n * Renders a Link component by passing the state defined props to the appropriate slots.\n */\nexport const renderLink_unstable = (state: LinkBaseState): JSXElement => {\n assertSlots<LinkSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderLink_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC;IAClCF,YAAuBE;IAEvB,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

View File

@@ -0,0 +1,56 @@
'use client';
import * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import { useBackgroundAppearance } from '@fluentui/react-shared-contexts';
import { useLinkState_unstable } from './useLinkState';
import { useLinkContext } from '../../contexts/linkContext';
/**
* Given user props, defines default props for the Link, calls useLinkState_unstable, and returns processed state.
* @param props - User provided props to the Link component.
* @param ref - User provided ref to be passed to the Link component.
*/ export const useLink_unstable = (props, ref)=>{
const backgroundAppearance = useBackgroundAppearance();
const { appearance = 'default', ...baseProps } = props;
const state = useLinkBase_unstable(baseProps, ref);
return {
appearance,
backgroundAppearance,
...state
};
};
/**
* Base hook for Link component, which manages state related to ARIA, keyboard handling,
* disabled behavior, and slot structure. This hook excludes design-specific props (appearance).
*
* @param props - User provided props to the Link component.
* @param ref - User provided ref to be passed to the Link component.
*/ export const useLinkBase_unstable = (props, ref)=>{
const { inline: inlineContext } = useLinkContext();
const { disabled = false, disabledFocusable = false, inline = false } = props;
const elementType = props.as || (props.href ? 'a' : 'button');
// Casting is required here as `as` prop would break the union between `a`, `button` and `span` types
const propsWithAssignedAs = {
role: elementType === 'span' ? 'button' : undefined,
type: elementType === 'button' ? 'button' : undefined,
...props,
as: elementType
};
const state = {
// Props passed at the top-level
disabled,
disabledFocusable,
inline: inline !== null && inline !== void 0 ? inline : !!inlineContext,
// Slots definition
components: {
root: elementType
},
root: slot.always(getIntrinsicElementProps(elementType, {
ref,
...propsWithAssignedAs
}), {
elementType
})
};
useLinkState_unstable(state);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Link/useLink.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\nimport { useLinkState_unstable } from './useLinkState';\nimport type { LinkBaseProps, LinkBaseState, LinkProps, LinkState } from './Link.types';\nimport { useLinkContext } from '../../contexts/linkContext';\n\n/**\n * Given user props, defines default props for the Link, calls useLinkState_unstable, and returns processed state.\n * @param props - User provided props to the Link component.\n * @param ref - User provided ref to be passed to the Link component.\n */\nexport const useLink_unstable = (\n props: LinkProps,\n ref: React.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>,\n): LinkState => {\n const backgroundAppearance = useBackgroundAppearance();\n const { appearance = 'default', ...baseProps } = props;\n\n const state = useLinkBase_unstable(baseProps, ref);\n\n return {\n appearance,\n backgroundAppearance,\n ...state,\n };\n};\n\n/**\n * Base hook for Link component, which manages state related to ARIA, keyboard handling,\n * disabled behavior, and slot structure. This hook excludes design-specific props (appearance).\n *\n * @param props - User provided props to the Link component.\n * @param ref - User provided ref to be passed to the Link component.\n */\nexport const useLinkBase_unstable = (\n props: LinkBaseProps,\n ref: React.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>,\n): LinkBaseState => {\n const { inline: inlineContext } = useLinkContext();\n const { disabled = false, disabledFocusable = false, inline = false } = props;\n\n const elementType = props.as || (props.href ? 'a' : 'button');\n\n // Casting is required here as `as` prop would break the union between `a`, `button` and `span` types\n const propsWithAssignedAs = {\n role: elementType === 'span' ? 'button' : undefined,\n type: elementType === 'button' ? 'button' : undefined,\n ...props,\n as: elementType,\n } as LinkBaseProps;\n\n const state: LinkBaseState = {\n // Props passed at the top-level\n disabled,\n disabledFocusable,\n inline: inline ?? !!inlineContext,\n\n // Slots definition\n components: {\n root: elementType,\n },\n\n root: slot.always(\n getIntrinsicElementProps<LinkBaseProps>(elementType, {\n ref,\n ...propsWithAssignedAs,\n } as const),\n { elementType },\n ),\n };\n\n useLinkState_unstable(state);\n\n return state;\n};\n"],"names":["React","getIntrinsicElementProps","slot","useBackgroundAppearance","useLinkState_unstable","useLinkContext","useLink_unstable","props","ref","backgroundAppearance","appearance","baseProps","state","useLinkBase_unstable","inline","inlineContext","disabled","disabledFocusable","elementType","as","href","propsWithAssignedAs","role","undefined","type","components","root","always"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,uBAAuB,QAAQ,kCAAkC;AAC1E,SAASC,qBAAqB,QAAQ,iBAAiB;AAEvD,SAASC,cAAc,QAAQ,6BAA6B;AAE5D;;;;CAIC,GACD,OAAO,MAAMC,mBAAmB,CAC9BC,OACAC;IAEA,MAAMC,uBAAuBN;IAC7B,MAAM,EAAEO,aAAa,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAEjD,MAAMK,QAAQC,qBAAqBF,WAAWH;IAE9C,OAAO;QACLE;QACAD;QACA,GAAGG,KAAK;IACV;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,uBAAuB,CAClCN,OACAC;IAEA,MAAM,EAAEM,QAAQC,aAAa,EAAE,GAAGV;IAClC,MAAM,EAAEW,WAAW,KAAK,EAAEC,oBAAoB,KAAK,EAAEH,SAAS,KAAK,EAAE,GAAGP;IAExE,MAAMW,cAAcX,MAAMY,EAAE,IAAKZ,CAAAA,MAAMa,IAAI,GAAG,MAAM,QAAO;IAE3D,qGAAqG;IACrG,MAAMC,sBAAsB;QAC1BC,MAAMJ,gBAAgB,SAAS,WAAWK;QAC1CC,MAAMN,gBAAgB,WAAW,WAAWK;QAC5C,GAAGhB,KAAK;QACRY,IAAID;IACN;IAEA,MAAMN,QAAuB;QAC3B,gCAAgC;QAChCI;QACAC;QACAH,QAAQA,mBAAAA,oBAAAA,SAAU,CAAC,CAACC;QAEpB,mBAAmB;QACnBU,YAAY;YACVC,MAAMR;QACR;QAEAQ,MAAMxB,KAAKyB,MAAM,CACf1B,yBAAwCiB,aAAa;YACnDV;YACA,GAAGa,mBAAmB;QACxB,IACA;YAAEH;QAAY;IAElB;IAEAd,sBAAsBQ;IAEtB,OAAOA;AACT,EAAE"}

View File

@@ -0,0 +1,51 @@
import * as React from 'react';
import { Enter, Space } from '@fluentui/keyboard-keys';
/**
* The useLinkState_unstable hook processes the Link state.
* @param state - Link state to mutate.
*/ export const useLinkState_unstable = (state)=>{
const { disabled, disabledFocusable } = state;
const { onClick, onKeyDown, role, tabIndex } = state.root;
// Add href for anchor elements.
if (state.root.as === 'a') {
state.root.href = disabled ? undefined : state.root.href;
// Add role="link" for disabled and disabledFocusable links.
if (disabled || disabledFocusable) {
state.root.role = role || 'link';
}
}
// Add tabIndex=0 for anchor and span elements.
if (state.root.as === 'a' || state.root.as === 'span') {
state.root.tabIndex = tabIndex !== null && tabIndex !== void 0 ? tabIndex : disabled && !disabledFocusable ? undefined : 0;
}
// Disallow click event when component is disabled and eat events when disabledFocusable is set to true.
state.root.onClick = (ev)=>{
if (disabled || disabledFocusable) {
ev.preventDefault();
} else {
onClick === null || onClick === void 0 ? void 0 : onClick(ev);
}
};
// Disallow keydown event when component is disabled and eat events when disabledFocusable is set to true.
state.root.onKeyDown = (ev)=>{
const keyPressed = ev.key === Enter || ev.key === Space;
if ((disabled || disabledFocusable) && keyPressed) {
ev.preventDefault();
ev.stopPropagation();
} else {
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(ev);
// if there is already onKeyDown provided - respect it
if (state.root.as === 'span' && !!state.root.onClick && !onKeyDown && keyPressed) {
ev.preventDefault();
ev.currentTarget.click();
}
}
};
// Set the aria-disabled and disabled props correctly.
state.disabled = disabled || disabledFocusable;
state.root['aria-disabled'] = disabled || disabledFocusable || undefined;
if (state.root.as === 'button') {
state.root.disabled = disabled && !disabledFocusable;
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Link/useLinkState.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport type { LinkBaseState } from './Link.types';\n\n/**\n * The useLinkState_unstable hook processes the Link state.\n * @param state - Link state to mutate.\n */\nexport const useLinkState_unstable = (state: LinkBaseState): LinkBaseState => {\n const { disabled, disabledFocusable } = state;\n const { onClick, onKeyDown, role, tabIndex } = state.root;\n\n // Add href for anchor elements.\n if (state.root.as === 'a') {\n state.root.href = disabled ? undefined : state.root.href;\n\n // Add role=\"link\" for disabled and disabledFocusable links.\n if (disabled || disabledFocusable) {\n state.root.role = role || 'link';\n }\n }\n\n // Add tabIndex=0 for anchor and span elements.\n if (state.root.as === 'a' || state.root.as === 'span') {\n state.root.tabIndex = tabIndex ?? (disabled && !disabledFocusable ? undefined : 0);\n }\n\n // Disallow click event when component is disabled and eat events when disabledFocusable is set to true.\n state.root.onClick = (ev: React.MouseEvent<HTMLAnchorElement & HTMLButtonElement>) => {\n if (disabled || disabledFocusable) {\n ev.preventDefault();\n } else {\n onClick?.(ev);\n }\n };\n\n // Disallow keydown event when component is disabled and eat events when disabledFocusable is set to true.\n state.root.onKeyDown = (ev: React.KeyboardEvent<HTMLAnchorElement & HTMLButtonElement>) => {\n const keyPressed = ev.key === Enter || ev.key === Space;\n\n if ((disabled || disabledFocusable) && keyPressed) {\n ev.preventDefault();\n ev.stopPropagation();\n } else {\n onKeyDown?.(ev);\n // if there is already onKeyDown provided - respect it\n if (state.root.as === 'span' && !!state.root.onClick && !onKeyDown && keyPressed) {\n ev.preventDefault();\n ev.currentTarget.click();\n }\n }\n };\n\n // Set the aria-disabled and disabled props correctly.\n state.disabled = disabled || disabledFocusable;\n state.root['aria-disabled'] = disabled || disabledFocusable || undefined;\n if (state.root.as === 'button') {\n state.root.disabled = disabled && !disabledFocusable;\n }\n\n return state;\n};\n"],"names":["React","Enter","Space","useLinkState_unstable","state","disabled","disabledFocusable","onClick","onKeyDown","role","tabIndex","root","as","href","undefined","ev","preventDefault","keyPressed","key","stopPropagation","currentTarget","click"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,KAAK,QAAQ,0BAA0B;AAGvD;;;CAGC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpC,MAAM,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE,GAAGF;IACxC,MAAM,EAAEG,OAAO,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGN,MAAMO,IAAI;IAEzD,gCAAgC;IAChC,IAAIP,MAAMO,IAAI,CAACC,EAAE,KAAK,KAAK;QACzBR,MAAMO,IAAI,CAACE,IAAI,GAAGR,WAAWS,YAAYV,MAAMO,IAAI,CAACE,IAAI;QAExD,4DAA4D;QAC5D,IAAIR,YAAYC,mBAAmB;YACjCF,MAAMO,IAAI,CAACF,IAAI,GAAGA,QAAQ;QAC5B;IACF;IAEA,+CAA+C;IAC/C,IAAIL,MAAMO,IAAI,CAACC,EAAE,KAAK,OAAOR,MAAMO,IAAI,CAACC,EAAE,KAAK,QAAQ;QACrDR,MAAMO,IAAI,CAACD,QAAQ,GAAGA,qBAAAA,sBAAAA,WAAaL,YAAY,CAACC,oBAAoBQ,YAAY;IAClF;IAEA,wGAAwG;IACxGV,MAAMO,IAAI,CAACJ,OAAO,GAAG,CAACQ;QACpB,IAAIV,YAAYC,mBAAmB;YACjCS,GAAGC,cAAc;QACnB,OAAO;YACLT,oBAAAA,8BAAAA,QAAUQ;QACZ;IACF;IAEA,0GAA0G;IAC1GX,MAAMO,IAAI,CAACH,SAAS,GAAG,CAACO;QACtB,MAAME,aAAaF,GAAGG,GAAG,KAAKjB,SAASc,GAAGG,GAAG,KAAKhB;QAElD,IAAI,AAACG,CAAAA,YAAYC,iBAAgB,KAAMW,YAAY;YACjDF,GAAGC,cAAc;YACjBD,GAAGI,eAAe;QACpB,OAAO;YACLX,sBAAAA,gCAAAA,UAAYO;YACZ,sDAAsD;YACtD,IAAIX,MAAMO,IAAI,CAACC,EAAE,KAAK,UAAU,CAAC,CAACR,MAAMO,IAAI,CAACJ,OAAO,IAAI,CAACC,aAAaS,YAAY;gBAChFF,GAAGC,cAAc;gBACjBD,GAAGK,aAAa,CAACC,KAAK;YACxB;QACF;IACF;IAEA,sDAAsD;IACtDjB,MAAMC,QAAQ,GAAGA,YAAYC;IAC7BF,MAAMO,IAAI,CAAC,gBAAgB,GAAGN,YAAYC,qBAAqBQ;IAC/D,IAAIV,MAAMO,IAAI,CAACC,EAAE,KAAK,UAAU;QAC9BR,MAAMO,IAAI,CAACN,QAAQ,GAAGA,YAAY,CAACC;IACrC;IAEA,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,112 @@
'use client';
import { shorthands, __styles, mergeClasses } from '@griffel/react';
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
import { tokens } from '@fluentui/react-theme';
export const linkClassNames = {
root: 'fui-Link'
};
const useStyles = /*#__PURE__*/__styles({
focusIndicator: {
Bttzg6e: "fhgqx19",
B3uz8dt: "f1olyrje",
B6ihwck: "f1p93eir",
g9k6zt: "f1nev41a"
},
root: {
B486eqv: "f2hkw1w",
De3pzq: "f3rmtva",
B7ck84d: "f1ewtqcl",
sj55zd: "fyind8e",
Bceei9c: "f1k6fduh",
mc9l5x: "f1w7gpdv",
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
jrapky: 0,
Frg6f3: 0,
t21cq0: 0,
B6of3ja: 0,
B74szlk: "f1s184ao",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1mk8lai",
B68tc82: 0,
Bmxbyg5: 0,
Bpg54ce: "fnbmjn9",
fsow6f: ["f1o700av", "fes3tcz"],
w71qe1: "f1iuv45f",
Bkioxbp: "f1cmlufx",
ygn44y: "f9n3di6",
famaaq: "f1ids18y",
Bde5pd6: "f1tx3yz7",
Bi91k9c: "f1deo86v",
i089h6: "f1eh06m1",
lj723h: "f1iescvh"
},
button: {
icvyot: "f1ern45e",
vrafjx: ["f1n71otn", "f1deefiw"],
oivjwe: "f1h8hb77",
wvpqe5: ["f1deefiw", "f1n71otn"]
},
href: {
Be2twd7: "fjoy568"
},
subtle: {
sj55zd: "f2yjg6r",
Bde5pd6: "f1tx3yz7",
Bi91k9c: "fj1cjhr",
i089h6: "f1eh06m1",
lj723h: "fhucn0c"
},
inline: {
w71qe1: "f13mvf36"
},
disabled: {
w71qe1: "f1iuv45f",
sj55zd: "f1s2aq7o",
Bceei9c: "fdrzuqr",
Bde5pd6: "fbnuktb",
Bi91k9c: "fvgxktp",
i089h6: "fljg2da",
lj723h: "f19wldhg"
},
inverted: {
sj55zd: "f1qz2gb0",
Bi91k9c: "f1ujg2k6",
lj723h: "f1ebemlp"
},
brand: {
sj55zd: "f179xftw",
Bi91k9c: "f1sk1dtk",
lj723h: "f182g21t"
}
}, {
d: [".fhgqx19[data-fui-focus-visible]{text-decoration-color:var(--colorStrokeFocus2);}", ".f1olyrje[data-fui-focus-visible]{text-decoration-line:underline;}", ".f1p93eir[data-fui-focus-visible]{text-decoration-style:double;}", ".f1nev41a[data-fui-focus-visible]{outline-style:none;}", ".f3rmtva{background-color:transparent;}", ".f1ewtqcl{box-sizing:border-box;}", ".fyind8e{color:var(--colorBrandForegroundLink);}", ".f1k6fduh{cursor:pointer;}", ".f1w7gpdv{display:inline;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", [".f1s184ao{margin:0;}", {
p: -1
}], [".f1mk8lai{padding:0;}", {
p: -1
}], [".fnbmjn9{overflow:inherit;}", {
p: -1
}], ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f1iuv45f{text-decoration-line:none;}", ".f1cmlufx{text-decoration-thickness:var(--strokeWidthThin);}", ".f9n3di6{text-overflow:inherit;}", ".f1ids18y{-webkit-user-select:text;-moz-user-select:text;user-select:text;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".fjoy568{font-size:inherit;}", ".f2yjg6r{color:var(--colorNeutralForeground2Link);}", ".f13mvf36{text-decoration-line:underline;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1qz2gb0{color:var(--colorBrandForegroundInverted);}", ".f179xftw{color:var(--colorNeutralForegroundInvertedLink);}"],
i: [".f2hkw1w:focus-visible{outline-style:none;}"],
h: [".f1tx3yz7:hover{text-decoration-line:underline;}", ".f1deo86v:hover{color:var(--colorBrandForegroundLinkHover);}", ".fj1cjhr:hover{color:var(--colorNeutralForeground2LinkHover);}", ".fbnuktb:hover{text-decoration-line:none;}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f1ujg2k6:hover{color:var(--colorBrandForegroundInverted);}", ".f1sk1dtk:hover{color:var(--colorNeutralForegroundInvertedLinkHover);}"],
a: [".f1eh06m1:active{text-decoration-line:underline;}", ".f1iescvh:active{color:var(--colorBrandForegroundLinkPressed);}", ".fhucn0c:active{color:var(--colorNeutralForeground2LinkPressed);}", ".fljg2da:active{text-decoration-line:none;}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".f1ebemlp:active{color:var(--colorBrandForegroundInverted);}", ".f182g21t:active{color:var(--colorNeutralForegroundInvertedLinkPressed);}"]
});
export const useLinkStyles_unstable = state => {
'use no memo';
const styles = useStyles();
const {
appearance,
disabled,
inline,
root,
backgroundAppearance
} = state;
state.root.className = mergeClasses(linkClassNames.root, styles.root, styles.focusIndicator, root.as === 'a' && root.href && styles.href, root.as === 'button' && styles.button, appearance === 'subtle' && styles.subtle, backgroundAppearance === 'inverted' && styles.inverted, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,108 @@
'use client';
import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
import { tokens } from '@fluentui/react-theme';
export const linkClassNames = {
root: 'fui-Link'
};
const useStyles = makeStyles({
focusIndicator: createCustomFocusIndicatorStyle({
textDecorationColor: tokens.colorStrokeFocus2,
textDecorationLine: 'underline',
textDecorationStyle: 'double',
outlineStyle: 'none'
}),
// Common styles.
root: {
':focus-visible': {
outlineStyle: 'none'
},
backgroundColor: 'transparent',
boxSizing: 'border-box',
color: tokens.colorBrandForegroundLink,
cursor: 'pointer',
display: 'inline',
fontFamily: tokens.fontFamilyBase,
fontSize: tokens.fontSizeBase300,
fontWeight: tokens.fontWeightRegular,
margin: '0',
padding: '0',
overflow: 'inherit',
textAlign: 'left',
textDecorationLine: 'none',
textDecorationThickness: tokens.strokeWidthThin,
textOverflow: 'inherit',
userSelect: 'text',
':hover': {
textDecorationLine: 'underline',
color: tokens.colorBrandForegroundLinkHover
},
':active': {
textDecorationLine: 'underline',
color: tokens.colorBrandForegroundLinkPressed
}
},
// Overrides when the Link renders as a button.
button: {
...shorthands.borderStyle('none')
},
// Overrides when an href is present so the Link renders as an anchor.
href: {
fontSize: 'inherit'
},
// Overrides when the Link appears subtle.
subtle: {
color: tokens.colorNeutralForeground2Link,
':hover': {
textDecorationLine: 'underline',
color: tokens.colorNeutralForeground2LinkHover
},
':active': {
textDecorationLine: 'underline',
color: tokens.colorNeutralForeground2LinkPressed
}
},
// Overrides when the Link is rendered inline within text.
inline: {
textDecorationLine: 'underline'
},
// Overrides when the Link is disabled.
disabled: {
textDecorationLine: 'none',
color: tokens.colorNeutralForegroundDisabled,
cursor: 'not-allowed',
':hover': {
textDecorationLine: 'none',
color: tokens.colorNeutralForegroundDisabled
},
':active': {
textDecorationLine: 'none',
color: tokens.colorNeutralForegroundDisabled
}
},
inverted: {
color: tokens.colorBrandForegroundInverted,
':hover': {
color: tokens.colorBrandForegroundInverted
},
':active': {
color: tokens.colorBrandForegroundInverted
}
},
brand: {
color: tokens.colorNeutralForegroundInvertedLink,
':hover': {
color: tokens.colorNeutralForegroundInvertedLinkHover
},
':active': {
color: tokens.colorNeutralForegroundInvertedLinkPressed
}
}
});
export const useLinkStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const { appearance, disabled, inline, root, backgroundAppearance } = state;
state.root.className = mergeClasses(linkClassNames.root, styles.root, styles.focusIndicator, root.as === 'a' && root.href && styles.href, root.as === 'button' && styles.button, appearance === 'subtle' && styles.subtle, backgroundAppearance === 'inverted' && styles.inverted, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1 @@
export { LinkContextProvider, linkContextDefaultValue, useLinkContext } from './linkContext';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { LinkContextValue } from './linkContext';\nexport { LinkContextProvider, linkContextDefaultValue, useLinkContext } from './linkContext';\n"],"names":["LinkContextProvider","linkContextDefaultValue","useLinkContext"],"mappings":"AACA,SAASA,mBAAmB,EAAEC,uBAAuB,EAAEC,cAAc,QAAQ,gBAAgB"}

View File

@@ -0,0 +1,11 @@
'use client';
import * as React from 'react';
const LinkContext = React.createContext(undefined);
export const linkContextDefaultValue = {
inline: false
};
export const LinkContextProvider = LinkContext.Provider;
export const useLinkContext = ()=>{
var _React_useContext;
return (_React_useContext = React.useContext(LinkContext)) !== null && _React_useContext !== void 0 ? _React_useContext : linkContextDefaultValue;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/linkContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nexport type LinkContextValue = {\n inline?: boolean;\n};\n\nconst LinkContext = React.createContext<LinkContextValue | undefined>(undefined);\n\nexport const linkContextDefaultValue: LinkContextValue = {\n inline: false,\n};\n\nexport const LinkContextProvider = LinkContext.Provider;\nexport const useLinkContext = (): LinkContextValue => React.useContext(LinkContext) ?? linkContextDefaultValue;\n"],"names":["React","LinkContext","createContext","undefined","linkContextDefaultValue","inline","LinkContextProvider","Provider","useLinkContext","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAM/B,MAAMC,cAAcD,MAAME,aAAa,CAA+BC;AAEtE,OAAO,MAAMC,0BAA4C;IACvDC,QAAQ;AACV,EAAE;AAEF,OAAO,MAAMC,sBAAsBL,YAAYM,QAAQ,CAAC;AACxD,OAAO,MAAMC,iBAAiB;QAAwBR;WAAAA,CAAAA,oBAAAA,MAAMS,UAAU,CAACR,0BAAjBD,+BAAAA,oBAAiCI;EAAwB"}

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

@@ -0,0 +1,2 @@
export { Link, linkClassNames, renderLink_unstable, useLinkState_unstable, useLinkStyles_unstable, useLink_unstable, useLinkBase_unstable } from './Link';
export { linkContextDefaultValue, LinkContextProvider, useLinkContext } from './contexts';

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

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Link,\n linkClassNames,\n renderLink_unstable,\n useLinkState_unstable,\n useLinkStyles_unstable,\n useLink_unstable,\n useLinkBase_unstable,\n} from './Link';\nexport type { LinkProps, LinkSlots, LinkState, LinkBaseProps, LinkBaseState } from './Link';\nexport { linkContextDefaultValue, LinkContextProvider, useLinkContext } from './contexts';\nexport type { LinkContextValue } from './contexts';\n"],"names":["Link","linkClassNames","renderLink_unstable","useLinkState_unstable","useLinkStyles_unstable","useLink_unstable","useLinkBase_unstable","linkContextDefaultValue","LinkContextProvider","useLinkContext"],"mappings":"AAAA,SACEA,IAAI,EACJC,cAAc,EACdC,mBAAmB,EACnBC,qBAAqB,EACrBC,sBAAsB,EACtBC,gBAAgB,EAChBC,oBAAoB,QACf,SAAS;AAEhB,SAASC,uBAAuB,EAAEC,mBAAmB,EAAEC,cAAc,QAAQ,aAAa"}

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

@@ -0,0 +1,51 @@
{
"name": "@fluentui/react-link",
"version": "9.8.0",
"description": "Fluent UI React Link 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/keyboard-keys": "^9.0.8",
"@fluentui/react-jsx-runtime": "^9.4.1",
"@fluentui/react-shared-contexts": "^9.26.2",
"@fluentui/react-tabster": "^9.26.13",
"@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"
]
}