@speakapbv/dough-component-library 9.31.2 → 9.32.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -10,6 +10,8 @@ export interface NotificationProps {
|
|
|
10
10
|
onClick?(e?: MouseEvent): void;
|
|
11
11
|
onHide?(show?: false): void;
|
|
12
12
|
onShow?(show?: true): void;
|
|
13
|
+
onMouseEnter?(): void;
|
|
14
|
+
onMouseLeave?(): void;
|
|
13
15
|
horizontalAlignSelf?: HorizontalAlignment.CENTER | HorizontalAlignment.LEFT | HorizontalAlignment.RIGHT;
|
|
14
16
|
verticalAlignSelf?: VerticalAlignment;
|
|
15
17
|
type?: AlertStatus | "none";
|
package/dist/index.es.js
CHANGED
|
@@ -1125,8 +1125,7 @@ var Box = forwardRef(function (props, ref) {
|
|
|
1125
1125
|
var _a;
|
|
1126
1126
|
var _b, _c, _d, _e, _f, _g;
|
|
1127
1127
|
var handleScroll = function (e) {
|
|
1128
|
-
if (e.currentTarget.offsetHeight + e.currentTarget.scrollTop >=
|
|
1129
|
-
e.currentTarget.scrollHeight) {
|
|
1128
|
+
if (Math.round(e.currentTarget.offsetHeight + e.currentTarget.scrollTop) >= e.currentTarget.scrollHeight) {
|
|
1130
1129
|
if (props.onScrollReachedBottom) {
|
|
1131
1130
|
props.onScrollReachedBottom(e);
|
|
1132
1131
|
}
|
|
@@ -4725,7 +4724,7 @@ var AlertText = function (props) {
|
|
|
4725
4724
|
};
|
|
4726
4725
|
AlertText.displayName = "AlertText";
|
|
4727
4726
|
|
|
4728
|
-
var css_248z$z = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-notification-wrapper {\n pointer-events: all;\n width: 100%;\n margin-bottom: 8px;\n position: relative;\n opacity: 0;\n transform: translate3d(
|
|
4727
|
+
var css_248z$z = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-notification-wrapper {\n pointer-events: all;\n width: 100%;\n margin-bottom: 8px;\n position: relative;\n opacity: 0;\n transform: translate3d(16px, 0, 0);\n transform-origin: top center;\n font-family: \"Roboto\", sans-serif;\n border-radius: 12px;\n}\nbody:not(.no-transition) .dough-notification-wrapper {\n transition: all 1000ms cubic-bezier(0.25, 1.3, 0, 1);\n}\nbody.no-transition .dough-notification-wrapper {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-notification-wrapper.dough-notification-clickable {\n cursor: pointer;\n}\n.dough-notification-wrapper.dough-notification-show {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n pointer-events: fill;\n}\n.dough-notification-wrapper > .dough-notification-close-button {\n position: absolute;\n top: 4px;\n right: 4px;\n width: auto;\n height: auto;\n}\n.dough-notification-wrapper > .dough-notification-close-button > .dough-button {\n width: 24px;\n height: 24px;\n min-width: 24px;\n min-height: 24px;\n}\n.dough-notification-wrapper .dough-notification-card {\n box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-notification-wrapper.dough-notification-as-toast {\n text-align: center;\n}\n.dough-notification-wrapper.dough-notification-as-toast .dough-notification-card {\n display: inline-block;\n width: auto !important;\n background-color: rgba(0, 0, 0, 0.75) !important;\n}\n.dough-notification-wrapper.dough-notification-as-toast .dough-notification-card .dough-notification-content-container {\n padding-right: 0;\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper {\n width: 24px;\n height: 24px;\n box-sizing: border-box;\n border-radius: 100%;\n border: 2px solid transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper > .dough-inline-svg-icon {\n width: 70%;\n height: 70%;\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-neutral {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-primary);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-neutral > .dough-inline-svg-icon path {\n fill: rgb(68, 132, 199);\n fill: var(--dough-color-primary);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-success {\n border-color: rgb(0, 136, 0);\n border-color: var(--dough-color-status-success);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-success > .dough-inline-svg-icon path {\n fill: rgb(0, 136, 0);\n fill: var(--dough-color-status-success);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-warning {\n border-color: rgb(255, 136, 0);\n border-color: var(--dough-color-status-warning);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-warning > .dough-inline-svg-icon path {\n fill: rgb(255, 136, 0);\n fill: var(--dough-color-status-warning);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-error {\n border-color: rgb(191, 41, 0);\n border-color: var(--dough-color-status-danger);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-error > .dough-inline-svg-icon path {\n fill: rgb(191, 41, 0);\n fill: var(--dough-color-status-danger);\n}\n.dough-notification-wrapper .dough-notification-title-container,\n.dough-notification-wrapper .dough-notification-content-container {\n padding-right: 12px;\n}";
|
|
4729
4728
|
styleInject(css_248z$z);
|
|
4730
4729
|
|
|
4731
4730
|
var Notification = function (props) {
|
|
@@ -4786,7 +4785,7 @@ var Notification = function (props) {
|
|
|
4786
4785
|
return (React.createElement(React.Fragment, null, !isClosed &&
|
|
4787
4786
|
show &&
|
|
4788
4787
|
props.children &&
|
|
4789
|
-
createPortal(React.createElement("div", __assign({ onClick: props.onClick ? handleClick : undefined, className: cn("dough-notification-wrapper", props.className, {
|
|
4788
|
+
createPortal(React.createElement("div", __assign({ onClick: props.onClick ? handleClick : undefined, onMouseEnter: props.onMouseEnter ? props.onMouseEnter : undefined, onMouseLeave: props.onMouseLeave ? props.onMouseLeave : undefined, className: cn("dough-notification-wrapper", props.className, {
|
|
4790
4789
|
"dough-notification-as-toast": props.toast,
|
|
4791
4790
|
"dough-notification-show": showNotification,
|
|
4792
4791
|
"dough-notification-clickable": props.onClick,
|
package/dist/index.js
CHANGED
|
@@ -1110,8 +1110,7 @@ var Box = React.forwardRef(function (props, ref) {
|
|
|
1110
1110
|
var _a;
|
|
1111
1111
|
var _b, _c, _d, _e, _f, _g;
|
|
1112
1112
|
var handleScroll = function (e) {
|
|
1113
|
-
if (e.currentTarget.offsetHeight + e.currentTarget.scrollTop >=
|
|
1114
|
-
e.currentTarget.scrollHeight) {
|
|
1113
|
+
if (Math.round(e.currentTarget.offsetHeight + e.currentTarget.scrollTop) >= e.currentTarget.scrollHeight) {
|
|
1115
1114
|
if (props.onScrollReachedBottom) {
|
|
1116
1115
|
props.onScrollReachedBottom(e);
|
|
1117
1116
|
}
|
|
@@ -4708,7 +4707,7 @@ var AlertText = function (props) {
|
|
|
4708
4707
|
};
|
|
4709
4708
|
AlertText.displayName = "AlertText";
|
|
4710
4709
|
|
|
4711
|
-
var css_248z$z = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-notification-wrapper {\n pointer-events: all;\n width: 100%;\n margin-bottom: 8px;\n position: relative;\n opacity: 0;\n transform: translate3d(
|
|
4710
|
+
var css_248z$z = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-notification-wrapper {\n pointer-events: all;\n width: 100%;\n margin-bottom: 8px;\n position: relative;\n opacity: 0;\n transform: translate3d(16px, 0, 0);\n transform-origin: top center;\n font-family: \"Roboto\", sans-serif;\n border-radius: 12px;\n}\nbody:not(.no-transition) .dough-notification-wrapper {\n transition: all 1000ms cubic-bezier(0.25, 1.3, 0, 1);\n}\nbody.no-transition .dough-notification-wrapper {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-notification-wrapper.dough-notification-clickable {\n cursor: pointer;\n}\n.dough-notification-wrapper.dough-notification-show {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n pointer-events: fill;\n}\n.dough-notification-wrapper > .dough-notification-close-button {\n position: absolute;\n top: 4px;\n right: 4px;\n width: auto;\n height: auto;\n}\n.dough-notification-wrapper > .dough-notification-close-button > .dough-button {\n width: 24px;\n height: 24px;\n min-width: 24px;\n min-height: 24px;\n}\n.dough-notification-wrapper .dough-notification-card {\n box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-notification-wrapper.dough-notification-as-toast {\n text-align: center;\n}\n.dough-notification-wrapper.dough-notification-as-toast .dough-notification-card {\n display: inline-block;\n width: auto !important;\n background-color: rgba(0, 0, 0, 0.75) !important;\n}\n.dough-notification-wrapper.dough-notification-as-toast .dough-notification-card .dough-notification-content-container {\n padding-right: 0;\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper {\n width: 24px;\n height: 24px;\n box-sizing: border-box;\n border-radius: 100%;\n border: 2px solid transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper > .dough-inline-svg-icon {\n width: 70%;\n height: 70%;\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-neutral {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-primary);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-neutral > .dough-inline-svg-icon path {\n fill: rgb(68, 132, 199);\n fill: var(--dough-color-primary);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-success {\n border-color: rgb(0, 136, 0);\n border-color: var(--dough-color-status-success);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-success > .dough-inline-svg-icon path {\n fill: rgb(0, 136, 0);\n fill: var(--dough-color-status-success);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-warning {\n border-color: rgb(255, 136, 0);\n border-color: var(--dough-color-status-warning);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-warning > .dough-inline-svg-icon path {\n fill: rgb(255, 136, 0);\n fill: var(--dough-color-status-warning);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-error {\n border-color: rgb(191, 41, 0);\n border-color: var(--dough-color-status-danger);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-error > .dough-inline-svg-icon path {\n fill: rgb(191, 41, 0);\n fill: var(--dough-color-status-danger);\n}\n.dough-notification-wrapper .dough-notification-title-container,\n.dough-notification-wrapper .dough-notification-content-container {\n padding-right: 12px;\n}";
|
|
4712
4711
|
styleInject(css_248z$z);
|
|
4713
4712
|
|
|
4714
4713
|
var Notification = function (props) {
|
|
@@ -4769,7 +4768,7 @@ var Notification = function (props) {
|
|
|
4769
4768
|
return (React__default.createElement(React__default.Fragment, null, !isClosed &&
|
|
4770
4769
|
show &&
|
|
4771
4770
|
props.children &&
|
|
4772
|
-
reactDom.createPortal(React__default.createElement("div", __assign({ onClick: props.onClick ? handleClick : undefined, className: cn("dough-notification-wrapper", props.className, {
|
|
4771
|
+
reactDom.createPortal(React__default.createElement("div", __assign({ onClick: props.onClick ? handleClick : undefined, onMouseEnter: props.onMouseEnter ? props.onMouseEnter : undefined, onMouseLeave: props.onMouseLeave ? props.onMouseLeave : undefined, className: cn("dough-notification-wrapper", props.className, {
|
|
4773
4772
|
"dough-notification-as-toast": props.toast,
|
|
4774
4773
|
"dough-notification-show": showNotification,
|
|
4775
4774
|
"dough-notification-clickable": props.onClick,
|