@fluentui/react-breadcrumb 9.0.0

package/dist/index.d.ts

@@ -0,0 +1,259 @@
+/// <reference types="react" />
+
+import { ButtonProps } from '@fluentui/react-button';
+import { ButtonSlots } from '@fluentui/react-button';
+import { ButtonState } from '@fluentui/react-button';
+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';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * Breadcrumb component - TODO: add more docs
+ */
+export declare const Breadcrumb: ForwardRefComponent<BreadcrumbProps>;
+
+/**
+ * A button component which is used inside the Breadcrumb.
+ */
+export declare const BreadcrumbButton: ForwardRefComponent<BreadcrumbButtonProps>;
+
+/**
+ * Static CSS class names used internally for the component slots.
+ */
+export declare const breadcrumbButtonClassNames: SlotClassNames<BreadcrumbButtonSlots>;
+
+/**
+ * BreadcrumbButton Props
+ */
+export declare type BreadcrumbButtonProps = ComponentProps<BreadcrumbButtonSlots> & Pick<BreadcrumbProps, 'size'> & Pick<ButtonProps, 'disabled' | 'disabledFocusable'> & {
+    /**
+     * Defines current sate of BreadcrumbButton.
+     *
+     * @default false
+     */
+    current?: boolean;
+};
+
+export declare type BreadcrumbButtonSlots = ButtonSlots;
+
+/**
+ * State used in rendering BreadcrumbButton
+ */
+export declare type BreadcrumbButtonState = ComponentState<BreadcrumbButtonSlots> & Omit<ButtonState, keyof ButtonSlots | 'components'> & Required<Pick<BreadcrumbButtonProps, 'current' | 'size'>>;
+
+export declare const breadcrumbClassNames: SlotClassNames<BreadcrumbSlots>;
+
+/**
+ * Data shared between breadcrumb components
+ */
+export declare type BreadcrumbContextValues = Required<Pick<BreadcrumbProps, 'size'>>;
+
+/**
+ * A divider component which is used inside the Breadcrumb
+ */
+export declare const BreadcrumbDivider: ForwardRefComponent<BreadcrumbDividerProps>;
+
+export declare const breadcrumbDividerClassNames: SlotClassNames<BreadcrumbDividerSlots>;
+
+/**
+ * BreadcrumbDivider Props
+ */
+export declare type BreadcrumbDividerProps = ComponentProps<BreadcrumbDividerSlots> & {};
+
+export declare type BreadcrumbDividerSlots = {
+    root: Slot<'li'>;
+};
+
+/**
+ * State used in rendering BreadcrumbDivider
+ */
+export declare type BreadcrumbDividerState = ComponentState<BreadcrumbDividerSlots>;
+
+/**
+ * BreadcrumbItem component is a wrapper for BreadcrumbLink and BreadcrumbButton.
+ * It can be used as a non-interactive item.
+ */
+export declare const BreadcrumbItem: ForwardRefComponent<BreadcrumbItemProps>;
+
+export declare const breadcrumbItemClassNames: SlotClassNames<BreadcrumbItemSlots>;
+
+/**
+ * BreadcrumbItem Props
+ */
+export declare type BreadcrumbItemProps = ComponentProps<BreadcrumbItemSlots> & Pick<BreadcrumbProps, 'size'>;
+
+export declare type BreadcrumbItemSlots = {
+    root: Slot<'li'>;
+};
+
+/**
+ * State used in rendering BreadcrumbItem
+ */
+export declare type BreadcrumbItemState = ComponentState<BreadcrumbItemSlots> & Required<Pick<BreadcrumbItemProps, 'size'>>;
+
+/**
+ * Breadcrumb Props
+ */
+export declare type BreadcrumbProps = ComponentProps<BreadcrumbSlots> & {
+    /**
+     * Sets the focus behavior for the Breadcrumb.
+     *
+     * `tab`
+     * This behaviour will cycle through all elements inside of the Breadcrumb when pressing the Tab key and then release focus
+     * after the last inner element.
+     *
+     * `arrow`
+     * This behaviour will cycle through all elements inside of the Breadcrumb when pressing the Arrow key.
+     *
+     * @default 'tab'
+     */
+    focusMode?: 'arrow' | 'tab';
+    /**
+     * Controls size of Breadcrumb items and dividers.
+     *
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+};
+
+/**
+ * @internal
+ */
+export declare const BreadcrumbProvider: React_2.Provider<Required<Pick<BreadcrumbProps, "size">> | undefined>;
+
+export declare type BreadcrumbSlots = {
+    /**
+     * Root element of the component.
+     */
+    root: Slot<'nav'>;
+    /**
+     * Ordered list which contains items.
+     */
+    list?: Slot<'ol'>;
+};
+
+/**
+ * State used in rendering Breadcrumb
+ */
+export declare type BreadcrumbState = ComponentState<BreadcrumbSlots> & Required<Pick<BreadcrumbProps, 'size'>>;
+
+export declare const isTruncatableBreadcrumbContent: (content: string, maxLength: number) => boolean;
+
+export declare type PartitionBreadcrumbItems<T> = {
+    startDisplayedItems: readonly T[];
+    overflowItems?: readonly T[];
+    endDisplayedItems?: readonly T[];
+};
+
+/**
+ * Get the displayed items and overflowing items based on the array of BreadcrumbItems needed for Breadcrumb.
+ *
+ * @param options - Configure the partition options
+ *
+ * @returns Three arrays split into displayed items and overflow items based on maxDisplayedItems.
+ */
+export declare const partitionBreadcrumbItems: <T>(options: PartitionBreadcrumbItemsOptions<T>) => PartitionBreadcrumbItems<T>;
+
+export declare type PartitionBreadcrumbItemsOptions<T> = {
+    items: readonly T[];
+    maxDisplayedItems?: number;
+    overflowIndex?: number;
+};
+
+/**
+ * Render the final JSX of Breadcrumb
+ */
+export declare const renderBreadcrumb_unstable: (state: BreadcrumbState, contextValues: BreadcrumbContextValues) => JSX.Element;
+
+/**
+ * Render the final JSX of BreadcrumbButton
+ */
+export declare const renderBreadcrumbButton_unstable: (state: BreadcrumbButtonState) => JSX.Element;
+
+/**
+ * Render the final JSX of BreadcrumbDivider
+ */
+export declare const renderBreadcrumbDivider_unstable: (state: BreadcrumbDividerState) => JSX.Element;
+
+/**
+ * Render the final JSX of BreadcrumbItem
+ */
+export declare const renderBreadcrumbItem_unstable: (state: BreadcrumbItemState) => JSX.Element;
+
+export declare const truncateBreadcrumbLongName: (content: string, maxLength?: number) => string;
+
+export declare const truncateBreadcrumLongTooltip: (content: string, maxLength?: number) => string;
+
+/**
+ * Create the state required to render Breadcrumb.
+ *
+ * The returned state can be modified with hooks such as useBreadcrumbStyles_unstable,
+ * before being passed to renderBreadcrumb_unstable.
+ *
+ * @param props - props from this instance of Breadcrumb
+ * @param ref - reference to root HTMLElement of Breadcrumb
+ */
+export declare const useBreadcrumb_unstable: (props: BreadcrumbProps, ref: React_2.Ref<HTMLElement>) => BreadcrumbState;
+
+/**
+ * Create the state required to render BreadcrumbButton.
+ *
+ * The returned state can be modified with hooks such as useBreadcrumbButtonStyles_unstable,
+ * before being passed to renderBreadcrumbButton_unstable.
+ *
+ * @param props - props from this instance of BreadcrumbButton
+ * @param ref - reference to root HTMLElement of BreadcrumbButton
+ */
+export declare const useBreadcrumbButton_unstable: (props: BreadcrumbButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => BreadcrumbButtonState;
+
+/**
+ * Apply styling to the BreadcrumbButton slots based on the state
+ */
+export declare const useBreadcrumbButtonStyles_unstable: (state: BreadcrumbButtonState) => BreadcrumbButtonState;
+
+/**
+ * @internal
+ */
+export declare const useBreadcrumbContext_unstable: () => Required<Pick<BreadcrumbProps, "size">>;
+
+/**
+ * Create the state required to render BreadcrumbDivider.
+ *
+ * The returned state can be modified with hooks such as useBreadcrumbDividerStyles_unstable,
+ * before being passed to renderBreadcrumbDivider_unstable.
+ *
+ * @param props - props from this instance of BreadcrumbDivider
+ * @param ref - reference to root HTMLElement of BreadcrumbDivider
+ */
+export declare const useBreadcrumbDivider_unstable: (props: BreadcrumbDividerProps, ref: React_2.Ref<HTMLLIElement>) => BreadcrumbDividerState;
+
+/**
+ * Apply styling to the BreadcrumbDivider slots based on the state
+ */
+export declare const useBreadcrumbDividerStyles_unstable: (state: BreadcrumbDividerState) => BreadcrumbDividerState;
+
+/**
+ * Create the state required to render BreadcrumbItem.
+ *
+ * The returned state can be modified with hooks such as useBreadcrumbItemStyles_unstable,
+ * before being passed to renderBreadcrumbItem_unstable.
+ *
+ * @param props - props from this instance of BreadcrumbItem
+ * @param ref - reference to root HTMLElement of BreadcrumbItem
+ */
+export declare const useBreadcrumbItem_unstable: (props: BreadcrumbItemProps, ref: React_2.Ref<HTMLLIElement>) => BreadcrumbItemState;
+
+/**
+ * Apply styling to the BreadcrumbItem slots based on the state
+ */
+export declare const useBreadcrumbItemStyles_unstable: (state: BreadcrumbItemState) => BreadcrumbItemState;
+
+/**
+ * Apply styling to the Breadcrumb slots based on the state
+ */
+export declare const useBreadcrumbStyles_unstable: (state: BreadcrumbState) => BreadcrumbState;
+
+export { }

package/lib/Breadcrumb.js

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

package/lib/Breadcrumb.js.map

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

package/lib/BreadcrumbButton.js

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

package/lib/BreadcrumbButton.js.map

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

package/lib/BreadcrumbDivider.js

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

package/lib/BreadcrumbDivider.js.map

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

package/lib/BreadcrumbItem.js

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

package/lib/BreadcrumbItem.js.map

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

package/lib/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useBreadcrumb_unstable } from './useBreadcrumb';
+import { renderBreadcrumb_unstable } from './renderBreadcrumb';
+import { useBreadcrumbStyles_unstable } from './useBreadcrumbStyles.styles';
+import { useBreadcrumbContextValues_unstable } from './useBreadcrumbContextValue';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Breadcrumb component - TODO: add more docs
+ */ export const Breadcrumb = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useBreadcrumb_unstable(props, ref);
+    const contextValues = useBreadcrumbContextValues_unstable(state);
+    useBreadcrumbStyles_unstable(state);
+    useCustomStyleHook_unstable('useBreadcrumbStyles_unstable')(state);
+    return renderBreadcrumb_unstable(state, contextValues);
+});
+Breadcrumb.displayName = 'Breadcrumb';

package/lib/components/Breadcrumb/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Breadcrumb.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useBreadcrumb_unstable } from './useBreadcrumb';\nimport { renderBreadcrumb_unstable } from './renderBreadcrumb';\nimport { useBreadcrumbStyles_unstable } from './useBreadcrumbStyles.styles';\nimport type { BreadcrumbProps } from './Breadcrumb.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useBreadcrumbContextValues_unstable } from './useBreadcrumbContextValue';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Breadcrumb component - TODO: add more docs\n */\nexport const Breadcrumb: ForwardRefComponent<BreadcrumbProps> = React.forwardRef((props, ref) => {\n  const state = useBreadcrumb_unstable(props, ref);\n  const contextValues = useBreadcrumbContextValues_unstable(state);\n\n  useBreadcrumbStyles_unstable(state);\n  useCustomStyleHook_unstable('useBreadcrumbStyles_unstable')(state);\n\n  return renderBreadcrumb_unstable(state, contextValues);\n});\n\nBreadcrumb.displayName = 'Breadcrumb';\n"],"names":["React","useBreadcrumb_unstable","renderBreadcrumb_unstable","useBreadcrumbStyles_unstable","useBreadcrumbContextValues_unstable","useCustomStyleHook_unstable","Breadcrumb","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E,SAASC,mCAAmC,QAAQ,8BAA8B;AAClF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,2BAAmDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQT,uBAAuBO,OAAOC;IAC5C,MAAME,gBAAgBP,oCAAoCM;IAE1DP,6BAA6BO;IAC7BL,4BAA4B,gCAAgCK;IAE5D,OAAOR,0BAA0BQ,OAAOC;AAC1C,GAAG;AAEHL,WAAWM,WAAW,GAAG"}

package/lib/components/Breadcrumb/Breadcrumb.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Breadcrumb.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Data shared between breadcrumb components\n */\nexport type BreadcrumbContextValues = Required<Pick<BreadcrumbProps, 'size'>>;\n\nexport type BreadcrumbSlots = {\n  /**\n   * Root element of the component.\n   */\n  root: Slot<'nav'>;\n  /**\n   * Ordered list which contains items.\n   */\n  list?: Slot<'ol'>;\n};\n\n/**\n * Breadcrumb Props\n */\nexport type BreadcrumbProps = ComponentProps<BreadcrumbSlots> & {\n  /**\n   * Sets the focus behavior for the Breadcrumb.\n   *\n   * `tab`\n   * This behaviour will cycle through all elements inside of the Breadcrumb when pressing the Tab key and then release focus\n   * after the last inner element.\n   *\n   * `arrow`\n   * This behaviour will cycle through all elements inside of the Breadcrumb when pressing the Arrow key.\n   *\n   * @default 'tab'\n   */\n  focusMode?: 'arrow' | 'tab';\n\n  /**\n   * Controls size of Breadcrumb items and dividers.\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Breadcrumb\n */\nexport type BreadcrumbState = ComponentState<BreadcrumbSlots> & Required<Pick<BreadcrumbProps, 'size'>>;\n"],"names":[],"mappings":"AAAA,WA+CwG"}

package/lib/components/Breadcrumb/BreadcrumbContext.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+const BreadcrumbContext = React.createContext(undefined);
+/**
+ * @internal
+ */ export const breadcrumbDefaultValue = {
+    size: 'medium'
+};
+/**
+ * @internal
+ */ export const BreadcrumbProvider = BreadcrumbContext.Provider;
+/**
+ * @internal
+ */ export const useBreadcrumbContext_unstable = ()=>{
+    var _React_useContext;
+    return (_React_useContext = React.useContext(BreadcrumbContext)) !== null && _React_useContext !== void 0 ? _React_useContext : breadcrumbDefaultValue;
+};

package/lib/components/Breadcrumb/BreadcrumbContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["BreadcrumbContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { BreadcrumbContextValues } from './Breadcrumb.types';\n\nconst BreadcrumbContext = React.createContext<BreadcrumbContextValues | undefined>(undefined);\n\n/**\n * @internal\n */\nexport const breadcrumbDefaultValue: BreadcrumbContextValues = {\n  size: 'medium',\n};\n\n/**\n * @internal\n */\nexport const BreadcrumbProvider = BreadcrumbContext.Provider;\n\n/**\n * @internal\n */\nexport const useBreadcrumbContext_unstable = () => React.useContext(BreadcrumbContext) ?? breadcrumbDefaultValue;\n"],"names":["React","BreadcrumbContext","createContext","undefined","breadcrumbDefaultValue","size","BreadcrumbProvider","Provider","useBreadcrumbContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,oBAAoBD,MAAME,aAAa,CAAsCC;AAEnF;;CAEC,GACD,OAAO,MAAMC,yBAAkD;IAC7DC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,qBAAqBL,kBAAkBM,QAAQ,CAAC;AAE7D;;CAEC,GACD,OAAO,MAAMC,gCAAgC;QAAMR;WAAAA,CAAAA,oBAAAA,MAAMS,UAAU,CAACR,gCAAjBD,+BAAAA,oBAAuCI;AAAqB,EAAE"}

package/lib/components/Breadcrumb/index.js

@@ -0,0 +1,6 @@
+export * from './Breadcrumb';
+export * from './Breadcrumb.types';
+export * from './BreadcrumbContext';
+export * from './renderBreadcrumb';
+export * from './useBreadcrumb';
+export * from './useBreadcrumbStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Breadcrumb';\nexport * from './Breadcrumb.types';\nexport * from './BreadcrumbContext';\nexport * from './renderBreadcrumb';\nexport * from './useBreadcrumb';\nexport * from './useBreadcrumbStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,sBAAsB;AACpC,cAAc,qBAAqB;AACnC,cAAc,kBAAkB;AAChC,cAAc,+BAA+B"}

package/lib/components/Breadcrumb/renderBreadcrumb.js

@@ -0,0 +1,16 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { BreadcrumbProvider } from './BreadcrumbContext';
+/**
+ * Render the final JSX of Breadcrumb
+ */ export const renderBreadcrumb_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {
+        children: /*#__PURE__*/ _jsx(BreadcrumbProvider, {
+            value: contextValues,
+            children: state.list && /*#__PURE__*/ _jsx(state.list, {
+                children: state.root.children
+            })
+        })
+    });
+};

package/lib/components/Breadcrumb/renderBreadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderBreadcrumb.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { BreadcrumbProvider } from './BreadcrumbContext';\nimport type { BreadcrumbState, BreadcrumbSlots, BreadcrumbContextValues } from './Breadcrumb.types';\n/**\n * Render the final JSX of Breadcrumb\n */\nexport const renderBreadcrumb_unstable = (state: BreadcrumbState, contextValues: BreadcrumbContextValues) => {\n  assertSlots<BreadcrumbSlots>(state);\n  return (\n    <state.root>\n      <BreadcrumbProvider value={contextValues}>\n        {state.list && <state.list>{state.root.children}</state.list>}\n      </BreadcrumbProvider>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","BreadcrumbProvider","renderBreadcrumb_unstable","state","contextValues","root","value","list","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAASC,kBAAkB,QAAQ,sBAAsB;AAEzD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC,OAAwBC;IAChEJ,YAA6BG;IAC7B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACJ;YAAmBK,OAAOF;sBACxBD,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;0BAAEJ,MAAME,IAAI,CAACG,QAAQ;;;;AAIvD,EAAE"}

package/lib/components/Breadcrumb/useBreadcrumb.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+/**
+ * Create the state required to render Breadcrumb.
+ *
+ * The returned state can be modified with hooks such as useBreadcrumbStyles_unstable,
+ * before being passed to renderBreadcrumb_unstable.
+ *
+ * @param props - props from this instance of Breadcrumb
+ * @param ref - reference to root HTMLElement of Breadcrumb
+ */ export const useBreadcrumb_unstable = (props, ref)=>{
+    const { focusMode = 'tab', size = 'medium', list, ...rest } = props;
+    const focusAttributes = useArrowNavigationGroup({
+        circular: true,
+        axis: 'horizontal',
+        memorizeCurrent: true
+    });
+    var _props_arialabel;
+    return {
+        components: {
+            root: 'nav',
+            list: 'ol'
+        },
+        root: slot.always(getIntrinsicElementProps('nav', {
+            ref,
+            'aria-label': (_props_arialabel = props['aria-label']) !== null && _props_arialabel !== void 0 ? _props_arialabel : 'breadcrumb',
+            ...focusMode === 'arrow' ? focusAttributes : {},
+            ...rest
+        }), {
+            elementType: 'nav'
+        }),
+        list: slot.optional(list, {
+            renderByDefault: true,
+            defaultProps: {
+                role: 'list'
+            },
+            elementType: 'ol'
+        }),
+        size
+    };
+};

package/lib/components/Breadcrumb/useBreadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useBreadcrumb.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { BreadcrumbProps, BreadcrumbState } from './Breadcrumb.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Breadcrumb.\n *\n * The returned state can be modified with hooks such as useBreadcrumbStyles_unstable,\n * before being passed to renderBreadcrumb_unstable.\n *\n * @param props - props from this instance of Breadcrumb\n * @param ref - reference to root HTMLElement of Breadcrumb\n */\nexport const useBreadcrumb_unstable = (props: BreadcrumbProps, ref: React.Ref<HTMLElement>): BreadcrumbState => {\n  const { focusMode = 'tab', size = 'medium', list, ...rest } = props;\n\n  const focusAttributes = useArrowNavigationGroup({\n    circular: true,\n    axis: 'horizontal',\n    memorizeCurrent: true,\n  });\n\n  return {\n    components: {\n      root: 'nav',\n      list: 'ol',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('nav', {\n        ref,\n        'aria-label': props['aria-label'] ?? 'breadcrumb',\n        ...(focusMode === 'arrow' ? focusAttributes : {}),\n        ...rest,\n      }),\n      { elementType: 'nav' },\n    ),\n    list: slot.optional(list, { renderByDefault: true, defaultProps: { role: 'list' }, elementType: 'ol' }),\n    size,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useArrowNavigationGroup","useBreadcrumb_unstable","props","ref","focusMode","size","list","rest","focusAttributes","circular","axis","memorizeCurrent","components","root","always","elementType","optional","renderByDefault","defaultProps","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAwBC;IAC7D,MAAM,EAAEC,YAAY,KAAK,EAAEC,OAAO,QAAQ,EAAEC,IAAI,EAAE,GAAGC,MAAM,GAAGL;IAE9D,MAAMM,kBAAkBR,wBAAwB;QAC9CS,UAAU;QACVC,MAAM;QACNC,iBAAiB;IACnB;QAUoBT;IARpB,OAAO;QACLU,YAAY;YACVC,MAAM;YACNP,MAAM;QACR;QACAO,MAAMd,KAAKe,MAAM,CACfhB,yBAAyB,OAAO;YAC9BK;YACA,cAAcD,CAAAA,mBAAAA,KAAK,CAAC,aAAa,cAAnBA,8BAAAA,mBAAuB;YACrC,GAAIE,cAAc,UAAUI,kBAAkB,CAAC,CAAC;YAChD,GAAGD,IAAI;QACT,IACA;YAAEQ,aAAa;QAAM;QAEvBT,MAAMP,KAAKiB,QAAQ,CAACV,MAAM;YAAEW,iBAAiB;YAAMC,cAAc;gBAAEC,MAAM;YAAO;YAAGJ,aAAa;QAAK;QACrGV;IACF;AACF,EAAE"}

package/lib/components/Breadcrumb/useBreadcrumbContextValue.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export function useBreadcrumbContextValues_unstable(state) {
+    const { size } = state;
+    return React.useMemo(()=>({
+            size
+        }), [
+        size
+    ]);
+}

package/lib/components/Breadcrumb/useBreadcrumbContextValue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useBreadcrumbContextValue.ts"],"sourcesContent":["import * as React from 'react';\nimport type { BreadcrumbContextValues, BreadcrumbState } from './Breadcrumb.types';\n\nexport function useBreadcrumbContextValues_unstable(state: BreadcrumbState): BreadcrumbContextValues {\n  const { size } = state;\n  return React.useMemo(() => ({ size }), [size]);\n}\n"],"names":["React","useBreadcrumbContextValues_unstable","state","size","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,oCAAoCC,KAAsB;IACxE,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,OAAOF,MAAMI,OAAO,CAAC,IAAO,CAAA;YAAED;QAAK,CAAA,GAAI;QAACA;KAAK;AAC/C"}

package/lib/components/Breadcrumb/useBreadcrumbStyles.styles.js

@@ -0,0 +1,18 @@
+import { __resetStyles, mergeClasses } from '@griffel/react';
+export const breadcrumbClassNames = {
+  root: 'fui-Breadcrumb',
+  list: 'fui-Breadcrumb__list'
+};
+const useListClassName = /*#__PURE__*/__resetStyles("rc5rb6b", null, [".rc5rb6b{list-style-type:none;display:flex;align-items:center;margin:0;padding:0;}"]);
+/**
+ * Apply styling to the Breadcrumb slots based on the state
+ */
+export const useBreadcrumbStyles_unstable = state => {
+  const listBaseClassName = useListClassName();
+  state.root.className = mergeClasses(breadcrumbClassNames.root, state.root.className);
+  if (state.list) {
+    state.list.className = mergeClasses(listBaseClassName, breadcrumbClassNames.list, state.list.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useBreadcrumbStyles.styles.js.map

package/lib/components/Breadcrumb/useBreadcrumbStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","mergeClasses","breadcrumbClassNames","root","list","useListClassName","useBreadcrumbStyles_unstable","state","listBaseClassName","className"],"sources":["useBreadcrumbStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nexport const breadcrumbClassNames = {\n    root: 'fui-Breadcrumb',\n    list: 'fui-Breadcrumb__list'\n};\nconst useListClassName = makeResetStyles({\n    listStyleType: 'none',\n    display: 'flex',\n    alignItems: 'center',\n    margin: 0,\n    padding: 0\n});\n/**\n * Apply styling to the Breadcrumb slots based on the state\n */ export const useBreadcrumbStyles_unstable = (state)=>{\n    const listBaseClassName = useListClassName();\n    state.root.className = mergeClasses(breadcrumbClassNames.root, state.root.className);\n    if (state.list) {\n        state.list.className = mergeClasses(listBaseClassName, breadcrumbClassNames.list, state.list.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE,gBAAgB;EACtBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,gBAAgB,gBAAGL,aAAA,wGAMxB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,iBAAiB,GAAGH,gBAAgB,CAAC,CAAC;EAC5CE,KAAK,CAACJ,IAAI,CAACM,SAAS,GAAGR,YAAY,CAACC,oBAAoB,CAACC,IAAI,EAAEI,KAAK,CAACJ,IAAI,CAACM,SAAS,CAAC;EACpF,IAAIF,KAAK,CAACH,IAAI,EAAE;IACZG,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACO,iBAAiB,EAAEN,oBAAoB,CAACE,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC3G;EACA,OAAOF,KAAK;AAChB,CAAC"}

package/lib/components/BreadcrumbButton/BreadcrumbButton.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { useBreadcrumbButton_unstable } from './useBreadcrumbButton';
+import { renderBreadcrumbButton_unstable } from './renderBreadcrumbButton';
+import { useBreadcrumbButtonStyles_unstable } from './useBreadcrumbButtonStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * A button component which is used inside the Breadcrumb.
+ */ export const BreadcrumbButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useBreadcrumbButton_unstable(props, ref);
+    useBreadcrumbButtonStyles_unstable(state);
+    useCustomStyleHook_unstable('useBreadcrumbButtonStyles_unstable')(state);
+    return renderBreadcrumbButton_unstable(state);
+});
+BreadcrumbButton.displayName = 'BreadcrumbButton';

package/lib/components/BreadcrumbButton/BreadcrumbButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["BreadcrumbButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useBreadcrumbButton_unstable } from './useBreadcrumbButton';\nimport { renderBreadcrumbButton_unstable } from './renderBreadcrumbButton';\nimport { useBreadcrumbButtonStyles_unstable } from './useBreadcrumbButtonStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { BreadcrumbButtonProps } from './BreadcrumbButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A button component which is used inside the Breadcrumb.\n */\nexport const BreadcrumbButton: ForwardRefComponent<BreadcrumbButtonProps> = React.forwardRef((props, ref) => {\n  const state = useBreadcrumbButton_unstable(props, ref);\n\n  useBreadcrumbButtonStyles_unstable(state);\n  useCustomStyleHook_unstable('useBreadcrumbButtonStyles_unstable')(state);\n\n  return renderBreadcrumbButton_unstable(state);\n});\n\nBreadcrumbButton.displayName = 'BreadcrumbButton';\n"],"names":["React","useBreadcrumbButton_unstable","renderBreadcrumbButton_unstable","useBreadcrumbButtonStyles_unstable","useCustomStyleHook_unstable","BreadcrumbButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,kCAAkC,QAAQ,qCAAqC;AACxF,SAASC,2BAA2B,QAAQ,kCAAkC;AAI9E;;CAEC,GACD,OAAO,MAAMC,iCAA+DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,QAAQR,6BAA6BM,OAAOC;IAElDL,mCAAmCM;IACnCL,4BAA4B,sCAAsCK;IAElE,OAAOP,gCAAgCO;AACzC,GAAG;AAEHJ,iBAAiBK,WAAW,GAAG"}

package/lib/components/BreadcrumbButton/BreadcrumbButton.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["BreadcrumbButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';\nimport { BreadcrumbProps } from '../Breadcrumb/Breadcrumb.types';\n\nexport type BreadcrumbButtonSlots = ButtonSlots;\n\n/**\n * BreadcrumbButton Props\n */\nexport type BreadcrumbButtonProps = ComponentProps<BreadcrumbButtonSlots> &\n  Pick<BreadcrumbProps, 'size'> &\n  Pick<ButtonProps, 'disabled' | 'disabledFocusable'> & {\n    /**\n     * Defines current sate of BreadcrumbButton.\n     *\n     * @default false\n     */\n    current?: boolean;\n  };\n\n/**\n * State used in rendering BreadcrumbButton\n */\nexport type BreadcrumbButtonState = ComponentState<BreadcrumbButtonSlots> &\n  Omit<ButtonState, keyof ButtonSlots | 'components'> &\n  Required<Pick<BreadcrumbButtonProps, 'current' | 'size'>>;\n"],"names":[],"mappings":"AAAA,WAyB4D"}

package/lib/components/BreadcrumbButton/index.js

@@ -0,0 +1,5 @@
+export * from './BreadcrumbButton';
+export * from './BreadcrumbButton.types';
+export * from './renderBreadcrumbButton';
+export * from './useBreadcrumbButton';
+export * from './useBreadcrumbButtonStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './BreadcrumbButton';\nexport * from './BreadcrumbButton.types';\nexport * from './renderBreadcrumbButton';\nexport * from './useBreadcrumbButton';\nexport * from './useBreadcrumbButtonStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,qBAAqB;AACnC,cAAc,2BAA2B;AACzC,cAAc,2BAA2B;AACzC,cAAc,wBAAwB;AACtC,cAAc,qCAAqC"}

package/lib/components/BreadcrumbButton/renderBreadcrumbButton.js

@@ -0,0 +1,6 @@
+import { renderButton_unstable } from '@fluentui/react-button';
+/**
+ * Render the final JSX of BreadcrumbButton
+ */ export const renderBreadcrumbButton_unstable = (state)=>{
+    return renderButton_unstable(state);
+};

package/lib/components/BreadcrumbButton/renderBreadcrumbButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderBreadcrumbButton.tsx"],"sourcesContent":["import type { BreadcrumbButtonState } from './BreadcrumbButton.types';\nimport { renderButton_unstable } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of BreadcrumbButton\n */\nexport const renderBreadcrumbButton_unstable = (state: BreadcrumbButtonState) => {\n  return renderButton_unstable(state);\n};\n"],"names":["renderButton_unstable","renderBreadcrumbButton_unstable","state"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C,OAAOF,sBAAsBE;AAC/B,EAAE"}

package/lib/components/BreadcrumbButton/useBreadcrumbButton.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useButton_unstable } from '@fluentui/react-button';
+import { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';
+/**
+ * Create the state required to render BreadcrumbButton.
+ *
+ * The returned state can be modified with hooks such as useBreadcrumbButtonStyles_unstable,
+ * before being passed to renderBreadcrumbButton_unstable.
+ *
+ * @param props - props from this instance of BreadcrumbButton
+ * @param ref - reference to root HTMLElement of BreadcrumbButton
+ */ export const useBreadcrumbButton_unstable = (props, ref)=>{
+    const { size } = useBreadcrumbContext_unstable();
+    const { current = false, as, ...rest } = props;
+    const controlType = (as !== null && as !== void 0 ? as : props.href) ? 'a' : 'button';
+    var _props_ariacurrent, _props_ariadisabled;
+    return {
+        ...useButton_unstable({
+            appearance: 'subtle',
+            role: undefined,
+            type: undefined,
+            as: controlType,
+            iconPosition: 'before',
+            'aria-current': current ? (_props_ariacurrent = props['aria-current']) !== null && _props_ariacurrent !== void 0 ? _props_ariacurrent : 'page' : undefined,
+            'aria-disabled': current ? (_props_ariadisabled = props['aria-disabled']) !== null && _props_ariadisabled !== void 0 ? _props_ariadisabled : true : undefined,
+            ...rest
+        }, ref),
+        current,
+        size
+    };
+};

package/lib/components/BreadcrumbButton/useBreadcrumbButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useBreadcrumbButton.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ARIAButtonProps } from '@fluentui/react-aria';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport type { ButtonProps } from '@fluentui/react-button';\nimport { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';\nimport type { BreadcrumbButtonProps, BreadcrumbButtonState } from './BreadcrumbButton.types';\n\n/**\n * Create the state required to render BreadcrumbButton.\n *\n * The returned state can be modified with hooks such as useBreadcrumbButtonStyles_unstable,\n * before being passed to renderBreadcrumbButton_unstable.\n *\n * @param props - props from this instance of BreadcrumbButton\n * @param ref - reference to root HTMLElement of BreadcrumbButton\n */\nexport const useBreadcrumbButton_unstable = (\n  props: BreadcrumbButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): BreadcrumbButtonState => {\n  const { size } = useBreadcrumbContext_unstable();\n  const { current = false, as, ...rest } = props;\n\n  const controlType = as ?? (props as ARIAButtonProps<'a'>).href ? 'a' : 'button';\n\n  return {\n    ...useButton_unstable(\n      {\n        appearance: 'subtle',\n        role: undefined,\n        type: undefined,\n        as: controlType,\n        iconPosition: 'before',\n        'aria-current': current ? props['aria-current'] ?? 'page' : undefined,\n        'aria-disabled': current ? props['aria-disabled'] ?? true : undefined,\n        ...rest,\n      } as ButtonProps,\n      ref,\n    ),\n    current,\n    size,\n  };\n};\n"],"names":["React","useButton_unstable","useBreadcrumbContext_unstable","useBreadcrumbButton_unstable","props","ref","size","current","as","rest","controlType","href","appearance","role","undefined","type","iconPosition"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAAQ,yBAAyB;AAE5D,SAASC,6BAA6B,QAAQ,kCAAkC;AAGhF;;;;;;;;CAQC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGJ;IACjB,MAAM,EAAEK,UAAU,KAAK,EAAEC,EAAE,EAAE,GAAGC,MAAM,GAAGL;IAEzC,MAAMM,cAAcF,CAAAA,eAAAA,gBAAAA,KAAM,AAACJ,MAA+BO,IAAI,AAAD,IAAI,MAAM;QAUvCP,oBACCA;IATjC,OAAO;QACL,GAAGH,mBACD;YACEW,YAAY;YACZC,MAAMC;YACNC,MAAMD;YACNN,IAAIE;YACJM,cAAc;YACd,gBAAgBT,UAAUH,CAAAA,qBAAAA,KAAK,CAAC,eAAe,cAArBA,gCAAAA,qBAAyB,SAASU;YAC5D,iBAAiBP,UAAUH,CAAAA,sBAAAA,KAAK,CAAC,gBAAgB,cAAtBA,iCAAAA,sBAA0B,OAAOU;YAC5D,GAAGL,IAAI;QACT,GACAJ,IACD;QACDE;QACAD;IACF;AACF,EAAE"}