@onewelcome/react-lib-components 8.12.2 → 8.13.0

package/dist/esm/src/components/_BaseStyling_/BaseStyling.d.ts

@@ -16,21 +16,23 @@ export interface CSSProperties {
     colorPrimary700?: string;
     colorPrimary900?: string;
     colorPrimary50?: string;
+    colorBlueGrey25?: string;
+    colorBlueGrey50?: string;
     colorBlueGrey100?: string;
     colorBlueGrey200?: string;
     colorBlueGrey300?: string;
     colorBlueGrey400?: string;
-    colorBlueGrey25?: string;
-    colorBlueGrey50?: string;
     colorBlueGrey500?: string;
     colorBlueGrey700?: string;
     colorBlueGrey800?: string;
     colorBlueGrey900?: string;
+    colorGreen50?: string;
     colorGreen100?: string;
     colorGreen200?: string;
     colorGreen500?: string;
     colorGreen600?: string;
     colorGreen700?: string;
+    colorOrange50?: string;
     colorOrange100?: string;
     colorOrange500?: string;
     colorOrange600?: string;

package/dist/esm/src/components/withReadOnly.d.ts

@@ -5,4 +5,8 @@ export interface WithReadOnlyProps {
     helperText?: string;
     type?: string;
 }
-export declare const withReadOnly: <P extends object>(WrappedComponent: ComponentType<P>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<React.PropsWithChildren<P & WithReadOnlyProps>> & React.RefAttributes<unknown>>;
+type WithReadOnlyOptions = {
+    isWrapperComponent: boolean;
+};
+export declare const withReadOnly: <P extends object>(WrappedComponent: ComponentType<P>, options?: WithReadOnlyOptions) => React.ForwardRefExoticComponent<React.PropsWithoutRef<React.PropsWithChildren<P & WithReadOnlyProps>> & React.RefAttributes<unknown>>;
+export {};

package/dist/esm/src/index.d.ts

@@ -1,5 +1,5 @@
-export { BaseStyling, CSSProperties as BaseStylingCSSProperties } from "./components/_BaseStyling_/BaseStyling";
-export type { Props as BaseStylingProps } from "./components/_BaseStyling_/BaseStyling";
+export { BaseStyling } from "./components/_BaseStyling_/BaseStyling";
+export type { Props as BaseStylingProps, CSSProperties as BaseStylingCSSProperties } 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";
@@ -54,7 +54,8 @@ export { Modal } from "./components/Notifications/Modal/Modal";
 export type { Props as ModalProps } from "./components/Notifications/Modal/Modal";
 export { useAlert } from "./components/Notifications/Alert/useAlert";
 export { AlertProvider } from "./components/Notifications/Alert/AlertProvider/AlertProvider";
-export { AlertItem, Props as AlertItemProps } from "./components/Notifications/Alert/AlertItem/AlertItem";
+export { AlertItem } from "./components/Notifications/Alert/AlertItem/AlertItem";
+export type { Props as AlertItemProps } from "./components/Notifications/Alert/AlertItem/AlertItem";
 export type { Props as AlertProviderProps } from "./components/Notifications/Alert/AlertProvider/AlertProvider";
 export { Dialog } from "./components/Notifications/Dialog/Dialog";
 export type { Props as DialogProps, Action as DialogAction } from "./components/Notifications/Dialog/Dialog";
@@ -144,7 +145,7 @@ export { DataGridDrawerItem } from "./components/DataGrid/DataGridBody/DataGridD
 export type { Props as DataGridDrawerItemProps } from "./components/DataGrid/DataGridBody/DataGridDrawer/DataGridDrawerItem";
 export { DataGridCell } from "./components/DataGrid/DataGridBody/DataGridCell/DataGridCell";
 export type { Props as DataGridCellProps } from "./components/DataGrid/DataGridBody/DataGridCell/DataGridCell";
-export { Filter } from "./components/DataGrid/DataGridFilters/DataGridFilters.interfaces";
+export type { Filter } from "./components/DataGrid/DataGridFilters/DataGridFilters.interfaces";
 export { FilterKeyMapper } from "./components/DataGrid/DataGridFilters/FilterKeyMapper";
 export { useFiltersReducer } from "./components/DataGrid/DataGridFilters/useFiltersReducer";
 /** Banner */

package/dist/esm/src/readyclasses.module.scss.esm.js

@@ -1,7 +1,7 @@
 import styleInject from '../node_modules/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*!\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 */.readyclasses_sr-only_rE09l{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.readyclasses_hidden_rE09l{display:none}.readyclasses_slide-in_rE09l{animation:readyclasses_slide-in_rE09l .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-in_rE09l{animation-duration:.1ms}}.readyclasses_slide-out_rE09l{animation:readyclasses_slide-out_rE09l .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-out_rE09l{animation-duration:.1ms}}@keyframes readyclasses_slide-in_rE09l{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes readyclasses_slide-out_rE09l{0%{transform:translateY(0)}to{transform:translateY(100vh)}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlYWR5Y2xhc3Nlcy5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7RUFjRSxDQUNGLDRCQU9FLGtCQUFzQixDQUN0QixRQUFTLENBTFQsVUFBVyxDQUVYLFdBQVksQ0FDWixlQUFnQixDQUZoQixTQUFVLENBSFYsaUJBQWtCLENBQ2xCLFNBT0YsQ0FFQSwyQkFDRSxZQUNGLENBRUEsNkJBQ0Usa0RBQ0YsQ0FDQSx1Q0FDRSw2QkFDRSx1QkFDRixDQUNGLENBRUEsOEJBQ0UsbURBQ0YsQ0FDQSx1Q0FDRSw4QkFDRSx1QkFDRixDQUNGLENBRUEsdUNBQ0UsR0FDRSwyQkFDRixDQUNBLEdBQ0UsdUJBQ0YsQ0FDRixDQUNBLHdDQUNFLEdBQ0UsdUJBQ0YsQ0FDQSxHQUNFLDJCQUNGLENBQ0YiLCJmaWxlIjoicmVhZHljbGFzc2VzLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyohXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi5zci1vbmx5IHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB3aWR0aDogMXB4O1xuICBoZWlnaHQ6IDFweDtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAtMXB4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBjbGlwOiByZWN0KDAsIDAsIDAsIDApO1xuICBib3JkZXI6IDA7XG59XG5cbi5oaWRkZW4ge1xuICBkaXNwbGF5OiBub25lO1xufVxuXG4uc2xpZGUtaW4ge1xuICBhbmltYXRpb246IHNsaWRlLWluIDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtaW4ge1xuICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4xbXM7XG4gIH1cbn1cblxuLnNsaWRlLW91dCB7XG4gIGFuaW1hdGlvbjogc2xpZGUtb3V0IDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtb3V0IHtcbiAgICBhbmltYXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG5cbkBrZXlmcmFtZXMgc2xpZGUtaW4ge1xuICAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMHZoKTtcbiAgfVxuICAxMDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG59XG5Aa2V5ZnJhbWVzIHNsaWRlLW91dCB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxMDB2aCk7XG4gIH1cbn0iXX0= */";
-var readyclasses = {"sr-only":"readyclasses_sr-only_rE09l","hidden":"readyclasses_hidden_rE09l","slide-in":"readyclasses_slide-in_rE09l","slide-out":"readyclasses_slide-out_rE09l"};
+var css_248z = "/*!\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 */.readyclasses_sr-only_pNyP0{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.readyclasses_hidden_pNyP0{display:none}.readyclasses_slide-in_pNyP0{animation:readyclasses_slide-in_pNyP0 .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-in_pNyP0{animation-duration:.1ms}}.readyclasses_slide-out_pNyP0{animation:readyclasses_slide-out_pNyP0 .5s forwards}@media (prefers-reduced-motion:reduce){.readyclasses_slide-out_pNyP0{animation-duration:.1ms}}@keyframes readyclasses_slide-in_pNyP0{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes readyclasses_slide-out_pNyP0{0%{transform:translateY(0)}to{transform:translateY(100vh)}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlYWR5Y2xhc3Nlcy5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7RUFjRSxDQUNGLDRCQU9FLGtCQUFzQixDQUN0QixRQUFTLENBTFQsVUFBVyxDQUVYLFdBQVksQ0FDWixlQUFnQixDQUZoQixTQUFVLENBSFYsaUJBQWtCLENBQ2xCLFNBT0YsQ0FFQSwyQkFDRSxZQUNGLENBRUEsNkJBQ0Usa0RBQ0YsQ0FDQSx1Q0FDRSw2QkFDRSx1QkFDRixDQUNGLENBRUEsOEJBQ0UsbURBQ0YsQ0FDQSx1Q0FDRSw4QkFDRSx1QkFDRixDQUNGLENBRUEsdUNBQ0UsR0FDRSwyQkFDRixDQUNBLEdBQ0UsdUJBQ0YsQ0FDRixDQUNBLHdDQUNFLEdBQ0UsdUJBQ0YsQ0FDQSxHQUNFLDJCQUNGLENBQ0YiLCJmaWxlIjoicmVhZHljbGFzc2VzLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyohXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi5zci1vbmx5IHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB3aWR0aDogMXB4O1xuICBoZWlnaHQ6IDFweDtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAtMXB4O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBjbGlwOiByZWN0KDAsIDAsIDAsIDApO1xuICBib3JkZXI6IDA7XG59XG5cbi5oaWRkZW4ge1xuICBkaXNwbGF5OiBub25lO1xufVxuXG4uc2xpZGUtaW4ge1xuICBhbmltYXRpb246IHNsaWRlLWluIDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtaW4ge1xuICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4xbXM7XG4gIH1cbn1cblxuLnNsaWRlLW91dCB7XG4gIGFuaW1hdGlvbjogc2xpZGUtb3V0IDAuNXMgZm9yd2FyZHM7XG59XG5AbWVkaWEgKHByZWZlcnMtcmVkdWNlZC1tb3Rpb246IHJlZHVjZSkge1xuICAuc2xpZGUtb3V0IHtcbiAgICBhbmltYXRpb24tZHVyYXRpb246IDAuMW1zO1xuICB9XG59XG5cbkBrZXlmcmFtZXMgc2xpZGUtaW4ge1xuICAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMHZoKTtcbiAgfVxuICAxMDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG59XG5Aa2V5ZnJhbWVzIHNsaWRlLW91dCB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xuICB9XG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgxMDB2aCk7XG4gIH1cbn0iXX0= */";
+var readyclasses = {"sr-only":"readyclasses_sr-only_pNyP0","hidden":"readyclasses_hidden_pNyP0","slide-in":"readyclasses_slide-in_pNyP0","slide-out":"readyclasses_slide-out_pNyP0"};
 styleInject(css_248z);
 
 export { readyclasses as default };

package/dist/esm/withReadOnly.esm.js

@@ -36,7 +36,8 @@ const getConditionalProps = (readOnlyView, type, helperText) => {
     }
     return props;
 };
-const withReadOnly = (WrappedComponent) => {
+const withReadOnly = (WrappedComponent, options) => {
+    const { isWrapperComponent } = options || {};
     const preventKeyUpAndKeyDownHandlerForSpecificComponents = (readOnlyView) => {
         const preventSubmissionKeys = (e) => {
             const isEnterOrSpace = (e) => e.key === "Enter" || e.key === " ";
@@ -60,7 +61,7 @@ const withReadOnly = (WrappedComponent) => {
     };
     const WithReadOnlyComponent = React.forwardRef((props, ref) => {
         const { readOnlyView = false, required, children, helperText, type = "", ...restProps } = props;
-        return (React.createElement(WrappedComponent, { ref: ref, ...restProps, "data-readonlyview": readOnlyView, "aria-readonly": readOnlyView, required: readOnlyView ? false : required, ...getConditionalProps(readOnlyView, type, helperText), ...preventKeyUpAndKeyDownHandlerForSpecificComponents(readOnlyView) }, children));
+        return (React.createElement(WrappedComponent, { ref: ref, ...restProps, "data-readonlyview": readOnlyView, "aria-readonly": isWrapperComponent ? undefined : readOnlyView, required: readOnlyView ? false : required, ...getConditionalProps(readOnlyView, type, helperText), ...preventKeyUpAndKeyDownHandlerForSpecificComponents(readOnlyView) }, children));
     });
     WithReadOnlyComponent.displayName = `withReadOnly_${getDisplayName(WrappedComponent)}`;
     return WithReadOnlyComponent;

package/dist/esm/withReadOnly.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"withReadOnly.esm.js","sources":["../../../../src/components/withReadOnly.tsx"],"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 React, { ComponentType, ForwardedRef, PropsWithChildren } from \"react\";\n\nexport interface WithReadOnlyProps {\n  readOnlyView?: boolean;\n  required?: boolean;\n  helperText?: string;\n  type?: string;\n}\n\nconst componentsWithKeyEventsToPrevent: string[] = [\"CheckboxWrapper\"];\n\nconst getDisplayName = <P,>(WrappedComponent: ComponentType<P>) => {\n  return WrappedComponent.displayName ?? WrappedComponent.name ?? \"Component\";\n};\n\nconst getConditionalProps = (readOnlyView: boolean, type: string, helperText?: string) => {\n  const props: Record<string, unknown> = {};\n\n  if (readOnlyView) {\n    props.style = { pointerEvents: \"none\", userSelect: \"text\" };\n    if (helperText) {\n      props.helperText = \"\";\n    }\n  } else {\n    props.helperText = helperText;\n  }\n\n  if (type) {\n    props.type = type;\n  }\n\n  return props;\n};\n\nexport const withReadOnly = <P extends object>(WrappedComponent: ComponentType<P>) => {\n  const preventKeyUpAndKeyDownHandlerForSpecificComponents = (readOnlyView: boolean) => {\n    const preventSubmissionKeys = (e: KeyboardEvent) => {\n      const isEnterOrSpace = (e: KeyboardEvent) => e.key === \"Enter\" || e.key === \" \";\n      if (isEnterOrSpace(e)) {\n        e.stopPropagation();\n        e.preventDefault();\n      }\n    };\n\n    if (\n      readOnlyView &&\n      componentsWithKeyEventsToPrevent.includes(\n        WrappedComponent.displayName || WrappedComponent.name\n      )\n    ) {\n      const props: Record<string, unknown> = {};\n\n      props.onKeyUp = (e: KeyboardEvent) => {\n        preventSubmissionKeys(e);\n      };\n\n      props.onKeyDown = (e: KeyboardEvent) => {\n        preventSubmissionKeys(e);\n      };\n\n      return props;\n    }\n\n    return {};\n  };\n\n  const WithReadOnlyComponent = React.forwardRef(\n    (props: PropsWithChildren<P & WithReadOnlyProps>, ref: ForwardedRef<unknown>) => {\n      const {\n        readOnlyView = false,\n        required,\n        children,\n        helperText,\n        type = \"\",\n        ...restProps\n      } = props;\n\n      return (\n        <WrappedComponent\n          ref={ref}\n          {...(restProps as P)}\n          data-readonlyview={readOnlyView}\n          aria-readonly={readOnlyView}\n          required={readOnlyView ? false : required}\n          {...getConditionalProps(readOnlyView, type, helperText)}\n          {...preventKeyUpAndKeyDownHandlerForSpecificComponents(readOnlyView)}\n        >\n          {children}\n        </WrappedComponent>\n      );\n    }\n  );\n\n  WithReadOnlyComponent.displayName = `withReadOnly_${getDisplayName(WrappedComponent)}`;\n  return WithReadOnlyComponent;\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"withReadOnly.esm.js","sources":["../../../../src/components/withReadOnly.tsx"],"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 React, { ComponentType, ForwardedRef, PropsWithChildren } from \"react\";\n\nexport interface WithReadOnlyProps {\n  readOnlyView?: boolean;\n  required?: boolean;\n  helperText?: string;\n  type?: string;\n}\n\nconst componentsWithKeyEventsToPrevent: string[] = [\"CheckboxWrapper\"];\n\nconst getDisplayName = <P,>(WrappedComponent: ComponentType<P>) => {\n  return WrappedComponent.displayName ?? WrappedComponent.name ?? \"Component\";\n};\n\nconst getConditionalProps = (readOnlyView: boolean, type: string, helperText?: string) => {\n  const props: Record<string, unknown> = {};\n\n  if (readOnlyView) {\n    props.style = { pointerEvents: \"none\", userSelect: \"text\" };\n    if (helperText) {\n      props.helperText = \"\";\n    }\n  } else {\n    props.helperText = helperText;\n  }\n\n  if (type) {\n    props.type = type;\n  }\n\n  return props;\n};\n\ntype WithReadOnlyOptions = {\n  isWrapperComponent: boolean;\n};\n\nexport const withReadOnly = <P extends object>(\n  WrappedComponent: ComponentType<P>,\n  options?: WithReadOnlyOptions\n) => {\n  const { isWrapperComponent } = options || {};\n\n  const preventKeyUpAndKeyDownHandlerForSpecificComponents = (readOnlyView: boolean) => {\n    const preventSubmissionKeys = (e: KeyboardEvent) => {\n      const isEnterOrSpace = (e: KeyboardEvent) => e.key === \"Enter\" || e.key === \" \";\n      if (isEnterOrSpace(e)) {\n        e.stopPropagation();\n        e.preventDefault();\n      }\n    };\n\n    if (\n      readOnlyView &&\n      componentsWithKeyEventsToPrevent.includes(\n        WrappedComponent.displayName || WrappedComponent.name\n      )\n    ) {\n      const props: Record<string, unknown> = {};\n\n      props.onKeyUp = (e: KeyboardEvent) => {\n        preventSubmissionKeys(e);\n      };\n\n      props.onKeyDown = (e: KeyboardEvent) => {\n        preventSubmissionKeys(e);\n      };\n\n      return props;\n    }\n\n    return {};\n  };\n\n  const WithReadOnlyComponent = React.forwardRef(\n    (props: PropsWithChildren<P & WithReadOnlyProps>, ref: ForwardedRef<unknown>) => {\n      const {\n        readOnlyView = false,\n        required,\n        children,\n        helperText,\n        type = \"\",\n        ...restProps\n      } = props;\n\n      return (\n        <WrappedComponent\n          ref={ref}\n          {...(restProps as P)}\n          data-readonlyview={readOnlyView}\n          aria-readonly={isWrapperComponent ? undefined : readOnlyView}\n          required={readOnlyView ? false : required}\n          {...getConditionalProps(readOnlyView, type, helperText)}\n          {...preventKeyUpAndKeyDownHandlerForSpecificComponents(readOnlyView)}\n        >\n          {children}\n        </WrappedComponent>\n      );\n    }\n  );\n\n  WithReadOnlyComponent.displayName = `withReadOnly_${getDisplayName(WrappedComponent)}`;\n  return WithReadOnlyComponent;\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "8.12.2",
+  "version": "8.13.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -61,7 +61,7 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@chromatic-com/storybook": "^1.6.0",
+    "@chromatic-com/storybook": "^3.2.6",
     "@mdx-js/react": "^3.0.1",
     "@onewelcome/eslint-config-shared-codestyle": "^9.3.0",
     "@onewelcome/storybook-addon-basestyling": "^2.0.0",
@@ -69,20 +69,21 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-a11y": "~8.1.11",
-    "@storybook/addon-actions": "~8.1.11",
-    "@storybook/addon-docs": "~8.1.11",
-    "@storybook/addon-essentials": "~8.1.11",
-    "@storybook/addon-interactions": "~8.1.11",
-    "@storybook/addon-links": "~8.1.11",
+    "@storybook/addon-a11y": "^8.6.12",
+    "@storybook/addon-actions": "^8.6.12",
+    "@storybook/addon-docs": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-webpack5-compiler-babel": "~3.0.3",
-    "@storybook/blocks": "~8.1.11",
-    "@storybook/components": "~8.1.11",
-    "@storybook/manager-api": "~8.1.11",
-    "@storybook/react": "~8.1.11",
-    "@storybook/react-webpack5": "~8.1.11",
-    "@storybook/theming": "~8.1.11",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/components": "^8.6.12",
+    "@storybook/manager-api": "^8.6.12",
+    "@storybook/preview-api": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-webpack5": "^8.6.12",
+    "@storybook/theming": "^8.6.12",
     "@testing-library/dom": "^10.3.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
@@ -104,7 +105,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.12.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
@@ -129,9 +130,9 @@
     "sass": "1.77.6",
     "sass-loader": "^14.2.1",
     "size-limit": "^11.1.4",
-    "storybook": "~8.1.11",
+    "storybook": "^8.6.12",
     "storybook-addon-mock": "^5.0.0",
-    "storybook-addon-pseudo-states": "^3.1.1",
+    "storybook-addon-pseudo-states": "^4.0.4",
     "style-loader": "^4.0.0",
     "ts-jest": "^29.1.5",
     "tslib": "^2.6.3",

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

@@ -86,4 +86,4 @@ ForwardedCheckboxWrapper.displayName = "CheckboxWrapper";
 /**
  * @deprecated
  */
-export const CheckboxWrapper = withReadOnly(ForwardedCheckboxWrapper);
+export const CheckboxWrapper = withReadOnly(ForwardedCheckboxWrapper, { isWrapperComponent: true });

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

@@ -120,4 +120,6 @@ const InputWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   );
 };
 
-export const InputWrapper = withReadOnly(React.forwardRef(InputWrapperComponent));
+export const InputWrapper = withReadOnly(React.forwardRef(InputWrapperComponent), {
+  isWrapperComponent: true
+});

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

@@ -83,4 +83,6 @@ const MultiSelectWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Prop
   );
 };
 
-export const MultiSelectWrapper = withReadOnly(React.forwardRef(MultiSelectWrapperComponent));
+export const MultiSelectWrapper = withReadOnly(React.forwardRef(MultiSelectWrapperComponent), {
+  isWrapperComponent: true
+});

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

@@ -101,4 +101,6 @@ const RadioWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
   );
 };
 
-export const RadioWrapper = withReadOnly(React.forwardRef(RadioWrapperComponent));
+export const RadioWrapper = withReadOnly(React.forwardRef(RadioWrapperComponent), {
+  isWrapperComponent: true
+});

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

@@ -86,4 +86,4 @@ const SelectWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props> =
 const forwardedSelectWrapper = React.forwardRef(SelectWrapperComponent);
 forwardedSelectWrapper.displayName = "SelectWrapper";
 
-export const SelectWrapper = withReadOnly(forwardedSelectWrapper);
+export const SelectWrapper = withReadOnly(forwardedSelectWrapper, { isWrapperComponent: true });

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

@@ -149,4 +149,6 @@ const TextareaWrapperComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
   );
 };
 
-export const TextareaWrapper = withReadOnly(React.forwardRef(TextareaWrapperComponent));
+export const TextareaWrapper = withReadOnly(React.forwardRef(TextareaWrapperComponent), {
+  isWrapperComponent: true
+});

package/src/components/Layout/ContentHeader/ContentHeader.tsx

@@ -59,7 +59,7 @@ export const ContentHeaderComponent = ({
   ...rest
 }: Props) => {
   const errorTag = (
-    <Tag icon={Icons.Forbidden} backgroundColor="var(--color-red50)" color="var(--color-red900)">
+    <Tag icon={Icons.Forbidden} backgroundColor="var(--color-red100)" color="var(--color-red900)">
       {errorTagText || "Blocked"}
     </Tag>
   );

package/src/components/Notifications/SideSheet/SideSheetContent/SideSheetContent.tsx

@@ -22,4 +22,4 @@ export const SideSheetContent: React.FC<Props> = ({ className, ...rest }) => (
   <BaseModalContent {...rest} className={`${classes["side-sheet-content"]} ${className}`} />
 );
 
-export { Props } from "../../BaseModal/BaseModalContent/BaseModalContent";
+export type { Props } from "../../BaseModal/BaseModalContent/BaseModalContent";

package/src/components/Notifications/SideSheet/SideSheetHeader/SideSheetHeader.tsx

@@ -22,4 +22,4 @@ export const SideSheetHeader: React.FC<Props> = ({ className, ...rest }) => (
   <BaseModalHeader {...rest} className={`${classes["side-sheet-header"]} ${className}`} />
 );
 
-export { Props } from "../../BaseModal/BaseModalHeader/BaseModalHeader";
+export type { Props } from "../../BaseModal/BaseModalHeader/BaseModalHeader";

package/src/components/_BaseStyling_/BaseStyling.tsx

@@ -34,21 +34,23 @@ export interface CSSProperties {
   colorPrimary700?: string;
   colorPrimary900?: string;
   colorPrimary50?: string;
+  colorBlueGrey25?: string;
+  colorBlueGrey50?: string;
   colorBlueGrey100?: string;
   colorBlueGrey200?: string;
   colorBlueGrey300?: string;
   colorBlueGrey400?: string;
-  colorBlueGrey25?: string;
-  colorBlueGrey50?: string;
   colorBlueGrey500?: string;
   colorBlueGrey700?: string;
   colorBlueGrey800?: string;
   colorBlueGrey900?: string;
+  colorGreen50?: string;
   colorGreen100?: string;
   colorGreen200?: string;
   colorGreen500?: string;
   colorGreen600?: string;
   colorGreen700?: string;
+  colorOrange50?: string;
   colorOrange100?: string;
   colorOrange500?: string;
   colorOrange600?: string;
@@ -246,16 +248,18 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorBlueGrey700: "#383A4B",
     colorBlueGrey800: "#252733",
     colorBlueGrey900: "#131319",
+    colorGreen50: "#E8F3ED",
     colorGreen100: "#D1E6DA",
     colorGreen200: "#A2CDB4",
     colorGreen500: "#178244",
     colorGreen600: "#126836",
     colorGreen700: "#0E4E29",
+    colorOrange50: "#FCF2E6",
     colorOrange100: "#FFE0B2",
     colorOrange500: "#E07900",
     colorOrange600: "#B36100",
     colorOrange700: "#864900",
-    colorRed50: "#F9D2CC",
+    colorRed50: "#FCE9E6",
     colorRed100: "#FFCDD2",
     colorRed200: "#F3A599",
     colorRed500: "#E01E00",
@@ -341,16 +345,16 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     alertNeutralBackgroundColor: "var(--color-blue-grey50)",
     alertNeutralInvertedColor: "var(--color-blue-grey500)",
 
-    alertInfoBackgroundColor: "var(--color-primary100)",
+    alertInfoBackgroundColor: "var(--color-primary50)",
     alertInfoInvertedColor: "var(--color-primary500)",
 
-    alertSuccessBackgroundColor: "var(--color-green100)",
+    alertSuccessBackgroundColor: "var(--color-green50)",
     alertSuccessInvertedColor: "var(--color-green500)",
 
-    alertErrorBackgroundColor: "var(--color-red100)",
+    alertErrorBackgroundColor: "var(--color-red50)",
     alertErrorInvertedColor: "var(--color-red500)",
 
-    alertWarningBackgroundColor: "var(--color-orange100)",
+    alertWarningBackgroundColor: "var(--color-orange50)",
     alertWarningInvertedColor: "var(--color-orange500)",
 
     alertBorderWidth: "4px",

package/src/components/miscellaneous/IdentityProviderButton.tsx

@@ -79,6 +79,7 @@ export const IdentityProviderButton: ForwardRefRenderFunction<HTMLButtonElement,
         <img
           height={24}
           width={24}
+          aria-hidden={!imgAltText}
           src={iconUrl || `/ui-resources-static/common/idb/icons/${idpType}.svg`}
           alt={imgAltText || "Identity Provider icon"}
         />

package/src/components/withReadOnly.tsx

@@ -48,7 +48,16 @@ const getConditionalProps = (readOnlyView: boolean, type: string, helperText?: s
   return props;
 };
 
-export const withReadOnly = <P extends object>(WrappedComponent: ComponentType<P>) => {
+type WithReadOnlyOptions = {
+  isWrapperComponent: boolean;
+};
+
+export const withReadOnly = <P extends object>(
+  WrappedComponent: ComponentType<P>,
+  options?: WithReadOnlyOptions
+) => {
+  const { isWrapperComponent } = options || {};
+
   const preventKeyUpAndKeyDownHandlerForSpecificComponents = (readOnlyView: boolean) => {
     const preventSubmissionKeys = (e: KeyboardEvent) => {
       const isEnterOrSpace = (e: KeyboardEvent) => e.key === "Enter" || e.key === " ";
@@ -96,7 +105,7 @@ export const withReadOnly = <P extends object>(WrappedComponent: ComponentType<P
           ref={ref}
           {...(restProps as P)}
           data-readonlyview={readOnlyView}
-          aria-readonly={readOnlyView}
+          aria-readonly={isWrapperComponent ? undefined : readOnlyView}
           required={readOnlyView ? false : required}
           {...getConditionalProps(readOnlyView, type, helperText)}
           {...preventKeyUpAndKeyDownHandlerForSpecificComponents(readOnlyView)}

package/src/index.ts

@@ -15,11 +15,11 @@
  */
 
 /* Components */
-export {
-  BaseStyling,
+export { BaseStyling } from "./components/_BaseStyling_/BaseStyling";
+export type {
+  Props as BaseStylingProps,
   CSSProperties as BaseStylingCSSProperties
 } 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";
@@ -89,10 +89,8 @@ export { Modal } from "./components/Notifications/Modal/Modal";
 export type { Props as ModalProps } from "./components/Notifications/Modal/Modal";
 export { useAlert } from "./components/Notifications/Alert/useAlert";
 export { AlertProvider } from "./components/Notifications/Alert/AlertProvider/AlertProvider";
-export {
-  AlertItem,
-  Props as AlertItemProps
-} from "./components/Notifications/Alert/AlertItem/AlertItem";
+export { AlertItem } from "./components/Notifications/Alert/AlertItem/AlertItem";
+export type { Props as AlertItemProps } from "./components/Notifications/Alert/AlertItem/AlertItem";
 export type { Props as AlertProviderProps } from "./components/Notifications/Alert/AlertProvider/AlertProvider";
 export { Dialog } from "./components/Notifications/Dialog/Dialog";
 export type {
@@ -205,7 +203,7 @@ export { DataGridDrawerItem } from "./components/DataGrid/DataGridBody/DataGridD
 export type { Props as DataGridDrawerItemProps } from "./components/DataGrid/DataGridBody/DataGridDrawer/DataGridDrawerItem";
 export { DataGridCell } from "./components/DataGrid/DataGridBody/DataGridCell/DataGridCell";
 export type { Props as DataGridCellProps } from "./components/DataGrid/DataGridBody/DataGridCell/DataGridCell";
-export { Filter } from "./components/DataGrid/DataGridFilters/DataGridFilters.interfaces";
+export type { Filter } from "./components/DataGrid/DataGridFilters/DataGridFilters.interfaces";
 export { FilterKeyMapper } from "./components/DataGrid/DataGridFilters/FilterKeyMapper";
 export { useFiltersReducer } from "./components/DataGrid/DataGridFilters/useFiltersReducer";