@trackunit/react-form-components 2.1.60 → 2.1.62

package/index.cjs.js

@@ -1964,25 +1964,8 @@ const Checkbox = ({ className, "data-testid": dataTestId = "checkbox", onChange,
 };
 Checkbox.displayName = "Checkbox";
 
-/**
- * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
- *
- * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
- * @returns {ReactElement} SingleSelectMenuItem
- */
-const SingleSelectMenuItem = ({ label, icon, onClick, selected = false, focused = false, disabled = false, "data-testid": dataTestId, optionLabelDescription, optionPrefix, optionContent, fieldSize = "medium", }) => {
-    return (jsxRuntime.jsx(reactComponents.MenuItem, { "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, optionPrefix: react.isValidElement(optionPrefix)
-            ? react.cloneElement(optionPrefix, {
-                className: "mr-1 flex items-center",
-                size: "medium",
-            })
-            : optionPrefix, prefix: icon, selected: selected, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { color: "primary", name: "Check", size: fieldSize === "large" ? "medium" : "small" }) : undefined, children: optionContent }));
-};
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
- *
- * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
- * @returns {ReactElement} multi select menu item
  */
 const MultiSelectMenuItem = ({ label, onClick, selected, focused, "data-testid": dataTestId, disabled, optionLabelDescription, optionPrefix, optionContent, fieldSize, }) => {
     return (jsxRuntime.jsx(reactComponents.MenuItem, { "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: e => {
@@ -1996,6 +1979,18 @@ const MultiSelectMenuItem = ({ label, onClick, selected, focused, "data-testid":
             : optionPrefix, prefix: jsxRuntime.jsx(Checkbox, { checked: selected, className: "gap-x-0", disabled: disabled, onChange: () => null, readOnly: false }), selected: selected, children: optionContent }));
 };
 
+/**
+ * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
+ */
+const SingleSelectMenuItem = ({ label, icon, onClick, selected = false, focused = false, disabled = false, "data-testid": dataTestId, optionLabelDescription, optionPrefix, optionContent, fieldSize = "medium", }) => {
+    return (jsxRuntime.jsx(reactComponents.MenuItem, { "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, optionPrefix: react.isValidElement(optionPrefix)
+            ? react.cloneElement(optionPrefix, {
+                className: "mr-1 flex items-center",
+                size: "medium",
+            })
+            : optionPrefix, prefix: icon, selected: selected, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { color: "primary", name: "Check", size: fieldSize === "large" ? "medium" : "small" }) : undefined, children: optionContent }));
+};
+
 /**
  * Custom hook to measure the geometry of multiple elements indexed by number.
  * Similar to useMeasure but handles multiple elements efficiently with a single ResizeObserver.

package/index.esm.js

@@ -1963,25 +1963,8 @@ const Checkbox = ({ className, "data-testid": dataTestId = "checkbox", onChange,
 };
 Checkbox.displayName = "Checkbox";
 
-/**
- * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
- *
- * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
- * @returns {ReactElement} SingleSelectMenuItem
- */
-const SingleSelectMenuItem = ({ label, icon, onClick, selected = false, focused = false, disabled = false, "data-testid": dataTestId, optionLabelDescription, optionPrefix, optionContent, fieldSize = "medium", }) => {
-    return (jsx(MenuItem, { "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, optionPrefix: isValidElement(optionPrefix)
-            ? cloneElement(optionPrefix, {
-                className: "mr-1 flex items-center",
-                size: "medium",
-            })
-            : optionPrefix, prefix: icon, selected: selected, suffix: selected ? jsx(Icon, { color: "primary", name: "Check", size: fieldSize === "large" ? "medium" : "small" }) : undefined, children: optionContent }));
-};
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
- *
- * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
- * @returns {ReactElement} multi select menu item
  */
 const MultiSelectMenuItem = ({ label, onClick, selected, focused, "data-testid": dataTestId, disabled, optionLabelDescription, optionPrefix, optionContent, fieldSize, }) => {
     return (jsx(MenuItem, { "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: e => {
@@ -1995,6 +1978,18 @@ const MultiSelectMenuItem = ({ label, onClick, selected, focused, "data-testid":
             : optionPrefix, prefix: jsx(Checkbox, { checked: selected, className: "gap-x-0", disabled: disabled, onChange: () => null, readOnly: false }), selected: selected, children: optionContent }));
 };
 
+/**
+ * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
+ */
+const SingleSelectMenuItem = ({ label, icon, onClick, selected = false, focused = false, disabled = false, "data-testid": dataTestId, optionLabelDescription, optionPrefix, optionContent, fieldSize = "medium", }) => {
+    return (jsx(MenuItem, { "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, optionPrefix: isValidElement(optionPrefix)
+            ? cloneElement(optionPrefix, {
+                className: "mr-1 flex items-center",
+                size: "medium",
+            })
+            : optionPrefix, prefix: icon, selected: selected, suffix: selected ? jsx(Icon, { color: "primary", name: "Check", size: fieldSize === "large" ? "medium" : "small" }) : undefined, children: optionContent }));
+};
+
 /**
  * Custom hook to measure the geometry of multiple elements indexed by number.
  * Similar to useMeasure but handles multiple elements efficiently with a single ResizeObserver.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "2.1.60",
+  "version": "2.1.62",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -10,17 +10,17 @@
   "dependencies": {
     "react-calendar": "^6.0.0",
     "react-select": "^5.10.2",
-    "@trackunit/date-and-time-utils": "1.13.58",
+    "@trackunit/date-and-time-utils": "1.13.59",
     "usehooks-ts": "^3.1.0",
     "libphonenumber-js": "^1.13.6",
     "zod": "^3.25.76",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.13.55",
-    "@trackunit/react-components": "2.1.58",
-    "@trackunit/ui-icons": "1.13.56",
-    "@trackunit/shared-utils": "1.15.56",
-    "@trackunit/ui-design-tokens": "1.13.54",
-    "@trackunit/i18n-library-translation": "2.0.57",
+    "@trackunit/css-class-variance-utilities": "1.13.56",
+    "@trackunit/react-components": "2.1.59",
+    "@trackunit/ui-icons": "1.13.57",
+    "@trackunit/shared-utils": "1.15.57",
+    "@trackunit/ui-design-tokens": "1.13.55",
+    "@trackunit/i18n-library-translation": "2.0.58",
     "string-ts": "^2.0.0",
     "es-toolkit": "^1.39.10"
   },

package/src/components/BaseSelect/custom-components/SelectMenuItem/MultiSelectMenuItem.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+import { SelectMenuItemProps } from "./selectMenuItemTypes";
+/**
+ * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
+ */
+export declare const MultiSelectMenuItem: ({ label, onClick, selected, focused, "data-testid": dataTestId, disabled, optionLabelDescription, optionPrefix, optionContent, fieldSize, }: SelectMenuItemProps) => ReactElement;

package/src/components/BaseSelect/custom-components/SelectMenuItem/SelectMenuItem.d.ts

@@ -1,68 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
-import { MouseEventHandler, ReactElement, ReactNode } from "react";
-import { FormComponentSizes } from "../../../../types";
-interface SelectMenuItemProps extends CommonProps {
-    /**
-     * A string to render as an item label.
-     *
-     */
-    label: string;
-    /**
-     * A handler for click on element
-     */
-    onClick?: MouseEventHandler<HTMLDivElement>;
-    /**
-     * A boolean prop to set menu item to selected state
-     */
-    selected?: boolean;
-    /**
-     * A boolean prop to set menu item to focused state
-     */
-    focused?: boolean;
-    /**
-     * A boolean prop to set menu item to disabled state
-     * used in disabled select options
-     */
-    disabled?: boolean;
-    /**
-     * A value to be displayed after the label value itself
-     * Such as a description or a hint for the option
-     */
-    optionLabelDescription?: string;
-    /**
-     * A React element to render before the label value itself
-     * This is typically used to render an icon.
-     */
-    optionPrefix?: ReactNode;
-    /**
-     * Rich content to render in place of the default label/description layout.
-     * This keeps the surrounding menu item chrome while allowing custom content.
-     */
-    optionContent?: ReactNode;
-    /**
-     * The size of the selected item
-     */
-    fieldSize?: FormComponentSizes;
-}
-export interface SingleSelectMenuItemProps extends SelectMenuItemProps {
-    /**
-     * A React element to render before the text in the select.
-     * This is typically used to render an icon.
-     */
-    icon?: ReactElement;
-}
+import { ReactElement } from "react";
+import { SingleSelectMenuItemProps } from "./selectMenuItemTypes";
 /**
  * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
- *
- * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
- * @returns {ReactElement} SingleSelectMenuItem
  */
 export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, focused, disabled, "data-testid": dataTestId, optionLabelDescription, optionPrefix, optionContent, fieldSize, }: SingleSelectMenuItemProps) => ReactElement;
-/**
- * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
- *
- * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
- * @returns {ReactElement} multi select menu item
- */
-export declare const MultiSelectMenuItem: ({ label, onClick, selected, focused, "data-testid": dataTestId, disabled, optionLabelDescription, optionPrefix, optionContent, fieldSize, }: SelectMenuItemProps) => ReactElement;
-export {};

package/src/components/BaseSelect/custom-components/SelectMenuItem/selectMenuItemTypes.d.ts

@@ -0,0 +1,29 @@
+import { CommonProps } from "@trackunit/react-components";
+import { MouseEventHandler, ReactElement, ReactNode } from "react";
+import { FormComponentSizes } from "../../../../types";
+/** Props shared by select menu item renderers in BaseSelect. */
+export interface SelectMenuItemProps extends CommonProps {
+    /** A string to render as an item label. */
+    label: string;
+    /** A handler for click on element */
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    /** A boolean prop to set menu item to selected state */
+    selected?: boolean;
+    /** A boolean prop to set menu item to focused state */
+    focused?: boolean;
+    /** A boolean prop to set menu item to disabled state */
+    disabled?: boolean;
+    /** A value to be displayed after the label value itself */
+    optionLabelDescription?: string;
+    /** A React element to render before the label value itself */
+    optionPrefix?: ReactNode;
+    /** Rich content to render in place of the default label/description layout. */
+    optionContent?: ReactNode;
+    /** The size of the selected item */
+    fieldSize?: FormComponentSizes;
+}
+/** Props for a single-select menu item in BaseSelect. */
+export interface SingleSelectMenuItemProps extends SelectMenuItemProps {
+    /** A React element to render before the text in the select. */
+    icon?: ReactElement;
+}