@onewelcome/react-lib-components 8.12.1 → 8.13.0

package/src/components/_BaseStyling_/BaseStyling.tsx

@@ -34,21 +34,23 @@ export interface CSSProperties {
   colorPrimary700?: string;
   colorPrimary900?: string;
   colorPrimary50?: string;
+  colorBlueGrey25?: string;
+  colorBlueGrey50?: string;
   colorBlueGrey100?: string;
   colorBlueGrey200?: string;
   colorBlueGrey300?: string;
   colorBlueGrey400?: string;
-  colorBlueGrey25?: string;
-  colorBlueGrey50?: string;
   colorBlueGrey500?: string;
   colorBlueGrey700?: string;
   colorBlueGrey800?: string;
   colorBlueGrey900?: string;
+  colorGreen50?: string;
   colorGreen100?: string;
   colorGreen200?: string;
   colorGreen500?: string;
   colorGreen600?: string;
   colorGreen700?: string;
+  colorOrange50?: string;
   colorOrange100?: string;
   colorOrange500?: string;
   colorOrange600?: string;
@@ -246,16 +248,18 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorBlueGrey700: "#383A4B",
     colorBlueGrey800: "#252733",
     colorBlueGrey900: "#131319",
+    colorGreen50: "#E8F3ED",
     colorGreen100: "#D1E6DA",
     colorGreen200: "#A2CDB4",
     colorGreen500: "#178244",
     colorGreen600: "#126836",
     colorGreen700: "#0E4E29",
+    colorOrange50: "#FCF2E6",
     colorOrange100: "#FFE0B2",
     colorOrange500: "#E07900",
     colorOrange600: "#B36100",
     colorOrange700: "#864900",
-    colorRed50: "#F9D2CC",
+    colorRed50: "#FCE9E6",
     colorRed100: "#FFCDD2",
     colorRed200: "#F3A599",
     colorRed500: "#E01E00",
@@ -341,16 +345,16 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     alertNeutralBackgroundColor: "var(--color-blue-grey50)",
     alertNeutralInvertedColor: "var(--color-blue-grey500)",
 
-    alertInfoBackgroundColor: "var(--color-primary100)",
+    alertInfoBackgroundColor: "var(--color-primary50)",
     alertInfoInvertedColor: "var(--color-primary500)",
 
-    alertSuccessBackgroundColor: "var(--color-green100)",
+    alertSuccessBackgroundColor: "var(--color-green50)",
     alertSuccessInvertedColor: "var(--color-green500)",
 
-    alertErrorBackgroundColor: "var(--color-red100)",
+    alertErrorBackgroundColor: "var(--color-red50)",
     alertErrorInvertedColor: "var(--color-red500)",
 
-    alertWarningBackgroundColor: "var(--color-orange100)",
+    alertWarningBackgroundColor: "var(--color-orange50)",
     alertWarningInvertedColor: "var(--color-orange500)",
 
     alertBorderWidth: "4px",

package/src/components/admin/layout/LeftNav/LeftNav.tsx

@@ -29,7 +29,7 @@ export interface Props extends ComponentPropsWithRef<"nav"> {
   isSideMenuOpen?: boolean;
   items: MenuItem[];
   navigate: (path: string) => void;
-  onItemClick: (path?: string, button?: boolean) => void;
+  onItemClick?: (path?: string, button?: boolean) => void;
   marginTop?: string;
 }
 

package/src/components/admin/layout/LeftNav/LeftNavItem/ButtonLeftNavItem.tsx

@@ -24,7 +24,6 @@ import React, {
   useState
 } from "react";
 import classes from "./LeftNavItem.module.scss";
-import { Link as RouterLink } from "react-router-dom";
 import { MenuItem } from "../LeftNav.interfaces";
 import { Icon, Icons } from "../../../../Icon/Icon";
 import { useKeyboardNavigation } from "./useKeyboardNavigation";
@@ -34,7 +33,7 @@ import { LeftNavItemProps } from "./LeftNavItem.interface";
 export interface Props extends HTMLProps<HTMLElement> {
   item: MenuItem;
   navigate: (path: string) => void;
-  onItemClick: (path?: string, button?: boolean) => void;
+  onItemClick?: (path?: string, button?: boolean) => void;
   refItems: UseRefItemsReturnType;
   NestedComponent: ForwardRefExoticComponent<LeftNavItemProps>;
   closeParentList?: () => void;
@@ -55,10 +54,14 @@ const ButtonLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> =
     if (!isChevronIcon && item.path && !item.disabled) {
       event.preventDefault();
       navigate(item.path);
-      onItemClick(item.path, true);
+      onItemClick?.(item.path, true);
     }
   };
 
+  const onLinkClickHandler = (event: MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+  };
+
   const onExpandIconClickHandler = () => {
     setExpanded(expanded => !expanded);
   };
@@ -93,7 +96,7 @@ const ButtonLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> =
     <li className={buttonWrapperClasses.join(" ")} data-testid={item.key}>
       <button
         aria-controls={item.key}
-        data-testid={`tab-btn-${item.key}`}
+        data-testid={`left-nav-item-${item.key}`}
         aria-expanded={expanded}
         ref={ref as Ref<HTMLButtonElement>}
         onKeyDown={onKeyPressNavigation}
@@ -106,14 +109,15 @@ const ButtonLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> =
           {item.iconComponent &&
             React.cloneElement(item.iconComponent, { className: classes["menu-item-icon"] })}
           {item.path ? (
-            <RouterLink
-              to={item.path}
+            <a
+              href={item.path}
               aria-current={item.active ? "page" : false}
               className={classes["menu-item-text"]}
+              onClick={onLinkClickHandler}
               tabIndex={-1}
             >
               {item.title}
-            </RouterLink>
+            </a>
           ) : (
             <span className={classes["menu-item-text"]}>{item.title}</span>
           )}

package/src/components/admin/layout/LeftNav/LeftNavItem/LeftNavItem.interface.ts

@@ -21,7 +21,7 @@ import { UseRefItemsReturnType } from "../useRefItems";
 export interface LeftNavItemProps extends HTMLProps<HTMLElement> {
   item: MenuItem;
   navigate: (path: string) => void;
-  onItemClick: (path?: string, button?: boolean) => void;
+  onItemClick?: (path?: string, button?: boolean) => void;
   refItems: UseRefItemsReturnType;
   closeParentList?: () => void;
 }

package/src/components/admin/layout/LeftNav/LeftNavItem/LinkLeftNavItem.tsx

@@ -16,7 +16,6 @@
 
 import React, { ForwardRefRenderFunction, HTMLProps, MouseEvent, Ref } from "react";
 import classes from "./LeftNavItem.module.scss";
-import { Link as RouterLink } from "react-router-dom";
 import { MenuItem } from "../LeftNav.interfaces";
 import { Link } from "../../../../Link/Link";
 import { useKeyboardNavigation } from "./useKeyboardNavigation";
@@ -24,22 +23,23 @@ import { UseRefItemsReturnType } from "../useRefItems";
 
 export interface Props extends HTMLProps<HTMLElement> {
   item: MenuItem;
-  onItemClick: (path?: string, button?: boolean) => void;
+  navigate: (path: string) => void;
+  onItemClick?: (path?: string, button?: boolean) => void;
   refItems: UseRefItemsReturnType;
   closeParentList?: () => void;
 }
 
 const LinkLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
-  { item, onItemClick, refItems, closeParentList },
+  { item, onItemClick, refItems, closeParentList, navigate },
   ref
 ) => {
   const { onKeyPressNavigation } = useKeyboardNavigation({ refItems, item, closeParentList });
 
   const onLinkClickHandler = (event: MouseEvent<HTMLAnchorElement>) => {
-    if (item.disabled) {
-      event.preventDefault();
-    } else {
-      onItemClick(item.path);
+    event.preventDefault();
+    if (!item.disabled) {
+      onItemClick?.(item.path);
+      item.path && navigate(item.path);
     }
   };
 
@@ -65,7 +65,7 @@ const LinkLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
           ref={ref as Ref<HTMLAnchorElement>}
           onKeyDown={onKeyPressNavigation}
           onClick={onLinkClickHandler}
-          data-testid={item.key}
+          data-testid={`left-nav-item-${item.key}`}
           aria-current={item.active ? "page" : false}
           aria-disabled={item.disabled}
           className={menuItemLinkClasses.join(" ")}
@@ -81,14 +81,15 @@ const LinkLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
           </div>
         </Link>
       ) : (
-        <RouterLink
+        <a
           ref={ref as Ref<HTMLAnchorElement>}
           onKeyDown={onKeyPressNavigation}
           onClick={onLinkClickHandler}
+          data-testid={`left-nav-item-${item.key}`}
           aria-current={item.active ? "page" : false}
           aria-disabled={item.disabled}
           className={menuItemLinkClasses.join(" ")}
-          to={item.path ?? ""}
+          href={item.path ?? ""}
           tabIndex={tabIndex}
         >
           <div className={classes["menu-item-text-wrapper"]}>
@@ -96,7 +97,7 @@ const LinkLeftNavItemComponent: ForwardRefRenderFunction<HTMLElement, Props> = (
               React.cloneElement(item.iconComponent, { className: classes["menu-item-icon"] })}
             <span className={classes["menu-item-text"]}>{item.title}</span>
           </div>
-        </RouterLink>
+        </a>
       )}
     </li>
   );

package/src/components/miscellaneous/IdentityProviderButton.tsx

@@ -79,6 +79,7 @@ export const IdentityProviderButton: ForwardRefRenderFunction<HTMLButtonElement,
         <img
           height={24}
           width={24}
+          aria-hidden={!imgAltText}
           src={iconUrl || `/ui-resources-static/common/idb/icons/${idpType}.svg`}
           alt={imgAltText || "Identity Provider icon"}
         />

package/src/components/withReadOnly.tsx

@@ -48,7 +48,16 @@ const getConditionalProps = (readOnlyView: boolean, type: string, helperText?: s
   return props;
 };
 
-export const withReadOnly = <P extends object>(WrappedComponent: ComponentType<P>) => {
+type WithReadOnlyOptions = {
+  isWrapperComponent: boolean;
+};
+
+export const withReadOnly = <P extends object>(
+  WrappedComponent: ComponentType<P>,
+  options?: WithReadOnlyOptions
+) => {
+  const { isWrapperComponent } = options || {};
+
   const preventKeyUpAndKeyDownHandlerForSpecificComponents = (readOnlyView: boolean) => {
     const preventSubmissionKeys = (e: KeyboardEvent) => {
       const isEnterOrSpace = (e: KeyboardEvent) => e.key === "Enter" || e.key === " ";
@@ -96,7 +105,7 @@ export const withReadOnly = <P extends object>(WrappedComponent: ComponentType<P
           ref={ref}
           {...(restProps as P)}
           data-readonlyview={readOnlyView}
-          aria-readonly={readOnlyView}
+          aria-readonly={isWrapperComponent ? undefined : readOnlyView}
           required={readOnlyView ? false : required}
           {...getConditionalProps(readOnlyView, type, helperText)}
           {...preventKeyUpAndKeyDownHandlerForSpecificComponents(readOnlyView)}

package/src/index.ts

@@ -15,11 +15,11 @@
  */
 
 /* Components */
-export {
-  BaseStyling,
+export { BaseStyling } from "./components/_BaseStyling_/BaseStyling";
+export type {
+  Props as BaseStylingProps,
   CSSProperties as BaseStylingCSSProperties
 } from "./components/_BaseStyling_/BaseStyling";
-export type { Props as BaseStylingProps } from "./components/_BaseStyling_/BaseStyling";
 export { Button } from "./components/Button/Button";
 export type { Props as ButtonProps } from "./components/Button/Button";
 export { Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs";
@@ -89,10 +89,8 @@ export { Modal } from "./components/Notifications/Modal/Modal";
 export type { Props as ModalProps } from "./components/Notifications/Modal/Modal";
 export { useAlert } from "./components/Notifications/Alert/useAlert";
 export { AlertProvider } from "./components/Notifications/Alert/AlertProvider/AlertProvider";
-export {
-  AlertItem,
-  Props as AlertItemProps
-} from "./components/Notifications/Alert/AlertItem/AlertItem";
+export { AlertItem } from "./components/Notifications/Alert/AlertItem/AlertItem";
+export type { Props as AlertItemProps } from "./components/Notifications/Alert/AlertItem/AlertItem";
 export type { Props as AlertProviderProps } from "./components/Notifications/Alert/AlertProvider/AlertProvider";
 export { Dialog } from "./components/Notifications/Dialog/Dialog";
 export type {
@@ -205,7 +203,7 @@ export { DataGridDrawerItem } from "./components/DataGrid/DataGridBody/DataGridD
 export type { Props as DataGridDrawerItemProps } from "./components/DataGrid/DataGridBody/DataGridDrawer/DataGridDrawerItem";
 export { DataGridCell } from "./components/DataGrid/DataGridBody/DataGridCell/DataGridCell";
 export type { Props as DataGridCellProps } from "./components/DataGrid/DataGridBody/DataGridCell/DataGridCell";
-export { Filter } from "./components/DataGrid/DataGridFilters/DataGridFilters.interfaces";
+export type { Filter } from "./components/DataGrid/DataGridFilters/DataGridFilters.interfaces";
 export { FilterKeyMapper } from "./components/DataGrid/DataGridFilters/FilterKeyMapper";
 export { useFiltersReducer } from "./components/DataGrid/DataGridFilters/useFiltersReducer";
 
@@ -222,6 +220,7 @@ export { MicrofrontendContainer } from "./components/admin/layout/MicrofrontendC
 export type { Props as MicrofrontendContainerProps } from "./components/admin/layout/MicrofrontendContainer/MicrofrontendContainer";
 export { LeftNav } from "./components/admin/layout/LeftNav/LeftNav";
 export type { Props as LeftNavProps } from "./components/admin/layout/LeftNav/LeftNav";
+export type { MenuItem as LeftNavMenuItem } from "./components/admin/layout/LeftNav/LeftNav.interfaces";
 
 /**
  * Miscellaneous

package/dist/cjs/node_modules/@remix-run/router/dist/router.cjs.js

@@ -1,12 +0,0 @@
-"use strict";
-/**
- * @remix-run/router v1.17.1
- *
- * Copyright (c) Remix Software Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */function e(){return e=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},e.apply(this,arguments)}var t,a;function r(e,t){if(!1===e||null==e)throw new Error(t)}function n(e,t){if(!e){"undefined"!=typeof console&&console.warn(t);try{throw new Error(t)}catch(e){}}}function s(e){let t={};if(e){let a=e.indexOf("#");a>=0&&(t.hash=e.substr(a),e=e.substr(0,a));let r=e.indexOf("?");r>=0&&(t.search=e.substr(r),e=e.substr(0,r)),e&&(t.pathname=e)}return t}function i(e,t){void 0===t&&(t="/");let{pathname:a,search:r="",hash:n=""}="string"==typeof e?s(e):e,i=a?a.startsWith("/")?a:function(e,t){let a=t.replace(/\/+$/,"").split("/");return e.split("/").forEach((e=>{".."===e?a.length>1&&a.pop():"."!==e&&a.push(e)})),a.length>1?a.join("/"):"/"}(a,t):t;return{pathname:i,search:o(r),hash:l(n)}}function h(e,t,a,r){return"Cannot include a '"+e+"' character in a manually specified `to."+t+"` field ["+JSON.stringify(r)+"].  Please separate it out to the `to."+a+'` field. Alternatively you may provide the full path as a string in <Link to="..."> and the router will parse it for you.'}exports.Action=void 0,(t=exports.Action||(exports.Action={})).Pop="POP",t.Push="PUSH",t.Replace="REPLACE",function(e){e.data="data",e.deferred="deferred",e.redirect="redirect",e.error="error"}(a||(a={}));const o=e=>e&&"?"!==e?e.startsWith("?")?e:"?"+e:"",l=e=>e&&"#"!==e?e.startsWith("#")?e:"#"+e:"",p=["post","put","patch","delete"];new Set(p);const c=["get",...p];new Set(c),exports.UNSAFE_getResolveToMatches=function(e,t){let a=function(e){return e.filter(((e,t)=>0===t||e.route.path&&e.route.path.length>0))}(e);return t?a.map(((e,t)=>t===a.length-1?e.pathname:e.pathnameBase)):a.map((e=>e.pathnameBase))},exports.UNSAFE_invariant=r,exports.UNSAFE_warning=n,exports.createPath=function(e){let{pathname:t="/",search:a="",hash:r=""}=e;return a&&"?"!==a&&(t+="?"===a.charAt(0)?a:"?"+a),r&&"#"!==r&&(t+="#"===r.charAt(0)?r:"#"+r),t},exports.joinPaths=e=>e.join("/").replace(/\/\/+/g,"/"),exports.matchPath=function(e,t){"string"==typeof e&&(e={path:e,caseSensitive:!1,end:!0});let[a,r]=function(e,t,a){void 0===t&&(t=!1);void 0===a&&(a=!0);n("*"===e||!e.endsWith("*")||e.endsWith("/*"),'Route path "'+e+'" will be treated as if it were "'+e.replace(/\*$/,"/*")+'" because the `*` character must always follow a `/` in the pattern. To get rid of this warning, please change the route path to "'+e.replace(/\*$/,"/*")+'".');let r=[],s="^"+e.replace(/\/*\*?$/,"").replace(/^\/*/,"/").replace(/[\\.*+^${}|()[\]]/g,"\\$&").replace(/\/:([\w-]+)(\?)?/g,((e,t,a)=>(r.push({paramName:t,isOptional:null!=a}),a?"/?([^\\/]+)?":"/([^\\/]+)")));e.endsWith("*")?(r.push({paramName:"*"}),s+="*"===e||"/*"===e?"(.*)$":"(?:\\/(.+)|\\/*)$"):a?s+="\\/*$":""!==e&&"/"!==e&&(s+="(?:(?=\\/|$))");let i=new RegExp(s,t?void 0:"i");return[i,r]}(e.path,e.caseSensitive,e.end),s=t.match(a);if(!s)return null;let i=s[0],h=i.replace(/(.)\/+$/,"$1"),o=s.slice(1);return{params:r.reduce(((e,t,a)=>{let{paramName:r,isOptional:n}=t;if("*"===r){let e=o[a]||"";h=i.slice(0,i.length-e.length).replace(/(.)\/+$/,"$1")}const s=o[a];return e[r]=n&&!s?void 0:(s||"").replace(/%2F/g,"/"),e}),{}),pathname:i,pathnameBase:h,pattern:e}},exports.parsePath=s,exports.resolvePath=i,exports.resolveTo=function(t,a,n,o){let l;void 0===o&&(o=!1),"string"==typeof t?l=s(t):(l=e({},t),r(!l.pathname||!l.pathname.includes("?"),h("?","pathname","search",l)),r(!l.pathname||!l.pathname.includes("#"),h("#","pathname","hash",l)),r(!l.search||!l.search.includes("#"),h("#","search","hash",l)));let p,c=""===t||""===l.pathname,u=c?"/":l.pathname;if(null==u)p=n;else{let e=a.length-1;if(!o&&u.startsWith("..")){let t=u.split("/");for(;".."===t[0];)t.shift(),e-=1;l.pathname=t.join("/")}p=e>=0?a[e]:"/"}let f=i(l,p),d=u&&"/"!==u&&u.endsWith("/"),m=(c||"."===u)&&n.endsWith("/");return f.pathname.endsWith("/")||!d&&!m||(f.pathname+="/"),f},exports.stripBasename=function(e,t){if("/"===t)return e;if(!e.toLowerCase().startsWith(t.toLowerCase()))return null;let a=t.endsWith("/")?t.length-1:t.length,r=e.charAt(a);return r&&"/"!==r?null:e.slice(a)||"/"};
-//# sourceMappingURL=router.cjs.js.map