@hazelcast/ui 4.0.1-canary.8 → 4.0.1

package/lib/old/TextField.js

@@ -46,7 +46,7 @@ const TextFieldInternal = (props, ref) => {
             [styles.withIcon]: inputIcon,
             [styles.empty]: value === undefined,
         }, className) },
-        React.createElement(FieldHeader, { id: id, size: size, label: label, variant: variant, helperText: helperText, showAriaLabel: showAriaLabel, labelClassName: labelClassName, "data-test": `${dataTest}-header`, helperTextTooltipWordBreak: helperTextTooltipWordBreak }),
+        React.createElement(FieldHeader, { id: id, label: label, variant: variant, helperText: helperText, showAriaLabel: showAriaLabel, labelClassName: labelClassName, "data-test": `${dataTest}-header`, helperTextTooltipWordBreak: helperTextTooltipWordBreak }),
         React.createElement("div", { className: styles.inputBlock },
             React.createElement("div", { ref: containerRef, className: cn(styles.inputContainer, inputContainerClassName) },
                 React.createElement("input", { type: type, id: id, ref: mergedRef, value: value !== null && value !== void 0 ? value : '', name: name, onChange: onChange, onBlur: onBlur, onFocus: onFocus, readOnly: readOnly, onKeyDown: onKeyDown, onClick: onClick, "aria-label": showAriaLabel ? ariaLabel || label : undefined, "aria-invalid": !!error, "aria-required": required, "aria-describedby": helperText && helpTooltipId(id), "aria-errormessage": error && errorId(id), disabled: disabled, placeholder: placeholder, className: cn(inputClassName, {
@@ -54,7 +54,7 @@ const TextFieldInternal = (props, ref) => {
                     }), ...htmlAttrs }),
                 React.createElement("div", { className: cn(styles.borderOverlay, inputBorderOverlayClassName) }),
                 inputIcon && (React.createElement(Icon, { icon: inputIcon, ariaLabel: label, containerClassName: cn(styles.inputIconContainer, styles.inputLeftIconContainer), className: styles.inputIcon, size: "small" })),
-                clearable && !disabled && isNotEmpty && (React.createElement(IconButton, { icon: X, variant: "ghost", size: size === 'small' ? 'small' : 'regular', ariaLabel: "Clear field", onClick: handleClear, className: styles.clearButton, "data-test": dataTest ? `${dataTest}-clear` : undefined })),
+                clearable && !disabled && isNotEmpty && (React.createElement(IconButton, { icon: X, variant: "ghost", ariaLabel: "Clear field", onClick: handleClear, className: styles.clearButton, "data-test": dataTest ? `${dataTest}-clear` : undefined })),
                 inputContainerChild,
                 inputTrailingIcon && inputTrailingIconLabel && (React.createElement(Icon, { icon: inputTrailingIcon, ariaLabel: inputTrailingIconLabel, containerClassName: cn(styles.inputIconContainer, styles.inputTrailingIconContainer), className: styles.inputIconTrailing, size: iconSize }))),
             children),

package/lib/old/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/old/TextField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../src/old/TextField.tsx"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,OAAO,KAAK,EAAE,EAQZ,UAAU,EACV,MAAM,GACP,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAoB,CAAC,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,SAAS,MAAM,kBAAkB,CAAA;AAGxC,OAAO,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAA;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,WAAW,EAAoB,MAAM,2BAA2B,CAAA;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAIrD,OAAO,MAAM,MAAM,+BAA+B,CAAA;AAoDlD;;;;;;;;;;;;;GAaG;AACH,MAAM,iBAAiB,GAAG,CAA2B,KAAwB,EAAE,GAA2B,EAAE,EAAE;IAC5G,MAAM,EACJ,WAAW,EAAE,QAAQ,GAAG,YAAY,EACpC,SAAS,EACT,SAAS,EACT,QAAQ,EACR,KAAK,EACL,cAAc,EACd,UAAU,EACV,0BAA0B,EAC1B,EAAE,EAAE,UAAU,EACd,cAAc,EACd,mBAAmB,EACnB,uBAAuB,EACvB,2BAA2B,EAC3B,SAAS,EACT,iBAAiB,EACjB,sBAAsB,EACtB,KAAK,EACL,cAAc,EACd,aAAa,GAAG,KAAK,EACrB,IAAI,EACJ,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,SAAS,EACnB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,EACT,WAAW,EACX,QAAQ,EACR,IAAI,GAAG,MAAM,EACb,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,QAAQ,GAAG,IAAI,EACf,qBAAqB,GAAG,KAAK,EAC7B,QAAQ,EACR,YAAY,EACZ,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IACT,MAAM,MAAM,GAAG,MAAM,EAAE,CAAA;IACvB,MAAM,EAAE,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,MAAM,CAAA;IAC/B,MAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAA;IAEtD,MAAM,UAAU,GAAG,KAAK,KAAK,SAAS,IAAI,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA;IAC/F,MAAM,SAAS,GAAG,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;IAE7D,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACrB,wBAAwB,CAAC,EAAE,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;QAChD,CAAC;IACH,CAAC,CAAA;IAED,OAAO,CACL,0CACa,QAAQ,EACnB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,SAAS,EAChB;YACE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,IAAI,KAAK;YACpC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;YAChC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;YAChC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,KAAK;YACxB,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,SAAS;YAC5B,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,SAAS;SACpC,EACD,SAAS,CACV;QAED,oBAAC,WAAW,IACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,eACnB,GAAG,QAAQ,SAAS,EAC/B,0BAA0B,EAAE,0BAA0B,GACtD;QACF,6BAAK,SAAS,EAAE,MAAM,CAAC,UAAU;YAC/B,6BAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,EAAE,uBAAuB,CAAC;gBACnF,+BACE,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,EAClB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,gBACJ,aAAa,CAAC,CAAC,CAAC,SAAS,IAAI,KAAK,CAAC,CAAC,CAAC,SAAS,kBAE5C,CAAC,CAAC,KAAK,mBACN,QAAQ,sBACL,UAAU,IAAI,aAAa,CAAC,EAAE,CAAC,uBAC9B,KAAK,IAAI,OAAO,CAAC,EAAE,CAAC,EACvC,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE;wBAC5B,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,iBAAiB;qBACzC,CAAC,KACE,SAAS,GACb;gBACF,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,2BAA2B,CAAC,GAAI;gBACxE,SAAS,IAAI,CACZ,oBAAC,IAAI,IACH,IAAI,EAAE,SAAS,EACf,SAAS,EAAE,KAAK,EAChB,kBAAkB,EAAE,EAAE,CAAC,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAAC,sBAAsB,CAAC,EAChF,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,IAAI,EAAC,OAAO,GACZ,CACH;gBACA,SAAS,IAAI,CAAC,QAAQ,IAAI,UAAU,IAAI,CACvC,oBAAC,UAAU,IACT,IAAI,EAAE,CAAC,EACP,OAAO,EAAC,OAAO,EACf,SAAS,EAAC,aAAa,EACvB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,CAAC,WAAW,eAClB,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,QAAQ,CAAC,CAAC,CAAC,SAAS,GACrD,CACH;gBACA,mBAAmB;gBACnB,iBAAiB,IAAI,sBAAsB,IAAI,CAC9C,oBAAC,IAAI,IACH,IAAI,EAAE,iBAAiB,EACvB,SAAS,EAAE,sBAAsB,EACjC,kBAAkB,EAAE,EAAE,CAAC,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAAC,0BAA0B,CAAC,EACpF,SAAS,EAAE,MAAM,CAAC,iBAAiB,EACnC,IAAI,EAAE,QAAQ,GACd,CACH,CACG;YACL,QAAQ,CACL;QACN,oBAAC,KAAK,IACJ,SAAS,QACT,OAAO,EAAE,EAAE,EACX,KAAK,EAAE,KAAK,eACD,GAAG,QAAQ,QAAQ,EAC9B,gBAAgB,EAAE,qBAAqB,EACvC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,EAAE,cAAc,CAAC,GACpD,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;AAEtD,MAAM,CAAC,MAAM,SAAS,GAAG,CAA2B,EAAE,IAAI,EAAE,GAAG,KAAK,EAAwD,EAAE,EAAE,CAAC,CAC/H,oBAAC,gBAAgB,IAAC,GAAG,EAAE,IAAI,KAAM,KAAK,GAAI,CAC3C,CAAA"}

package/lib/{components → old}/Toast.js

@@ -4,8 +4,8 @@ import { AlertTriangle, CheckCircle, AlertCircle, Info, X } from 'react-feather'
 import useKey from 'react-use/lib/useKey';
 import { escKeyFilterPredicate } from '../utils/keyboard';
 import { IconButton } from './IconButton';
-import { Icon } from './Icon';
-import styles from './Toast.module.scss';
+import { Icon } from '../components/Icon';
+import styles from './ToastLegacy.module.scss';
 export const ToastIcon = {
     success: {
         icon: CheckCircle,
@@ -51,6 +51,6 @@ export const Toast = ({ type, content, dismissableByEscKey = true, closeToast, c
         }, className) },
         React.createElement(Icon, { "data-test": `${dataTest}-icon`, ariaLabel: ariaLabel, icon: icon, className: styles.icon }),
         React.createElement("div", { "data-test": `${dataTest}-content`, className: styles.content }, content),
-        closeToast && (React.createElement(IconButton, { "data-test": `${dataTest}-close`, variant: "ghost", className: styles.close, ariaLabel: "Close icon", icon: X, onClick: closeToast }))));
+        closeToast && (React.createElement(IconButton, { "data-test": `${dataTest}-close`, kind: "transparent", className: styles.close, ariaLabel: "Close icon", icon: X, onClick: closeToast }))));
 };
 //# sourceMappingURL=Toast.js.map

package/lib/old/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../src/old/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,WAAW,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAoB,CAAC,EAAE,MAAM,eAAe,CAAA;AAClG,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAGzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AAEzC,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAS9C,MAAM,CAAC,MAAM,SAAS,GAAgD;IACpE,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,mBAAmB;KAC/B;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,kBAAkB;KAC9B;IACD,OAAO,EAAE;QACP,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,uBAAuB;KACnC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,2BAA2B;KACvC;CACF,CAAA;AAUD;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EACpC,IAAI,EACJ,OAAO,EACP,mBAAmB,GAAG,IAAI,EAC1B,UAAU,EACV,SAAS,EACT,WAAW,EAAE,QAAQ,GAAG,OAAO,GAChC,EAAE,EAAE;IACH,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,CAAA;IAE3C,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,WAA0B,EAAE,EAAE;QAC7B,IAAI,mBAAmB,EAAE,CAAC;YACxB,UAAU,aAAV,UAAU,uBAAV,UAAU,EAAI,CAAA;YACd,WAAW,CAAC,wBAAwB,EAAE,CAAA;QACxC,CAAC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,mBAAmB,CAAC,CAClC,CAAA;IAED,MAAM,CAAC,qBAAqB,EAAE,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAA;IAEzG,OAAO,CACL,0CACa,QAAQ,EACnB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,KAAK,EACZ;YACE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,MAAM;YAC9B,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,IAAI,KAAK,UAAU;SACvC,EACD,SAAS,CACV;QAED,oBAAC,IAAI,iBAAY,GAAG,QAAQ,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;QACjG,0CAAgB,GAAG,QAAQ,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,IAC7D,OAAO,CACJ;QACL,UAAU,IAAI,CACb,oBAAC,UAAU,iBACE,GAAG,QAAQ,QAAQ,EAC9B,IAAI,EAAC,aAAa,EAClB,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,SAAS,EAAC,YAAY,EACtB,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,UAAU,GACnB,CACH,CACG,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/old/index.d.ts

@@ -43,9 +43,20 @@ export type { SelectFieldOption, SelectFieldOptionsMap } from './Select/helpers'
 export { AutocompleteField, getSelectedOptionFromValue, highlightOptionText } from './AutocompleteField';
 export type { AutocompleteFieldProps, AutocompleteFieldOption, RenderOptionFunction } from './AutocompleteField';
 export { AutocompleteFieldFormik } from './AutocompleteFieldFormik';
+export { InteractiveListItem } from './InteractiveList';
+export { InteractiveListFormik } from './InteractiveListFormik';
+export type { InteractiveListInputRef, InteractiveListExtraProps } from './InteractiveList';
+export type { InteractiveListFormikProps } from './InteractiveListFormik';
 export { TabContext, TabContextProvider, TabContextProviderControlled, useTabContext, TabList, Tab, TabPanel } from './Tabs';
 export type { TabContextValue, TabContextProviderProps, TabContextProviderControlledProps, TabListProps, TabProps, TabCommonProps, AnchorTabProps, ButtonTabProps, TabPanelProps, } from './Tabs';
 export { Modal, setAppElement } from './Modal';
 export type { ModalProps, ModalActionProps } from './Modal';
 export { SimpleTable } from './SimpleTable';
 export type { SimpleTableProps } from './SimpleTable';
+export { Toast } from './Toast';
+export type { ToastProps, ToastType, ToastIconDescriptor } from './Toast';
+export { ToastIcon } from './Toast';
+export { Alert } from './Alert';
+export type { AlertProps, AlertAction, AlertActionButton, AlertActionLink } from './Alert';
+export { Notification, NotificationIcon } from './Notification';
+export type { NotificationProps, NotificationType, NotificationIconDescriptor } from './Notification';

package/lib/old/index.js

@@ -24,7 +24,13 @@ export { CheckableSelectFieldFormik } from './Select/CheckableSelectFieldFormik'
 export { getMenuContainer, getOptionsMap } from './Select/helpers';
 export { AutocompleteField, getSelectedOptionFromValue, highlightOptionText } from './AutocompleteField';
 export { AutocompleteFieldFormik } from './AutocompleteFieldFormik';
+export { InteractiveListItem } from './InteractiveList';
+export { InteractiveListFormik } from './InteractiveListFormik';
 export { TabContext, TabContextProvider, TabContextProviderControlled, useTabContext, TabList, Tab, TabPanel } from './Tabs';
 export { Modal, setAppElement } from './Modal';
 export { SimpleTable } from './SimpleTable';
+export { Toast } from './Toast';
+export { ToastIcon } from './Toast';
+export { Alert } from './Alert';
+export { Notification, NotificationIcon } from './Notification';
 //# sourceMappingURL=index.js.map

package/lib/old/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/old/index.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yDAAyD;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAcjC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAQlD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAE5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAA;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AAMpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAA;AAEhF,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAElE,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAExG,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AACnE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,4BAA4B,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAY5H,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/old/index.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,yDAAyD;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAcjC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAQlD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAE5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAA;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AAMpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAA;AAEhF,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAElE,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAExG,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAG/D,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,4BAA4B,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAY5H,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA"}

package/lib/utils/styleConstants.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Design token values needed in JS/TS logic, not just CSS.
+ * Keep in sync with the corresponding --hive-* custom properties in styles/variables.css.
+ */
+export declare const styleConstants: {
+    readonly colorPrimary: "#2160c0";
+    readonly colorSuccess: "#85da66";
+    readonly iconStrokeWidth: "1.5px";
+    readonly iconStrokeWidthBold: "3px";
+    readonly tableColumnMinWidth: 60;
+    readonly tableColumnWidth: 170;
+    readonly tableColumnMaxWidth: 600;
+};

package/lib/utils/styleConstants.js

@@ -0,0 +1,14 @@
+/**
+ * Design token values needed in JS/TS logic, not just CSS.
+ * Keep in sync with the corresponding --hive-* custom properties in styles/variables.css.
+ */
+export const styleConstants = {
+    colorPrimary: '#2160c0',
+    colorSuccess: '#85da66',
+    iconStrokeWidth: '1.5px',
+    iconStrokeWidthBold: '3px',
+    tableColumnMinWidth: 60,
+    tableColumnWidth: 170,
+    tableColumnMaxWidth: 600,
+};
+//# sourceMappingURL=styleConstants.js.map

package/lib/utils/styleConstants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleConstants.js","sourceRoot":"","sources":["../../src/utils/styleConstants.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,eAAe,EAAE,OAAO;IACxB,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,EAAE;IACvB,gBAAgB,EAAE,GAAG;IACrB,mBAAmB,EAAE,GAAG;CAChB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hazelcast/ui",
-  "version": "4.0.1-canary.8",
+  "version": "4.0.1",
   "description": "Hazelcast design system components and utilities",
   "homepage": "https://github.com/hazelcast/hive#readme",
   "bugs": {
@@ -49,6 +49,7 @@
     "@floating-ui/react": "^0.26.28",
     "@headlessui/react": "^2.2.0",
     "@icons-pack/react-simple-icons": "^12.0.0",
+    "@radix-ui/react-toast": "^1.2.17",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-table": "^8.21.2",
     "@types/react-modal": "3.16.3",

package/styles/variables.css

@@ -32,6 +32,7 @@
   --hive-color-error: #dc084b;
   --hive-color-error-light: #efb1c9;
   --hive-color-error-dark: #8f001d;
+
   --hive-color-text: #061827;
   --hive-color-text-secondary: #707482;
   --hive-color-text-subdued: #707482;
@@ -120,6 +121,29 @@
   --hive-table-column-min-width: 60px;
   --hive-table-column-width: 170px;
   --hive-table-column-max-width: 600px;
+  --hive-error-height: 1.1875rem; /* $grid * 4.75 */
+  --hive-empty-state-button-min-width-normal: 120px;
+  --hive-empty-state-button-min-width-large: 140px;
+  --hive-separator-width: 1px;
+  --hive-slide-track-height: 0.5rem; /* $grid * 2 */
+  --hive-slider-track-border-radius: 0.5rem; /* $grid * 2 */
+  --hive-slider-thumb-border-size: 0.375rem; /* $grid * 1.5 */
+  --hive-slider-thumb-hover-border-size: 1px;
+  --hive-slider-thumb-shadow-size: 1px;
+  --hive-slider-thumb-shadow-blur: 0.25rem; /* $grid */
+  --hive-slider-fill-border-size: 1px;
+
+  /* ─── Motion ──────────────────────────────────────────────────── */
+
+  --hive-duration-loader: 1.6s;
+
+  /* ─── Stacking ────────────────────────────────────────────────── */
+
+  --hive-z-index-0: 0;
+  --hive-z-index-100: 1;
+  --hive-z-index-200: 2;
+  --hive-z-index-1000: 10;
+  --hive-z-index-2000: 20;
 
   /* ─── Typography ──────────────────────────────────────────────── */
 

package/lib/components/AppHeader/AppHeader.module.scss

@@ -1,29 +0,0 @@
-@use '../../../styles/constants' as c;
-
-.root {
-  background: c.$colorBrandSecondary;
-  color: c.$colorNeutralLighter;
-  display: flex;
-  align-items: center;
-  height: 59px;
-  box-sizing: border-box;
-  flex-direction: row;
-  font-size: c.$fontSizeBodySmall;
-  width: 100%;
-  padding: 0 c.$grid * 5;
-  overflow-x: auto;
-  flex-shrink: 0;
-  gap: c.$grid * 7.5;
-}
-
-.name {
-  color: c.$colorBrandPrimary;
-  font-weight: 600;
-}
-
-.aside {
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-  gap: c.$grid * 4;
-}

package/lib/components/AppHeader/AppHeaderMenu/AppHeaderMenu.module.scss

@@ -1,20 +0,0 @@
-@use '../../../../styles/constants' as c;
-
-.root {
-  display: flex;
-  align-items: center;
-}
-
-.separator {
-  border-left: 1px solid c.$colorNeutralLight;
-}
-
-.content {
-  padding: c.$grid * 2;
-  color: c.$colorNeutralLighter;
-  background: c.$colorBrandSecondary;
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  gap: c.$grid * 2;
-}

package/lib/components/AppHeader/EnvironmentBadge/EnvironmentBadge.module.scss

@@ -1,13 +0,0 @@
-@use '../../../../styles/constants' as c;
-
-.root {
-  display: inline-flex;
-  align-items: center;
-  gap: c.$grid * 2;
-  color: #000;
-  background: c.$colorError;
-  border-radius: c.$grid * 3.5;
-  padding: 0 c.$grid * 3;
-  height: c.$grid * 7;
-  text-transform: capitalize;
-}

package/lib/components/AppHeader/SelectCluster/SelectCluster.module.scss

@@ -1,101 +0,0 @@
-@use '../../../../styles/constants' as c;
-@use '../../../../styles/helpers' as h;
-
-$selectContainer: ':global .hz-select-field';
-$selectControl: ':global .hz-select-field__control';
-$selectInputContainer: ':global .hz-select-field__input-container';
-$selectValueContainer: ':global .hz-select-field__value-container';
-$selectTrailingNote: ':global .hz-select-field__trailing-note';
-$selectValue: ':global .hz-select-field__single-value';
-$selectMenuPortal: ':global .hz-select-field__menu-portal';
-$selectMenu: ':global .hz-select-field__menu';
-$selectMenuList: ':global .hz-select-field__menu-list';
-$selectMenuNotice: ':global .hz-select-field__menu-notice';
-$selectOption: ':global .hz-select-field__option';
-$selectGroup: ':global .hz-select-field__group';
-$selectGroupHeading: ':global .hz-select-field__group-heading';
-$selectFieldIndicators: ':global .hz-select-field__indicators';
-
-.select {
-  width: 260px;
-
-  &.disabled {
-    #{$selectControl} {
-      color: c.$colorTextSecondary;
-      background-color: transparent;
-
-      #{$selectValue},
-      #{$selectTrailingNote},
-      #{$selectFieldIndicators} svg {
-        color: c.$colorTextSecondary;
-      }
-    }
-  }
-
-  #{$selectControl} {
-    background: none;
-    border-radius: c.$borderRadius;
-    border: 1px solid c.$colorTextSecondary;
-
-    #{$selectInputContainer},
-    #{$selectValueContainer},
-    #{$selectTrailingNote} {
-      color: c.$colorNeutralLighter;
-    }
-  }
-
-  #{$selectValue} {
-    color: c.$colorNeutralLighter;
-  }
-
-  #{$selectFieldIndicators} {
-    svg {
-      color: c.$colorNeutralLighter;
-    }
-  }
-
-  .selectIconLeftContainer {
-    box-sizing: content-box;
-
-    .selectIconLeft {
-      color: c.$colorSuccess;
-
-      &.disconnected {
-        color: c.$colorError;
-      }
-
-      &.disabled {
-        color: c.$colorTextSecondary;
-      }
-    }
-  }
-}
-
-.menuPortal {
-  #{$selectMenu} {
-    border: none;
-    background: c.$colorBrandSecondary;
-    border-radius: 0 0 c.$borderRadius c.$borderRadius;
-  }
-
-  #{$selectOption} {
-    &:active {
-      background: none;
-    }
-
-    #{$selectValueContainer},
-    #{$selectTrailingNote} {
-      color: c.$colorNeutralLighter;
-    }
-
-    &--is-focused {
-      background: c.$colorBrandAccent;
-      box-shadow: none;
-
-      #{$selectValueContainer},
-      #{$selectTrailingNote} {
-        color: c.$colorBrandText;
-      }
-    }
-  }
-}

package/lib/components/AppSidebar/AppSidebarFavorites/AppSidebarFavorites.module.scss

@@ -1,13 +0,0 @@
-@use '../../../../styles/constants' as c;
-
-.content {
-  display: flex;
-  flex-direction: column;
-  gap: c.$grid;
-  padding: c.$grid * 2 0;
-  font-size: c.$fontSizeBodySmall;
-}
-
-.placeholder {
-  padding: c.$grid * 2 c.$grid * 2.5 c.$grid * 2 c.$grid * 14;
-}

package/lib/components/AppSidebar/AppSidebarSection/AppSidebarSection.module.scss

@@ -1,58 +0,0 @@
-@use '../../../../styles/constants' as c;
-
-$transitionLength: 125ms;
-$sideBarMenuSectionTransitionMaxHeight: 1000px;
-
-.root {
-  display: flex;
-  gap: c.$grid * 2;
-  align-items: stretch;
-  flex-direction: column;
-  padding-top: c.$grid * 2;
-  border-top: 1px solid transparent;
-
-  h3 {
-    margin: 0;
-    color: c.$colorNeutralLight;
-    font-size: c.$fontSizeBodySmall;
-  }
-}
-
-.collapsed {
-  border-color: c.$colorNeutralLight;
-
-  h3 {
-    display: none;
-  }
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  gap: c.$grid;
-}
-
-.icon {
-  margin-left: auto;
-  color: c.$colorNeutralLighter;
-}
-
-.toggle {
-  margin-bottom: c.$grid;
-
-  .adornment {
-    margin-right: -#{c.$grid * 1.5};
-  }
-}
-
-.transitionLeave {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height $transitionLength ease-out;
-}
-
-.transitionEnter {
-  max-height: $sideBarMenuSectionTransitionMaxHeight;
-  overflow: visible;
-  transition: max-height $transitionLength ease-in;
-}

package/lib/components/Calendar/Calendar.module.scss

@@ -1,185 +0,0 @@
-@use '../../../styles/constants' as c;
-@use '../../../styles/helpers' as h;
-
-$inputMaxWidth: 300px;
-$inputMinWidth: 118px;
-$inputMinWidthWithTime: 183px;
-$inputPadding: c.$grid * 3;
-
-/*
- * Rest of styles
- */
-.container {
-  width: $inputMaxWidth;
-  min-width: $inputMinWidth;
-
-  :global .react-datepicker-wrapper {
-    width: 100%;
-  }
-
-  &.time {
-    min-width: $inputMinWidthWithTime;
-  }
-}
-
-.popper {
-  :global(.hz-date-picker-popper-container) {
-    /*
-  * Internal styles override for those that cannot be
-  * overridden using classNames composition
-  */
-    :global .react-datepicker-popper {
-      z-index: c.$zIndex200;
-    }
-
-    :global .react-datepicker {
-      padding: $inputPadding;
-
-      :global .react-datepicker__header {
-        margin: 0;
-        padding: 0;
-        background-color: c.$colorNeutralLighter;
-        border: none;
-        border-radius: 0;
-
-        :global .react-datepicker__day-names {
-          margin-bottom: c.$grid;
-
-          :global .react-datepicker__day-name {
-            width: c.$grid * 8;
-            height: c.$grid * 8;
-            text-align: center;
-            vertical-align: middle;
-            line-height: c.$grid * 8 !important;
-            margin: 0;
-            color: c.$colorText;
-
-            @include c.typographyBodySmall('bold');
-
-            &:not(:last-of-type) {
-              margin-right: c.$grid * 2;
-            }
-          }
-        }
-      }
-
-      :global .react-datepicker__month {
-        /*
-         * Note: The calendar part is asymmetrical by design
-         * It's padded by 2 extra px from the left
-         */
-        margin: 0 0 0 (c.$grid * 0.5);
-
-        :global .react-datepicker__week {
-          &:not(:last-of-type) {
-            margin-bottom: c.$grid * 2;
-          }
-
-          /*
-           * Note:
-           * We need to use :global override here, as 'renderCustomDay' only allows us to override
-           * the child of this element, which does not allow us to touch the styles properly
-           *
-           * Source styles:
-           * https://github.com/Hacker0x01/react-datepicker/blob/master/src/stylesheets/datepicker.scss#L395
-           */
-          :global .react-datepicker__day {
-            border-radius: c.$grid;
-            width: c.$grid * 8;
-            height: c.$grid * 8;
-            background-color: c.$colorNeutralWhite;
-            color: c.$colorTextSecondary;
-            text-align: center;
-            vertical-align: middle;
-            line-height: c.$grid * 8 !important;
-            margin: 0;
-
-            // Do not remove outline for high-contrast modes
-            // https://stackoverflow.com/a/52616313
-            outline: transparent solid c.$outlineWidth;
-
-            @include c.typographyBodySmall;
-
-            &--today {
-              @include c.typographyBodySmall('bold');
-            }
-
-            &--in-selecting-range,
-            &--in-range {
-              // TODO: Improvised colour, consult with @Pawel
-              background-color: c.$colorInfoLight;
-              color: c.$colorNeutralWhite;
-            }
-
-            &--selected {
-              background-color: c.$colorPrimaryLight;
-              color: c.$colorNeutralWhite;
-
-              // Note: Disable default browser outline, force our only on :focus
-
-              @include c.typographyBodySmall('bold');
-            }
-
-            &--disabled {
-              cursor: default;
-              color: c.$colorNeutral;
-            }
-
-            &:focus-visible {
-              @include h.outlineSimple;
-            }
-
-            &:not(:last-of-type) {
-              margin-right: c.$grid * 2;
-            }
-          }
-        }
-      }
-
-      :global .react-datepicker__input-time-container {
-        margin: 0;
-        padding: 0;
-
-        :global .react-datepicker-time__caption {
-          display: none;
-        }
-
-        :global .react-datepicker-time__input-container {
-          margin: 0 c.$grid 0 c.$grid * 5;
-
-          :global .react-datepicker-time__input {
-            margin: 0;
-
-            input {
-              width: auto;
-            }
-          }
-        }
-      }
-    }
-
-    .calendar {
-      display: flex;
-      flex-direction: row;
-      border: c.$borderWidth solid c.$colorNeutralLight;
-      background-color: c.$colorNeutralLighter;
-      box-sizing: border-box;
-
-      .headerContainer {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-
-        // Note: There is 1.5px in designs - also $separatorWidth is not semantically the best fit
-        margin-bottom: c.$separatorWidth;
-
-        .headerMonthAndYear {
-          color: c.$colorTextSecondary;
-
-          @include c.typographyBodySmall('bold');
-        }
-      }
-    }
-  }
-}

package/lib/components/Calendar/CalendarRange.module.scss

@@ -1,21 +0,0 @@
-@use '../../../styles/constants' as c;
-
-.container {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-
-  &.vertical {
-    flex-direction: column;
-    gap: c.$grid * 4;
-  }
-
-  .arrowRight {
-    color: c.$colorNeutralLight;
-    margin: 0 c.$grid * 2 c.$grid * 2;
-
-    &.small {
-      margin-bottom: c.$grid * 0.75;
-    }
-  }
-}