@hazelcast/ui 1.1.1 → 1.2.0

package/lib/Button.js

@@ -7,6 +7,32 @@ import { TruncatedText } from './TruncatedText';
 import { Tooltip } from './Tooltip';
 import { Loader } from './Loader';
 import styles from './Button.module.scss';
+const capitalizeFirstCharacter = (str) => `${str[0].toUpperCase()}${str.slice(1)}`;
+const resolveButtonKindStyles = (kind) => {
+    switch (kind) {
+        case 'secondary':
+            return {
+                [styles.colorPrimary]: true,
+                [styles.variantOutlined]: true,
+            };
+        case 'transparent':
+            return {
+                [styles.colorPrimary]: true,
+                [styles.variantText]: true,
+            };
+        case 'danger': {
+            return {
+                [styles.colorSecondary]: true,
+                [styles.variantContained]: true,
+            };
+        }
+        default:
+            return {
+                [styles.colorPrimary]: true,
+                [styles.variantContained]: true,
+            };
+    }
+};
 /**
  * ### Purpose
  * Make it clear what users should do to continue with their main flow by using buttons to highlight the main actions they can take.
@@ -27,27 +53,28 @@ import styles from './Button.module.scss';
  * - **Danger**: Use danger button for potentially destructive actions.
  * - **Transparent**: Use for IconButton and similar use-cases.
  */
-export const Button = forwardRef(({ kind = 'primary', size = 'medium', component: Component = 'button', className, bodyClassName, outlineClassName, outline = 'outline', children, capitalize = true, 
+export const Button = forwardRef(({ kind, component: Component = 'button', className, bodyClassName, outlineClassName, outline = 'outline', children, capitalize = true, 
 // Disabled tooltip
 disabled, disabledTooltip, disabledTooltipVisible, disabledTooltipPlacement, 
 // Left icon
 iconLeft, iconLeftAriaLabel, iconLeftColor, iconLeftClassName, 
 // Right icon
-iconRight, iconRightAriaLabel, iconRightColor, iconRightClassName, rel = 'noopener', target, type = 'button', loading, ...rest }, ref) => {
+iconRight, iconRightAriaLabel, iconRightColor, iconRightClassName, rel = 'noopener', target, type = 'button', loading, variant = 'contained', color = 'primary', tooltip, ...rest }, ref) => {
     const tooltipId = useUID();
     const relFinal = Array.isArray(rel) ? rel.join(' ') : rel;
     const loadingAnimationOnRight = loading && iconRight && iconRightAriaLabel && !(iconLeft && iconLeftAriaLabel);
-    return (React.createElement(Tooltip, { id: tooltipId, content: disabled ? disabledTooltip : undefined, visible: disabledTooltipVisible, placement: disabledTooltipPlacement }, (tooltipRef) => (React.createElement(Component, Object.assign({ "data-test": "button", className: cn(styles.button, {
-            [styles.small]: size === 'small',
-            [styles.primary]: kind === 'primary',
-            [styles.secondary]: kind === 'secondary',
-            [styles.danger]: kind === 'danger',
-            [styles.transparent]: kind === 'transparent',
+    return (React.createElement(Tooltip, { id: tooltipId, content: disabled ? disabledTooltip : tooltip, visible: disabled && disabledTooltipVisible, placement: disabledTooltipPlacement }, (tooltipRef) => (React.createElement(Component, Object.assign({ "data-test": "button", className: cn(styles.button, {
+            ...(kind !== undefined
+                ? resolveButtonKindStyles(kind)
+                : {
+                    [styles[`color${capitalizeFirstCharacter(color)}`]]: true,
+                    [styles[`variant${capitalizeFirstCharacter(variant)}`]]: true,
+                }),
         }, className), "aria-describedby": disabled ? tooltipId : undefined, disabled: disabled !== null && disabled !== void 0 ? disabled : loading, rel: Component === 'a' ? relFinal : undefined, target: Component === 'a' ? target : undefined, type: Component === 'button' ? type : undefined }, rest),
         React.createElement("span", { "data-test": "button-outline", className: cn(styles.outline, { [styles.inset]: outline === 'inset' }, outlineClassName) }),
         React.createElement("span", { className: cn(styles.body, bodyClassName), ref: mergeRefs([ref, tooltipRef]) },
-            loading && !loadingAnimationOnRight && React.createElement(Loader, { className: styles.iconLeft, size: size }),
-            iconLeft && iconLeftAriaLabel && !loading && (React.createElement(Icon, { icon: iconLeft, ariaLabel: iconLeftAriaLabel, "data-test": "button-icon-left", className: cn(styles.iconLeft, iconLeftClassName), size: size, color: iconLeftColor })),
+            loading && !loadingAnimationOnRight && React.createElement(Loader, { className: styles.iconLeft, size: 'small' }),
+            iconLeft && iconLeftAriaLabel && !loading && (React.createElement(Icon, { icon: iconLeft, ariaLabel: iconLeftAriaLabel, "data-test": "button-icon-left", className: cn(styles.iconLeft, iconLeftClassName), size: "small", color: iconLeftColor })),
             React.createElement(TruncatedText, { text: capitalize ? children.toUpperCase() : children, 
                 /*
                   If a button is disabled and text is long we don't want to show 2 popups.
@@ -56,8 +83,8 @@ iconRight, iconRightAriaLabel, iconRightColor, iconRightClassName, rel = 'noopen
                   the truncated popup -> setting it to undefined will leave the default behaviour.
                 */
                 tooltipVisible: disabled && disabledTooltipVisible !== false ? false : undefined }),
-            loadingAnimationOnRight && React.createElement(Loader, { className: styles.iconRight, size: size }),
-            !loadingAnimationOnRight && iconRight && iconRightAriaLabel && (React.createElement(Icon, { icon: iconRight, ariaLabel: iconRightAriaLabel, "data-test": "button-icon-right", className: cn(styles.iconRight, iconRightClassName), size: size, color: iconRightColor })))))));
+            loadingAnimationOnRight && React.createElement(Loader, { className: styles.iconRight, size: "small" }),
+            !loadingAnimationOnRight && iconRight && iconRightAriaLabel && (React.createElement(Icon, { icon: iconRight, ariaLabel: iconRightAriaLabel, "data-test": "button-icon-right", className: cn(styles.iconRight, iconRightClassName), size: "small", color: iconRightColor })))))));
 });
 Button.displayName = 'Button';
 //# sourceMappingURL=Button.js.map

package/lib/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"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"}

package/lib/Button.module.scss

@@ -1,6 +1,18 @@
 @use '../styles/constants' as c;
 @use '../styles/helpers' as h;
 
+@mixin buttonColor($color: c.$colorPrimary) {
+  color: $color;
+  background-color: $color;
+  border-color: $color;
+}
+
+@mixin disabledButtonColor {
+  color: c.$colorTextSecondary;
+  background-color: c.$colorNeutral;
+  border-color: c.$colorNeutral;
+}
+
 .button {
   display: inline-block;
   position: relative;
@@ -8,17 +20,17 @@
   cursor: pointer;
   border: none;
   padding: 0;
-  border-radius: c.$borderRadius;
-  height: c.$inputHeight;
+  border-radius: c.$borderRadiusButtonSmall;
+  height: c.$inputHeightSmall;
   max-width: c.$buttonMaxWidth;
   // for <a> element
   text-decoration: none;
 
-  @include c.typographyButton;
+  @include c.typographyButton('small');
 
   .outline {
     position: absolute;
-    border-radius: c.$borderRadius;
+    border-radius: c.$borderRadiusButtonSmall;
     pointer-events: none;
     top: 50%;
     left: 50%;
@@ -38,17 +50,6 @@
     }
   }
 
-  &.small {
-    height: c.$inputHeightSmall;
-    border-radius: c.$borderRadiusButtonSmall;
-
-    @include c.typographyButton('small');
-
-    .outline {
-      border-radius: c.$borderRadiusButtonSmall;
-    }
-  }
-
   &:focus,
   &.focus {
     // Do not remove outline for high-contrast modes
@@ -86,97 +87,128 @@
     box-sizing: border-box;
   }
 
-  // Kind === primary
-  &.primary {
-    color: c.$colorNeutralWhite;
-    background-color: c.$colorPrimary;
+  &.color {
+    &Primary {
+      @include buttonColor(c.$colorPrimary);
 
-    &:hover,
-    &.hover,
-    &:focus,
-    &.focus {
-      background-color: c.$colorPrimaryLight;
-    }
+      &:hover,
+      &.hover,
+      &:focus,
+      &.focus {
+        @include buttonColor(c.$colorPrimaryLight);
+      }
 
-    &:active,
-    &.active {
-      background-color: c.$colorPrimaryDark;
-    }
+      &:active,
+      &.active {
+        @include buttonColor(c.$colorPrimaryDark);
+      }
+
+      &.variantContained {
+        color: c.$colorNeutralWhite;
+      }
 
-    &:disabled {
-      color: c.$colorTextSecondary;
-      background-color: c.$colorNeutral;
+      &:disabled {
+        @include disabledButtonColor;
+      }
     }
-  }
 
-  // Kind === secondary
-  &.secondary {
-    color: c.$colorPrimary;
-    background-color: transparent;
-    border: c.$borderWidthButton solid;
-    border-color: c.$colorPrimary;
+    &Secondary {
+      @include buttonColor(c.$colorError);
 
-    .outline {
-      /* Note: We need to take border of 1px into account */
-      /* doiuse-disable calc */
-      width: calc(100% + #{c.$grid} * 2.5);
-      height: calc(100% + #{c.$grid} * 2.5);
-      /* doiuse-enable calc */
+      &:hover,
+      &.hover,
+      &:focus,
+      &.focus {
+        @include buttonColor(c.$colorErrorLight);
+      }
 
-      &.inset {
-        /* doiuse-disable calc */
-        width: calc(100% + #{c.$grid});
-        height: calc(100% + #{c.$grid});
-        /* doiuse-enable calc */
+      &:active,
+      &.active {
+        @include buttonColor(c.$colorErrorDark);
       }
-    }
 
-    &:hover,
-    &.hover,
-    &:focus,
-    &.focus {
-      color: c.$colorPrimaryLight;
-      border-color: c.$colorPrimaryLight;
-    }
+      &.variantContained {
+        color: c.$colorNeutralWhite;
+      }
 
-    &:active,
-    &.active {
-      color: c.$colorPrimaryDark;
-      border-color: c.$colorPrimaryDark;
+      &:disabled {
+        @include disabledButtonColor;
+      }
     }
 
-    &:disabled {
-      color: c.$colorTextSecondary;
-      border-color: c.$colorNeutral;
+    &Warning {
+      @include buttonColor(c.$colorWarning);
+
+      &:hover,
+      &.hover,
+      &:focus,
+      &.focus {
+        @include buttonColor(c.$colorWarningLight);
+      }
+
+      &:active,
+      &.active {
+        @include buttonColor(c.$colorWarningDark);
+      }
+
+      &.variantContained {
+        color: c.$colorText;
+      }
+
+      &:disabled {
+        @include disabledButtonColor;
+      }
     }
   }
 
-  // Kind === danger
-  &.danger {
-    color: c.$colorNeutralWhite;
-    background-color: c.$colorError;
+  &.variant {
+    &Outlined {
+      background: none;
+      border-style: solid;
+      border-width: c.$borderWidth;
 
-    &:hover,
-    &.hover,
-    &:focus,
-    &.focus {
-      background-color: c.$colorErrorLight;
-    }
+      .outline {
+        /* Note: We need to take border of 1px into account */
+        /* doiuse-disable calc */
+        width: calc(100% + #{c.$grid} * 2.5);
+        height: calc(100% + #{c.$grid} * 2.5);
+        /* doiuse-enable calc */
 
-    &:active,
-    &.active {
-      background-color: c.$colorErrorDark;
-    }
+        &.inset {
+          /* doiuse-disable calc */
+          width: calc(100% + #{c.$grid});
+          height: calc(100% + #{c.$grid});
+          /* doiuse-enable calc */
+        }
+      }
 
-    &:disabled {
-      color: c.$colorTextSecondary;
-      background-color: c.$colorNeutral;
+      &:hover,
+      &.hover,
+      &:active,
+      &.active,
+      &:focus,
+      &.focus,
+      &:disabled,
+      &.disabled {
+        background: none;
+      }
     }
-  }
 
-  // Kind === transparent
-  &.transparent {
-    color: inherit;
-    background-color: transparent;
+    &Text {
+      color: inherit;
+      background: none;
+
+      &:hover,
+      &.hover,
+      &:active,
+      &.active,
+      &:focus,
+      &.focus,
+      &:disabled,
+      &.disabled {
+        color: inherit;
+        background: none;
+      }
+    }
   }
 }

package/lib/Calendar/Calendar.d.ts

@@ -3,7 +3,7 @@ import { ReactDatePickerProps } from 'react-datepicker';
 export declare type CalendarSize = 'medium' | 'small';
 export declare type CalendarProps = {
     containerClassName?: string;
-    date: ReactDatePickerProps['selected'];
+    date: Date | null;
     inputLabel: string;
     inputClassName?: string;
     onDateChange: ReactDatePickerProps['onChange'];

package/lib/Calendar/Calendar.js

@@ -1,13 +1,18 @@
 import React from 'react';
 import cn from 'classnames';
+import { createPortal } from 'react-dom';
 import DatePicker from 'react-datepicker';
 import { CalendarInput } from './components/CalendarInput';
 import { CalendarHeader } from './components/CalendarHeader';
 import { CalendarTime } from './components/CalendarTime';
+import { canUseDOM } from '../utils/ssr';
 import styles from './Calendar.module.scss';
 const DATE_FORMAT = 'yyyy-MM-dd';
 const DATE_FORMAT_WITH_TIME = 'yyyy-MM-dd hh:mm a';
-const CalendarPopperContainer = ({ children }) => React.createElement("div", { "data-test": "date-picker-popper-container" }, children);
+const CalendarPopperContainer = ({ children }) => canUseDOM && children
+    ? createPortal(React.createElement("div", { className: styles.popper },
+        React.createElement("div", { "data-test": "date-picker-popper-container", className: "hz-date-picker-popper-container" }, children)), document.body)
+    : null;
 export const Calendar = ({ calendarClassName, className, containerClassName, date, inputLabel, inputClassName, onDateChange, showTimeInput, size = 'medium', ...props }) => (React.createElement("div", { className: cn(styles.container, {
         [styles.time]: showTimeInput,
     }, containerClassName) },

package/lib/Calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,UAAoC,MAAM,kBAAkB,CAAA;AAEnE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAExD,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C,MAAM,WAAW,GAAG,YAAY,CAAA;AAChC,MAAM,qBAAqB,GAAG,oBAAoB,CAAA;AAElD,MAAM,uBAAuB,GAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,0CAAe,8BAA8B,IAAE,QAAQ,CAAO,CAAA;AAapH,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAC1C,iBAAiB,EACjB,SAAS,EACT,kBAAkB,EAClB,IAAI,EACJ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,aAAa,EACb,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACT,EAAE,EAAE,CAAC,CACJ,6BACE,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;QACE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,aAAa;KAC7B,EACD,kBAAkB,CACnB;IAED,oBAAC,UAAU,oBACL,KAAK,IACT,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC,EACzD,SAAS,EAAE,SAAS;QACpB;;;WAGG;QACH,WAAW,EAAE,oBAAC,aAAa,IAAC,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,GAAI,EACjG,eAAe,EAAE,oBAAC,YAAY,OAAG,EACjC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,WAAW,EAC/D,QAAQ,EAAE,YAAY,EACtB,eAAe,EAAE,uBAAuB;QACxC;;;;WAIG;QACH,kBAAkB,EAAE,cAAc,EAClC,QAAQ,EAAE,IAAI,EACd,eAAe,EAAE,KAAK,EACtB,aAAa,EAAE,aAAa,IAC5B,CACE,CACP,CAAA"}
+{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,UAAoC,MAAM,kBAAkB,CAAA;AAEnE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,OAAO,MAAM,MAAM,wBAAwB,CAAA;AAE3C,MAAM,WAAW,GAAG,YAAY,CAAA;AAChC,MAAM,qBAAqB,GAAG,oBAAoB,CAAA;AAElD,MAAM,uBAAuB,GAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACnD,SAAS,IAAI,QAAQ;IACnB,CAAC,CAAC,YAAY,CACZ,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;QAC3B,0CAAe,8BAA8B,EAAC,SAAS,EAAC,iCAAiC,IACtF,QAAQ,CACL,CACF,EACJ,QAAQ,CAAC,IAAI,CACd;IACH,CAAC,CAAC,IAAI,CAAA;AAaV,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EAC1C,iBAAiB,EACjB,SAAS,EACT,kBAAkB,EAClB,IAAI,EACJ,UAAU,EACV,cAAc,EACd,YAAY,EACZ,aAAa,EACb,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACT,EAAE,EAAE,CAAC,CACJ,6BACE,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;QACE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,aAAa;KAC7B,EACD,kBAAkB,CACnB;IAED,oBAAC,UAAU,oBACL,KAAK,IACT,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC,EACzD,SAAS,EAAE,SAAS;QACpB;;;WAGG;QACH,WAAW,EAAE,oBAAC,aAAa,IAAC,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,GAAI,EACjG,eAAe,EAAE,oBAAC,YAAY,OAAG,EACjC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,WAAW,EAC/D,QAAQ,EAAE,YAAY,EACtB,eAAe,EAAE,uBAAuB;QACxC;;;;WAIG;QACH,kBAAkB,EAAE,cAAc,EAClC,QAAQ,EAAE,IAAI,EACd,eAAe,EAAE,KAAK,EACtB,aAAa,EAAE,aAAa,IAC5B,CACE,CACP,CAAA"}