@onewelcome/react-lib-components 4.1.1 → 4.3.0

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 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};
+import{useState as t}from"react";import{useDebouncedCallback as e}from"./useDebouncedCallback.esm.js";var o,i;!function(t){t.LEFT="left",t.CENTER="center",t.CENTER_H="centerh",t.RIGHT="right"}(o||(o={})),function(t){t.TOP="top",t.CENTER="center",t.CENTER_V="centerv",t.BOTTOM="bottom"}(i||(i={}));const n={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},r=(o=n)=>{var i;const r={...n,...o},[l,h]=t(!1);void 0===r.transformOrigin&&(r.transformOrigin=n.transformOrigin),void 0===r.placement&&(r.placement=n.placement),void 0===r.offset&&(r.offset=n.offset);const[d,f]=t({left:0,top:0,right:"initial",bottom:"initial"}),v=(t,e,o,i,n)=>{const l="center"===e?(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.`)})(o):e,h=((t,e,o,i,n)=>{let r=0;return"left"===t[e]||"top"===t[e]?r=o[i]:"center"===t[e]?r=o[i]-n["horizontal"===e?"width":"height"]/2:"right"!==t[e]&&"bottom"!==t[e]||(r=window["horizontal"===e?"innerWidth":"innerHeight"]-o[i]),r})(t,o,i,l,n),d=((t,e,o)=>{var i,n,l,h,d,f,v,a,c,g,u,m;let s=t;return("horizontal"===e&&0!==(null===(i=r.offset)||void 0===i?void 0:i.left)||"horizontal"===e&&0!==(null===(n=r.offset)||void 0===n?void 0:n.right))&&("left"!==o[e]&&"center"!==o[e]||(s+=null===(l=r.offset)||void 0===l?void 0:l.left,s-=null===(h=r.offset)||void 0===h?void 0:h.right),"right"===o[e]&&(s-=null===(d=r.offset)||void 0===d?void 0:d.left,s+=null===(f=r.offset)||void 0===f?void 0:f.right)),("vertical"===e&&0!==(null===(v=r.offset)||void 0===v?void 0:v.top)||"vertical"===e&&0!==(null===(a=r.offset)||void 0===a?void 0:a.bottom))&&("top"!==o[e]&&"center"!==o[e]||(s+=null===(c=r.offset)||void 0===c?void 0:c.top,s-=null===(g=r.offset)||void 0===g?void 0:g.bottom),"bottom"===o[e]&&(s-=null===(u=r.offset)||void 0===u?void 0:u.top,s+=null===(m=r.offset)||void 0===m?void 0:m.bottom)),s})(h,o,t),f=((t,e,o,i)=>{let n=t;return("left"===e[o]&&n<0||"top"===e[o]&&n<0||"center"===e[o]&&n<0||"bottom"===e[o]&&n<0)&&(n=0),("left"===e[o]&&n>window.innerWidth-i.width||"center"===e[o]&&"horizontal"===o&&n>window.innerWidth-i.width)&&(n=window.innerWidth-i.width),("top"===e[o]&&n>window.innerHeight-i.height||"center"===e[o]&&"vertical"===o&&n>window.innerHeight-i.height)&&(n=window.innerHeight-i.height),"right"===e[o]&&n>window.innerWidth-i.width&&(n=window.innerWidth-i.width),"bottom"===e[o]&&n>window.innerHeight-i.height&&(n=window.innerHeight-i.height),n})(d,t,o,n);return f},a=(t,e,o)=>{var i,n;const l=v(r.transformOrigin,r.placement[o],o,t,e);let h="left",d="right";"horizontal"===o&&"right"===(null===(i=r.transformOrigin)||void 0===i?void 0:i.horizontal)?(h="right",d="left"):"horizontal"===o&&(h="left",d="right"),"vertical"===o&&"bottom"===(null===(n=r.transformOrigin)||void 0===n?void 0:n.vertical)?(h="bottom",d="top"):"vertical"===o&&(h="top",d="bottom"),f((t=>({...t,[h]:l,[d]:"initial"})))},c=e((()=>{var t,e;if(!(null===(t=r.relativeElement)||void 0===t?void 0:t.current)||!(null===(e=r.elementToBePositioned)||void 0===e?void 0:e.current))return;const o=r.relativeElement.current.getBoundingClientRect(),i={height:r.elementToBePositioned.current.offsetHeight,width:r.elementToBePositioned.current.offsetWidth},n={top:o.top,right:o.right,bottom:o.bottom,center:0,centerv:o.top+o.height/2,centerh:o.left+o.width/2,left:o.left,width:o.width,height:o.height,x:o.x,y:o.y};a(n,i,"horizontal"),a(n,i,"vertical"),l||h(!0)}),null!==(i=r.debounceAmount)&&void 0!==i?i:20);return{top:d.top,bottom:d.bottom,left:d.left,right:d.right,calculatePosition:c,initialCalculationDone:l}};export{o as horizontal,r as usePosition,i as vertical};
 //# sourceMappingURL=usePosition.esm.js.map

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FileType } from "../components/Form/FileUpload/FileUpload";
 export interface UploadResponseType {
     fileList: FileType[];

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const useWrapper: () => {
     helperId: string;
     errorId: string;

package/dist/esm/src/index.d.ts

@@ -35,6 +35,8 @@ export { Skeleton } from "./components/Skeleton/Skeleton";
 export type { Props as SkeletonProps } from "./components/Skeleton/Skeleton";
 export { StatusIndicator } from "./components/StatusIndicator/StatusIndicator";
 export type { Props as StatusIndicatorProps } from "./components/StatusIndicator/StatusIndicator";
+export { Stepper } from "./components/Stepper/Stepper";
+export type { Props as StepperProps } from "./components/Stepper/Stepper";
 export { Pagination } from "./components/Pagination/Pagination";
 export type { Props as PaginationProps, PageChangeLabels, PaginationTranslations, PageSize } from "./components/Pagination/Pagination";
 export { useRepeater } from "./hooks/useRepeater";

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{Tag}from"../Tag/Tag.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";
+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{Tag}from"../Tag/Tag.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{Stepper}from"../Stepper/Stepper.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/src/util/helper.esm.js

@@ -1,2 +1,2 @@
-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};
+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=>t*parseFloat(getComputedStyle(document.documentElement).fontSize),n=(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]=n(t[o],e[o]):r[o]=e[o]);return r};export{r as debounce,n as deepMerge,e as filterProps,t as generateID,l as remToPx,o as throttle};
 //# sourceMappingURL=helper.esm.js.map

package/package.json

@@ -1,12 +1,11 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "4.1.1",
+  "version": "4.3.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
-  "main": "dist/cjs/src/index.cjs.js",
-  "module": "dist/esm/src/index.esm.js",
-  "typings": "dist/cjs/src/index.d.ts",
+  "main": "dist/esm/src/index.esm.js",
+  "typings": "dist/esm/src/index.d.ts",
   "files": [
     "dist",
     "src"
@@ -49,81 +48,84 @@
     "node": ">=16"
   },
   "devDependencies": {
-    "@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",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@mdx-js/react": "^3.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.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",
+    "@onewelcome/storybook-addon-basestyling": "^1.0.0",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@size-limit/preset-small-lib": "^10.0.1",
+    "@storybook/addon-a11y": "^7.5.2",
+    "@storybook/addon-actions": "^7.5.2",
+    "@storybook/addon-docs": "^7.5.2",
+    "@storybook/addon-essentials": "^7.5.2",
+    "@storybook/addon-interactions": "^7.5.2",
+    "@storybook/addon-links": "^7.5.2",
+    "@storybook/blocks": "^7.5.2",
+    "@storybook/components": "^7.5.2",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/manager-api": "^7.5.2",
+    "@storybook/react": "^7.5.2",
+    "@storybook/react-webpack5": "^7.5.2",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.5.2",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
     "@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.3",
-    "@types/mdx": "^2.0.6",
-    "@types/react": "^18.2.20",
-    "@types/react-dom": "^18.2.7",
+    "@testing-library/user-event": "^14.5.1",
+    "@tsconfig/recommended": "^1.0.3",
+    "@types/color-convert": "^2.0.2",
+    "@types/jest": "^29.5.6",
+    "@types/mdx": "^2.0.9",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^6.3.0",
-    "@typescript-eslint/parser": "^6.3.0",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
     "babel-loader": "^9.1.3",
-    "chromatic": "^6.21.0",
+    "chromatic": "^7.5.4",
     "css-loader": "^6.8.1",
-    "eslint": "^8.47.0",
+    "eslint": "^8.52.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-cypress": "^2.14.0",
-    "eslint-plugin-jest": "^27.2.3",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-license-header": "^0.6.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.33.1",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "^0.6.15",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.6.2",
-    "jest-environment-jsdom": "^29.6.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
     "jest-sonar-reporter": "^2.0.0",
-    "lint-staged": "^14.0.0",
+    "lint-staged": "^15.0.2",
     "mini-css-extract-plugin": "^2.7.6",
     "npm-run-all": "^4.1.5",
     "postcss-url": "^10.1.3",
-    "prettier": "^3.0.1",
+    "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "react-router": "^6.15.0",
-    "react-router-dom": "^6.15.0",
-    "remark-gfm": "^3.0.1",
+    "react-router": "^6.17.0",
+    "react-router-dom": "^6.17.0",
+    "remark-gfm": "^4.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-styles": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.35.0",
-    "sass": "^1.65.1",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
-    "size-limit": "^8.2.6",
-    "storybook": "^7.2.3",
+    "size-limit": "^10.0.1",
+    "storybook": "^7.5.2",
+    "storybook-addon-pseudo-states": "^2.1.2",
     "style-loader": "^3.3.3",
     "ts-jest": "^29.1.1",
-    "typescript": "^5.1.6"
+    "typescript": "^5.2.2"
   }
 }

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

@@ -38,7 +38,7 @@
     }
     &:focus,
     &:focus-visible {
-      outline: 2px solid var(--color-shadow-blue);
+      outline: 2px solid var(--color-focus);
       outline-offset: 1px;
     }
 

package/src/components/ContextMenu/ContextMenu.module.scss

@@ -22,13 +22,13 @@
 
 .menu {
   white-space: nowrap;
-  margin: 1rem 0;
+  margin: 0.25rem 0;
   list-style: none;
   padding: 0;
-  min-width: 200px;
+  min-width: 10rem;
 
   &.no-margin-top {
-    margin: 0 0 1rem;
+    margin: 0 0 0.25rem;
   }
 
   button {
@@ -37,5 +37,5 @@
 }
 
 .decorative-element {
-  margin-top: 1rem;
+  margin-top: 0.5rem;
 }

package/src/components/ContextMenu/ContextMenu.test.tsx

@@ -60,14 +60,14 @@ const createContextMenu = (params?: (defaultParams: Props) => Props) => {
   };
 };
 
-describe("ContextMenu should render", () => {
-  it("renders without crashing", () => {
+describe("<ContextMenu />", () => {
+  it("should render without crashing", () => {
     const { contextmenu } = createContextMenu();
 
     expect(contextmenu).toBeTruthy();
   });
 
-  it("executed onShow function", async () => {
+  it("should execute onShow function", async () => {
     const { trigger } = createContextMenu();
 
     await userEvent.click(trigger);
@@ -75,7 +75,7 @@ describe("ContextMenu should render", () => {
     expect(onShow).toHaveBeenCalled();
   });
 
-  it("executed onShow function", async () => {
+  it("should execute onClick function on ContextMenuItem", async () => {
     const { getByTestId } = createContextMenu(defaultParams => ({
       ...defaultParams,
       show: true
@@ -88,7 +88,51 @@ describe("ContextMenu should render", () => {
     expect(onClick).toHaveBeenCalled();
   });
 
-  it("passes custom class to ContextMenuItem", () => {
+  it("should set active state based on value prop", async () => {
+    const onChange = jest.fn();
+    const { getByTestId } = createContextMenu(defaultParams => ({
+      ...defaultParams,
+      show: true,
+      value: 1,
+      onChange
+    }));
+
+    const button = getByTestId("contextmenuitem");
+    const button1 = getByTestId("contextmenuitem2");
+    const button2 = getByTestId("contextmenuitem3");
+
+    expect(button).not.toHaveClass("active");
+    expect(button1).toHaveClass("active");
+    expect(button2).not.toHaveClass("active");
+
+    await userEvent.click(button);
+
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("should set active state based on showActiveState ContextMenuItem prop", async () => {
+    const onChange = jest.fn();
+    const { getByTestId } = createContextMenu(defaultParams => ({
+      ...defaultParams,
+      show: true,
+      children: [
+        <ContextMenuItem onClick={onClick} data-testid="contextmenuitem" key="1" showActiveState>
+          Example item 1
+        </ContextMenuItem>,
+        <ContextMenuItem onClick={onClick} data-testid="contextmenuitem2" key="2">
+          Example item 2
+        </ContextMenuItem>
+      ]
+    }));
+
+    const button = getByTestId("contextmenuitem");
+    const button1 = getByTestId("contextmenuitem2");
+
+    expect(button).toHaveClass("active");
+    expect(button1).not.toHaveClass("active");
+  });
+
+  it("should pass custom class to ContextMenuItem", () => {
     const { getByRole } = createContextMenu(defaultParams => ({
       ...defaultParams,
       show: true,
@@ -104,7 +148,7 @@ describe("ContextMenu should render", () => {
     expect(child.parentElement).toHaveClass("custom");
   });
 
-  it("renders the decorative element", () => {
+  it("should render the decorative element", () => {
     const { getByText } = createContextMenu(defaultParams => ({
       ...defaultParams,
       show: true,

package/src/components/ContextMenu/ContextMenu.tsx

@@ -32,13 +32,15 @@ import { Popover, Props as PopoverProps } from "../Popover/Popover";
 import { Placement, Offset } from "../../hooks/usePosition";
 import classes from "./ContextMenu.module.scss";
 import { useBodyClick } from "../../hooks/useBodyClick";
+import { Props as ContextMenuItemProps } from "./ContextMenuItem";
 import { createPortal } from "react-dom";
 import { useGetDomRoot } from "../../hooks/useGetDomRoot";
+import { useArrowNavigation, useDefaultOffset } from "./ContextMenuService";
 
-export interface Props extends ComponentPropsWithRef<"div"> {
+export interface Props extends Omit<ComponentPropsWithRef<"div">, "onChange"> {
   trigger: ReactElement<ButtonProps> | ReactElement<IconButtonProps>;
   decorativeElement?: ReactNode;
-  children: ReactNode;
+  children: ReactElement<ContextMenuItemProps> | ReactElement<ContextMenuItemProps>[];
   placement?: Placement;
   transformOrigin?: Placement;
   offset?: Offset;
@@ -49,6 +51,8 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   onShow?: () => void;
   onClose?: () => void;
   popoverProps?: PopoverProps;
+  value?: number;
+  onChange?: (event: React.MouseEvent<HTMLButtonElement>, childIndex: number) => void;
 }
 
 const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
@@ -61,11 +65,13 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     onShow,
     onClose,
     placement = { horizontal: "right", vertical: "top" },
-    offset = { top: 0, bottom: 0, left: 0, right: 0 },
+    offset,
     transformOrigin = { horizontal: "left", vertical: "top" },
     debounceAmount,
     domRoot,
     popoverProps,
+    value,
+    onChange,
     ...rest
   }: Props,
   ref
@@ -88,65 +94,25 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     throw new Error("You need to provide an ID to the context menu");
   }
 
-  const onArrowNavigation = (event: React.KeyboardEvent) => {
-    if (focusedContextMenuItem === -1 && selectedContextMenuItem !== -1) {
-      setFocusedContextMenuItem(selectedContextMenuItem);
-    }
-
-    const codesToPrevenDefault = [
-      "ArrowDown",
-      "ArrowUp",
-      "ArrowLeft",
-      "ArrowRight",
-      "Enter",
-      "Space",
-      "Escape",
-      "End",
-      "Home"
-    ];
-
-    if (codesToPrevenDefault.includes(event.code)) {
-      event.preventDefault();
-    }
+  const syncSelectedContextMenuItem = setSelectedContextMenuItem;
 
-    switch (event.code) {
-      case "ArrowDown":
-        if (!showContextMenu) {
-          setShowContextMenu(true);
-          return;
-        }
-        setFocusedContextMenuItem(prevState => {
-          return prevState + 1 > childrenCount - 1 ? 0 : prevState + 1;
-        });
-        return;
-      case "ArrowUp":
-        setFocusedContextMenuItem(prevState => {
-          return prevState - 1 < 0 ? childrenCount - 1 : prevState - 1;
-        });
-        return;
-      case "Enter":
-      case "Space":
-        if (!showContextMenu) {
-          setShowContextMenu(true);
-          return;
-        }
-
-        setShouldClick(true);
-        setSelectedContextMenuItem(focusedContextMenuItem);
-        setShowContextMenu(false);
-        return;
-      case "Tab":
-      case "Escape":
-        setShowContextMenu(false);
-        return;
-      case "End":
-        setFocusedContextMenuItem(childrenCount - 1);
-        return;
-      case "Home":
-        setFocusedContextMenuItem(0);
-        return;
-    }
-  };
+  useEffect(() => {
+    value !== undefined && syncSelectedContextMenuItem(value);
+  }, [value]);
+
+  const { calculateDefaultOffset } = useDefaultOffset();
+  const calculatedOffset = offset ?? calculateDefaultOffset(placement, transformOrigin);
+
+  const { onArrowNavigation } = useArrowNavigation({
+    selectedContextMenuItem,
+    setSelectedContextMenuItem,
+    focusedContextMenuItem,
+    setFocusedContextMenuItem,
+    showContextMenu,
+    setShowContextMenu,
+    childrenCount,
+    setShouldClick
+  });
 
   useBodyClick(
     event => {
@@ -193,13 +159,17 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     React.Children.map(children, (child, index) =>
       React.cloneElement(child as ReactElement, {
         onFocusChange: (childIndex: number) => setFocusedContextMenuItem(childIndex),
-        onSelectedChange: (childIndex: number) => {
+        onSelectedChange: (event: React.MouseEvent<HTMLButtonElement>, childIndex: number) => {
           setSelectedContextMenuItem(childIndex);
           setShouldClick(false);
+          onChange?.(event, childIndex);
         },
         childIndex: index,
         hasFocus: focusedContextMenuItem === index,
         isSelected: selectedContextMenuItem === index,
+        showActiveState:
+          child?.props.showActiveState ??
+          (value !== undefined && selectedContextMenuItem === index),
         contextMenuOpened: showContextMenu,
         shouldClick: shouldClick
       })
@@ -226,7 +196,7 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
           {...popoverProps}
           placement={placement}
           transformOrigin={transformOrigin}
-          offset={offset}
+          offset={calculatedOffset}
           anchorEl={anchorEl}
           debounceAmount={debounceAmount}
           show={showContextMenu}

package/src/components/ContextMenu/ContextMenuItem.module.scss

@@ -14,6 +14,9 @@
  *    limitations under the License.
  */
 
+@use "../../mixins.module.scss";
+@use "../../variables.scss";
+
 .context-menu-item {
   position: relative;
 
@@ -21,28 +24,50 @@
     background-color: transparent;
     border: 0;
     font-family: var(--font-family);
-    font-size: var(--font-size);
-    line-height: var(--default-line-height);
+    font-size: var(--font-size-form-label);
+    line-height: 1.25rem; //FIXME: UCL-395
     cursor: pointer;
     width: 100%;
     height: 100%;
-    padding: 0.5rem 1.25rem;
+    padding: 0.62rem 0.75rem;
     box-sizing: border-box;
-  }
 
-  &:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: transparent;
-    width: 100%;
-    height: 100%;
-    opacity: 0.1;
-    pointer-events: none;
-  }
+    &:focus-visible {
+      outline: none;
+
+      &::after {
+        @include mixins.focusVisibleOutline($outlineOffset: 0, $selectors: null);
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        z-index: calc(variables.$popover-z-index + 1);
+      }
+    }
+
+    &:hover {
+      background-color: var(--context-menu-hover-color);
+    }
+
+    &:active {
+      background-color: var(--context-menu-pressed-color);
+    }
+
+    &.active {
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        border-top-right-radius: 0.125rem;
+        border-bottom-right-radius: 0.125rem;
+        border-left: 0.25rem solid var(--color-primary);
+      }
 
-  &:hover:after {
-    background-color: var(--color-primary);
+      color: var(--color-primary);
+    }
   }
 }

package/src/components/ContextMenu/ContextMenuItem.tsx

@@ -18,21 +18,23 @@ import React, {
   ComponentPropsWithRef,
   createRef,
   ForwardRefRenderFunction,
+  ReactNode,
   RefObject,
   useEffect
 } from "react";
 import classes from "./ContextMenuItem.module.scss";
 
 export interface Props extends Omit<ComponentPropsWithRef<"button">, "onClick"> {
-  children?: string;
+  children?: ReactNode;
   hasFocus?: boolean;
   isSelected?: boolean;
+  showActiveState?: boolean;
   childIndex?: number;
   shouldClick?: boolean;
   contextMenuOpened?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   onFocusChange?: (childIndex: number) => void;
-  onSelectedChange?: (childIndex: number) => void;
+  onSelectedChange?: (event: React.MouseEvent<HTMLButtonElement>, childIndex: number) => void;
 }
 
 const ContextMenuItemComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (
@@ -43,6 +45,7 @@ const ContextMenuItemComponent: ForwardRefRenderFunction<HTMLButtonElement, Prop
     onSelectedChange,
     hasFocus,
     isSelected,
+    showActiveState,
     childIndex,
     contextMenuOpened,
     shouldClick,
@@ -70,13 +73,14 @@ const ContextMenuItemComponent: ForwardRefRenderFunction<HTMLButtonElement, Prop
     <li role="none" className={`${classes["context-menu-item"]} ${className ?? ""}`}>
       <button
         role="menuitem"
+        className={showActiveState ? classes["active"] : undefined}
         {...rest}
         ref={innerButtonRef}
         data-focus={hasFocus}
         tabIndex={-1}
         onClick={event => {
           onClick?.(event);
-          onSelectedChange && childIndex && onSelectedChange(childIndex);
+          childIndex !== undefined && onSelectedChange?.(event, childIndex);
         }}
       >
         {children}