@onewelcome/react-lib-components 8.1.1 → 8.2.0

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

@@ -87,6 +87,9 @@ export const DataGridFilterPopover = ({
     }
   }, [isOpen]);
 
+  const columnMetadata = columnsMetadata.find(({ name }) => name === column);
+  const disableAddNew = columnMetadata?.disableAddNew;
+
   return (
     <Popover
       tabIndex={-1}
@@ -153,16 +156,18 @@ export const DataGridFilterPopover = ({
               )
             }
             selectProps={{
-              addNew: {
-                label: addNewValueLabel,
-                onAddNew: value => {
-                  if (value) {
-                    setValues(prev => [...prev, value]);
-                    setPickedValues(prev => [...prev, value]);
-                  }
-                },
-                btnProps: { title: addNewValueButtonTitle, type: "button" }
-              },
+              addNew: disableAddNew
+                ? undefined
+                : {
+                    label: addNewValueLabel,
+                    onAddNew: value => {
+                      if (value) {
+                        setValues(prev => [...prev, value]);
+                        setPickedValues(prev => [...prev, value]);
+                      }
+                    },
+                    btnProps: { title: addNewValueButtonTitle, type: "button" }
+                  },
               search: {
                 enabled: true,
                 renderThreshold: 0

package/src/components/DataGrid/DataGridFilters/DataGridFilters.interfaces.ts

@@ -57,6 +57,7 @@ export interface DataGridColumnMetadata {
   headline: string;
   operators?: string[];
   defaultValues?: string[];
+  disableAddNew?: boolean;
 }
 
 export interface PopoverTranslations {

package/src/components/DataGrid/DataGridFilters/DataGridToolbar.module.scss

@@ -16,6 +16,8 @@
 
 @use "../../../mixins.module.scss";
 
+@include mixins.searchInputPointer("search", ".wrapper");
+
 .wrapper {
   display: flex;
   align-items: flex-start;

package/src/components/DataGrid/DataGridHeader/DataGridHeader.tsx

@@ -24,6 +24,7 @@ export interface Props extends ComponentPropsWithRef<"thead"> {
   initialSort?: Sort;
   onSort?: OnSortFunction;
   enableExpandableRow?: boolean;
+  enableNestedRows?: boolean;
   disableContextMenuColumn?: boolean;
   enableMultiSorting?: boolean;
   spacing?: React.CSSProperties;
@@ -38,6 +39,7 @@ const DataGridHeaderComponent: ForwardRefRenderFunction<HTMLTableSectionElement,
     headers,
     disableContextMenuColumn,
     enableExpandableRow,
+    enableNestedRows,
     enableMultiSorting,
     spacing,
     ...rest

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

@@ -86,7 +86,7 @@
       border: var(--file-upload-border-width) var(--drag-drop-border-style)
         var(--color-blue-grey500);
       border-radius: var(--input-border-radius);
-      background-color: var(--color-primary-light);
+      background-color: var(--color-primary50);
 
       @include transition(all, 0.2s, ease-in-out);
       &::before {
@@ -99,7 +99,7 @@
     }
 
     &:hover .outline {
-      background-color: var(--color-primary-light);
+      background-color: var(--color-primary50);
     }
 
     & .file-select {

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

@@ -16,6 +16,8 @@
 
 @use "../../../../mixins.module.scss";
 
+@include mixins.searchInputPointer("search", ".input-wrapper");
+
 input {
   &.floating-label {
     padding-top: 1rem;

package/src/components/Notifications/Alert/AlertContainer/AlertContainer.module.scss

@@ -15,6 +15,7 @@
  */
 @use "../../../../mixins.module.scss";
 @use "../../../../variables.scss";
+@use "../alertVariables.scss";
 
 .alerts {
   position: fixed;
@@ -50,7 +51,7 @@
     width: initial;
 
     &.center {
-      left: calc(50% - 18.75rem);
+      left: calc(50% - (alertVariables.$alert-item-width / 2));
     }
   }
 }

package/src/components/Notifications/Alert/AlertItem/AlertItem.module.scss

@@ -15,6 +15,7 @@
  */
 
 @use "../../../../mixins.module.scss";
+@use "../alertVariables.scss";
 
 .alert {
   padding: 1rem 0.875rem;
@@ -224,6 +225,7 @@
     font-size: 0.875rem;
     line-height: 1.25rem;
     margin-bottom: 0;
+    word-break: break-word;
   }
 
   .actions {
@@ -272,6 +274,6 @@
 @media only screen and (min-width: 37.5em) {
   .alert {
     width: min-content;
-    min-width: 25rem;
+    min-width: alertVariables.$alert-item-width;
   }
 }

package/src/components/Notifications/Alert/alertVariables.scss

@@ -0,0 +1,17 @@
+/*!
+ * 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.
+ */
+
+$alert-item-width: 25rem;

package/src/components/_BaseStyling_/BaseStyling.tsx

@@ -33,13 +33,12 @@ interface CSSProperties {
   colorPrimary600?: string;
   colorPrimary700?: string;
   colorPrimary900?: string;
-  colorPrimaryLight?: string;
+  colorPrimary50?: string;
   colorBlueGrey100?: string;
   colorBlueGrey200?: string;
   colorBlueGrey300?: string;
   colorBlueGrey400?: string;
   colorBlueGrey25?: string;
-  colorBlueGrey25Transparent?: string;
   colorBlueGrey50?: string;
   colorBlueGrey500?: string;
   colorBlueGrey700?: string;
@@ -50,9 +49,6 @@ interface CSSProperties {
   colorGreen500?: string;
   colorGreen600?: string;
   colorGreen700?: string;
-  colorLightBlue500?: string;
-  colorLightBlue600?: string;
-  colorShadowBlue?: string;
   colorOrange100?: string;
   colorOrange500?: string;
   colorOrange600?: string;
@@ -116,7 +112,6 @@ interface CSSProperties {
   inputHelperTextColor?: string;
   inputHoverBackgroundColor?: string;
   inputDisabledBackgroundColor?: string;
-  dragBackgroundColor?: string;
   dragBorderStyle?: string;
   modalShadowColor?: string;
   modalBackgroundColor?: string;
@@ -220,15 +215,14 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
 
 export const BaseStyling = ({ children, properties = {} }: Props) => {
   const defaultProperties: CSSProperties = {
+    colorPrimary50: "#E6E7F4",
     colorPrimary100: "#CDD0EA",
     colorPrimary300: "#6871BF",
     colorPrimary500: "#041295",
     colorPrimary600: "#030F77",
     colorPrimary700: "#020B59",
     colorPrimary900: "#01041E",
-    colorPrimaryLight: "#E6E7F4",
     colorBlueGrey25: "#F7F7F9",
-    colorBlueGrey25Transparent: "rgba(247, 247, 249, .8)",
     colorBlueGrey50: "#EEEFF3",
     colorBlueGrey100: "#DEDEE6",
     colorBlueGrey200: "#BCBECE",
@@ -243,8 +237,6 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorGreen500: "#178244",
     colorGreen600: "#126836",
     colorGreen700: "#0E4E29",
-    colorLightBlue500: "#00BCDD",
-    colorLightBlue600: "#0096B1",
     colorOrange100: "#FFE0B2",
     colorOrange500: "#E07900",
     colorOrange600: "#B36100",
@@ -257,7 +249,6 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorBlack100: "#000000",
     colorBlack20: "rgba(0, 0, 0, 0.2)",
     colorBlack10: "rgba(0, 0, 0, 0.1)",
-    colorShadowBlue: "#7078C3",
     colorWhite: "#FFFFFF",
     colorFocus: "var(--color-primary300)",
     colorPrimary: "var(--color-primary500)",
@@ -315,7 +306,6 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     inputHelperTextColor: "var(--color-blue-grey500)",
     inputHoverBackgroundColor: "var(--default-hover-color)",
     inputDisabledBackgroundColor: "var(--input-hover-background-color)",
-    dragBackgroundColor: "var(--color-blue-grey25-transparent)",
     dragBorderStyle: "solid",
     modalShadowColor: "rgba(0, 0, 0, 0.16)",
     modalBackgroundColor: "var(--light)",

package/src/index.ts

@@ -16,6 +16,7 @@
 
 /* Components */
 export { BaseStyling } from "./components/_BaseStyling_/BaseStyling";
+export type { Props as BaseStylingProps } from "./components/_BaseStyling_/BaseStyling";
 export { Button } from "./components/Button/Button";
 export type { Props as ButtonProps } from "./components/Button/Button";
 export { Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs";

package/src/mixins.module.scss

@@ -312,3 +312,15 @@
   border-color: $border-color;
   padding-left: calc(1rem - var(--alert-border-width));
 }
+
+@mixin searchInputPointer($inputType, $selector) {
+  @if $selector {
+    #{$selector} {
+      @if $inputType == "search" {
+        input[type="search"]::-webkit-search-cancel-button {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}