@onewelcome/react-lib-components 2.2.0 → 3.0.0

package/dist/esm/src/components/Notifications/NotificationProvider/NotificationContext.d.ts

@@ -0,0 +1,35 @@
+import React, { ReactNode } from "react";
+import { Notification, ErrorNotification, SuccessNotification, Translations, AddNotification } from "./notification.interfaces";
+import { DeepPartial } from "../../../interfaces";
+interface NotificationState {
+    notifications: Notification<ErrorNotification | SuccessNotification>[];
+}
+export interface NotificationAction {
+    type: "add" | "remove" | "handled" | "reset";
+    payload?: Notification<ErrorNotification | SuccessNotification> & {
+        id?: string;
+        handled?: boolean;
+    };
+}
+export interface NotificationHandlerProps {
+    translations?: DeepPartial<Translations>;
+    dispatchFn: React.Dispatch<NotificationAction>;
+}
+export declare const NotificationHandler: ({ translations, dispatchFn }: NotificationHandlerProps) => null;
+export declare const NotificationContext: React.Context<{
+    state: NotificationState;
+    dispatch: React.Dispatch<NotificationAction>;
+}>;
+export interface Props {
+    children?: ReactNode;
+    translations?: DeepPartial<Translations>;
+}
+export declare const NotificationProvider: ({ children, translations }: Props) => React.JSX.Element;
+export declare const useNotificationContext: () => {
+    state: NotificationState;
+    addNotification: (notification: AddNotification) => void;
+    removeNotification: (id: string) => void;
+    resetNotifications: () => void;
+};
+export declare const notificationReducer: (state: NotificationState, action: NotificationAction) => NotificationState;
+export {};

package/dist/esm/src/components/Notifications/NotificationProvider/NotificationService.d.ts

@@ -0,0 +1,2 @@
+import { Translations } from "./notification.interfaces";
+export declare const defaultTranslations: Translations;

package/dist/esm/src/components/Notifications/NotificationProvider/notification.interfaces.d.ts

@@ -0,0 +1,46 @@
+export interface ErrorNotification extends NotificationType {
+    response?: string;
+    type: "error";
+}
+export interface SuccessNotification extends NotificationType {
+    response?: string;
+    type: "success";
+}
+interface NotificationType {
+    type: "error" | "success";
+    status: HttpStatuses;
+}
+export type HttpStatuses = 200 | 500 | 400 | 401 | 403 | 404 | 501 | 502 | 503 | 504;
+export interface AddNotification {
+    type: "error" | "success";
+    status: HttpStatuses;
+    title?: string;
+    message?: string;
+}
+export interface RemoveNotification {
+    id: string;
+}
+export interface Notification<T extends NotificationType> {
+    id?: string;
+    type?: T["type"];
+    status?: HttpStatuses;
+    title?: string;
+    message?: string;
+    handled?: boolean;
+}
+export interface Translations {
+    general: {
+        error: string;
+        success: string;
+    };
+    messages: {
+        general: string;
+        badRequest: string;
+        unauthorized: string;
+        forbidden: string;
+        notFound: string;
+        timeout: string;
+        unavailable: string;
+    };
+}
+export {};

package/dist/{cjs → esm/src}/components/Notifications/Snackbar/SnackbarItem/SnackbarItem.d.ts

@@ -2,12 +2,13 @@ import React from "react";
 import { Variant, Actions } from "../interfaces";
 export interface Props {
     id: string;
-    title: string;
+    title?: string;
     duration: number;
     variant: Variant;
+    className?: string;
     onClose: (key: string) => void;
     closeButtonTitle: string;
     content?: string;
     actions?: Actions;
 }
-export declare const SnackbarItem: ({ id, title, duration, variant, content, actions, onClose, closeButtonTitle }: Props) => React.JSX.Element;
+export declare const SnackbarItem: ({ id, title, duration, variant, content, className, actions, onClose, closeButtonTitle }: Props) => React.JSX.Element;

package/dist/{cjs → esm/src}/components/Notifications/Snackbar/SnackbarProvider/SnackbarProvider.d.ts

@@ -17,8 +17,9 @@ export interface Props {
 }
 export interface Item {
     id: string;
-    title: string;
+    title?: string;
     duration: number;
+    className?: string;
     height: number;
     variant: Variant;
     content?: string;

package/dist/esm/{components → src/components}/Notifications/Snackbar/SnackbarProvider/SnackbarStateProvider.d.ts

@@ -2,9 +2,10 @@ import React from "react";
 import { SnackbarOptionsProps } from "../interfaces";
 import { Item } from "./SnackbarProvider";
 interface SnackbarContextProps {
-    enqueueSnackbar: (title: string, content?: string, options?: SnackbarOptionsProps) => void;
-    enqueueSuccessSnackbar: (title: string, content?: string, options?: SnackbarOptionsProps) => void;
-    enqueueErrorSnackbar: (title: string, content?: string, options?: SnackbarOptionsProps) => void;
+    enqueueSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
+    enqueueSuccessSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
+    enqueueWarningSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
+    enqueueErrorSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
     setSnackbarHeight: (id: string, height: number) => void;
     snackbars: Item[];
 }

package/dist/{cjs → esm/src}/components/Notifications/Snackbar/interfaces.d.ts

@@ -1,10 +1,11 @@
 import { ButtonHTMLAttributes } from "react";
-export type Variant = "info" | "success" | "error";
+export type Variant = "info" | "success" | "error" | "warning";
 export type Actions = (ButtonHTMLAttributes<HTMLButtonElement> & {
     label: string;
 })[];
 export interface SnackbarOptionsProps {
     actions?: Actions;
+    className?: string;
     variant?: Variant;
     duration?: number;
     onClose?: () => void;

package/dist/esm/src/components/Notifications/Snackbar/useSnackbar.d.ts

@@ -0,0 +1,6 @@
+export declare const useSnackbar: () => {
+    enqueueWarningSnackbar: (title?: string | undefined, content?: string | undefined, options?: import("./interfaces").SnackbarOptionsProps | undefined) => void;
+    enqueueErrorSnackbar: (title?: string | undefined, content?: string | undefined, options?: import("./interfaces").SnackbarOptionsProps | undefined) => void;
+    enqueueSuccessSnackbar: (title?: string | undefined, content?: string | undefined, options?: import("./interfaces").SnackbarOptionsProps | undefined) => void;
+    enqueueSnackbar: (title?: string | undefined, content?: string | undefined, options?: import("./interfaces").SnackbarOptionsProps | undefined) => void;
+};

package/dist/{cjs → esm/src}/components/Pagination/Pagination.d.ts

@@ -9,7 +9,7 @@ export type PaginationTranslations = {
 export type PageChangeLabels = "next" | "previous" | "first" | "last";
 export type PageSize = 10 | 25 | 50;
 export interface Props extends Omit<ComponentPropsWithRef<"div">, "translate"> {
-    currentPage?: number;
+    currentPage: number;
     totalElements?: number;
     pageSize?: PageSize;
     translate?: PaginationTranslations;

package/dist/esm/{components → src/components}/ProgressBar/ProgressBar.d.ts

@@ -1,6 +1,9 @@
 import React, { ComponentPropsWithRef } from "react";
 export interface Props extends Omit<ComponentPropsWithRef<"span">, "children"> {
-    placeholderText: string;
+    label?: string;
+    caption?: string;
     completed?: number;
+    percentage?: number;
+    accessibilityTitle?: string;
 }
 export declare const ProgressBar: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/esm/src/components/Tag/Tag.d.ts

@@ -0,0 +1,10 @@
+import React, { HTMLAttributes } from "react";
+import { Icons } from "../Icon/Icon";
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+    variant?: "enabled" | "disabled";
+    icon?: Icons;
+    backgroundColor?: string;
+    color?: string;
+    children?: string;
+}
+export declare const Tag: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;

package/dist/{cjs → esm/src}/components/Tooltip/Tooltip.d.ts

@@ -1,11 +1,11 @@
 import React, { ComponentPropsWithRef, ReactNode } from "react";
-import { Offset, Placement } from "../../hooks/usePosition";
 export interface Props extends ComponentPropsWithRef<"div"> {
-    label: string | ReactNode;
+    label: ReactNode;
+    title?: string;
     children: string;
-    placement?: Placement;
-    offset?: Offset;
-    transformOrigin?: Placement;
     domRoot?: HTMLElement;
+    location?: "left" | "right" | "top" | "bottom";
+    color?: "black" | "blue";
+    position?: "start" | "center" | "end";
 }
 export declare const Tooltip: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/{components → src/components}/Typography/Typography.d.ts

@@ -8,6 +8,7 @@ export interface Props extends ComponentPropsWithRef<any> {
     variant: Variant;
     tag?: Tags;
     spacing?: Spacing;
+    align?: "left" | "center" | "right";
 }
 export declare const Typography: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<any>>;
 export {};

package/dist/esm/src/components/Wizard/WizardActions/WizardActions.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { Props as ButtonProps } from "../../Button/Button";
+export interface Props extends React.HTMLProps<HTMLDivElement> {
+    actions: {
+        cancel: {
+            label?: string;
+            hide?: boolean;
+            onClick?: () => void;
+            cancelButtonProps?: ButtonProps;
+        };
+        previous: {
+            label: string;
+            onClick: () => void;
+            previousButtonProps?: ButtonProps;
+        };
+        next: {
+            label: string;
+            onClick: (currentStepNo: number) => boolean;
+            nextButtonProps?: ButtonProps;
+        };
+        saveAndClose: {
+            label: string;
+            onClick: (currentStepNo: number) => void;
+            saveAndCloseButtonProps?: ButtonProps;
+        };
+    };
+}
+export declare const WizardActions: ({ actions }: Props) => React.JSX.Element;

package/dist/esm/{components → src/components}/_BaseStyling_/BaseStyling.d.ts

@@ -23,6 +23,7 @@ interface CSSProperties {
     colorBlueGrey700?: string;
     colorBlueGrey800?: string;
     colorBlueGrey900?: string;
+    colorGreen100?: string;
     colorGreen500?: string;
     colorGreen600?: string;
     colorGreen700?: string;
@@ -37,8 +38,8 @@ interface CSSProperties {
     colorRed600?: string;
     colorRed700?: string;
     colorBlack100?: string;
-    colorBlack10?: string;
     colorBlack20?: string;
+    colorBlack10?: string;
     defaultLineHeight?: string;
     buttonBorderRadius?: string;
     buttonBorderWidth?: string;
@@ -71,19 +72,23 @@ interface CSSProperties {
     inputBorderWidth?: string;
     inputBorderWidthFocus?: string;
     inputBorderStyle?: string;
+    inputBorderColor?: string;
     inputBackgroundColor?: string;
+    inputHelperTextColor?: string;
+    inputHoverBackgroundColor?: string;
+    inputDisabledBackgroundColor?: string;
     dragBackgroundColor?: string;
     dragBorderStyle?: string;
     modalShadowColor?: string;
     modalBackgroundColor?: string;
     modalBackdropColor?: string;
-    modalHeaderBackgroundColor?: string;
     skeletonBackgroundColor?: string;
     skeletonAnimationColorRgb?: string;
     snackbarTextColor?: string;
     snackbarInfoBackgroundColor?: string;
     snackbarSuccessBackgroundColor?: string;
     snackbarErrorBackgroundColor?: string;
+    snackbarWarningBackgroundColor?: string;
     snackbarBorderRadius?: string;
     bannerBorderRadius?: string;
     bannerBorderWidth?: string;

package/dist/esm/src/hooks/useDetermineStatusIcon.esm.js

@@ -1,2 +1,2 @@
-import r,{useRef as e}from"react";import{Icon as t,Icons as c}from"../../Icon/Icon.esm.js";const o=o=>{const{error:n,success:s}=o||!1;let a=null;const l=e(null),u=e(null);return n?a=r.createElement(t,{ref:l,"data-icon-status":"error",icon:c.Error}):s&&(a=r.createElement(t,{ref:u,"data-icon-status":"success",icon:c.CheckmarkCircleBreakout})),a};export{o as useDetermineStatusIcon};
+import r,{useRef as e}from"react";import{Icon as t,Icons as c}from"../../Icon/Icon.esm.js";const o=o=>{const{error:n,success:s}=o||!1;let l=null;const a=e(null),m=e(null);return n?l=r.createElement(t,{ref:a,"data-icon-status":"error",icon:c.Error}):s&&(l=r.createElement(t,{ref:m,"data-icon-status":"success",icon:c.CheckmarkCircleAlt})),l};export{o as useDetermineStatusIcon};
 //# sourceMappingURL=useDetermineStatusIcon.esm.js.map

package/dist/esm/{hooks → src/hooks}/usePosition.d.ts

@@ -33,5 +33,6 @@ export declare const usePosition: (providedConfigObject?: ConfigObject) => {
     left: PositionType;
     right: PositionType;
     calculatePosition: (...args: any[]) => void;
+    initialCalculationDone: boolean;
 };
 export {};

package/dist/esm/src/hooks/usePosition.esm.js

@@ -1,2 +1,2 @@
-import{useState as t}from"react";import{useDebouncedCallback as o}from"./useDebouncedCallback.esm.js";const e={relativeElement:void 0,elementToBePositioned:void 0,transformOrigin:{horizontal:"left",vertical:"top"},placement:{horizontal:"left",vertical:"top"},offset:{top:0,right:0,bottom:0,left:0},debounceAmount:20},i=(i=e)=>{var n;const r={...e,...i};void 0===r.transformOrigin&&(r.transformOrigin=e.transformOrigin),void 0===r.placement&&(r.placement=e.placement),void 0===r.offset&&(r.offset=e.offset);const[l,h]=t({left:0,top:0,right:"initial",bottom:"initial"}),d=(t,o,e,i,n)=>{const l="center"===o?(t=>{if("horizontal"===t)return"centerh";if("vertical"===t)return"centerv";throw new Error(`the requested return value isn't "vertical" or "horizontal" ${t} was given.`)})(e):o,h=((t,o,e,i,n)=>{let r=0;return"left"===t[o]||"top"===t[o]?r=e[i]:"center"===t[o]?r=e[i]-n["horizontal"===o?"width":"height"]/2:"right"!==t[o]&&"bottom"!==t[o]||(r=window["horizontal"===o?"innerWidth":"innerHeight"]-e[i]),r})(t,e,i,l,n),d=((t,o,e)=>{var i,n,l,h,d,f,v,a,c,g,m,s;let u=t;return("horizontal"===o&&0!==(null===(i=r.offset)||void 0===i?void 0:i.left)||"horizontal"===o&&0!==(null===(n=r.offset)||void 0===n?void 0:n.right))&&("left"!==e[o]&&"center"!==e[o]||(u+=null===(l=r.offset)||void 0===l?void 0:l.left,u-=null===(h=r.offset)||void 0===h?void 0:h.right),"right"===e[o]&&(u-=null===(d=r.offset)||void 0===d?void 0:d.left,u+=null===(f=r.offset)||void 0===f?void 0:f.right)),("vertical"===o&&0!==(null===(v=r.offset)||void 0===v?void 0:v.top)||"vertical"===o&&0!==(null===(a=r.offset)||void 0===a?void 0:a.bottom))&&("top"!==e[o]&&"center"!==e[o]||(u+=null===(c=r.offset)||void 0===c?void 0:c.top,u-=null===(g=r.offset)||void 0===g?void 0:g.bottom),"bottom"===e[o]&&(u-=null===(m=r.offset)||void 0===m?void 0:m.top,u+=null===(s=r.offset)||void 0===s?void 0:s.bottom)),u})(h,e,t),f=((t,o,e,i)=>{let n=t;return("left"===o[e]&&n<0||"top"===o[e]&&n<0||"center"===o[e]&&n<0||"bottom"===o[e]&&n<0)&&(n=0),("left"===o[e]&&n>window.innerWidth-i.width||"center"===o[e]&&"horizontal"===e&&n>window.innerWidth-i.width)&&(n=window.innerWidth-i.width),("top"===o[e]&&n>window.innerHeight-i.height||"center"===o[e]&&"vertical"===e&&n>window.innerHeight-i.height)&&(n=window.innerHeight-i.height),"right"===o[e]&&n>window.innerWidth-i.width&&(n=window.innerWidth-i.width),"bottom"===o[e]&&n>window.innerHeight-i.height&&(n=window.innerHeight-i.height),n})(d,t,e,n);return f},f=(t,o,e)=>{var i,n;const l=d(r.transformOrigin,r.placement[e],e,t,o);let f="left",v="right";"horizontal"===e&&"right"===(null===(i=r.transformOrigin)||void 0===i?void 0:i.horizontal)?(f="right",v="left"):"horizontal"===e&&(f="left",v="right"),"vertical"===e&&"bottom"===(null===(n=r.transformOrigin)||void 0===n?void 0:n.vertical)?(f="bottom",v="top"):"vertical"===e&&(f="top",v="bottom"),h((t=>({...t,[f]:l,[v]:"initial"})))},v=o((()=>{var t,o;if(!(null===(t=r.relativeElement)||void 0===t?void 0:t.current)||!(null===(o=r.elementToBePositioned)||void 0===o?void 0:o.current))return;const e=r.relativeElement.current.getBoundingClientRect(),i={height:r.elementToBePositioned.current.offsetHeight,width:r.elementToBePositioned.current.offsetWidth},n={top:e.top,right:e.right,bottom:e.bottom,center:0,centerv:e.top+e.height/2,centerh:e.left+e.width/2,left:e.left,width:e.width,height:e.height,x:e.x,y:e.y};f(n,i,"horizontal"),f(n,i,"vertical")}),null!==(n=r.debounceAmount)&&void 0!==n?n:20);return{top:l.top,bottom:l.bottom,left:l.left,right:l.right,calculatePosition:v}};export{i as usePosition};
+import{useState as t}from"react";import{useDebouncedCallback as o}from"./useDebouncedCallback.esm.js";const i={relativeElement:void 0,elementToBePositioned:void 0,transformOrigin:{horizontal:"left",vertical:"top"},placement:{horizontal:"left",vertical:"top"},offset:{top:0,right:0,bottom:0,left:0},debounceAmount:20},e=(e=i)=>{var n;const r={...i,...e},[l,h]=t(!1);void 0===r.transformOrigin&&(r.transformOrigin=i.transformOrigin),void 0===r.placement&&(r.placement=i.placement),void 0===r.offset&&(r.offset=i.offset);const[d,f]=t({left:0,top:0,right:"initial",bottom:"initial"}),v=(t,o,i,e,n)=>{const l="center"===o?(t=>{if("horizontal"===t)return"centerh";if("vertical"===t)return"centerv";throw new Error(`the requested return value isn't "vertical" or "horizontal" ${t} was given.`)})(i):o,h=((t,o,i,e,n)=>{let r=0;return"left"===t[o]||"top"===t[o]?r=i[e]:"center"===t[o]?r=i[e]-n["horizontal"===o?"width":"height"]/2:"right"!==t[o]&&"bottom"!==t[o]||(r=window["horizontal"===o?"innerWidth":"innerHeight"]-i[e]),r})(t,i,e,l,n),d=((t,o,i)=>{var e,n,l,h,d,f,v,a,c,g,m,s;let u=t;return("horizontal"===o&&0!==(null===(e=r.offset)||void 0===e?void 0:e.left)||"horizontal"===o&&0!==(null===(n=r.offset)||void 0===n?void 0:n.right))&&("left"!==i[o]&&"center"!==i[o]||(u+=null===(l=r.offset)||void 0===l?void 0:l.left,u-=null===(h=r.offset)||void 0===h?void 0:h.right),"right"===i[o]&&(u-=null===(d=r.offset)||void 0===d?void 0:d.left,u+=null===(f=r.offset)||void 0===f?void 0:f.right)),("vertical"===o&&0!==(null===(v=r.offset)||void 0===v?void 0:v.top)||"vertical"===o&&0!==(null===(a=r.offset)||void 0===a?void 0:a.bottom))&&("top"!==i[o]&&"center"!==i[o]||(u+=null===(c=r.offset)||void 0===c?void 0:c.top,u-=null===(g=r.offset)||void 0===g?void 0:g.bottom),"bottom"===i[o]&&(u-=null===(m=r.offset)||void 0===m?void 0:m.top,u+=null===(s=r.offset)||void 0===s?void 0:s.bottom)),u})(h,i,t),f=((t,o,i,e)=>{let n=t;return("left"===o[i]&&n<0||"top"===o[i]&&n<0||"center"===o[i]&&n<0||"bottom"===o[i]&&n<0)&&(n=0),("left"===o[i]&&n>window.innerWidth-e.width||"center"===o[i]&&"horizontal"===i&&n>window.innerWidth-e.width)&&(n=window.innerWidth-e.width),("top"===o[i]&&n>window.innerHeight-e.height||"center"===o[i]&&"vertical"===i&&n>window.innerHeight-e.height)&&(n=window.innerHeight-e.height),"right"===o[i]&&n>window.innerWidth-e.width&&(n=window.innerWidth-e.width),"bottom"===o[i]&&n>window.innerHeight-e.height&&(n=window.innerHeight-e.height),n})(d,t,i,n);return f},a=(t,o,i)=>{var e,n;const l=v(r.transformOrigin,r.placement[i],i,t,o);let h="left",d="right";"horizontal"===i&&"right"===(null===(e=r.transformOrigin)||void 0===e?void 0:e.horizontal)?(h="right",d="left"):"horizontal"===i&&(h="left",d="right"),"vertical"===i&&"bottom"===(null===(n=r.transformOrigin)||void 0===n?void 0:n.vertical)?(h="bottom",d="top"):"vertical"===i&&(h="top",d="bottom"),f((t=>({...t,[h]:l,[d]:"initial"})))},c=o((()=>{var t,o;if(!(null===(t=r.relativeElement)||void 0===t?void 0:t.current)||!(null===(o=r.elementToBePositioned)||void 0===o?void 0:o.current))return;const i=r.relativeElement.current.getBoundingClientRect(),e={height:r.elementToBePositioned.current.offsetHeight,width:r.elementToBePositioned.current.offsetWidth},n={top:i.top,right:i.right,bottom:i.bottom,center:0,centerv:i.top+i.height/2,centerh:i.left+i.width/2,left:i.left,width:i.width,height:i.height,x:i.x,y:i.y};a(n,e,"horizontal"),a(n,e,"vertical"),l||h(!0)}),null!==(n=r.debounceAmount)&&void 0!==n?n:20);return{top:d.top,bottom:d.bottom,left:d.left,right:d.right,calculatePosition:c,initialCalculationDone:l}};export{e as usePosition};
 //# sourceMappingURL=usePosition.esm.js.map

package/dist/esm/src/hooks/useSpacing.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/hooks/useUploadFile.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/hooks/useWrapper.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/{index.d.ts → src/index.d.ts}

@@ -51,6 +51,9 @@ export { ModalContent } from "./components/Notifications/Modal/ModalContent/Moda
 export type { Props as ModalContentProps } from "./components/Notifications/Modal/ModalContent/ModalContent";
 export { ModalHeader } from "./components/Notifications/Modal/ModalHeader/ModalHeader";
 export type { Props as ModalHeaderProps } from "./components/Notifications/Modal/ModalHeader/ModalHeader";
+export { NotificationProvider, useNotificationContext } from "./components/Notifications/NotificationProvider/NotificationContext";
+export type { Props as NotificationProviderProps } from "./components/Notifications/NotificationProvider/NotificationContext";
+export type { AddNotification, RemoveNotification, Translations } from "./components/Notifications/NotificationProvider/notification.interfaces";
 export { SlideInModal } from "./components/Notifications/SlideInModal/SlideInModal";
 export type { Props as SlideInModalProps } from "./components/Notifications/SlideInModal/SlideInModal";
 export { SnackbarProvider } from "./components/Notifications/Snackbar/SnackbarProvider/SnackbarProvider";

package/dist/esm/src/index.esm.js

@@ -1,2 +1,2 @@
-export{BaseStyling}from"../_BaseStyling_/BaseStyling.esm.js";export{Button}from"../Button/Button.esm.js";export{Breadcrumbs}from"../Breadcrumbs/Breadcrumbs.esm.js";export{ContextMenu}from"../ContextMenu/ContextMenu.esm.js";export{ContextMenuItem}from"../ContextMenu/ContextMenuItem.esm.js";export{Link}from"../Link/Link.esm.js";export{Icon,Icons}from"../Icon/Icon.esm.js";export{IconButton}from"../Button/IconButton.esm.js";export{Tab}from"../Tabs/Tab.esm.js";export{Tabs}from"../Tabs/Tabs.esm.js";export{TextEllipsis}from"../TextEllipsis/TextEllipsis.esm.js";export{Tile}from"../Tiles/Tile.esm.js";export{Tiles}from"../Tiles/Tiles.esm.js";export{Tooltip}from"../Tooltip/Tooltip.esm.js";export{Typography}from"../Typography/Typography.esm.js";export{ProgressBar}from"../ProgressBar/ProgressBar.esm.js";export{Skeleton}from"../Skeleton/Skeleton.esm.js";export{StatusIndicator}from"../StatusIndicator/StatusIndicator.esm.js";export{Pagination}from"../Pagination/Pagination.esm.js";export{useRepeater}from"./hooks/useRepeater.esm.js";export{useDebouncedCallback}from"./hooks/useDebouncedCallback.esm.js";export{debounce,generateID,throttle}from"./util/helper.esm.js";export{BaseModal as Modal}from"../Notifications/BaseModal/BaseModal.esm.js";export{useSnackbar}from"../Notifications/Snackbar/useSnackbar.esm.js";export{Dialog}from"../Notifications/Dialog/Dialog.esm.js";export{DiscardChangesModal}from"../Notifications/DiscardChangesModal/DiscardChangesModal.esm.js";export{BaseModalActions as ModalActions}from"../Notifications/BaseModal/BaseModalActions/BaseModalActions.esm.js";export{BaseModalContent as ModalContent}from"../Notifications/BaseModal/BaseModalContent/BaseModalContent.esm.js";export{BaseModalHeader as ModalHeader}from"../Notifications/BaseModal/BaseModalHeader/BaseModalHeader.esm.js";export{SlideInModal}from"../Notifications/SlideInModal/SlideInModal.esm.js";export{SnackbarProvider}from"../Notifications/Snackbar/SnackbarProvider/SnackbarProvider.esm.js";export{Checkbox}from"../Form/Checkbox/Checkbox.esm.js";export{Fieldset}from"../Form/Fieldset/Fieldset.esm.js";export{Form}from"../Form/Form.esm.js";export{FormControl}from"../Form/FormControl/FormControl.esm.js";export{FormGroup}from"../Form/FormGroup/FormGroup.esm.js";export{FormHelperText}from"../Form/FormHelperText/FormHelperText.esm.js";export{Input}from"../Form/Input/Input.esm.js";export{InputWrapper}from"../Form/Wrapper/InputWrapper/InputWrapper.esm.js";export{Label}from"../Form/Label/Label.esm.js";export{Option}from"../Form/Select/Option.esm.js";export{Radio}from"../Form/Radio/Radio.esm.js";export{RadioWrapper}from"../Form/Wrapper/RadioWrapper/RadioWrapper.esm.js";export{Select}from"../Form/Select/Select.esm.js";export{Textarea}from"../Form/Textarea/Textarea.esm.js";export{Toggle}from"../Form/Toggle/Toggle.esm.js";export{CheckboxWrapper}from"../Form/Wrapper/CheckboxWrapper/CheckboxWrapper.esm.js";export{TextareaWrapper}from"../Form/Wrapper/TextareaWrapper/TextareaWrapper.esm.js";export{SelectWrapper}from"../Form/Wrapper/SelectWrapper/SelectWrapper.esm.js";export{Wizard}from"../Wizard/Wizard.esm.js";export{WizardActions}from"../Wizard/WizardActions/WizardActions.esm.js";export{WizardSteps}from"../Wizard/WizardSteps/WizardSteps.esm.js";export{BaseWizardSteps}from"../Wizard/BaseWizardSteps/BaseWizardSteps.esm.js";export{DataGrid}from"../DataGrid/DataGrid.esm.js";export{DataGridRow}from"../DataGrid/DataGridBody/DataGridRow.esm.js";export{DataGridCell}from"../DataGrid/DataGridBody/DataGridCell.esm.js";export{Banner}from"../Notifications/Banner/Banner.esm.js";
+export{BaseStyling}from"../_BaseStyling_/BaseStyling.esm.js";export{Button}from"../Button/Button.esm.js";export{Breadcrumbs}from"../Breadcrumbs/Breadcrumbs.esm.js";export{ContextMenu}from"../ContextMenu/ContextMenu.esm.js";export{ContextMenuItem}from"../ContextMenu/ContextMenuItem.esm.js";export{Link}from"../Link/Link.esm.js";export{Icon,Icons}from"../Icon/Icon.esm.js";export{IconButton}from"../Button/IconButton.esm.js";export{Tab}from"../Tabs/Tab.esm.js";export{Tabs}from"../Tabs/Tabs.esm.js";export{TextEllipsis}from"../TextEllipsis/TextEllipsis.esm.js";export{Tile}from"../Tiles/Tile.esm.js";export{Tiles}from"../Tiles/Tiles.esm.js";export{Tooltip}from"../Tooltip/Tooltip.esm.js";export{Typography}from"../Typography/Typography.esm.js";export{ProgressBar}from"../ProgressBar/ProgressBar.esm.js";export{Skeleton}from"../Skeleton/Skeleton.esm.js";export{StatusIndicator}from"../StatusIndicator/StatusIndicator.esm.js";export{Pagination}from"../Pagination/Pagination.esm.js";export{useRepeater}from"./hooks/useRepeater.esm.js";export{useDebouncedCallback}from"./hooks/useDebouncedCallback.esm.js";export{debounce,generateID,throttle}from"./util/helper.esm.js";export{BaseModal as Modal}from"../Notifications/BaseModal/BaseModal.esm.js";export{useSnackbar}from"../Notifications/Snackbar/useSnackbar.esm.js";export{Dialog}from"../Notifications/Dialog/Dialog.esm.js";export{DiscardChangesModal}from"../Notifications/DiscardChangesModal/DiscardChangesModal.esm.js";export{BaseModalActions as ModalActions}from"../Notifications/BaseModal/BaseModalActions/BaseModalActions.esm.js";export{BaseModalContent as ModalContent}from"../Notifications/BaseModal/BaseModalContent/BaseModalContent.esm.js";export{BaseModalHeader as ModalHeader}from"../Notifications/BaseModal/BaseModalHeader/BaseModalHeader.esm.js";export{NotificationProvider,useNotificationContext}from"../Notifications/NotificationProvider/NotificationContext.esm.js";export{SlideInModal}from"../Notifications/SlideInModal/SlideInModal.esm.js";export{SnackbarProvider}from"../Notifications/Snackbar/SnackbarProvider/SnackbarProvider.esm.js";export{Checkbox}from"../Form/Checkbox/Checkbox.esm.js";export{Fieldset}from"../Form/Fieldset/Fieldset.esm.js";export{Form}from"../Form/Form.esm.js";export{FormControl}from"../Form/FormControl/FormControl.esm.js";export{FormGroup}from"../Form/FormGroup/FormGroup.esm.js";export{FormHelperText}from"../Form/FormHelperText/FormHelperText.esm.js";export{Input}from"../Form/Input/Input.esm.js";export{InputWrapper}from"../Form/Wrapper/InputWrapper/InputWrapper.esm.js";export{Label}from"../Form/Label/Label.esm.js";export{Option}from"../Form/Select/Option.esm.js";export{Radio}from"../Form/Radio/Radio.esm.js";export{RadioWrapper}from"../Form/Wrapper/RadioWrapper/RadioWrapper.esm.js";export{Select}from"../Form/Select/Select.esm.js";export{Textarea}from"../Form/Textarea/Textarea.esm.js";export{Toggle}from"../Form/Toggle/Toggle.esm.js";export{CheckboxWrapper}from"../Form/Wrapper/CheckboxWrapper/CheckboxWrapper.esm.js";export{TextareaWrapper}from"../Form/Wrapper/TextareaWrapper/TextareaWrapper.esm.js";export{SelectWrapper}from"../Form/Wrapper/SelectWrapper/SelectWrapper.esm.js";export{Wizard}from"../Wizard/Wizard.esm.js";export{WizardActions}from"../Wizard/WizardActions/WizardActions.esm.js";export{WizardSteps}from"../Wizard/WizardSteps/WizardSteps.esm.js";export{BaseWizardSteps}from"../Wizard/BaseWizardSteps/BaseWizardSteps.esm.js";export{DataGrid}from"../DataGrid/DataGrid.esm.js";export{DataGridRow}from"../DataGrid/DataGridBody/DataGridRow.esm.js";export{DataGridCell}from"../DataGrid/DataGridBody/DataGridCell.esm.js";export{Banner}from"../Notifications/Banner/Banner.esm.js";
 //# sourceMappingURL=index.esm.js.map

package/dist/esm/{interfaces.d.ts → src/interfaces.d.ts}

@@ -4,3 +4,6 @@ export interface KeyValuePair {
     [dataAttribute: DataAttributeKey]: unknown;
 }
 export type MergeElementProps<T extends React.ElementType, P> = Omit<React.ComponentPropsWithRef<T>, keyof P> & P;
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends (infer U)[] ? DeepPartial<U>[] : T[P] extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>> : DeepPartial<T[P]>;
+};

package/dist/{cjs → esm/src}/util/helper.d.ts

@@ -10,3 +10,8 @@ export declare const getValueByPath: (obj: {
 /** Source: https://stackoverflow.com/a/42769683/5084110 */
 export declare const remToPx: (rem: number) => number;
 export declare const isJsonString: (str: any) => boolean;
+type ObjectType = {
+    [key: string]: any;
+};
+export declare const deepMerge: <T extends {}>(obj1: ObjectType, obj2: ObjectType | false) => T;
+export {};

package/dist/esm/src/util/helper.esm.js

@@ -1,2 +1,2 @@
-const e=(e=15,t)=>{let r=["1","2","3","4","5","6","7","8","9","0","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"],n="";for(let o=0;o<e&&n.length<e;o++){n=n+("string"!=typeof t||void 0===(null==t?void 0:t[o])||/\s/.test(t[o])?"":t[o])+r[Math.floor(Math.random()*r.length)]}return n.slice(0,e)},t=(e,t,r=!0)=>r?Object.keys(e).reduce(((r,n)=>(t.test(n)&&(r[n]=e[n]),r)),{}):Object.entries(e).filter((([e])=>!t.test(e))).reduce(((e,t)=>({...e,[t[0]]:t[1]})),{}),r=(e,t)=>{let r;return function(...n){clearTimeout(r),r=setTimeout((()=>{clearTimeout(r),e(...n)}),t)}},n=(e,t)=>{let r=0;return function(){let n=Date.now();n-r>=t&&(e(),r=n)}};export{r as debounce,t as filterProps,e as generateID,n as throttle};
+const t=(t=15,e)=>{let r=["1","2","3","4","5","6","7","8","9","0","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"],o="";for(let l=0;l<t&&o.length<t;l++){o=o+("string"!=typeof e||void 0===(null==e?void 0:e[l])||/\s/.test(e[l])?"":e[l])+r[Math.floor(Math.random()*r.length)]}return o.slice(0,t)},e=(t,e,r=!0)=>r?Object.keys(t).reduce(((r,o)=>(e.test(o)&&(r[o]=t[o]),r)),{}):Object.entries(t).filter((([t])=>!e.test(t))).reduce(((t,e)=>({...t,[e[0]]:e[1]})),{}),r=(t,e)=>{let r;return function(...o){clearTimeout(r),r=setTimeout((()=>{clearTimeout(r),t(...o)}),e)}},o=(t,e)=>{let r=0;return function(){let o=Date.now();o-r>=e&&(t(),r=o)}},l=(t,e)=>{if(!e)return t;let r={...t};for(let o in e)Object.prototype.hasOwnProperty.call(e,o)&&("object"==typeof e[o]&&null!==e[o]&&Object.prototype.hasOwnProperty.call(t,o)&&!Array.isArray(e[o])?r[o]=l(t[o],e[o]):r[o]=e[o]);return r};export{r as debounce,l as deepMerge,e as filterProps,t as generateID,o as throttle};
 //# sourceMappingURL=helper.esm.js.map

package/dist/esm/src/util/helper.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/stories/utils/helpers.d.ts

@@ -0,0 +1,3 @@
+export declare const isStory: () => boolean;
+export declare const centerStory: () => void;
+export declare const resetStory: () => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -49,81 +49,81 @@
     "node": ">=16"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.1",
-    "@babel/preset-env": "^7.22.4",
-    "@babel/preset-react": "^7.22.3",
-    "@babel/preset-typescript": "^7.21.5",
+    "@babel/core": "^7.22.10",
+    "@babel/preset-env": "^7.22.10",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
     "@mdx-js/react": "^2.3.0",
-    "@onewelcome/eslint-config-shared-codestyle": "^9.0.3",
-    "@rollup/plugin-commonjs": "^25.0.0",
+    "@onewelcome/eslint-config-shared-codestyle": "^9.1.0",
+    "@onewelcome/storybook-addon-basestyling": "^0.0.2",
+    "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@size-limit/preset-small-lib": "^8.2.4",
-    "@storybook/addon-a11y": "^7.0.18",
-    "@storybook/addon-actions": "^7.0.18",
-    "@storybook/addon-docs": "^7.0.18",
-    "@storybook/addon-essentials": "^7.0.18",
-    "@storybook/addon-interactions": "^7.0.18",
-    "@storybook/addon-links": "^7.0.18",
-    "@storybook/blocks": "^7.0.18",
-    "@storybook/react": "^7.0.18",
-    "@storybook/react-webpack5": "^7.0.18",
-    "@storybook/theming": "^7.0.18",
-    "@testing-library/dom": "^9.3.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@size-limit/preset-small-lib": "^8.2.6",
+    "@storybook/addon-a11y": "^7.2.3",
+    "@storybook/addon-actions": "^7.2.3",
+    "@storybook/addon-docs": "^7.2.3",
+    "@storybook/addon-essentials": "^7.2.3",
+    "@storybook/addon-interactions": "^7.2.3",
+    "@storybook/addon-links": "^7.2.3",
+    "@storybook/blocks": "^7.2.3",
+    "@storybook/jest": "^0.1.0",
+    "@storybook/react": "^7.2.3",
+    "@storybook/react-webpack5": "^7.2.3",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/theming": "^7.2.3",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@tsconfig/recommended": "^1.0.2",
     "@types/color-convert": "^2.0.0",
-    "@types/jest": "^29.5.2",
-    "@types/mdx": "^2.0.5",
-    "@types/react": "^18.2.8",
-    "@types/react-dom": "^18.2.4",
+    "@types/jest": "^29.5.3",
+    "@types/mdx": "^2.0.6",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.9",
-    "@typescript-eslint/parser": "^5.59.9",
-    "babel-loader": "^9.1.2",
-    "chromatic": "^6.18.0",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
+    "babel-loader": "^9.1.3",
+    "chromatic": "^6.21.0",
     "css-loader": "^6.8.1",
-    "eslint": "^8.42.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-cypress": "^2.13.3",
-    "eslint-plugin-jest": "^27.2.1",
+    "eslint": "^8.47.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-cypress": "^2.14.0",
+    "eslint-plugin-jest": "^27.2.3",
     "eslint-plugin-license-header": "^0.6.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.13",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
+    "jest": "^29.6.2",
+    "jest-environment-jsdom": "^29.6.2",
     "jest-junit": "^16.0.0",
     "jest-sonar-reporter": "^2.0.0",
-    "lint-staged": "^13.2.2",
+    "lint-staged": "^14.0.0",
     "mini-css-extract-plugin": "^2.7.6",
     "npm-run-all": "^4.1.5",
     "postcss-url": "^10.1.3",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "react-router": "^6.11.2",
-    "react-router-dom": "^6.11.2",
+    "react-router": "^6.15.0",
+    "react-router-dom": "^6.15.0",
     "remark-gfm": "^3.0.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-styles": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.34.1",
-    "sass": "^1.62.1",
-    "sass-loader": "^13.3.1",
-    "size-limit": "^8.2.4",
-    "storybook": "^7.0.18",
+    "rollup-plugin-typescript2": "^0.35.0",
+    "sass": "^1.65.1",
+    "sass-loader": "^13.3.2",
+    "size-limit": "^8.2.6",
+    "storybook": "^7.2.3",
     "style-loader": "^3.3.3",
-    "ts-jest": "^29.1.0",
-    "typescript": "^5.1.3"
-  },
-  "dependencies": {
-    "@onewelcome/storybook-addon-basestyling": "^0.0.1"
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.1.6"
   }
 }

package/src/components/Breadcrumbs/Breadcrumbs.module.scss

@@ -16,15 +16,39 @@
 
 .breadcrumbs {
   .last {
-    color: var(--color-primary);
+    color: var(--color-primary900);
+    font-weight: 700;
     margin: 0;
   }
 
   .icon {
     color: var(--color-primary);
-    font-size: 0.75rem;
+    font-size: 0.625rem;
     line-height: var(--default-line-height);
-    margin-left: 0.375rem;
-    margin-right: 0.375rem;
+    margin: 0 0.84rem;
+  }
+
+  .breadcrumb-link {
+    text-decoration: none;
+    &:hover,
+    &.visited {
+      [data-underline] {
+        text-decoration: underline;
+      }
+    }
+    &:focus,
+    &:focus-visible {
+      outline: 2px solid var(--color-shadow-blue);
+      outline-offset: 1px;
+    }
+
+    &:visited {
+      color: var(--color-primary700);
+    }
+
+    &:active {
+      color: var(--color-primary900);
+      font-weight: 700;
+    }
   }
 }

package/src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -51,6 +51,12 @@ describe("Breadcrumbs should render", () => {
 
     expect(breadcrumbs).toBeDefined();
     expect(breadcrumbs.firstChild).not.toHaveAttribute("aria-current");
+    if (breadcrumbs.firstChild) {
+      const homeIcon = (breadcrumbs.firstChild as HTMLElement).querySelector(
+        "[class*='icon-home-filled']"
+      );
+      expect(homeIcon).toBeInTheDocument();
+    }
     expect((breadcrumbs.firstChild as HTMLElement).tagName).toEqual("A");
     expect(breadcrumbs.lastChild).toHaveAttribute("aria-current", "page");
     expect((breadcrumbs.lastChild as HTMLElement).tagName).toEqual("SPAN");