@fluentui/react-link 0.0.0-nightly-20220302-0405.1

package/LICENSE

@@ -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

package/MIGRATION.md

@@ -0,0 +1,33 @@
+# Link Migration
+
+## STATUS: WIP 🚧
+
+This Migration guide is a work in progress and is not yet ready for use.
+
+## Migration from v8
+
+The existing `Link` control supports a very similar set of props to the one being proposed with a few differences that are outlined below:
+
+- `componentRef` => NOT SUPPORTED - use regular `ref` instead.
+- `styles` => NOT SUPPORTED - use new styling system via `tokens` instead.
+- `theme` => NOT SUPPORTED
+- `underline` => `inline`
+
+## Migration from v0
+
+v0 does not currently export a `Link` component.
+
+## Property mapping
+
+| v8 `Link`      | Converged `Link` |
+| -------------- | ---------------- |
+| `componentRef` | -                |
+| `disabled`     | `disabled`       |
+| `href`         | `href`           |
+| `onClick`      | `onClick`        |
+| `rel`          | `rel`            |
+| `styles`       | -                |
+| `target`       | `target`         |
+| `theme`        | -                |
+| `type`         | `type`           |
+| `underline`    | `inline`         |

package/README.md

@@ -0,0 +1,32 @@
+# @fluentui/react-link
+
+**Link components for [Fluent UI](https://dev.microsoft.com/fluentui)**
+
+The Link component references data that a user can follow by clicking or tapping it.
+
+## STATUS: WIP 🚧
+
+These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+
+## Usage
+
+To import Link:
+
+```js
+import { Link } from '@fluentui/react-link';
+```
+
+Once the Link component graduates to a production release, the component will be available at:
+
+```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" disabled>This is a link</Link>
+<Link href="https://www.bing.com" target="_blank">This is a link</Link>
+```

package/SPEC.md

@@ -0,0 +1,210 @@
+# Link
+
+**GitHub Epic issue** - [Link Convergence #16572](https://github.com/microsoft/fluentui/issues/16572)
+
+## Background
+
+The `Link` component references data that a user can follow by clicking or tapping it.
+
+## Prior Art
+
+### Open UI
+
+The Open UI [Link Research](https://open-ui.org/components/link.research) page (currently in PR: https://github.com/WICG/open-ui/pull/253), shows how the `Link` component is used in UI platforms across the web. The consensus across libraries seems to center around a simple interface with few variants that mostly attempt to support the functionality of the `<a>` HTML tag.
+
+### Comparison of v8 and v0
+
+The existing components are:
+
+- v8 - [Link](https://developer.microsoft.com/en-us/fluentui#/controls/web/link)
+- v0 - v0 does not currently export a `Link` component
+
+## Sample Code
+
+Basic 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" disabled>This is a link</Link>
+<Link href="https://www.bing.com" target="_blank">This is a link</Link>
+```
+
+## Variants
+
+### Default vs inline
+
+A `Link` has two decoration variants depending on where it's used.
+
+By `default`, the `Link` should be limited to homogeneous surface areas where everything is clickable in the space and should appear as lacking an underline.
+
+A second `inline` variant is provided for scenarios where body text is going to be used alongside a `Link`. This variant adds an underline to add a separate visual distinction in addition to color for contrast purposes.
+
+### Anchor vs button
+
+A `Link` renders as different HTML tags depending on the whether a value has been passed for the `href` property or not. If a value has been passed to the `href` property, then the `Link` renders as an `<a>` HTML tag. Conversely, if the `href` property is left `undefined` the `Link` renders as a `<button>` HTML tag.
+
+The `Link` can also be custom rendered as something entirely different by replacing the `root` slot with the preferred element to be rendered via the `as` prop.
+
+## API
+
+### Slots
+
+- `root` - The outer container representing the `Link` itself that wraps everything passed via the `children` prop.
+
+### Props
+
+```ts
+export type LinkProps = ComponentProps &
+  React.AnchorHTMLAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLElement> &
+  Omit<React.ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLElement>, 'type'> & {
+    /**
+     * URL the link points to. If not provided, the link renders as a button (unless that behavior is
+     * overridden using `as`).
+     */
+    href?: string;
+
+    /**
+     * Click handler for the link.
+     */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLElement>) => void;
+
+    /**
+     * Relationship to the linked URL (can be a space-separated list).
+     * Most common values are `noreferrer` and/or `noopener`.
+     * This prop is only applied if `href` is set.
+     */
+    rel?: string;
+
+    /**
+     * Where to open the linked URL. Common values are `_blank` (a new tab or window),
+     * `_self` (the current window/context), `_parent`, and `_top`.
+     * This prop is only applied if `href` is set.
+     */
+    target?: string;
+
+    /**
+     * Built-in HTML attribute with different behavior depending on how the link is rendered.
+     * If rendered as `<a>`, hints at the MIME type.
+     * If rendered as `<button>`, override the type of button (`button` is the default).
+     */
+    type?: string;
+
+    /**
+     * A link can appear either with its default style or subtle.
+     * If not specified, the link appears with its default styling.
+     */
+    appearance?: '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;
+  };
+```
+
+### Styling Tokens
+
+TBD once we decide on component tokens work.
+
+## Structure
+
+For `Links` rendering as `<a>`:
+
+```tsx
+<a class="root" href={href}>
+  {children}
+</a>
+```
+
+For `Links` rendering as anything other than `<a>` (the example below uses `<button>`):
+
+```tsx
+<button class="root" role="link">
+  {children}
+</button>
+```
+
+## Migration
+
+See [MIGRATION.md](https://github.com/microsoft/fluentui/blob/master/packages/react-link/MIGRATION.md).
+
+## Behaviors
+
+### States
+
+The following section describes the different states in which a `Link` can be throughout the course of interaction with it.
+
+#### Enabled state
+
+An enabled `Link` communicates interaction by having styling that invites the user to click/tap on it to navigate through content.
+
+#### Disabled state
+
+A disabled `Link` is non-interactive, disallowing the user to click/tap on it to navigate through content.
+
+#### Hovered state
+
+A hovered `Link` changes styling to communicate that the user has placed a cursor above it.
+
+#### Focused state
+
+A focused `Link` changes styling to communicate that the user has placed keyboard focus on it. This styling is usually the same to the one in the hovered state plus extra styling on the outline to indicate keyboard focus has been placed on the component.
+
+#### Pressed state
+
+A pressed `Link` changes styling to communicate that the user is currently pressing it.
+
+#### Visited state
+
+A visited `Link` changes styling to communicate that the user has already interacted with it so its referenced content has already been accessed in the past.
+
+### Interaction
+
+#### Keyboard interaction
+
+The following is a set of keys that interact with the `Link` component:
+
+| Key                      | Description                                        |
+| ------------------------ | -------------------------------------------------- |
+| `Enter`                  | Executes the `Link` and moves focus to its target. |
+| `Shift + F10` (Optional) | Opens a context menu for the `Link`.               |
+
+#### Cursor interaction
+
+- `mouseenter`: Should immediately change the styling of the `Link` so that it appears to be hovered.
+- `mouseleave`: Should immediately remove the hovered styling of the `Link`.
+- `mouseup`: If triggered while cursor is still inside of the `Link's` boundaries, then it should execute the `Link` and move focus to its target.
+
+#### Touch interaction
+
+The same behavior as above translated for touch events. This means that there is no equivalent for `mouseenter` and `mouseleave`, which makes it so that the hovered state cannot be accessed.
+
+## Accessibility
+
+### Relevant documents
+
+- [WAI-ARIA 1.1 Spec](https://www.w3.org/TR/wai-aria-1.1/#link)
+- [WAI-ARIA 1.1 Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#link)
+- [WAI-ARIA 1.2 Spec](https://www.w3.org/TR/wai-aria-1.2/#link)
+- [WAI-ARIA 1.2 Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#link)
+
+### Expected behavior
+
+- Should default to render a native `a` element unless something else has been specified for the `root` slot, in which case `role="link"` should be added to it.
+- Should mix in the native props expected for the `a` native element.
+- Should be keyboard tabbable and focusable.

package/dist/react-link.d.ts

@@ -0,0 +1,69 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { Slot } 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>;
+
+export declare const linkClassName = "fui-Link";
+
+declare type LinkCommons = {
+    /**
+     * A link can appear either with its default style or subtle.
+     * If not specified, the link appears with its default styling.
+     */
+    appearance?: '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 LinkProps = ComponentProps<LinkSlots> & LinkCommons;
+
+export declare type LinkSlots = {
+    /**
+     * Root of the component that renders as either an <a> or a <button> tag.
+     */
+    root: Slot<'a', 'button'>;
+};
+
+export declare type LinkState = ComponentState<LinkSlots> & LinkCommons;
+
+/**
+ * Renders a Link component by passing the state defined props to the appropriate slots.
+ */
+export declare const renderLink_unstable: (state: LinkState) => JSX.Element;
+
+/**
+ * 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>) => LinkState;
+
+/**
+ * The useLinkState_unstable hook processes the Link state.
+ * @param state - Link state to mutate.
+ */
+export declare const useLinkState_unstable: (state: LinkState) => LinkState;
+
+export declare const useLinkStyles_unstable: (state: LinkState) => LinkState;
+
+export { }

package/lib/Link.d.ts

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

package/lib/Link.js

@@ -0,0 +1,2 @@
+export * from './components/Link/index';
+//# sourceMappingURL=Link.js.map

package/lib/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sourceRoot":"../src/","sources":["Link.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './components/Link/index';\n"]}

package/lib/components/Link/Link.d.ts

@@ -0,0 +1,6 @@
+import type { LinkProps } from './Link.types';
+import type { ForwardRefComponent } 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>;

package/lib/components/Link/Link.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useLink_unstable } from './useLink';
+import { useLinkStyles_unstable } from './useLinkStyles';
+import { renderLink_unstable } from './renderLink';
+/**
+ * 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);
+  return renderLink_unstable(state); // Work around some small mismatches in inferred types which don't matter in practice
+});
+Link.displayName = 'Link';
+//# sourceMappingURL=Link.js.map

package/lib/components/Link/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,WAAjC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,mBAAT,QAAoC,cAApC;AAIA;;AAEG;;AACH,OAAO,MAAM,IAAI,gBAAmC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClF,QAAM,KAAK,GAAG,gBAAgB,CAAC,KAAD,EAAQ,GAAR,CAA9B;AAEA,EAAA,sBAAsB,CAAC,KAAD,CAAtB;AAEA,SAAO,mBAAmB,CAAC,KAAD,CAA1B,CALkF,CAMlF;AACD,CAPmD,CAA7C;AASP,IAAI,CAAC,WAAL,GAAmB,MAAnB","sourcesContent":["import * as React from 'react';\nimport { useLink_unstable } from './useLink';\nimport { useLinkStyles_unstable } from './useLinkStyles';\nimport { renderLink_unstable } from './renderLink';\nimport type { LinkProps } from './Link.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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  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"],"sourceRoot":"../src/"}

package/lib/components/Link/Link.types.d.ts

@@ -0,0 +1,33 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+export declare type LinkSlots = {
+    /**
+     * Root of the component that renders as either an <a> or a <button> tag.
+     */
+    root: Slot<'a', 'button'>;
+};
+declare type LinkCommons = {
+    /**
+     * A link can appear either with its default style or subtle.
+     * If not specified, the link appears with its default styling.
+     */
+    appearance?: '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 LinkProps = ComponentProps<LinkSlots> & LinkCommons;
+export declare type LinkState = ComponentState<LinkSlots> & LinkCommons;
+export {};

package/lib/components/Link/Link.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Link.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Link.types.js","sourceRoot":"../src/","sources":["components/Link/Link.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\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'>;\n};\n\ntype LinkCommons = {\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   */\n  appearance?: '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\nexport type LinkProps = ComponentProps<LinkSlots> & LinkCommons;\n\nexport type LinkState = ComponentState<LinkSlots> & LinkCommons;\n"]}

package/lib/components/Link/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Link';
+export * from './Link.types';
+export * from './renderLink';
+export * from './useLink';
+export * from './useLinkState';
+export * from './useLinkStyles';

package/lib/components/Link/index.js

@@ -0,0 +1,7 @@
+export * from './Link';
+export * from './Link.types';
+export * from './renderLink';
+export * from './useLink';
+export * from './useLinkState';
+export * from './useLinkStyles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Link/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './Link';\nexport * from './Link.types';\nexport * from './renderLink';\nexport * from './useLink';\nexport * from './useLinkState';\nexport * from './useLinkStyles';\n"]}

package/lib/components/Link/renderLink.d.ts

@@ -0,0 +1,5 @@
+import type { LinkState } from './Link.types';
+/**
+ * Renders a Link component by passing the state defined props to the appropriate slots.
+ */
+export declare const renderLink_unstable: (state: LinkState) => JSX.Element;

package/lib/components/Link/renderLink.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Renders a Link component by passing the state defined props to the appropriate slots.
+ */
+
+export const renderLink_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  });
+};
+//# sourceMappingURL=renderLink.js.map

package/lib/components/Link/renderLink.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Link/renderLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAAqB;AACtD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAY,KAAZ,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { LinkSlots, LinkState } 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: LinkState) => {\n  const { slots, slotProps } = getSlots<LinkSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Link/useLink.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { LinkProps, LinkState } from './Link.types';
+/**
+ * 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.Ref<HTMLAnchorElement | HTMLButtonElement>) => LinkState;

package/lib/components/Link/useLink.js

@@ -0,0 +1,36 @@
+import { getNativeElementProps } from '@fluentui/react-utilities';
+import { useLinkState_unstable } from './useLinkState';
+/**
+ * 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 {
+    appearance,
+    disabled,
+    disabledFocusable,
+    inline
+  } = props;
+  const as = props.as || (props.href ? 'a' : 'button');
+  const state = {
+    // Props passed at the top-level
+    appearance,
+    disabled,
+    disabledFocusable,
+    inline,
+    // Slots definition
+    components: {
+      root: 'a'
+    },
+    root: getNativeElementProps(as, {
+      ref,
+      ...props,
+      as
+    })
+  };
+  useLinkState_unstable(state);
+  return state;
+};
+//# sourceMappingURL=useLink.js.map

package/lib/components/Link/useLink.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Link/useLink.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AAGA;;;;AAIG;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAC9B,KAD8B,EAE9B,GAF8B,KAGjB;AACb,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,QAAd;AAAwB,IAAA,iBAAxB;AAA2C,IAAA;AAA3C,MAAsD,KAA5D;AACA,QAAM,EAAE,GAAG,KAAK,CAAC,EAAN,KAAa,KAAK,CAAC,IAAN,GAAa,GAAb,GAAmB,QAAhC,CAAX;AAEA,QAAM,KAAK,GAAc;AACvB;AACA,IAAA,UAFuB;AAGvB,IAAA,QAHuB;AAIvB,IAAA,iBAJuB;AAKvB,IAAA,MALuB;AAOvB;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KARW;AAYvB,IAAA,IAAI,EAAE,qBAAqB,CAAC,EAAD,EAAK;AAC9B,MAAA,GAD8B;AAE9B,SAAG,KAF2B;AAG9B,MAAA;AAH8B,KAAL;AAZJ,GAAzB;AAmBA,EAAA,qBAAqB,CAAC,KAAD,CAArB;AAEA,SAAO,KAAP;AACD,CA7BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useLinkState_unstable } from './useLinkState';\nimport type { LinkProps, LinkState } from './Link.types';\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>,\n): LinkState => {\n  const { appearance, disabled, disabledFocusable, inline } = props;\n  const as = props.as || (props.href ? 'a' : 'button');\n\n  const state: LinkState = {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    inline,\n\n    // Slots definition\n    components: {\n      root: 'a',\n    },\n\n    root: getNativeElementProps(as, {\n      ref,\n      ...props,\n      as,\n    }),\n  };\n\n  useLinkState_unstable(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Link/useLinkState.d.ts

@@ -0,0 +1,6 @@
+import type { LinkState } from './Link.types';
+/**
+ * The useLinkState_unstable hook processes the Link state.
+ * @param state - Link state to mutate.
+ */
+export declare const useLinkState_unstable: (state: LinkState) => LinkState;

package/lib/components/Link/useLinkState.js

@@ -0,0 +1,59 @@
+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,
+    type
+  } = state.root; // Add href and tabIndex=0 for anchor elements.
+
+  if (state.root.as === 'a') {
+    state.root.href = disabled ? undefined : state.root.href;
+    state.root.tabIndex = disabled && !disabledFocusable ? undefined : 0; // Add role="link" for disabled and disabledFocusable links.
+
+    if (disabled || disabledFocusable) {
+      state.root.role = role || 'link';
+    }
+  } // Add type="button" for button elements.
+  else {
+    state.root.type = type || 'button';
+  } // 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 => {
+    if ((disabled || disabledFocusable) && (ev.key === Enter || ev.key === Space)) {
+      ev.preventDefault();
+      ev.stopPropagation();
+    } else {
+      onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(ev);
+    }
+  }; // Set the aria-disabled and disabled props correctly.
+
+
+  state.root['aria-disabled'] = disabled || disabledFocusable;
+
+  if (state.root.as === 'button') {
+    state.root.disabled = disabled && !disabledFocusable;
+  }
+
+  return state;
+};
+//# sourceMappingURL=useLinkState.js.map

package/lib/components/Link/useLinkState.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Link/useLinkState.ts"],"names":[],"mappings":"AACA,SAAS,KAAT,EAAgB,KAAhB,QAA6B,yBAA7B;AAGA;;;AAGG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAgC;AACnE,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAAkC,KAAxC;AACA,QAAM;AAAE,IAAA,OAAF;AAAW,IAAA,SAAX;AAAsB,IAAA,IAAtB;AAA4B,IAAA;AAA5B,MAAqC,KAAK,CAAC,IAAjD,CAFmE,CAInE;;AACA,MAAI,KAAK,CAAC,IAAN,CAAW,EAAX,KAAkB,GAAtB,EAA2B;AACzB,IAAA,KAAK,CAAC,IAAN,CAAW,IAAX,GAAkB,QAAQ,GAAG,SAAH,GAAe,KAAK,CAAC,IAAN,CAAW,IAApD;AACA,IAAA,KAAK,CAAC,IAAN,CAAW,QAAX,GAAsB,QAAQ,IAAI,CAAC,iBAAb,GAAiC,SAAjC,GAA6C,CAAnE,CAFyB,CAIzB;;AACA,QAAI,QAAQ,IAAI,iBAAhB,EAAmC;AACjC,MAAA,KAAK,CAAC,IAAN,CAAW,IAAX,GAAkB,IAAI,IAAI,MAA1B;AACD;AACF,GARD,CASA;AATA,OAUK;AACH,IAAA,KAAK,CAAC,IAAN,CAAW,IAAX,GAAkB,IAAI,IAAI,QAA1B;AACD,GAjBkE,CAmBnE;;;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,OAAX,GAAsB,EAAD,IAAgE;AACnF,QAAI,QAAQ,IAAI,iBAAhB,EAAmC;AACjC,MAAA,EAAE,CAAC,cAAH;AACD,KAFD,MAEO;AACL,MAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAG,EAAH,CAAP;AACD;AACF,GAND,CApBmE,CA4BnE;;;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAwB,EAAD,IAAmE;AACxF,QAAI,CAAC,QAAQ,IAAI,iBAAb,MAAoC,EAAE,CAAC,GAAH,KAAW,KAAX,IAAoB,EAAE,CAAC,GAAH,KAAW,KAAnE,CAAJ,EAA+E;AAC7E,MAAA,EAAE,CAAC,cAAH;AACA,MAAA,EAAE,CAAC,eAAH;AACD,KAHD,MAGO;AACL,MAAA,SAAS,KAAA,IAAT,IAAA,SAAS,KAAA,KAAA,CAAT,GAAS,KAAA,CAAT,GAAA,SAAS,CAAG,EAAH,CAAT;AACD;AACF,GAPD,CA7BmE,CAsCnE;;;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,eAAX,IAA8B,QAAQ,IAAI,iBAA1C;;AACA,MAAI,KAAK,CAAC,IAAN,CAAW,EAAX,KAAkB,QAAtB,EAAgC;AAC9B,IAAA,KAAK,CAAC,IAAN,CAAW,QAAX,GAAsB,QAAQ,IAAI,CAAC,iBAAnC;AACD;;AAED,SAAO,KAAP;AACD,CA7CM","sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport type { LinkState } 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: LinkState): LinkState => {\n  const { disabled, disabledFocusable } = state;\n  const { onClick, onKeyDown, role, type } = state.root;\n\n  // Add href and tabIndex=0 for anchor elements.\n  if (state.root.as === 'a') {\n    state.root.href = disabled ? undefined : state.root.href;\n    state.root.tabIndex = disabled && !disabledFocusable ? undefined : 0;\n\n    // Add role=\"link\" for disabled and disabledFocusable links.\n    if (disabled || disabledFocusable) {\n      state.root.role = role || 'link';\n    }\n  }\n  // Add type=\"button\" for button elements.\n  else {\n    state.root.type = type || 'button';\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    if ((disabled || disabledFocusable) && (ev.key === Enter || ev.key === Space)) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    } else {\n      onKeyDown?.(ev);\n    }\n  };\n\n  // Set the aria-disabled and disabled props correctly.\n  state.root['aria-disabled'] = disabled || disabledFocusable;\n  if (state.root.as === 'button') {\n    state.root.disabled = disabled && !disabledFocusable;\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Link/useLinkStyles.d.ts

@@ -0,0 +1,3 @@
+import type { LinkState } from './Link.types';
+export declare const linkClassName = "fui-Link";
+export declare const useLinkStyles_unstable: (state: LinkState) => LinkState;