@onewelcome/react-lib-components 9.6.1 → 9.7.0

package/src/components/ContextMenu/ContextMenu.tsx

@@ -86,7 +86,7 @@ const ContextMenuComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     useState(
       false
     ); /** We need this, because whenever we use the arrow keys to select the contextmenu item, and we focus the currently selected item it fires the "click" listener in ContextMenuItem component. Instead, we only want this to fire if we press "enter" or "spacebar" so we set this to true whenever that is the case, and back to false when it has been executed. */
-  const [childrenCount] = useState(React.Children.count(children));
+  const childrenCount = React.Children.count(children);
 
   const { root } = useGetDomRoot(domRoot, wrappingDivRef);
 

package/src/components/ContextMenu/ContextMenuItem.tsx

@@ -64,7 +64,7 @@ const ContextMenuItemComponent: ForwardRefRenderFunction<HTMLButtonElement, Prop
 
   useEffect(() => {
     if (innerButtonRef.current && hasFocus && contextMenuOpened) {
-      onFocusChange && childIndex && onFocusChange(childIndex);
+      onFocusChange && childIndex !== undefined && onFocusChange(childIndex);
       innerButtonRef.current.focus();
     }
   }, [hasFocus, innerButtonRef, contextMenuOpened]);

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

@@ -110,6 +110,16 @@ export const DataGridFilter = ({
     }
   };
 
+  if (mode === "ADD") {
+    const hasAvailableFilters = columnsMetadata.some(
+      value =>
+        !value.allowSingleFilterOnly || !filterState.filters.some(f => f.column === value.name)
+    );
+    if (!hasAvailableFilters) {
+      return <></>;
+    }
+  }
+
   return (
     <Fragment>
       <DataGridFilterTag

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

@@ -212,3 +212,10 @@
     }
   }
 }
+
+.required {
+  &:after {
+    content: " *";
+    color: var(--error);
+  }
+}

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

@@ -37,6 +37,7 @@ const isToggle = (children: ReactNode) => !!(children as ReactElement)?.props?.[
 export interface Props extends ComponentPropsWithRef<"input">, Omit<FormSelector, "success"> {
   label?: string | React.ReactNode;
   indeterminate?: boolean;
+  required?: boolean;
   helperProps?: FormHelperTextProps;
   formSelectorWrapperProps?: FormSelectorWrapperProps;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -59,6 +60,7 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     error,
     checked = false,
     formSelectorWrapperProps,
+    required,
     onChange,
     ...rest
   }: Props,
@@ -183,7 +185,12 @@ const CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
       {!checked && !indeterminate && (
         <Icon className={`${iconClasses.join(" ")} ${classes["square"]}`} icon={Icons.Square} />
       )}
-      <label htmlFor={`${identifier}-checkbox`}>{determineLabel()}</label>
+      <label
+        className={`${required ? classes["required"] : ""}`}
+        htmlFor={`${identifier}-checkbox`}
+      >
+        {determineLabel()}
+      </label>
     </FormSelectorWrapper>
   );
 };

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

@@ -26,7 +26,7 @@
   border-radius: var(--input-border-radius);
   background-color: var(--input-background-color);
   padding: 0 relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-mobile);
-  @include mixins.transition(all, 0.2s, ease-in-out);
+  @include mixins.transition(background-color, 0.2s, ease-in-out);
 
   // General autofill styles
   input:-webkit-autofill,
@@ -107,10 +107,6 @@
       color: var(--read-only-text-color);
       border-color: var(--read-only-border-color);
       background-color: var(--color-white);
-
-      &.focus {
-        border-color: var(--read-only-border-color);
-      }
     }
 
     &:hover {
@@ -121,6 +117,22 @@
       }
     }
   }
+
+  & [data-prefix],
+  & [data-suffix] {
+    display: block;
+    z-index: 1;
+
+    @include mixins.transition(all, 0.2s, ease-in-out);
+  }
+
+  &.focus:not(.disabled):not([data-readonlyview="true"]),
+  &[data-readonlyview="true"]:focus:not(.disabled),
+  &[data-readonlyview="true"]:focus-visible:not(.disabled) {
+    position: relative;
+    z-index: 2;
+    @include mixins.focusVisibleOutline($selectors: null);
+  }
 }
 
 .input {
@@ -167,14 +179,6 @@
   padding-right: relativeToBaseFontSize(1.25);
 }
 
-.input-wrapper [data-prefix],
-.input-wrapper [data-suffix] {
-  display: block;
-  z-index: 1;
-
-  @include mixins.transition(all, 0.2s, ease-in-out);
-}
-
 @media only screen and (min-width: 30em) {
   .input-wrapper {
     padding: 0 relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-desktop);

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

@@ -28,7 +28,7 @@ $listItemHeight: 2.5rem;
   background-color: var(--input-background-color);
   font-size: var(--form-control-font-size);
 
-  @include mixins.transition(all, 0.2s, ease-in-out);
+  @include mixins.transition(background-color, 0.2s, ease-in-out);
 
   [data-display] {
     color: var(--color-default);
@@ -42,12 +42,19 @@ $listItemHeight: 2.5rem;
   }
 
   &:not(.expanded) {
+    &:has(button:focus) {
+      position: relative;
+      z-index: 2;
+      @include mixins.focusVisibleOutline($selectors: null);
+    }
+
     .custom-select:focus:not(.error) {
-      border: var(--input-border-width-focus) solid var(--color-focus);
+      border-color: var(--input-border-color);
+      border-width: var(--input-border-width);
       padding: 0
         calc(
           relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-mobile) - var(
-              --input-border-width-focus
+              --input-border-width
             )
         );
     }
@@ -78,10 +85,11 @@ $listItemHeight: 2.5rem;
     border-radius: var(--input-border-radius);
     font-size: var(--form-control-font-size);
 
-    @include mixins.transition(all, 0.2s, ease-in-out);
+    @include mixins.transition((background-color, border-color), 0.2s, ease-in-out);
 
+    &:focus-visible,
     &:focus {
-      outline: 0;
+      outline: none;
     }
 
     &.error {
@@ -89,7 +97,7 @@ $listItemHeight: 2.5rem;
     }
 
     &.error:focus {
-      border-width: var(--input-border-width-focus);
+      border-width: var(--input-border-width);
     }
 
     &.disabled {
@@ -270,7 +278,7 @@ $listItemHeight: 2.5rem;
         padding: 0
           calc(
             relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-desktop) - var(
-                --input-border-width-focus
+                --input-border-width
               )
           );
       }

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

@@ -24,4 +24,5 @@
   padding: 0;
   background: none;
   cursor: pointer;
+  outline: 0;
 }

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

@@ -28,7 +28,7 @@ $listItemHeight: 2.5rem;
   background-color: var(--input-background-color);
   font-size: var(--form-control-font-size);
 
-  @include mixins.transition(all, 0.2s, ease-in-out);
+  @include mixins.transition(background-color, 0.2s, ease-in-out);
 
   [data-display] {
     color: var(--color-default);
@@ -42,12 +42,19 @@ $listItemHeight: 2.5rem;
   }
 
   &:not(.expanded) {
+    &:has(button:focus) {
+      position: relative;
+      z-index: 2;
+      @include mixins.focusVisibleOutline($selectors: null);
+    }
+
     button:focus:not(.error) {
-      border: var(--input-border-width-focus) solid var(--color-focus);
+      border-color: var(--input-border-color);
+      border-width: var(--input-border-width);
       padding: 0
         calc(
           relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-mobile) - var(
-              --input-border-width-focus
+              --input-border-width
             )
         );
     }
@@ -78,7 +85,7 @@ $listItemHeight: 2.5rem;
     border-radius: var(--input-border-radius);
     font-size: var(--form-control-font-size);
     cursor: pointer;
-    @include mixins.transition(all, 0.2s, ease-in-out);
+    @include mixins.transition((background-color, border-color), 0.2s, ease-in-out);
 
     &:focus {
       outline: 0;
@@ -90,7 +97,7 @@ $listItemHeight: 2.5rem;
     }
 
     &.error:focus {
-      border-width: var(--input-border-width-focus);
+      border-width: var(--input-border-width);
     }
 
     &.disabled {
@@ -294,7 +301,7 @@ $listItemHeight: 2.5rem;
         padding: 0
           calc(
             relativeToBaseFontSize(variables.$form-element-horizontal-padding-ratio-desktop) - var(
-                --input-border-width-focus
+                --input-border-width
               )
           );
       }

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

@@ -50,6 +50,17 @@
 
   @include mixins.outlineStates();
 
+  &:has(div[data-readonlyview="true"]:focus) {
+    position: relative;
+    z-index: 2;
+    @include mixins.focusVisibleOutline($selectors: null);
+  }
+
+  &:has(div[data-readonlyview="true"]:focus) .outline {
+    border-width: var(--input-border-width);
+    border-color: var(--input-border-color);
+  }
+
   div[data-readonlyview="true"] {
     min-height: 4rem;
     border: 1px solid var(--color-blue-grey100);
@@ -61,6 +72,10 @@
     position: relative;
     border-radius: 0.125rem;
 
+    &:focus {
+      outline: none;
+    }
+
     & ~ span.outline {
       display: none;
     }
@@ -69,6 +84,21 @@
       padding-right: 2.5rem;
     }
   }
+
+  & .outline {
+    @include mixins.transition((background-color, border-color), 0.2s, ease-in-out);
+  }
+
+  &:not(.disabled):has(textarea:focus) {
+    position: relative;
+    z-index: 2;
+    @include mixins.focusVisibleOutline($selectors: null);
+  }
+
+  &:not(.disabled):has(textarea:focus) .outline {
+    border-width: var(--input-border-width);
+    border-color: var(--input-border-color);
+  }
 }
 
 .textarea {

package/src/components/Icon/Icon.module.scss

@@ -432,4 +432,24 @@
 .icon-download-circle:before {
   content: "\e95e";
   @include fontProperties();
-}
+}
+.icon-key:before {
+  content: "\e95f";
+  @include fontProperties();
+}
+.icon-password:before {
+  content: "\e960";
+  @include fontProperties();
+}
+.icon-phone:before {
+  content: "\e961";
+  @include fontProperties();
+}
+.icon-envelope:before {
+  content: "\e962";
+  @include fontProperties();
+}
+.icon-badge:before {
+  content: "\e963";
+  @include fontProperties();
+}

package/src/components/Icon/Icon.tsx

@@ -114,7 +114,12 @@ export enum Icons {
   Switch = "switch",
   Group = "group",
   Devices = "devices",
-  DownloadCircle = "download-circle"
+  DownloadCircle = "download-circle",
+  Key = "key",
+  Password = "password",
+  Phone = "phone",
+  Envelope = "envelope",
+  Badge = "badge"
 }
 
 type Tag = "span" | "div" | "i";

package/src/components/Pagination/Pagination.module.scss

@@ -73,6 +73,7 @@
   .per-page {
     display: none;
     align-items: center;
+    gap: 0.5rem;
 
     label {
       font-size: var(--font-size-data-grid);
@@ -108,10 +109,8 @@
   }
 
   .page-size-select {
-    margin: 0 0.25rem;
-
     button {
-      min-width: relativeToBaseFontSize(3.75);
+      min-width: relativeToBaseFontSize(4.25);
       padding: 0;
 
       div[data-display] {

package/src/components/_BaseStyling_/BaseStyling.tsx

@@ -344,7 +344,7 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     alertErrorBackgroundColor: "var(--color-red50)",
     alertErrorInvertedColor: "var(--color-red500)",
     alertWarningBackgroundColor: "var(--color-orange50)",
-    alertWarningInvertedColor: "var(--color-orange500)",
+    alertWarningInvertedColor: "var(--color-orange600)",
     alertBorderWidth: "4px",
     alertBorderRadius: "2px",
 

package/src/font/icomoon.svg

@@ -102,5 +102,10 @@
 <glyph unicode="&#xe95c;" glyph-name="group" horiz-adv-x="2150" d="M392.533 362.667c93.867 0 170.667 76.8 170.667 170.666s-76.8 170.667-170.667 170.667c-93.866 0-170.666-76.8-170.666-170.667s76.8-170.666 170.666-170.666zM488.96 268.8c-31.573 5.12-63.147 8.533-96.427 8.533-84.48 0-164.693-17.92-237.226-49.493-63.147-27.307-104.107-88.747-104.107-157.867v-133.973h384v137.387c0 70.826 19.627 137.386 53.76 195.413zM1757.87 362.667c93.86 0 170.66 76.8 170.66 170.666s-76.8 170.667-170.66 170.667c-93.87 0-170.67-76.8-170.67-170.667s76.8-170.666 170.67-170.666zM2099.2 69.973c0 69.12-40.96 130.56-104.11 157.867-72.53 31.573-152.74 49.493-237.22 49.493-33.28 0-64.86-3.413-96.43-8.533 34.13-58.027 53.76-124.587 53.76-195.413v-137.387h384v133.973zM1437.010 307.2c-99.84 44.373-222.72 76.8-361.81 76.8-139.093 0-261.973-33.28-361.813-76.8-92.16-40.96-150.187-133.12-150.187-233.813v-137.387h1024v137.387c0 100.693-58.030 192.853-150.19 233.813zM739.84 106.667c7.68 19.626 11.093 33.28 77.653 58.88 82.774 32.426 169.814 47.786 257.707 47.786 87.89 0 174.93-15.36 257.71-47.786 65.7-25.6 69.12-39.254 77.65-58.88h-670.72zM1075.2 789.333c46.93 0 85.33-38.4 85.33-85.333s-38.4-85.333-85.33-85.333c-46.93 0-85.333 38.4-85.333 85.333s38.403 85.333 85.333 85.333zM1075.2 960c-141.653 0-256-114.347-256-256s114.347-256 256-256c141.65 0 256 114.347 256 256s-114.35 256-256 256z" />
 <glyph unicode="&#xe95d;" glyph-name="devices" horiz-adv-x="1536" d="M280.381 813.809h1097.141v121.905h-1097.141c-67.047 0-121.904-54.857-121.904-121.905v-670.479h-121.905v-182.857h853.336v182.857h-609.526v670.479zM1438.479 691.905h-365.714c-33.529 0-60.957-27.429-60.957-60.953v-609.521c0-33.529 27.429-60.957 60.957-60.957h365.714c33.521 0 60.95 27.429 60.95 60.957v609.521c0 33.524-27.429 60.953-60.95 60.953zM1377.521 143.331h-243.807v426.669h243.807v-426.669z" />
 <glyph unicode="&#xe95e;" glyph-name="download-circle" d="M511.994 838.191c215.040 0 390.099-175.056 390.099-390.096s-175.059-390.093-390.099-390.093c-215.040 0-390.095 175.053-390.095 390.093s175.055 390.096 390.095 390.096zM511.994 935.714c-269.166 0-487.619-218.454-487.619-487.619s218.453-487.621 487.619-487.621c269.164 0 487.62 218.456 487.62 487.621s-218.456 487.619-487.62 487.619zM560.756 448.095v195.048h-97.524v-195.048h-146.286l195.048-195.048 195.048 195.048h-146.286z" />
+<glyph unicode="&#xe95f;" glyph-name="key" d="M930.909 541.091h-388.655c-38.168 108.451-141.499 186.182-262.982 186.182-154.066 0-279.273-125.207-279.273-279.273s125.207-279.273 279.273-279.273c121.484 0 224.815 77.731 262.982 186.182h16.291l93.091-93.091 93.091 93.091 93.091-93.091 186.182 188.043-93.091 91.23zM279.273 308.364c-76.8 0-139.636 62.836-139.636 139.636s62.836 139.636 139.636 139.636c76.8 0 139.636-62.836 139.636-139.636s-62.836-139.636-139.636-139.636z" />
+<glyph unicode="&#xe960;" glyph-name="password" d="M46.545 261.818h930.909v-93.091h-930.909v93.091zM100.072 450.327l39.564 68.888 39.564-68.888 60.509 34.909-39.564 68.888h79.127v69.818h-79.127l39.564 68.422-60.509 34.909-39.564-68.422-39.564 68.422-60.509-34.909 39.564-68.422h-79.127v-69.818h79.127l-39.564-68.888 60.509-34.909zM411.928 485.236l60.509-34.909 39.564 68.888 39.564-68.888 60.509 34.909-39.564 68.888h79.127v69.818h-79.127l39.564 68.422-60.509 34.909-39.564-68.422-39.564 68.422-60.509-34.909 39.564-68.422h-79.127v-69.818h79.127l-39.564-68.888zM1024 623.942h-79.127l39.564 68.422-60.509 34.909-39.564-68.422-39.564 68.422-60.509-34.909 39.564-68.422h-79.127v-69.818h79.127l-39.564-68.888 60.509-34.909 39.564 68.888 39.564-68.888 60.509 34.909-39.564 68.888h79.127v69.818z" />
+<glyph unicode="&#xe961;" glyph-name="phone" d="M698.182 959.999h-372.363c-64.233 0-116.364-52.131-116.364-116.364v-791.272c0-64.233 52.131-116.364 116.364-116.364h372.363c64.233 0 116.364 52.131 116.364 116.364v791.272c0 64.233-52.131 116.364-116.364 116.364zM512-17.455c-38.632 0-69.818 31.186-69.818 69.818s31.186 69.818 69.818 69.818c38.632 0 69.818-31.186 69.818-69.818s-31.186-69.818-69.818-69.818zM721.454 168.727h-418.909v651.636h418.909v-651.636z" />
+<glyph unicode="&#xe962;" glyph-name="envelope" d="M1024.001 755.2c0 56.32-46.080 102.4-102.4 102.4h-819.201c-56.32 0-102.4-46.080-102.4-102.4v-614.4c0-56.32 46.080-102.4 102.4-102.4h819.201c56.32 0 102.4 46.080 102.4 102.4v614.4zM921.6 755.2l-409.6-256-409.6 256h819.201zM921.6 140.8h-819.201v512.001l409.6-256 409.6 256v-512.001z" />
+<glyph unicode="&#xe963;" glyph-name="badge" d="M819.2 448h-204.8v-76.8h204.8v76.8zM819.2 294.4h-204.8v-76.8h204.8v76.8zM921.6 704h-256v153.6c0 56.32-46.080 102.4-102.4 102.4h-102.4c-56.32 0-102.4-46.080-102.4-102.4v-153.6h-256c-56.32 0-102.4-46.080-102.4-102.4v-563.2c0-56.32 46.080-102.4 102.4-102.4h819.201c56.32 0 102.4 46.080 102.4 102.4v563.2c0 56.32-46.080 102.4-102.4 102.4zM460.8 857.6h102.4v-256h-102.4v256zM921.6 38.4h-819.201v563.2h256c0-56.32 46.080-102.4 102.4-102.4h102.4c56.32 0 102.4 46.080 102.4 102.4h256v-563.2zM358.4 294.4c42.415 0 76.8 34.386 76.8 76.8s-34.385 76.8-76.8 76.8c-42.415 0-76.8-34.386-76.8-76.8s34.385-76.8 76.8-76.8zM464.896 233.984c-32.768 14.336-68.608 22.016-106.496 22.016s-73.728-7.68-106.496-22.016c-28.672-12.288-47.104-39.936-47.104-71.168v-22.016h307.2v22.016c0 31.232-18.432 58.88-47.104 71.168z" />
 <glyph unicode="&#xe9d1;" glyph-name="eye-blocked" d="M945.942 945.942c-18.746 18.744-49.136 18.744-67.882 0l-202.164-202.164c-51.938 15.754-106.948 24.222-163.896 24.222-223.318 0-416.882-130.042-512-320 41.122-82.124 100.648-153.040 173.022-207.096l-158.962-158.962c-18.746-18.746-18.746-49.136 0-67.882 9.372-9.374 21.656-14.060 33.94-14.060s24.568 4.686 33.942 14.058l864 864c18.744 18.746 18.744 49.138 0 67.884zM416 640c42.24 0 78.082-27.294 90.92-65.196l-121.724-121.724c-37.902 12.838-65.196 48.68-65.196 90.92 0 53.020 42.98 96 96 96zM110.116 448c38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.862 7.3-9.962-27.328-15.412-56.822-15.412-87.596 0-54.89 17.286-105.738 46.7-147.418l-60.924-60.924c-52.446 36.842-97.202 83.882-131.66 138.342zM768 518c0 27.166-4.256 53.334-12.102 77.898l-321.808-321.808c24.568-7.842 50.742-12.090 77.91-12.090 141.382 0 256 114.618 256 256zM830.026 670.026l-69.362-69.362c1.264-0.786 2.53-1.568 3.786-2.368 60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-38.664 0-76.902 4.76-113.962 14.040l-76.894-76.894c59.718-21.462 123.95-33.146 190.856-33.146 223.31 0 416.876 130.042 512 320-45.022 89.916-112.118 166.396-193.974 222.026z" />
 </font></defs></svg>