@onewelcome/react-lib-components 8.5.0 → 8.7.0

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/components/_BaseStyling_/BaseStyling.tsx

@@ -208,6 +208,8 @@ interface CSSProperties {
   fileUploadBorderWidth?: string;
   dragDropBorderStyle?: string;
   fontSizeDataGrid?: string;
+  readOnlyBorderColor?: string;
+  readOnlyTextColor?: string;
 }
 
 export interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -403,6 +405,8 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     fontSizeH4: "1.25rem",
     fontSizeSub: ".75rem",
     fontSizeCode: "1rem",
+    readOnlyBorderColor: "var(--color-blue-grey100)",
+    readOnlyTextColor: "var(--color-blue-grey900)",
     formControlFontSize: "0.875rem", //FIXME: UCL-395
     fontSizeDataGrid: "0.875rem" //FIXME: UCL-395
   };

package/src/components/withReadOnly.tsx

@@ -0,0 +1,112 @@
+/*
+ * 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 React, { ComponentType, ForwardedRef, PropsWithChildren } from "react";
+
+export interface WithReadOnlyProps {
+  readOnlyView?: boolean;
+  required?: boolean;
+  helperText?: string;
+  type?: string;
+}
+
+const componentsWithKeyEventsToPrevent: string[] = ["CheckboxWrapper"];
+
+const getDisplayName = <P,>(WrappedComponent: ComponentType<P>) => {
+  return WrappedComponent.displayName ?? WrappedComponent.name ?? "Component";
+};
+
+const getConditionalProps = (readOnlyView: boolean, type: string, helperText?: string) => {
+  const props: Record<string, any> = {};
+
+  if (readOnlyView) {
+    props.style = { pointerEvents: "none", userSelect: "text" };
+    if (helperText) {
+      props.helperText = "";
+    }
+  } else {
+    props.helperText = helperText;
+  }
+
+  if (type) {
+    props.type = type;
+  }
+
+  return props;
+};
+
+export const withReadOnly = <P extends object>(WrappedComponent: ComponentType<P>) => {
+  const preventKeyUpAndKeyDownHandlerForSpecificComponents = (readOnlyView: boolean) => {
+    const preventSubmissionKeys = (e: KeyboardEvent) => {
+      const isEnterOrSpace = (e: KeyboardEvent) => e.key === "Enter" || e.key === " ";
+      if (isEnterOrSpace(e)) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    };
+
+    if (
+      readOnlyView &&
+      componentsWithKeyEventsToPrevent.includes(
+        WrappedComponent.displayName || WrappedComponent.name
+      )
+    ) {
+      const props: Record<string, any> = {};
+
+      props.onKeyUp = (e: KeyboardEvent) => {
+        preventSubmissionKeys(e);
+      };
+
+      props.onKeyDown = (e: KeyboardEvent) => {
+        preventSubmissionKeys(e);
+      };
+
+      return props;
+    }
+
+    return {};
+  };
+
+  const WithReadOnlyComponent = React.forwardRef(
+    (props: PropsWithChildren<P & WithReadOnlyProps>, ref: ForwardedRef<any>) => {
+      const {
+        readOnlyView = false,
+        required,
+        children,
+        helperText,
+        type = "",
+        ...restProps
+      } = props;
+
+      return (
+        <WrappedComponent
+          ref={ref}
+          {...(restProps as P)}
+          data-readonlyview={readOnlyView}
+          aria-readonly={readOnlyView}
+          required={readOnlyView ? false : required}
+          {...getConditionalProps(readOnlyView, type, helperText)}
+          {...preventKeyUpAndKeyDownHandlerForSpecificComponents(readOnlyView)}
+        >
+          {children}
+        </WrappedComponent>
+      );
+    }
+  );
+
+  WithReadOnlyComponent.displayName = `withReadOnly_${getDisplayName(WrappedComponent)}`;
+  return WithReadOnlyComponent;
+};

package/src/hooks/useClickOutside.ts

@@ -0,0 +1,42 @@
+/*
+ * 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 { DependencyList, useEffect } from "react";
+
+export const useClickOutside = (
+  myElementRef: React.RefObject<HTMLElement>,
+  onClickOutside: (event: MouseEvent) => void,
+  dependencies?: DependencyList
+) => {
+  function eventListener(event: MouseEvent) {
+    const myElement = myElementRef?.current;
+    if (!myElement) {
+      return;
+    }
+    const clickedInsideMyElement = myElement.contains(event.target as Node);
+
+    if (!clickedInsideMyElement) {
+      onClickOutside(event);
+    }
+  }
+  useEffect(() => {
+    setTimeout(() => window.addEventListener("click", eventListener));
+
+    return () => {
+      setTimeout(() => window.removeEventListener("click", eventListener));
+    };
+  }, 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";
@@ -178,6 +179,7 @@ export { FILE_ACTION, ACTION_STATUS } from "./components/Form/FileUpload/FileIte
 
 export { MultiSelectWrapper } from "./components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper";
 export type { Props as MultiSelectWrapperProps } from "./components/Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper";
+export { useMultiSelect } from "./components/Form/Select/MultiSelect/useMultiSelect";
 export { ContentHeader } from "./components/Layout/ContentHeader/ContentHeader";
 export type { Props as ContentHeaderProps } from "./components/Layout/ContentHeader/ContentHeader";
 export { FormStepper } from "./components/Layout/FormPage/FormWithStepper/FormStepper/FormStepper";

package/src/mixins.module.scss

@@ -195,6 +195,12 @@
   $borderRadius: var(--input-border-radius),
   $backgroundColor: ""
 ) {
+  [data-readonlyview="true"] {
+    .outline {
+      border-color: var(--read-only-border-color);
+    }
+  }
+
   .outline {
     pointer-events: none;
     position: absolute;

package/{dist/esm/src/hooks/useBodyClick.esm.js → src/util/unitTestUtils.ts}

@@ -1,5 +1,3 @@
-import { useEffect } from 'react';
-
 /*
  * Copyright 2022 OneWelcome B.V.
  *
@@ -15,19 +13,20 @@ import { useEffect } from 'react';
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
-const useBodyClick = (checkFunction, callbackFunction, dependingStateVariable) => {
-    function bodyClickListener(event) {
-        if (checkFunction(event)) {
-            callbackFunction();
-        }
-    }
-    useEffect(() => {
-        window.addEventListener("click", bodyClickListener);
-        return () => {
-            window.removeEventListener("click", bodyClickListener);
-        };
-    }, [dependingStateVariable]);
-};
 
-export { useBodyClick };
-//# sourceMappingURL=useBodyClick.esm.js.map
+export class MockDOMRect implements DOMRect {
+  constructor(
+    public x: number = 0,
+    public y: number = 0,
+    public width: number = 0,
+    public height: number = 0,
+    public top: number = y,
+    public right: number = x + width,
+    public bottom: number = y + height,
+    public left: number = x
+  ) {}
+
+  toJSON() {
+    return { ...this };
+  }
+}

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;;;;"}