@hh.ru/magritte-ui-floating-button 1.0.2 → 1.1.0

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.
Files changed (8) hide show
  1. package/FloatingButton.d.ts +2 -2
  2. package/FloatingButton.js +45 -8
  3. package/FloatingButton.js.map +1 -1
  4. package/index.css +255 -185
  5. package/index.js +4 -0
  6. package/index.js.map +1 -1
  7. package/package.json +9 -7
  8. package/types.d.ts +8 -0
package/FloatingButton.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import type { PolymorphicForwardRefRenderFunc } from '@hh.ru/magritte-types';
1
+ import type { PolymorphicComponentWithRef } from '@hh.ru/magritte-types';
2
2
  import type { FloatingButtonProps } from '@hh.ru/magritte-ui-floating-button/types';
3
- export declare const FloatingButton: PolymorphicForwardRefRenderFunc<FloatingButtonProps, 'button'>;
3
+ export declare const FloatingButton: PolymorphicComponentWithRef<FloatingButtonProps, "button">;
package/FloatingButton.js CHANGED
@@ -1,17 +1,35 @@
1
1
  import './index.css';
2
2
  import { jsx, jsxs } from 'react/jsx-runtime';
3
+ import { forwardRef, useRef, useState, useLayoutEffect } from 'react';
3
4
  import { createPortal } from 'react-dom';
5
+ import { CSSTransition } from 'react-transition-group';
4
6
  import classnames from 'classnames';
5
7
  import { useServerEnv } from '@hh.ru/magritte-common-is-server-env';
8
+ import { ComponentWithBadge } from '@hh.ru/magritte-ui-badge';
9
+ import { Layer } from '@hh.ru/magritte-ui-layer';
6
10
  import { Loader } from '@hh.ru/magritte-ui-loader';
7
11
  import { Text } from '@hh.ru/magritte-ui-typography';
8
12
 
9
- var styles = {"button":"magritte-button___nL-Hn_1-0-2","loading":"magritte-loading___C0oPZ_1-0-2","postfix":"magritte-postfix___r0EZ6_1-0-2","icon":"magritte-icon___VpqJt_1-0-2","label":"magritte-label___EPgvj_1-0-2","border-radius":"magritte-border-radius___ObLLb_1-0-2","borderRadius":"magritte-border-radius___ObLLb_1-0-2","content":"magritte-content___JNpTZ_1-0-2","withLabel":"magritte-withLabel___3gZML_1-0-2","loader":"magritte-loader___EPezG_1-0-2","button_style-neutral":"magritte-button_style-neutral___bPUwu_1-0-2","buttonStyleNeutral":"magritte-button_style-neutral___bPUwu_1-0-2","button_style-inverse":"magritte-button_style-inverse___Xgf26_1-0-2","buttonStyleInverse":"magritte-button_style-inverse___Xgf26_1-0-2"};
13
+ var styles = {"wrapper":"magritte-wrapper___7m9lC_1-1-0","animation-timeout":"magritte-animation-timeout___NL8n0_1-1-0","animationTimeout":"magritte-animation-timeout___NL8n0_1-1-0","button":"magritte-button___nL-Hn_1-1-0","loading":"magritte-loading___C0oPZ_1-1-0","right":"magritte-right___3n0Rz_1-1-0","content":"magritte-content___JNpTZ_1-1-0","left":"magritte-left___GnzU7_1-1-0","center":"magritte-center___MdA40_1-1-0","textless":"magritte-textless___IbYgp_1-1-0","postfix":"magritte-postfix___r0EZ6_1-1-0","label":"magritte-label___EPgvj_1-1-0","withPostfix":"magritte-withPostfix___PmQAz_1-1-0","hideLabel":"magritte-hideLabel___K79XM_1-1-0","withLabelOnHover":"magritte-withLabelOnHover___1oktd_1-1-0","icon":"magritte-icon___VpqJt_1-1-0","border-radius":"magritte-border-radius___ObLLb_1-1-0","borderRadius":"magritte-border-radius___ObLLb_1-1-0","loader":"magritte-loader___EPezG_1-1-0","enter-animation":"magritte-enter-animation___2sPz3_1-1-0","enterAnimation":"magritte-enter-animation___2sPz3_1-1-0","enter-animation-active":"magritte-enter-animation-active___Lq9eq_1-1-0","enterAnimationActive":"magritte-enter-animation-active___Lq9eq_1-1-0","exit-animation":"magritte-exit-animation___h2-7a_1-1-0","exitAnimation":"magritte-exit-animation___h2-7a_1-1-0","exit-animation-active":"magritte-exit-animation-active___w0F1a_1-1-0","exitAnimationActive":"magritte-exit-animation-active___w0F1a_1-1-0","button_style-neutral":"magritte-button_style-neutral___bPUwu_1-1-0","buttonStyleNeutral":"magritte-button_style-neutral___bPUwu_1-1-0","button_style-inverse":"magritte-button_style-inverse___Xgf26_1-1-0","buttonStyleInverse":"magritte-button_style-inverse___Xgf26_1-1-0"};
10
14
 
11
- const FloatingButton = (props) => {
12
- const { Element = 'button', style = 'neutral', disabled, borderRadius, icon: IconComponent, postfix, loading, host, children, className, inlineStyle, } = props;
15
+ const ALLOWED_BADGE_SIZES = ['small'];
16
+ const FloatingButtonComponent = (props, ref) => {
17
+ const { Element = 'button', style = 'neutral', disabled, borderRadius, icon: IconComponent, postfix, loading, host, children, className, inlineStyle, visible, labelOnHover, hideLabel, badge, position = 'right', } = props;
13
18
  let additionalAttributes;
14
19
  const isServerEnv = useServerEnv();
20
+ const wrapperRef = useRef(null);
21
+ const [animationTimeout, setAnimationTimeout] = useState(0);
22
+ useLayoutEffect(() => {
23
+ const animationTimeoutElement = document.createElement('div');
24
+ animationTimeoutElement.classList.add(styles.animationTimeout);
25
+ document.body.appendChild(animationTimeoutElement);
26
+ const style = window.getComputedStyle(animationTimeoutElement);
27
+ const animationTimeout = parseInt(style.getPropertyValue(`--animation-duration`), 10);
28
+ if (Number.isInteger(animationTimeout)) {
29
+ setAnimationTimeout(animationTimeout);
30
+ }
31
+ document.body.removeChild(animationTimeoutElement);
32
+ }, []);
15
33
  if (Element === 'button') {
16
34
  additionalAttributes = {
17
35
  type: 'button',
@@ -24,15 +42,34 @@ const FloatingButton = (props) => {
24
42
  'aria-disabled': disabled,
25
43
  };
26
44
  }
45
+ additionalAttributes.ref = ref;
27
46
  if (isServerEnv) {
28
47
  return null;
29
48
  }
30
- return createPortal(jsx(Element, { ...additionalAttributes, disabled: !!disabled, className: classnames(styles.button, styles[`button_style-${style}`], {
31
- [styles.borderRadius]: borderRadius,
32
- [styles.withLabel]: !!children,
33
- [styles.loading]: loading,
34
- }, className), style: inlineStyle, children: jsxs("span", { className: styles.content, children: [IconComponent && (jsx("span", { className: styles.icon, children: jsx(IconComponent, {}) })), children && (jsx("span", { className: styles.label, children: jsx(Text, { typography: 'subtitle-1-semibold', children: children }) })), postfix && (jsx("span", { className: styles.postfix, children: jsx(Text, { typography: 'subtitle-1-semibold', children: postfix }) })), loading && (jsx("span", { className: styles.loader, children: jsx(Loader, { size: 24 }) }))] }) }), host?.current || document.body);
49
+ let button = (jsx(Element, { ...additionalAttributes, disabled: !!disabled, className: classnames(styles.button, styles[`button_style-${style}`], {
50
+ [styles.borderRadius]: !!borderRadius,
51
+ [styles.loading]: !!loading,
52
+ [styles.withLabelOnHover]: !!labelOnHover,
53
+ [styles.hideLabel]: !!hideLabel,
54
+ [styles.withPostfix]: !!postfix,
55
+ [styles.textless]: !postfix && (!children || !!hideLabel),
56
+ }, className), children: jsxs("span", { className: styles.content, children: [IconComponent && (jsx("span", { className: styles.icon, children: jsx(IconComponent, {}) })), children && (jsx("span", { className: styles.label, children: jsx(Text, { typography: 'subtitle-1-semibold', children: children }) })), postfix && (jsx("span", { className: styles.postfix, children: jsx(Text, { typography: 'subtitle-1-semibold', children: postfix }) })), loading && (jsx("span", { className: styles.loader, children: jsx(Loader, { size: 24 }) }))] }) }));
57
+ if (badge && !disabled) {
58
+ button = (jsx(ComponentWithBadge, { allowedSizes: ALLOWED_BADGE_SIZES, badge: badge, offset: 4, noClip: true, children: button }));
59
+ }
60
+ if (isServerEnv) {
61
+ return null;
62
+ }
63
+ return createPortal(jsx(CSSTransition, { appear: true, in: !!visible && !isServerEnv, nodeRef: wrapperRef, classNames: {
64
+ appear: styles.enterAnimation,
65
+ appearActive: styles.enterAnimationActive,
66
+ enter: styles.enterAnimation,
67
+ enterActive: styles.enterAnimationActive,
68
+ exit: styles.exitAnimation,
69
+ exitActive: styles.exitAnimationActive,
70
+ }, timeout: animationTimeout, unmountOnExit: true, children: jsx(Layer, { layer: "floating-button", children: jsx("div", { className: classnames(styles.wrapper, styles[`${position}`]), ref: wrapperRef, style: inlineStyle, children: button }) }) }), host?.current || document.body);
35
71
  };
72
+ const FloatingButton = forwardRef(FloatingButtonComponent);
36
73
 
37
74
  export { FloatingButton };
38
75
  //# sourceMappingURL=FloatingButton.js.map
package/FloatingButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FloatingButton.js","sources":["../src/FloatingButton.tsx"],"sourcesContent":["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport classnames from 'classnames';\n\nimport { useServerEnv } from '@hh.ru/magritte-common-is-server-env';\nimport type { PolymorphicForwardRefRenderFunc } from '@hh.ru/magritte-types';\nimport type { FloatingButtonProps } from '@hh.ru/magritte-ui-floating-button/types';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './floating-button.less';\n\nexport const FloatingButton: PolymorphicForwardRefRenderFunc<FloatingButtonProps, 'button'> = (props) => {\n const {\n Element = 'button',\n style = 'neutral',\n disabled,\n borderRadius,\n icon: IconComponent,\n postfix,\n loading,\n host,\n children,\n className,\n inlineStyle,\n } = props;\n let additionalAttributes: Record<string, unknown>;\n const isServerEnv = useServerEnv();\n\n if (Element === 'button') {\n additionalAttributes = {\n type: 'button',\n };\n } else {\n additionalAttributes = {\n role: 'button',\n tabIndex: disabled ? -1 : 0,\n 'aria-disabled': disabled,\n };\n }\n\n if (isServerEnv) {\n return null;\n }\n\n return createPortal(\n <Element\n {...additionalAttributes}\n disabled={!!disabled}\n className={classnames(\n styles.button,\n styles[`button_style-${style}`],\n {\n [styles.borderRadius]: borderRadius,\n [styles.withLabel]: !!children,\n [styles.loading]: loading,\n },\n className\n )}\n style={inlineStyle}\n >\n <span className={styles.content}>\n {IconComponent && (\n <span className={styles.icon}>\n <IconComponent />\n </span>\n )}\n {children && (\n <span className={styles.label}>\n <Text typography={'subtitle-1-semibold'}>{children}</Text>\n </span>\n )}\n {postfix && (\n <span className={styles.postfix}>\n <Text typography={'subtitle-1-semibold'}>{postfix}</Text>\n </span>\n )}\n {loading && (\n <span className={styles.loader}>\n <Loader size={24} />\n </span>\n )}\n </span>\n </Element>,\n host?.current || document.body\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;AAYa,MAAA,cAAc,GAAmE,CAAC,KAAK,KAAI;AACpG,IAAA,MAAM,EACF,OAAO,GAAG,QAAQ,EAClB,KAAK,GAAG,SAAS,EACjB,QAAQ,EACR,YAAY,EACZ,IAAI,EAAE,aAAa,EACnB,OAAO,EACP,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,GACd,GAAG,KAAK,CAAC;AACV,IAAA,IAAI,oBAA6C,CAAC;AAClD,IAAA,MAAM,WAAW,GAAG,YAAY,EAAE,CAAC;AAEnC,IAAA,IAAI,OAAO,KAAK,QAAQ,EAAE;AACtB,QAAA,oBAAoB,GAAG;AACnB,YAAA,IAAI,EAAE,QAAQ;SACjB,CAAC;KACL;SAAM;AACH,QAAA,oBAAoB,GAAG;AACnB,YAAA,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC;AAC3B,YAAA,eAAe,EAAE,QAAQ;SAC5B,CAAC;KACL;IAED,IAAI,WAAW,EAAE;AACb,QAAA,OAAO,IAAI,CAAC;KACf;IAED,OAAO,YAAY,CACfA,GAAA,CAAC,OAAO,EAAA,EAAA,GACA,oBAAoB,EACxB,QAAQ,EAAE,CAAC,CAAC,QAAQ,EACpB,SAAS,EAAE,UAAU,CACjB,MAAM,CAAC,MAAM,EACb,MAAM,CAAC,CAAgB,aAAA,EAAA,KAAK,CAAE,CAAA,CAAC,EAC/B;AACI,YAAA,CAAC,MAAM,CAAC,YAAY,GAAG,YAAY;AACnC,YAAA,CAAC,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC,QAAQ;AAC9B,YAAA,CAAC,MAAM,CAAC,OAAO,GAAG,OAAO;SAC5B,EACD,SAAS,CACZ,EACD,KAAK,EAAE,WAAW,EAAA,QAAA,EAElBC,IAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,QAAA,EAAA,CAC1B,aAAa,KACVD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,IAAI,EACxB,QAAA,EAAAA,GAAA,CAAC,aAAa,EAAG,EAAA,CAAA,EAAA,CACd,CACV,EACA,QAAQ,KACLA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,KAAK,EACzB,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAA,EAAC,UAAU,EAAE,qBAAqB,EAAG,QAAA,EAAA,QAAQ,EAAQ,CAAA,EAAA,CACvD,CACV,EACA,OAAO,KACJA,cAAM,SAAS,EAAE,MAAM,CAAC,OAAO,EAC3B,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAA,EAAC,UAAU,EAAE,qBAAqB,EAAG,QAAA,EAAA,OAAO,EAAQ,CAAA,EAAA,CACtD,CACV,EACA,OAAO,KACJA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,MAAM,EAC1B,QAAA,EAAAA,GAAA,CAAC,MAAM,EAAC,EAAA,IAAI,EAAE,EAAE,EAAI,CAAA,EAAA,CACjB,CACV,CACE,EAAA,CAAA,EAAA,CACD,EACV,IAAI,EAAE,OAAO,IAAI,QAAQ,CAAC,IAAI,CACjC,CAAC;AACN;;;;"}
1
+ {"version":3,"file":"FloatingButton.js","sources":["../src/FloatingButton.tsx"],"sourcesContent":["import React, { forwardRef, useLayoutEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\nimport classnames from 'classnames';\n\nimport { useServerEnv } from '@hh.ru/magritte-common-is-server-env';\nimport type { PolymorphicComponentWithRef, PolymorphicForwardRefRenderFunc } from '@hh.ru/magritte-types';\nimport { BadgeSize, ComponentWithBadge } from '@hh.ru/magritte-ui-badge';\nimport type { FloatingButtonProps } from '@hh.ru/magritte-ui-floating-button/types';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './floating-button.less';\n\nconst ALLOWED_BADGE_SIZES: BadgeSize[] = ['small'];\n\nconst FloatingButtonComponent: PolymorphicForwardRefRenderFunc<FloatingButtonProps, 'button'> = (props, ref) => {\n const {\n Element = 'button',\n style = 'neutral',\n disabled,\n borderRadius,\n icon: IconComponent,\n postfix,\n loading,\n host,\n children,\n className,\n inlineStyle,\n visible,\n labelOnHover,\n hideLabel,\n badge,\n position = 'right',\n } = props;\n\n let additionalAttributes: Record<string, unknown>;\n const isServerEnv = useServerEnv();\n const wrapperRef = useRef<HTMLDivElement>(null);\n const [animationTimeout, setAnimationTimeout] = useState(0);\n\n useLayoutEffect(() => {\n const animationTimeoutElement = document.createElement('div');\n animationTimeoutElement.classList.add(styles.animationTimeout);\n document.body.appendChild(animationTimeoutElement);\n const style = window.getComputedStyle(animationTimeoutElement);\n const animationTimeout = parseInt(style.getPropertyValue(`--animation-duration`), 10);\n if (Number.isInteger(animationTimeout)) {\n setAnimationTimeout(animationTimeout);\n }\n document.body.removeChild(animationTimeoutElement);\n }, []);\n\n if (Element === 'button') {\n additionalAttributes = {\n type: 'button',\n };\n } else {\n additionalAttributes = {\n role: 'button',\n tabIndex: disabled ? -1 : 0,\n 'aria-disabled': disabled,\n };\n }\n additionalAttributes.ref = ref;\n\n if (isServerEnv) {\n return null;\n }\n let button = (\n <Element\n {...additionalAttributes}\n disabled={!!disabled}\n className={classnames(\n styles.button,\n styles[`button_style-${style}`],\n {\n [styles.borderRadius]: !!borderRadius,\n [styles.loading]: !!loading,\n [styles.withLabelOnHover]: !!labelOnHover,\n [styles.hideLabel]: !!hideLabel,\n [styles.withPostfix]: !!postfix,\n [styles.textless]: !postfix && (!children || !!hideLabel),\n },\n className\n )}\n >\n <span className={styles.content}>\n {IconComponent && (\n <span className={styles.icon}>\n <IconComponent />\n </span>\n )}\n\n {children && (\n <span className={styles.label}>\n <Text typography={'subtitle-1-semibold'}>{children}</Text>\n </span>\n )}\n {postfix && (\n <span className={styles.postfix}>\n <Text typography={'subtitle-1-semibold'}>{postfix}</Text>\n </span>\n )}\n\n {loading && (\n <span className={styles.loader}>\n <Loader size={24} />\n </span>\n )}\n </span>\n </Element>\n );\n\n if (badge && !disabled) {\n button = (\n <ComponentWithBadge allowedSizes={ALLOWED_BADGE_SIZES} badge={badge} offset={4} noClip>\n {button}\n </ComponentWithBadge>\n );\n }\n\n if (isServerEnv) {\n return null;\n }\n\n return createPortal(\n <CSSTransition\n appear\n in={!!visible && !isServerEnv}\n nodeRef={wrapperRef}\n classNames={{\n appear: styles.enterAnimation,\n appearActive: styles.enterAnimationActive,\n enter: styles.enterAnimation,\n enterActive: styles.enterAnimationActive,\n exit: styles.exitAnimation,\n exitActive: styles.exitAnimationActive,\n }}\n timeout={animationTimeout}\n unmountOnExit\n >\n <Layer layer=\"floating-button\">\n <div className={classnames(styles.wrapper, styles[`${position}`])} ref={wrapperRef} style={inlineStyle}>\n {button}\n </div>\n </Layer>\n </CSSTransition>,\n host?.current || document.body\n );\n};\n\nexport const FloatingButton = forwardRef(FloatingButtonComponent) as PolymorphicComponentWithRef<\n FloatingButtonProps,\n 'button'\n>;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
package/index.css CHANGED
@@ -1,174 +1,226 @@
1
1
  :root{
2
- --magritte-color-component-button-background-neutral-v23-2-1:#000000;
3
- --magritte-color-component-button-background-inverse-v23-2-1:#ffffff;
4
- --magritte-color-component-button-background-state-neutral-disabled-v23-2-1:#DCE3EB;
5
- --magritte-color-component-button-background-state-neutral-hovered-v23-2-1:#343c43;
6
- --magritte-color-component-button-background-state-neutral-pressed-v23-2-1:#000000;
7
- --magritte-color-component-button-background-state-neutral-focused-v23-2-1:#000000;
8
- --magritte-color-component-button-background-state-inverse-hovered-v23-2-1:#EEF1F7;
9
- --magritte-color-component-button-background-state-inverse-pressed-v23-2-1:#ffffff;
10
- --magritte-color-component-button-background-state-inverse-focused-v23-2-1:#ffffff;
11
- --magritte-color-component-button-background-state-inverse-disabled-v23-2-1:#ffffff;
12
- --magritte-color-component-button-text-neutral-v23-2-1:#ffffff;
13
- --magritte-color-component-button-text-inverse-v23-2-1:#0d1115;
14
- --magritte-color-component-button-icon-neutral-v23-2-1:#ffffff;
15
- --magritte-color-component-button-icon-inverse-v23-2-1:#0d1115;
16
- --magritte-color-component-button-loader-icon-neutral-v23-2-1:#ffffff;
17
- --magritte-color-component-button-loader-icon-inverse-v23-2-1:#000000;
18
- --magritte-color-component-button-text-state-neutral-disabled-v23-2-1:#8293a2;
19
- --magritte-color-component-button-text-state-inverse-disabled-v23-2-1:#8da0b0;
20
- --magritte-color-component-button-icon-state-neutral-disabled-v23-2-1:#8293a2;
21
- --magritte-color-component-button-icon-state-inverse-disabled-v23-2-1:#8da0b0;
22
- --magritte-color-component-button-stroke-state-neutral-focused-accessible-v23-2-1:#0070ff7a;
23
- --magritte-color-component-button-stroke-state-inverse-focused-accessible-v23-2-1:#a4c9fe7a;
24
- --magritte-color-component-button-postfix-text-neutral-v23-2-1:#AABBCA;
25
- --magritte-color-component-button-postfix-text-inverse-v23-2-1:#0d1115;
26
- --magritte-color-component-button-postfix-text-state-neutral-disabled-v23-2-1:#AABBCA;
27
- --magritte-color-component-button-postfix-text-state-inverse-disabled-v23-2-1:#96aabb;
28
- --magritte-shadow-level-2-color-v23-2-1:#7090b03d;
29
- --magritte-shadow-level-2-x-v23-2-1:0px;
30
- --magritte-shadow-level-2-y-v23-2-1:8px;
31
- --magritte-shadow-level-2-blur-v23-2-1:16px;
32
- --magritte-shadow-level-2-spread-v23-2-1:0px;
33
- --magritte-shadow-level-1-color-v23-2-1:#7090b029;
34
- --magritte-shadow-level-1-x-v23-2-1:0px;
35
- --magritte-shadow-level-1-y-v23-2-1:4px;
36
- --magritte-shadow-level-1-blur-v23-2-1:12px;
37
- --magritte-shadow-level-1-spread-v23-2-1:0px;
2
+ --magritte-color-component-button-background-neutral-v23-2-2:#000000;
3
+ --magritte-color-component-button-background-inverse-v23-2-2:#ffffff;
4
+ --magritte-color-component-button-background-state-neutral-disabled-v23-2-2:#DCE3EB;
5
+ --magritte-color-component-button-background-state-neutral-hovered-v23-2-2:#343c43;
6
+ --magritte-color-component-button-background-state-neutral-pressed-v23-2-2:#000000;
7
+ --magritte-color-component-button-background-state-neutral-focused-v23-2-2:#000000;
8
+ --magritte-color-component-button-background-state-inverse-hovered-v23-2-2:#EEF1F7;
9
+ --magritte-color-component-button-background-state-inverse-pressed-v23-2-2:#ffffff;
10
+ --magritte-color-component-button-background-state-inverse-focused-v23-2-2:#ffffff;
11
+ --magritte-color-component-button-background-state-inverse-disabled-v23-2-2:#ffffff;
12
+ --magritte-color-component-button-text-neutral-v23-2-2:#ffffff;
13
+ --magritte-color-component-button-text-inverse-v23-2-2:#0d1115;
14
+ --magritte-color-component-button-icon-neutral-v23-2-2:#ffffff;
15
+ --magritte-color-component-button-icon-inverse-v23-2-2:#0d1115;
16
+ --magritte-color-component-button-loader-icon-neutral-v23-2-2:#ffffff;
17
+ --magritte-color-component-button-loader-icon-inverse-v23-2-2:#000000;
18
+ --magritte-color-component-button-text-state-neutral-disabled-v23-2-2:#8293a2;
19
+ --magritte-color-component-button-text-state-inverse-disabled-v23-2-2:#8da0b0;
20
+ --magritte-color-component-button-icon-state-neutral-disabled-v23-2-2:#8293a2;
21
+ --magritte-color-component-button-icon-state-inverse-disabled-v23-2-2:#8da0b0;
22
+ --magritte-color-component-button-stroke-state-neutral-focused-accessible-v23-2-2:#0070ff7a;
23
+ --magritte-color-component-button-stroke-state-inverse-focused-accessible-v23-2-2:#a4c9fe7a;
24
+ --magritte-color-component-button-postfix-text-neutral-v23-2-2:#AABBCA;
25
+ --magritte-color-component-button-postfix-text-inverse-v23-2-2:#0d1115;
26
+ --magritte-color-component-button-postfix-text-state-neutral-disabled-v23-2-2:#AABBCA;
27
+ --magritte-color-component-button-postfix-text-state-inverse-disabled-v23-2-2:#96aabb;
28
+ --magritte-shadow-level-2-color-v23-2-2:#7090b03d;
29
+ --magritte-shadow-level-2-x-v23-2-2:0px;
30
+ --magritte-shadow-level-2-y-v23-2-2:8px;
31
+ --magritte-shadow-level-2-blur-v23-2-2:16px;
32
+ --magritte-shadow-level-2-spread-v23-2-2:0px;
33
+ --magritte-shadow-level-1-color-v23-2-2:#7090b029;
34
+ --magritte-shadow-level-1-x-v23-2-2:0px;
35
+ --magritte-shadow-level-1-y-v23-2-2:4px;
36
+ --magritte-shadow-level-1-blur-v23-2-2:12px;
37
+ --magritte-shadow-level-1-spread-v23-2-2:0px;
38
38
  }
39
39
 
40
40
  :root{
41
- --magritte-semantic-border-width-tab-focused-v23-2-1:4px;
41
+ --magritte-semantic-animation-time-s-duration-v23-2-2:200ms;
42
+ --magritte-semantic-animation-ease-base-timing-function-v23-2-2:cubic-bezier(0.4, 0.24, 0, 1);
42
43
  }
43
44
 
44
45
  .magritte-night-theme{
45
- --magritte-color-component-button-background-neutral-v23-2-1:#ffffff;
46
- --magritte-color-component-button-background-inverse-v23-2-1:#303030;
47
- --magritte-color-component-button-background-state-neutral-disabled-v23-2-1:#303030;
48
- --magritte-color-component-button-background-state-inverse-disabled-v23-2-1:#262626;
49
- --magritte-color-component-button-background-state-neutral-hovered-v23-2-1:#F1F1F1;
50
- --magritte-color-component-button-background-state-neutral-pressed-v23-2-1:#ffffff;
51
- --magritte-color-component-button-background-state-neutral-focused-v23-2-1:#ffffff;
52
- --magritte-color-component-button-background-state-inverse-hovered-v23-2-1:#3B3B3B;
53
- --magritte-color-component-button-background-state-inverse-pressed-v23-2-1:#303030;
54
- --magritte-color-component-button-background-state-inverse-focused-v23-2-1:#303030;
55
- --magritte-color-component-button-text-neutral-v23-2-1:#000000;
56
- --magritte-color-component-button-text-inverse-v23-2-1:#ffffff;
57
- --magritte-color-component-button-text-state-neutral-disabled-v23-2-1:#848484;
58
- --magritte-color-component-button-text-state-inverse-disabled-v23-2-1:#848484;
59
- --magritte-color-component-button-icon-state-neutral-disabled-v23-2-1:#848484;
60
- --magritte-color-component-button-icon-state-inverse-disabled-v23-2-1:#848484;
61
- --magritte-color-component-button-stroke-state-neutral-focused-accessible-v23-2-1:#0070ff7a;
62
- --magritte-color-component-button-stroke-state-inverse-focused-accessible-v23-2-1:#a4c9fe7a;
63
- --magritte-color-component-button-icon-neutral-v23-2-1:#000000;
64
- --magritte-color-component-button-icon-inverse-v23-2-1:#ffffff;
65
- --magritte-color-component-button-loader-icon-neutral-v23-2-1:#000000;
66
- --magritte-color-component-button-loader-icon-inverse-v23-2-1:#ffffff;
67
- --magritte-color-component-button-postfix-text-neutral-v23-2-1:#ABABAB;
68
- --magritte-color-component-button-postfix-text-inverse-v23-2-1:#ABABAB;
69
- --magritte-color-component-button-postfix-text-state-neutral-disabled-v23-2-1:#535353;
70
- --magritte-color-component-button-postfix-text-state-inverse-disabled-v23-2-1:#535353;
71
- --magritte-shadow-level-2-color-v23-2-1:#0000003d;
72
- --magritte-shadow-level-2-x-v23-2-1:0px;
73
- --magritte-shadow-level-2-y-v23-2-1:8px;
74
- --magritte-shadow-level-2-blur-v23-2-1:16px;
75
- --magritte-shadow-level-2-spread-v23-2-1:0px;
76
- --magritte-shadow-level-1-color-v23-2-1:#00000029;
77
- --magritte-shadow-level-1-x-v23-2-1:0px;
78
- --magritte-shadow-level-1-y-v23-2-1:4px;
79
- --magritte-shadow-level-1-blur-v23-2-1:12px;
80
- --magritte-shadow-level-1-spread-v23-2-1:0px;
46
+ --magritte-color-component-button-background-neutral-v23-2-2:#ffffff;
47
+ --magritte-color-component-button-background-inverse-v23-2-2:#303030;
48
+ --magritte-color-component-button-background-state-neutral-disabled-v23-2-2:#303030;
49
+ --magritte-color-component-button-background-state-inverse-disabled-v23-2-2:#262626;
50
+ --magritte-color-component-button-background-state-neutral-hovered-v23-2-2:#F1F1F1;
51
+ --magritte-color-component-button-background-state-neutral-pressed-v23-2-2:#ffffff;
52
+ --magritte-color-component-button-background-state-neutral-focused-v23-2-2:#ffffff;
53
+ --magritte-color-component-button-background-state-inverse-hovered-v23-2-2:#3B3B3B;
54
+ --magritte-color-component-button-background-state-inverse-pressed-v23-2-2:#303030;
55
+ --magritte-color-component-button-background-state-inverse-focused-v23-2-2:#303030;
56
+ --magritte-color-component-button-text-neutral-v23-2-2:#000000;
57
+ --magritte-color-component-button-text-inverse-v23-2-2:#ffffff;
58
+ --magritte-color-component-button-text-state-neutral-disabled-v23-2-2:#848484;
59
+ --magritte-color-component-button-text-state-inverse-disabled-v23-2-2:#848484;
60
+ --magritte-color-component-button-icon-state-neutral-disabled-v23-2-2:#848484;
61
+ --magritte-color-component-button-icon-state-inverse-disabled-v23-2-2:#848484;
62
+ --magritte-color-component-button-icon-neutral-v23-2-2:#000000;
63
+ --magritte-color-component-button-icon-inverse-v23-2-2:#ffffff;
64
+ --magritte-color-component-button-loader-icon-neutral-v23-2-2:#000000;
65
+ --magritte-color-component-button-loader-icon-inverse-v23-2-2:#ffffff;
66
+ --magritte-color-component-button-postfix-text-neutral-v23-2-2:#ABABAB;
67
+ --magritte-color-component-button-postfix-text-inverse-v23-2-2:#ABABAB;
68
+ --magritte-color-component-button-postfix-text-state-neutral-disabled-v23-2-2:#535353;
69
+ --magritte-color-component-button-postfix-text-state-inverse-disabled-v23-2-2:#535353;
70
+ --magritte-shadow-level-2-color-v23-2-2:#0000003d;
71
+ --magritte-shadow-level-1-color-v23-2-2:#00000029;
72
+ }
73
+ .magritte-wrapper___7m9lC_1-1-0{
74
+ display:inline-block;
75
+ position:fixed;
81
76
  }
82
-
83
- .magritte-zp-day-theme{
84
- --magritte-color-component-button-background-neutral-v23-2-1:#000000;
85
- --magritte-color-component-button-background-inverse-v23-2-1:#ffffff;
86
- --magritte-color-component-button-background-state-neutral-disabled-v23-2-1:#DCE3EB;
87
- --magritte-color-component-button-background-state-inverse-disabled-v23-2-1:#ffffff;
88
- --magritte-color-component-button-background-state-neutral-hovered-v23-2-1:#343c43;
89
- --magritte-color-component-button-background-state-neutral-pressed-v23-2-1:#000000;
90
- --magritte-color-component-button-background-state-neutral-focused-v23-2-1:#000000;
91
- --magritte-color-component-button-background-state-inverse-hovered-v23-2-1:#EEF1F7;
92
- --magritte-color-component-button-background-state-inverse-pressed-v23-2-1:#ffffff;
93
- --magritte-color-component-button-background-state-inverse-focused-v23-2-1:#ffffff;
94
- --magritte-color-component-button-text-neutral-v23-2-1:#ffffff;
95
- --magritte-color-component-button-text-inverse-v23-2-1:#0d1115;
96
- --magritte-color-component-button-icon-neutral-v23-2-1:#ffffff;
97
- --magritte-color-component-button-icon-inverse-v23-2-1:#0d1115;
98
- --magritte-color-component-button-loader-icon-neutral-v23-2-1:#ffffff;
99
- --magritte-color-component-button-loader-icon-inverse-v23-2-1:#000000;
100
- --magritte-color-component-button-text-state-neutral-disabled-v23-2-1:#8293a2;
101
- --magritte-color-component-button-text-state-inverse-disabled-v23-2-1:#8da0b0;
102
- --magritte-color-component-button-icon-state-neutral-disabled-v23-2-1:#8293a2;
103
- --magritte-color-component-button-icon-state-inverse-disabled-v23-2-1:#8da0b0;
104
- --magritte-color-component-button-stroke-state-neutral-focused-accessible-v23-2-1:#0070ff7a;
105
- --magritte-color-component-button-stroke-state-inverse-focused-accessible-v23-2-1:#a4c9fe7a;
106
- --magritte-color-component-button-postfix-text-neutral-v23-2-1:#AABBCA;
107
- --magritte-color-component-button-postfix-text-inverse-v23-2-1:#0d1115;
108
- --magritte-color-component-button-postfix-text-state-neutral-disabled-v23-2-1:#AABBCA;
109
- --magritte-color-component-button-postfix-text-state-inverse-disabled-v23-2-1:#96aabb;
110
- --magritte-shadow-level-2-color-v23-2-1:#7090b03d;
111
- --magritte-shadow-level-2-x-v23-2-1:0px;
112
- --magritte-shadow-level-2-y-v23-2-1:8px;
113
- --magritte-shadow-level-2-blur-v23-2-1:16px;
114
- --magritte-shadow-level-2-spread-v23-2-1:0px;
115
- --magritte-shadow-level-1-color-v23-2-1:#7090b029;
116
- --magritte-shadow-level-1-x-v23-2-1:0px;
117
- --magritte-shadow-level-1-y-v23-2-1:4px;
118
- --magritte-shadow-level-1-blur-v23-2-1:12px;
119
- --magritte-shadow-level-1-spread-v23-2-1:0px;
120
- }
121
- .magritte-button___nL-Hn_1-0-2{
77
+ .magritte-wrapper___7m9lC_1-1-0,
78
+ .magritte-animation-timeout___NL8n0_1-1-0{
79
+ --animation-duration:0;
80
+ }
81
+ @media (prefers-reduced-motion: no-preference){
82
+ .magritte-wrapper___7m9lC_1-1-0,
83
+ .magritte-animation-timeout___NL8n0_1-1-0{
84
+ --animation-duration:var(--magritte-semantic-animation-time-s-duration-v23-2-2);
85
+ }
86
+ }
87
+ .magritte-button___nL-Hn_1-1-0{
122
88
  display:inline-block;
123
- padding:12px;
89
+ padding:12px 16px;
124
90
  border-radius:24px;
125
- position:fixed;
91
+ }
92
+ .magritte-button___nL-Hn_1-1-0:disabled,
93
+ .magritte-button___nL-Hn_1-1-0.magritte-loading___C0oPZ_1-1-0{
94
+ pointer-events:none;
95
+ cursor:not-allowed;
96
+ }
97
+ .magritte-right___3n0Rz_1-1-0{
126
98
  right:16px;
127
99
  bottom:20px;
128
100
  }
129
101
  @media (min-width: 1020px){
130
- body.magritte-old-layout .magritte-button___nL-Hn_1-0-2{
102
+ body.magritte-old-layout .magritte-right___3n0Rz_1-1-0{
131
103
  right:36px;
132
104
  bottom:32px;
133
105
  }
134
106
  }
135
107
  @media (min-width: 1024px){
136
- body:not(.magritte-old-layout) .magritte-button___nL-Hn_1-0-2{
108
+ body:not(.magritte-old-layout) .magritte-right___3n0Rz_1-1-0{
137
109
  right:36px;
138
110
  bottom:32px;
139
111
  }
140
112
  }
141
- .magritte-button___nL-Hn_1-0-2:disabled,
142
- .magritte-button___nL-Hn_1-0-2.magritte-loading___C0oPZ_1-0-2{
143
- pointer-events:none;
144
- cursor:not-allowed;
113
+ .magritte-right___3n0Rz_1-1-0 .magritte-content___JNpTZ_1-1-0{
114
+ justify-content:end;
145
115
  }
146
- .magritte-loading___C0oPZ_1-0-2 .magritte-postfix___r0EZ6_1-0-2,
147
- .magritte-loading___C0oPZ_1-0-2 .magritte-icon___VpqJt_1-0-2,
148
- .magritte-loading___C0oPZ_1-0-2 .magritte-label___EPgvj_1-0-2{
149
- visibility:hidden;
116
+ .magritte-left___GnzU7_1-1-0{
117
+ left:16px;
118
+ bottom:20px;
150
119
  }
151
- .magritte-border-radius___ObLLb_1-0-2{
152
- border-radius:12px;
120
+ @media (min-width: 1020px){
121
+ body.magritte-old-layout .magritte-left___GnzU7_1-1-0{
122
+ left:36px;
123
+ bottom:32px;
124
+ }
153
125
  }
154
- .magritte-content___JNpTZ_1-0-2{
155
- display:flex;
156
- position:relative;
126
+ @media (min-width: 1024px){
127
+ body:not(.magritte-old-layout) .magritte-left___GnzU7_1-1-0{
128
+ left:36px;
129
+ bottom:32px;
130
+ }
157
131
  }
158
- .magritte-withLabel___3gZML_1-0-2 .magritte-icon___VpqJt_1-0-2{
159
- padding-left:4px;
132
+ .magritte-left___GnzU7_1-1-0 .magritte-content___JNpTZ_1-1-0{
133
+ justify-content:start;
160
134
  }
161
- .magritte-label___EPgvj_1-0-2{
162
- padding:1px 4px;
135
+ .magritte-center___MdA40_1-1-0{
136
+ left:50%;
137
+ bottom:20px;
138
+ transform:translateX(-50%);
163
139
  }
164
- .magritte-postfix___r0EZ6_1-0-2{
165
- padding:1px 4px;
140
+ @media (min-width: 1020px){
141
+ body.magritte-old-layout .magritte-center___MdA40_1-1-0{
142
+ bottom:32px;
143
+ }
166
144
  }
167
- .magritte-icon___VpqJt_1-0-2 + .magritte-label___EPgvj_1-0-2,
168
- .magritte-icon___VpqJt_1-0-2 + .magritte-postfix___r0EZ6_1-0-2{
145
+ @media (min-width: 1024px){
146
+ body:not(.magritte-old-layout) .magritte-center___MdA40_1-1-0{
147
+ bottom:32px;
148
+ }
149
+ }
150
+ .magritte-center___MdA40_1-1-0 .magritte-content___JNpTZ_1-1-0{
151
+ justify-content:space-between;
152
+ }
153
+ .magritte-textless___IbYgp_1-1-0{
154
+ padding:12px;
155
+ }
156
+ .magritte-postfix___r0EZ6_1-1-0{
157
+ margin-left:8px;
158
+ }
159
+ .magritte-label___EPgvj_1-1-0{
160
+ text-align:left;
161
+ padding-left:8px;
162
+ overflow:hidden;
163
+ transition-property:padding;
164
+ transition-duration:var(--animation-duration);
165
+ transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v23-2-2);
166
+ }
167
+ .magritte-content___JNpTZ_1-1-0{
168
+ display:inline-grid;
169
+ justify-content:flex-end;
170
+ grid-template-columns:max-content 1fr;
171
+ transition-property:grid-template-columns;
172
+ min-height:24px;
173
+ transition-duration:var(--animation-duration);
174
+ transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v23-2-2);
175
+ }
176
+ .magritte-withPostfix___PmQAz_1-1-0 .magritte-content___JNpTZ_1-1-0{
177
+ grid-template-columns:max-content 1fr max-content;
178
+ }
179
+ .magritte-hideLabel___K79XM_1-1-0 .magritte-content___JNpTZ_1-1-0{
180
+ grid-template-columns:max-content 0fr;
181
+ }
182
+ .magritte-hideLabel___K79XM_1-1-0 .magritte-label___EPgvj_1-1-0{
183
+ padding:0;
184
+ }
185
+ .magritte-hideLabel___K79XM_1-1-0.magritte-withPostfix___PmQAz_1-1-0 .magritte-content___JNpTZ_1-1-0{
186
+ grid-template-columns:max-content 0fr max-content;
187
+ }
188
+ .magritte-withLabelOnHover___1oktd_1-1-0:not(.magritte-hideLabel___K79XM_1-1-0){
189
+ padding:12px;
190
+ }
191
+ .magritte-withLabelOnHover___1oktd_1-1-0:not(.magritte-hideLabel___K79XM_1-1-0).magritte-withPostfix___PmQAz_1-1-0{
192
+ padding:12px 16px;
193
+ }
194
+ .magritte-withLabelOnHover___1oktd_1-1-0:not(.magritte-hideLabel___K79XM_1-1-0) .magritte-content___JNpTZ_1-1-0{
195
+ grid-template-columns:max-content 0fr;
196
+ }
197
+ .magritte-withLabelOnHover___1oktd_1-1-0:not(.magritte-hideLabel___K79XM_1-1-0).magritte-withPostfix___PmQAz_1-1-0 .magritte-content___JNpTZ_1-1-0{
198
+ grid-template-columns:max-content 0fr max-content;
199
+ }
200
+ .magritte-withLabelOnHover___1oktd_1-1-0:not(.magritte-hideLabel___K79XM_1-1-0) .magritte-label___EPgvj_1-1-0{
201
+ padding:0;
202
+ }
203
+ .magritte-withLabelOnHover___1oktd_1-1-0:not(.magritte-hideLabel___K79XM_1-1-0):hover:not(:disabled):not([aria-disabled='true']){
204
+ padding:12px 16px;
205
+ }
206
+ .magritte-withLabelOnHover___1oktd_1-1-0:not(.magritte-hideLabel___K79XM_1-1-0):hover:not(:disabled):not([aria-disabled='true']) .magritte-content___JNpTZ_1-1-0{
207
+ grid-template-columns:max-content 1fr;
208
+ }
209
+ .magritte-withLabelOnHover___1oktd_1-1-0:not(.magritte-hideLabel___K79XM_1-1-0):hover:not(:disabled):not([aria-disabled='true']).magritte-withPostfix___PmQAz_1-1-0 .magritte-content___JNpTZ_1-1-0{
210
+ grid-template-columns:max-content 1fr max-content;
211
+ }
212
+ .magritte-withLabelOnHover___1oktd_1-1-0:not(.magritte-hideLabel___K79XM_1-1-0):hover:not(:disabled):not([aria-disabled='true']) .magritte-label___EPgvj_1-1-0{
169
213
  padding-left:8px;
170
214
  }
171
- .magritte-loader___EPezG_1-0-2{
215
+ .magritte-loading___C0oPZ_1-1-0 .magritte-postfix___r0EZ6_1-1-0,
216
+ .magritte-loading___C0oPZ_1-1-0 .magritte-icon___VpqJt_1-1-0,
217
+ .magritte-loading___C0oPZ_1-1-0 .magritte-label___EPgvj_1-1-0{
218
+ visibility:hidden;
219
+ }
220
+ .magritte-border-radius___ObLLb_1-1-0{
221
+ border-radius:12px;
222
+ }
223
+ .magritte-loader___EPezG_1-1-0{
172
224
  position:absolute;
173
225
  left:50%;
174
226
  top:50%;
@@ -176,73 +228,91 @@
176
228
  line-height:0;
177
229
  overflow:hidden;
178
230
  }
179
- .magritte-button_style-neutral___bPUwu_1-0-2{
180
- background:var(--magritte-color-component-button-background-neutral-v23-2-1);
181
- --magritte-ui-text-color-override:var(--magritte-color-component-button-text-neutral-v23-2-1);
182
- --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-neutral-v23-2-1);
183
- box-shadow:var(--magritte-shadow-level-2-x-v23-2-1) var(--magritte-shadow-level-2-y-v23-2-1) var(--magritte-shadow-level-2-blur-v23-2-1) var(--magritte-shadow-level-2-spread-v23-2-1) var(--magritte-shadow-level-2-color-v23-2-1);
184
- --magritte-ui-loader-color-override:var(--magritte-color-component-button-loader-icon-neutral-v23-2-1);
231
+ .magritte-enter-animation___2sPz3_1-1-0{
232
+ opacity:0;
233
+ }
234
+ .magritte-enter-animation-active___Lq9eq_1-1-0{
235
+ opacity:1;
236
+ transition-property:opacity;
237
+ transition-duration:var(--animation-duration);
238
+ transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v23-2-2);
239
+ }
240
+ .magritte-exit-animation___h2-7a_1-1-0{
241
+ opacity:1;
242
+ }
243
+ .magritte-exit-animation-active___w0F1a_1-1-0{
244
+ opacity:0;
245
+ transition-property:opacity;
246
+ transition-duration:var(--animation-duration);
247
+ transition-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v23-2-2);
248
+ }
249
+ .magritte-button_style-neutral___bPUwu_1-1-0{
250
+ background:var(--magritte-color-component-button-background-neutral-v23-2-2);
251
+ --magritte-ui-text-color-override:var(--magritte-color-component-button-text-neutral-v23-2-2);
252
+ --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-neutral-v23-2-2);
253
+ box-shadow:var(--magritte-shadow-level-2-x-v23-2-2) var(--magritte-shadow-level-2-y-v23-2-2) var(--magritte-shadow-level-2-blur-v23-2-2) var(--magritte-shadow-level-2-spread-v23-2-2) var(--magritte-shadow-level-2-color-v23-2-2);
254
+ --magritte-ui-loader-color-override:var(--magritte-color-component-button-loader-icon-neutral-v23-2-2);
185
255
  }
186
- .magritte-button_style-neutral___bPUwu_1-0-2 .magritte-postfix___r0EZ6_1-0-2{
187
- --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-neutral-v23-2-1);
256
+ .magritte-button_style-neutral___bPUwu_1-1-0 .magritte-postfix___r0EZ6_1-1-0{
257
+ --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-neutral-v23-2-2);
188
258
  }
189
- .magritte-button_style-neutral___bPUwu_1-0-2.focus-visible{
190
- outline:var(--magritte-semantic-border-width-tab-focused-v23-2-1) solid var(--magritte-color-component-button-stroke-state-neutral-focused-accessible-v23-2-1);
191
- background:var(--magritte-color-component-button-background-state-neutral-focused-v23-2-1);
259
+ .magritte-button_style-neutral___bPUwu_1-1-0.focus-visible{
260
+ outline:4px solid var(--magritte-color-component-button-stroke-state-neutral-focused-accessible-v23-2-2);
261
+ background:var(--magritte-color-component-button-background-state-neutral-focused-v23-2-2);
192
262
  }
193
- .magritte-button_style-neutral___bPUwu_1-0-2:not(:disabled):active{
194
- background:var(--magritte-color-component-button-background-state-neutral-pressed-v23-2-1);
263
+ .magritte-button_style-neutral___bPUwu_1-1-0:not(:disabled):active{
264
+ background:var(--magritte-color-component-button-background-state-neutral-pressed-v23-2-2);
195
265
  }
196
- .magritte-button_style-neutral___bPUwu_1-0-2:disabled{
197
- background:var(--magritte-color-component-button-background-state-neutral-disabled-v23-2-1);
198
- --magritte-ui-text-color-override:var(--magritte-color-component-button-text-state-neutral-disabled-v23-2-1);
199
- --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-state-neutral-disabled-v23-2-1);
266
+ .magritte-button_style-neutral___bPUwu_1-1-0:disabled{
267
+ background:var(--magritte-color-component-button-background-state-neutral-disabled-v23-2-2);
268
+ --magritte-ui-text-color-override:var(--magritte-color-component-button-text-state-neutral-disabled-v23-2-2);
269
+ --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-state-neutral-disabled-v23-2-2);
200
270
  }
201
- .magritte-button_style-neutral___bPUwu_1-0-2:disabled .magritte-postfix___r0EZ6_1-0-2{
202
- --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-state-neutral-disabled-v23-2-1);
271
+ .magritte-button_style-neutral___bPUwu_1-1-0:disabled .magritte-postfix___r0EZ6_1-1-0{
272
+ --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-state-neutral-disabled-v23-2-2);
203
273
  }
204
274
  @media (min-width: 1020px){
205
- body.magritte-old-layout .magritte-button_style-neutral___bPUwu_1-0-2:hover:not(:active):not(:disabled):not([aria-disabled='true']){
206
- background:var(--magritte-color-component-button-background-state-neutral-hovered-v23-2-1);
275
+ body.magritte-old-layout .magritte-button_style-neutral___bPUwu_1-1-0:hover:not(:active):not(:disabled):not([aria-disabled='true']){
276
+ background:var(--magritte-color-component-button-background-state-neutral-hovered-v23-2-2);
207
277
  }
208
278
  }
209
279
  @media (min-width: 1024px){
210
- body:not(.magritte-old-layout) .magritte-button_style-neutral___bPUwu_1-0-2:hover:not(:active):not(:disabled):not([aria-disabled='true']){
211
- background:var(--magritte-color-component-button-background-state-neutral-hovered-v23-2-1);
280
+ body:not(.magritte-old-layout) .magritte-button_style-neutral___bPUwu_1-1-0:hover:not(:active):not(:disabled):not([aria-disabled='true']){
281
+ background:var(--magritte-color-component-button-background-state-neutral-hovered-v23-2-2);
212
282
  }
213
283
  }
214
- .magritte-button_style-inverse___Xgf26_1-0-2{
215
- background:var(--magritte-color-component-button-background-inverse-v23-2-1);
216
- --magritte-ui-text-color-override:var(--magritte-color-component-button-text-inverse-v23-2-1);
217
- --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-inverse-v23-2-1);
218
- box-shadow:var(--magritte-shadow-level-1-x-v23-2-1) var(--magritte-shadow-level-1-y-v23-2-1) var(--magritte-shadow-level-1-blur-v23-2-1) var(--magritte-shadow-level-1-spread-v23-2-1) var(--magritte-shadow-level-1-color-v23-2-1);
219
- --magritte-ui-loader-color-override:var(--magritte-color-component-button-loader-icon-inverse-v23-2-1);
284
+ .magritte-button_style-inverse___Xgf26_1-1-0{
285
+ background:var(--magritte-color-component-button-background-inverse-v23-2-2);
286
+ --magritte-ui-text-color-override:var(--magritte-color-component-button-text-inverse-v23-2-2);
287
+ --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-inverse-v23-2-2);
288
+ box-shadow:var(--magritte-shadow-level-1-x-v23-2-2) var(--magritte-shadow-level-1-y-v23-2-2) var(--magritte-shadow-level-1-blur-v23-2-2) var(--magritte-shadow-level-1-spread-v23-2-2) var(--magritte-shadow-level-1-color-v23-2-2);
289
+ --magritte-ui-loader-color-override:var(--magritte-color-component-button-loader-icon-inverse-v23-2-2);
220
290
  }
221
- .magritte-button_style-inverse___Xgf26_1-0-2 .magritte-postfix___r0EZ6_1-0-2{
222
- --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-inverse-v23-2-1);
291
+ .magritte-button_style-inverse___Xgf26_1-1-0 .magritte-postfix___r0EZ6_1-1-0{
292
+ --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-inverse-v23-2-2);
223
293
  }
224
- .magritte-button_style-inverse___Xgf26_1-0-2.focus-visible{
225
- outline:var(--magritte-semantic-border-width-tab-focused-v23-2-1) solid var(--magritte-color-component-button-stroke-state-inverse-focused-accessible-v23-2-1);
226
- background:var(--magritte-color-component-button-background-state-inverse-focused-v23-2-1);
294
+ .magritte-button_style-inverse___Xgf26_1-1-0.focus-visible{
295
+ outline:4px solid var(--magritte-color-component-button-stroke-state-inverse-focused-accessible-v23-2-2);
296
+ background:var(--magritte-color-component-button-background-state-inverse-focused-v23-2-2);
227
297
  }
228
- .magritte-button_style-inverse___Xgf26_1-0-2:not(:disabled):active{
229
- background:var(--magritte-color-component-button-background-state-inverse-pressed-v23-2-1);
298
+ .magritte-button_style-inverse___Xgf26_1-1-0:not(:disabled):active{
299
+ background:var(--magritte-color-component-button-background-state-inverse-pressed-v23-2-2);
230
300
  }
231
- .magritte-button_style-inverse___Xgf26_1-0-2:disabled{
232
- background:var(--magritte-color-component-button-background-state-inverse-disabled-v23-2-1);
233
- --magritte-ui-text-color-override:var(--magritte-color-component-button-text-state-inverse-disabled-v23-2-1);
234
- --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-state-inverse-disabled-v23-2-1);
301
+ .magritte-button_style-inverse___Xgf26_1-1-0:disabled{
302
+ background:var(--magritte-color-component-button-background-state-inverse-disabled-v23-2-2);
303
+ --magritte-ui-text-color-override:var(--magritte-color-component-button-text-state-inverse-disabled-v23-2-2);
304
+ --magritte-ui-icon-color-override:var(--magritte-color-component-button-icon-state-inverse-disabled-v23-2-2);
235
305
  }
236
- .magritte-button_style-inverse___Xgf26_1-0-2:disabled .magritte-postfix___r0EZ6_1-0-2{
237
- --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-state-inverse-disabled-v23-2-1);
306
+ .magritte-button_style-inverse___Xgf26_1-1-0:disabled .magritte-postfix___r0EZ6_1-1-0{
307
+ --magritte-ui-text-color-override:var(--magritte-color-component-button-postfix-text-state-inverse-disabled-v23-2-2);
238
308
  }
239
309
  @media (min-width: 1020px){
240
- body.magritte-old-layout .magritte-button_style-inverse___Xgf26_1-0-2:hover:not(:active):not(:disabled):not([aria-disabled='true']){
241
- background:var(--magritte-color-component-button-background-state-inverse-hovered-v23-2-1);
310
+ body.magritte-old-layout .magritte-button_style-inverse___Xgf26_1-1-0:hover:not(:active):not(:disabled):not([aria-disabled='true']){
311
+ background:var(--magritte-color-component-button-background-state-inverse-hovered-v23-2-2);
242
312
  }
243
313
  }
244
314
  @media (min-width: 1024px){
245
- body:not(.magritte-old-layout) .magritte-button_style-inverse___Xgf26_1-0-2:hover:not(:active):not(:disabled):not([aria-disabled='true']){
246
- background:var(--magritte-color-component-button-background-state-inverse-hovered-v23-2-1);
315
+ body:not(.magritte-old-layout) .magritte-button_style-inverse___Xgf26_1-1-0:hover:not(:active):not(:disabled):not([aria-disabled='true']){
316
+ background:var(--magritte-color-component-button-background-state-inverse-hovered-v23-2-2);
247
317
  }
248
318
  }
package/index.js CHANGED
@@ -1,9 +1,13 @@
1
1
  import './index.css';
2
2
  export { FloatingButton } from './FloatingButton.js';
3
3
  import 'react/jsx-runtime';
4
+ import 'react';
4
5
  import 'react-dom';
6
+ import 'react-transition-group';
5
7
  import 'classnames';
6
8
  import '@hh.ru/magritte-common-is-server-env';
9
+ import '@hh.ru/magritte-ui-badge';
10
+ import '@hh.ru/magritte-ui-layer';
7
11
  import '@hh.ru/magritte-ui-loader';
8
12
  import '@hh.ru/magritte-ui-typography';
9
13
  //# sourceMappingURL=index.js.map
package/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-floating-button",
3
- "version": "1.0.2",
3
+ "version": "1.1.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -20,20 +20,22 @@
20
20
  },
21
21
  "dependencies": {
22
22
  "@hh.ru/magritte-common-is-server-env": "1.0.7",
23
- "@hh.ru/magritte-design-tokens": "23.2.1",
23
+ "@hh.ru/magritte-design-tokens": "23.2.2",
24
24
  "@hh.ru/magritte-types": "5.0.4",
25
- "@hh.ru/magritte-ui-badge": "3.1.3",
25
+ "@hh.ru/magritte-ui-badge": "3.2.0",
26
26
  "@hh.ru/magritte-ui-breakpoint": "6.0.1",
27
- "@hh.ru/magritte-ui-loader": "2.0.7",
28
- "@hh.ru/magritte-ui-typography": "4.2.2"
27
+ "@hh.ru/magritte-ui-layer": "3.0.4",
28
+ "@hh.ru/magritte-ui-loader": "2.0.9",
29
+ "@hh.ru/magritte-ui-typography": "4.2.3"
29
30
  },
30
31
  "peerDependencies": {
31
32
  "classnames": ">=2.3.2",
32
33
  "react": ">=18.2.0",
33
- "react-dom": ">=18.2.0"
34
+ "react-dom": ">=18.2.0",
35
+ "react-transition-group": ">=4.4.5"
34
36
  },
35
37
  "publishConfig": {
36
38
  "access": "public"
37
39
  },
38
- "gitHead": "18a4c9f53b8572077ce0fba28266865c1b619cee"
40
+ "gitHead": "8ca374027f73643dd942a6d0a2d23ec870924a20"
39
41
  }
package/types.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { CSSProperties, PropsWithChildren, ReactElement, ReactNode, type RefObject } from 'react';
2
2
  import { IconWrapperComponentSize24 } from '@hh.ru/magritte-ui-icon';
3
3
  export type FloatingButtonStyle = 'neutral' | 'inverse';
4
+ export type FloatingButtonPosition = 'left' | 'right' | 'center';
4
5
  export interface FloatingButtonProps extends PropsWithChildren {
5
6
  /** Кастомный компонент 'a', 'button', 'span' или функция */
6
7
  Element?: 'a' | 'button' | 'span';
@@ -22,4 +23,11 @@ export interface FloatingButtonProps extends PropsWithChildren {
22
23
  className?: string;
23
24
  /** инлайн стили для позиционирования кнопки */
24
25
  inlineStyle?: CSSProperties;
26
+ visible?: boolean;
27
+ /** Показывать ли лейбл только при ховере */
28
+ labelOnHover?: boolean;
29
+ /** Скрыть ли лейбл */
30
+ hideLabel?: boolean;
31
+ /** Позиция */
32
+ position?: FloatingButtonPosition;
25
33
  }