@onewelcome/react-lib-components 9.7.1 → 9.8.1

package/src/components/DataGrid/DataGridFilters/DataGridFilterPopover.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { useEffect } from "react";
+import React from "react";
 import classes from "./DataGridFilter.module.scss";
 import { Button } from "../../Button/Button";
 import { Option } from "../../Form/Select/SingleSelect/Option";
@@ -81,12 +81,6 @@ export const DataGridFilterPopover = ({
   const isValueRequired = operator && !operator.allowEmptyValues;
   const hasValidationError = Boolean(isValueRequired && pickedValues.length === 0);
 
-  useEffect(() => {
-    if (isOpen) {
-      popoverRef.current?.focus();
-    }
-  }, [isOpen]);
-
   return (
     <Popover
       tabIndex={-1}
@@ -100,6 +94,7 @@ export const DataGridFilterPopover = ({
         <div className={classes["popover"]}>
           <div className={classes["controls"]}>
             <SelectWrapper
+              selectProps={{ selectButtonProps: { autoFocus: true } }}
               label={columnSelectLabel}
               value={column}
               name={"column"}

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -31,20 +31,23 @@ import {
 } from "../FormSelectorWrapper/FormSelectorWrapper";
 import { FormSelector } from "../form.interfaces";
 import { withReadOnly } from "../../withReadOnly";
+import { useInlineEditing } from "../../InlineEditing/InlineEditingContext";
 
 const isToggle = (children: ReactNode) => !!(children as ReactElement)?.props?.["data-toggle"];
 
-export interface Props extends ComponentPropsWithRef<"input">, Omit<FormSelector, "success"> {
-  label?: string | React.ReactNode;
+export interface Props extends ComponentPropsWithRef<"input">, FormSelector {
+  label?: string | React.ReactElement;
   indeterminate?: boolean;
   required?: boolean;
   helperProps?: FormHelperTextProps;
   formSelectorWrapperProps?: FormSelectorWrapperProps;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  readOnlyView?: boolean;
 }
 
 const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   {
+    readOnly,
     children,
     name,
     helperText,
@@ -75,6 +78,8 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     parentHelperId
   });
 
+  const { required: inlineRequired } = useInlineEditing();
+
   useEffect(() => {
     if (!name) {
       throw new Error("Please pass a 'name' prop to your <Checkbox> component.");
@@ -150,6 +155,7 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
       error={error}
       disabled={disabled}
       identifier={identifier}
+      required={inlineRequired}
       nestedChildren={
         typeof children === "object" && !isToggle(children) && renderNestedCheckboxes()
       }
@@ -164,6 +170,7 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
         aria-invalid={error as boolean}
         aria-checked={indeterminate ? "mixed" : checked}
         aria-describedby={describedBy}
+        aria-required={required || inlineRequired}
         id={`${identifier}-checkbox`}
         name={name}
         type="checkbox"

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

@@ -28,6 +28,27 @@
   margin-left: relativeToBaseFontSize(1.75);
 }
 
+.children-container {
+  & > span:nth-of-type(2) {
+    margin-right: 0.5rem;
+  }
+
+  [data-icon-status="success"] {
+    color: var(--success);
+    font-size: var(--font-size-big);
+  }
+
+  [data-icon-status="error"] {
+    color: var(--error);
+    font-size: var(--font-size-big);
+  }
+
+  [data-icon-status="info"] {
+    color: var(--default);
+    font-size: var(--font-size-big);
+  }
+}
+
 .disabled {
   input {
     color: var(--disabled);
@@ -41,3 +62,7 @@
     cursor: not-allowed;
   }
 }
+
+.required {
+  color: var(--error);
+}

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

@@ -24,7 +24,10 @@ import { KeyValuePair } from "../../../interfaces";
 import { FormSelector } from "../form.interfaces";
 import { FormHelperText, Props as FormHelperTextProps } from "../FormHelperText/FormHelperText";
 import classes from "./FormSelectorWrapper.module.scss";
+import { useInlineEditing } from "../../InlineEditing/InlineEditingContext";
+import { RequiredSign } from "../../RequiredSign/RequiredSign";
 import { FormErrorText } from "../FormErrorText/FormErrorText";
+import { FormStatusIndicator } from "../FormStatusIndicator/FormStatusIndicator";
 
 export interface Props extends ComponentPropsWithRef<"div">, FormSelector {
   children?: ReactNode;
@@ -34,6 +37,7 @@ export interface Props extends ComponentPropsWithRef<"div">, FormSelector {
   disabled?: boolean;
   errorId?: string;
   identifier?: string;
+  required?: boolean;
 }
 
 const FormSelectorWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
@@ -46,16 +50,19 @@ const FormSelectorWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Pro
     error,
     disabled,
     helperText,
+    success,
     errorMessage,
     errorMessageProps,
     parentErrorId,
     errorId,
     identifier,
+    required,
     ...rest
   }: Props,
   ref
 ) => {
   const helperRef = helperProps?.ref ?? createRef();
+  const { enabled } = useInlineEditing();
 
   const hasHelperText = helperText ?? helperProps?.children;
   const showHelperText = !error && hasHelperText;
@@ -69,8 +76,22 @@ const FormSelectorWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Pro
         className ?? ""
       }`}
     >
-      <div {...containerProps}>{children}</div>
-      {(showHelperText || showErrorText) &&
+      <div
+        {...containerProps}
+        className={`${containerProps?.className} ${classes["children-container"]}`}
+      >
+        {children}
+        {enabled && (
+          <>
+            <RequiredSign className={classes["required"]} />
+            <FormStatusIndicator success={success} error={error}>
+              <></>
+            </FormStatusIndicator>
+          </>
+        )}
+      </div>
+      {!enabled &&
+        (showHelperText || showErrorText) &&
         (showErrorText ? (
           <FormErrorText
             error={error}

package/src/components/Form/FormStatusIndicator/FormStatusIndicator.tsx

@@ -0,0 +1,75 @@
+/*
+ * 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 from "react";
+import { useInlineEditing } from "../../InlineEditing/InlineEditingContext";
+import { useDetermineStatusIcon } from "../../../hooks/useDetermineStatusIcon";
+import { getStatusIcon, getStatusState } from "../../../utils/statusUtils";
+import { Tooltip } from "../../Tooltip/Tooltip";
+import { Icon } from "../../Icon/Icon";
+
+export interface FormStatusIndicatorProps {
+  isReadOnlyView?: boolean;
+  success?: boolean;
+  error?: boolean;
+  children: React.ReactNode;
+}
+
+export const FormStatusIndicator: React.FC<FormStatusIndicatorProps> = ({
+  isReadOnlyView,
+  success,
+  error,
+  children
+}) => {
+  const { enabled, tooltipText, ...restProps } = useInlineEditing();
+  const showTooltip = enabled && tooltipText;
+  const isSuccess = restProps.success ?? success;
+  const isError = restProps.error ?? error;
+  const statusIcon = useDetermineStatusIcon({
+    success: isSuccess,
+    error: isError
+  });
+
+  if (showTooltip && !isReadOnlyView) {
+    const status = getStatusState(
+      {
+        success: isSuccess,
+        error: isError
+      },
+      true
+    );
+    return (
+      <Tooltip
+        label={
+          <Icon
+            data-testid="tooltip-icon"
+            data-icon-status={status}
+            icon={getStatusIcon({
+              success: isSuccess,
+              error: isError
+            })}
+          />
+        }
+        location="right"
+        position="center"
+      >
+        {tooltipText}
+      </Tooltip>
+    );
+  }
+
+  return <>{statusIcon || (!isReadOnlyView && children)}</>;
+};

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

@@ -233,6 +233,9 @@ $listItemHeight: 2.5rem;
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
+  .required {
+    color: var(--error);
+  }
 }
 
 .status {
@@ -253,6 +256,11 @@ $listItemHeight: 2.5rem;
     font-size: var(--font-size-big);
   }
 
+  [data-icon-status="info"] {
+    color: var(--default);
+    font-size: var(--font-size-big);
+  }
+
   .chevron-icon {
     color: var(--default);
     font-size: var(--font-size-small);
@@ -327,3 +335,66 @@ $listItemHeight: 2.5rem;
     }
   }
 }
+
+.inlineEditing {
+  & .select {
+    background-color: transparent;
+    transition: none;
+    &:not(.expanded) {
+      button:focus:not(.error) {
+        border-width: 0;
+        border-radius: 0.3125rem;
+      }
+    }
+    &:focus {
+      & button {
+        &:focus {
+          border: 0.125rem solid var(--color-focus);
+        }
+      }
+    }
+    &:hover {
+      & button {
+        & .status {
+          span.chevron-icon {
+            visibility: visible;
+          }
+        }
+      }
+      &:not(.disabled):not(.expanded):not(.error) {
+        button:not(:focus) {
+          border: 0;
+          background-color: transparent;
+        }
+      }
+    }
+    & button {
+      border: 0;
+      &.expanded {
+        div.status {
+          span.chevron-icon {
+            visibility: visible;
+          }
+        }
+      }
+      &:focus-visible {
+        outline: 0.125rem solid var(--color-focus);
+        border-radius: 0.3125rem;
+        outline-offset: -1px;
+      }
+      &.error {
+        color: var(--color-default);
+      }
+      & .status {
+        span.chevron-icon {
+          visibility: hidden;
+        }
+      }
+    }
+    &[data-readonlyview="true"] {
+      & button {
+        background-color: transparent;
+      }
+    }
+  }
+}

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

@@ -25,7 +25,6 @@ import React, {
   useState
 } from "react";
 import { useClickOutside } from "../../../../hooks/useClickOutside";
-import { useDetermineStatusIcon } from "../../../../hooks/useDetermineStatusIcon";
 import readyclasses from "../../../../readyclasses.module.scss";
 import { filterProps } from "../../../../util/helper";
 import { Icon, Icons } from "../../../Icon/Icon";
@@ -35,6 +34,9 @@ import { useAddNewBtn } from "../useAddNewBtn";
 import { useSearch } from "./useSearch";
 import { useArrowNavigation } from "./useArrowNavigation";
 import { withReadOnly } from "../../../withReadOnly";
+import { RequiredSign } from "../../../RequiredSign/RequiredSign";
+import { FormStatusIndicator } from "../../FormStatusIndicator/FormStatusIndicator";
+import { useInlineEditing } from "../../../InlineEditing/InlineEditingContext";
 
 const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectProps> = (
   {
@@ -91,6 +93,9 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
     searchInputRef
   });
 
+  const { inlineClassNames } = useInlineEditing();
+  const rootClassNames = inlineClassNames ? ` ${inlineClassNames}` : "";
+
   const nativeSelect = (ref as React.RefObject<HTMLSelectElement>) || createRef();
 
   const onOptionChangeHandler = (optionElement: HTMLElement | null) => {
@@ -135,9 +140,8 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
    */
   const renderOptions = () => {
     if (isSearching || filter !== "") {
-      const filteredChildren = React.Children.toArray(children).filter(
-        child =>
-          (child as ReactElement).props.children.toLowerCase().match(filter.toLowerCase()) !== null
+      const filteredChildren = React.Children.toArray(children).filter(child =>
+        (child as ReactElement).props.children.toLowerCase().includes(filter.toLowerCase())
       );
 
       const internalChildren = _internalRenderChildren(filteredChildren as ReactElement[]);
@@ -181,8 +185,6 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
     );
   };
 
-  const icon = useDetermineStatusIcon({ success, error });
-
   const nativeOnChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
     onChange?.(event);
   };
@@ -223,7 +225,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 (
-    <div ref={myElementRef} className={classes["root"]}>
+    <div ref={myElementRef} className={`${classes["root"]}${rootClassNames}`}>
       <select
         {...filterProps(rest, /^data-/, false)}
         tabIndex={-1}
@@ -266,8 +268,13 @@ const SelectComponent: ForwardRefRenderFunction<HTMLSelectElement, SingleSelectP
           <div data-display className={classes["selected"]}>
             {!value && placeholder && <span className={classes["placeholder"]}>{placeholder}</span>}
             {value?.length > 0 && <span data-display-inner>{display}</span>}
+            <RequiredSign className={classes["required"]} />
+          </div>
+          <div className={classes["status"]}>
+            <FormStatusIndicator isReadOnlyView={isReadOnlyView} success={success} error={error}>
+              {renderChevronIcon()}
+            </FormStatusIndicator>
           </div>
-          <div className={classes["status"]}>{icon || renderChevronIcon()}</div>
         </button>
         <div className="list-wrapper-container">
           <div

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

@@ -71,6 +71,7 @@
     font-size: var(--input-font-size);
     position: relative;
     border-radius: 0.125rem;
+    word-wrap: break-word;
 
     &:focus {
       outline: none;

package/src/components/Form/Wrapper/TextareaWrapper/TextareaWrapper.module.scss

@@ -70,6 +70,7 @@
     font-size: var(--form-control-font-size);
     position: relative;
     border-radius: 0.125rem;
+    word-wrap: break-word;
 
     & [data-icon-status] {
       position: absolute;

package/src/components/InlineEditing/InlineCheckbox/InlineCheckbox.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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 from "react";
+import { Checkbox, CheckboxProps } from "../../..";
+import { InlineEditingProvider } from "../InlineEditingContext";
+
+export interface InlineCheckboxProps extends CheckboxProps {
+  tooltipText?: string;
+}
+
+export const InlineCheckbox = (props: InlineCheckboxProps) => {
+  const { error, success, tooltipText, required, ...rest } = props;
+  const inlineEditingValues = {
+    enabled: true,
+    error: error,
+    success: success,
+    required: required,
+    tooltipText: tooltipText
+  };
+
+  return (
+    <InlineEditingProvider value={inlineEditingValues}>
+      <Checkbox {...rest} />
+    </InlineEditingProvider>
+  );
+};

package/src/components/InlineEditing/InlineEditingContext.tsx

@@ -0,0 +1,32 @@
+/*
+ * 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 { createContext, useContext } from "react";
+
+export interface InlineEditingInterface {
+  enabled: boolean;
+  required?: boolean;
+  error?: boolean;
+  success?: boolean;
+  tooltipText?: string;
+  inlineClassNames?: string;
+}
+
+const InlineEditingContext = createContext<InlineEditingInterface>({ enabled: false });
+
+export const InlineEditingProvider = InlineEditingContext.Provider;
+
+export const useInlineEditing = () => useContext(InlineEditingContext);

package/src/components/InlineEditing/InlineEditingSelect/InlineSelect.tsx

@@ -0,0 +1,44 @@
+/*
+ * 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 from "react";
+import { SingleSelectProps } from "../../Form/Select/Select.interfaces";
+import { Select } from "../../Form/Select/SingleSelect/Select";
+import { InlineEditingProvider } from "../InlineEditingContext";
+import selectClasses from "../../Form/Select/SingleSelect/Select.module.scss";
+
+export interface InlineSelectProps extends SingleSelectProps {
+  tooltipText?: string;
+}
+
+export const InlineSelect = (props: InlineSelectProps) => {
+  const { className, error, success, tooltipText, required, ...rest } = props;
+  const finalClassName = [className, selectClasses.inlineEditing].filter(Boolean).join(" ");
+  const inlineEditingValues = {
+    enabled: true,
+    error: error,
+    success: success,
+    required: required,
+    tooltipText: tooltipText,
+    inlineClassNames: finalClassName
+  };
+
+  return (
+    <InlineEditingProvider value={inlineEditingValues}>
+      <Select {...rest} />
+    </InlineEditingProvider>
+  );
+};

package/src/components/RequiredSign/RequiredSign.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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 from "react";
+import { useInlineEditing } from "../InlineEditing/InlineEditingContext";
+
+export interface Props {
+  className: string;
+}
+
+export const RequiredSign: React.FC<Props> = ({ className }) => {
+  const { enabled, required } = useInlineEditing();
+
+  return enabled && required ? <span className={className}> *</span> : null;
+};

package/src/components/Tabs/Tabs.tsx

@@ -32,6 +32,7 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   children: ReactElement<TabProps>[];
   selected?: number;
   onTabChange?: (index: number) => void;
+  tabChanging?: (newIndex: number, oldIndex: number) => Promise<boolean> | boolean;
   fluid?: boolean;
   align?: "left" | "center" | "right";
   tabListClassName?: string;
@@ -48,6 +49,7 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     tabListClassName,
     align,
     iconsPosition = "left",
+    tabChanging,
     ...rest
   }: Props,
   ref
@@ -78,21 +80,21 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     }
 
     switch (e.key) {
-      case "ArrowRight":
-        setActiveTabIndex(currentIndex => {
-          return currentIndex + 1 > totalAmountOfTabs - 1 ? 0 : currentIndex + 1;
-        });
+      case "ArrowRight": {
+        const nextIndex = activeTabIndex + 1 > totalAmountOfTabs - 1 ? 0 : activeTabIndex + 1;
+        void handleTabClick(nextIndex);
         break;
-      case "ArrowLeft":
-        setActiveTabIndex(currentIndex => {
-          return currentIndex - 1 < 0 ? totalAmountOfTabs - 1 : currentIndex - 1;
-        });
+      }
+      case "ArrowLeft": {
+        const prevIndex = activeTabIndex - 1 < 0 ? totalAmountOfTabs - 1 : activeTabIndex - 1;
+        void handleTabClick(prevIndex);
         break;
+      }
       case "Home":
-        setActiveTabIndex(0);
+        void handleTabClick(0);
         break;
       case "End":
-        setActiveTabIndex(totalAmountOfTabs - 1);
+        void handleTabClick(totalAmountOfTabs - 1);
         break;
       default:
         return;
@@ -117,16 +119,32 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     }
   };
 
+  const handleTabClick = async (newIndex: number) => {
+    try {
+      const allowed =
+        typeof tabChanging === "function"
+          ? await Promise.resolve(tabChanging(newIndex, activeTabIndex))
+          : true;
+
+      if (!allowed) {
+        const buttons = tabsRef.current?.querySelectorAll<HTMLButtonElement>('button[role="tab"]');
+        buttons?.[activeTabIndex]?.focus();
+        return;
+      }
+
+      setActiveTabIndex(newIndex);
+      onTabChange?.(newIndex);
+    } catch (error) {
+      console.error("handleTabClick failed: ", error);
+    }
+  };
+
   useEffect(() => {
     if (tabsRef.current && renderedButtons.length) {
       calculateIndicatorPosition();
     }
   }, [tabsRef.current, activeTabIndex, renderedButtons]);
 
-  useEffect(() => {
-    onTabChange?.(activeTabIndex);
-  }, [activeTabIndex]);
-
   useEffect(() => {
     const buttons = React.Children.map(children, (child, index) => {
       if (Object.prototype.hasOwnProperty.call(child.props, "title")) {
@@ -139,7 +157,9 @@ const TabsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
             focused: usingKeyboardNavigation && activeTabIndex === index,
             tabActive: activeTabIndex === index,
             "aria-controls": `tab_${index}`,
-            onClick: () => setActiveTabIndex(index),
+            onClick: () => {
+              void handleTabClick(index);
+            },
             disabled: child.props.disabled,
             fluid: fluid,
             iconPosition: iconsPosition,

package/src/components/TextEllipsis/TextEllipsis.module.scss

@@ -27,6 +27,7 @@
 
   box-shadow: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.29);
   white-space: pre-wrap;
+  word-wrap: break-word;
 
   transition-property: opacity;
   transform: scale(1);