@trackunit/react-form-components 0.1.3 → 0.1.5

package/index.cjs.js

@@ -1364,6 +1364,7 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
     "box-border",
     "hover:cursor-pointer",
     "hover:bg-slate-100",
+    "focus-visible:outline-primary-700",
 ], {
     variants: {
         checked: {
@@ -1821,8 +1822,8 @@ const getOrderedOptions = (options, value) => {
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {JSX.Element} SingleSelectMenuItem
  */
-const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, focused, disabled, }) => {
-    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, focused: focused, label: label, onClick: onClick, prefix: icon, selected: selected, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { name: "Check", size: "small" }) : undefined }));
+const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, focusRing, disabled, }) => {
+    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, focusRing: focusRing, label: label, onClick: onClick, prefix: icon, selected: selected, suffix: selected ? jsxRuntime.jsx(reactComponents.Icon, { name: "Check", size: "small" }) : 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
@@ -1830,8 +1831,8 @@ const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, focu
  * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
  * @returns {JSX.Element} multi select menu item
  */
-const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, focused, disabled, }) => {
-    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, focused: focused, label: label, onClick: e => {
+const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, focusRing, disabled, }) => {
+    return (jsxRuntime.jsx(reactComponents.MenuItem, { dataTestId: dataTestId, disabled: disabled, focusRing: focusRing, label: label, onClick: e => {
             e.stopPropagation();
             onClick && onClick(e);
         }, prefix: jsxRuntime.jsx(Checkbox, { checked: selected, disabled: disabled, onChange: () => null, onClick: e => {

package/index.esm.js

@@ -1345,6 +1345,7 @@ const cvaRadioItem = cvaMerge([
     "box-border",
     "hover:cursor-pointer",
     "hover:bg-slate-100",
+    "focus-visible:outline-primary-700",
 ], {
     variants: {
         checked: {
@@ -1802,8 +1803,8 @@ const getOrderedOptions = (options, value) => {
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {JSX.Element} SingleSelectMenuItem
  */
-const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, focused, disabled, }) => {
-    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, focused: focused, label: label, onClick: onClick, prefix: icon, selected: selected, suffix: selected ? jsx(Icon, { name: "Check", size: "small" }) : undefined }));
+const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, focusRing, disabled, }) => {
+    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, focusRing: focusRing, label: label, onClick: onClick, prefix: icon, selected: selected, suffix: selected ? jsx(Icon, { name: "Check", size: "small" }) : 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
@@ -1811,8 +1812,8 @@ const SingleSelectMenuItem = ({ label, icon, onClick, selected, dataTestId, focu
  * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
  * @returns {JSX.Element} multi select menu item
  */
-const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, focused, disabled, }) => {
-    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, focused: focused, label: label, onClick: e => {
+const MultiSelectMenuItem = ({ label, onClick, selected, dataTestId, focusRing, disabled, }) => {
+    return (jsx(MenuItem, { dataTestId: dataTestId, disabled: disabled, focusRing: focusRing, label: label, onClick: e => {
             e.stopPropagation();
             onClick && onClick(e);
         }, prefix: jsx(Checkbox, { checked: selected, disabled: disabled, onChange: () => null, onClick: e => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

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

@@ -15,10 +15,10 @@ interface SelectMenuItemProps extends CommonProps {
      */
     selected?: boolean;
     /**
-     * A boolean prop to set menu item to focused state
+     * A boolean prop to allow menu item to have focus ring
      * used for keyboard navigation
      */
-    focused?: boolean;
+    focusRing?: boolean;
     /**
      * A boolean prop to set menu item to disabled state
      * used in disabled select options
@@ -38,12 +38,12 @@ export interface SingleSelectMenuItemProps extends SelectMenuItemProps {
  * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
  * @returns {JSX.Element} SingleSelectMenuItem
  */
-export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, dataTestId, focused, disabled, }: SingleSelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, dataTestId, focusRing, disabled, }: 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 {JSX.Element} multi select menu item
  */
-export declare const MultiSelectMenuItem: ({ label, onClick, selected, dataTestId, focused, disabled, }: SelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelectMenuItem: ({ label, onClick, selected, dataTestId, focusRing, disabled, }: SelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};