@speakapbv/dough-component-library 9.22.1 → 9.25.0

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, Ref, UIEvent } from "react";
+import React, { MouseEventHandler, ReactNode, Ref, UIEvent } from "react";
 import { Colors, Sizes, DoughDataAttributes } from "../../../utils/constants";
 import "./box.scss";
 export declare enum BoxDirection {
@@ -92,6 +92,7 @@ export interface BoxProps {
         bottom?: Sizes;
         left?: Sizes;
     };
+    transform?: string;
     overflow?: BoxOverflow | {
         x?: BoxOverflow;
         y?: BoxOverflow;
@@ -111,5 +112,8 @@ export interface BoxProps {
     alignSelf?: BoxAlign | BoxAlignment.FLEX_START | BoxAlignment.FLEX_END | BoxAlignment.CENTER | BoxAlignment.BASELINE | BoxAlignment.STRETCH;
     /** Event properties */
     onScrollReachedBottom?(e?: UIEvent): void;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+    onClick?: MouseEventHandler<HTMLDivElement>;
 }
-export declare const Box: React.ForwardRefExoticComponent<Pick<BoxProps, "className" | "children" | "dataAttributes" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "absolute" | "zIndex" | "color" | "border" | "borderRadius" | "rounded" | "shadow" | "padding" | "overflow" | "display" | "direction" | "flex" | "basis" | "grow" | "shrink" | "order" | "wrap" | "justifyContent" | "alignItems" | "alignContent" | "alignSelf" | "onScrollReachedBottom"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Box: React.ForwardRefExoticComponent<Pick<BoxProps, "className" | "children" | "dataAttributes" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "absolute" | "zIndex" | "color" | "border" | "borderRadius" | "rounded" | "shadow" | "padding" | "transform" | "overflow" | "display" | "direction" | "flex" | "basis" | "grow" | "shrink" | "order" | "wrap" | "justifyContent" | "alignItems" | "alignContent" | "alignSelf" | "onScrollReachedBottom" | "onMouseEnter" | "onMouseLeave" | "onClick"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -10,6 +10,7 @@ export interface CardProps {
     dataAttributes?: DoughDataAttributes;
     color?: Colors;
     fullHeight?: boolean;
+    maxHeight?: string;
     shadow?: boolean;
     padding?: Sizes;
     paddingHorizontal?: Sizes;

package/dist/components/divider/divider.d.ts

@@ -9,6 +9,7 @@ export interface DividerProps {
     type?: Direction;
     width?: string;
     lineThickness?: string;
+    zIndex?: number;
 }
 export declare const Divider: {
     (props: DividerProps): JSX.Element;

package/dist/index.es.js

@@ -1159,8 +1159,8 @@ var Box = forwardRef(function (props, ref) {
             _a["dough-flex-align-items-" + props.alignItems] = props.alignItems,
             _a["dough-flex-align-content-" + props.alignContent] = props.alignContent,
             _a["dough-flex-align-self-" + props.alignSelf] = props.alignSelf,
-            _a)), style: __assign({ width: props.width, height: props.height, minWidth: props.minWidth, minHeight: props.minHeight, maxWidth: props.maxWidth, maxHeight: props.maxHeight, flexBasis: props.basis, flexGrow: props.grow, flexShrink: props.shrink, order: props.order, flex: props.flex, zIndex: props.zIndex }, (isTypeObject(props.absolute) &&
-            props.absolute)) }, props.dataAttributes, { onScroll: props.onScrollReachedBottom ? handleScroll : undefined }), props.children));
+            _a)), style: __assign({ width: props.width, height: props.height, minWidth: props.minWidth, minHeight: props.minHeight, maxWidth: props.maxWidth, maxHeight: props.maxHeight, flexBasis: props.basis, flexGrow: props.grow, flexShrink: props.shrink, order: props.order, flex: props.flex, zIndex: props.zIndex, transform: props.transform }, (isTypeObject(props.absolute) &&
+            props.absolute)) }, props.dataAttributes, { onScroll: props.onScrollReachedBottom ? handleScroll : undefined, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onClick: props.onClick }), props.children));
 });
 Box.displayName = "Box";
 
@@ -1264,7 +1264,7 @@ var Card = function (props) {
         }
         return React.createElement(React.Fragment, null);
     };
-    return (React.createElement(Box, { display: BoxDisplay.FLEX, width: "100%", height: fullHeight ? "100%" : undefined, direction: BoxDirection.COLUMN, border: border, shadow: shadow, borderRadius: !flat, color: color, overflow: fullHeight ? BoxOverflow.HIDDEN : undefined, className: cn("dough-card-wrapper", props.className, (_a = {},
+    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 },
         getHeaderItems(props.children),
@@ -2249,8 +2249,13 @@ var css_248z$g = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium
 styleInject(css_248z$g);
 
 var Divider = function (props) {
-    var _a = props.size, size = _a === void 0 ? Sizes.SMALL : _a, _b = props.type, type = _b === void 0 ? Direction.HORIZONTAL : _b, _c = props.color, color = _c === void 0 ? Colors.GRAY5 : _c;
-    return (React.createElement("div", __assign({ className: cn("dough-divider", props.className, type, "size-" + size), style: { height: props.height, width: props.width } }, props.dataAttributes),
+    var _a;
+    var _b = props.size, size = _b === void 0 ? Sizes.SMALL : _b, _c = props.type, type = _c === void 0 ? Direction.HORIZONTAL : _c, _d = props.color, color = _d === void 0 ? Colors.GRAY5 : _d;
+    return (React.createElement("div", __assign({ className: cn("dough-divider", props.className, type, "size-" + size), style: {
+            height: props.height,
+            width: props.width,
+            zIndex: (_a = props.zIndex) !== null && _a !== void 0 ? _a : 0,
+        } }, props.dataAttributes),
         React.createElement("div", { className: cn("dough-divider-line", color), style: props.lineThickness === undefined
                 ? undefined
                 : __assign({}, (type === Direction.HORIZONTAL
@@ -4047,7 +4052,7 @@ var RadioGroup = function (props) {
 };
 RadioGroup.displayName = "RadioGroup";
 
-var css_248z$p = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-bread-crumb-ellipsis {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.dough-bread-crumb-wrapper {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  font-size: 1.125rem;\n  line-height: 1.125rem;\n  font-weight: 700;\n  font-family: \"Roboto\", sans-serif;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-size: inherit;\n  line-height: inherit;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) > * {\n  text-decoration: none !important;\n  color: inherit !important;\n  font-size: inherit;\n  line-height: inherit;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow):last-child {\n  pointer-events: none !important;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  width: 24px;\n  height: 24px;\n  padding: 3px 4px 5px 4px;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow > svg {\n  width: 100%;\n  height: 100%;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow > svg path {\n  fill: #999999;\n  fill: var(--dough-color-icon-default);\n}\n.dough-bread-crumb-wrapper.size-small {\n  font-size: 0.875rem;\n  line-height: 0.875rem;\n}\n.dough-bread-crumb-wrapper.size-small > .dough-bread-crumb-right-arrow {\n  width: 20px;\n  height: 20px;\n}";
+var css_248z$p = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-bread-crumb-ellipsis {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.dough-bread-crumb-wrapper {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  font-size: 1.125rem;\n  line-height: 1.125rem;\n  font-weight: 700;\n  font-family: \"Roboto\", sans-serif;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-size: inherit;\n  line-height: inherit;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) > * {\n  text-decoration: none !important;\n  color: inherit !important;\n  font-size: inherit;\n  line-height: inherit;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow):last-child {\n  pointer-events: none !important;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  width: 24px;\n  height: 24px;\n  margin-left: 4px;\n  margin-right: 4px;\n  padding: 3px 4px 3px 4px;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow > svg {\n  width: 100%;\n  height: 100%;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow > svg path {\n  fill: #999999;\n  fill: var(--dough-color-icon-default);\n}\n.dough-bread-crumb-wrapper.size-small {\n  font-size: 0.875rem;\n  line-height: 0.875rem;\n}\n.dough-bread-crumb-wrapper.size-small > .dough-bread-crumb-right-arrow {\n  width: 20px;\n  height: 20px;\n}";
 styleInject(css_248z$p);
 
 /* Unpacks children wrapped in Fragments */

package/dist/index.js

@@ -1144,8 +1144,8 @@ var Box = React.forwardRef(function (props, ref) {
             _a["dough-flex-align-items-" + props.alignItems] = props.alignItems,
             _a["dough-flex-align-content-" + props.alignContent] = props.alignContent,
             _a["dough-flex-align-self-" + props.alignSelf] = props.alignSelf,
-            _a)), style: __assign({ width: props.width, height: props.height, minWidth: props.minWidth, minHeight: props.minHeight, maxWidth: props.maxWidth, maxHeight: props.maxHeight, flexBasis: props.basis, flexGrow: props.grow, flexShrink: props.shrink, order: props.order, flex: props.flex, zIndex: props.zIndex }, (isTypeObject(props.absolute) &&
-            props.absolute)) }, props.dataAttributes, { onScroll: props.onScrollReachedBottom ? handleScroll : undefined }), props.children));
+            _a)), style: __assign({ width: props.width, height: props.height, minWidth: props.minWidth, minHeight: props.minHeight, maxWidth: props.maxWidth, maxHeight: props.maxHeight, flexBasis: props.basis, flexGrow: props.grow, flexShrink: props.shrink, order: props.order, flex: props.flex, zIndex: props.zIndex, transform: props.transform }, (isTypeObject(props.absolute) &&
+            props.absolute)) }, props.dataAttributes, { onScroll: props.onScrollReachedBottom ? handleScroll : undefined, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, onClick: props.onClick }), props.children));
 });
 Box.displayName = "Box";
 
@@ -1249,7 +1249,7 @@ var Card = function (props) {
         }
         return React__default.createElement(React__default.Fragment, null);
     };
-    return (React__default.createElement(Box, { display: exports.BoxDisplay.FLEX, width: "100%", height: fullHeight ? "100%" : undefined, 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 = {},
+    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 },
         getHeaderItems(props.children),
@@ -2234,8 +2234,13 @@ var css_248z$g = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium
 styleInject(css_248z$g);
 
 var Divider = function (props) {
-    var _a = props.size, size = _a === void 0 ? exports.Sizes.SMALL : _a, _b = props.type, type = _b === void 0 ? exports.Direction.HORIZONTAL : _b, _c = props.color, color = _c === void 0 ? exports.Colors.GRAY5 : _c;
-    return (React__default.createElement("div", __assign({ className: cn("dough-divider", props.className, type, "size-" + size), style: { height: props.height, width: props.width } }, props.dataAttributes),
+    var _a;
+    var _b = props.size, size = _b === void 0 ? exports.Sizes.SMALL : _b, _c = props.type, type = _c === void 0 ? exports.Direction.HORIZONTAL : _c, _d = props.color, color = _d === void 0 ? exports.Colors.GRAY5 : _d;
+    return (React__default.createElement("div", __assign({ className: cn("dough-divider", props.className, type, "size-" + size), style: {
+            height: props.height,
+            width: props.width,
+            zIndex: (_a = props.zIndex) !== null && _a !== void 0 ? _a : 0,
+        } }, props.dataAttributes),
         React__default.createElement("div", { className: cn("dough-divider-line", color), style: props.lineThickness === undefined
                 ? undefined
                 : __assign({}, (type === exports.Direction.HORIZONTAL
@@ -4031,7 +4036,7 @@ var RadioGroup = function (props) {
 };
 RadioGroup.displayName = "RadioGroup";
 
-var css_248z$p = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-bread-crumb-ellipsis {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.dough-bread-crumb-wrapper {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  font-size: 1.125rem;\n  line-height: 1.125rem;\n  font-weight: 700;\n  font-family: \"Roboto\", sans-serif;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-size: inherit;\n  line-height: inherit;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) > * {\n  text-decoration: none !important;\n  color: inherit !important;\n  font-size: inherit;\n  line-height: inherit;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow):last-child {\n  pointer-events: none !important;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  width: 24px;\n  height: 24px;\n  padding: 3px 4px 5px 4px;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow > svg {\n  width: 100%;\n  height: 100%;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow > svg path {\n  fill: #999999;\n  fill: var(--dough-color-icon-default);\n}\n.dough-bread-crumb-wrapper.size-small {\n  font-size: 0.875rem;\n  line-height: 0.875rem;\n}\n.dough-bread-crumb-wrapper.size-small > .dough-bread-crumb-right-arrow {\n  width: 20px;\n  height: 20px;\n}";
+var css_248z$p = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-bread-crumb-ellipsis {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.dough-bread-crumb-wrapper {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  font-size: 1.125rem;\n  line-height: 1.125rem;\n  font-weight: 700;\n  font-family: \"Roboto\", sans-serif;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  font-size: inherit;\n  line-height: inherit;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow) > * {\n  text-decoration: none !important;\n  color: inherit !important;\n  font-size: inherit;\n  line-height: inherit;\n}\n.dough-bread-crumb-wrapper > *:not(.dough-bread-crumb-right-arrow):last-child {\n  pointer-events: none !important;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  width: 24px;\n  height: 24px;\n  margin-left: 4px;\n  margin-right: 4px;\n  padding: 3px 4px 3px 4px;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow > svg {\n  width: 100%;\n  height: 100%;\n}\n.dough-bread-crumb-wrapper > .dough-bread-crumb-right-arrow > svg path {\n  fill: #999999;\n  fill: var(--dough-color-icon-default);\n}\n.dough-bread-crumb-wrapper.size-small {\n  font-size: 0.875rem;\n  line-height: 0.875rem;\n}\n.dough-bread-crumb-wrapper.size-small > .dough-bread-crumb-right-arrow {\n  width: 20px;\n  height: 20px;\n}";
 styleInject(css_248z$p);
 
 /* Unpacks children wrapped in Fragments */

package/package.json

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