@apvee/spfx-react-toolkit 1.0.0

package/lib/hooks/useSPFxEnvironmentInfo.js

@@ -0,0 +1,91 @@
+// useSPFxEnvironmentInfo.ts
+// Hook to access environment type information
+import { useSPFxPageContext } from './useSPFxPageContext';
+/**
+ * Hook to access SPFx environment type information
+ *
+ * Detects the current host environment:
+ * - Local: Local workbench (localhost)
+ * - SharePoint: SharePoint Online
+ * - SharePointOnPrem: SharePoint On-Premises
+ * - Teams: Microsoft Teams
+ * - Office: Office applications
+ * - Outlook: Outlook
+ *
+ * Useful for:
+ * - Environment-specific rendering
+ * - Feature availability checks
+ * - API endpoint selection
+ * - Debugging information
+ *
+ * @returns Environment information
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { type, isTeams, isLocal } = useSPFxEnvironmentInfo();
+ *
+ *   if (isLocal) {
+ *     return <div>Development Mode</div>;
+ *   }
+ *
+ *   if (isTeams) {
+ *     return <TeamsSpecificUI />;
+ *   }
+ *
+ *   return <SharePointUI />;
+ * }
+ * ```
+ */
+export function useSPFxEnvironmentInfo() {
+    var _a;
+    var pageContext = useSPFxPageContext();
+    // Get legacy page context for environment detection
+    var legacy = pageContext.legacyPageContext;
+    // Check for SDK contexts (Teams, Office, Outlook)
+    var sdks = pageContext.sdks;
+    var isTeams = (sdks === null || sdks === void 0 ? void 0 : sdks.microsoftTeams) !== undefined;
+    var isOffice = (sdks === null || sdks === void 0 ? void 0 : sdks.office) !== undefined;
+    var isOutlook = (sdks === null || sdks === void 0 ? void 0 : sdks.outlook) !== undefined;
+    // Check for local workbench
+    var webUrl = pageContext.web.absoluteUrl.toLowerCase();
+    var isLocal = webUrl.indexOf('localhost') !== -1 ||
+        webUrl.indexOf('127.0.0.1') !== -1;
+    // Check for workbench (local or hosted)
+    var isWorkbench = isLocal ||
+        webUrl.indexOf('workbench.aspx') !== -1 ||
+        webUrl.indexOf('_layouts/15/workbench.aspx') !== -1;
+    // Check for SharePoint On-Premises
+    var isOnPrem = (_a = legacy === null || legacy === void 0 ? void 0 : legacy.isOnPremises) !== null && _a !== void 0 ? _a : false;
+    // Determine environment type (priority order: Local > Teams > Outlook > Office > OnPrem > SharePoint)
+    var type;
+    if (isLocal) {
+        type = 'Local';
+    }
+    else if (isTeams) {
+        type = 'Teams';
+    }
+    else if (isOutlook) {
+        type = 'Outlook';
+    }
+    else if (isOffice) {
+        type = 'Office';
+    }
+    else if (isOnPrem) {
+        type = 'SharePointOnPrem';
+    }
+    else {
+        type = 'SharePoint';
+    }
+    return {
+        type: type,
+        isLocal: isLocal,
+        isWorkbench: isWorkbench,
+        isSharePoint: type === 'SharePoint',
+        isSharePointOnPrem: type === 'SharePointOnPrem',
+        isTeams: isTeams,
+        isOffice: isOffice,
+        isOutlook: isOutlook,
+    };
+}
+//# sourceMappingURL=useSPFxEnvironmentInfo.js.map

package/lib/hooks/useSPFxEnvironmentInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSPFxEnvironmentInfo.js","sourceRoot":"","sources":["../../src/hooks/useSPFxEnvironmentInfo.ts"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,8CAA8C;AAE9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AA0C1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,UAAU,sBAAsB;;IACpC,IAAM,WAAW,GAAG,kBAAkB,EAAE,CAAC;IAEzC,oDAAoD;IACpD,IAAM,MAAM,GAAI,WAMd,CAAC,iBAAiB,CAAC;IAErB,kDAAkD;IAClD,IAAM,IAAI,GAAI,WAMZ,CAAC,IAAI,CAAC;IAER,IAAM,OAAO,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,cAAc,MAAK,SAAS,CAAC;IACnD,IAAM,QAAQ,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,MAAK,SAAS,CAAC;IAC5C,IAAM,SAAS,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,MAAK,SAAS,CAAC;IAE9C,4BAA4B;IAC5B,IAAM,MAAM,GAAG,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;IACzD,IAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAClC,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;IAEnD,wCAAwC;IACxC,IAAM,WAAW,GAAG,OAAO;QACP,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;QACvC,MAAM,CAAC,OAAO,CAAC,4BAA4B,CAAC,KAAK,CAAC,CAAC,CAAC;IAExE,mCAAmC;IACnC,IAAM,QAAQ,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,YAAY,mCAAI,KAAK,CAAC;IAE/C,sGAAsG;IACtG,IAAI,IAAyB,CAAC;IAC9B,IAAI,OAAO,EAAE,CAAC;QACZ,IAAI,GAAG,OAAO,CAAC;IACjB,CAAC;SAAM,IAAI,OAAO,EAAE,CAAC;QACnB,IAAI,GAAG,OAAO,CAAC;IACjB,CAAC;SAAM,IAAI,SAAS,EAAE,CAAC;QACrB,IAAI,GAAG,SAAS,CAAC;IACnB,CAAC;SAAM,IAAI,QAAQ,EAAE,CAAC;QACpB,IAAI,GAAG,QAAQ,CAAC;IAClB,CAAC;SAAM,IAAI,QAAQ,EAAE,CAAC;QACpB,IAAI,GAAG,kBAAkB,CAAC;IAC5B,CAAC;SAAM,CAAC;QACN,IAAI,GAAG,YAAY,CAAC;IACtB,CAAC;IAED,OAAO;QACL,IAAI,MAAA;QACJ,OAAO,SAAA;QACP,WAAW,aAAA;QACX,YAAY,EAAE,IAAI,KAAK,YAAY;QACnC,kBAAkB,EAAE,IAAI,KAAK,kBAAkB;QAC/C,OAAO,SAAA;QACP,QAAQ,UAAA;QACR,SAAS,WAAA;KACV,CAAC;AACJ,CAAC"}

package/lib/hooks/useSPFxFluent9ThemeInfo.d.ts

@@ -0,0 +1,105 @@
+import type { Theme } from '@fluentui/react-theme';
+/**
+ * Return type for useSPFxFluent9ThemeInfo hook
+ */
+export interface SPFxFluent9ThemeInfo {
+    /** Fluent UI 9 theme object ready to use with FluentProvider */
+    readonly theme: Theme;
+    /** Whether the component is running in Microsoft Teams */
+    readonly isTeams: boolean;
+    /** Teams theme name if running in Teams ('default', 'dark', 'contrast') */
+    readonly teamsTheme?: string;
+}
+/**
+ * Hook for accessing Fluent UI 9 theme based on SPFx context
+ *
+ * Automatically detects the execution context and provides the appropriate
+ * Fluent UI 9 theme:
+ * - **In Microsoft Teams**: Returns native Teams themes (light/dark/contrast)
+ * - **In SharePoint**: Converts SPFx theme (v8) to Fluent UI 9 theme
+ * - **Fallback**: Returns webLightTheme if no theme available
+ *
+ * The hook uses memoization to avoid expensive theme conversions on every render.
+ * Theme updates are automatically handled when the user switches themes in
+ * SharePoint or Teams through the SPFxProvider's theme subscription mechanism.
+ *
+ * Priority order:
+ * 1. Teams theme (if running in Teams context)
+ * 2. SPFx theme converted to Fluent UI 9
+ * 3. Default webLightTheme
+ *
+ * Useful for:
+ * - Wrapping components with FluentProvider
+ * - Ensuring consistent theming across SharePoint and Teams
+ * - Automatic theme switching when user changes Teams/SharePoint theme
+ * - Building Fluent UI 9 applications in SPFx
+ *
+ * @returns Theme information including Fluent UI 9 theme and context details
+ *
+ * @example Basic usage with FluentProvider
+ * ```tsx
+ * import { FluentProvider } from '@fluentui/react-components';
+ *
+ * function MyWebPart() {
+ *   const { theme } = useSPFxFluent9ThemeInfo();
+ *
+ *   return (
+ *     <FluentProvider theme={theme}>
+ *       <MyApp />
+ *     </FluentProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example Accessing context information
+ * ```tsx
+ * function MyComponent() {
+ *   const { theme, isTeams, teamsTheme } = useSPFxFluent9ThemeInfo();
+ *
+ *   return (
+ *     <div>
+ *       <p>Running in Teams: {isTeams ? 'Yes' : 'No'}</p>
+ *       {isTeams && <p>Teams theme: {teamsTheme}</p>}
+ *       <FluentProvider theme={theme}>
+ *         <Button>Themed Button</Button>
+ *       </FluentProvider>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example Conditional rendering based on theme
+ * ```tsx
+ * function ThemedComponent() {
+ *   const { theme, teamsTheme } = useSPFxFluent9ThemeInfo();
+ *
+ *   const isDarkTheme = teamsTheme === 'dark';
+ *
+ *   return (
+ *     <FluentProvider theme={theme}>
+ *       {isDarkTheme ? <DarkModeIcon /> : <LightModeIcon />}
+ *     </FluentProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example Using with Fluent UI 9 components
+ * ```tsx
+ * import { FluentProvider, Button, Card } from '@fluentui/react-components';
+ *
+ * function MyWebPart() {
+ *   const { theme, isTeams } = useSPFxFluent9ThemeInfo();
+ *
+ *   return (
+ *     <FluentProvider theme={theme}>
+ *       <Card>
+ *         <h3>Hello from {isTeams ? 'Teams' : 'SharePoint'}!</h3>
+ *         <Button appearance="primary">Click me</Button>
+ *       </Card>
+ *     </FluentProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function useSPFxFluent9ThemeInfo(): SPFxFluent9ThemeInfo;
+//# sourceMappingURL=useSPFxFluent9ThemeInfo.d.ts.map

package/lib/hooks/useSPFxFluent9ThemeInfo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSPFxFluent9ThemeInfo.d.ts","sourceRoot":"","sources":["../../src/hooks/useSPFxFluent9ThemeInfo.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAWnD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,gEAAgE;IAChE,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IAEtB,0DAA0D;IAC1D,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAE1B,2EAA2E;IAC3E,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0FG;AACH,wBAAgB,uBAAuB,IAAI,oBAAoB,CAyB9D"}

package/lib/hooks/useSPFxFluent9ThemeInfo.js

@@ -0,0 +1,136 @@
+// useSPFxFluent9ThemeInfo.ts
+// Hook for accessing Fluent UI 9 theme based on SPFx context
+import { useMemo } from 'react';
+import { webLightTheme, teamsLightTheme, teamsDarkTheme, teamsHighContrastTheme } from '@fluentui/react-theme';
+import { createV9Theme } from '@fluentui/react-migration-v8-v9';
+import { useSPFxThemeInfo } from './useSPFxThemeInfo';
+import { useSPFxTeams } from './useSPFxTeams';
+/**
+ * Hook for accessing Fluent UI 9 theme based on SPFx context
+ *
+ * Automatically detects the execution context and provides the appropriate
+ * Fluent UI 9 theme:
+ * - **In Microsoft Teams**: Returns native Teams themes (light/dark/contrast)
+ * - **In SharePoint**: Converts SPFx theme (v8) to Fluent UI 9 theme
+ * - **Fallback**: Returns webLightTheme if no theme available
+ *
+ * The hook uses memoization to avoid expensive theme conversions on every render.
+ * Theme updates are automatically handled when the user switches themes in
+ * SharePoint or Teams through the SPFxProvider's theme subscription mechanism.
+ *
+ * Priority order:
+ * 1. Teams theme (if running in Teams context)
+ * 2. SPFx theme converted to Fluent UI 9
+ * 3. Default webLightTheme
+ *
+ * Useful for:
+ * - Wrapping components with FluentProvider
+ * - Ensuring consistent theming across SharePoint and Teams
+ * - Automatic theme switching when user changes Teams/SharePoint theme
+ * - Building Fluent UI 9 applications in SPFx
+ *
+ * @returns Theme information including Fluent UI 9 theme and context details
+ *
+ * @example Basic usage with FluentProvider
+ * ```tsx
+ * import { FluentProvider } from '@fluentui/react-components';
+ *
+ * function MyWebPart() {
+ *   const { theme } = useSPFxFluent9ThemeInfo();
+ *
+ *   return (
+ *     <FluentProvider theme={theme}>
+ *       <MyApp />
+ *     </FluentProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example Accessing context information
+ * ```tsx
+ * function MyComponent() {
+ *   const { theme, isTeams, teamsTheme } = useSPFxFluent9ThemeInfo();
+ *
+ *   return (
+ *     <div>
+ *       <p>Running in Teams: {isTeams ? 'Yes' : 'No'}</p>
+ *       {isTeams && <p>Teams theme: {teamsTheme}</p>}
+ *       <FluentProvider theme={theme}>
+ *         <Button>Themed Button</Button>
+ *       </FluentProvider>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example Conditional rendering based on theme
+ * ```tsx
+ * function ThemedComponent() {
+ *   const { theme, teamsTheme } = useSPFxFluent9ThemeInfo();
+ *
+ *   const isDarkTheme = teamsTheme === 'dark';
+ *
+ *   return (
+ *     <FluentProvider theme={theme}>
+ *       {isDarkTheme ? <DarkModeIcon /> : <LightModeIcon />}
+ *     </FluentProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example Using with Fluent UI 9 components
+ * ```tsx
+ * import { FluentProvider, Button, Card } from '@fluentui/react-components';
+ *
+ * function MyWebPart() {
+ *   const { theme, isTeams } = useSPFxFluent9ThemeInfo();
+ *
+ *   return (
+ *     <FluentProvider theme={theme}>
+ *       <Card>
+ *         <h3>Hello from {isTeams ? 'Teams' : 'SharePoint'}!</h3>
+ *         <Button appearance="primary">Click me</Button>
+ *       </Card>
+ *     </FluentProvider>
+ *   );
+ * }
+ * ```
+ */
+export function useSPFxFluent9ThemeInfo() {
+    var teamsInfo = useSPFxTeams();
+    var spfxTheme = useSPFxThemeInfo();
+    var theme = useMemo(function () {
+        // Priority 1: Teams theme (native Teams themes for better integration)
+        if (teamsInfo.supported && teamsInfo.theme) {
+            return getTeamsFluentTheme(teamsInfo.theme);
+        }
+        // Priority 2: Convert SPFx theme to Fluent UI 9
+        if (spfxTheme) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return createV9Theme(spfxTheme);
+        }
+        // Priority 3: Fallback to default light theme
+        return webLightTheme;
+    }, [teamsInfo.supported, teamsInfo.theme, spfxTheme]);
+    return {
+        theme: theme,
+        isTeams: teamsInfo.supported,
+        teamsTheme: teamsInfo.theme
+    };
+}
+/**
+ * Maps Teams theme name to corresponding Fluent UI 9 theme
+ * @internal
+ */
+function getTeamsFluentTheme(teamsThemeName) {
+    switch (teamsThemeName) {
+        case 'dark':
+            return teamsDarkTheme;
+        case 'highContrast':
+            return teamsHighContrastTheme;
+        case 'default':
+        default:
+            return teamsLightTheme;
+    }
+}
+//# sourceMappingURL=useSPFxFluent9ThemeInfo.js.map

package/lib/hooks/useSPFxFluent9ThemeInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSPFxFluent9ThemeInfo.js","sourceRoot":"","sources":["../../src/hooks/useSPFxFluent9ThemeInfo.ts"],"names":[],"mappings":"AAAA,6BAA6B;AAC7B,6DAA6D;AAE7D,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EACL,aAAa,EACb,eAAe,EACf,cAAc,EACd,sBAAsB,EACvB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAgB9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0FG;AACH,MAAM,UAAU,uBAAuB;IACrC,IAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,IAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,IAAM,KAAK,GAAG,OAAO,CAAC;QACpB,uEAAuE;QACvE,IAAI,SAAS,CAAC,SAAS,IAAI,SAAS,CAAC,KAAK,EAAE,CAAC;YAC3C,OAAO,mBAAmB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QAC9C,CAAC;QAED,gDAAgD;QAChD,IAAI,SAAS,EAAE,CAAC;YACd,8DAA8D;YAC9D,OAAO,aAAa,CAAC,SAAgB,CAAC,CAAC;QACzC,CAAC;QAED,8CAA8C;QAC9C,OAAO,aAAa,CAAC;IACvB,CAAC,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEtD,OAAO;QACL,KAAK,OAAA;QACL,OAAO,EAAE,SAAS,CAAC,SAAS;QAC5B,UAAU,EAAE,SAAS,CAAC,KAAK;KAC5B,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,SAAS,mBAAmB,CAAC,cAAsB;IACjD,QAAQ,cAAc,EAAE,CAAC;QACvB,KAAK,MAAM;YACT,OAAO,cAAc,CAAC;QACxB,KAAK,cAAc;YACjB,OAAO,sBAAsB,CAAC;QAChC,KAAK,SAAS,CAAC;QACf;YACE,OAAO,eAAe,CAAC;IAC3B,CAAC;AACH,CAAC"}

package/lib/hooks/useSPFxHubSiteInfo.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Return type for useSPFxHubSiteInfo hook
+ */
+export interface SPFxHubSiteInfo {
+    /** Whether the current site is associated with a hub site */
+    readonly isHubSite: boolean;
+    /** Hub site ID (GUID) if associated, undefined otherwise */
+    readonly hubSiteId: string | undefined;
+    /** Hub site URL (fetched via REST API) */
+    readonly hubSiteUrl: string | undefined;
+    /** Whether hub site URL is being loaded */
+    readonly isLoading: boolean;
+    /** Error during hub site URL fetch */
+    readonly error: Error | undefined;
+}
+/**
+ * Hook for Hub Site information
+ *
+ * Provides information about SharePoint Hub Site association:
+ * - isHubSite: Whether site is associated with a hub
+ * - hubSiteId: Unique hub site identifier (GUID) from pageContext
+ * - hubSiteUrl: Hub site URL (fetched via REST API)
+ * - isLoading: Loading state for hub URL fetch
+ * - error: Error during hub URL fetch
+ *
+ * Hub Sites are modern SharePoint feature that allow:
+ * - Unified navigation across related sites
+ * - Shared branding and theming
+ * - Content rollup from associated sites
+ * - Centralized search and navigation
+ *
+ * Use this hook to:
+ * - Detect hub site association
+ * - Get hub site ID and URL
+ * - Implement hub-aware navigation
+ *
+ * Note: hubSiteUrl is fetched asynchronously via REST API when isHubSite is true.
+ *
+ * @returns Hub site information (isHubSite, hubSiteId, hubSiteUrl, isLoading, error)
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { isHubSite, hubSiteId, hubSiteUrl, isLoading } = useSPFxHubSiteInfo();
+ *
+ *   if (!isHubSite) {
+ *     return <div>Not part of a hub site</div>;
+ *   }
+ *
+ *   if (isLoading) {
+ *     return <Spinner label="Loading hub info..." />;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <h3>Hub Site Info</h3>
+ *       <p>Hub ID: {hubSiteId}</p>
+ *       <a href={hubSiteUrl}>Go to Hub</a>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example Hub-aware navigation
+ * ```tsx
+ * function HubNavigation() {
+ *   const { isHubSite, hubSiteUrl, isLoading } = useSPFxHubSiteInfo();
+ *
+ *   if (!isHubSite || isLoading) return null;
+ *
+ *   return (
+ *     <nav>
+ *       <a href={hubSiteUrl}>← Back to Hub</a>
+ *     </nav>
+ *   );
+ * }
+ * ```
+ */
+export declare function useSPFxHubSiteInfo(): SPFxHubSiteInfo;
+//# sourceMappingURL=useSPFxHubSiteInfo.d.ts.map

package/lib/hooks/useSPFxHubSiteInfo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSPFxHubSiteInfo.d.ts","sourceRoot":"","sources":["../../src/hooks/useSPFxHubSiteInfo.ts"],"names":[],"mappings":"AAQA;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,6DAA6D;IAC7D,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAE5B,4DAA4D;IAC5D,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAEvC,0CAA0C;IAC1C,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAExC,2CAA2C;IAC3C,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAE5B,sCAAsC;IACtC,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,CAAC;CACnC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,wBAAgB,kBAAkB,IAAI,eAAe,CAyEpD"}

package/lib/hooks/useSPFxHubSiteInfo.js

@@ -0,0 +1,127 @@
+// useSPFxHubSiteInfo.ts
+// Hook for Hub Site information
+import { useState, useEffect } from 'react';
+import { SPHttpClient } from '@microsoft/sp-http';
+import { useSPFxPageContext } from './useSPFxPageContext';
+import { useSPFxSPHttpClient } from './useSPFxSPHttpClient';
+/**
+ * Hook for Hub Site information
+ *
+ * Provides information about SharePoint Hub Site association:
+ * - isHubSite: Whether site is associated with a hub
+ * - hubSiteId: Unique hub site identifier (GUID) from pageContext
+ * - hubSiteUrl: Hub site URL (fetched via REST API)
+ * - isLoading: Loading state for hub URL fetch
+ * - error: Error during hub URL fetch
+ *
+ * Hub Sites are modern SharePoint feature that allow:
+ * - Unified navigation across related sites
+ * - Shared branding and theming
+ * - Content rollup from associated sites
+ * - Centralized search and navigation
+ *
+ * Use this hook to:
+ * - Detect hub site association
+ * - Get hub site ID and URL
+ * - Implement hub-aware navigation
+ *
+ * Note: hubSiteUrl is fetched asynchronously via REST API when isHubSite is true.
+ *
+ * @returns Hub site information (isHubSite, hubSiteId, hubSiteUrl, isLoading, error)
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { isHubSite, hubSiteId, hubSiteUrl, isLoading } = useSPFxHubSiteInfo();
+ *
+ *   if (!isHubSite) {
+ *     return <div>Not part of a hub site</div>;
+ *   }
+ *
+ *   if (isLoading) {
+ *     return <Spinner label="Loading hub info..." />;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       <h3>Hub Site Info</h3>
+ *       <p>Hub ID: {hubSiteId}</p>
+ *       <a href={hubSiteUrl}>Go to Hub</a>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example Hub-aware navigation
+ * ```tsx
+ * function HubNavigation() {
+ *   const { isHubSite, hubSiteUrl, isLoading } = useSPFxHubSiteInfo();
+ *
+ *   if (!isHubSite || isLoading) return null;
+ *
+ *   return (
+ *     <nav>
+ *       <a href={hubSiteUrl}>← Back to Hub</a>
+ *     </nav>
+ *   );
+ * }
+ * ```
+ */
+export function useSPFxHubSiteInfo() {
+    var _a;
+    var pageContext = useSPFxPageContext();
+    var _b = useSPFxSPHttpClient(), invoke = _b.invoke, baseUrl = _b.baseUrl;
+    var _c = useState(undefined), hubSiteUrl = _c[0], setHubSiteUrl = _c[1];
+    var _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
+    var _e = useState(undefined), error = _e[0], setError = _e[1];
+    // Get hub site info from legacyPageContext
+    var legacy = pageContext.legacyPageContext;
+    var hubSiteId = legacy === null || legacy === void 0 ? void 0 : legacy.hubSiteId;
+    var isCurrentSiteTheHub = (_a = legacy === null || legacy === void 0 ? void 0 : legacy.isHubSite) !== null && _a !== void 0 ? _a : false;
+    var currentSiteUrl = pageContext.webAbsoluteUrl;
+    // Site is part of a hub if hubSiteId exists and is not empty GUID
+    var isHubSite = hubSiteId !== undefined &&
+        hubSiteId !== '' &&
+        hubSiteId !== '00000000-0000-0000-0000-000000000000';
+    // Fetch hub site URL when needed
+    useEffect(function () {
+        if (!isHubSite || !hubSiteId) {
+            return;
+        }
+        // OPTIMIZATION: If current site IS the hub site, use current URL directly
+        if (isCurrentSiteTheHub && currentSiteUrl) {
+            setHubSiteUrl(currentSiteUrl);
+            setIsLoading(false);
+            return;
+        }
+        // Otherwise, fetch hub URL via API (current site is associated to a hub)
+        setIsLoading(true);
+        setError(undefined);
+        // Use the web's hub site data endpoint to get hub URL
+        // This endpoint returns { value: "JSON_STRING" }, so we need to parse twice
+        invoke(function (client) {
+            return client.get("".concat(baseUrl, "/_api/web/hubsitedata(false)"), SPHttpClient.configurations.v1)
+                .then(function (res) { return res.json(); })
+                .then(function (response) { return JSON.parse(response.value); });
+        })
+            .then(function (data) {
+            if (data.url) {
+                setHubSiteUrl(data.url);
+            }
+            setIsLoading(false);
+        })
+            .catch(function (err) {
+            var errorObj = err instanceof Error ? err : new Error(String(err));
+            setError(errorObj);
+            setIsLoading(false);
+        });
+    }, [isHubSite, hubSiteId, isCurrentSiteTheHub, currentSiteUrl, invoke, baseUrl]);
+    return {
+        isHubSite: isHubSite,
+        hubSiteId: isHubSite ? hubSiteId : undefined,
+        hubSiteUrl: hubSiteUrl,
+        isLoading: isLoading,
+        error: error,
+    };
+}
+//# sourceMappingURL=useSPFxHubSiteInfo.js.map

package/lib/hooks/useSPFxHubSiteInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSPFxHubSiteInfo.js","sourceRoot":"","sources":["../../src/hooks/useSPFxHubSiteInfo.ts"],"names":[],"mappings":"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"}

package/lib/hooks/useSPFxInstanceInfo.d.ts

@@ -0,0 +1,41 @@
+import type { HostKind } from '../core/types';
+/**
+ * Return type for useSPFxInstanceInfo hook
+ */
+export interface SPFxInstanceInfo {
+    /** Unique identifier for this SPFx instance */
+    readonly id: string;
+    /** Type of SPFx component (WebPart, AppCustomizer, etc.) */
+    readonly kind: HostKind;
+}
+/**
+ * Hook to access SPFx instance metadata
+ *
+ * Provides:
+ * - id: Unique identifier for this SPFx instance
+ * - kind: Type of component ('WebPart', 'AppCustomizer', etc.)
+ *
+ * Useful for:
+ * - Logging and telemetry
+ * - Conditional logic based on host type
+ * - Scoped storage keys
+ * - Debug information
+ *
+ * @returns Instance metadata
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { id, kind } = useSPFxInstanceInfo();
+ *
+ *   return (
+ *     <div>
+ *       <p>Instance: {id}</p>
+ *       <p>Type: {kind}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useSPFxInstanceInfo(): SPFxInstanceInfo;
+//# sourceMappingURL=useSPFxInstanceInfo.d.ts.map

package/lib/hooks/useSPFxInstanceInfo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSPFxInstanceInfo.d.ts","sourceRoot":"","sources":["../../src/hooks/useSPFxInstanceInfo.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IAEpB,4DAA4D;IAC5D,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,mBAAmB,IAAI,gBAAgB,CAOtD"}

package/lib/hooks/useSPFxInstanceInfo.js

@@ -0,0 +1,40 @@
+// useSPFxInstanceInfo.ts
+// Hook to access SPFx instance metadata
+import { useSPFxContext } from './useSPFxContext';
+/**
+ * Hook to access SPFx instance metadata
+ *
+ * Provides:
+ * - id: Unique identifier for this SPFx instance
+ * - kind: Type of component ('WebPart', 'AppCustomizer', etc.)
+ *
+ * Useful for:
+ * - Logging and telemetry
+ * - Conditional logic based on host type
+ * - Scoped storage keys
+ * - Debug information
+ *
+ * @returns Instance metadata
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { id, kind } = useSPFxInstanceInfo();
+ *
+ *   return (
+ *     <div>
+ *       <p>Instance: {id}</p>
+ *       <p>Type: {kind}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useSPFxInstanceInfo() {
+    var _a = useSPFxContext(), instanceId = _a.instanceId, kind = _a.kind;
+    return {
+        id: instanceId,
+        kind: kind,
+    };
+}
+//# sourceMappingURL=useSPFxInstanceInfo.js.map

package/lib/hooks/useSPFxInstanceInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSPFxInstanceInfo.js","sourceRoot":"","sources":["../../src/hooks/useSPFxInstanceInfo.ts"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,wCAAwC;AAExC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAclD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,mBAAmB;IAC3B,IAAA,KAAuB,cAAc,EAAE,EAArC,UAAU,gBAAA,EAAE,IAAI,UAAqB,CAAC;IAE9C,OAAO;QACL,EAAE,EAAE,UAAU;QACd,IAAI,MAAA;KACL,CAAC;AACJ,CAAC"}