@trackunit/react-form-components 1.3.140 → 1.3.141

package/index.cjs.js

@@ -2005,8 +2005,8 @@ const cvaSelectMenu = cssClassVarianceUtilities.cvaMerge(["relative", "p-1", "gr
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {ReactElement} SingleSelectMenuItem
  */
-const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, disabled, optionLabelDescription, fieldSize, }) => {
-    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, prefix: icon, selected: selected, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : undefined }));
+const SingleSelectMenuItem = ({ label, icon, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, fieldSize, }) => {
+    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, prefix: icon, selected: selected, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : undefined }));
 };
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
@@ -2014,8 +2014,8 @@ const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, disa
  * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
  * @returns {ReactElement} multi select menu item
  */
-const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, disabled, optionLabelDescription, fieldSize, }) => {
-    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, label: label, onClick: e => {
+const MultiSelectMenuItem = ({ label, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, fieldSize, }) => {
+    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: e => {
             e.stopPropagation();
             onClick && onClick(e);
         }, optionLabelDescription: optionLabelDescription, prefix: jsxRuntime.jsx(Checkbox, { checked: selected, disabled: disabled, onChange: () => null, onClick: e => {
@@ -2486,7 +2486,7 @@ const ReactSyncSelect = ReactSelect.default || ReactSelect;
  * @returns {ReactElement} Select component
  */
 const Select = (props) => {
-    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = "select", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, fieldSize = "medium", openMenuOnClick = !disabled, openMenuOnFocus = !disabled, hideSelectedOptions = false, } = props;
+    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = "select", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, fieldSize = "medium", openMenuOnClick = !disabled, openMenuOnFocus = false, hideSelectedOptions = false, } = props;
     const { refContainer, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler } = useSelect(props);
     const reactSelectProps = react.useMemo(() => ({
         value,
@@ -2498,7 +2498,7 @@ const Select = (props) => {
         components: customComponents,
         styles: customStyles,
         tabSelectsValue: false,
-        blurInputOnSelect: !isMulti,
+        blurInputOnSelect: false,
         // This configuration allows for more flexible positioning control of the dropdown.
         // Setting menuPortalTarget to 'null' specifies that the dropdown should be rendered within
         // the parent element instead of 'document.body'.
@@ -2509,7 +2509,7 @@ const Select = (props) => {
         openMenuOnFocus,
         menuIsOpen: !readOnly ? menuIsOpen : false,
         openMenuOnClick,
-        closeMenuOnSelect: false,
+        closeMenuOnSelect: !isMulti,
         isMulti,
         classNamePrefix,
         isLoading,

package/index.esm.js

@@ -2004,8 +2004,8 @@ const cvaSelectMenu = cvaMerge(["relative", "p-1", "grid", "gap-1"]);
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {ReactElement} SingleSelectMenuItem
  */
-const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, disabled, optionLabelDescription, fieldSize, }) => {
-    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, prefix: icon, selected: selected, suffix: selected ? jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : undefined }));
+const SingleSelectMenuItem = ({ label, icon, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, fieldSize, }) => {
+    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: onClick, optionLabelDescription: optionLabelDescription, prefix: icon, selected: selected, suffix: selected ? jsx(Icon, { className: "block text-blue-600", name: "Check", size: "medium" }) : undefined }));
 };
 /**
  * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
@@ -2013,8 +2013,8 @@ const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, disa
  * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
  * @returns {ReactElement} multi select menu item
  */
-const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, disabled, optionLabelDescription, fieldSize, }) => {
-    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, label: label, onClick: e => {
+const MultiSelectMenuItem = ({ label, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, fieldSize, }) => {
+    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, focused: focused, label: label, onClick: e => {
             e.stopPropagation();
             onClick && onClick(e);
         }, optionLabelDescription: optionLabelDescription, prefix: jsx(Checkbox, { checked: selected, disabled: disabled, onChange: () => null, onClick: e => {
@@ -2485,7 +2485,7 @@ const ReactSyncSelect = ReactSelect.default || ReactSelect;
  * @returns {ReactElement} Select component
  */
 const Select = (props) => {
-    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = "select", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, fieldSize = "medium", openMenuOnClick = !disabled, openMenuOnFocus = !disabled, hideSelectedOptions = false, } = props;
+    const { id, dataTestId = "select", prefix, async, maxMenuHeight = 200, label, hasError, disabled, isMulti, menuPosition = "absolute", value, options, onChange, isLoading, classNamePrefix = "select", onMenuScrollToBottom, onInputChange, isSearchable, isClearable = false, readOnly, fieldSize = "medium", openMenuOnClick = !disabled, openMenuOnFocus = false, hideSelectedOptions = false, } = props;
     const { refContainer, customStyles, menuIsOpen, customComponents, menuPlacement, openMenuHandler, closeMenuHandler } = useSelect(props);
     const reactSelectProps = useMemo(() => ({
         value,
@@ -2497,7 +2497,7 @@ const Select = (props) => {
         components: customComponents,
         styles: customStyles,
         tabSelectsValue: false,
-        blurInputOnSelect: !isMulti,
+        blurInputOnSelect: false,
         // This configuration allows for more flexible positioning control of the dropdown.
         // Setting menuPortalTarget to 'null' specifies that the dropdown should be rendered within
         // the parent element instead of 'document.body'.
@@ -2508,7 +2508,7 @@ const Select = (props) => {
         openMenuOnFocus,
         menuIsOpen: !readOnly ? menuIsOpen : false,
         openMenuOnClick,
-        closeMenuOnSelect: false,
+        closeMenuOnSelect: !isMulti,
         isMulti,
         classNamePrefix,
         isLoading,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.3.140",
+  "version": "1.3.141",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -18,11 +18,11 @@
     "react-hook-form": "7.53.1",
     "tailwind-merge": "^2.0.0",
     "@trackunit/css-class-variance-utilities": "1.3.103",
-    "@trackunit/react-components": "1.4.124",
+    "@trackunit/react-components": "1.4.125",
     "@trackunit/ui-icons": "1.3.105",
     "@trackunit/shared-utils": "1.5.103",
     "@trackunit/ui-design-tokens": "1.3.103",
-    "@trackunit/i18n-library-translation": "1.3.114",
+    "@trackunit/i18n-library-translation": "1.3.116",
     "string-ts": "^2.0.0"
   },
   "module": "./index.esm.js",

package/src/components/Select/SelectMenuItem/SelectMenuItem.d.ts

@@ -3,18 +3,22 @@ import { MouseEventHandler, ReactElement } from "react";
 import { FormComponentSizes } from "../../../types";
 interface SelectMenuItemProps extends CommonProps {
     /**
-     * An string to render as a item label.
+     * A string to render as an item label.
      *
      */
     label: string;
     /**
-     * An handler for click on element
+     * 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
@@ -32,7 +36,7 @@ interface SelectMenuItemProps extends CommonProps {
 }
 export interface SingleSelectMenuItemProps extends SelectMenuItemProps {
     /**
-     * An React element to render before the text in the select.
+     * A React element to render before the text in the select.
      * This is typically used to render an icon.
      */
     icon?: ReactElement;
@@ -43,12 +47,12 @@ export interface SingleSelectMenuItemProps extends SelectMenuItemProps {
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {ReactElement} SingleSelectMenuItem
  */
-export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, dataTestId, disabled, optionLabelDescription, fieldSize, }: SingleSelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, fieldSize, }: SingleSelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * 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, dataTestId, disabled, optionLabelDescription, fieldSize, }: SelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelectMenuItem: ({ label, onClick, selected, focused, dataTestId, disabled, optionLabelDescription, fieldSize, }: SelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};