@pushwoosh/dumb-components 1.1.18 → 1.1.19

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 (10) hide show
  1. package/Checkbox/Checkbox.js +40 -12
  2. package/Checkbox/maps.d.ts +9 -3
  3. package/Checkbox/maps.js +13 -5
  4. package/Checkbox/styles.d.ts +60 -3
  5. package/Checkbox/styles.js +33 -7
  6. package/Checkbox/types.d.ts +4 -4
  7. package/Radio/Radio.js +3 -4
  8. package/Radio/styles.d.ts +56 -0
  9. package/Radio/styles.js +5 -1
  10. package/package.json +1 -1
package/Checkbox/Checkbox.js CHANGED
@@ -1,38 +1,66 @@
1
- import React, { useRef, useEffect } from 'react';
2
- import { NativeLabel, NativeCheckbox } from './styles';
1
+ import React, { useRef, useEffect, useState } from 'react';
2
+ import { Color } from '@pushwoosh/kit-constants';
3
+ import { Horizontal } from '@pushwoosh/kit-helpers';
4
+ import { HelpRoundIcon } from '@pushwoosh/kit-icons';
5
+ import { NativeLabel, NativeCheckbox, IconWrapper } from './styles';
6
+ import { Tooltip } from '../Tooltip';
7
+ let counter = 0;
3
8
  export function Checkbox(props) {
4
9
  const {
5
10
  label,
6
11
  id,
7
12
  name,
8
13
  value,
9
- color,
14
+ type = 'normal',
10
15
  activeCheckboxColor,
16
+ tooltip,
11
17
  isChecked,
12
18
  isDisabled,
13
19
  isIndeterminate,
14
- onChange,
15
- className
20
+ onChange
16
21
  } = props;
17
22
  const checkboxRef = useRef(null);
23
+ const [localId] = useState(() => {
24
+ if (id) {
25
+ return id;
26
+ }
27
+ const newCounter = counter++;
28
+ return `checkbox-id-${newCounter}`;
29
+ });
18
30
  useEffect(() => {
19
31
  if (checkboxRef.current) {
20
32
  checkboxRef.current.indeterminate = isIndeterminate ?? false;
21
33
  }
22
34
  }, [checkboxRef, isIndeterminate]);
23
- return React.createElement(NativeLabel, {
24
- htmlFor: id,
25
- "$color": color,
26
- className: className
35
+ const checkboxMarkup = React.createElement(NativeLabel, {
36
+ htmlFor: localId,
37
+ "$color": isDisabled ? Color.LOCKED : Color.MAIN
38
+ }, React.createElement(Horizontal, {
39
+ "$padding": 3
27
40
  }, React.createElement(NativeCheckbox, {
28
41
  type: "checkbox",
29
- id: id,
42
+ id: localId,
30
43
  ref: checkboxRef,
31
44
  value: value,
32
- color: activeCheckboxColor,
33
45
  name: name,
46
+ "$color": activeCheckboxColor,
34
47
  checked: isChecked,
35
48
  disabled: isDisabled,
49
+ "$type": type,
36
50
  onChange: event => onChange === null || onChange === void 0 ? void 0 : onChange(event.currentTarget.checked)
37
- }), label && React.createElement("span", null, label));
51
+ })), label && React.createElement("span", null, label));
52
+ if (tooltip) {
53
+ return React.createElement(Horizontal, {
54
+ "$gap": 4,
55
+ "$alignItems": "start"
56
+ }, checkboxMarkup, React.createElement(Tooltip, {
57
+ content: tooltip
58
+ }, React.createElement(IconWrapper, {
59
+ "$padding": "4px 0"
60
+ }, React.createElement(HelpRoundIcon, {
61
+ size: "small",
62
+ view: "lined"
63
+ }))));
64
+ }
65
+ return checkboxMarkup;
38
66
  }
package/Checkbox/maps.d.ts CHANGED
@@ -1,3 +1,9 @@
1
- import { Color } from '@pushwoosh/kit-constants';
2
- import type { TextColor } from './types';
3
- export declare const ColorMap: Record<TextColor, Color>;
1
+ import { type CheckboxType } from './types';
2
+ type CheckboxColorSet = {
3
+ checked: string;
4
+ notChecked: string;
5
+ hover: string;
6
+ checkmarkHover: string;
7
+ };
8
+ export declare const ColorByType: Record<CheckboxType, CheckboxColorSet>;
9
+ export {};
package/Checkbox/maps.js CHANGED
@@ -1,7 +1,15 @@
1
1
  import { Color } from '@pushwoosh/kit-constants';
2
- export const ColorMap = {
3
- main: Color.MAIN,
4
- primary: Color.PRIMARY,
5
- danger: Color.DANGER,
6
- current: Color.CURRENT
2
+ export const ColorByType = {
3
+ normal: {
4
+ checked: Color.PRIMARY,
5
+ notChecked: Color.PHANTOM,
6
+ hover: Color.PRIMARY_HOVER,
7
+ checkmarkHover: Color.PHANTOM
8
+ },
9
+ error: {
10
+ checked: Color.DANGER,
11
+ notChecked: Color.DANGER,
12
+ hover: Color.DANGER_HOVER,
13
+ checkmarkHover: Color.DANGER_HOVER
14
+ }
7
15
  };
package/Checkbox/styles.d.ts CHANGED
@@ -1,9 +1,66 @@
1
- import type { TextColor } from './types';
1
+ import { type CheckboxType } from './types';
2
2
  export declare const NativeCheckbox: import("styled-components").StyledComponent<"input", any, {
3
3
  type: "checkbox";
4
4
  } & {
5
- color?: string;
5
+ $color?: string;
6
+ $type: CheckboxType;
6
7
  }, "type">;
7
8
  export declare const NativeLabel: import("styled-components").StyledComponent<"label", any, {
8
- $color?: TextColor;
9
+ $color: string;
9
10
  }, never>;
11
+ export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
12
+ $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
13
+ $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
14
+ $bgColor?: string | undefined;
15
+ $border?: string | ({
16
+ top?: string | undefined;
17
+ right?: string | undefined;
18
+ bottom?: string | undefined;
19
+ left?: string | undefined;
20
+ } | {
21
+ horizontal: string;
22
+ top?: string | undefined;
23
+ bottom?: string | undefined;
24
+ } | {
25
+ vertical: string;
26
+ right?: string | undefined;
27
+ left?: string | undefined;
28
+ }) | undefined;
29
+ $borderRadius?: (string | number) | undefined;
30
+ $boxShadow?: string | undefined;
31
+ $gap?: (string | number) | undefined;
32
+ $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
33
+ $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
34
+ $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
35
+ $margin?: (string | number) | ({
36
+ top?: (string | number) | undefined;
37
+ right?: (string | number) | undefined;
38
+ bottom?: (string | number) | undefined;
39
+ left?: (string | number) | undefined;
40
+ } | {
41
+ horizontal: string | number;
42
+ top?: (string | number) | undefined;
43
+ bottom?: (string | number) | undefined;
44
+ } | {
45
+ vertical: string | number;
46
+ right?: (string | number) | undefined;
47
+ left?: (string | number) | undefined;
48
+ }) | undefined;
49
+ $padding?: (string | number) | ({
50
+ top?: (string | number) | undefined;
51
+ right?: (string | number) | undefined;
52
+ bottom?: (string | number) | undefined;
53
+ left?: (string | number) | undefined;
54
+ } | {
55
+ horizontal: string | number;
56
+ top?: (string | number) | undefined;
57
+ bottom?: (string | number) | undefined;
58
+ } | {
59
+ vertical: string | number;
60
+ right?: (string | number) | undefined;
61
+ left?: (string | number) | undefined;
62
+ }) | undefined;
63
+ $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
64
+ } & {
65
+ $gridAutoFlow: string;
66
+ }, "$gridAutoFlow">;
package/Checkbox/styles.js CHANGED
@@ -1,17 +1,43 @@
1
1
  import styled from 'styled-components';
2
- import { Color, Spacing, FontSize, LineHeight } from '@pushwoosh/kit-constants';
3
- import { ColorMap } from './maps';
2
+ import { Color, FontSize, LineHeight } from '@pushwoosh/kit-constants';
3
+ import { Horizontal } from '@pushwoosh/kit-helpers';
4
+ import { ColorByType } from './maps';
4
5
  export const NativeCheckbox = styled.input.attrs({
5
6
  type: 'checkbox'
6
7
  }).withConfig({
7
8
  displayName: "NativeCheckbox",
8
9
  componentId: "sc-1lw3rny-0"
9
- })(["--active:", ";--active-inner:", ";--focus:2px rgba(39,94,254,.3);--border:#BBC1E1;--border-hover:#275EFE;--default-background:", ";--disabled:#F6F8FF;--disabled-inner:#E1E6F9;appearance:none;-webkit-appearance:none;-moz-appearance:none;width:18px;height:18px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:2px solid var(--bc,var(--border));border-radius:4px;box-sizing:border-box;background:var(--background,var(--default-background));transition:background 0.3s,border-color 0.3s,box-shadow 0.2s;&:checked{--background:var(--active);--bc:var(--active);--d-o:.3s;--d-t:.6s;--o:1;--r:43deg;}&:disabled{--background:var(--disabled);cursor:not-allowed;opacity:0.9;}&:disabled:checked{--background:var(--disabled-inner);--bc:var(--border);}&:hover:not(:checked):not(:disabled){--bc:var(--border-hover);}&:focus{box-shadow:0 0 0 var(--focus);}&:after{content:\"\";display:block;position:absolute;transition:transform var(--d-t,0.3s),opacity var(--d-o,0.2s);opacity:var(--o,0);width:4px;height:8px;border:1px solid var(--active-inner);border-top:0;border-left:0;left:5px;top:1px;transform:rotate(var(--r,20deg)) scale(1.4);}&:indeterminate{--background:var(--active);--bc:var(--active);}&:indeterminate:after{width:11.5px;height:1.5px;top:6.25px;left:1.3px;border:none;background-color:var(--active-inner);transform:none;opacity:var(--o,1);transition:width var(--d-t,0.3s),height var(--d-o,0.2s),opacity var(--d-o,0.2s);}&:disabled + span{cursor:not-allowed;}"], ({
10
- color
11
- }) => color ?? Color.PRIMARY, Color.CLEAR, Color.CLEAR);
10
+ })(["appearance:none;-webkit-appearance:none;-moz-appearance:none;width:18px;height:18px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:", ";border-radius:4px;box-sizing:border-box;background-color:", ";transition:background 0.3s,border-color 0.3s,box-shadow 0.2s;&:checked{background-color:", ";border-color:", ";--d-o:.3s;--d-t:.6s;--o:1;--r:43deg;}&:not(:checked):disabled{border-color:", ";background-color:", ";cursor:not-allowed;}&:disabled:is(:checked,:indeterminate){background-color:", ";border-color:", ";cursor:not-allowed;}&:hover:is(:checked,:indeterminate):not(:disabled){--o:0.5;border-color:", ";background-color:", ";}&:hover:not(:checked):not(:disabled):not(:indeterminate){--o:0.5;--checkmark-color:", ";--d-o:.3s;--d-t:.6s;--o:0.5;--r:43deg;}&:after{content:\"\";display:block;position:absolute;transition:transform var(--d-t,0.3s),opacity var(--d-o,0.2s);opacity:var(--o,0);width:4px;height:8px;border:1px solid var(--checkmark-color,", ");border-top:0;border-left:0;left:5px;top:1px;transform:rotate(var(--r,20deg)) scale(1.4);}&:indeterminate{background-color:", ";border-color:", ";}&:indeterminate:after{width:11.5px;height:1.5px;top:6.25px;left:1.3px;border:none;transform:none;background-color:", ";opacity:var(--o,1);transition:width var(--d-t,0.3s),height var(--d-o,0.2s),opacity var(--d-o,0.2s);}&:disabled + span{cursor:not-allowed;}"], ({
11
+ $type
12
+ }) => `2px solid ${ColorByType[$type].notChecked}`, Color.CLEAR, ({
13
+ $type,
14
+ $color
15
+ }) => $color ?? ColorByType[$type].checked, ({
16
+ $type,
17
+ $color
18
+ }) => $color ?? ColorByType[$type].checked, Color.LOCKED, Color.DIVIDER, Color.LOCKED, Color.LOCKED, ({
19
+ $type,
20
+ $color
21
+ }) => $color ?? ColorByType[$type].hover, ({
22
+ $type,
23
+ $color
24
+ }) => $color ?? ColorByType[$type].hover, ({
25
+ $type,
26
+ $color
27
+ }) => $color ? Color.PHANTOM : ColorByType[$type].checkmarkHover, Color.CLEAR, ({
28
+ $type,
29
+ $color
30
+ }) => $color ?? ColorByType[$type].checked, ({
31
+ $type,
32
+ $color
33
+ }) => $color ?? ColorByType[$type].checked, Color.CLEAR);
12
34
  export const NativeLabel = styled.label.withConfig({
13
35
  displayName: "NativeLabel",
14
36
  componentId: "sc-1lw3rny-1"
15
- })(["font-size:", ";line-height:", ";", " user-select:none;& > ", "{margin:1px;&:not(:last-child){margin-right:", ";}}"], FontSize.REGULAR, LineHeight.REGULAR, ({
37
+ })(["font-size:", ";line-height:", ";", " user-select:none;display:flex;gap:8px;align-items:start;&:has(input:not(:disabled)){cursor:pointer;}&:has(input:disabled){cursor:not-allowed;}& > span{padding:2px 0;}span{max-width:800px;white-space:normal;overflow-wrap:break-word;}& > ", "{margin:1px;}"], FontSize.REGULAR, LineHeight.REGULAR, ({
16
38
  $color
17
- }) => $color && `color: ${ColorMap[$color]};`, NativeCheckbox, Spacing.S3);
39
+ }) => `color: ${$color};`, NativeCheckbox);
40
+ export const IconWrapper = styled(Horizontal).withConfig({
41
+ displayName: "IconWrapper",
42
+ componentId: "sc-1lw3rny-2"
43
+ })(["color:", ";&:hover{color:", ";cursor:pointer;}"], Color.PHANTOM, Color.PRIMARY_HOVER);
package/Checkbox/types.d.ts CHANGED
@@ -1,15 +1,15 @@
1
1
  import type { ReactNode } from 'react';
2
- export type TextColor = 'main' | 'primary' | 'danger' | 'current';
2
+ export type CheckboxType = 'normal' | 'error';
3
3
  export type CheckboxProps = {
4
4
  label?: ReactNode;
5
5
  id?: string;
6
6
  name?: string;
7
7
  value?: string | number;
8
- color?: TextColor;
9
- activeCheckboxColor?: string;
8
+ type?: CheckboxType;
10
9
  isChecked?: boolean;
11
10
  isDisabled?: boolean;
12
11
  isIndeterminate?: boolean;
12
+ tooltip?: string;
13
+ activeCheckboxColor?: string;
13
14
  onChange?: (checked: boolean) => void;
14
- className?: string;
15
15
  };
package/Radio/Radio.js CHANGED
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
2
2
  import { Color } from '@pushwoosh/kit-constants';
3
3
  import { Horizontal } from '@pushwoosh/kit-helpers';
4
4
  import { HelpRoundIcon } from '@pushwoosh/kit-icons';
5
- import { InputContainer, NativeLabel, NativeRadio } from './styles';
5
+ import { IconWrapper, InputContainer, NativeLabel, NativeRadio } from './styles';
6
6
  import { Tooltip } from '../Tooltip';
7
7
  let counter = 0;
8
8
  export function Radio(props) {
@@ -52,12 +52,11 @@ export function Radio(props) {
52
52
  "$alignItems": "start"
53
53
  }, radioMarkup, React.createElement(Tooltip, {
54
54
  content: tooltip
55
- }, React.createElement(Horizontal, {
55
+ }, React.createElement(IconWrapper, {
56
56
  "$padding": size === 'compact' ? 0 : '4px 0'
57
57
  }, React.createElement(HelpRoundIcon, {
58
58
  size: "small",
59
- view: "lined",
60
- color: Color.PHANTOM
59
+ view: "lined"
61
60
  }))));
62
61
  }
63
62
  return radioMarkup;
package/Radio/styles.d.ts CHANGED
@@ -65,3 +65,59 @@ export declare const NativeLabel: import("styled-components").StyledComponent<"l
65
65
  $color: string;
66
66
  $size: RadioSize;
67
67
  }, never>;
68
+ export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
69
+ $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
70
+ $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
71
+ $bgColor?: string | undefined;
72
+ $border?: string | ({
73
+ top?: string | undefined;
74
+ right?: string | undefined;
75
+ bottom?: string | undefined;
76
+ left?: string | undefined;
77
+ } | {
78
+ horizontal: string;
79
+ top?: string | undefined;
80
+ bottom?: string | undefined;
81
+ } | {
82
+ vertical: string;
83
+ right?: string | undefined;
84
+ left?: string | undefined;
85
+ }) | undefined;
86
+ $borderRadius?: (string | number) | undefined;
87
+ $boxShadow?: string | undefined;
88
+ $gap?: (string | number) | undefined;
89
+ $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
90
+ $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
91
+ $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
92
+ $margin?: (string | number) | ({
93
+ top?: (string | number) | undefined;
94
+ right?: (string | number) | undefined;
95
+ bottom?: (string | number) | undefined;
96
+ left?: (string | number) | undefined;
97
+ } | {
98
+ horizontal: string | number;
99
+ top?: (string | number) | undefined;
100
+ bottom?: (string | number) | undefined;
101
+ } | {
102
+ vertical: string | number;
103
+ right?: (string | number) | undefined;
104
+ left?: (string | number) | undefined;
105
+ }) | undefined;
106
+ $padding?: (string | number) | ({
107
+ top?: (string | number) | undefined;
108
+ right?: (string | number) | undefined;
109
+ bottom?: (string | number) | undefined;
110
+ left?: (string | number) | undefined;
111
+ } | {
112
+ horizontal: string | number;
113
+ top?: (string | number) | undefined;
114
+ bottom?: (string | number) | undefined;
115
+ } | {
116
+ vertical: string | number;
117
+ right?: (string | number) | undefined;
118
+ left?: (string | number) | undefined;
119
+ }) | undefined;
120
+ $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
121
+ } & {
122
+ $gridAutoFlow: string;
123
+ }, "$gridAutoFlow">;
package/Radio/styles.js CHANGED
@@ -53,4 +53,8 @@ export const NativeLabel = styled.label.withConfig({
53
53
  $size
54
54
  }) => $size === 'compact' ? '6px' : '8px', ({
55
55
  $size
56
- }) => $size === 'compact' ? '0px' : '2px 0');
56
+ }) => $size === 'compact' ? '0px' : '2px 0');
57
+ export const IconWrapper = styled(Horizontal).withConfig({
58
+ displayName: "IconWrapper",
59
+ componentId: "sc-34lgtl-3"
60
+ })(["color:", ";&:hover{color:", ";cursor:pointer;}"], Color.PHANTOM, Color.PRIMARY_HOVER);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pushwoosh/dumb-components",
3
- "version": "1.1.18",
3
+ "version": "1.1.19",
4
4
  "description": "React components to build Pushwoosh products",
5
5
  "main": "index.js",
6
6
  "module": "index.js",