@onewelcome/react-lib-components 8.6.0 → 8.7.1

package/src/components/DatePicker/DatePicker.module.scss

@@ -38,16 +38,16 @@
   --rdp-nav_button-width: 0.75rem;
   --rdp-nav-height: 2.75rem;
 
-  --rdp-range_middle-background-color: var(--color-primary50);
+  --rdp-range_middle-background-color: var(--color-blue-grey100);
   --rdp-range_middle-color: black;
 
-  --rdp-range_start-color: white;
-  --rdp-range_start-background: var(--color-primary);
-  --rdp-range_start-date-background-color: var(--color-primary);
+  --rdp-range_start-color: var(--color-blue-grey25);
+  --rdp-range_start-background: var(--color-blue-grey500);
+  --rdp-range_start-date-background-color: var(--color-blue-grey500);
 
-  --rdp-range_end-background: var(--color-primary);
-  --rdp-range_end-color: white;
-  --rdp-range_end-date-background-color: var(--color-primary);
+  --rdp-range_end-background: var(--color-blue-grey500);
+  --rdp-range_end-color: var(--color-blue-grey25);
+  --rdp-range_end-date-background-color: var(--color-blue-grey500);
 
   --rdp-week_number-border-radius: var(--button-border-radius);
   --rdp-week_number-border: var(--button-border-radius) solid transparent;
@@ -261,7 +261,30 @@
 }
 
 .rdp-today:not(.rdp-outside) {
-  color: var(--color-primary);
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 67%;
+    left: calc(50% - 0.125rem);
+    width: 0.25rem;
+    height: 0.25rem;
+    border-radius: 0.5rem;
+    background-color: var(--color-blue-grey900);
+  }
+
+  &.rdp-range_end {
+    &::after {
+      background-color: var(--color-blue-grey25);
+    }
+  }
+
+  &.rdp-range_start {
+    &::after {
+      background-color: var(--color-blue-grey25);
+    }
+  }
 }
 
 .rdp-selected {
@@ -275,7 +298,7 @@
 }
 
 .rdp-selected .rdp-day_button {
-  border: var(--button-border-radius) solid var(--color-primary);
+  border: var(--button-border-radius) solid var(--color-blue-grey500);
 }
 
 .rdp-outside {

package/src/components/DatePicker/DatePicker.tsx

@@ -15,7 +15,14 @@
  */
 
 import React, { ComponentPropsWithoutRef, Fragment, useEffect, useState } from "react";
-import { ClassNames, DateRange, DayPicker, Locale, PropsBase } from "react-day-picker";
+import {
+  ClassNames,
+  DateRange,
+  DayPicker,
+  Locale,
+  PropsBase,
+  CustomComponents
+} from "react-day-picker";
 import classes from "./DatePicker.module.scss";
 import * as locales from "date-fns/locale";
 
@@ -25,10 +32,15 @@ export interface Props extends ComponentPropsWithoutRef<any> {
   value: Date | DateRange | undefined;
   required?: boolean;
   locale?: keyof typeof locales;
+  numberOfMonths?: number;
+  components?: Partial<CustomComponents>;
+  disabled?: boolean;
 }
 
 export const DatePicker = ({ onSelect, value, required, mode, locale, ...rest }: Props) => {
   const [dayPickerLocale, setDayPickerLocale] = useState<Locale>(locales.enGB);
+  //we have to specify the endMonth value. Otherwise the date range picker doesn't let us to navigate between years
+  const endMonth = new Date(3000, 12);
 
   useEffect(() => {
     try {
@@ -66,6 +78,7 @@ export const DatePicker = ({ onSelect, value, required, mode, locale, ...rest }:
           {...rest}
           {...commonProps}
           mode={mode}
+          endMonth={endMonth}
           onSelect={onSelect}
           selected={value as Date | undefined}
         ></DayPicker>
@@ -74,6 +87,7 @@ export const DatePicker = ({ onSelect, value, required, mode, locale, ...rest }:
           {...rest}
           {...commonProps}
           mode={mode}
+          endMonth={endMonth}
           onSelect={onSelect}
           selected={value as DateRange | undefined}
         />

package/src/components/Form/FormGroup/FormGroup.tsx

@@ -28,6 +28,7 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   errorMessageIconPosition?: "before" | "after";
   errorMessage?: string;
   errorId?: string;
+  errorMessageProps?: ComponentPropsWithRef<"span">;
   helperText?: string;
   helperId?: string;
   helperProps?: HelperProps;
@@ -43,6 +44,7 @@ const FormGroupComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     errorId,
     errorMessageIcon,
     errorMessageIconPosition = "before",
+    errorMessageProps,
     helperText,
     helperId,
     helperProps,
@@ -74,7 +76,10 @@ const FormGroupComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
             </FormHelperText>
           )}
           {error && errorMessage && (
-            <span className={classes["error-message"]}>
+            <span
+              {...errorMessageProps}
+              className={`${classes["error-message"]} ${errorMessageProps?.className ? errorMessageProps.className : ""}`}
+            >
               <span id={errorId} className={classes.message}>
                 {errorMessageIcon && errorMessageIconPosition === "before" && (
                   <Icon

package/src/components/Form/FormSelectorWrapper/FormSelectorWrapper.tsx

@@ -64,7 +64,7 @@ const FormSelectorWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Pro
       }`}
     >
       <div {...containerProps}>{children}</div>
-      {(helperText || helperProps?.children) && (
+      {(errorMessage || helperText || helperProps?.children) && (
         <FormHelperText
           {...helperProps}
           ref={helperRef}
@@ -73,7 +73,7 @@ const FormSelectorWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Pro
             error ? classes["error"] : ""
           }`}
         >
-          {error ? (
+          {error && errorMessage ? (
             <span className={classes["error-message"]} id={errorId}>
               {errorMessage}
             </span>

package/src/components/Form/Input/Input.module.scss

@@ -124,7 +124,7 @@
 
 .input {
   padding: 0;
-  height: 40px;
+  height: 44px;
   color: var(--color-blue-grey900);
   font-size: var(--form-control-font-size);
   font-family: var(--font-family);

package/src/components/Form/Select/MultiSelect/MultiSelect.module.scss

@@ -59,7 +59,7 @@ $listItemHeight: 2.5rem;
   .custom-select {
     box-sizing: border-box;
     width: 100%;
-    min-height: calc(2.625rem - (2 * var(--input-border-width)));
+    min-height: calc(2.875rem - (2 * var(--input-border-width)));
     padding: 0 calc(variables.$form-element-horizontal-padding-mobile - var(--input-border-width));
     background-color: transparent;
     border-color: var(--color-blue-grey500);

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

@@ -18,14 +18,13 @@ import classes from "./MultiSelect.module.scss";
 
 import React, {
   ForwardRefRenderFunction,
-  Fragment,
   ReactElement,
   createRef,
   useEffect,
   useRef,
   useState
 } from "react";
-import { useBodyClick } from "../../../../hooks/useBodyClick";
+import { useClickOutside } from "../../../../hooks/useClickOutside";
 import { useDetermineStatusIcon } from "../../../../hooks/useDetermineStatusIcon";
 import readyclasses from "../../../../readyclasses.module.scss";
 import { escapeRegExp, filterProps, generateID } from "../../../../util/helper";
@@ -274,15 +273,16 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
     syncSelectedOption(value);
   }, [value]);
 
-  useBodyClick(
-    (event: MouseEvent) => !(event.target as Element).closest(".custom-select") && expanded,
-    () => {
-      setExpanded(false);
-      setListPosition(Position.Below);
-      setOpacity(0);
-    },
-    expanded
-  );
+  const myElementRef = useRef<HTMLDivElement>(null);
+
+  useClickOutside(myElementRef, () => {
+    if (!expanded) {
+      return;
+    }
+    setExpanded(false);
+    setListPosition(Position.Below);
+    setOpacity(0);
+  }, [expanded]);
 
   const additionalClasses = [];
   expanded && additionalClasses.push(classes.expanded);
@@ -329,7 +329,7 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
 
   /** The native select is purely for external form libraries. We use it to emit an onChange with native select event object so they know exactly what's happening. */
   return (
-    <Fragment>
+    <div ref={myElementRef}>
       <select
         {...filterProps(rest, /^data-/, false)}
         tabIndex={-1}
@@ -388,7 +388,7 @@ const MultiSelectComponent: ForwardRefRenderFunction<HTMLSelectElement, MultiSel
         </div>
         {listPosition === Position.Below ? optionsElement : undefined}
       </div>
-    </Fragment>
+    </div>
   );
 };
 

package/src/components/Form/Select/SingleSelect/Select.module.scss

@@ -59,7 +59,7 @@ $listItemHeight: 2.5rem;
   .custom-select {
     position: relative;
     width: 100%;
-    min-height: calc(2.625rem - (2 * var(--input-border-width)));
+    min-height: calc(2.875rem - (2 * var(--input-border-width)));
     padding: 0 calc(variables.$form-element-horizontal-padding-mobile - var(--input-border-width));
     background-color: transparent;
     border-color: var(--color-blue-grey500);

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

@@ -19,13 +19,12 @@ import classes from "./Select.module.scss";
 import React, {
   createRef,
   ForwardRefRenderFunction,
-  Fragment,
   ReactElement,
   useEffect,
   useRef,
   useState
 } from "react";
-import { useBodyClick } from "../../../../hooks/useBodyClick";
+import { useClickOutside } from "../../../../hooks/useClickOutside";
 import { useDetermineStatusIcon } from "../../../../hooks/useDetermineStatusIcon";
 import readyclasses from "../../../../readyclasses.module.scss";
 import { filterProps } from "../../../../util/helper";
@@ -204,15 +203,16 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
     syncDisplayValue(value);
   }, [value]);
 
-  useBodyClick(
-    (event: MouseEvent) => !(event.target as Element).closest(".custom-select") && expanded,
-    () => {
-      setExpanded(false);
-      setListPosition(Position.Below);
-      setOpacity(0);
-    },
-    expanded
-  );
+  const myElementRef = useRef<HTMLDivElement>(null);
+
+  useClickOutside(myElementRef, () => {
+    if (!expanded) {
+      return;
+    }
+    setExpanded(false);
+    setListPosition(Position.Below);
+    setOpacity(0);
+  }, [expanded]);
 
   const additionalClasses = [];
   expanded && additionalClasses.push(classes.expanded);
@@ -223,7 +223,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
 
   /** The native select is purely for external form libraries. We use it to emit an onChange with native select event object so they know exactly what's happening. */
   return (
-    <Fragment>
+    <div ref={myElementRef}>
       <select
         {...filterProps(rest, /^data-/, false)}
         tabIndex={-1}
@@ -293,7 +293,7 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
           </div>
         </div>
       </div>
-    </Fragment>
+    </div>
   );
 };
 export const Select = withReadOnly(React.forwardRef(SelectComponent));

package/src/components/Form/Select/useSelectPositionList.ts

@@ -43,21 +43,17 @@ export const useSelectPositionList = ({
       return;
     }
 
-    // Check whether there is more space above or below the select
-    // Check space between the bottom of select and top of viewport
-    const spaceOnTopOfSelect = containerReference.current.getBoundingClientRect().bottom;
+    const listHeight = optionListReference.current?.getBoundingClientRect().height;
 
-    // Check space between the top of the select and bottom of viewport
-    const spaceOnBottomOfSelect =
-      window.innerHeight - containerReference.current.getBoundingClientRect().top;
+    const viewportRelativeRect = containerReference.current.getBoundingClientRect();
 
-    // Set position as if there's more space on the bottom
-    let position = Position.Below;
+    const spaceOnTopOfSelect = viewportRelativeRect.top;
+    const spaceOnBottomOfSelect = window.innerHeight - viewportRelativeRect.bottom;
 
-    // Set the position of the select
-    if (spaceOnTopOfSelect > spaceOnBottomOfSelect) {
-      position = Position.Above;
-    }
+    const position =
+      listHeight > spaceOnBottomOfSelect && spaceOnTopOfSelect > spaceOnBottomOfSelect
+        ? Position.Above
+        : Position.Below;
 
     setListPosition(position);
 

package/src/components/Form/Wrapper/InputWrapper/InputWrapper.tsx

@@ -45,6 +45,7 @@ const InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     value,
     className,
     error,
+    errorMessageProps,
     success,
     onChange,
     onBlur,
@@ -77,6 +78,7 @@ const InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
       }}
       errorId={errorId}
       error={error}
+      errorMessageProps={errorMessageProps}
       helperId={helperId}
       helperText={helperText}
       helperProps={{

package/src/components/Form/Wrapper/Wrapper/Wrapper.tsx

@@ -37,6 +37,7 @@ export interface WrapperProps extends Omit<FormElement, "success"> {
   errorMessage?: string;
   helperText?: string;
   helperProps?: HelperProps;
+  errorMessageProps?: ComponentPropsWithRef<"span">;
   label?: string;
   name: string;
   required?: boolean;
@@ -52,6 +53,7 @@ const WrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     errorId,
     errorMessageIcon,
     errorMessageIconPosition,
+    errorMessageProps,
     helperText,
     helperId,
     required,
@@ -89,6 +91,7 @@ const WrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
         errorId={errorId}
         errorMessageIcon={errorMessageIcon}
         errorMessageIconPosition={errorMessageIconPosition}
+        errorMessageProps={errorMessageProps}
         helperText={helperText}
         helperId={helperId}
         helperProps={helperProps}

package/src/hooks/{useBodyClick.ts → useClickOutside.ts}

@@ -14,23 +14,29 @@
  *    limitations under the License.
  */
 
-import { useEffect } from "react";
+import { DependencyList, useEffect } from "react";
 
-export const useBodyClick = (
-  checkFunction: (event: MouseEvent) => boolean,
-  callbackFunction: (...args: unknown[]) => unknown,
-  dependingStateVariable: React.ComponentState | React.ComponentState[]
+export const useClickOutside = (
+  myElementRef: React.RefObject<HTMLElement>,
+  onClickOutside: (event: MouseEvent) => void,
+  dependencies?: DependencyList
 ) => {
-  function bodyClickListener(event: MouseEvent) {
-    if (checkFunction(event)) {
-      callbackFunction();
+  function eventListener(event: MouseEvent) {
+    const myElement = myElementRef?.current;
+    if (!myElement) {
+      return;
+    }
+    const clickedInsideMyElement = myElement.contains(event.target as Node);
+
+    if (!clickedInsideMyElement) {
+      onClickOutside(event);
     }
   }
   useEffect(() => {
-    window.addEventListener("click", bodyClickListener);
+    setTimeout(() => window.addEventListener("click", eventListener));
 
     return () => {
-      window.removeEventListener("click", bodyClickListener);
+      setTimeout(() => window.removeEventListener("click", eventListener));
     };
-  }, [dependingStateVariable]);
+  }, dependencies);
 };

package/src/index.ts

@@ -66,6 +66,7 @@ export type {
 
 /* Utils */
 export { useRepeater } from "./hooks/useRepeater";
+export { useClickOutside } from "./hooks/useClickOutside";
 export { useFullHeightCollapse } from "./hooks/useFullHeightCollapse";
 export { usePosition } from "./hooks/usePosition";
 export type { Placement } from "./hooks/usePosition";

package/dist/cjs/src/hooks/useBodyClick.cjs.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("react");exports.useBodyClick=(i,t,c)=>{function r(e){i(e)&&t()}e.useEffect((()=>(window.addEventListener("click",r),()=>{window.removeEventListener("click",r)})),[c])};
-//# sourceMappingURL=useBodyClick.cjs.js.map

package/dist/cjs/src/hooks/useBodyClick.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useBodyClick.cjs.js","sources":["../../../../../../src/hooks/useBodyClick.ts"],"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 { useEffect } from \"react\";\n\nexport const useBodyClick = (\n  checkFunction: (event: MouseEvent) => boolean,\n  callbackFunction: (...args: unknown[]) => unknown,\n  dependingStateVariable: React.ComponentState | React.ComponentState[]\n) => {\n  function bodyClickListener(event: MouseEvent) {\n    if (checkFunction(event)) {\n      callbackFunction();\n    }\n  }\n  useEffect(() => {\n    window.addEventListener(\"click\", bodyClickListener);\n\n    return () => {\n      window.removeEventListener(\"click\", bodyClickListener);\n    };\n  }, [dependingStateVariable]);\n};\n"],"names":["checkFunction","callbackFunction","dependingStateVariable","bodyClickListener","event","useEffect","window","addEventListener","removeEventListener"],"mappings":"yDAkB4B,CAC1BA,EACAC,EACAC,KAEA,SAASC,EAAkBC,GACrBJ,EAAcI,IAChBH,GAEH,CACDI,EAAAA,WAAU,KACRC,OAAOC,iBAAiB,QAASJ,GAE1B,KACLG,OAAOE,oBAAoB,QAASL,EAAkB,IAEvD,CAACD,GAAwB"}

package/dist/cjs/src/hooks/useBodyClick.d.ts

@@ -1 +0,0 @@
-export declare const useBodyClick: (checkFunction: (event: MouseEvent) => boolean, callbackFunction: (...args: unknown[]) => unknown, dependingStateVariable: React.ComponentState | React.ComponentState[]) => void;

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

@@ -1 +0,0 @@
-export declare const useBodyClick: (checkFunction: (event: MouseEvent) => boolean, callbackFunction: (...args: unknown[]) => unknown, dependingStateVariable: React.ComponentState | React.ComponentState[]) => void;

package/dist/esm/src/hooks/useBodyClick.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useBodyClick.esm.js","sources":["../../../../../../src/hooks/useBodyClick.ts"],"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 { useEffect } from \"react\";\n\nexport const useBodyClick = (\n  checkFunction: (event: MouseEvent) => boolean,\n  callbackFunction: (...args: unknown[]) => unknown,\n  dependingStateVariable: React.ComponentState | React.ComponentState[]\n) => {\n  function bodyClickListener(event: MouseEvent) {\n    if (checkFunction(event)) {\n      callbackFunction();\n    }\n  }\n  useEffect(() => {\n    window.addEventListener(\"click\", bodyClickListener);\n\n    return () => {\n      window.removeEventListener(\"click\", bodyClickListener);\n    };\n  }, [dependingStateVariable]);\n};\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;AAcG;AAIU,MAAA,YAAY,GAAG,CAC1B,aAA6C,EAC7C,gBAAiD,EACjD,sBAAqE,KACnE;IACF,SAAS,iBAAiB,CAAC,KAAiB,EAAA;AAC1C,QAAA,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE;AACxB,YAAA,gBAAgB,EAAE,CAAC;SACpB;KACF;IACD,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;AAEpD,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;AACzD,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC,CAAC;AAC/B;;;;"}