@thunderid/react 0.0.5 → 0.2.0

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"}

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

@@ -0,0 +1,72 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/presentation/OrganizationList/OrganizationList.styles.ts
+/**
+* Creates styles for the OrganizationList 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 cssOrganizationListWrapper = css`
+      /* Container wrapper styles for OrganizationList component */
+      width: 100%;
+      font-family: ${theme.vars.typography.fontFamily};
+
+      &__container {
+        position: relative;
+        width: 100%;
+      }
+
+      &__error-state {
+        padding: calc(${theme.vars.spacing.unit} * 2);
+        background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 10%, transparent);
+        border: 1px solid ${theme.vars.colors.error.main};
+        border-radius: ${theme.vars.borderRadius.medium};
+        color: ${theme.vars.colors.error.main};
+        text-align: center;
+      }
+
+      &__loading-overlay {
+        position: absolute;
+        inset: 0;
+        background-color: color-mix(in srgb, ${theme.vars.colors.background.surface} 80%, transparent);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: ${theme.vars.borderRadius.large};
+        backdrop-filter: blur(2px);
+      }
+    `;
+	return {
+		container: css`
+        position: relative;
+        width: 100%;
+      `,
+		errorState: css`
+        padding: calc(${theme.vars.spacing.unit} * 2);
+        background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 10%, transparent);
+        border: 1px solid ${theme.vars.colors.error.main};
+        border-radius: ${theme.vars.borderRadius.medium};
+        color: ${theme.vars.colors.error.main};
+        text-align: center;
+      `,
+		loadingOverlay: css`
+        position: absolute;
+        inset: 0;
+        background-color: color-mix(in srgb, ${theme.vars.colors.background.surface} 80%, transparent);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: ${theme.vars.borderRadius.large};
+        backdrop-filter: blur(2px);
+      `,
+		root: cssOrganizationListWrapper
+	};
+}, [theme, colorScheme]);
+var OrganizationList_styles_default = useStyles;
+
+//#endregion
+export { OrganizationList_styles_default as default };
+//# sourceMappingURL=OrganizationList.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationList.styles.js","names":["cssOrganizationListWrapper: string"],"sources":["../../../../src/components/presentation/OrganizationList/OrganizationList.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 OrganizationList 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 cssOrganizationListWrapper: string = css`\n      /* Container wrapper styles for OrganizationList component */\n      width: 100%;\n      font-family: ${theme.vars.typography.fontFamily};\n\n      &__container {\n        position: relative;\n        width: 100%;\n      }\n\n      &__error-state {\n        padding: calc(${theme.vars.spacing.unit} * 2);\n        background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 10%, 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        text-align: center;\n      }\n\n      &__loading-overlay {\n        position: absolute;\n        inset: 0;\n        background-color: color-mix(in srgb, ${theme.vars.colors.background.surface} 80%, transparent);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: ${theme.vars.borderRadius.large};\n        backdrop-filter: blur(2px);\n      }\n    `;\n\n    return {\n      container: css`\n        position: relative;\n        width: 100%;\n      `,\n      errorState: css`\n        padding: calc(${theme.vars.spacing.unit} * 2);\n        background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 10%, 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        text-align: center;\n      `,\n      loadingOverlay: css`\n        position: absolute;\n        inset: 0;\n        background-color: color-mix(in srgb, ${theme.vars.colors.background.surface} 80%, transparent);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: ${theme.vars.borderRadius.large};\n        backdrop-filter: blur(2px);\n      `,\n      root: cssOrganizationListWrapper,\n    };\n  }, [theme, colorScheme]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;AA4BA,MAAM,aAAa,OAAc,gBAC/B,cAAc;CACZ,MAAMA,6BAAqC,GAAG;;;qBAG7B,MAAM,KAAK,WAAW,WAAW;;;;;;;;wBAQ9B,MAAM,KAAK,QAAQ,KAAK;+CACD,MAAM,KAAK,OAAO,MAAM,KAAK;4BAChD,MAAM,KAAK,OAAO,MAAM,KAAK;yBAChC,MAAM,KAAK,aAAa,OAAO;iBACvC,MAAM,KAAK,OAAO,MAAM,KAAK;;;;;;;+CAOC,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;yBAI3D,MAAM,KAAK,aAAa,MAAM;;;;AAKnD,QAAO;EACL,WAAW,GAAG;;;;EAId,YAAY,GAAG;wBACG,MAAM,KAAK,QAAQ,KAAK;+CACD,MAAM,KAAK,OAAO,MAAM,KAAK;4BAChD,MAAM,KAAK,OAAO,MAAM,KAAK;yBAChC,MAAM,KAAK,aAAa,OAAO;iBACvC,MAAM,KAAK,OAAO,MAAM,KAAK;;;EAGxC,gBAAgB,GAAG;;;+CAGsB,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;yBAI3D,MAAM,KAAK,aAAa,MAAM;;;EAGjD,MAAM;EACP;GACA,CAAC,OAAO,YAAY,CAAC;AAE1B,sCAAe"}

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

@@ -37,7 +37,7 @@ export interface BaseOrganizationProfileProps {
     /**
      * Component to render when no organization data is available.
      */
-    fallback?: ReactElement;
+    fallback?: ReactElement | null;
     /**
      * Array of field configurations to display. Each field specifies what organization data to show.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"BaseOrganizationProfile.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EAAC,mBAAmB,EAAc,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAAwB,MAAM,OAAO,CAAC;AAUzE,MAAM,WAAW,4BAA4B;IAC3C;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB;;OAEG;IACH,MAAM,CAAC,EAAE;QACP,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,GAAG,EAAE,MAAM,mBAAmB,GAAG,YAAY,CAAC;QAC9C,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,mBAAmB,KAAK,SAAS,CAAC;KACvE,EAAE,CAAC;IAEJ;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAE/C;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAE/B;;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,YAAY,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAE1C;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAE1B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,QAAA,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAkW7D,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"BaseOrganizationProfile.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EAAC,mBAAmB,EAAc,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAAwB,MAAM,OAAO,CAAC;AAUzE,MAAM,WAAW,4BAA4B;IAC3C;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAE/B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,GAAG,EAAE,MAAM,mBAAmB,GAAG,YAAY,CAAC;QAC9C,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,mBAAmB,KAAK,SAAS,CAAC;KACvE,EAAE,CAAC;IAEJ;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAE/C;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAE/B;;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,YAAY,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAE1C;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAE1B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,QAAA,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAkW7D,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

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

@@ -0,0 +1,323 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import Button_default from "../../primitives/Button/Button.js";
+import TextField_default from "../../primitives/TextField/TextField.js";
+import Card_default from "../../primitives/Card/Card.js";
+import { Avatar } from "../../primitives/Avatar/Avatar.js";
+import Dialog_default from "../../primitives/Dialog/Dialog.js";
+import BaseOrganizationProfile_styles_default from "./BaseOrganizationProfile.styles.js";
+import KeyValueInput_default from "../../primitives/KeyValueInput/KeyValueInput.js";
+import { formatDate } from "@thunderid/browser";
+import { useCallback, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
+/**
+* BaseOrganizationProfile component displays organization information in a
+* structured and styled format. It shows organization details such as name,
+* description, status, and other available information with support for inline editing.
+*
+* This is the base component that can be used in any context where you have
+* an organization object available. It provides editing capabilities similar to
+* the UserProfile component, allowing users to modify organization fields directly.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <BaseOrganizationProfile organization={organizationData} />
+*
+* // With editing enabled and update handler
+* <BaseOrganizationProfile
+*   organization={organizationData}
+*   editable={true}
+*   onUpdate={async (payload) => {
+*     await updateOrganizationAPI(orgId, payload);
+*   }}
+* />
+*
+* // With card layout and custom title
+* <BaseOrganizationProfile
+*   organization={organizationData}
+*   cardLayout={true}
+*   title="Organization Details"
+*   fallback={<div>No organization data available</div>}
+* />
+*
+* // With custom fields configuration
+* <BaseOrganizationProfile
+*   organization={organizationData}
+*   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: 'attributes', label: 'Custom Attributes', editable: true }
+*   ]}
+*   onUpdate={handleUpdate}
+* />
+*
+* // In popup mode
+* <BaseOrganizationProfile
+*   organization={organizationData}
+*   mode="popup"
+*   open={isOpen}
+*   onOpenChange={setIsOpen}
+*   title="Edit Organization"
+* />
+* ```
+* <BaseOrganizationProfile
+*   organization={organizationData}
+*   fields={[
+*     { key: 'id', label: 'Organization ID' },
+*     { key: 'name', label: 'Organization Name' },
+*     { key: 'description', label: 'Description', render: (value) => value || 'No description' },
+*     { key: 'created', label: 'Created Date', render: (value) => new Date(value).toLocaleDateString() },
+*     { key: 'attributes', label: 'Custom Attributes' }
+*   ]}
+* />
+* ```
+*/
+const BaseOrganizationProfile = ({ fallback = null, className = "", cardLayout = true, organization, title = "Organization Profile", mode = "inline", editable = true, onOpenChange, onUpdate, open = false, saveButtonText = "Save Changes", cancelButtonText = "Cancel", fields = [
+	{
+		editable: false,
+		key: "id",
+		label: "Organization ID"
+	},
+	{
+		editable: true,
+		key: "name",
+		label: "Organization Name"
+	},
+	{
+		editable: true,
+		key: "description",
+		label: "Organization Description",
+		render: (value) => value || "-"
+	},
+	{
+		editable: false,
+		key: "created",
+		label: "Created Date",
+		render: (value) => formatDate(value)
+	},
+	{
+		editable: false,
+		key: "lastModified",
+		label: "Last Modified Date",
+		render: (value) => formatDate(value)
+	}
+] }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = BaseOrganizationProfile_styles_default(theme, colorScheme);
+	const [editedOrganization, setEditedOrganization] = useState(organization);
+	const [editingFields, setEditingFields] = useState({});
+	const PencilIcon = () => /* @__PURE__ */ jsx("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: /* @__PURE__ */ jsx("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+	});
+	const toggleFieldEdit = useCallback((fieldName) => {
+		setEditingFields((prev) => ({
+			...prev,
+			[fieldName]: !prev[fieldName]
+		}));
+	}, []);
+	const getFieldPlaceholder = useCallback((fieldKey) => {
+		return `Enter ${{
+			description: "organization description",
+			name: "organization name",
+			orgHandle: "organization handle",
+			status: "organization status",
+			type: "organization type"
+		}[fieldKey] || fieldKey.toLowerCase()}`;
+	}, []);
+	const handleFieldSave = useCallback((fieldKey) => {
+		if (!onUpdate || !fieldKey) return;
+		let fieldValue;
+		if (editedOrganization && fieldKey && editedOrganization[fieldKey] !== void 0) fieldValue = editedOrganization[fieldKey];
+		else if (organization?.[fieldKey] !== void 0) fieldValue = organization[fieldKey];
+		else fieldValue = "";
+		onUpdate({ [fieldKey]: fieldValue });
+		toggleFieldEdit(fieldKey);
+	}, [
+		editedOrganization,
+		organization,
+		onUpdate,
+		toggleFieldEdit
+	]);
+	const handleFieldCancel = useCallback((fieldKey) => {
+		setEditedOrganization((prev) => ({
+			...prev,
+			[fieldKey]: organization?.[fieldKey]
+		}));
+		toggleFieldEdit(fieldKey);
+	}, [organization, toggleFieldEdit]);
+	const getOrgInitials = (name) => {
+		if (!name) return "ORG";
+		return name.split(" ").map((word) => word.charAt(0)).join("").toUpperCase().slice(0, 2);
+	};
+	const renderField = (field, isEditing, onEditValue, onStartEdit) => {
+		if (!field) return null;
+		const { key, label, editable: fieldEditable = true } = field;
+		const value = key === "attributes" ? organization?.attributes || {} : organization?.[key];
+		const renderedValue = field.render ? field.render(value, organization) : value;
+		if (isEditing && onEditValue && fieldEditable && editable) {
+			const fieldValue = editedOrganization && key && editedOrganization[key] !== void 0 ? editedOrganization[key] : value || "";
+			const commonProps = {
+				className: cx(styles["fieldInput"]),
+				label: void 0,
+				onChange: (e) => onEditValue(e.target ? e.target.value : e),
+				placeholder: getFieldPlaceholder(key),
+				value: typeof fieldValue === "object" ? JSON.stringify(fieldValue) : String(fieldValue || "")
+			};
+			let fieldInput;
+			if (key === "attributes") fieldInput = /* @__PURE__ */ jsx(KeyValueInput_default, {
+				value: typeof fieldValue === "object" && fieldValue !== null ? fieldValue : {},
+				onChange: (pairs) => {
+					onEditValue(pairs.reduce((acc, pair) => {
+						acc[pair.key] = pair.value;
+						return acc;
+					}, {}));
+				},
+				onAdd: (pair) => {
+					if (onUpdate) onUpdate([{
+						operation: "ADD",
+						path: `/attributes/${pair.key}`,
+						value: pair.value
+					}]);
+				},
+				onRemove: (pair) => {
+					if (onUpdate) onUpdate([{
+						operation: "REMOVE",
+						path: `/attributes/${pair.key}`,
+						value: ""
+					}]);
+				},
+				label: "",
+				keyPlaceholder: "Attribute name",
+				valuePlaceholder: "Attribute value",
+				helperText: "Add custom attributes as key-value pairs"
+			});
+			else fieldInput = /* @__PURE__ */ jsx(TextField_default, { ...commonProps });
+			return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				className: cx(styles["label"]),
+				children: label
+			}), /* @__PURE__ */ jsx("div", {
+				className: cx(styles["value"]),
+				children: fieldInput
+			})] });
+		}
+		const hasValue = value !== void 0 && value !== null && value !== "";
+		const isFieldEditable = editable && fieldEditable;
+		let displayValue;
+		if (hasValue) displayValue = key === "attributes" && typeof value === "object" && value !== null ? /* @__PURE__ */ jsx(KeyValueInput_default, {
+			value,
+			readOnly: true,
+			label: ""
+		}) : String(renderedValue);
+		else if (isFieldEditable) displayValue = getFieldPlaceholder(key);
+		else displayValue = "-";
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: cx(styles["label"]),
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			className: cx(styles["value"], !hasValue && styles["valueEmpty"]),
+			children: !hasValue && isFieldEditable && onStartEdit ? /* @__PURE__ */ jsx(Button_default, {
+				onClick: onStartEdit,
+				variant: "text",
+				color: "secondary",
+				size: "small",
+				title: "Click to edit",
+				className: cx(styles["placeholderButton"]),
+				children: displayValue
+			}) : displayValue
+		})] });
+	};
+	const renderOrganizationField = (field) => {
+		if (!field?.key) return null;
+		const hasValue = organization?.[field.key] !== void 0 && organization?.[field.key] !== "" && organization?.[field.key] !== null;
+		const isFieldEditing = editingFields[field.key];
+		const isFieldEditable = editable && field.editable !== false;
+		if (!(hasValue || isFieldEditing || isFieldEditable)) return null;
+		return /* @__PURE__ */ jsxs("div", {
+			className: cx(styles["field"]),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cx(styles["fieldContent"]),
+				children: renderField(field, isFieldEditing, (value) => {
+					const tempEditedOrganization = { ...editedOrganization };
+					tempEditedOrganization[field.key] = value;
+					setEditedOrganization(tempEditedOrganization);
+				}, () => toggleFieldEdit(field.key))
+			}), isFieldEditable && /* @__PURE__ */ jsx("div", {
+				className: cx(styles["fieldActions"]),
+				children: isFieldEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button_default, {
+					onClick: () => handleFieldSave(field.key),
+					color: "primary",
+					variant: "solid",
+					size: "small",
+					title: "Save changes",
+					children: saveButtonText
+				}), /* @__PURE__ */ jsx(Button_default, {
+					onClick: () => handleFieldCancel(field.key),
+					color: "secondary",
+					variant: "solid",
+					size: "small",
+					title: "Cancel editing",
+					children: cancelButtonText
+				})] }) : hasValue && /* @__PURE__ */ jsx(Button_default, {
+					onClick: () => toggleFieldEdit(field.key),
+					variant: "text",
+					color: "secondary",
+					size: "small",
+					title: "Edit field",
+					className: cx(styles["editButton"]),
+					children: /* @__PURE__ */ jsx(PencilIcon, {})
+				})
+			})]
+		}, field.key);
+	};
+	if (!organization) return fallback;
+	const profileContent = /* @__PURE__ */ jsxs(Card_default, {
+		className: cx(styles["root"], cardLayout && styles["card"], className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx(styles["header"]),
+			children: [/* @__PURE__ */ jsx(Avatar, {
+				name: getOrgInitials(organization.name),
+				size: 80,
+				alt: `${organization.name} logo`
+			}), /* @__PURE__ */ jsxs("div", {
+				className: cx(styles["orgInfo"]),
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: cx(styles["name"]),
+					children: organization.name
+				}), organization.orgHandle && /* @__PURE__ */ jsxs("p", {
+					className: cx(styles["handle"]),
+					children: ["@", organization.orgHandle]
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cx(styles["infoContainer"]),
+			children: fields.map((field) => renderOrganizationField(field))
+		})]
+	});
+	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["popup"]),
+			children: profileContent
+		})] })
+	});
+	return profileContent;
+};
+var BaseOrganizationProfile_default = BaseOrganizationProfile;
+
+//#endregion
+export { BaseOrganizationProfile_default as default };
+//# sourceMappingURL=BaseOrganizationProfile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseOrganizationProfile.js","names":["BaseOrganizationProfile: FC<BaseOrganizationProfileProps>","useTheme","styles: Record<string, string>","useStyles","toggleFieldEdit: (fieldName: string) => void","getFieldPlaceholder: (fieldKey: string) => string","handleFieldSave: (fieldKey: string) => void","fieldValue: any","handleFieldCancel: (fieldKey: string) => void","value: any","renderedValue: any","commonProps: any","fieldInput: ReactElement","KeyValueInput","TextField","hasValue: boolean","isFieldEditable: boolean","displayValue: string | ReactElement","Button","isFieldEditing: boolean","tempEditedOrganization: any","profileContent: ReactElement","CardPrimitive","DialogPrimitive"],"sources":["../../../../src/components/presentation/OrganizationProfile/BaseOrganizationProfile.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 {OrganizationDetails, formatDate, Preferences} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useState, useCallback} from 'react';\nimport useStyles from './BaseOrganizationProfile.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {Avatar} from '../../primitives/Avatar/Avatar';\nimport Button from '../../primitives/Button/Button';\nimport CardPrimitive from '../../primitives/Card/Card';\nimport DialogPrimitive from '../../primitives/Dialog/Dialog';\nimport KeyValueInput from '../../primitives/KeyValueInput/KeyValueInput';\nimport TextField from '../../primitives/TextField/TextField';\n\nexport interface BaseOrganizationProfileProps {\n  /**\n   * Callback fired when the cancel button is clicked (only used in editable mode).\n   */\n  cancelButtonText?: string;\n\n  /**\n   * Whether to display the profile in a card layout.\n   */\n  cardLayout?: boolean;\n\n  /**\n   * CSS class name for styling the component.\n   */\n  className?: string;\n\n  /**\n   * Whether the organization profile is editable.\n   */\n  editable?: boolean;\n\n  /**\n   * Component to render when no organization data is available.\n   */\n  fallback?: ReactElement | null;\n\n  /**\n   * Array of field configurations to display. Each field specifies what organization data to show.\n   */\n  fields?: {\n    editable?: boolean;\n    key: keyof OrganizationDetails | 'attributes';\n    label: string;\n    render?: (value: any, organization: OrganizationDetails) => ReactNode;\n  }[];\n\n  /**\n   * Display mode for the component.\n   */\n  mode?: 'inline' | 'popup';\n\n  /**\n   * Callback fired when a field value changes.\n   */\n  onChange?: (field: string, value: any) => void;\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 form is submitted (only used in editable mode).\n   */\n  onSubmit?: (data: any) => 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 organization details to display.\n   */\n  organization?: OrganizationDetails | null;\n\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  /**\n   * Text for the save button (only used in editable mode).\n   */\n  saveButtonText?: string;\n\n  /**\n   * Custom title for the profile.\n   */\n  title?: string;\n}\n\n/**\n * BaseOrganizationProfile component displays organization information in a\n * structured and styled format. It shows organization details such as name,\n * description, status, and other available information with support for inline editing.\n *\n * This is the base component that can be used in any context where you have\n * an organization object available. It provides editing capabilities similar to\n * the UserProfile component, allowing users to modify organization fields directly.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <BaseOrganizationProfile organization={organizationData} />\n *\n * // With editing enabled and update handler\n * <BaseOrganizationProfile\n *   organization={organizationData}\n *   editable={true}\n *   onUpdate={async (payload) => {\n *     await updateOrganizationAPI(orgId, payload);\n *   }}\n * />\n *\n * // With card layout and custom title\n * <BaseOrganizationProfile\n *   organization={organizationData}\n *   cardLayout={true}\n *   title=\"Organization Details\"\n *   fallback={<div>No organization data available</div>}\n * />\n *\n * // With custom fields configuration\n * <BaseOrganizationProfile\n *   organization={organizationData}\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: 'attributes', label: 'Custom Attributes', editable: true }\n *   ]}\n *   onUpdate={handleUpdate}\n * />\n *\n * // In popup mode\n * <BaseOrganizationProfile\n *   organization={organizationData}\n *   mode=\"popup\"\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n *   title=\"Edit Organization\"\n * />\n * ```\n * <BaseOrganizationProfile\n *   organization={organizationData}\n *   fields={[\n *     { key: 'id', label: 'Organization ID' },\n *     { key: 'name', label: 'Organization Name' },\n *     { key: 'description', label: 'Description', render: (value) => value || 'No description' },\n *     { key: 'created', label: 'Created Date', render: (value) => new Date(value).toLocaleDateString() },\n *     { key: 'attributes', label: 'Custom Attributes' }\n *   ]}\n * />\n * ```\n */\nconst BaseOrganizationProfile: FC<BaseOrganizationProfileProps> = ({\n  fallback = null,\n  className = '',\n  cardLayout = true,\n  organization,\n  title = 'Organization Profile',\n  mode = 'inline',\n  editable = true,\n  onOpenChange,\n  onUpdate,\n  open = false,\n  saveButtonText = 'Save Changes',\n  cancelButtonText = 'Cancel',\n  fields = [\n    {\n      editable: false,\n      key: 'id',\n      label: 'Organization ID',\n    },\n    {\n      editable: true,\n      key: 'name',\n      label: 'Organization Name',\n    },\n    {\n      editable: true,\n      key: 'description',\n      label: 'Organization Description',\n      render: (value: any): any => value || '-',\n    },\n    {\n      editable: false,\n      key: 'created',\n      label: 'Created Date',\n      render: (value: any): any => formatDate(value),\n    },\n    {\n      editable: false,\n      key: 'lastModified',\n      label: 'Last Modified Date',\n      render: (value: any): any => formatDate(value),\n    },\n  ],\n}: BaseOrganizationProfileProps): ReactElement | null => {\n  const {theme, colorScheme} = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme);\n  const [editedOrganization, setEditedOrganization] = useState(organization);\n  const [editingFields, setEditingFields] = useState<Record<string, boolean>>({});\n\n  const PencilIcon = (): ReactElement => (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z\" />\n    </svg>\n  );\n\n  const toggleFieldEdit: (fieldName: string) => void = useCallback((fieldName: string) => {\n    setEditingFields((prev: Record<string, boolean>) => ({\n      ...prev,\n      [fieldName]: !prev[fieldName],\n    }));\n  }, []);\n\n  const getFieldPlaceholder: (fieldKey: string) => string = useCallback((fieldKey: string): string => {\n    const fieldLabels: Record<string, string> = {\n      description: 'organization description',\n      name: 'organization name',\n      orgHandle: 'organization handle',\n      status: 'organization status',\n      type: 'organization type',\n    };\n\n    const fieldLabel: string = fieldLabels[fieldKey] || fieldKey.toLowerCase();\n    return `Enter ${fieldLabel}`;\n  }, []);\n\n  const handleFieldSave: (fieldKey: string) => void = useCallback(\n    (fieldKey: string): void => {\n      if (!onUpdate || !fieldKey) return;\n\n      let fieldValue: any;\n      if (editedOrganization && fieldKey && editedOrganization[fieldKey as keyof OrganizationDetails] !== undefined) {\n        fieldValue = editedOrganization[fieldKey as keyof OrganizationDetails];\n      } else if (organization?.[fieldKey as keyof OrganizationDetails] !== undefined) {\n        fieldValue = organization[fieldKey as keyof OrganizationDetails];\n      } else {\n        fieldValue = '';\n      }\n\n      const payload: Record<string, any> = {\n        [fieldKey]: fieldValue,\n      };\n\n      onUpdate(payload);\n      toggleFieldEdit(fieldKey);\n    },\n    [editedOrganization, organization, onUpdate, toggleFieldEdit],\n  );\n\n  const handleFieldCancel: (fieldKey: string) => void = useCallback(\n    (fieldKey: string) => {\n      setEditedOrganization((prev: any) => ({\n        ...prev,\n        [fieldKey]: organization?.[fieldKey as keyof OrganizationDetails],\n      }));\n      toggleFieldEdit(fieldKey);\n    },\n    [organization, toggleFieldEdit],\n  );\n\n  const getOrgInitials = (name?: string): string => {\n    if (!name) return 'ORG';\n    return name\n      .split(' ')\n      .map((word: string) => word.charAt(0))\n      .join('')\n      .toUpperCase()\n      .slice(0, 2);\n  };\n\n  const renderField = (\n    field: any,\n    isEditing: boolean,\n    onEditValue?: (value: any) => void,\n    onStartEdit?: () => void,\n  ): ReactElement | null => {\n    if (!field) return null;\n\n    const {key, label, editable: fieldEditable = true} = field;\n    const value: any =\n      key === 'attributes' ? organization?.attributes || {} : organization?.[key as keyof OrganizationDetails];\n\n    const renderedValue: any = field.render ? field.render(value, organization) : value;\n\n    if (isEditing && onEditValue && fieldEditable && editable) {\n      const fieldValue: any =\n        editedOrganization && key && editedOrganization[key as keyof OrganizationDetails] !== undefined\n          ? editedOrganization[key as keyof OrganizationDetails]\n          : value || '';\n\n      const commonProps: any = {\n        className: cx(styles['fieldInput']),\n        label: undefined,\n        onChange: (e: any): void => onEditValue(e.target ? e.target.value : e),\n        placeholder: getFieldPlaceholder(key),\n        value: typeof fieldValue === 'object' ? JSON.stringify(fieldValue) : String(fieldValue || ''),\n      };\n\n      let fieldInput: ReactElement;\n\n      if (key === 'attributes') {\n        const attributesValue: any = typeof fieldValue === 'object' && fieldValue !== null ? fieldValue : {};\n        fieldInput = (\n          <KeyValueInput\n            value={attributesValue}\n            onChange={(pairs: any): void => {\n              const attributesObject: Record<string, any> = pairs.reduce(\n                (acc: any, pair: any) => {\n                  acc[pair.key] = pair.value;\n                  return acc;\n                },\n                {} as Record<string, any>,\n              );\n              onEditValue(attributesObject);\n            }}\n            onAdd={(pair: any): void => {\n              if (onUpdate) {\n                const operation: any = {\n                  operation: 'ADD',\n                  path: `/attributes/${pair.key}`,\n                  value: pair.value,\n                };\n                onUpdate([operation]);\n              }\n            }}\n            onRemove={(pair: any): void => {\n              if (onUpdate) {\n                const operation: any = {\n                  operation: 'REMOVE',\n                  path: `/attributes/${pair.key}`,\n                  value: '',\n                };\n                onUpdate([operation]);\n              }\n            }}\n            label=\"\"\n            keyPlaceholder=\"Attribute name\"\n            valuePlaceholder=\"Attribute value\"\n            helperText=\"Add custom attributes as key-value pairs\"\n          />\n        );\n      } else {\n        fieldInput = <TextField {...commonProps} />;\n      }\n\n      return (\n        <>\n          <span className={cx(styles['label'])}>{label}</span>\n          <div className={cx(styles['value'])}>{fieldInput}</div>\n        </>\n      );\n    }\n\n    const hasValue: boolean = value !== undefined && value !== null && value !== '';\n    const isFieldEditable: boolean = editable && fieldEditable;\n\n    let displayValue: string | ReactElement;\n    if (hasValue) {\n      displayValue =\n        key === 'attributes' && typeof value === 'object' && value !== null ? (\n          <KeyValueInput value={value} readOnly={true} label=\"\" />\n        ) : (\n          String(renderedValue)\n        );\n    } else if (isFieldEditable) {\n      displayValue = getFieldPlaceholder(key);\n    } else {\n      displayValue = '-';\n    }\n\n    return (\n      <>\n        <span className={cx(styles['label'])}>{label}</span>\n        <div className={cx(styles['value'], !hasValue && styles['valueEmpty'])}>\n          {!hasValue && isFieldEditable && onStartEdit ? (\n            <Button\n              onClick={onStartEdit}\n              variant=\"text\"\n              color=\"secondary\"\n              size=\"small\"\n              title=\"Click to edit\"\n              className={cx(styles['placeholderButton'])}\n            >\n              {displayValue}\n            </Button>\n          ) : (\n            displayValue\n          )}\n        </div>\n      </>\n    );\n  };\n\n  const renderOrganizationField = (field: any): ReactElement | null => {\n    if (!field?.key) return null;\n\n    const hasValue: boolean =\n      organization?.[field.key as keyof OrganizationDetails] !== undefined &&\n      organization?.[field.key as keyof OrganizationDetails] !== '' &&\n      organization?.[field.key as keyof OrganizationDetails] !== null;\n    const isFieldEditing: boolean = editingFields[field.key];\n    const isFieldEditable: boolean = editable && field.editable !== false;\n\n    const shouldShow: boolean = hasValue || isFieldEditing || isFieldEditable;\n\n    if (!shouldShow) {\n      return null;\n    }\n\n    return (\n      <div className={cx(styles['field'])} key={field.key}>\n        <div className={cx(styles['fieldContent'])}>\n          {renderField(\n            field,\n            isFieldEditing,\n            (value: any): void => {\n              const tempEditedOrganization: any = {...editedOrganization};\n              tempEditedOrganization[field.key as keyof OrganizationDetails] = value;\n              setEditedOrganization(tempEditedOrganization);\n            },\n            (): void => toggleFieldEdit(field.key),\n          )}\n        </div>\n        {isFieldEditable && (\n          <div className={cx(styles['fieldActions'])}>\n            {isFieldEditing ? (\n              <>\n                <Button\n                  onClick={(): void => handleFieldSave(field.key)}\n                  color=\"primary\"\n                  variant=\"solid\"\n                  size=\"small\"\n                  title=\"Save changes\"\n                >\n                  {saveButtonText}\n                </Button>\n                <Button\n                  onClick={(): void => handleFieldCancel(field.key)}\n                  color=\"secondary\"\n                  variant=\"solid\"\n                  size=\"small\"\n                  title=\"Cancel editing\"\n                >\n                  {cancelButtonText}\n                </Button>\n              </>\n            ) : (\n              hasValue && (\n                <Button\n                  onClick={(): void => toggleFieldEdit(field.key)}\n                  variant=\"text\"\n                  color=\"secondary\"\n                  size=\"small\"\n                  title=\"Edit field\"\n                  className={cx(styles['editButton'])}\n                >\n                  <PencilIcon />\n                </Button>\n              )\n            )}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  if (!organization) {\n    return fallback;\n  }\n\n  const profileContent: ReactElement = (\n    <CardPrimitive className={cx(styles['root'], cardLayout && styles['card'], className)}>\n      <div className={cx(styles['header'])}>\n        <Avatar name={getOrgInitials(organization.name)} size={80} alt={`${organization.name} logo`} />\n        <div className={cx(styles['orgInfo'])}>\n          <h2 className={cx(styles['name'])}>{organization.name}</h2>\n          {organization.orgHandle && <p className={cx(styles['handle'])}>@{organization.orgHandle}</p>}\n        </div>\n      </div>\n\n      <div className={cx(styles['infoContainer'])}>{fields.map((field: any) => renderOrganizationField(field))}</div>\n    </CardPrimitive>\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['popup'])}>{profileContent}</div>\n        </DialogPrimitive.Content>\n      </DialogPrimitive>\n    );\n  }\n\n  return profileContent;\n};\n\nexport default BaseOrganizationProfile;\n"],"mappings":"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"}