@speakapbv/dough-component-library 9.32.0 → 9.33.0

package/dist/components/containers/card/card.d.ts

@@ -17,6 +17,7 @@ export interface CardProps {
     paddingVertical?: Sizes;
     onScrollReachedBottom?(e?: UIEvent): void;
     borderStyle?: BorderStyles;
+    zIndex?: number;
 }
 export declare const Card: {
     (props: CardProps): JSX.Element;

package/dist/components/overlay/overlay.d.ts

@@ -1,12 +1,20 @@
+import { CSSProperties } from "react";
 import { Colors, DoughDataAttributes } from "../../utils/constants";
 import "./overlay.scss";
+export declare enum OverlayVariant {
+    DARK = "dark",
+    STANDARD = "standard"
+}
 export interface OverlayProps {
     className?: string;
     dataAttributes?: DoughDataAttributes;
-    color?: Colors;
+    color?: Colors | string;
     opacity?: number;
+    position?: CSSProperties["position"];
+    zIndex?: number;
+    variant?: OverlayVariant;
+}
+export declare function Overlay({ position, zIndex, opacity, dataAttributes, className, variant, }: OverlayProps): JSX.Element;
+export declare namespace Overlay {
+    var displayName: string;
 }
-export declare const Overlay: {
-    (props: OverlayProps): JSX.Element;
-    displayName: string;
-};

package/dist/index.d.ts

@@ -46,7 +46,7 @@ export { ColorTile, ColorTileRef } from "./components/color-tile/color-tile";
 export { StepsIndicator } from "./components/steps-indicator/steps-indicator";
 export { Avatar } from "./components/avatar/avatar";
 export { Fader } from "./components/fader/fader";
-export { Overlay } from "./components/overlay/overlay";
+export { OverlayVariant, Overlay } from "./components/overlay/overlay";
 export { HorizontalListSlider } from "./components/horizontal-list-slider/horizontal-list-slider";
 export { Carousel } from "./components/carousel/carousel";
 export { ContentSlider } from "./components/content-slider/content-slider";
@@ -62,6 +62,7 @@ export { GridItem } from "./components/containers/grid/grid-item";
 export { cancelEvent } from "./utils/event";
 export { findParentBySelector, setBreakpointSizeManually, } from "./utils/dom-management";
 export { default as cn } from "./utils/class-names";
+export { isStandardColor } from "./utils/styles";
 export { generateUID } from "./utils/guid";
 export { hideLastDoughTooltip } from "./utils/dom-management";
 export { BreakpointViewer, BreakpointViewerProps, } from "./components/breakpoint-viewer/breakpoint-viewer";

package/dist/index.es.js

@@ -1053,7 +1053,9 @@ var validateInput = function (props, value) {
         };
     }
 };
-var isTypeObject = function (value) { return value !== null && typeof value === 'object'; };
+var isTypeObject = function (value) {
+    return value !== null && typeof value === "object";
+};
 
 var BoxDirection;
 (function (BoxDirection) {
@@ -1125,8 +1127,7 @@ var Box = forwardRef(function (props, ref) {
     var _a;
     var _b, _c, _d, _e, _f, _g;
     var handleScroll = function (e) {
-        if (e.currentTarget.offsetHeight + e.currentTarget.scrollTop >=
-            e.currentTarget.scrollHeight) {
+        if (Math.round(e.currentTarget.offsetHeight + e.currentTarget.scrollTop) >= e.currentTarget.scrollHeight) {
             if (props.onScrollReachedBottom) {
                 props.onScrollReachedBottom(e);
             }
@@ -1170,7 +1171,7 @@ Box.displayName = "Box";
 
 var Card = function (props) {
     var _a;
-    var _b = props.border, border = _b === void 0 ? false : _b, _c = props.flat, flat = _c === void 0 ? false : _c, _d = props.color, color = _d === void 0 ? Colors.THEME : _d, _e = props.fullHeight, fullHeight = _e === void 0 ? false : _e, _f = props.shadow, shadow = _f === void 0 ? true : _f, _g = props.headerButtons, headerButtons = _g === void 0 ? [] : _g;
+    var _b = props.border, border = _b === void 0 ? false : _b, _c = props.flat, flat = _c === void 0 ? false : _c, _d = props.color, color = _d === void 0 ? Colors.THEME : _d, _e = props.fullHeight, fullHeight = _e === void 0 ? false : _e, _f = props.shadow, shadow = _f === void 0 ? true : _f, _g = props.headerButtons, headerButtons = _g === void 0 ? [] : _g, zIndex = props.zIndex;
     var getHeaderItems = function (givenChildren) {
         var childrenToCheck = Children.toArray(givenChildren);
         var headerItems = childrenToCheck.filter(function (child) {
@@ -1270,7 +1271,7 @@ var Card = function (props) {
     };
     return (React.createElement(Box, { display: BoxDisplay.FLEX, width: "100%", height: fullHeight ? "100%" : undefined, maxHeight: props.maxHeight, direction: BoxDirection.COLUMN, border: border, shadow: shadow, borderRadius: !flat, color: color, overflow: fullHeight ? BoxOverflow.HIDDEN : undefined, className: cn("dough-card-wrapper", props.className, (_a = {},
             _a["dough-card-border-style-" + props.borderStyle] = props.borderStyle,
-            _a)), dataAttributes: props.dataAttributes },
+            _a)), dataAttributes: props.dataAttributes, zIndex: zIndex },
         getHeaderItems(props.children),
         getContentItems(props.children),
         getFooterItems(props.children)));
@@ -5068,12 +5069,24 @@ var Fader = function (props) { return (React.createElement("span", __assign({ cl
                 : Colors.THEME, "dough-fader-side dough-fader-left") }))); };
 Fader.displayName = "Fader";
 
-var css_248z$G = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: auto;\n  height: auto;\n  position: absolute !important;\n  pointer-events: none;\n}\nhtml.dough-IE11 .dough-overlay {\n  display: none;\n}";
+var css_248z$G = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: auto;\n  height: auto;\n  position: absolute !important;\n  pointer-events: none;\n  background: rgba(0, 0, 0, 0.4);\n}\n.dough-overlay.dark {\n  background: rgba(0, 0, 0, 0.8);\n}";
 styleInject(css_248z$G);
 
-var Overlay = function (props) { return (React.createElement("span", __assign({ className: cn(props.className, "dough-overlay", props.color) }, props.dataAttributes, { style: {
-        opacity: props.opacity,
-    } }))); };
+var OverlayVariant;
+(function (OverlayVariant) {
+    OverlayVariant["DARK"] = "dark";
+    OverlayVariant["STANDARD"] = "standard";
+})(OverlayVariant || (OverlayVariant = {}));
+function Overlay(_a) {
+    var position = _a.position, zIndex = _a.zIndex, opacity = _a.opacity, dataAttributes = _a.dataAttributes, className = _a.className, _b = _a.variant, variant = _b === void 0 ? OverlayVariant.STANDARD : _b;
+    return (React.createElement("span", __assign({ className: cn(className, "dough-overlay", {
+            dark: variant === OverlayVariant.DARK,
+        }) }, dataAttributes, { style: {
+            opacity: opacity,
+            zIndex: zIndex,
+            position: position,
+        } })));
+}
 Overlay.displayName = "Overlay";
 
 var IconArrowLeft = {
@@ -5626,4 +5639,4 @@ GridItem.displayName = "GridItem";
 
 injectRobotoFont();
 
-export { AlertStatus, AlertText, AppBackground, AppWrapper, Avatar, BR, Badge, BorderStyles, Box, BoxAlign, BoxAlignContent, BoxAlignment, BoxDirection, BoxDisplay, BoxJustifyContent, BoxOverflow, BoxWrap, BreadCrumb, BreadCrumbText, BreakpointViewer, BreakpointViewportSizes, Button, ButtonInputType, Card, Carousel, CheckBox, Collapser, ColorTile, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, DoughDateInput, DoughListItem, DropMenu, Fader, FixedColors, Footer, Grid, GridContentAlignment, GridFlow, GridItem, GridItemsAlignment, H1, H2, H3, H4, H5, H6, H7, Header, HorizontalAlignment, HorizontalListSlider, Image, ImageCarousel, ImageContentShowOnHoverClassName, InputWrapper, LayoutContainer, LayoutFlexBox, Link, Notification, NumericInput, Overlay, PanelOverlay, Paragraph, ProgressBar, RadioGroup, RadioOption, SelectBox, Sizes, Skeleton, SkeletonShape, Spacer, Spacings, Spinner, StepsIndicator, StrengthIndicator, Subtitle, Switch, Table, TableCell, TableRow, TableRowStyle, TabsContainer, Tag, Text, TextAlignment, TextArea, TextInput, TimePicker, Toggle, ToggleWithText, Tooltip, TooltipDirection, UnorderedList, VerticalAlignment, cancelEvent, checkComponentType, cn, findParentBySelector, generateUID, hideLastDoughTooltip, setBreakpointSizeManually };
+export { AlertStatus, AlertText, AppBackground, AppWrapper, Avatar, BR, Badge, BorderStyles, Box, BoxAlign, BoxAlignContent, BoxAlignment, BoxDirection, BoxDisplay, BoxJustifyContent, BoxOverflow, BoxWrap, BreadCrumb, BreadCrumbText, BreakpointViewer, BreakpointViewportSizes, Button, ButtonInputType, Card, Carousel, CheckBox, Collapser, ColorTile, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, DoughDateInput, DoughListItem, DropMenu, Fader, FixedColors, Footer, Grid, GridContentAlignment, GridFlow, GridItem, GridItemsAlignment, H1, H2, H3, H4, H5, H6, H7, Header, HorizontalAlignment, HorizontalListSlider, Image, ImageCarousel, ImageContentShowOnHoverClassName, InputWrapper, LayoutContainer, LayoutFlexBox, Link, Notification, NumericInput, Overlay, OverlayVariant, PanelOverlay, Paragraph, ProgressBar, RadioGroup, RadioOption, SelectBox, Sizes, Skeleton, SkeletonShape, Spacer, Spacings, Spinner, StepsIndicator, StrengthIndicator, Subtitle, Switch, Table, TableCell, TableRow, TableRowStyle, TabsContainer, Tag, Text, TextAlignment, TextArea, TextInput, TimePicker, Toggle, ToggleWithText, Tooltip, TooltipDirection, UnorderedList, VerticalAlignment, cancelEvent, checkComponentType, cn, findParentBySelector, generateUID, hideLastDoughTooltip, isStandardColor, setBreakpointSizeManually };

package/dist/index.js

@@ -1046,7 +1046,9 @@ var validateInput = function (props, value) {
         };
     }
 };
-var isTypeObject = function (value) { return value !== null && typeof value === 'object'; };
+var isTypeObject = function (value) {
+    return value !== null && typeof value === "object";
+};
 
 (function (BoxDirection) {
     BoxDirection["ROW"] = "row";
@@ -1110,8 +1112,7 @@ var Box = React.forwardRef(function (props, ref) {
     var _a;
     var _b, _c, _d, _e, _f, _g;
     var handleScroll = function (e) {
-        if (e.currentTarget.offsetHeight + e.currentTarget.scrollTop >=
-            e.currentTarget.scrollHeight) {
+        if (Math.round(e.currentTarget.offsetHeight + e.currentTarget.scrollTop) >= e.currentTarget.scrollHeight) {
             if (props.onScrollReachedBottom) {
                 props.onScrollReachedBottom(e);
             }
@@ -1155,7 +1156,7 @@ Box.displayName = "Box";
 
 var Card = function (props) {
     var _a;
-    var _b = props.border, border = _b === void 0 ? false : _b, _c = props.flat, flat = _c === void 0 ? false : _c, _d = props.color, color = _d === void 0 ? exports.Colors.THEME : _d, _e = props.fullHeight, fullHeight = _e === void 0 ? false : _e, _f = props.shadow, shadow = _f === void 0 ? true : _f, _g = props.headerButtons, headerButtons = _g === void 0 ? [] : _g;
+    var _b = props.border, border = _b === void 0 ? false : _b, _c = props.flat, flat = _c === void 0 ? false : _c, _d = props.color, color = _d === void 0 ? exports.Colors.THEME : _d, _e = props.fullHeight, fullHeight = _e === void 0 ? false : _e, _f = props.shadow, shadow = _f === void 0 ? true : _f, _g = props.headerButtons, headerButtons = _g === void 0 ? [] : _g, zIndex = props.zIndex;
     var getHeaderItems = function (givenChildren) {
         var childrenToCheck = React.Children.toArray(givenChildren);
         var headerItems = childrenToCheck.filter(function (child) {
@@ -1255,7 +1256,7 @@ var Card = function (props) {
     };
     return (React__default.createElement(Box, { display: exports.BoxDisplay.FLEX, width: "100%", height: fullHeight ? "100%" : undefined, maxHeight: props.maxHeight, direction: exports.BoxDirection.COLUMN, border: border, shadow: shadow, borderRadius: !flat, color: color, overflow: fullHeight ? exports.BoxOverflow.HIDDEN : undefined, className: cn("dough-card-wrapper", props.className, (_a = {},
             _a["dough-card-border-style-" + props.borderStyle] = props.borderStyle,
-            _a)), dataAttributes: props.dataAttributes },
+            _a)), dataAttributes: props.dataAttributes, zIndex: zIndex },
         getHeaderItems(props.children),
         getContentItems(props.children),
         getFooterItems(props.children)));
@@ -5051,12 +5052,23 @@ var Fader = function (props) { return (React__default.createElement("span", __as
                 : exports.Colors.THEME, "dough-fader-side dough-fader-left") }))); };
 Fader.displayName = "Fader";
 
-var css_248z$G = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: auto;\n  height: auto;\n  position: absolute !important;\n  pointer-events: none;\n}\nhtml.dough-IE11 .dough-overlay {\n  display: none;\n}";
+var css_248z$G = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: auto;\n  height: auto;\n  position: absolute !important;\n  pointer-events: none;\n  background: rgba(0, 0, 0, 0.4);\n}\n.dough-overlay.dark {\n  background: rgba(0, 0, 0, 0.8);\n}";
 styleInject(css_248z$G);
 
-var Overlay = function (props) { return (React__default.createElement("span", __assign({ className: cn(props.className, "dough-overlay", props.color) }, props.dataAttributes, { style: {
-        opacity: props.opacity,
-    } }))); };
+(function (OverlayVariant) {
+    OverlayVariant["DARK"] = "dark";
+    OverlayVariant["STANDARD"] = "standard";
+})(exports.OverlayVariant || (exports.OverlayVariant = {}));
+function Overlay(_a) {
+    var position = _a.position, zIndex = _a.zIndex, opacity = _a.opacity, dataAttributes = _a.dataAttributes, className = _a.className, _b = _a.variant, variant = _b === void 0 ? exports.OverlayVariant.STANDARD : _b;
+    return (React__default.createElement("span", __assign({ className: cn(className, "dough-overlay", {
+            dark: variant === exports.OverlayVariant.DARK,
+        }) }, dataAttributes, { style: {
+            opacity: opacity,
+            zIndex: zIndex,
+            position: position,
+        } })));
+}
 Overlay.displayName = "Overlay";
 
 var IconArrowLeft = {
@@ -5684,4 +5696,5 @@ exports.cn = cn;
 exports.findParentBySelector = findParentBySelector;
 exports.generateUID = generateUID;
 exports.hideLastDoughTooltip = hideLastDoughTooltip;
+exports.isStandardColor = isStandardColor;
 exports.setBreakpointSizeManually = setBreakpointSizeManually;

package/dist/src/components/overlay/overlay.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("./overlay").OverlayProps>;
+export default _default;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("./overlay").OverlayProps>;

package/dist/src/utils/validation.d.ts

@@ -1,2 +1,2 @@
 export declare const validateInput: (props: any, value: any) => any;
-export declare const isTypeObject: (value: any) => Boolean;
+export declare const isTypeObject: (value: any) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@speakapbv/dough-component-library",
-    "version": "9.32.0",
+    "version": "9.33.0",
     "description": "DOUGH: Speakap React Component Library",
     "author": "Speakap",
     "license": "MIT",