@onewelcome/react-lib-components 5.0.0 → 5.2.0

package/dist/esm/Tooltip/Tooltip.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.esm.js","sources":["../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ComponentPropsWithRef,\n  createRef,\n  ForwardRefRenderFunction,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState\n} from \"react\";\nimport { Icon, Icons } from \"../Icon/Icon\";\nimport classes from \"./Tooltip.module.scss\";\nimport { generateID } from \"../../util/helper\";\nimport { Offset, Placement, usePosition } from \"../../hooks/usePosition\";\nimport { createPortal } from \"react-dom\";\nimport { useGetDomRoot } from \"../../hooks/useGetDomRoot\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  label: ReactNode;\n  title?: string;\n  children: string;\n  domRoot?: HTMLElement;\n  location?: \"left\" | \"right\" | \"top\" | \"bottom\";\n  color?: \"black\" | \"blue\";\n  position?: \"start\" | \"center\" | \"end\";\n}\n\ninterface DefaultPosition {\n  placement: Placement;\n  offset: Offset;\n  transformOrigin: Placement;\n}\n\ntype Location = \"left\" | \"right\" | \"top\" | \"bottom\";\ntype Position = \"start\" | \"end\";\ntype LocationPosition = `${Location}${Capitalize<Position>}` | `${Location}`;\nconst locations: Record<LocationPosition, DefaultPosition> = {\n  left: {\n    placement: { horizontal: \"left\", vertical: \"center\" },\n    offset: { left: 0, right: 12, top: 0, bottom: 0 },\n    transformOrigin: { horizontal: \"right\", vertical: \"center\" }\n  },\n  leftEnd: {\n    placement: { horizontal: \"left\", vertical: \"top\" },\n    offset: { left: 0, right: 12, top: -12, bottom: 0 },\n    transformOrigin: { horizontal: \"right\", vertical: \"top\" }\n  },\n  leftStart: {\n    placement: { horizontal: \"left\", vertical: \"bottom\" },\n    offset: { left: 0, right: 12, top: 0, bottom: -12 },\n    transformOrigin: { horizontal: \"right\", vertical: \"bottom\" }\n  },\n  right: {\n    placement: { horizontal: \"right\", vertical: \"center\" },\n    offset: { left: 12, right: 0, top: 0, bottom: 0 },\n    transformOrigin: { horizontal: \"left\", vertical: \"center\" }\n  },\n  rightEnd: {\n    placement: { horizontal: \"right\", vertical: \"top\" },\n    offset: { left: 12, right: 0, top: -12, bottom: 0 },\n    transformOrigin: { horizontal: \"left\", vertical: \"top\" }\n  },\n  rightStart: {\n    placement: { horizontal: \"right\", vertical: \"bottom\" },\n    offset: { left: 12, right: 0, top: 0, bottom: -12 },\n    transformOrigin: { horizontal: \"left\", vertical: \"bottom\" }\n  },\n  top: {\n    placement: { horizontal: \"center\", vertical: \"top\" },\n    offset: { left: 0, right: 0, top: 0, bottom: 12 },\n    transformOrigin: { horizontal: \"center\", vertical: \"bottom\" }\n  },\n  topEnd: {\n    placement: { horizontal: \"left\", vertical: \"top\" },\n    offset: { left: -12, right: 0, top: 0, bottom: 12 },\n    transformOrigin: { horizontal: \"left\", vertical: \"bottom\" }\n  },\n  topStart: {\n    placement: { horizontal: \"right\", vertical: \"top\" },\n    offset: { left: 0, right: -12, top: 0, bottom: 12 },\n    transformOrigin: { horizontal: \"right\", vertical: \"bottom\" }\n  },\n  bottom: {\n    placement: { horizontal: \"center\", vertical: \"bottom\" },\n    offset: { left: 0, right: 0, top: 12, bottom: 0 },\n    transformOrigin: { horizontal: \"center\", vertical: \"top\" }\n  },\n  bottomEnd: {\n    placement: { horizontal: \"left\", vertical: \"bottom\" },\n    offset: { left: -12, right: 0, top: 12, bottom: 0 },\n    transformOrigin: { horizontal: \"left\", vertical: \"top\" }\n  },\n  bottomStart: {\n    placement: { horizontal: \"right\", vertical: \"bottom\" },\n    offset: { left: 0, right: -12, top: 12, bottom: 0 },\n    transformOrigin: { horizontal: \"right\", vertical: \"top\" }\n  }\n};\n\nconst TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    title,\n    children,\n    className,\n    domRoot,\n    label,\n    location = \"right\",\n    position = \"center\",\n    color = \"black\",\n    ...rest\n  }: Props,\n  ref\n) => {\n  const [identifier] = useState(generateID());\n  const [visible, setVisible] = useState(false);\n  const wrappingDivRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();\n  const { root } = useGetDomRoot(domRoot, wrappingDivRef);\n\n  const relativeElement = useRef<HTMLDivElement>(null);\n  const elementToBePositioned = useRef<HTMLDivElement>(null);\n\n  const determinedLocation = useMemo(() => {\n    if (position === \"center\") {\n      return location;\n    }\n\n    return `${location}${position.charAt(0).toUpperCase() + position.slice(1)}` as LocationPosition;\n  }, [location, position]);\n\n  const { top, bottom, right, left, calculatePosition } = usePosition({\n    relativeElement: relativeElement,\n    elementToBePositioned: elementToBePositioned,\n    placement: locations[determinedLocation].placement,\n    offset: locations[determinedLocation].offset,\n    transformOrigin: locations[determinedLocation].transformOrigin\n  });\n\n  useEffect(() => {\n    if (!visible) return;\n\n    function escapePressHandler(event: KeyboardEvent) {\n      if (event.key === \"Escape\") {\n        setVisible(false);\n      }\n    }\n\n    document.addEventListener(\"keyup\", escapePressHandler);\n\n    return () => {\n      document.removeEventListener(\"keyup\", escapePressHandler);\n    };\n  }, [visible]);\n\n  useLayoutEffect(() => {\n    calculatePosition();\n  }, [visible]);\n\n  const renderChildren = () => {\n    if (React.isValidElement(label)) {\n      return React.cloneElement(label as ReactElement, {\n        onFocus: () => setVisible(true),\n        onBlur: () => setVisible(false),\n        \"aria-describedby\": identifier,\n        tabIndex: 0,\n        className: classes[\"label\"]\n      });\n    }\n\n    return (\n      <span\n        className={classes[\"label\"]}\n        tabIndex={0}\n        onFocus={() => setVisible(true)}\n        onBlur={() => setVisible(false)}\n        aria-describedby={identifier}\n      >\n        {label}\n      </span>\n    );\n  };\n\n  const tooltipClasses = `${classes[\"tooltip\"]} ${classes[color]} ${\n    visible ? classes[\"visible\"] : \"\"\n  } ${classes[determinedLocation.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, \"$1-$2\").toLowerCase()]}`;\n\n  return (\n    <div {...rest} ref={wrappingDivRef} className={`${classes.wrapper} ${className ?? \"\"}`}>\n      {renderChildren()}\n      <div className={`${classes[\"tooltip-wrapper\"]}`}>\n        <Icon\n          ref={relativeElement}\n          tag=\"div\"\n          onMouseEnter={() => setVisible(true)}\n          onMouseLeave={() => setVisible(false)}\n          icon={Icons.InfoCircle}\n          className={classes.icon}\n        />\n        {createPortal(\n          <div\n            ref={elementToBePositioned}\n            style={{\n              ...rest.style,\n              top: top,\n              left: left,\n              right: right,\n              bottom: bottom\n            }}\n            aria-hidden={!visible}\n            id={identifier}\n            className={tooltipClasses}\n          >\n            {title && <span className={classes[\"tooltip-title\"]}>{title}</span>}\n            {children}\n          </div>,\n          root\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const Tooltip = React.forwardRef(TooltipComponent);\n"],"names":["locations","left","placement","horizontal","vertical","offset","right","top","bottom","transformOrigin","leftEnd","leftStart","rightEnd","rightStart","topEnd","topStart","bottomEnd","bottomStart","TooltipComponent","title","children","className","domRoot","label","location","position","color","rest","ref","identifier","useState","generateID","visible","setVisible","wrappingDivRef","createRef","root","useGetDomRoot","relativeElement","useRef","elementToBePositioned","determinedLocation","useMemo","charAt","toUpperCase","slice","calculatePosition","usePosition","useEffect","escapePressHandler","event","key","document","addEventListener","removeEventListener","useLayoutEffect","renderChildren","React","isValidElement","cloneElement","onFocus","onBlur","tabIndex","classes","createElement","tooltipClasses","replace","toLowerCase","wrapper","Icon","tag","onMouseEnter","onMouseLeave","icon","Icons","InfoCircle","createPortal","style","id","Tooltip","forwardRef"],"mappings":"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"}
+{"version":3,"file":"Tooltip.esm.js","sources":["../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ComponentPropsWithRef,\n  createRef,\n  ForwardRefRenderFunction,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState\n} from \"react\";\nimport { Icon, Icons } from \"../Icon/Icon\";\nimport classes from \"./Tooltip.module.scss\";\nimport { generateID } from \"../../util/helper\";\nimport { Offset, Placement, usePosition } from \"../../hooks/usePosition\";\nimport { createPortal } from \"react-dom\";\nimport { useGetDomRoot } from \"../../hooks/useGetDomRoot\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  label: ReactNode;\n  title?: string;\n  children: string;\n  domRoot?: HTMLElement;\n  location?: \"left\" | \"right\" | \"top\" | \"bottom\";\n  color?: \"black\" | \"blue\";\n  position?: \"start\" | \"center\" | \"end\";\n}\n\ninterface DefaultPosition {\n  placement: Placement;\n  offset: Offset;\n  transformOrigin: Placement;\n}\n\ntype Location = \"left\" | \"right\" | \"top\" | \"bottom\";\ntype Position = \"start\" | \"end\";\ntype LocationPosition = `${Location}${Capitalize<Position>}` | `${Location}`;\nconst locations: Record<LocationPosition, DefaultPosition> = {\n  left: {\n    placement: { horizontal: \"left\", vertical: \"center\" },\n    offset: { left: 0, right: 12, top: 0, bottom: 0 },\n    transformOrigin: { horizontal: \"right\", vertical: \"center\" }\n  },\n  leftEnd: {\n    placement: { horizontal: \"left\", vertical: \"top\" },\n    offset: { left: 0, right: 12, top: -12, bottom: 0 },\n    transformOrigin: { horizontal: \"right\", vertical: \"top\" }\n  },\n  leftStart: {\n    placement: { horizontal: \"left\", vertical: \"bottom\" },\n    offset: { left: 0, right: 12, top: 0, bottom: -12 },\n    transformOrigin: { horizontal: \"right\", vertical: \"bottom\" }\n  },\n  right: {\n    placement: { horizontal: \"right\", vertical: \"center\" },\n    offset: { left: 12, right: 0, top: 0, bottom: 0 },\n    transformOrigin: { horizontal: \"left\", vertical: \"center\" }\n  },\n  rightEnd: {\n    placement: { horizontal: \"right\", vertical: \"top\" },\n    offset: { left: 12, right: 0, top: -12, bottom: 0 },\n    transformOrigin: { horizontal: \"left\", vertical: \"top\" }\n  },\n  rightStart: {\n    placement: { horizontal: \"right\", vertical: \"bottom\" },\n    offset: { left: 12, right: 0, top: 0, bottom: -12 },\n    transformOrigin: { horizontal: \"left\", vertical: \"bottom\" }\n  },\n  top: {\n    placement: { horizontal: \"center\", vertical: \"top\" },\n    offset: { left: 0, right: 0, top: 0, bottom: 12 },\n    transformOrigin: { horizontal: \"center\", vertical: \"bottom\" }\n  },\n  topEnd: {\n    placement: { horizontal: \"left\", vertical: \"top\" },\n    offset: { left: -12, right: 0, top: 0, bottom: 12 },\n    transformOrigin: { horizontal: \"left\", vertical: \"bottom\" }\n  },\n  topStart: {\n    placement: { horizontal: \"right\", vertical: \"top\" },\n    offset: { left: 0, right: -12, top: 0, bottom: 12 },\n    transformOrigin: { horizontal: \"right\", vertical: \"bottom\" }\n  },\n  bottom: {\n    placement: { horizontal: \"center\", vertical: \"bottom\" },\n    offset: { left: 0, right: 0, top: 12, bottom: 0 },\n    transformOrigin: { horizontal: \"center\", vertical: \"top\" }\n  },\n  bottomEnd: {\n    placement: { horizontal: \"left\", vertical: \"bottom\" },\n    offset: { left: -12, right: 0, top: 12, bottom: 0 },\n    transformOrigin: { horizontal: \"left\", vertical: \"top\" }\n  },\n  bottomStart: {\n    placement: { horizontal: \"right\", vertical: \"bottom\" },\n    offset: { left: 0, right: -12, top: 12, bottom: 0 },\n    transformOrigin: { horizontal: \"right\", vertical: \"top\" }\n  }\n};\n\nconst TooltipComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    title,\n    children,\n    className,\n    domRoot,\n    label,\n    location = \"right\",\n    position = \"center\",\n    color = \"black\",\n    ...rest\n  }: Props,\n  ref\n) => {\n  const [identifier] = useState(generateID());\n  const [visible, setVisible] = useState(false);\n  const wrappingDivRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();\n  const { root } = useGetDomRoot(domRoot, wrappingDivRef);\n\n  const relativeElement = useRef<HTMLDivElement>(null);\n  const elementToBePositioned = useRef<HTMLDivElement>(null);\n\n  const determinedLocation = useMemo(() => {\n    if (position === \"center\") {\n      return location;\n    }\n\n    return `${location}${position.charAt(0).toUpperCase() + position.slice(1)}` as LocationPosition;\n  }, [location, position]);\n\n  const { top, bottom, right, left, calculatePosition } = usePosition({\n    relativeElement: relativeElement,\n    elementToBePositioned: elementToBePositioned,\n    placement: locations[determinedLocation].placement,\n    offset: locations[determinedLocation].offset,\n    transformOrigin: locations[determinedLocation].transformOrigin\n  });\n\n  useEffect(() => {\n    if (!visible) return;\n\n    const escapePressHandler = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setVisible(false);\n      }\n    };\n\n    document.addEventListener(\"keyup\", escapePressHandler);\n\n    return () => {\n      document.removeEventListener(\"keyup\", escapePressHandler);\n    };\n  }, [visible]);\n\n  useLayoutEffect(() => {\n    calculatePosition();\n  }, [visible]);\n\n  const renderChildren = () => {\n    if (React.isValidElement(label)) {\n      return React.cloneElement(label as ReactElement, {\n        onFocus: () => setVisible(true),\n        onBlur: () => setVisible(false),\n        \"aria-describedby\": identifier,\n        tabIndex: 0,\n        className: classes[\"label\"]\n      });\n    }\n\n    return (\n      <span\n        className={classes[\"label\"]}\n        tabIndex={0}\n        onFocus={() => setVisible(true)}\n        onBlur={() => setVisible(false)}\n        aria-describedby={identifier}\n      >\n        {label}\n      </span>\n    );\n  };\n\n  const tooltipClasses = `${classes[\"tooltip\"]} ${classes[color]} ${\n    visible ? classes[\"visible\"] : \"\"\n  } ${classes[determinedLocation.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, \"$1-$2\").toLowerCase()]}`;\n\n  return (\n    <div {...rest} ref={wrappingDivRef} className={`${classes.wrapper} ${className ?? \"\"}`}>\n      {renderChildren()}\n      <div className={`${classes[\"tooltip-wrapper\"]}`}>\n        <Icon\n          ref={relativeElement}\n          tag=\"div\"\n          onMouseEnter={() => setVisible(true)}\n          onMouseLeave={() => setVisible(false)}\n          icon={Icons.InfoCircle}\n          className={classes.icon}\n        />\n        {createPortal(\n          <div\n            ref={elementToBePositioned}\n            style={{\n              ...rest.style,\n              top: top,\n              left: left,\n              right: right,\n              bottom: bottom\n            }}\n            aria-hidden={!visible}\n            id={identifier}\n            className={tooltipClasses}\n          >\n            {title && <span className={classes[\"tooltip-title\"]}>{title}</span>}\n            {children}\n          </div>,\n          root\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const Tooltip = React.forwardRef(TooltipComponent);\n"],"names":["locations","left","placement","horizontal","vertical","offset","right","top","bottom","transformOrigin","leftEnd","leftStart","rightEnd","rightStart","topEnd","topStart","bottomEnd","bottomStart","TooltipComponent","title","children","className","domRoot","label","location","position","color","rest","ref","identifier","useState","generateID","visible","setVisible","wrappingDivRef","createRef","root","useGetDomRoot","relativeElement","useRef","elementToBePositioned","determinedLocation","useMemo","charAt","toUpperCase","slice","calculatePosition","usePosition","useEffect","escapePressHandler","event","key","document","addEventListener","removeEventListener","useLayoutEffect","renderChildren","React","isValidElement","cloneElement","onFocus","onBlur","tabIndex","classes","createElement","tooltipClasses","replace","toLowerCase","wrapper","Icon","tag","onMouseEnter","onMouseLeave","icon","Icons","InfoCircle","createPortal","style","id","Tooltip","forwardRef"],"mappings":"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"}

package/dist/esm/Wizard/Wizard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Wizard.esm.js","sources":["../../../../../src/components/Wizard/Wizard.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { Fragment, useContext, useEffect } from \"react\";\nimport { Step } from \"./BaseWizardSteps/BaseWizardSteps\";\nimport { WizardStateContext, WizardStateProvider } from \"./WizardStateProvider\";\nimport { setWizardState } from \"./wizardStateReducer\";\n\nexport type WizardMode = \"add\" | \"edit\";\n\nexport interface Props {\n  steps: Step[];\n  mode: WizardMode;\n  initialStepNo?: number;\n  onStepChange: (stepNo: number) => void;\n  children: React.ReactNode;\n}\n\nconst useSetWizardState = (steps: Step[], mode: WizardMode) => {\n  const { dispatch } = useContext(WizardStateContext);\n\n  useEffect(() => {\n    dispatch(setWizardState(steps, mode));\n  }, [steps, mode]);\n};\n\nconst useStepChanging = (onStepChange: (stepNo: number) => void) => {\n  const {\n    state: { currentStepNo }\n  } = useContext(WizardStateContext);\n\n  useEffect(() => {\n    onStepChange(currentStepNo);\n  }, [currentStepNo]);\n};\n\nconst WizardContent = ({ steps, mode, onStepChange, children }: Props) => {\n  useSetWizardState(steps, mode);\n  useStepChanging(onStepChange);\n\n  return <Fragment>{children}</Fragment>;\n};\n\nexport const Wizard = (props: Props) => {\n  const { steps, initialStepNo: currentStepNo = 0, mode } = props;\n  return (\n    <WizardStateProvider initialState={{ steps, currentStepNo, mode }}>\n      <WizardContent {...props} />\n    </WizardStateProvider>\n  );\n};\n"],"names":["useSetWizardState","steps","mode","dispatch","useContext","WizardStateContext","useEffect","setWizardState","useStepChanging","onStepChange","state","currentStepNo","WizardContent","children","React","createElement","Fragment","Wizard","props","initialStepNo","WizardStateProvider","initialState"],"mappings":"2NA+BA,MAAMA,EAAoB,CAACC,EAAeC,KACxC,MAAMC,SAAEA,GAAaC,EAAWC,GAEhCC,GAAU,KACRH,EAASI,EAAeN,EAAOC,GAAM,GACpC,CAACD,EAAOC,GAAM,EAGnB,MAAMM,EAAmBC,IACvB,MACEC,OAAOC,cAAEA,IACPP,EAAWC,GAEfC,GAAU,KACRG,EAAaE,EAAc,GAC1B,CAACA,GAAe,EAGrB,MAAMC,EAAgB,EAAGX,QAAOC,OAAMO,eAAcI,eAClDb,EAAkBC,EAAOC,GACzBM,EAAgBC,GAEhB,OAAOK,EAACC,cAAAC,EAAU,KAAAH,EAAoB,EAG3B,MAAAI,EAAUC,IACrB,MAAMjB,MAAEA,EAAOkB,cAAeR,EAAgB,EAACT,KAAEA,GAASgB,EAC1D,OACEJ,EAAAC,cAACK,EAAmB,CAACC,aAAc,CAAEpB,QAAOU,gBAAeT,SACzDY,EAAAC,cAACH,EAAkB,IAAAM,IAErB"}
+{"version":3,"file":"Wizard.esm.js","sources":["../../../../../src/components/Wizard/Wizard.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { Fragment, useContext, useEffect } from \"react\";\nimport { Step } from \"./BaseWizardSteps/BaseWizardSteps\";\nimport { WizardStateContext, WizardStateProvider } from \"./WizardStateProvider\";\nimport { setWizardState } from \"./wizardStateReducer\";\n\nexport type WizardMode = \"add\" | \"edit\";\n\nexport interface Props {\n  steps: Step[];\n  mode: WizardMode;\n  initialStepNo?: number;\n  onStepChange: (stepNo: number) => void;\n  children: React.ReactNode;\n}\n\nconst useSetWizardState = (steps: Step[], mode: WizardMode) => {\n  const { dispatch } = useContext(WizardStateContext);\n\n  useEffect(() => {\n    dispatch(setWizardState(steps, mode));\n  }, [steps, mode]);\n};\n\nconst useStepChanging = (onStepChange: (stepNo: number) => void) => {\n  const {\n    state: { currentStepNo }\n  } = useContext(WizardStateContext);\n\n  useEffect(() => {\n    onStepChange(currentStepNo);\n  }, [currentStepNo]);\n};\n\n/**\n * @deprecated\n */\nconst WizardContent = ({ steps, mode, onStepChange, children }: Props) => {\n  useSetWizardState(steps, mode);\n  useStepChanging(onStepChange);\n\n  return <Fragment>{children}</Fragment>;\n};\n\nexport const Wizard = (props: Props) => {\n  const { steps, initialStepNo: currentStepNo = 0, mode } = props;\n  return (\n    <WizardStateProvider initialState={{ steps, currentStepNo, mode }}>\n      <WizardContent {...props} />\n    </WizardStateProvider>\n  );\n};\n"],"names":["useSetWizardState","steps","mode","dispatch","useContext","WizardStateContext","useEffect","setWizardState","useStepChanging","onStepChange","state","currentStepNo","WizardContent","children","React","createElement","Fragment","Wizard","props","initialStepNo","WizardStateProvider","initialState"],"mappings":"2NA+BA,MAAMA,EAAoB,CAACC,EAAeC,KACxC,MAAMC,SAAEA,GAAaC,EAAWC,GAEhCC,GAAU,KACRH,EAASI,EAAeN,EAAOC,GAAM,GACpC,CAACD,EAAOC,GAAM,EAGnB,MAAMM,EAAmBC,IACvB,MACEC,OAAOC,cAAEA,IACPP,EAAWC,GAEfC,GAAU,KACRG,EAAaE,EAAc,GAC1B,CAACA,GAAe,EAMrB,MAAMC,EAAgB,EAAGX,QAAOC,OAAMO,eAAcI,eAClDb,EAAkBC,EAAOC,GACzBM,EAAgBC,GAEhB,OAAOK,EAACC,cAAAC,EAAU,KAAAH,EAAoB,EAG3B,MAAAI,EAAUC,IACrB,MAAMjB,MAAEA,EAAOkB,cAAeR,EAAgB,EAACT,KAAEA,GAASgB,EAC1D,OACEJ,EAAAC,cAACK,EAAmB,CAACC,aAAc,CAAEpB,QAAOU,gBAAeT,SACzDY,EAAAC,cAACH,EAAkB,IAAAM,IAErB"}

package/dist/esm/Wizard/WizardActions/WizardActions.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardActions.esm.js","sources":["../../../../../../src/components/Wizard/WizardActions/WizardActions.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { Fragment, useContext, useMemo } from \"react\";\nimport { Button, Props as ButtonProps } from \"../../Button/Button\";\nimport { Step } from \"../BaseWizardSteps/BaseWizardSteps\";\nimport { WizardMode } from \"../Wizard\";\nimport { WizardStateContext } from \"../WizardStateProvider\";\nimport { changeCurrentStepNo } from \"../wizardStateReducer\";\n\nexport interface Props extends React.HTMLProps<HTMLDivElement> {\n  actions: {\n    previous: {\n      label: string;\n      onClick: () => void;\n      previousButtonProps?: ButtonProps;\n    };\n    next: {\n      label: string;\n      onClick: (currentStepNo: number) => boolean;\n      nextButtonProps?: ButtonProps;\n    };\n    saveAndClose: {\n      label: string;\n      onClick: (currentStepNo: number) => void;\n      saveAndCloseButtonProps?: ButtonProps;\n    };\n  };\n}\n\nconst calculateNextStepNo = (steps: Step[], currentStepNo: number) => () =>\n  steps.findIndex((step, stepNo) => stepNo > currentStepNo && !step.disabled);\n\nconst calculatePrevStepNo = (steps: Step[], currentStepNo: number) => () => {\n  const reversedCurrentStepNo = steps.length - 1 - currentStepNo;\n  const reversedPrevStepNo = [...steps]\n    .reverse()\n    .findIndex((step, stepNo) => stepNo > reversedCurrentStepNo && !step.disabled);\n  if (reversedPrevStepNo > 0) {\n    return steps.length - 1 - reversedPrevStepNo;\n  }\n  return -1;\n};\n\nconst useNextStepNo = (mode: WizardMode, currentStepNo: number, steps: Step[]) =>\n  useMemo(calculateNextStepNo(steps, currentStepNo), [mode, currentStepNo, steps]);\n\nconst usePreviousStepNo = (mode: WizardMode, currentStepNo: number, steps: Step[]) =>\n  useMemo(calculatePrevStepNo(steps, currentStepNo), [mode, currentStepNo, steps]);\n\nexport const WizardActions = ({ actions }: Props) => {\n  const {\n    state: { mode, steps, currentStepNo },\n    dispatch\n  } = useContext(WizardStateContext);\n  const nextStepNo = useNextStepNo(mode, currentStepNo, steps);\n  const hasNextStep = nextStepNo !== -1;\n  const previousStepNo = usePreviousStepNo(mode, currentStepNo, steps);\n  const hasPreviousStep = previousStepNo !== -1;\n  const isLastStepOrEditMode = !hasNextStep || mode === \"edit\";\n\n  const changeStepNo = (direction: \"forward\" | \"backward\") => {\n    if (direction === \"forward\") {\n      hasNextStep && dispatch(changeCurrentStepNo(nextStepNo));\n    } else {\n      hasPreviousStep && dispatch(changeCurrentStepNo(previousStepNo));\n    }\n  };\n\n  const onNextWrapper = () => {\n    actions.next.onClick(currentStepNo) && changeStepNo(\"forward\");\n  };\n\n  const onPreviousWrapper = () => {\n    actions.previous.onClick?.();\n    changeStepNo(\"backward\");\n  };\n\n  const onSaveAndCloseWrapper = () => {\n    actions.saveAndClose.onClick(currentStepNo);\n  };\n\n  return (\n    <Fragment>\n      {hasPreviousStep && (\n        <Button variant=\"outline\" onClick={onPreviousWrapper}>\n          {actions.previous.label}\n        </Button>\n      )}\n      {hasNextStep && (\n        <Button variant={mode === \"edit\" ? \"outline\" : \"fill\"} onClick={onNextWrapper}>\n          {actions.next.label}\n        </Button>\n      )}\n      {isLastStepOrEditMode && (\n        <Button onClick={onSaveAndCloseWrapper}>{actions.saveAndClose.label}</Button>\n      )}\n    </Fragment>\n  );\n};\n"],"names":["calculateNextStepNo","steps","currentStepNo","findIndex","step","stepNo","disabled","calculatePrevStepNo","reversedCurrentStepNo","length","reversedPrevStepNo","reverse","useNextStepNo","mode","useMemo","usePreviousStepNo","WizardActions","actions","state","dispatch","useContext","WizardStateContext","nextStepNo","hasNextStep","previousStepNo","hasPreviousStep","isLastStepOrEditMode","changeStepNo","direction","changeCurrentStepNo","onNextWrapper","next","onClick","onPreviousWrapper","_b","previous","onSaveAndCloseWrapper","saveAndClose","React","Fragment","createElement","Button","variant","label"],"mappings":"2PA2CA,MAAMA,EAAsB,CAACC,EAAeC,IAA0B,IACpED,EAAME,WAAU,CAACC,EAAMC,IAAWA,EAASH,IAAkBE,EAAKE,WAEpE,MAAMC,EAAsB,CAACN,EAAeC,IAA0B,KACpE,MAAMM,EAAwBP,EAAMQ,OAAS,EAAIP,EACjD,MAAMQ,EAAqB,IAAIT,GAC5BU,UACAR,WAAU,CAACC,EAAMC,IAAWA,EAASG,IAA0BJ,EAAKE,WACvE,GAAII,EAAqB,EACvB,OAAOT,EAAMQ,OAAS,EAAIC,EAE5B,OAAQ,CAAC,EAGX,MAAME,EAAgB,CAACC,EAAkBX,EAAuBD,IAC9Da,EAAQd,EAAoBC,EAAOC,GAAgB,CAACW,EAAMX,EAAeD,IAE3E,MAAMc,EAAoB,CAACF,EAAkBX,EAAuBD,IAClEa,EAAQP,EAAoBN,EAAOC,GAAgB,CAACW,EAAMX,EAAeD,UAE9De,EAAgB,EAAGC,cAC9B,MACEC,OAAOL,KAAEA,EAAIZ,MAAEA,EAAKC,cAAEA,GAAeiB,SACrCA,GACEC,EAAWC,GACf,MAAMC,EAAaV,EAAcC,EAAMX,EAAeD,GACtD,MAAMsB,EAAcD,KAAgB,EACpC,MAAME,EAAiBT,EAAkBF,EAAMX,EAAeD,GAC9D,MAAMwB,EAAkBD,KAAoB,EAC5C,MAAME,GAAwBH,GAAeV,IAAS,OAEtD,MAAMc,EAAgBC,IACpB,GAAIA,IAAc,UAChBL,GAAeJ,EAASU,EAAoBP,SAE5CG,GAAmBN,EAASU,EAAoBL,GACjD,EAGH,MAAMM,EAAgB,KACpBb,EAAQc,KAAKC,QAAQ9B,IAAkByB,EAAa,UAAU,EAGhE,MAAMM,EAAoB,cACxBC,KAAAjB,EAAQkB,UAASH,6CACjBL,EAAa,WAAW,EAG1B,MAAMS,EAAwB,KAC5BnB,EAAQoB,aAAaL,QAAQ9B,EAAc,EAG7C,OACEoC,gBAACC,EAAQ,KACNd,GACCa,EAAAE,cAACC,EAAO,CAAAC,QAAQ,UAAUV,QAASC,GAChChB,EAAQkB,SAASQ,OAGrBpB,GACCe,EAACE,cAAAC,EAAO,CAAAC,QAAS7B,IAAS,OAAS,UAAY,OAAQmB,QAASF,GAC7Db,EAAQc,KAAKY,OAGjBjB,GACCY,EAAAE,cAACC,EAAO,CAAAT,QAASI,GAAwBnB,EAAQoB,aAAaM,OAGlE"}
+{"version":3,"file":"WizardActions.esm.js","sources":["../../../../../../src/components/Wizard/WizardActions/WizardActions.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { Fragment, useContext, useMemo } from \"react\";\nimport { Button, Props as ButtonProps } from \"../../Button/Button\";\nimport { Step } from \"../BaseWizardSteps/BaseWizardSteps\";\nimport { WizardMode } from \"../Wizard\";\nimport { WizardStateContext } from \"../WizardStateProvider\";\nimport { changeCurrentStepNo } from \"../wizardStateReducer\";\n\nexport interface Props extends React.HTMLProps<HTMLDivElement> {\n  actions: {\n    previous: {\n      label: string;\n      onClick: () => void;\n      previousButtonProps?: ButtonProps;\n    };\n    next: {\n      label: string;\n      onClick: (currentStepNo: number) => boolean;\n      nextButtonProps?: ButtonProps;\n    };\n    saveAndClose: {\n      label: string;\n      onClick: (currentStepNo: number) => void;\n      saveAndCloseButtonProps?: ButtonProps;\n    };\n  };\n}\n\nconst calculateNextStepNo = (steps: Step[], currentStepNo: number) => () =>\n  steps.findIndex((step, stepNo) => stepNo > currentStepNo && !step.disabled);\n\nconst calculatePrevStepNo = (steps: Step[], currentStepNo: number) => () => {\n  const reversedCurrentStepNo = steps.length - 1 - currentStepNo;\n  const reversedPrevStepNo = [...steps]\n    .reverse()\n    .findIndex((step, stepNo) => stepNo > reversedCurrentStepNo && !step.disabled);\n  if (reversedPrevStepNo > 0) {\n    return steps.length - 1 - reversedPrevStepNo;\n  }\n  return -1;\n};\n\nconst useNextStepNo = (mode: WizardMode, currentStepNo: number, steps: Step[]) =>\n  useMemo(calculateNextStepNo(steps, currentStepNo), [mode, currentStepNo, steps]);\n\nconst usePreviousStepNo = (mode: WizardMode, currentStepNo: number, steps: Step[]) =>\n  useMemo(calculatePrevStepNo(steps, currentStepNo), [mode, currentStepNo, steps]);\n\n/**\n * @deprecated\n */\nexport const WizardActions = ({ actions }: Props) => {\n  const {\n    state: { mode, steps, currentStepNo },\n    dispatch\n  } = useContext(WizardStateContext);\n  const nextStepNo = useNextStepNo(mode, currentStepNo, steps);\n  const hasNextStep = nextStepNo !== -1;\n  const previousStepNo = usePreviousStepNo(mode, currentStepNo, steps);\n  const hasPreviousStep = previousStepNo !== -1;\n  const isLastStepOrEditMode = !hasNextStep || mode === \"edit\";\n\n  const changeStepNo = (direction: \"forward\" | \"backward\") => {\n    if (direction === \"forward\") {\n      hasNextStep && dispatch(changeCurrentStepNo(nextStepNo));\n    } else {\n      hasPreviousStep && dispatch(changeCurrentStepNo(previousStepNo));\n    }\n  };\n\n  const onNextWrapper = () => {\n    actions.next.onClick(currentStepNo) && changeStepNo(\"forward\");\n  };\n\n  const onPreviousWrapper = () => {\n    actions.previous.onClick?.();\n    changeStepNo(\"backward\");\n  };\n\n  const onSaveAndCloseWrapper = () => {\n    actions.saveAndClose.onClick(currentStepNo);\n  };\n\n  return (\n    <Fragment>\n      {hasPreviousStep && (\n        <Button variant=\"outline\" onClick={onPreviousWrapper}>\n          {actions.previous.label}\n        </Button>\n      )}\n      {hasNextStep && (\n        <Button variant={mode === \"edit\" ? \"outline\" : \"fill\"} onClick={onNextWrapper}>\n          {actions.next.label}\n        </Button>\n      )}\n      {isLastStepOrEditMode && (\n        <Button onClick={onSaveAndCloseWrapper}>{actions.saveAndClose.label}</Button>\n      )}\n    </Fragment>\n  );\n};\n"],"names":["calculateNextStepNo","steps","currentStepNo","findIndex","step","stepNo","disabled","calculatePrevStepNo","reversedCurrentStepNo","length","reversedPrevStepNo","reverse","useNextStepNo","mode","useMemo","usePreviousStepNo","WizardActions","actions","state","dispatch","useContext","WizardStateContext","nextStepNo","hasNextStep","previousStepNo","hasPreviousStep","isLastStepOrEditMode","changeStepNo","direction","changeCurrentStepNo","onNextWrapper","next","onClick","onPreviousWrapper","_b","previous","onSaveAndCloseWrapper","saveAndClose","React","Fragment","createElement","Button","variant","label"],"mappings":"2PA2CA,MAAMA,EAAsB,CAACC,EAAeC,IAA0B,IACpED,EAAME,WAAU,CAACC,EAAMC,IAAWA,EAASH,IAAkBE,EAAKE,WAEpE,MAAMC,EAAsB,CAACN,EAAeC,IAA0B,KACpE,MAAMM,EAAwBP,EAAMQ,OAAS,EAAIP,EACjD,MAAMQ,EAAqB,IAAIT,GAC5BU,UACAR,WAAU,CAACC,EAAMC,IAAWA,EAASG,IAA0BJ,EAAKE,WACvE,GAAII,EAAqB,EACvB,OAAOT,EAAMQ,OAAS,EAAIC,EAE5B,OAAQ,CAAC,EAGX,MAAME,EAAgB,CAACC,EAAkBX,EAAuBD,IAC9Da,EAAQd,EAAoBC,EAAOC,GAAgB,CAACW,EAAMX,EAAeD,IAE3E,MAAMc,EAAoB,CAACF,EAAkBX,EAAuBD,IAClEa,EAAQP,EAAoBN,EAAOC,GAAgB,CAACW,EAAMX,EAAeD,UAK9De,EAAgB,EAAGC,cAC9B,MACEC,OAAOL,KAAEA,EAAIZ,MAAEA,EAAKC,cAAEA,GAAeiB,SACrCA,GACEC,EAAWC,GACf,MAAMC,EAAaV,EAAcC,EAAMX,EAAeD,GACtD,MAAMsB,EAAcD,KAAgB,EACpC,MAAME,EAAiBT,EAAkBF,EAAMX,EAAeD,GAC9D,MAAMwB,EAAkBD,KAAoB,EAC5C,MAAME,GAAwBH,GAAeV,IAAS,OAEtD,MAAMc,EAAgBC,IACpB,GAAIA,IAAc,UAChBL,GAAeJ,EAASU,EAAoBP,SAE5CG,GAAmBN,EAASU,EAAoBL,GACjD,EAGH,MAAMM,EAAgB,KACpBb,EAAQc,KAAKC,QAAQ9B,IAAkByB,EAAa,UAAU,EAGhE,MAAMM,EAAoB,cACxBC,KAAAjB,EAAQkB,UAASH,6CACjBL,EAAa,WAAW,EAG1B,MAAMS,EAAwB,KAC5BnB,EAAQoB,aAAaL,QAAQ9B,EAAc,EAG7C,OACEoC,gBAACC,EAAQ,KACNd,GACCa,EAAAE,cAACC,EAAO,CAAAC,QAAQ,UAAUV,QAASC,GAChChB,EAAQkB,SAASQ,OAGrBpB,GACCe,EAACE,cAAAC,EAAO,CAAAC,QAAS7B,IAAS,OAAS,UAAY,OAAQmB,QAASF,GAC7Db,EAAQc,KAAKY,OAGjBjB,GACCY,EAAAE,cAACC,EAAO,CAAAT,QAASI,GAAwBnB,EAAQoB,aAAaM,OAGlE"}

package/dist/esm/Wizard/WizardStateProvider.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardStateProvider.esm.js","sources":["../../../../../src/components/Wizard/WizardStateProvider.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { createContext, Dispatch, useReducer } from \"react\";\nimport { WizardActions, WizardStateType, reducer } from \"./wizardStateReducer\";\n\nconst WizardStateContext = createContext<{\n  state: WizardStateType;\n  dispatch: Dispatch<WizardActions>;\n}>({\n  state: {} as WizardStateType,\n  dispatch: () => null\n});\n\nexport interface Props {\n  initialState: WizardStateType;\n  children?: React.ReactNode;\n}\n\nconst WizardStateProvider = ({ children, initialState }: Props) => {\n  const [state, dispatch] = useReducer(reducer, initialState);\n  return (\n    <WizardStateContext.Provider value={{ state, dispatch }}>\n      {children}\n    </WizardStateContext.Provider>\n  );\n};\n\nexport { WizardStateProvider, WizardStateContext };\n"],"names":["WizardStateContext","createContext","state","dispatch","WizardStateProvider","children","initialState","useReducer","reducer","React","createElement","Provider","value"],"mappings":"+GAmBM,MAAAA,EAAqBC,EAGxB,CACDC,MAAO,CAAqB,EAC5BC,SAAU,IAAM,OAQZ,MAAAC,EAAsB,EAAGC,WAAUC,mBACvC,MAAOJ,EAAOC,GAAYI,EAAWC,EAASF,GAC9C,OACEG,EAACC,cAAAV,EAAmBW,UAASC,MAAO,CAAEV,QAAOC,aAC1CE,EAEH"}
+{"version":3,"file":"WizardStateProvider.esm.js","sources":["../../../../../src/components/Wizard/WizardStateProvider.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { createContext, Dispatch, useReducer } from \"react\";\nimport { WizardActions, WizardStateType, reducer } from \"./wizardStateReducer\";\n\nconst WizardStateContext = createContext<{\n  state: WizardStateType;\n  dispatch: Dispatch<WizardActions>;\n}>({\n  state: {} as WizardStateType,\n  dispatch: () => null\n});\n\nexport interface Props {\n  initialState: WizardStateType;\n  children?: React.ReactNode;\n}\n\n/**\n * @deprecated\n */\nconst WizardStateProvider = ({ children, initialState }: Props) => {\n  const [state, dispatch] = useReducer(reducer, initialState);\n  return (\n    <WizardStateContext.Provider value={{ state, dispatch }}>\n      {children}\n    </WizardStateContext.Provider>\n  );\n};\n\nexport { WizardStateProvider, WizardStateContext };\n"],"names":["WizardStateContext","createContext","state","dispatch","WizardStateProvider","children","initialState","useReducer","reducer","React","createElement","Provider","value"],"mappings":"+GAmBM,MAAAA,EAAqBC,EAGxB,CACDC,MAAO,CAAqB,EAC5BC,SAAU,IAAM,OAWZ,MAAAC,EAAsB,EAAGC,WAAUC,mBACvC,MAAOJ,EAAOC,GAAYI,EAAWC,EAASF,GAC9C,OACEG,EAACC,cAAAV,EAAmBW,UAASC,MAAO,CAAEV,QAAOC,aAC1CE,EAEH"}

package/dist/esm/Wizard/WizardSteps/WizardSteps.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"WizardSteps.esm.js","sources":["../../../../../../src/components/Wizard/WizardSteps/WizardSteps.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ForwardRefRenderFunction, ComponentPropsWithRef, useContext } from \"react\";\nimport { WizardStateContext } from \"../WizardStateProvider\";\nimport { BaseWizardSteps } from \"../BaseWizardSteps/BaseWizardSteps\";\nimport { changeCurrentStepNo } from \"../wizardStateReducer\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  onStepClick: (currentStepNo: number, selectedStepNo: number) => boolean;\n}\n\nconst WizardStepsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  { onStepClick, ...rest }: Props,\n  ref\n) => {\n  const {\n    state: { currentStepNo, mode, steps },\n    dispatch\n  } = useContext(WizardStateContext);\n\n  const onClick = (selectedStepNo: number) => {\n    onStepClick(currentStepNo, selectedStepNo) && dispatch(changeCurrentStepNo(selectedStepNo));\n  };\n\n  return (\n    <BaseWizardSteps\n      {...rest}\n      ref={ref}\n      onClick={onClick}\n      steps={steps}\n      currentStepNo={currentStepNo}\n      futureStepsClickable={mode === \"edit\"}\n    />\n  );\n};\n\nexport const WizardSteps = React.forwardRef(WizardStepsComponent);\n"],"names":["WizardStepsComponent","onStepClick","rest","ref","state","currentStepNo","mode","steps","dispatch","useContext","WizardStateContext","onClick","selectedStepNo","changeCurrentStepNo","React","createElement","BaseWizardSteps","futureStepsClickable","WizardSteps","forwardRef"],"mappings":"wPAyBA,MAAMA,EAAwE,EAC1EC,iBAAgBC,GAClBC,KAEA,MACEC,OAAOC,cAAEA,EAAaC,KAAEA,EAAIC,MAAEA,GAAOC,SACrCA,GACEC,EAAWC,GAEf,MAAMC,EAAWC,IACfX,EAAYI,EAAeO,IAAmBJ,EAASK,EAAoBD,GAAgB,EAG7F,OACEE,EAAAC,cAACC,EAAe,IACVd,EACJC,IAAKA,EACLQ,QAASA,EACTJ,MAAOA,EACPF,cAAeA,EACfY,qBAAsBX,IAAS,QAEjC,EAGS,MAAAY,EAAcJ,EAAMK,WAAWnB"}
+{"version":3,"file":"WizardSteps.esm.js","sources":["../../../../../../src/components/Wizard/WizardSteps/WizardSteps.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ForwardRefRenderFunction, ComponentPropsWithRef, useContext } from \"react\";\nimport { WizardStateContext } from \"../WizardStateProvider\";\nimport { BaseWizardSteps } from \"../BaseWizardSteps/BaseWizardSteps\";\nimport { changeCurrentStepNo } from \"../wizardStateReducer\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  onStepClick: (currentStepNo: number, selectedStepNo: number) => boolean;\n}\n\nconst WizardStepsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  { onStepClick, ...rest }: Props,\n  ref\n) => {\n  const {\n    state: { currentStepNo, mode, steps },\n    dispatch\n  } = useContext(WizardStateContext);\n\n  const onClick = (selectedStepNo: number) => {\n    onStepClick(currentStepNo, selectedStepNo) && dispatch(changeCurrentStepNo(selectedStepNo));\n  };\n\n  return (\n    <BaseWizardSteps\n      {...rest}\n      ref={ref}\n      onClick={onClick}\n      steps={steps}\n      currentStepNo={currentStepNo}\n      futureStepsClickable={mode === \"edit\"}\n    />\n  );\n};\n\n/**\n * @deprecated\n */\nexport const WizardSteps = React.forwardRef(WizardStepsComponent);\n"],"names":["WizardStepsComponent","onStepClick","rest","ref","state","currentStepNo","mode","steps","dispatch","useContext","WizardStateContext","onClick","selectedStepNo","changeCurrentStepNo","React","createElement","BaseWizardSteps","futureStepsClickable","WizardSteps","forwardRef"],"mappings":"wPAyBA,MAAMA,EAAwE,EAC1EC,iBAAgBC,GAClBC,KAEA,MACEC,OAAOC,cAAEA,EAAaC,KAAEA,EAAIC,MAAEA,GAAOC,SACrCA,GACEC,EAAWC,GAEf,MAAMC,EAAWC,IACfX,EAAYI,EAAeO,IAAmBJ,EAASK,EAAoBD,GAAgB,EAG7F,OACEE,EAAAC,cAACC,EAAe,IACVd,EACJC,IAAKA,EACLQ,QAASA,EACTJ,MAAOA,EACPF,cAAeA,EACfY,qBAAsBX,IAAS,QAEjC,EAMS,MAAAY,EAAcJ,EAAMK,WAAWnB"}

package/dist/esm/src/components/Notifications/BaseModal/useRepeatFocus.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from "react";
+/**
+ * @description This is a hook that will make sure that when a modal is open and the user tabs through the it,
+ * the focus will be repeated and the user will not lose their entire focusable element to an element in the background
+ * that is being blocked by the modal.
+ */
+export declare const useRepeatFocus: (ref: RefObject<HTMLDivElement>) => void;

package/dist/esm/src/components/Stepper/Step.d.ts

@@ -1,6 +1,6 @@
 import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
 export type StepStatus = "waiting" | "current" | "done" | "error";
-export interface Props extends ComponentPropsWithRef<"button"> {
+export interface Props extends Omit<ComponentPropsWithRef<"div">, "onClick"> {
     status: StepStatus;
     label: string;
     caption?: string;
@@ -8,6 +8,8 @@ export interface Props extends ComponentPropsWithRef<"button"> {
     lastStep?: boolean;
     disabled?: boolean;
     direction?: "horizontal" | "vertical";
+    textPosition?: "bottom" | "right";
+    onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
 }
-export declare const StepComponent: ForwardRefRenderFunction<HTMLButtonElement, Props>;
-export declare const Step: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const StepComponent: ForwardRefRenderFunction<HTMLDivElement, Props>;
+export declare const Step: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -3,5 +3,7 @@ import { Props as StepProps } from "./Step";
 export interface Props extends ComponentPropsWithRef<"div"> {
     steps: StepProps[];
     direction: "horizontal" | "vertical";
+    textPosition?: "bottom" | "right";
 }
-export declare const Stepper: ({ steps, direction, ...rest }: Props) => React.JSX.Element;
+export declare const gapBetweenStepsInRem = 0.5;
+export declare const Stepper: ({ steps, direction, textPosition, className, ...rest }: Props) => React.JSX.Element;

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

@@ -19,4 +19,7 @@ export interface Props extends React.HTMLProps<HTMLDivElement> {
         };
     };
 }
+/**
+ * @deprecated
+ */
 export declare const WizardActions: ({ actions }: Props) => React.JSX.Element;

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

@@ -8,5 +8,8 @@ export interface Props {
     initialState: WizardStateType;
     children?: React.ReactNode;
 }
+/**
+ * @deprecated
+ */
 declare const WizardStateProvider: ({ children, initialState }: Props) => React.JSX.Element;
 export { WizardStateProvider, WizardStateContext };

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

@@ -2,4 +2,7 @@ import React, { ComponentPropsWithRef } from "react";
 export interface Props extends ComponentPropsWithRef<"div"> {
     onStepClick: (currentStepNo: number, selectedStepNo: number) => boolean;
 }
+/**
+ * @deprecated
+ */
 export declare const WizardSteps: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -37,6 +37,7 @@ 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 type { Props as StepProps } from "./components/Stepper/Step";
 export { Pagination } from "./components/Pagination/Pagination";
 export type { Props as PaginationProps, PageChangeLabels, PaginationTranslations, PageSize } from "./components/Pagination/Pagination";
 export { useRepeater } from "./hooks/useRepeater";

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "5.0.0",
+  "version": "5.2.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -109,6 +109,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.31",
     "postcss-modules": "^6.0.0",
+    "postcss-url": "^10.1.3",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/src/components/DataGrid/DataGridActions/DataGridColumnsToggle.tsx

@@ -76,7 +76,11 @@ const DataGridColumnsToggleComponent: ForwardRefRenderFunction<HTMLDivElement, P
     >
       {open &&
         createPortal(
-          <div className={classes["backdrop"]} onClick={handleBackdropClick}></div>,
+          <div
+            aria-hidden="true"
+            className={classes["backdrop"]}
+            onClick={handleBackdropClick}
+          ></div>,
           domRoot
         )}
       {open && (

package/src/components/Form/Radio/Radio.tsx

@@ -61,7 +61,9 @@ const RadioComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     parentHelperId
   });
 
-  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent) => {
+  const onChangeHandler = (
+    event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent | React.KeyboardEvent
+  ) => {
     if (disabled) {
       return;
     }

package/src/components/Form/Select/Option.tsx

@@ -83,7 +83,7 @@ const OptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (
         disabled ? classes.disabled : ""
       } ${className ?? ""}`}
       onClick={onSelectHandler}
-      onKeyDownCapture={event => {
+      onKeyDown={event => {
         if (event.code === "Enter") {
           event.stopPropagation();
           event.preventDefault();

package/src/components/Notifications/BaseModal/BaseModal.test.tsx

@@ -18,6 +18,7 @@ import React, { useEffect, useRef } from "react";
 import { BaseModal, Props } from "./BaseModal";
 import { render, getByText, queryByText, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { act } from "react-dom/test-utils";
 
 const classNames = ["class11", "class12"];
 const containerClassNames = ["class21", "class22"];
@@ -36,7 +37,17 @@ const createBaseModal = (params?: (defaultParams: Props) => Props) => {
   if (params) {
     parameters = params(defaultParams);
   }
-  const queries = render(<BaseModal {...parameters} data-testid="BaseModal" />);
+  const queries = render(
+    <BaseModal {...parameters} data-testid="BaseModal">
+      <button>Button 1</button>
+      <button>Button 2</button>
+      <button>Button 3</button>
+      <span>{defaultParams.children}</span>
+      <button>Button 4</button>
+      <button>Button 5</button>
+      <button>Button 6</button>
+    </BaseModal>
+  );
   const slideInModal = queries.getByTestId("BaseModal");
 
   return {
@@ -130,6 +141,30 @@ describe("BaseModal", () => {
     fireEvent.keyDown(modal, { key: "Escape" });
     expect(defaultParams.onClose).toHaveBeenCalledTimes(2);
   });
+
+  it("should repeat focus back to the first button when tabbing through the modal", async () => {
+    const { getByText } = createBaseModal();
+
+    const firstButton = getByText("Button 1");
+    const lastButton = getByText("Button 6");
+
+    await act(() => {
+      firstButton.focus();
+    });
+
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.tab();
+
+    expect(firstButton).toHaveFocus();
+
+    await userEvent.tab({ shift: true });
+
+    expect(lastButton).toHaveFocus();
+  });
 });
 
 describe("ref should work", () => {

package/src/components/Notifications/BaseModal/BaseModal.tsx

@@ -19,12 +19,15 @@ import React, {
   ComponentPropsWithRef,
   useEffect,
   useRef,
-  ReactElement
+  ReactElement,
+  RefObject,
+  createRef
 } from "react";
 import { createPortal } from "react-dom";
 import { useGetDomRoot } from "../../../hooks/useGetDomRoot";
 import classes from "./BaseModal.module.scss";
 import { labelId, descriptionId } from "./BaseModalContext";
+import { useRepeatFocus } from "./useRepeatFocus";
 
 const SCROLL_PROPERTY_NAME = "overflow";
 const SCROLL_PROPERTY_VALUE = "hidden";
@@ -90,6 +93,7 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
 ) => {
   useSetBodyScroll(open);
   const wrappingDivRef = useRef<HTMLDivElement>(null);
+  const modalRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();
   const { root } = useGetDomRoot(domRoot, wrappingDivRef);
 
   const handleEscKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -99,9 +103,11 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     }
   };
 
+  useRepeatFocus(modalRef);
+
   useEffect(() => {
     if (open) {
-      wrappingDivRef.current?.focus();
+      modalRef.current?.focus();
     }
   }, [open]);
 
@@ -122,7 +128,7 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       {createPortal(
         <div
           {...rest}
-          ref={ref}
+          ref={modalRef}
           id={id}
           className={`${classes["modal"]} ${open ? classes["visible"] : ""} ${className}`}
           role="dialog"
@@ -137,6 +143,7 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
         >
           <div
             {...backdropProps}
+            aria-hidden={true}
             className={`${classes["backdrop"]} ${backdropProps?.className ?? ""}`}
             onClick={handleBackdropClick}
           ></div>

package/src/components/Notifications/BaseModal/useRepeatFocus.tsx

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import { RefObject, useEffect } from "react";
+
+/**
+ * @description This is a hook that will make sure that when a modal is open and the user tabs through the it,
+ * the focus will be repeated and the user will not lose their entire focusable element to an element in the background
+ * that is being blocked by the modal.
+ */
+
+export const useRepeatFocus = (ref: RefObject<HTMLDivElement>) => {
+  const getFocusableElement = (
+    element: HTMLElement,
+    position: "first" | "last"
+  ): HTMLElement | null => {
+    const focusableSelectors =
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+    const focusableElements = element.querySelectorAll<HTMLElement>(focusableSelectors);
+
+    if (position === "first") {
+      return focusableElements[0] || null;
+    } else if (position === "last") {
+      return focusableElements[focusableElements.length - 1] || null;
+    }
+
+    return null;
+  };
+
+  useEffect(() => {
+    if (!ref.current || !open) return;
+
+    const lastFocusableElement = getFocusableElement(ref.current, "last");
+    const firstFocusableElement = getFocusableElement(ref.current, "first");
+
+    if (!lastFocusableElement || !firstFocusableElement) return;
+
+    const handleTabKeyPress = (event: KeyboardEvent) => {
+      if (event.key !== "Tab") return;
+
+      if (event.shiftKey) {
+        if (document.activeElement === firstFocusableElement) {
+          event.preventDefault();
+          lastFocusableElement?.focus();
+        }
+      } else if (document.activeElement === lastFocusableElement) {
+        event.preventDefault();
+        firstFocusableElement?.focus();
+      }
+    };
+
+    lastFocusableElement.addEventListener("keydown", handleTabKeyPress);
+    firstFocusableElement.addEventListener("keydown", handleTabKeyPress);
+
+    return () => {
+      lastFocusableElement.removeEventListener("keydown", handleTabKeyPress);
+      firstFocusableElement.removeEventListener("keydown", handleTabKeyPress);
+    };
+  }, [ref, open]);
+};