@onewelcome/react-lib-components 8.9.0 → 8.10.0

package/src/components/miscellaneous/IdentityProviderButton.tsx

@@ -33,6 +33,7 @@ export interface Props extends Omit<ComponentPropsWithRef<"button">, "color"> {
   imgAltText?: string;
   idpType: string;
   customization?: SupportedCustomizationKeys;
+  loading?: boolean;
 }
 
 export const IdentityProviderButton: ForwardRefRenderFunction<HTMLButtonElement, Props> = ({
@@ -41,6 +42,7 @@ export const IdentityProviderButton: ForwardRefRenderFunction<HTMLButtonElement,
   imgAltText,
   idpType,
   customization,
+  loading,
   ...rest
 }) => {
   const DEFAULT_BACKGROUND_COLOR = "#FFFFFF";
@@ -70,13 +72,14 @@ export const IdentityProviderButton: ForwardRefRenderFunction<HTMLButtonElement,
       color="primary"
       variant="fill"
       className={classes["idp-button"]}
+      loading={loading}
       {...rest}
     >
       <span className={classes["idp-button--with-icon"]}>
         <img
           height={24}
           width={24}
-          src={iconUrl || `/ui-resources-static/common/icons/${idpType}.svg`}
+          src={iconUrl || `/ui-resources-static/common/idb/icons/${idpType}.svg`}
           alt={imgAltText || "Identity Provider icon"}
         />
         {children}

package/src/components/withReadOnly.tsx

@@ -30,7 +30,7 @@ const getDisplayName = <P,>(WrappedComponent: ComponentType<P>) => {
 };
 
 const getConditionalProps = (readOnlyView: boolean, type: string, helperText?: string) => {
-  const props: Record<string, any> = {};
+  const props: Record<string, unknown> = {};
 
   if (readOnlyView) {
     props.style = { pointerEvents: "none", userSelect: "text" };
@@ -64,7 +64,7 @@ export const withReadOnly = <P extends object>(WrappedComponent: ComponentType<P
         WrappedComponent.displayName || WrappedComponent.name
       )
     ) {
-      const props: Record<string, any> = {};
+      const props: Record<string, unknown> = {};
 
       props.onKeyUp = (e: KeyboardEvent) => {
         preventSubmissionKeys(e);
@@ -81,7 +81,7 @@ export const withReadOnly = <P extends object>(WrappedComponent: ComponentType<P
   };
 
   const WithReadOnlyComponent = React.forwardRef(
-    (props: PropsWithChildren<P & WithReadOnlyProps>, ref: ForwardedRef<any>) => {
+    (props: PropsWithChildren<P & WithReadOnlyProps>, ref: ForwardedRef<unknown>) => {
       const {
         readOnlyView = false,
         required,

package/src/hooks/useDebouncedCallback.tsx

@@ -16,10 +16,12 @@
 
 import React from "react";
 
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types */
 export const useDebouncedCallback = (callback: Function, delay: number, dependencies?: any[]) => {
   const timeout = React.useRef<ReturnType<typeof setTimeout>>();
   const comboDeps = dependencies ? [callback, delay, ...dependencies] : [callback, delay];
 
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   return React.useCallback((...args: any[]) => {
     if (timeout.current != null) {
       clearTimeout(timeout.current);

package/src/hooks/useRepeatFocus.tsx

@@ -51,15 +51,21 @@ export const useRepeatFocus = (ref: RefObject<HTMLDivElement>) => {
   };
 
   useEffect(() => {
-    if (!ref.current || !open) return;
+    if (!ref.current || !open) {
+      return;
+    }
 
     const lastFocusableElement = getFocusableElement(ref.current, "last");
     const firstFocusableElement = getFocusableElement(ref.current, "first");
 
-    if (!lastFocusableElement || !firstFocusableElement) return;
+    if (!lastFocusableElement || !firstFocusableElement) {
+      return;
+    }
 
     const handleTabKeyPress = (event: KeyboardEvent) => {
-      if (event.key !== "Tab") return;
+      if (event.key !== "Tab") {
+        return;
+      }
 
       if (event.shiftKey) {
         if (document.activeElement === firstFocusableElement) {

package/src/index.ts

@@ -15,7 +15,10 @@
  */
 
 /* Components */
-export { BaseStyling } from "./components/_BaseStyling_/BaseStyling";
+export {
+  BaseStyling,
+  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";
@@ -217,3 +220,9 @@ export type { Props as DatePickerProps } from "./components/DatePicker/DatePicke
 /** Admin */
 export { MicrofrontendContainer } from "./components/admin/layout/MicrofrontendContainer/MicrofrontendContainer";
 export type { Props as MicrofrontendContainerProps } from "./components/admin/layout/MicrofrontendContainer/MicrofrontendContainer";
+
+/**
+ * Miscellaneous
+ */
+export { IdentityProviderButton } from "./components/miscellaneous/IdentityProviderButton";
+export type { Props as IdentityProviderButtonProps } from "./components/miscellaneous/IdentityProviderButton";

package/src/mixins.module.scss

@@ -170,7 +170,7 @@
   border-style: var(--button-border-style);
   border-radius: var(--button-border-radius);
   font-size: var(--button-font-size);
-  line-height: var(--button-font-size);
+  line-height: 1;
   margin: 0;
   padding: 0.5rem 0.75rem;
   min-height: 2.5rem;

package/src/util/helper.tsx

@@ -14,11 +14,13 @@
  *    limitations under the License.
  */
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 type KeyValuePair = { [key: string]: unknown };
 
 export const generateID = (length = 15, stringToWeaveIn?: string) => {
   /** We will make sure to mesh the generate id and name property together to basically create a unique ID */
-  let hashCharacters = [
+  const hashCharacters = [
     "1",
     "2",
     "3",
@@ -87,7 +89,7 @@ export const generateID = (length = 15, stringToWeaveIn?: string) => {
 
   /** Generate an id of x characters in length */
   for (let i = 0; i < length && id.length < length; i++) {
-    let stringCharacter =
+    const stringCharacter =
       typeof stringToWeaveIn === "string" &&
       stringToWeaveIn?.[i] !== undefined &&
       !/\s/.test(stringToWeaveIn[i])
@@ -137,7 +139,7 @@ export const throttle = (fn: (...args: unknown[]) => unknown, delay: number) =>
   let lastTime = 0;
 
   return function () {
-    let now = Date.now();
+    const now = Date.now();
 
     if (now - lastTime >= delay) {
       fn();
@@ -146,7 +148,7 @@ export const throttle = (fn: (...args: unknown[]) => unknown, delay: number) =>
   };
 };
 
-export const isEqual = (x: any, y: any): boolean => {
+const isEqual = (x: any, y: any): boolean => {
   const typesCoincide = x && y && typeof x === "object" && typeof y === "object";
   return typesCoincide
     ? Object.keys(x).length === Object.keys(y).length &&
@@ -189,12 +191,14 @@ export const isJsonString = (str: any) => {
 
 type ObjectType = { [key: string]: any };
 
-export const deepMerge = <T extends {}>(obj1: ObjectType, obj2: ObjectType | false): T => {
-  if (!obj2) return obj1 as T;
+export const deepMerge = <T extends object>(obj1: ObjectType, obj2: ObjectType | false): T => {
+  if (!obj2) {
+    return obj1 as T;
+  }
 
-  let result: ObjectType = { ...obj1 };
+  const result: ObjectType = { ...obj1 };
 
-  for (let key in obj2) {
+  for (const key in obj2) {
     if (Object.prototype.hasOwnProperty.call(obj2, key)) {
       if (
         typeof obj2[key] === "object" &&