@thunderid/react 0.1.0 → 0.2.0

package/dist/components/presentation/OrganizationList/BaseOrganizationList.js

@@ -0,0 +1,252 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import Spinner_default from "../../primitives/Spinner/Spinner.js";
+import Button_default from "../../primitives/Button/Button.js";
+import Typography_default from "../../primitives/Typography/Typography.js";
+import { Avatar } from "../../primitives/Avatar/Avatar.js";
+import Dialog_default from "../../primitives/Dialog/Dialog.js";
+import BaseOrganizationList_styles_default from "./BaseOrganizationList.styles.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/presentation/OrganizationList/BaseOrganizationList.tsx
+/**
+* Default organization item renderer
+*/
+const defaultRenderOrganization = (organization, styles, t, onOrganizationSelect, showStatus) => /* @__PURE__ */ jsxs("div", {
+	className: cx(styles.organizationItem),
+	children: [/* @__PURE__ */ jsxs("div", {
+		className: cx(styles.organizationContent),
+		children: [/* @__PURE__ */ jsx(Avatar, {
+			variant: "square",
+			name: organization.name,
+			size: 48,
+			alt: `${organization.name} logo`
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cx(styles.organizationInfo),
+			children: [
+				/* @__PURE__ */ jsx(Typography_default, {
+					variant: "h6",
+					className: cx(styles.organizationName),
+					children: organization.name
+				}),
+				/* @__PURE__ */ jsxs(Typography_default, {
+					variant: "body2",
+					color: "textSecondary",
+					className: cx(styles.organizationHandle),
+					children: ["@", organization.orgHandle]
+				}),
+				showStatus && /* @__PURE__ */ jsxs(Typography_default, {
+					variant: "body2",
+					color: "textSecondary",
+					className: cx(styles.organizationStatus),
+					children: [
+						t("organization.switcher.status.label"),
+						" ",
+						/* @__PURE__ */ jsx("span", {
+							className: cx(styles.statusText, organization.status === "ACTIVE" ? styles.statusTextActive : styles.statusTextInactive),
+							children: organization.status
+						})
+					]
+				})
+			]
+		})]
+	}), organization.canSwitch && /* @__PURE__ */ jsx("div", {
+		className: cx(styles.organizationActions),
+		children: /* @__PURE__ */ jsx(Button_default, {
+			onClick: (e) => {
+				e.stopPropagation();
+				onOrganizationSelect?.(organization);
+			},
+			type: "button",
+			size: "small",
+			children: t("organization.switcher.buttons.switch.text")
+		})
+	})]
+}, organization.id);
+/**
+* Default loading renderer
+*/
+const defaultRenderLoading = (t, styles) => /* @__PURE__ */ jsxs("div", {
+	className: cx(styles.loadingContainer),
+	children: [/* @__PURE__ */ jsx(Spinner_default, { size: "medium" }), /* @__PURE__ */ jsx(Typography_default, {
+		variant: "body1",
+		color: "textSecondary",
+		className: cx(styles.loadingText),
+		children: t("organization.switcher.loading.placeholder.organizations")
+	})]
+});
+/**
+* Default error renderer
+*/
+const defaultRenderError = (errorMessage, t, styles) => /* @__PURE__ */ jsx("div", {
+	className: cx(styles.errorContainer),
+	children: /* @__PURE__ */ jsxs(Typography_default, {
+		variant: "body1",
+		color: "error",
+		children: [
+			/* @__PURE__ */ jsx("strong", { children: t("organization.switcher.error.prefix") }),
+			" ",
+			errorMessage
+		]
+	})
+});
+/**
+* Default load more button renderer
+*/
+const defaultRenderLoadMore = (onLoadMore, isLoadingMore, t, styles) => /* @__PURE__ */ jsx(Button_default, {
+	onClick: onLoadMore,
+	disabled: isLoadingMore,
+	className: cx(styles.loadMoreButton),
+	type: "button",
+	fullWidth: true,
+	children: isLoadingMore ? t("organization.switcher.loading.more") : t("organization.switcher.buttons.load_more.text")
+});
+/**
+* Default empty state renderer
+*/
+const defaultRenderEmpty = (t, styles) => /* @__PURE__ */ jsx("div", {
+	className: cx(styles.emptyContainer),
+	children: /* @__PURE__ */ jsx(Typography_default, {
+		variant: "body1",
+		color: "textSecondary",
+		className: cx(styles.emptyText),
+		children: t("organization.switcher.no.organizations")
+	})
+});
+/**
+* BaseOrganizationList component displays a list of organizations with pagination support.
+* This component serves as the base for framework-specific implementations.
+*
+* @example
+* ```tsx
+* <BaseOrganizationList
+*   data={organizations}
+*   isLoading={isLoading}
+*   hasMore={hasMore}
+*   fetchMore={fetchMore}
+*   error={error}
+* />
+* ```
+*/
+const BaseOrganizationList = ({ className = "", allOrganizations, myOrganizations, error, fetchMore, hasMore = false, isLoading = false, isLoadingMore = false, mode = "inline", onOpenChange, onOrganizationSelect, onRefresh, open = false, renderEmpty, renderError, renderLoading, renderLoadMore, renderOrganization, style, title = "Organizations", showStatus, preferences }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = BaseOrganizationList_styles_default(theme, colorScheme);
+	const { t } = useTranslation_default(preferences?.i18n);
+	const organizationsWithSwitchAccess = useMemo(() => {
+		if (!allOrganizations?.organizations) return [];
+		const myOrgIds = new Set(myOrganizations?.map((org) => org.id) || []);
+		return allOrganizations.organizations.map((org) => ({
+			...org,
+			canSwitch: myOrgIds.has(org.id)
+		}));
+	}, [allOrganizations?.organizations, myOrganizations]);
+	const renderLoadingWithStyles = renderLoading || (() => defaultRenderLoading(t, styles));
+	const renderErrorWithStyles = renderError || ((errorMsg) => defaultRenderError(errorMsg, t, styles));
+	const renderEmptyWithStyles = renderEmpty || (() => defaultRenderEmpty(t, styles));
+	const renderLoadMoreWithStyles = renderLoadMore || ((onLoadMore, loadingMore) => defaultRenderLoadMore(onLoadMore, loadingMore, t, styles));
+	const renderOrganizationWithStyles = renderOrganization || ((org) => defaultRenderOrganization(org, styles, t, onOrganizationSelect, showStatus));
+	if (isLoading && organizationsWithSwitchAccess?.length === 0) {
+		const loadingContent = /* @__PURE__ */ jsx("div", {
+			className: cx(styles["root"], className),
+			style,
+			children: renderLoadingWithStyles()
+		});
+		if (mode === "popup") return /* @__PURE__ */ jsx(Dialog_default, {
+			open,
+			onOpenChange,
+			children: /* @__PURE__ */ jsxs(Dialog_default.Content, { children: [/* @__PURE__ */ jsx(Dialog_default.Heading, { children: title }), /* @__PURE__ */ jsx("div", {
+				className: cx(styles["popupContent"]),
+				children: loadingContent
+			})] })
+		});
+		return loadingContent;
+	}
+	if (error && organizationsWithSwitchAccess?.length === 0) {
+		const errorContent = /* @__PURE__ */ jsx("div", {
+			className: cx(styles["root"], className),
+			style,
+			children: renderErrorWithStyles(error)
+		});
+		if (mode === "popup") return /* @__PURE__ */ jsx(Dialog_default, {
+			open,
+			onOpenChange,
+			children: /* @__PURE__ */ jsxs(Dialog_default.Content, { children: [/* @__PURE__ */ jsx(Dialog_default.Heading, { children: title }), /* @__PURE__ */ jsx("div", {
+				className: cx(styles["popupContent"]),
+				children: errorContent
+			})] })
+		});
+		return errorContent;
+	}
+	if (!isLoading && organizationsWithSwitchAccess?.length === 0) {
+		const emptyContent = /* @__PURE__ */ jsx("div", {
+			className: cx(styles["root"], className),
+			style,
+			children: renderEmptyWithStyles()
+		});
+		if (mode === "popup") return /* @__PURE__ */ jsx(Dialog_default, {
+			open,
+			onOpenChange,
+			children: /* @__PURE__ */ jsxs(Dialog_default.Content, { children: [/* @__PURE__ */ jsx(Dialog_default.Heading, { children: title }), /* @__PURE__ */ jsx("div", {
+				className: cx(styles["popupContent"]),
+				children: emptyContent
+			})] })
+		});
+		return emptyContent;
+	}
+	const organizationListContent = /* @__PURE__ */ jsxs("div", {
+		className: cx(styles["root"], className),
+		style,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cx(styles["header"]),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cx(styles["headerInfo"]),
+					children: /* @__PURE__ */ jsx(Typography_default, {
+						variant: "body2",
+						color: "textSecondary",
+						className: cx(styles["subtitle"]),
+						children: t("organization.switcher.showing.count", {
+							showing: organizationsWithSwitchAccess?.length,
+							total: allOrganizations?.organizations?.length || 0
+						})
+					})
+				}), onRefresh && /* @__PURE__ */ jsx(Button_default, {
+					onClick: onRefresh,
+					className: cx(styles["refreshButton"]),
+					type: "button",
+					variant: "outline",
+					size: "small",
+					children: t("organization.switcher.buttons.refresh.text")
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cx(styles["listContainer"]),
+				children: organizationsWithSwitchAccess?.map((organization, index) => renderOrganizationWithStyles(organization, index))
+			}),
+			error && organizationsWithSwitchAccess?.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: cx(styles["errorMargin"]),
+				children: renderErrorWithStyles(error)
+			}),
+			hasMore && fetchMore && /* @__PURE__ */ jsx("div", {
+				className: cx(styles["loadMoreMargin"]),
+				children: renderLoadMoreWithStyles(fetchMore, isLoadingMore)
+			})
+		]
+	});
+	if (mode === "popup") return /* @__PURE__ */ jsx(Dialog_default, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(Dialog_default.Content, { children: [/* @__PURE__ */ jsx(Dialog_default.Heading, { children: title }), /* @__PURE__ */ jsx("div", {
+			className: cx(styles["popupContent"]),
+			children: organizationListContent
+		})] })
+	});
+	return organizationListContent;
+};
+var BaseOrganizationList_default = BaseOrganizationList;
+
+//#endregion
+export { BaseOrganizationList, BaseOrganizationList_default as default };
+//# sourceMappingURL=BaseOrganizationList.js.map

package/dist/components/presentation/OrganizationList/BaseOrganizationList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseOrganizationList.js","names":["AvatarPrimitive","Typography","Button","Spinner","BaseOrganizationList: FC<BaseOrganizationListProps>","useTheme","styles: ReturnType<typeof useStyles>","useStyles","useTranslation","organizationsWithSwitchAccess: OrganizationWithSwitchAccess[]","renderLoadingWithStyles: () => ReactNode","renderErrorWithStyles: (errorMsg: string) => ReactNode","renderEmptyWithStyles: () => ReactNode","renderLoadMoreWithStyles: (onLoadMore: () => Promise<void>, loadingMore: boolean) => ReactNode","renderOrganizationWithStyles: (org: OrganizationWithSwitchAccess, index: number) => ReactNode","loadingContent: ReactElement","DialogPrimitive","errorContent: ReactElement","emptyContent: ReactElement","organizationListContent: ReactElement"],"sources":["../../../../src/components/presentation/OrganizationList/BaseOrganizationList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {AllOrganizationsApiResponse, Organization, Preferences} from '@thunderid/browser';\nimport {CSSProperties, FC, MouseEvent, ReactElement, ReactNode, useMemo} from 'react';\nimport useStyles from './BaseOrganizationList.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport {Avatar as AvatarPrimitive} from '../../primitives/Avatar/Avatar';\nimport Button from '../../primitives/Button/Button';\nimport DialogPrimitive from '../../primitives/Dialog/Dialog';\nimport Spinner from '../../primitives/Spinner/Spinner';\nimport Typography from '../../primitives/Typography/Typography';\n\nexport interface OrganizationWithSwitchAccess extends Organization {\n  canSwitch: boolean;\n}\n\n/**\n * Props interface for the BaseOrganizationList component.\n */\nexport interface BaseOrganizationListProps {\n  /**\n   * List of organizations discoverable to the signed-in user.\n   */\n  allOrganizations: AllOrganizationsApiResponse;\n  /**\n   * Additional CSS class names to apply to the container\n   */\n  className?: string;\n  /**\n   * Error message to display\n   */\n  error?: string | null;\n  /**\n   * Function called when \"Load More\" is clicked\n   */\n  fetchMore?: () => Promise<void>;\n  /**\n   * Whether there are more organizations to load\n   */\n  hasMore?: boolean;\n  /**\n   * Whether the initial data is loading\n   */\n  isLoading?: boolean;\n  /**\n   * Whether more data is being loaded\n   */\n  isLoadingMore?: boolean;\n  /**\n   * Display mode: 'inline' for normal display, 'popup' for modal dialog\n   */\n  mode?: 'inline' | 'popup';\n  /**\n   * List of organizations associated to the signed-in user.\n   */\n  myOrganizations: Organization[];\n  /**\n   * Function called when popup open state changes (only used in popup mode)\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Function called when an organization is selected/clicked\n   */\n  onOrganizationSelect?: (organization: OrganizationWithSwitchAccess) => void;\n  /**\n   * Function called when refresh is requested\n   */\n  onRefresh?: () => Promise<void>;\n  /**\n   * Whether the popup is open (only used in popup mode)\n   */\n  open?: boolean;\n  /**\n   * Component-level preferences to override global i18n and theme settings.\n   * Preferences are deep-merged with global ones, with component preferences\n   * taking precedence. Affects this component and all its descendants.\n   */\n  preferences?: Preferences;\n  /**\n   * Custom renderer for when no organizations are found\n   */\n  renderEmpty?: () => ReactNode;\n  /**\n   * Custom renderer for the error state\n   */\n  renderError?: (error: string) => ReactNode;\n  /**\n   * Custom renderer for the load more button\n   */\n  renderLoadMore?: (onLoadMore: () => Promise<void>, isLoading: boolean) => ReactNode;\n  /**\n   * Custom renderer for the loading state\n   */\n  renderLoading?: () => ReactNode;\n  /**\n   * Custom renderer for each organization item\n   */\n  renderOrganization?: (organization: OrganizationWithSwitchAccess, index: number) => ReactNode;\n  /**\n   * Whether to show the organization status in the list\n   */\n  showStatus?: boolean;\n  /**\n   * Inline styles to apply to the container\n   */\n  style?: CSSProperties;\n\n  /**\n   * Title for the popup dialog (only used in popup mode)\n   */\n  title?: string;\n}\n\n/**\n * Default organization item renderer\n */\nconst defaultRenderOrganization = (\n  organization: OrganizationWithSwitchAccess,\n  styles: any,\n  t: (key: string, params?: Record<string, string | number>) => string,\n  onOrganizationSelect?: (organization: OrganizationWithSwitchAccess) => void,\n  showStatus?: boolean,\n): ReactNode => (\n  <div key={organization.id} className={cx(styles.organizationItem)}>\n    <div className={cx(styles.organizationContent)}>\n      <AvatarPrimitive variant=\"square\" name={organization.name} size={48} alt={`${organization.name} logo`} />\n      <div className={cx(styles.organizationInfo)}>\n        <Typography variant=\"h6\" className={cx(styles.organizationName)}>\n          {organization.name}\n        </Typography>\n        <Typography variant=\"body2\" color=\"textSecondary\" className={cx(styles.organizationHandle)}>\n          @{organization.orgHandle}\n        </Typography>\n        {showStatus && (\n          <Typography variant=\"body2\" color=\"textSecondary\" className={cx(styles.organizationStatus)}>\n            {t('organization.switcher.status.label')}{' '}\n            <span\n              className={cx(\n                styles.statusText,\n                organization.status === 'ACTIVE' ? styles.statusTextActive : styles.statusTextInactive,\n              )}\n            >\n              {organization.status}\n            </span>\n          </Typography>\n        )}\n      </div>\n    </div>\n    {organization.canSwitch && (\n      <div className={cx(styles.organizationActions)}>\n        <Button\n          onClick={(e: MouseEvent<HTMLButtonElement>): void => {\n            e.stopPropagation();\n            onOrganizationSelect?.(organization);\n          }}\n          type=\"button\"\n          size=\"small\"\n        >\n          {t('organization.switcher.buttons.switch.text')}\n        </Button>\n      </div>\n    )}\n  </div>\n);\n\n/**\n * Default loading renderer\n */\nconst defaultRenderLoading = (\n  t: (key: string, params?: Record<string, string | number>) => string,\n  styles: any,\n): ReactNode => (\n  <div className={cx(styles.loadingContainer)}>\n    <Spinner size=\"medium\" />\n    <Typography variant=\"body1\" color=\"textSecondary\" className={cx(styles.loadingText)}>\n      {t('organization.switcher.loading.placeholder.organizations')}\n    </Typography>\n  </div>\n);\n\n/**\n * Default error renderer\n */\nconst defaultRenderError = (\n  errorMessage: string,\n  t: (key: string, params?: Record<string, string | number>) => string,\n  styles: any,\n): ReactNode => (\n  <div className={cx(styles.errorContainer)}>\n    <Typography variant=\"body1\" color=\"error\">\n      <strong>{t('organization.switcher.error.prefix')}</strong> {errorMessage}\n    </Typography>\n  </div>\n);\n\n/**\n * Default load more button renderer\n */\nconst defaultRenderLoadMore = (\n  onLoadMore: () => Promise<void>,\n  isLoadingMore: boolean,\n  t: (key: string, params?: Record<string, string | number>) => string,\n  styles: any,\n): ReactNode => (\n  <Button onClick={onLoadMore} disabled={isLoadingMore} className={cx(styles.loadMoreButton)} type=\"button\" fullWidth>\n    {isLoadingMore ? t('organization.switcher.loading.more') : t('organization.switcher.buttons.load_more.text')}\n  </Button>\n);\n\n/**\n * Default empty state renderer\n */\nconst defaultRenderEmpty = (\n  t: (key: string, params?: Record<string, string | number>) => string,\n  styles: any,\n): ReactNode => (\n  <div className={cx(styles.emptyContainer)}>\n    <Typography variant=\"body1\" color=\"textSecondary\" className={cx(styles.emptyText)}>\n      {t('organization.switcher.no.organizations')}\n    </Typography>\n  </div>\n);\n\n/**\n * BaseOrganizationList component displays a list of organizations with pagination support.\n * This component serves as the base for framework-specific implementations.\n *\n * @example\n * ```tsx\n * <BaseOrganizationList\n *   data={organizations}\n *   isLoading={isLoading}\n *   hasMore={hasMore}\n *   fetchMore={fetchMore}\n *   error={error}\n * />\n * ```\n */\nexport const BaseOrganizationList: FC<BaseOrganizationListProps> = ({\n  className = '',\n  allOrganizations,\n  myOrganizations,\n  error,\n  fetchMore,\n  hasMore = false,\n  isLoading = false,\n  isLoadingMore = false,\n  mode = 'inline',\n  onOpenChange,\n  onOrganizationSelect,\n  onRefresh,\n  open = false,\n  renderEmpty,\n  renderError,\n  renderLoading,\n  renderLoadMore,\n  renderOrganization,\n  style,\n  title = 'Organizations',\n  showStatus,\n  preferences,\n}: BaseOrganizationListProps): ReactElement => {\n  const {theme, colorScheme} = useTheme();\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme);\n  const {t} = useTranslation(preferences?.i18n);\n\n  const organizationsWithSwitchAccess: OrganizationWithSwitchAccess[] = useMemo(() => {\n    if (!allOrganizations?.organizations) {\n      return [];\n    }\n\n    const myOrgIds = new Set<string>(myOrganizations?.map((org: Organization) => org.id) || []);\n\n    return allOrganizations.organizations.map((org: Organization) => ({\n      ...org,\n      canSwitch: myOrgIds.has(org.id),\n    }));\n  }, [allOrganizations?.organizations, myOrganizations]);\n\n  const renderLoadingWithStyles: () => ReactNode = renderLoading || ((): ReactNode => defaultRenderLoading(t, styles));\n  const renderErrorWithStyles: (errorMsg: string) => ReactNode =\n    renderError || ((errorMsg: string): ReactNode => defaultRenderError(errorMsg, t, styles));\n  const renderEmptyWithStyles: () => ReactNode = renderEmpty || ((): ReactNode => defaultRenderEmpty(t, styles));\n  const renderLoadMoreWithStyles: (onLoadMore: () => Promise<void>, loadingMore: boolean) => ReactNode =\n    renderLoadMore ||\n    ((onLoadMore: () => Promise<void>, loadingMore: boolean): ReactNode =>\n      defaultRenderLoadMore(onLoadMore, loadingMore, t, styles));\n  const renderOrganizationWithStyles: (org: OrganizationWithSwitchAccess, index: number) => ReactNode =\n    renderOrganization ||\n    ((org: OrganizationWithSwitchAccess): ReactNode =>\n      defaultRenderOrganization(org, styles, t, onOrganizationSelect, showStatus));\n\n  if (isLoading && organizationsWithSwitchAccess?.length === 0) {\n    const loadingContent: ReactElement = (\n      <div className={cx(styles['root'], className)} style={style}>\n        {renderLoadingWithStyles()}\n      </div>\n    );\n\n    if (mode === 'popup') {\n      return (\n        <DialogPrimitive open={open} onOpenChange={onOpenChange}>\n          <DialogPrimitive.Content>\n            <DialogPrimitive.Heading>{title}</DialogPrimitive.Heading>\n            <div className={cx(styles['popupContent'])}>{loadingContent}</div>\n          </DialogPrimitive.Content>\n        </DialogPrimitive>\n      );\n    }\n\n    return loadingContent;\n  }\n\n  if (error && organizationsWithSwitchAccess?.length === 0) {\n    const errorContent: ReactElement = (\n      <div className={cx(styles['root'], className)} style={style}>\n        {renderErrorWithStyles(error)}\n      </div>\n    );\n\n    if (mode === 'popup') {\n      return (\n        <DialogPrimitive open={open} onOpenChange={onOpenChange}>\n          <DialogPrimitive.Content>\n            <DialogPrimitive.Heading>{title}</DialogPrimitive.Heading>\n            <div className={cx(styles['popupContent'])}>{errorContent}</div>\n          </DialogPrimitive.Content>\n        </DialogPrimitive>\n      );\n    }\n\n    return errorContent;\n  }\n\n  if (!isLoading && organizationsWithSwitchAccess?.length === 0) {\n    const emptyContent: ReactElement = (\n      <div className={cx(styles['root'], className)} style={style}>\n        {renderEmptyWithStyles()}\n      </div>\n    );\n\n    if (mode === 'popup') {\n      return (\n        <DialogPrimitive open={open} onOpenChange={onOpenChange}>\n          <DialogPrimitive.Content>\n            <DialogPrimitive.Heading>{title}</DialogPrimitive.Heading>\n            <div className={cx(styles['popupContent'])}>{emptyContent}</div>\n          </DialogPrimitive.Content>\n        </DialogPrimitive>\n      );\n    }\n\n    return emptyContent;\n  }\n\n  const organizationListContent: ReactElement = (\n    <div className={cx(styles['root'], className)} style={style}>\n      {/* Header with total count and refresh button */}\n      <div className={cx(styles['header'])}>\n        <div className={cx(styles['headerInfo'])}>\n          <Typography variant=\"body2\" color=\"textSecondary\" className={cx(styles['subtitle'])}>\n            {t('organization.switcher.showing.count', {\n              showing: organizationsWithSwitchAccess?.length,\n              total: allOrganizations?.organizations?.length || 0,\n            })}\n          </Typography>\n        </div>\n        {onRefresh && (\n          <Button\n            onClick={onRefresh}\n            className={cx(styles['refreshButton'])}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"small\"\n          >\n            {t('organization.switcher.buttons.refresh.text')}\n          </Button>\n        )}\n      </div>\n\n      {/* Organizations list */}\n      <div className={cx(styles['listContainer'])}>\n        {organizationsWithSwitchAccess?.map((organization: OrganizationWithSwitchAccess, index: number) =>\n          renderOrganizationWithStyles(organization, index),\n        )}\n      </div>\n\n      {/* Error message for additional data */}\n      {error && organizationsWithSwitchAccess?.length > 0 && (\n        <div className={cx(styles['errorMargin'])}>{renderErrorWithStyles(error)}</div>\n      )}\n\n      {/* Load more button */}\n      {hasMore && fetchMore && (\n        <div className={cx(styles['loadMoreMargin'])}>{renderLoadMoreWithStyles(fetchMore, isLoadingMore)}</div>\n      )}\n    </div>\n  );\n\n  if (mode === 'popup') {\n    return (\n      <DialogPrimitive open={open} onOpenChange={onOpenChange}>\n        <DialogPrimitive.Content>\n          <DialogPrimitive.Heading>{title}</DialogPrimitive.Heading>\n          <div className={cx(styles['popupContent'])}>{organizationListContent}</div>\n        </DialogPrimitive.Content>\n      </DialogPrimitive>\n    );\n  }\n\n  return organizationListContent;\n};\n\nexport default BaseOrganizationList;\n"],"mappings":"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"}

package/dist/components/presentation/OrganizationList/BaseOrganizationList.styles.js

@@ -0,0 +1,233 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/presentation/OrganizationList/BaseOrganizationList.styles.ts
+/**
+* Creates styles for the BaseOrganizationList component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme) => useMemo(() => {
+	const root = css`
+      padding: calc(${theme.vars.spacing.unit} * 4);
+      min-width: 600px;
+      margin: 0 auto;
+      font-family: ${theme.vars.typography.fontFamily};
+      background: ${theme.vars.colors.background.surface};
+      border-radius: ${theme.vars.borderRadius.large};
+    `;
+	const header = css`
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: calc(${theme.vars.spacing.unit} * 3);
+      padding-bottom: calc(${theme.vars.spacing.unit} * 2);
+      border-bottom: 1px solid ${theme.vars.colors.border};
+    `;
+	const headerInfo = css`
+      flex: 1;
+    `;
+	const title = css`
+      font-size: 1.5rem;
+      font-weight: 600;
+      margin: 0 0 8px 0;
+      color: ${theme.vars.colors.text.primary};
+    `;
+	const subtitle = css`
+      color: ${theme.vars.colors.text.secondary};
+      font-size: 0.875rem;
+      margin: 0;
+    `;
+	const refreshButton = css`
+      background-color: ${theme.vars.colors.background.surface};
+      border: 1px solid ${theme.vars.colors.border};
+      border-radius: ${theme.vars.borderRadius.small};
+      color: ${theme.vars.colors.text.primary};
+      cursor: pointer;
+      font-size: 0.875rem;
+      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 2);
+      transition: all 0.2s;
+      &:hover {
+        background-color: ${theme.vars.colors.background.surface};
+        border-color: ${theme.vars.colors.primary.main};
+      }
+    `;
+	const listContainer = css`
+      display: flex;
+      flex-direction: column;
+      gap: calc(${theme.vars.spacing.unit} * 1.5);
+    `;
+	const organizationItem = css`
+      border: 1px solid ${theme.vars.colors.border};
+      border-radius: ${theme.vars.borderRadius.medium};
+      display: flex;
+      justify-content: space-between;
+      padding: calc(${theme.vars.spacing.unit} * 2);
+      transition: all 0.2s;
+      background-color: ${theme.vars.colors.background.surface};
+      &:hover {
+        border-color: ${theme.vars.colors.primary.main};
+        box-shadow: 0 2px 8px ${theme.vars.colors.primary.main}20;
+      }
+    `;
+	const organizationContent = css`
+      display: flex;
+      align-items: center;
+      gap: calc(${theme.vars.spacing.unit} * 2);
+      flex: 1;
+    `;
+	const organizationInfo = css`
+      flex: 1;
+    `;
+	const organizationName = css`
+      font-size: 1.125rem;
+      font-weight: 600;
+      margin: 0 0 4px 0;
+      color: ${theme.vars.colors.text.primary};
+    `;
+	const organizationHandle = css`
+      color: ${theme.vars.colors.text.secondary};
+      font-size: 0.875rem;
+      margin: 0 0 4px 0;
+      font-family: monospace;
+    `;
+	const organizationStatus = css`
+      color: ${theme.vars.colors.text.secondary};
+      font-size: 0.875rem;
+      margin: 0;
+    `;
+	const statusText = css`
+      font-weight: 500;
+    `;
+	const statusTextActive = css`
+      color: ${theme.vars.colors.success.main};
+    `;
+	const statusTextInactive = css`
+      color: ${theme.vars.colors.error.main};
+    `;
+	const organizationActions = css`
+      display: flex;
+      align-items: center;
+    `;
+	const badge = css`
+      border-radius: ${theme.vars.borderRadius.large};
+      font-size: 0.75rem;
+      font-weight: 500;
+      padding: calc(${theme.vars.spacing.unit} / 2) calc(${theme.vars.spacing.unit} * 1.5);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    `;
+	const badgeSuccess = css`
+      background-color: color-mix(in srgb, ${theme.vars.colors.success.main} 20%, transparent);
+      color: ${theme.vars.colors.success.main};
+    `;
+	const badgeError = css`
+      background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 20%, transparent);
+      color: ${theme.vars.colors.error.main};
+    `;
+	const loadingContainer = css`
+      padding: calc(${theme.vars.spacing.unit} * 4);
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: calc(${theme.vars.spacing.unit} * 2);
+    `;
+	const loadingText = css`
+      margin-top: ${theme.vars.spacing.unit};
+    `;
+	const errorContainer = css`
+      background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 20%, transparent);
+      border: 1px solid ${theme.vars.colors.error.main};
+      border-radius: ${theme.vars.borderRadius.medium};
+      color: ${theme.vars.colors.error.main};
+      padding: calc(${theme.vars.spacing.unit} * 2);
+    `;
+	const emptyContainer = css`
+      padding: calc(${theme.vars.spacing.unit} * 4);
+      text-align: center;
+    `;
+	const emptyText = css`
+      color: ${theme.vars.colors.text.secondary};
+      font-size: 1rem;
+    `;
+	const loadMoreButton = css`
+      background-color: ${theme.vars.colors.primary.main};
+      border: none;
+      border-radius: ${theme.vars.borderRadius.medium};
+      color: ${theme.vars.colors.primary.contrastText};
+      cursor: pointer;
+      font-size: 0.875rem;
+      font-weight: 500;
+      padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 3);
+      width: 100%;
+      transition: all 0.2s;
+      &:hover:not(:disabled) {
+        background-color: ${theme.vars.colors.primary.main};
+        opacity: 0.9;
+      }
+      &:disabled {
+        background-color: ${theme.vars.colors.text.secondary};
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+    `;
+	return {
+		badge,
+		badgeError,
+		badgeSuccess,
+		emptyContainer,
+		emptyText,
+		errorContainer,
+		errorMargin: css`
+      margin-top: calc(${theme.vars.spacing.unit} * 2);
+    `,
+		header,
+		headerInfo,
+		listContainer,
+		loadMoreButton,
+		loadMoreMargin: css`
+      margin-top: calc(${theme.vars.spacing.unit} * 3);
+    `,
+		loadingContainer,
+		loadingText,
+		organizationActions,
+		organizationContent,
+		organizationHandle,
+		organizationInfo,
+		organizationItem,
+		organizationName,
+		organizationStatus,
+		popupContent: css`
+      padding: ${theme.vars.spacing.unit};
+    `,
+		refreshButton,
+		root,
+		statusText,
+		statusTextActive,
+		statusTextInactive,
+		subtitle,
+		title
+	};
+}, [
+	theme.vars.spacing.unit,
+	theme.vars.colors.background.surface,
+	theme.vars.colors.border,
+	theme.vars.borderRadius.large,
+	theme.vars.borderRadius.medium,
+	theme.vars.borderRadius.small,
+	theme.vars.colors.text.primary,
+	theme.vars.colors.text.secondary,
+	theme.vars.colors.primary.main,
+	theme.vars.colors.success.main,
+	theme.vars.colors.error.main,
+	theme.vars.colors.primary.contrastText,
+	theme.vars.typography.fontFamily,
+	colorScheme
+]);
+var BaseOrganizationList_styles_default = useStyles;
+
+//#endregion
+export { BaseOrganizationList_styles_default as default };
+//# sourceMappingURL=BaseOrganizationList.styles.js.map

package/dist/components/presentation/OrganizationList/BaseOrganizationList.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseOrganizationList.styles.js","names":["root: string","header: string","headerInfo: string","title: string","subtitle: string","refreshButton: string","listContainer: string","organizationItem: string","organizationContent: string","organizationInfo: string","organizationName: string","organizationHandle: string","organizationStatus: string","statusText: string","statusTextActive: string","statusTextInactive: string","organizationActions: string","badge: string","badgeSuccess: string","badgeError: string","loadingContainer: string","loadingText: string","errorContainer: string","emptyContainer: string","emptyText: string","loadMoreButton: string"],"sources":["../../../../src/components/presentation/OrganizationList/BaseOrganizationList.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\n/**\n * Creates styles for the BaseOrganizationList component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const root: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 4);\n      min-width: 600px;\n      margin: 0 auto;\n      font-family: ${theme.vars.typography.fontFamily};\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n    `;\n\n    const header: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: calc(${theme.vars.spacing.unit} * 3);\n      padding-bottom: calc(${theme.vars.spacing.unit} * 2);\n      border-bottom: 1px solid ${theme.vars.colors.border};\n    `;\n\n    const headerInfo: string = css`\n      flex: 1;\n    `;\n\n    const title: string = css`\n      font-size: 1.5rem;\n      font-weight: 600;\n      margin: 0 0 8px 0;\n      color: ${theme.vars.colors.text.primary};\n    `;\n\n    const subtitle: string = css`\n      color: ${theme.vars.colors.text.secondary};\n      font-size: 0.875rem;\n      margin: 0;\n    `;\n\n    const refreshButton: string = css`\n      background-color: ${theme.vars.colors.background.surface};\n      border: 1px solid ${theme.vars.colors.border};\n      border-radius: ${theme.vars.borderRadius.small};\n      color: ${theme.vars.colors.text.primary};\n      cursor: pointer;\n      font-size: 0.875rem;\n      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 2);\n      transition: all 0.2s;\n      &:hover {\n        background-color: ${theme.vars.colors.background.surface};\n        border-color: ${theme.vars.colors.primary.main};\n      }\n    `;\n\n    const listContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 1.5);\n    `;\n\n    const organizationItem: string = css`\n      border: 1px solid ${theme.vars.colors.border};\n      border-radius: ${theme.vars.borderRadius.medium};\n      display: flex;\n      justify-content: space-between;\n      padding: calc(${theme.vars.spacing.unit} * 2);\n      transition: all 0.2s;\n      background-color: ${theme.vars.colors.background.surface};\n      &:hover {\n        border-color: ${theme.vars.colors.primary.main};\n        box-shadow: 0 2px 8px ${theme.vars.colors.primary.main}20;\n      }\n    `;\n\n    const organizationContent: string = css`\n      display: flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n      flex: 1;\n    `;\n\n    const organizationInfo: string = css`\n      flex: 1;\n    `;\n\n    const organizationName: string = css`\n      font-size: 1.125rem;\n      font-weight: 600;\n      margin: 0 0 4px 0;\n      color: ${theme.vars.colors.text.primary};\n    `;\n\n    const organizationHandle: string = css`\n      color: ${theme.vars.colors.text.secondary};\n      font-size: 0.875rem;\n      margin: 0 0 4px 0;\n      font-family: monospace;\n    `;\n\n    const organizationStatus: string = css`\n      color: ${theme.vars.colors.text.secondary};\n      font-size: 0.875rem;\n      margin: 0;\n    `;\n\n    const statusText: string = css`\n      font-weight: 500;\n    `;\n\n    const statusTextActive: string = css`\n      color: ${theme.vars.colors.success.main};\n    `;\n\n    const statusTextInactive: string = css`\n      color: ${theme.vars.colors.error.main};\n    `;\n\n    const organizationActions: string = css`\n      display: flex;\n      align-items: center;\n    `;\n\n    const badge: string = css`\n      border-radius: ${theme.vars.borderRadius.large};\n      font-size: 0.75rem;\n      font-weight: 500;\n      padding: calc(${theme.vars.spacing.unit} / 2) calc(${theme.vars.spacing.unit} * 1.5);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    `;\n\n    const badgeSuccess: string = css`\n      background-color: color-mix(in srgb, ${theme.vars.colors.success.main} 20%, transparent);\n      color: ${theme.vars.colors.success.main};\n    `;\n\n    const badgeError: string = css`\n      background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 20%, transparent);\n      color: ${theme.vars.colors.error.main};\n    `;\n\n    const loadingContainer: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 4);\n      text-align: center;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const loadingText: string = css`\n      margin-top: ${theme.vars.spacing.unit};\n    `;\n\n    const errorContainer: string = css`\n      background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 20%, transparent);\n      border: 1px solid ${theme.vars.colors.error.main};\n      border-radius: ${theme.vars.borderRadius.medium};\n      color: ${theme.vars.colors.error.main};\n      padding: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const emptyContainer: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 4);\n      text-align: center;\n    `;\n\n    const emptyText: string = css`\n      color: ${theme.vars.colors.text.secondary};\n      font-size: 1rem;\n    `;\n\n    const loadMoreButton: string = css`\n      background-color: ${theme.vars.colors.primary.main};\n      border: none;\n      border-radius: ${theme.vars.borderRadius.medium};\n      color: ${theme.vars.colors.primary.contrastText};\n      cursor: pointer;\n      font-size: 0.875rem;\n      font-weight: 500;\n      padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 3);\n      width: 100%;\n      transition: all 0.2s;\n      &:hover:not(:disabled) {\n        background-color: ${theme.vars.colors.primary.main};\n        opacity: 0.9;\n      }\n      &:disabled {\n        background-color: ${theme.vars.colors.text.secondary};\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n    `;\n\n    const errorMargin: string = css`\n      margin-top: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const loadMoreMargin: string = css`\n      margin-top: calc(${theme.vars.spacing.unit} * 3);\n    `;\n\n    const popupContent: string = css`\n      padding: ${theme.vars.spacing.unit};\n    `;\n\n    return {\n      badge,\n      badgeError,\n      badgeSuccess,\n      emptyContainer,\n      emptyText,\n      errorContainer,\n      errorMargin,\n      header,\n      headerInfo,\n      listContainer,\n      loadMoreButton,\n      loadMoreMargin,\n      loadingContainer,\n      loadingText,\n      organizationActions,\n      organizationContent,\n      organizationHandle,\n      organizationInfo,\n      organizationItem,\n      organizationName,\n      organizationStatus,\n      popupContent,\n      refreshButton,\n      root,\n      statusText,\n      statusTextActive,\n      statusTextInactive,\n      subtitle,\n      title,\n    };\n  }, [\n    theme.vars.spacing.unit,\n    theme.vars.colors.background.surface,\n    theme.vars.colors.border,\n    theme.vars.borderRadius.large,\n    theme.vars.borderRadius.medium,\n    theme.vars.borderRadius.small,\n    theme.vars.colors.text.primary,\n    theme.vars.colors.text.secondary,\n    theme.vars.colors.primary.main,\n    theme.vars.colors.success.main,\n    theme.vars.colors.error.main,\n    theme.vars.colors.primary.contrastText,\n    theme.vars.typography.fontFamily,\n    colorScheme,\n  ]);\n\nexport default useStyles;\n"],"mappings":"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"}

package/dist/components/presentation/OrganizationList/OrganizationList.js

@@ -0,0 +1,82 @@
+import useOrganization_default from "../../../contexts/Organization/useOrganization.js";
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import { BaseOrganizationList } from "./BaseOrganizationList.js";
+import OrganizationList_styles_default from "./OrganizationList.styles.js";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/presentation/OrganizationList/OrganizationList.tsx
+/**
+* OrganizationList component that provides organization listing functionality with pagination.
+* This component uses the enhanced OrganizationContext, eliminating the polling issue and
+* providing better integration with the existing context system.
+*
+* @example
+* ```tsx
+* import { OrganizationList } from '@thunderid/react';
+*
+* // Basic usage
+* <OrganizationList />
+*
+* // With custom limit and filter
+* <OrganizationList
+*   limit={20}
+*   filter="active"
+*   onOrganizationSelect={(org) => {
+*     console.log('Selected organization:', org.name);
+*   }}
+* />
+*
+* // As a popup dialog
+* <OrganizationList
+*   mode="popup"
+*   open={isOpen}
+*   onOpenChange={setIsOpen}
+*   title="Select Organization"
+* />
+*
+* // With custom organization renderer
+* <OrganizationList
+*   renderOrganization={(org) => (
+*     <div key={org.id}>
+*       <h3>{org.name}</h3>
+*       <p>Can switch: {org.canSwitch ? 'Yes' : 'No'}</p>
+*     </div>
+*   )}
+* />
+* ```
+*/
+const OrganizationList = (props) => {
+	const { onOrganizationSelect, className = "", style,...baseProps } = props;
+	const { autoFetch, filter, limit, recursive,...filteredBaseProps } = baseProps;
+	const { theme, colorScheme } = useTheme_default();
+	const styles = OrganizationList_styles_default(theme, colorScheme);
+	const { getAllOrganizations, error, isLoading, myOrganizations } = useOrganization_default();
+	const [allOrganizations, setAllOrganizations] = useState({ organizations: [] });
+	useEffect(() => {
+		(async () => {
+			setAllOrganizations(await getAllOrganizations());
+		})();
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(styles["root"], className),
+		style,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cx(styles["container"]),
+			children: /* @__PURE__ */ jsx(BaseOrganizationList, {
+				allOrganizations,
+				myOrganizations,
+				error,
+				isLoading,
+				onOrganizationSelect,
+				...filteredBaseProps
+			})
+		})
+	});
+};
+var OrganizationList_default = OrganizationList;
+
+//#endregion
+export { OrganizationList_default as default };
+//# sourceMappingURL=OrganizationList.js.map

package/dist/components/presentation/OrganizationList/OrganizationList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationList.js","names":["OrganizationList: FC<OrganizationListProps>","useTheme","styles: ReturnType<typeof useStyles>","useStyles","useOrganization","BaseOrganizationListComponent"],"sources":["../../../../src/components/presentation/OrganizationList/OrganizationList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {AllOrganizationsApiResponse} from '@thunderid/browser';\nimport {FC, ReactElement, useEffect, useState} from 'react';\nimport {\n  BaseOrganizationList as BaseOrganizationListComponent,\n  BaseOrganizationListProps,\n  OrganizationWithSwitchAccess,\n} from './BaseOrganizationList';\nimport useStyles from './OrganizationList.styles';\nimport useOrganization from '../../../contexts/Organization/useOrganization';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\n/**\n * Configuration options for the OrganizationList component.\n */\nexport interface OrganizationListConfig {\n  /**\n   * Whether to automatically fetch organizations on mount\n   */\n  autoFetch?: boolean;\n  /**\n   * Filter string for organizations\n   */\n  filter?: string;\n  /**\n   * Number of organizations to fetch per page\n   */\n  limit?: number;\n  /**\n   * Whether to include recursive organizations\n   */\n  recursive?: boolean;\n}\n\n/**\n * Props interface for the OrganizationList component.\n * Uses the enhanced OrganizationContext instead of the useOrganizations hook.\n */\nexport interface OrganizationListProps\n  extends Omit<\n      BaseOrganizationListProps,\n      'myOrganizations' | 'allOrganizations' | 'error' | 'fetchMore' | 'hasMore' | 'isLoading' | 'isLoadingMore'\n    >,\n    OrganizationListConfig {\n  /**\n   * Function called when an organization is selected/clicked\n   */\n  onOrganizationSelect?: (organization: OrganizationWithSwitchAccess) => void;\n}\n\n/**\n * OrganizationList component that provides organization listing functionality with pagination.\n * This component uses the enhanced OrganizationContext, eliminating the polling issue and\n * providing better integration with the existing context system.\n *\n * @example\n * ```tsx\n * import { OrganizationList } from '@thunderid/react';\n *\n * // Basic usage\n * <OrganizationList />\n *\n * // With custom limit and filter\n * <OrganizationList\n *   limit={20}\n *   filter=\"active\"\n *   onOrganizationSelect={(org) => {\n *     console.log('Selected organization:', org.name);\n *   }}\n * />\n *\n * // As a popup dialog\n * <OrganizationList\n *   mode=\"popup\"\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n *   title=\"Select Organization\"\n * />\n *\n * // With custom organization renderer\n * <OrganizationList\n *   renderOrganization={(org) => (\n *     <div key={org.id}>\n *       <h3>{org.name}</h3>\n *       <p>Can switch: {org.canSwitch ? 'Yes' : 'No'}</p>\n *     </div>\n *   )}\n * />\n * ```\n */\nexport const OrganizationList: FC<OrganizationListProps> = (props: OrganizationListProps): ReactElement => {\n  const {onOrganizationSelect, className = '', style, ...baseProps} = props;\n  const {autoFetch, filter, limit, recursive, ...filteredBaseProps} = baseProps;\n\n  const {theme, colorScheme} = useTheme();\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme);\n  const {getAllOrganizations, error, isLoading, myOrganizations} = useOrganization();\n\n  const [allOrganizations, setAllOrganizations] = useState<AllOrganizationsApiResponse>({\n    organizations: [],\n  });\n\n  useEffect(() => {\n    (async (): Promise<void> => {\n      setAllOrganizations(await getAllOrganizations());\n    })();\n  }, []);\n\n  return (\n    <div className={cx(styles['root'], className)} style={style}>\n      <div className={cx(styles['container'])}>\n        <BaseOrganizationListComponent\n          allOrganizations={allOrganizations}\n          myOrganizations={myOrganizations}\n          error={error}\n          isLoading={isLoading}\n          onOrganizationSelect={onOrganizationSelect}\n          {...filteredBaseProps}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default OrganizationList;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4GA,MAAaA,oBAA+C,UAA+C;CACzG,MAAM,EAAC,sBAAsB,YAAY,IAAI,MAAO,GAAG,cAAa;CACpE,MAAM,EAAC,WAAW,QAAQ,OAAO,UAAW,GAAG,sBAAqB;CAEpE,MAAM,EAAC,OAAO,gBAAeC,kBAAU;CACvC,MAAMC,SAAuCC,gCAAU,OAAO,YAAY;CAC1E,MAAM,EAAC,qBAAqB,OAAO,WAAW,oBAAmBC,yBAAiB;CAElF,MAAM,CAAC,kBAAkB,uBAAuB,SAAsC,EACpF,eAAe,EAAE,EAClB,CAAC;AAEF,iBAAgB;AACd,GAAC,YAA2B;AAC1B,uBAAoB,MAAM,qBAAqB,CAAC;MAC9C;IACH,EAAE,CAAC;AAEN,QACE,oBAAC;EAAI,WAAW,GAAG,OAAO,SAAS,UAAU;EAAS;YACpD,oBAAC;GAAI,WAAW,GAAG,OAAO,aAAa;aACrC,oBAACC;IACmB;IACD;IACV;IACI;IACW;IACtB,GAAI;KACJ;IACE;GACF;;AAIV,+BAAe"}