@epam/uui 4.11.0-alpha.0 → 4.11.0

package/assets/styles/text-layout.scss

@@ -1,81 +1,81 @@
-.line-height-12 { line-height: 12px; }
-.line-height-18 { line-height: 18px; }
-.line-height-24 { line-height: 24px; }
-.line-height-30 { line-height: 30px; }
-
-.font-size-10 { font-size: 10px; }
-.font-size-12 { font-size: 12px; }
-.font-size-14 { font-size: 14px; }
-.font-size-16 { font-size: 16px; }
-.font-size-18 { font-size: 18px; }
-.font-size-24 { font-size: 24px; }
-
-.v-padding-2 {
-    padding-top: 2px;
-    padding-bottom: 2px;
-}
-
-.v-padding-3 {
-    padding-top: 3px;
-    padding-bottom: 3px;
-}
-
-.v-padding-5 {
-    padding-top: 5px;
-    padding-bottom: 5px;
-}
-
-.v-padding-6 {
-    padding-top: 6px;
-    padding-bottom: 6px;
-}
-
-.v-padding-8 {
-    padding-top: 8px;
-    padding-bottom: 8px;
-}
-
-.v-padding-9 {
-    padding-top: 9px;
-    padding-bottom: 9px;
-}
-
-.v-padding-11 {
-    padding-top: 11px;
-    padding-bottom: 11px;
-}
-
-.v-padding-12 {
-    padding-top: 12px;
-    padding-bottom: 12px;
-}
-
-.v-padding-14 {
-    padding-top: 14px;
-    padding-bottom: 14px;
-}
-
-.v-padding-15 {
-    padding-top: 15px;
-    padding-bottom: 15px;
-}
-
-.v-padding-17 {
-    padding-top: 17px;
-    padding-bottom: 17px;
-}
-
-.v-padding-18 {
-    padding-top: 18px;
-    padding-bottom: 18px;
-}
-
-.v-padding-23 {
-    padding-top: 23px;
-    padding-bottom: 23px;
-}
-
-.v-padding-24 {
-    padding-top: 24px;
-    padding-bottom: 24px;
+.line-height-12 { line-height: 12px; }
+.line-height-18 { line-height: 18px; }
+.line-height-24 { line-height: 24px; }
+.line-height-30 { line-height: 30px; }
+
+.font-size-10 { font-size: 10px; }
+.font-size-12 { font-size: 12px; }
+.font-size-14 { font-size: 14px; }
+.font-size-16 { font-size: 16px; }
+.font-size-18 { font-size: 18px; }
+.font-size-24 { font-size: 24px; }
+
+.v-padding-2 {
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+.v-padding-3 {
+    padding-top: 3px;
+    padding-bottom: 3px;
+}
+
+.v-padding-5 {
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.v-padding-6 {
+    padding-top: 6px;
+    padding-bottom: 6px;
+}
+
+.v-padding-8 {
+    padding-top: 8px;
+    padding-bottom: 8px;
+}
+
+.v-padding-9 {
+    padding-top: 9px;
+    padding-bottom: 9px;
+}
+
+.v-padding-11 {
+    padding-top: 11px;
+    padding-bottom: 11px;
+}
+
+.v-padding-12 {
+    padding-top: 12px;
+    padding-bottom: 12px;
+}
+
+.v-padding-14 {
+    padding-top: 14px;
+    padding-bottom: 14px;
+}
+
+.v-padding-15 {
+    padding-top: 15px;
+    padding-bottom: 15px;
+}
+
+.v-padding-17 {
+    padding-top: 17px;
+    padding-bottom: 17px;
+}
+
+.v-padding-18 {
+    padding-top: 18px;
+    padding-bottom: 18px;
+}
+
+.v-padding-23 {
+    padding-top: 23px;
+    padding-bottom: 23px;
+}
+
+.v-padding-24 {
+    padding-top: 24px;
+    padding-bottom: 24px;
 }

package/assets/styles/text-size.scss

@@ -1,37 +1,37 @@
-@function vpadding($size, $border-width) {
-    @if ($size == 18px or $size == 24px) {
-        @return (3px - $border-width);
-    } @else if ($size == 30px) {
-        @return (6px - $border-width);
-    } @else if ($size == 36px or $size == 42px) {
-        @return (9px - $border-width);
-    } @else if ($size == 48px) {
-        @return (12px - $border-width);
-    }
-
-    @return (null);
-}
-
-@mixin text-size($size, $border-width: 0) {
-    @if ($size == 18px) {
-        line-height: 12px;
-        font-size: 10px;
-    } @else if ($size == 24px) {
-        line-height: 18px;
-        font-size: 12px;
-    } @else if ($size == 30px) {
-        line-height: 18px;
-        font-size: 14px;
-    } @else if ($size == 36px) {
-        line-height: 18px;
-        font-size: 14px;
-    } @else if ($size == 42px) {
-        line-height: 24px;
-        font-size: 16px;
-    } @else if ($size == 48px) {
-        line-height: 24px;
-        font-size: 16px;
-    }
-    padding-top: vpadding($size, $border-width);
-    padding-bottom: vpadding($size, $border-width);
-}
+@function vpadding($size, $border-width) {
+    @if ($size == 18px or $size == 24px) {
+        @return (3px - $border-width);
+    } @else if ($size == 30px) {
+        @return (6px - $border-width);
+    } @else if ($size == 36px or $size == 42px) {
+        @return (9px - $border-width);
+    } @else if ($size == 48px) {
+        @return (12px - $border-width);
+    }
+
+    @return (null);
+}
+
+@mixin text-size($size, $border-width: 0) {
+    @if ($size == 18px) {
+        line-height: 12px;
+        font-size: 10px;
+    } @else if ($size == 24px) {
+        line-height: 18px;
+        font-size: 12px;
+    } @else if ($size == 30px) {
+        line-height: 18px;
+        font-size: 14px;
+    } @else if ($size == 36px) {
+        line-height: 18px;
+        font-size: 14px;
+    } @else if ($size == 42px) {
+        line-height: 24px;
+        font-size: 16px;
+    } @else if ($size == 48px) {
+        line-height: 24px;
+        font-size: 16px;
+    }
+    padding-top: vpadding($size, $border-width);
+    padding-bottom: vpadding($size, $border-width);
+}

package/assets/styles/typography-mixins.scss

@@ -0,0 +1,159 @@
+@mixin overflow-ellipsis() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@mixin typography-header() {
+    :global(.hero-header), h1, h2, h3, h4, h5, h6 {
+        margin: 0;
+    }
+
+    :global(.hero-header) {
+        font-family: var(--font-promo);
+        margin: 30px 0;
+        font-size: 66px;
+        line-height: 72px;
+    }
+
+    :global(.hero-header), :global(.promo-header) {
+        color: var(--uui-text-brand);
+        text-align: center;
+    }
+
+    :global(.promo-header), h1, h2, h3 {
+        font-family: var(--font-primary);
+    }
+
+    :global(.promo-header) {
+        text-transform: uppercase;
+    }
+
+    h4, h5, h6 {
+        font-family: var(--font-semibold);
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        margin-bottom: 0.5em;
+        margin-top: 1.2em;
+        line-height: 1.35em;
+    }
+
+    h1 {
+        font-size: 36px;
+    }
+
+    h2 {
+        font-size: 30px;
+        letter-spacing: 0.1px;
+
+        &:global(.promo-header) {
+            letter-spacing: 2px;
+        }
+    }
+
+    h3 {
+        font-size: 24px;
+    }
+
+    h4 {
+        font-size: 18px;
+        letter-spacing: 0.1px;
+    }
+
+    h5 {
+        font-size: 16px;
+    }
+
+    h6 {
+        font-size: 14px;
+    }
+}
+
+@mixin typography-inline() {
+    b, strong {
+        font-family: var(--font-semibold);
+    }
+
+    i, em {
+        font-family: var(--font-italic);
+    }
+
+    a {
+        display: inline-flex;
+        align-items: center;
+        color: var(--uui-primary);
+
+        &:visited {
+            color: #5214CC;
+
+            &:hover {
+                color: #3F0F9E;
+            }
+        }
+
+        &:hover {
+            text-decoration: underline;
+            color: var(--uui-primary-dark);
+        }
+    }
+
+    code {
+        padding: 0.125em 0.25em;
+        color: var(--uui-text-primary);
+        background-color: var(--uui-secondary-light);
+        font-family: var(--font-mono);
+        white-space: pre-wrap;
+        word-wrap: normal;
+    }
+}
+
+@mixin typography-block() {
+    ol, ul {
+        padding: 0;
+    }
+
+    li {
+        margin-left: 1.25em;
+        line-height: 1.5;
+    }
+
+    pre {
+        padding: 1.25em;
+        color: var(--gray10);
+        background-color: var(--uui-secondary-darkest);
+        font-family: monospace;
+        white-space: pre-wrap;
+        word-wrap: normal;
+    }
+
+    img {
+        max-width: 100%;
+    }
+
+    figure {
+        margin: 0;
+
+        figcaption {
+            font-size: 0.9em;
+            opacity: 0.9;
+            text-align: center;
+        }
+    }
+
+    p {
+        margin: 0.5em 0;
+        line-height: 1.5;
+    }
+}
+
+@mixin typography-12() {
+    font-size: 12px;
+}
+
+@mixin typography-14() {
+    font-size: 14px;
+}
+
+@mixin typography-16() {
+    font-size: 16px;
+}

package/assets/styles/typography.scss

@@ -1,4 +1,39 @@
-@mixin overflow-ellipsis() {
-    overflow: hidden;
-    text-overflow: ellipsis;
+@forward "typography-mixins";
+@use "typography-mixins" as *;
+
+@mixin overflow-ellipsis() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+:local(.typography-header) {
+    @include typography-header();
+}
+
+:local(.typography-block) {
+    @include typography-block();
+}
+
+:local(.typography-inline) {
+    @include typography-inline();
+}
+
+:local(.typography-16) {
+    @include typography-16();
+}
+
+:local(.typography-14) {
+    @include typography-14();
+}
+
+:local(.typography-12) {
+    @include typography-12();
+}
+
+:local(.typography-promo) {
+    font-family: var(--font-regular);
+    color: var(--uui-text-primary);
+    composes: typography-header;
+    composes: typography-block;
+    composes: typography-inline;
 }

package/assets/styles/variables/widgets/badge.scss

@@ -1,51 +1,51 @@
-:global(.badge-info) {
-    --uui-badge-bg: var(--uui-info);
-    --uui-badge-bg-hover: var(--uui-info-active);
-    //--bg-color-semitransparent: #{lighten(#008ACE, 50%)};
-    //--border-color-semitransparent: #{lighten($blue, 40%)};
-    --uui-badge-caption-solid: white;
-    //--uui-caption-semitransparent: #{darken($blue, 10%)};
-    //--uui-caption-semitransparent-hover: #{darken($blue, 20%)};
-    //--uui-caption-transparent: #{$gray80};
-    --uui-badge-count-bg: white;
-    --uui-badge-count: var(--uui-text-secondary);
-}
-
-:global(.badge-success) {
-    --uui-badge-bg: var(--uui-success);
-    --uui-badge-bg-hover: var(--uui-success-active);
-    //--bg-color-semitransparent: #{$cyan-lightest};
-    //--border-color-semitransparent: #{$cyan-light};
-    --uui-badge-caption-solid: white;
-    //--uui-caption-semitransparent: #{$cyan-dark};
-    //--uui-caption-semitransparent-hover: #{$cyan-darkest};
-    //--uui-caption-transparent: #{$gray80};
-    --uui-badge-count-bg: white;
-    --uui-badge-count: var(--uui-text-secondary);
-}
-
-:global(.badge-warning) {
-    --uui-badge-bg: var(--uui-warning);
-    --uui-badge-bg-hover: var(--uui-warning-active);
-    //--bg-color-semitransparent: #{lighten($green, 50%)};
-    //--border-color-semitransparent: #{lighten($green, 40%)};
-    --uui-badge-caption-solid: white;
-    //--uui-caption-semitransparent: #{darken($green, 10%)};
-    //--uui-caption-semitransparent-hover: #{darken($green, 20%)};
-    //--uui-caption-transparent: #{$gray80};
-    --uui-badge-count-bg: white;
-    --uui-badge-count: var(--uui-text-secondary);
-}
-
-:global(.badge-error) {
-    --uui-badge-bg: var(--uui-error);
-    --uui-badge-bg-hover: var(--uui-error-active);
-    //--bg-color-semitransparent: #{lighten($amber, 40%)};
-    //--border-color-semitransparent: #{lighten($amber, 30%)};
-    --uui-badge-caption-solid: var(--uui-text-primary);
-    //--uui-caption-semitransparent: #995A00;
-    //--uui-caption-semitransparent-hover: #804000;
-    //--uui-caption-transparent: #{$gray80};
-    --uui-badge-count-bg: white;
-    --uui-badge-count: var(--uui-text-secondary);
+:global(.badge-info) {
+    --uui-badge-bg: var(--uui-info);
+    --uui-badge-bg-hover: var(--uui-info-active);
+    //--bg-color-semitransparent: #{lighten(#008ACE, 50%)};
+    //--border-color-semitransparent: #{lighten($blue, 40%)};
+    --uui-badge-caption-solid: white;
+    //--uui-caption-semitransparent: #{darken($blue, 10%)};
+    //--uui-caption-semitransparent-hover: #{darken($blue, 20%)};
+    //--uui-caption-transparent: #{$gray80};
+    --uui-badge-count-bg: white;
+    --uui-badge-count: var(--uui-text-secondary);
+}
+
+:global(.badge-success) {
+    --uui-badge-bg: var(--uui-success);
+    --uui-badge-bg-hover: var(--uui-success-active);
+    //--bg-color-semitransparent: #{$cyan-lightest};
+    //--border-color-semitransparent: #{$cyan-light};
+    --uui-badge-caption-solid: white;
+    //--uui-caption-semitransparent: #{$cyan-dark};
+    //--uui-caption-semitransparent-hover: #{$cyan-darkest};
+    //--uui-caption-transparent: #{$gray80};
+    --uui-badge-count-bg: white;
+    --uui-badge-count: var(--uui-text-secondary);
+}
+
+:global(.badge-warning) {
+    --uui-badge-bg: var(--uui-warning);
+    --uui-badge-bg-hover: var(--uui-warning-active);
+    //--bg-color-semitransparent: #{lighten($green, 50%)};
+    //--border-color-semitransparent: #{lighten($green, 40%)};
+    --uui-badge-caption-solid: white;
+    //--uui-caption-semitransparent: #{darken($green, 10%)};
+    //--uui-caption-semitransparent-hover: #{darken($green, 20%)};
+    //--uui-caption-transparent: #{$gray80};
+    --uui-badge-count-bg: white;
+    --uui-badge-count: var(--uui-text-secondary);
+}
+
+:global(.badge-error) {
+    --uui-badge-bg: var(--uui-error);
+    --uui-badge-bg-hover: var(--uui-error-active);
+    //--bg-color-semitransparent: #{lighten($amber, 40%)};
+    //--border-color-semitransparent: #{lighten($amber, 30%)};
+    --uui-badge-caption-solid: var(--uui-text-primary);
+    //--uui-caption-semitransparent: #995A00;
+    //--uui-caption-semitransparent-hover: #804000;
+    //--uui-caption-transparent: #{$gray80};
+    --uui-badge-count-bg: white;
+    --uui-badge-count: var(--uui-text-secondary);
 }

package/components/buttons/Button/Button.d.ts

@@ -1,13 +1,13 @@
-import { ButtonProps as uuiButtonProps } from '@epam/uui-components';
-import { ControlSize, ButtonMode } from '../../types';
-export type ButtonColor = 'accent' | 'primary' | 'secondary' | 'negative';
-export declare const allButtonColors: ButtonColor[];
-export interface ButtonMods {
-    size?: ControlSize | '18';
-    mode?: ButtonMode;
-    color?: ButtonColor;
-}
-export type ButtonProps = ButtonMods & uuiButtonProps;
-export declare function applyButtonMods(mods: ButtonProps): string[];
-export declare const Button: (props: uuiButtonProps & ButtonMods & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+import { ButtonProps as uuiButtonProps } from '@epam/uui-components';
+import { ControlSize, ButtonMode } from '../../types';
+export type ButtonColor = 'accent' | 'primary' | 'secondary' | 'negative';
+export declare const allButtonColors: ButtonColor[];
+export interface ButtonMods {
+    size?: ControlSize | '18';
+    mode?: ButtonMode;
+    color?: ButtonColor;
+}
+export type ButtonProps = ButtonMods & uuiButtonProps;
+export declare function applyButtonMods(mods: ButtonProps): string[];
+export declare const Button: (props: uuiButtonProps & ButtonMods & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 //# sourceMappingURL=Button.d.ts.map

package/components/buttons/Button/Button.test.d.ts

@@ -1,2 +1,2 @@
-export {};
+export {};
 //# sourceMappingURL=Button.test.d.ts.map

package/components/buttons/Button/index.d.ts

@@ -1,2 +1,2 @@
-export * from './Button';
+export * from './Button';
 //# sourceMappingURL=index.d.ts.map

package/components/buttons/IconButton.d.ts

@@ -1,10 +1,10 @@
-import { IconButtonBaseProps } from '@epam/uui-components';
-export type IconColor = 'info' | 'success' | 'warning' | 'error' | 'secondary' | 'default';
-export declare const allIconColors: IconColor[];
-export interface IconButtonMods {
-    color?: IconColor;
-}
-export interface IconButtonProps extends IconButtonBaseProps, IconButtonMods {
-}
-export declare const IconButton: (props: IconButtonProps & IconButtonMods & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+import { IconButtonBaseProps } from '@epam/uui-components';
+export type IconColor = 'info' | 'success' | 'warning' | 'error' | 'secondary' | 'default';
+export declare const allIconColors: IconColor[];
+export interface IconButtonMods {
+    color?: IconColor;
+}
+export interface IconButtonProps extends IconButtonBaseProps, IconButtonMods {
+}
+export declare const IconButton: (props: IconButtonProps & IconButtonMods & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 //# sourceMappingURL=IconButton.d.ts.map

package/components/buttons/LinkButton.d.ts

@@ -1,8 +1,8 @@
-import * as types from '../types';
-import { ButtonProps } from '@epam/uui-components';
-export interface LinkButtonMods {
-    size?: types.ControlSize | '42';
-}
-export type LinkButtonProps = LinkButtonMods & ButtonProps;
-export declare const LinkButton: (props: ButtonProps & LinkButtonMods & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+import * as types from '../types';
+import { ButtonProps } from '@epam/uui-components';
+export interface LinkButtonMods {
+    size?: types.ControlSize | '42';
+}
+export type LinkButtonProps = LinkButtonMods & ButtonProps;
+export declare const LinkButton: (props: ButtonProps & LinkButtonMods & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 //# sourceMappingURL=LinkButton.d.ts.map

package/components/buttons/TabButton.d.ts

@@ -1,8 +1,8 @@
-import { ButtonProps } from '@epam/uui-components';
-export interface TabButtonMods {
-    size?: '36' | '48' | '60';
-    withNotify?: boolean;
-}
-export type TabButtonProps = TabButtonMods & ButtonProps;
-export declare const TabButton: (props: ButtonProps & TabButtonMods & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+import { ButtonProps } from '@epam/uui-components';
+export interface TabButtonMods {
+    size?: '36' | '48' | '60';
+    withNotify?: boolean;
+}
+export type TabButtonProps = TabButtonMods & ButtonProps;
+export declare const TabButton: (props: ButtonProps & TabButtonMods & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 //# sourceMappingURL=TabButton.d.ts.map

package/components/buttons/VerticalTabButton.d.ts

@@ -1,5 +1,5 @@
-import { ButtonProps } from '@epam/uui-components';
-import { TabButtonMods } from './TabButton';
-export type VerticalTabButtonProps = ButtonProps & TabButtonMods;
-export declare const VerticalTabButton: (props: ButtonProps & TabButtonMods & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+import { ButtonProps } from '@epam/uui-components';
+import { TabButtonMods } from './TabButton';
+export type VerticalTabButtonProps = ButtonProps & TabButtonMods;
+export declare const VerticalTabButton: (props: ButtonProps & TabButtonMods & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 //# sourceMappingURL=VerticalTabButton.d.ts.map

package/components/buttons/helper.d.ts

@@ -1,3 +1,3 @@
-import { ButtonProps } from '@epam/uui-components';
-export declare function getIconClass(props: ButtonProps): string[];
+import { ButtonProps } from '@epam/uui-components';
+export declare function getIconClass(props: ButtonProps): string[];
 //# sourceMappingURL=helper.d.ts.map

package/components/buttons/index.d.ts

@@ -1,6 +1,6 @@
-export * from './Button/Button';
-export * from './IconButton';
-export * from './LinkButton';
-export * from './TabButton';
-export * from './VerticalTabButton';
+export * from './Button/Button';
+export * from './IconButton';
+export * from './LinkButton';
+export * from './TabButton';
+export * from './VerticalTabButton';
 //# sourceMappingURL=index.d.ts.map

package/components/datePickers/Calendar.d.ts

@@ -1,5 +1,5 @@
-import { CalendarProps } from '@epam/uui-components';
-import { Dayjs } from 'dayjs';
-export declare function applyDateSelectionMods(): string[];
-export declare const Calendar: (props: CalendarProps<Dayjs> & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+import { CalendarProps } from '@epam/uui-components';
+import { Dayjs } from 'dayjs';
+export declare function applyDateSelectionMods(): string[];
+export declare const Calendar: (props: CalendarProps<Dayjs> & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 //# sourceMappingURL=Calendar.d.ts.map