@torq-north/react-tools 1.4.0 → 1.4.1

package/dist/index.cjs

@@ -610,9 +610,9 @@ function buildCheckboxOption(option, values) {
 }
 function render(option, showCheckbox, isSelected) {
     if (typeof option === "string") {
-        return (jsxRuntime.jsx(material.MenuItem, { value: option, sx: { display: "block" }, children: jsxRuntime.jsxs(material.Stack, { direction: "row", gap: 1, alignItems: "center", children: [showCheckbox && jsxRuntime.jsx(material.Checkbox, { checked: isSelected }), jsxRuntime.jsx(material.Box, { children: jsxRuntime.jsx(material.Typography, { sx: { textWrap: "wrap" }, children: option }) })] }) }, option));
+        return (jsxRuntime.jsx(material.MenuItem, { value: option, sx: { display: "block" }, children: jsxRuntime.jsxs(material.Stack, { direction: "row", gap: 1, alignItems: "center", children: [showCheckbox && (jsxRuntime.jsx(material.Checkbox, { checked: isSelected, sx: { padding: 0, marginX: 1 } })), jsxRuntime.jsx(material.Box, { children: jsxRuntime.jsx(material.Typography, { sx: { textWrap: "wrap" }, children: option }) })] }) }, option));
     }
-    return (jsxRuntime.jsx(material.MenuItem, { value: option.value, sx: { display: "block" }, disabled: option.disabled, children: jsxRuntime.jsxs(material.Stack, { direction: "row", gap: 1, alignItems: "center", children: [showCheckbox && jsxRuntime.jsx(material.Checkbox, { checked: isSelected }), jsxRuntime.jsxs(material.Box, { children: [jsxRuntime.jsx(material.Typography, { fontWeight: option.subText ? "bold" : undefined, sx: { textWrap: "wrap" }, children: option.text }), option.subText && (jsxRuntime.jsx(material.Box, { children: jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { textWrap: "wrap" }, children: option.subText }) }))] })] }) }, option.value));
+    return (jsxRuntime.jsx(material.MenuItem, { value: option.value, sx: { display: "block" }, disabled: option.disabled, children: jsxRuntime.jsxs(material.Stack, { direction: "row", gap: 1, alignItems: "center", children: [showCheckbox && (jsxRuntime.jsx(material.Checkbox, { checked: isSelected, sx: { padding: 0, marginX: 1 } })), jsxRuntime.jsxs(material.Box, { children: [jsxRuntime.jsx(material.Typography, { fontWeight: option.subText ? "bold" : undefined, sx: { textWrap: "wrap" }, children: option.text }), option.subText && (jsxRuntime.jsx(material.Box, { children: jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { textWrap: "wrap" }, children: option.subText }) }))] })] }) }, option.value));
 }
 
 function SelectFormField(_a) {

package/dist/index.es.js

@@ -608,9 +608,9 @@ function buildCheckboxOption(option, values) {
 }
 function render(option, showCheckbox, isSelected) {
     if (typeof option === "string") {
-        return (jsx(MenuItem, { value: option, sx: { display: "block" }, children: jsxs(Stack, { direction: "row", gap: 1, alignItems: "center", children: [showCheckbox && jsx(Checkbox, { checked: isSelected }), jsx(Box, { children: jsx(Typography, { sx: { textWrap: "wrap" }, children: option }) })] }) }, option));
+        return (jsx(MenuItem, { value: option, sx: { display: "block" }, children: jsxs(Stack, { direction: "row", gap: 1, alignItems: "center", children: [showCheckbox && (jsx(Checkbox, { checked: isSelected, sx: { padding: 0, marginX: 1 } })), jsx(Box, { children: jsx(Typography, { sx: { textWrap: "wrap" }, children: option }) })] }) }, option));
     }
-    return (jsx(MenuItem, { value: option.value, sx: { display: "block" }, disabled: option.disabled, children: jsxs(Stack, { direction: "row", gap: 1, alignItems: "center", children: [showCheckbox && jsx(Checkbox, { checked: isSelected }), jsxs(Box, { children: [jsx(Typography, { fontWeight: option.subText ? "bold" : undefined, sx: { textWrap: "wrap" }, children: option.text }), option.subText && (jsx(Box, { children: jsx(Typography, { variant: "body2", sx: { textWrap: "wrap" }, children: option.subText }) }))] })] }) }, option.value));
+    return (jsx(MenuItem, { value: option.value, sx: { display: "block" }, disabled: option.disabled, children: jsxs(Stack, { direction: "row", gap: 1, alignItems: "center", children: [showCheckbox && (jsx(Checkbox, { checked: isSelected, sx: { padding: 0, marginX: 1 } })), jsxs(Box, { children: [jsx(Typography, { fontWeight: option.subText ? "bold" : undefined, sx: { textWrap: "wrap" }, children: option.text }), option.subText && (jsx(Box, { children: jsx(Typography, { variant: "body2", sx: { textWrap: "wrap" }, children: option.subText }) }))] })] }) }, option.value));
 }
 
 function SelectFormField(_a) {

package/dist/src/IRC/Components/IrcAddressDisplay.d.ts

@@ -0,0 +1,5 @@
+import { IrcAddress } from "../Types/IrcPerson";
+export interface IrcAddressDisplayProps {
+    address: IrcAddress;
+}
+export declare function IrcAddressDisplay({ address }: IrcAddressDisplayProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/IRC/Components/IrcPersonDetails.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { IrcPerson } from "../Types/IrcPerson";
+export type IrcProfileSections = "personal" | "address" | "contact";
+export interface IrcPersonDetailsProps {
+    person?: IrcPerson;
+    isLoading?: boolean;
+    sections?: (IrcProfileSections | (() => React.ReactNode))[];
+}
+export declare function IrcPersonDetails({ person, isLoading, sections, }: IrcPersonDetailsProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/IRC/Components/IrcPersonHeader.d.ts

@@ -0,0 +1,9 @@
+import { IrcPerson } from "../Types/IrcPerson";
+export interface IrcPersonHeaderProps {
+    person?: IrcPerson;
+    isLoading?: boolean;
+    editMode?: boolean;
+    onEditClicked?: () => void;
+    readonly?: boolean;
+}
+export declare function IrcPersonHeader({ person, isLoading, editMode, onEditClicked, readonly, }: IrcPersonHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/IRC/Components/IrcProfile.d.ts

@@ -0,0 +1,27 @@
+import { TabbedLayoutTab } from "../../MUI/Components/TabbedLayout/TabbedLayout";
+import { IrcPersonDetailsProps } from "./IrcPersonDetails";
+import { IrcPerson } from "../Types/IrcPerson";
+import { type ReactNode } from "react";
+export interface IrcProfileTabFunctionProps {
+    /** Whether the profile is in edit mode */
+    editMode: boolean;
+    /** Called when the edit mode is toggled */
+    setEditMode: (editMode: boolean) => void;
+}
+export interface IrcProfileTab extends Omit<TabbedLayoutTab, "content"> {
+    /** Whether the tab is readonly. If true, the edit button is hidden on the profile header */
+    readonly?: boolean;
+    /** The content to display for the tab */
+    content: ReactNode | ((props: IrcProfileTabFunctionProps) => ReactNode);
+}
+export interface IrcProfileProps {
+    /** The person to display in the profile tab and header */
+    person?: IrcPerson;
+    /** Whether the profile is loading */
+    isLoading?: boolean;
+    /** The sections to display in the profile tab */
+    profileSections?: IrcPersonDetailsProps["sections"];
+    /** The tabs to display in the profile (in addition to the profile tab) */
+    tabs?: IrcProfileTab[];
+}
+export declare function IrcProfile({ person, isLoading, tabs: customTabs, profileSections, }: IrcProfileProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/IRC/Components/ProfileSection.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface ProfileSectionProps {
+    /** The title to display for the section */
+    title: string;
+    /** The icon to display for the section */
+    icon?: React.ReactNode;
+    /** The content to display for the section */
+    children: React.ReactNode;
+}
+export declare function ProfileSection({ title, icon, children }: ProfileSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/IRC/Types/IrcPerson.d.ts

@@ -0,0 +1,30 @@
+export interface IrcAddress {
+    line1: string;
+    line2?: string;
+    city: string;
+    province: string;
+    postalCode: string;
+    country: string;
+}
+export interface IrcPerson {
+    firstName: string;
+    lastName: string;
+    preferredName?: string;
+    dateOfBirth: string;
+    ancestry?: string;
+    enrolmentStatus: string;
+    applicationStatus: string;
+    gender?: string;
+    fileNumber: string;
+    trustNumber?: string;
+    slgbtqiaplus?: boolean;
+    healthCardNumber?: string;
+    nihbNumber?: string;
+    residentOfBeaufortDeltaRegion?: boolean;
+    community?: string;
+    mailingAddress?: IrcAddress;
+    physicalAddress?: IrcAddress;
+    email?: string;
+    phoneNumber?: string;
+    eftOnFile?: boolean;
+}

package/dist/src/IRC/index.d.ts

@@ -0,0 +1,5 @@
+export { IrcProfile } from "./Components/IrcProfile";
+export { ProfileSection } from "./Components/ProfileSection";
+export type { IrcProfileTab, IrcProfileTabFunctionProps, } from "./Components/IrcProfile";
+export type { ProfileSectionProps } from "./Components/ProfileSection";
+export type { IrcPerson, IrcAddress } from "./Types/IrcPerson";

package/dist/src/MUI/Components/TabbedLayout/TabbedLayout.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+export interface TabbedLayoutTab {
+    /** The label to display for the tab button */
+    label: string;
+    /** The unique key for the tab */
+    key: string;
+    /** The icon to display for the tab button */
+    icon?: React.ReactNode;
+    /** The content to display for the tab */
+    content: React.ReactNode;
+}
+export interface TabbedLayoutProps {
+    /** A list of tabs to display */
+    tabs: TabbedLayoutTab[];
+    /** A shared header that is displayed above all tabs */
+    header?: React.ReactNode;
+    /** The tab to select when the component is first rendered (uncontrolled mode only) */
+    defaultTab?: string;
+    /** The currently selected tab key (controlled mode) */
+    selectedTab?: string;
+    /** Called when the selected tab changes */
+    onChange?: (tab: string) => void;
+}
+export declare function TabbedLayout({ tabs, defaultTab, header, selectedTab: selectedTabProp, onChange, }: TabbedLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/MUI/Components/TabbedLayout/index.d.ts

@@ -0,0 +1,2 @@
+export { TabbedLayout } from "./TabbedLayout";
+export type { TabbedLayoutProps, TabbedLayoutTab } from "./TabbedLayout";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@torq-north/react-tools",
   "type": "module",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "A collection of commonly used utilities",
   "author": "@torq-north",
   "license": "SEE LICENCE.md",