@thunderid/react 0.3.0 → 0.3.4

package/dist/components/presentation/OrganizationProfile/BaseOrganizationProfile.styles.js

@@ -1,163 +0,0 @@
-import { useMemo } from "react";
-import { css } from "@emotion/css";
-
-//#region src/components/presentation/OrganizationProfile/BaseOrganizationProfile.styles.ts
-/**
-* Creates styles for the BaseOrganizationProfile 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(() => ({
-	attributeItem: css`
-        display: flex;
-        gap: ${theme.vars.spacing.unit};
-        padding: calc(${theme.vars.spacing.unit} / 4) 0;
-        align-items: center;
-      `,
-	attributeKey: css`
-        font-size: 0.75rem;
-        font-weight: 500;
-        color: ${theme.vars.colors.text.secondary};
-        min-width: 80px;
-        flex-shrink: 0;
-      `,
-	attributeValue: css`
-        font-size: 0.75rem;
-        color: ${theme.vars.colors.text.primary};
-        word-break: break-word;
-        flex: 1;
-      `,
-	attributesList: css`
-        display: flex;
-        flex-direction: column;
-        gap: calc(${theme.vars.spacing.unit} / 4);
-      `,
-	card: css`
-        background: ${theme.vars.colors.background.surface};
-        border-radius: ${theme.vars.borderRadius.large};
-      `,
-	editButton: css`
-        min-width: auto;
-        padding: calc(${theme.vars.spacing.unit} / 2);
-        min-height: auto;
-      `,
-	field: css`
-        display: flex;
-        align-items: flex-start;
-        padding: calc(${theme.vars.spacing.unit} / 2) 0;
-        border-bottom: 1px solid ${theme.vars.colors.border};
-        min-height: 28px;
-        gap: ${theme.vars.spacing.unit};
-      `,
-	fieldActions: css`
-        display: flex;
-        align-items: center;
-        gap: calc(${theme.vars.spacing.unit} / 2);
-      `,
-	fieldContent: css`
-        flex: 1;
-        display: flex;
-        align-items: center;
-        gap: ${theme.vars.spacing.unit};
-      `,
-	fieldInput: css`
-        margin-bottom: 0;
-      `,
-	fieldLast: css`
-        border-bottom: none;
-      `,
-	handle: css`
-        font-size: 1rem;
-        color: ${theme.vars.colors.text.secondary};
-        margin: 0;
-        font-family: monospace;
-      `,
-	header: css`
-        display: flex;
-        align-items: center;
-        gap: calc(${theme.vars.spacing.unit} * 2);
-        margin-bottom: calc(${theme.vars.spacing.unit} * 3);
-        padding-bottom: calc(${theme.vars.spacing.unit} * 2);
-      `,
-	infoContainer: css`
-        display: flex;
-        flex-direction: column;
-        gap: ${theme.vars.spacing.unit};
-      `,
-	label: css`
-        font-size: 0.875rem;
-        font-weight: 500;
-        color: ${theme.vars.colors.text.secondary};
-        width: 120px;
-        flex-shrink: 0;
-        line-height: 28px;
-      `,
-	name: css`
-        font-size: 1.5rem;
-        font-weight: 600;
-        margin: 0 0 8px 0;
-        color: ${theme.vars.colors.text.primary};
-      `,
-	orgInfo: css`
-        flex: 1;
-      `,
-	permissionBadge: css`
-        padding: calc(${theme.vars.spacing.unit} / 4) ${theme.vars.spacing.unit};
-        border-radius: ${theme.vars.borderRadius.small};
-        font-size: 0.75rem;
-        background-color: ${theme.vars.colors.primary.main};
-        color: ${theme.vars.colors.primary.contrastText};
-        border: 1px solid ${theme.vars.colors.border};
-      `,
-	permissionsList: css`
-        display: flex;
-        flex-wrap: wrap;
-        gap: calc(${theme.vars.spacing.unit} / 2);
-      `,
-	placeholderButton: css`
-        font-style: italic;
-        text-decoration: underline;
-        opacity: 0.7;
-        padding: 0;
-        min-height: auto;
-      `,
-	popup: css`
-        padding: calc(${theme.vars.spacing.unit} * 2);
-      `,
-	root: css`
-        padding: calc(${theme.vars.spacing.unit} * 4);
-        min-width: 600px;
-        margin: 0 auto;
-        font-family: ${theme.vars.typography.fontFamily};
-      `,
-	statusBadge: css`
-        padding: calc(${theme.vars.spacing.unit} / 2) ${theme.vars.spacing.unit};
-        border-radius: ${theme.vars.borderRadius.small};
-        font-size: 0.75rem;
-        font-weight: 500;
-        color: white;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-      `,
-	value: css`
-        color: ${theme.vars.colors.text.primary};
-        flex: 1;
-        display: flex;
-        align-items: center;
-        gap: ${theme.vars.spacing.unit};
-        overflow: hidden;
-        min-height: 28px;
-        line-height: 28px;
-        word-break: break-word;
-      `,
-	valueEmpty: css`
-        font-style: italic;
-        opacity: 0.7;
-      `
-}), [theme, colorScheme]);
-var BaseOrganizationProfile_styles_default = useStyles;
-
-//#endregion
-export { BaseOrganizationProfile_styles_default as default };
-//# sourceMappingURL=BaseOrganizationProfile.styles.js.map

package/dist/components/presentation/OrganizationProfile/BaseOrganizationProfile.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BaseOrganizationProfile.styles.js","names":[],"sources":["../../../../src/components/presentation/OrganizationProfile/BaseOrganizationProfile.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 BaseOrganizationProfile 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    () => ({\n      attributeItem: css`\n        display: flex;\n        gap: ${theme.vars.spacing.unit};\n        padding: calc(${theme.vars.spacing.unit} / 4) 0;\n        align-items: center;\n      `,\n      attributeKey: css`\n        font-size: 0.75rem;\n        font-weight: 500;\n        color: ${theme.vars.colors.text.secondary};\n        min-width: 80px;\n        flex-shrink: 0;\n      `,\n      attributeValue: css`\n        font-size: 0.75rem;\n        color: ${theme.vars.colors.text.primary};\n        word-break: break-word;\n        flex: 1;\n      `,\n      attributesList: css`\n        display: flex;\n        flex-direction: column;\n        gap: calc(${theme.vars.spacing.unit} / 4);\n      `,\n      card: css`\n        background: ${theme.vars.colors.background.surface};\n        border-radius: ${theme.vars.borderRadius.large};\n      `,\n      editButton: css`\n        min-width: auto;\n        padding: calc(${theme.vars.spacing.unit} / 2);\n        min-height: auto;\n      `,\n      field: css`\n        display: flex;\n        align-items: flex-start;\n        padding: calc(${theme.vars.spacing.unit} / 2) 0;\n        border-bottom: 1px solid ${theme.vars.colors.border};\n        min-height: 28px;\n        gap: ${theme.vars.spacing.unit};\n      `,\n      fieldActions: css`\n        display: flex;\n        align-items: center;\n        gap: calc(${theme.vars.spacing.unit} / 2);\n      `,\n      fieldContent: css`\n        flex: 1;\n        display: flex;\n        align-items: center;\n        gap: ${theme.vars.spacing.unit};\n      `,\n      fieldInput: css`\n        margin-bottom: 0;\n      `,\n      fieldLast: css`\n        border-bottom: none;\n      `,\n      handle: css`\n        font-size: 1rem;\n        color: ${theme.vars.colors.text.secondary};\n        margin: 0;\n        font-family: monospace;\n      `,\n      header: css`\n        display: flex;\n        align-items: center;\n        gap: calc(${theme.vars.spacing.unit} * 2);\n        margin-bottom: calc(${theme.vars.spacing.unit} * 3);\n        padding-bottom: calc(${theme.vars.spacing.unit} * 2);\n      `,\n      infoContainer: css`\n        display: flex;\n        flex-direction: column;\n        gap: ${theme.vars.spacing.unit};\n      `,\n      label: css`\n        font-size: 0.875rem;\n        font-weight: 500;\n        color: ${theme.vars.colors.text.secondary};\n        width: 120px;\n        flex-shrink: 0;\n        line-height: 28px;\n      `,\n      name: 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      orgInfo: css`\n        flex: 1;\n      `,\n      permissionBadge: css`\n        padding: calc(${theme.vars.spacing.unit} / 4) ${theme.vars.spacing.unit};\n        border-radius: ${theme.vars.borderRadius.small};\n        font-size: 0.75rem;\n        background-color: ${theme.vars.colors.primary.main};\n        color: ${theme.vars.colors.primary.contrastText};\n        border: 1px solid ${theme.vars.colors.border};\n      `,\n      permissionsList: css`\n        display: flex;\n        flex-wrap: wrap;\n        gap: calc(${theme.vars.spacing.unit} / 2);\n      `,\n      placeholderButton: css`\n        font-style: italic;\n        text-decoration: underline;\n        opacity: 0.7;\n        padding: 0;\n        min-height: auto;\n      `,\n      popup: css`\n        padding: calc(${theme.vars.spacing.unit} * 2);\n      `,\n      root: 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      `,\n      statusBadge: css`\n        padding: calc(${theme.vars.spacing.unit} / 2) ${theme.vars.spacing.unit};\n        border-radius: ${theme.vars.borderRadius.small};\n        font-size: 0.75rem;\n        font-weight: 500;\n        color: white;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n      `,\n      value: css`\n        color: ${theme.vars.colors.text.primary};\n        flex: 1;\n        display: flex;\n        align-items: center;\n        gap: ${theme.vars.spacing.unit};\n        overflow: hidden;\n        min-height: 28px;\n        line-height: 28px;\n        word-break: break-word;\n      `,\n      valueEmpty: css`\n        font-style: italic;\n        opacity: 0.7;\n      `,\n    }),\n    [theme, colorScheme],\n  );\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;AA4BA,MAAM,aAAa,OAAc,gBAC/B,eACS;CACL,eAAe,GAAG;;eAET,MAAM,KAAK,QAAQ,KAAK;wBACf,MAAM,KAAK,QAAQ,KAAK;;;CAG1C,cAAc,GAAG;;;iBAGN,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAI5C,gBAAgB,GAAG;;iBAER,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;CAI1C,gBAAgB,GAAG;;;oBAGL,MAAM,KAAK,QAAQ,KAAK;;CAEtC,MAAM,GAAG;sBACO,MAAM,KAAK,OAAO,WAAW,QAAQ;yBAClC,MAAM,KAAK,aAAa,MAAM;;CAEjD,YAAY,GAAG;;wBAEG,MAAM,KAAK,QAAQ,KAAK;;;CAG1C,OAAO,GAAG;;;wBAGQ,MAAM,KAAK,QAAQ,KAAK;mCACb,MAAM,KAAK,OAAO,OAAO;;eAE7C,MAAM,KAAK,QAAQ,KAAK;;CAEjC,cAAc,GAAG;;;oBAGH,MAAM,KAAK,QAAQ,KAAK;;CAEtC,cAAc,GAAG;;;;eAIR,MAAM,KAAK,QAAQ,KAAK;;CAEjC,YAAY,GAAG;;;CAGf,WAAW,GAAG;;;CAGd,QAAQ,GAAG;;iBAEA,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAI5C,QAAQ,GAAG;;;oBAGG,MAAM,KAAK,QAAQ,KAAK;8BACd,MAAM,KAAK,QAAQ,KAAK;+BACvB,MAAM,KAAK,QAAQ,KAAK;;CAEjD,eAAe,GAAG;;;eAGT,MAAM,KAAK,QAAQ,KAAK;;CAEjC,OAAO,GAAG;;;iBAGC,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;CAK5C,MAAM,GAAG;;;;iBAIE,MAAM,KAAK,OAAO,KAAK,QAAQ;;CAE1C,SAAS,GAAG;;;CAGZ,iBAAiB,GAAG;wBACF,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;yBACvD,MAAM,KAAK,aAAa,MAAM;;4BAE3B,MAAM,KAAK,OAAO,QAAQ,KAAK;iBAC1C,MAAM,KAAK,OAAO,QAAQ,aAAa;4BAC5B,MAAM,KAAK,OAAO,OAAO;;CAE/C,iBAAiB,GAAG;;;oBAGN,MAAM,KAAK,QAAQ,KAAK;;CAEtC,mBAAmB,GAAG;;;;;;;CAOtB,OAAO,GAAG;wBACQ,MAAM,KAAK,QAAQ,KAAK;;CAE1C,MAAM,GAAG;wBACS,MAAM,KAAK,QAAQ,KAAK;;;uBAGzB,MAAM,KAAK,WAAW,WAAW;;CAElD,aAAa,GAAG;wBACE,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;yBACvD,MAAM,KAAK,aAAa,MAAM;;;;;;;CAOjD,OAAO,GAAG;iBACC,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;eAIjC,MAAM,KAAK,QAAQ,KAAK;;;;;;CAMjC,YAAY,GAAG;;;;CAIhB,GACD,CAAC,OAAO,YAAY,CACrB;AAEH,6CAAe"}

package/dist/components/presentation/OrganizationProfile/OrganizationProfile.d.ts

@@ -1,120 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { FC, ReactElement } from 'react';
-import { BaseOrganizationProfileProps } from './BaseOrganizationProfile';
-/**
- * Props for the OrganizationProfile component.
- * Extends BaseOrganizationProfileProps but makes the organization prop optional
- * since it will be fetched using the organizationId
- */
-export type OrganizationProfileProps = Omit<BaseOrganizationProfileProps, 'organization' | 'mode'> & {
-    /**
-     * Component to show when there's an error loading organization data.
-     */
-    errorFallback?: ReactElement;
-    /**
-     * Component to show while loading organization data.
-     */
-    loadingFallback?: ReactElement;
-    /**
-     * Display mode for the component.
-     */
-    mode?: 'default' | 'popup';
-    /**
-     * Callback fired when the popup should be closed (only used in popup mode).
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * Callback fired when the organization should be updated.
-     */
-    onUpdate?: (payload: any) => Promise<void>;
-    /**
-     * Whether the popup is open (only used in popup mode).
-     */
-    open?: boolean;
-    /**
-     * The ID of the organization to fetch and display.
-     */
-    organizationId: string;
-    /**
-     * Custom title for the popup dialog (only used in popup mode).
-     */
-    popupTitle?: string;
-};
-/**
- * OrganizationProfile component displays organization information in a
- * structured and styled format. It automatically fetches organization details
- * using the provided organization ID and displays them using BaseOrganizationProfile.
- *
- * The component supports editing functionality, allowing users to modify organization
- * fields inline. Updates are automatically synced with the backend via the SCIM2 API.
- *
- * This component is the React-specific implementation that automatically
- * retrieves the organization data from ThunderID API.
- *
- * @example
- * ```tsx
- * // Basic usage with editing enabled (default)
- * <OrganizationProfile organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1" />
- *
- * // Read-only mode
- * <OrganizationProfile
- *   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
- *   editable={false}
- * />
- *
- * // With card layout and custom fallbacks
- * <OrganizationProfile
- *   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
- *   cardLayout={true}
- *   loadingFallback={<div>Loading organization...</div>}
- *   errorFallback={<div>Failed to load organization</div>}
- *   fallback={<div>No organization data available</div>}
- * />
- *
- * // With custom fields configuration and update callback
- * <OrganizationProfile
- *   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
- *   fields={[
- *     { key: 'id', label: 'Organization ID', editable: false },
- *     { key: 'name', label: 'Organization Name', editable: true },
- *     { key: 'description', label: 'Description', editable: true, render: (value) => value || 'No description' },
- *     { key: 'created', label: 'Created Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },
- *     { key: 'lastModified', label: 'Last Modified Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },
- *     { key: 'attributes', label: 'Custom Attributes', editable: true }
- *   ]}
- *   onUpdate={async (payload) => {
- *     console.log('Organization updated:', payload);
- *     // payload contains the updated field values
- *     // The component automatically converts these to patch operations
- *   }}
- * />
- *
- * // In popup mode
- * <OrganizationProfile
- *   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
- *   mode="popup"
- *   open={isOpen}
- *   onOpenChange={setIsOpen}
- *   popupTitle="Edit Organization Profile"
- * />
- * ```
- */
-declare const OrganizationProfile: FC<OrganizationProfileProps>;
-export default OrganizationProfile;
-//# sourceMappingURL=OrganizationProfile.d.ts.map

package/dist/components/presentation/OrganizationProfile/OrganizationProfile.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"OrganizationProfile.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/OrganizationProfile/OrganizationProfile.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EAAC,EAAE,EAAE,YAAY,EAAsB,MAAM,OAAO,CAAC;AAC5D,OAAgC,EAAC,4BAA4B,EAAC,MAAM,2BAA2B,CAAC;AAWhG;;;;GAIG;AACH,MAAM,MAAM,wBAAwB,GAAG,IAAI,CAAC,4BAA4B,EAAE,cAAc,GAAG,MAAM,CAAC,GAAG;IACnG;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;OAEG;IACH,eAAe,CAAC,EAAE,YAAY,CAAC;IAE/B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAE3B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAE3C;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,QAAA,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CA4ErD,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/presentation/OrganizationProfile/OrganizationProfile.js

@@ -1,122 +0,0 @@
-import useThunderID_default from "../../../contexts/ThunderID/useThunderID.js";
-import useTranslation_default from "../../../hooks/useTranslation.js";
-import BaseOrganizationProfile_default from "./BaseOrganizationProfile.js";
-import getOrganization_default from "../../../api/getOrganization.js";
-import updateOrganization_default, { createPatchOperations } from "../../../api/updateOrganization.js";
-import { createPackageComponentLogger } from "@thunderid/browser";
-import { useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
-const logger$1 = createPackageComponentLogger("@thunderid/react", "OrganizationProfile");
-/**
-* OrganizationProfile component displays organization information in a
-* structured and styled format. It automatically fetches organization details
-* using the provided organization ID and displays them using BaseOrganizationProfile.
-*
-* The component supports editing functionality, allowing users to modify organization
-* fields inline. Updates are automatically synced with the backend via the SCIM2 API.
-*
-* This component is the React-specific implementation that automatically
-* retrieves the organization data from ThunderID API.
-*
-* @example
-* ```tsx
-* // Basic usage with editing enabled (default)
-* <OrganizationProfile organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1" />
-*
-* // Read-only mode
-* <OrganizationProfile
-*   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
-*   editable={false}
-* />
-*
-* // With card layout and custom fallbacks
-* <OrganizationProfile
-*   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
-*   cardLayout={true}
-*   loadingFallback={<div>Loading organization...</div>}
-*   errorFallback={<div>Failed to load organization</div>}
-*   fallback={<div>No organization data available</div>}
-* />
-*
-* // With custom fields configuration and update callback
-* <OrganizationProfile
-*   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
-*   fields={[
-*     { key: 'id', label: 'Organization ID', editable: false },
-*     { key: 'name', label: 'Organization Name', editable: true },
-*     { key: 'description', label: 'Description', editable: true, render: (value) => value || 'No description' },
-*     { key: 'created', label: 'Created Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },
-*     { key: 'lastModified', label: 'Last Modified Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },
-*     { key: 'attributes', label: 'Custom Attributes', editable: true }
-*   ]}
-*   onUpdate={async (payload) => {
-*     console.log('Organization updated:', payload);
-*     // payload contains the updated field values
-*     // The component automatically converts these to patch operations
-*   }}
-* />
-*
-* // In popup mode
-* <OrganizationProfile
-*   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
-*   mode="popup"
-*   open={isOpen}
-*   onOpenChange={setIsOpen}
-*   popupTitle="Edit Organization Profile"
-* />
-* ```
-*/
-const OrganizationProfile = ({ organizationId, mode = "default", open = false, onOpenChange, onUpdate, popupTitle, loadingFallback, errorFallback, preferences,...rest }) => {
-	const { baseUrl, instanceId } = useThunderID_default();
-	const { t } = useTranslation_default(preferences?.i18n);
-	const [organization, setOrganization] = useState(null);
-	const fetchOrganization = async () => {
-		if (!baseUrl || !organizationId) return;
-		try {
-			setOrganization(await getOrganization_default({
-				baseUrl,
-				instanceId,
-				organizationId
-			}));
-		} catch (err) {
-			logger$1.error("Failed to fetch organization:");
-			setOrganization(null);
-		}
-	};
-	useEffect(() => {
-		fetchOrganization();
-	}, [baseUrl, organizationId]);
-	const handleOrganizationUpdate = async (payload) => {
-		if (!baseUrl || !organizationId) return;
-		try {
-			await updateOrganization_default({
-				baseUrl,
-				instanceId,
-				operations: createPatchOperations(payload),
-				organizationId
-			});
-			await fetchOrganization();
-			if (onUpdate) await onUpdate(payload);
-		} catch (err) {
-			logger$1.error("Failed to update organization:");
-			throw err;
-		}
-	};
-	return /* @__PURE__ */ jsx(BaseOrganizationProfile_default, {
-		organization,
-		onUpdate: handleOrganizationUpdate,
-		mode: mode === "popup" ? "popup" : "inline",
-		open,
-		onOpenChange,
-		title: popupTitle || t("organization.profile.heading"),
-		preferences,
-		...rest
-	});
-};
-var OrganizationProfile_default = OrganizationProfile;
-
-//#endregion
-export { OrganizationProfile_default as default };
-//# sourceMappingURL=OrganizationProfile.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"OrganizationProfile.js","names":["logger: ReturnType<typeof createPackageComponentLogger>","OrganizationProfile: FC<OrganizationProfileProps>","useThunderID","useTranslation","getOrganization","updateOrganization","BaseOrganizationProfile"],"sources":["../../../../src/components/presentation/OrganizationProfile/OrganizationProfile.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 {OrganizationDetails, createPackageComponentLogger} from '@thunderid/browser';\nimport {FC, ReactElement, useEffect, useState} from 'react';\nimport BaseOrganizationProfile, {BaseOrganizationProfileProps} from './BaseOrganizationProfile';\nimport getOrganization from '../../../api/getOrganization';\nimport updateOrganization, {createPatchOperations} from '../../../api/updateOrganization';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\nimport useTranslation from '../../../hooks/useTranslation';\n\nconst logger: ReturnType<typeof createPackageComponentLogger> = createPackageComponentLogger(\n  '@thunderid/react',\n  'OrganizationProfile',\n);\n\n/**\n * Props for the OrganizationProfile component.\n * Extends BaseOrganizationProfileProps but makes the organization prop optional\n * since it will be fetched using the organizationId\n */\nexport type OrganizationProfileProps = Omit<BaseOrganizationProfileProps, 'organization' | 'mode'> & {\n  /**\n   * Component to show when there's an error loading organization data.\n   */\n  errorFallback?: ReactElement;\n\n  /**\n   * Component to show while loading organization data.\n   */\n  loadingFallback?: ReactElement;\n\n  /**\n   * Display mode for the component.\n   */\n  mode?: 'default' | 'popup';\n\n  /**\n   * Callback fired when the popup should be closed (only used in popup mode).\n   */\n  onOpenChange?: (open: boolean) => void;\n\n  /**\n   * Callback fired when the organization should be updated.\n   */\n  onUpdate?: (payload: any) => Promise<void>;\n\n  /**\n   * Whether the popup is open (only used in popup mode).\n   */\n  open?: boolean;\n\n  /**\n   * The ID of the organization to fetch and display.\n   */\n  organizationId: string;\n\n  /**\n   * Custom title for the popup dialog (only used in popup mode).\n   */\n  popupTitle?: string;\n};\n\n/**\n * OrganizationProfile component displays organization information in a\n * structured and styled format. It automatically fetches organization details\n * using the provided organization ID and displays them using BaseOrganizationProfile.\n *\n * The component supports editing functionality, allowing users to modify organization\n * fields inline. Updates are automatically synced with the backend via the SCIM2 API.\n *\n * This component is the React-specific implementation that automatically\n * retrieves the organization data from ThunderID API.\n *\n * @example\n * ```tsx\n * // Basic usage with editing enabled (default)\n * <OrganizationProfile organizationId=\"0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1\" />\n *\n * // Read-only mode\n * <OrganizationProfile\n *   organizationId=\"0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1\"\n *   editable={false}\n * />\n *\n * // With card layout and custom fallbacks\n * <OrganizationProfile\n *   organizationId=\"0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1\"\n *   cardLayout={true}\n *   loadingFallback={<div>Loading organization...</div>}\n *   errorFallback={<div>Failed to load organization</div>}\n *   fallback={<div>No organization data available</div>}\n * />\n *\n * // With custom fields configuration and update callback\n * <OrganizationProfile\n *   organizationId=\"0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1\"\n *   fields={[\n *     { key: 'id', label: 'Organization ID', editable: false },\n *     { key: 'name', label: 'Organization Name', editable: true },\n *     { key: 'description', label: 'Description', editable: true, render: (value) => value || 'No description' },\n *     { key: 'created', label: 'Created Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },\n *     { key: 'lastModified', label: 'Last Modified Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },\n *     { key: 'attributes', label: 'Custom Attributes', editable: true }\n *   ]}\n *   onUpdate={async (payload) => {\n *     console.log('Organization updated:', payload);\n *     // payload contains the updated field values\n *     // The component automatically converts these to patch operations\n *   }}\n * />\n *\n * // In popup mode\n * <OrganizationProfile\n *   organizationId=\"0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1\"\n *   mode=\"popup\"\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n *   popupTitle=\"Edit Organization Profile\"\n * />\n * ```\n */\nconst OrganizationProfile: FC<OrganizationProfileProps> = ({\n  organizationId,\n  mode = 'default',\n  open = false,\n  onOpenChange,\n  onUpdate,\n  popupTitle,\n  loadingFallback,\n  errorFallback,\n  preferences,\n  ...rest\n}: OrganizationProfileProps): ReactElement => {\n  const {baseUrl, instanceId} = useThunderID();\n  const {t} = useTranslation(preferences?.i18n);\n  const [organization, setOrganization] = useState<OrganizationDetails | null>(null);\n\n  const fetchOrganization = async (): Promise<void> => {\n    if (!baseUrl || !organizationId) {\n      return;\n    }\n\n    try {\n      const orgData: any = await getOrganization({\n        baseUrl,\n        instanceId,\n        organizationId,\n      });\n      setOrganization(orgData);\n    } catch (err) {\n      logger.error('Failed to fetch organization:');\n      setOrganization(null);\n    }\n  };\n\n  useEffect(() => {\n    fetchOrganization();\n  }, [baseUrl, organizationId]);\n\n  const handleOrganizationUpdate = async (payload: any): Promise<void> => {\n    if (!baseUrl || !organizationId) return;\n\n    try {\n      // Convert payload to patch operations format\n      const operations: any = createPatchOperations(payload);\n\n      await updateOrganization({\n        baseUrl,\n        instanceId,\n        operations,\n        organizationId,\n      });\n      // Refetch organization data after update\n      await fetchOrganization();\n\n      // Call the optional onUpdate callback\n      if (onUpdate) {\n        await onUpdate(payload);\n      }\n    } catch (err) {\n      logger.error('Failed to update organization:');\n      throw err;\n    }\n  };\n\n  return (\n    <BaseOrganizationProfile\n      organization={organization}\n      onUpdate={handleOrganizationUpdate}\n      mode={mode === 'popup' ? 'popup' : 'inline'}\n      open={open}\n      onOpenChange={onOpenChange}\n      title={popupTitle || t('organization.profile.heading')}\n      preferences={preferences}\n      {...rest}\n    />\n  );\n};\n\nexport default OrganizationProfile;\n"],"mappings":";;;;;;;;;;AA0BA,MAAMA,WAA0D,6BAC9D,oBACA,sBACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4GD,MAAMC,uBAAqD,EACzD,gBACA,OAAO,WACP,OAAO,OACP,cACA,UACA,YACA,iBACA,eACA,YACA,GAAG,WACyC;CAC5C,MAAM,EAAC,SAAS,eAAcC,sBAAc;CAC5C,MAAM,EAAC,MAAKC,uBAAe,aAAa,KAAK;CAC7C,MAAM,CAAC,cAAc,mBAAmB,SAAqC,KAAK;CAElF,MAAM,oBAAoB,YAA2B;AACnD,MAAI,CAAC,WAAW,CAAC,eACf;AAGF,MAAI;AAMF,mBALqB,MAAMC,wBAAgB;IACzC;IACA;IACA;IACD,CAAC,CACsB;WACjB,KAAK;AACZ,YAAO,MAAM,gCAAgC;AAC7C,mBAAgB,KAAK;;;AAIzB,iBAAgB;AACd,qBAAmB;IAClB,CAAC,SAAS,eAAe,CAAC;CAE7B,MAAM,2BAA2B,OAAO,YAAgC;AACtE,MAAI,CAAC,WAAW,CAAC,eAAgB;AAEjC,MAAI;AAIF,SAAMC,2BAAmB;IACvB;IACA;IACA,YALsB,sBAAsB,QAAQ;IAMpD;IACD,CAAC;AAEF,SAAM,mBAAmB;AAGzB,OAAI,SACF,OAAM,SAAS,QAAQ;WAElB,KAAK;AACZ,YAAO,MAAM,iCAAiC;AAC9C,SAAM;;;AAIV,QACE,oBAACC;EACe;EACd,UAAU;EACV,MAAM,SAAS,UAAU,UAAU;EAC7B;EACQ;EACd,OAAO,cAAc,EAAE,+BAA+B;EACzC;EACb,GAAI;GACJ;;AAIN,kCAAe"}

package/dist/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.d.ts

@@ -1,149 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { Preferences } from '@thunderid/browser';
-import { CSSProperties, FC, ReactElement, ReactNode } from 'react';
-interface MenuItem {
-    href?: string;
-    icon?: ReactNode;
-    label: ReactNode;
-    onClick?: () => void;
-}
-/**
- * Interface for organization data.
- */
-export interface Organization {
-    /**
-     * Avatar URL for the organization.
-     */
-    avatar?: string;
-    /**
-     * Unique identifier for the organization.
-     */
-    id: string;
-    /**
-     * Number of members in the organization.
-     */
-    memberCount?: number;
-    /**
-     * Additional metadata for the organization.
-     */
-    metadata?: Record<string, any>;
-    /**
-     * Display name of the organization.
-     */
-    name: string;
-    /**
-     * User's role in the organization.
-     */
-    role?: 'owner' | 'admin' | 'member';
-    /**
-     * URL slug for the organization.
-     */
-    slug?: string;
-}
-/**
- * Props interface for the BaseOrganizationSwitcher component.
- */
-export interface BaseOrganizationSwitcherProps {
-    /**
-     * Optional size for the avatar
-     */
-    avatarSize?: number;
-    /**
-     * Custom class name for styling.
-     */
-    className?: string;
-    /**
-     * Currently selected organization.
-     */
-    currentOrganization?: Organization;
-    /**
-     * Error message to display.
-     */
-    error?: string;
-    /**
-     * Optional element to render when no organization is selected.
-     */
-    fallback?: ReactElement | null;
-    /**
-     * Whether the component is in a loading state.
-     */
-    loading?: boolean;
-    /**
-     * Additional menu items to display at the bottom of the dropdown.
-     */
-    menuItems?: MenuItem[];
-    /**
-     * Handler for when the manage profile button is clicked.
-     */
-    onManageProfile?: () => void;
-    /**
-     * Handler for when an organization is selected.
-     */
-    onOrganizationSwitch: (organization: Organization) => void;
-    /**
-     * List of available organizations.
-     */
-    organizations: Organization[];
-    /**
-     * The HTML element ID where the portal should be mounted
-     */
-    portalId?: string;
-    /**
-     * Component-level preferences to override global i18n and theme settings.
-     * Preferences are deep-merged with global ones, with component preferences
-     * taking precedence. Affects this component and all its descendants.
-     */
-    preferences?: Preferences;
-    /**
-     * Custom render function for the error state.
-     */
-    renderError?: (error: string) => ReactElement;
-    /**
-     * Custom render function for the loading state.
-     */
-    renderLoading?: () => ReactElement;
-    /**
-     * Custom render function for the organization item.
-     */
-    renderOrganization?: (organization: Organization, isSelected: boolean) => ReactElement;
-    /**
-     * Whether to show the member count.
-     */
-    showMemberCount?: boolean;
-    /**
-     * Whether to show the role badge.
-     */
-    showRole?: boolean;
-    /**
-     * Show organization name next to avatar in the trigger button
-     */
-    showTriggerLabel?: boolean;
-    /**
-     * Custom styles for the component.
-     */
-    style?: CSSProperties;
-}
-/**
- * BaseOrganizationSwitcher component displays an organization selector with a dropdown menu.
- * When clicked, it shows a popover with available organizations to switch between.
- * This component serves as the base for framework-specific implementations.
- */
-export declare const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps>;
-export default BaseOrganizationSwitcher;
-//# sourceMappingURL=BaseOrganizationSwitcher.d.ts.map

package/dist/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BaseOrganizationSwitcher.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAiBH,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAC,aAAa,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAW3E,UAAU,QAAQ;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC5C;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,mBAAmB,CAAC,EAAE,YAAY,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B;;OAEG;IACH,oBAAoB,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3D;;OAEG;IACH,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,YAAY,CAAC;IAC9C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,YAAY,CAAC;IACnC;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,KAAK,YAAY,CAAC;IACvF;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,6BAA6B,CAuVtE,CAAC;AAEF,eAAe,wBAAwB,CAAC"}