@ntbjs/react-components 2.0.1-rc.31 → 2.0.2-rc.1
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.
- package/build/inputs/Radio/Radio.js +13 -4
- package/build/inputs/Radio/Radio.js.map +1 -1
- package/build/inputs/Radio/Radio.styled.js +40 -23
- package/build/inputs/Radio/Radio.styled.js.map +1 -1
- package/build/styles/.config.scss +2 -2
- package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js +2 -2
- package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js.map +1 -1
- package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js +7 -7
- package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js.map +1 -1
- package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.styled.js +0 -4
- package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.styled.js.map +1 -1
- package/package.json +11 -4
- package/styles/.config.scss +2 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import React__default, {
|
|
2
|
+
import React__default, { useMemo } from 'react';
|
|
3
3
|
import { nanoid } from 'nanoid';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import { Radio as Radio$1, RadioLabel } from './Radio.styled.js';
|
|
@@ -18,11 +18,21 @@ const Radio = React__default.forwardRef(function Radio({
|
|
|
18
18
|
onBlur,
|
|
19
19
|
...rest
|
|
20
20
|
}, forwardedRef) {
|
|
21
|
-
const
|
|
21
|
+
const uniqueId = useMemo(() => nanoid(), []);
|
|
22
|
+
const handleChange = e => {
|
|
23
|
+
if (readOnly) {
|
|
24
|
+
e.preventDefault();
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
if (onChange) {
|
|
28
|
+
onChange(e);
|
|
29
|
+
}
|
|
30
|
+
};
|
|
22
31
|
return React__default.createElement(Radio$1, {
|
|
23
32
|
htmlFor: uniqueId,
|
|
24
33
|
disabled: disabled,
|
|
25
34
|
readOnly: readOnly,
|
|
35
|
+
$isChecked: checked,
|
|
26
36
|
className: className,
|
|
27
37
|
style: style
|
|
28
38
|
}, React__default.createElement("input", _extends({
|
|
@@ -33,9 +43,8 @@ const Radio = React__default.forwardRef(function Radio({
|
|
|
33
43
|
checked: checked,
|
|
34
44
|
defaultChecked: defaultChecked,
|
|
35
45
|
disabled: disabled,
|
|
36
|
-
readOnly: readOnly,
|
|
37
46
|
id: uniqueId,
|
|
38
|
-
onChange:
|
|
47
|
+
onChange: handleChange,
|
|
39
48
|
onBlur: onBlur
|
|
40
49
|
}, rest)), React__default.createElement(RadioLabel, null, label));
|
|
41
50
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sources":["../../../src/components/inputs/Radio/Radio.js"],"sourcesContent":["import React, {
|
|
1
|
+
{"version":3,"file":"Radio.js","sources":["../../../src/components/inputs/Radio/Radio.js"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { nanoid } from 'nanoid';\nimport PropTypes from 'prop-types';\n\nimport * as S from './Radio.styled';\n\n/**\n * Radio buttons allow the user to select one option from a set.\n *\n * Use radio buttons when the user needs to see all available options. If available options can be\n * collapsed, consider using a dropdown menu because it uses less space.\n *\n * Radio buttons should have the most commonly used option selected by default.\n *\n * ### Import\n *\n * ``` js\n * import { Radio } from '@ntbjs/react-components/inputs'\n * // or\n * import Radio from '@ntbjs/react-components/inputs/Radio'\n * ```\n */\nconst Radio = React.forwardRef(function Radio(\n {\n name,\n value,\n checked,\n defaultChecked,\n disabled,\n readOnly,\n label,\n className,\n style,\n onChange,\n onBlur,\n ...rest\n },\n forwardedRef\n) {\n const uniqueId = useMemo(() => nanoid(), []);\n\n const handleChange = e => {\n // Prevent onChange when readOnly\n if (readOnly) {\n e.preventDefault();\n return;\n }\n if (onChange) {\n onChange(e);\n }\n };\n\n return (\n <S.Radio\n htmlFor={uniqueId}\n disabled={disabled}\n readOnly={readOnly}\n $isChecked={checked}\n className={className}\n style={style}\n >\n <input\n ref={forwardedRef}\n type=\"radio\"\n name={name}\n value={value}\n checked={checked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n id={uniqueId}\n onChange={handleChange}\n onBlur={onBlur}\n {...rest}\n />\n <S.RadioLabel>{label}</S.RadioLabel>\n </S.Radio>\n );\n});\n\nRadio.propTypes = {\n /**\n * Text displayed by the radio button\n */\n label: PropTypes.any,\n\n /**\n * Name of the radio button (used when sending form data)\n */\n name: PropTypes.string.isRequired,\n\n /**\n * Value to be sent when the given radio button is selected\n */\n value: PropTypes.any.isRequired,\n\n /**\n * Whether the radio button is checked\n */\n checked: PropTypes.bool,\n\n /**\n * Whether the radio button is checked by default. The most commonly used option should have this set to `true`.\n */\n defaultChecked: PropTypes.bool,\n\n /**\n * Whether the radio button is disabled\n */\n disabled: PropTypes.bool,\n\n /**\n * Display the radio button as read-only\n */\n readOnly: PropTypes.bool,\n\n /**\n * Custom class names for the HTML element\n */\n className: PropTypes.string,\n\n /**\n * Custom inline CSS styling\n */\n style: PropTypes.object,\n\n /**\n * Optional callback function for the `onChange` event\n */\n onChange: PropTypes.func,\n\n /**\n * Optional callback function for the `onBlur` event\n */\n onBlur: PropTypes.func\n};\n\nRadio.defaultProps = {\n disabled: false\n};\n\nexport default Radio;\n"],"names":["Radio","React","forwardRef","name","value","checked","defaultChecked","disabled","readOnly","label","className","style","onChange","onBlur","rest","forwardedRef","uniqueId","useMemo","nanoid","handleChange","e","preventDefault","createElement","S","htmlFor","$isChecked","_extends","ref","type","id","propTypes","process","env","NODE_ENV","PropTypes","any","string","isRequired","bool","object","func","defaultProps"],"mappings":";;;;;;AAuBMA,MAAAA,KAAK,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,KAAKA,CAC3C;EACEG,IAAI;EACJC,KAAK;EACLC,OAAO;EACPC,cAAc;EACdC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACN,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,QAAQ,GAAGC,OAAO,CAAC,MAAMC,MAAM,EAAE,EAAE,EAAE,CAAC,CAAA;EAE5C,MAAMC,YAAY,GAAGC,CAAC,IAAI;AAExB,IAAA,IAAIZ,QAAQ,EAAE;MACZY,CAAC,CAACC,cAAc,EAAE,CAAA;AAClB,MAAA,OAAA;AACF,KAAA;AACA,IAAA,IAAIT,QAAQ,EAAE;MACZA,QAAQ,CAACQ,CAAC,CAAC,CAAA;AACb,KAAA;GACD,CAAA;AAED,EAAA,OACEnB,cAAA,CAAAqB,aAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAER,QAAS;AAClBT,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBiB,IAAAA,UAAU,EAAEpB,OAAQ;AACpBK,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,KAAK,EAAEA,KAAAA;AAAM,GAAA,EAEbV,cAAA,CAAAqB,aAAA,CAAA,OAAA,EAAAI,QAAA,CAAA;AACEC,IAAAA,GAAG,EAAEZ,YAAa;AAClBa,IAAAA,IAAI,EAAC,OAAO;AACZzB,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,cAAc,EAAEA,cAAe;AAC/BC,IAAAA,QAAQ,EAAEA,QAAS;AACnBsB,IAAAA,EAAE,EAAEb,QAAS;AACbJ,IAAAA,QAAQ,EAAEO,YAAa;AACvBN,IAAAA,MAAM,EAAEA,MAAAA;AAAO,GAAA,EACXC,IAAI,CACT,CAAC,EACFb,cAAA,CAAAqB,aAAA,CAACC,UAAY,EAAEd,IAAAA,EAAAA,KAAoB,CAC5B,CAAC,CAAA;AAEd,CAAC,EAAC;AAEFT,KAAK,CAAC8B,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAIhBxB,KAAK,EAAEyB,SAAS,CAACC,GAAG;AAKpBhC,EAAAA,IAAI,EAAE+B,SAAS,CAACE,MAAM,CAACC,UAAU;AAKjCjC,EAAAA,KAAK,EAAE8B,SAAS,CAACC,GAAG,CAACE,UAAU;EAK/BhC,OAAO,EAAE6B,SAAS,CAACI,IAAI;EAKvBhC,cAAc,EAAE4B,SAAS,CAACI,IAAI;EAK9B/B,QAAQ,EAAE2B,SAAS,CAACI,IAAI;EAKxB9B,QAAQ,EAAE0B,SAAS,CAACI,IAAI;EAKxB5B,SAAS,EAAEwB,SAAS,CAACE,MAAM;EAK3BzB,KAAK,EAAEuB,SAAS,CAACK,MAAM;EAKvB3B,QAAQ,EAAEsB,SAAS,CAACM,IAAI;EAKxB3B,MAAM,EAAEqB,SAAS,CAACM,IAAAA;AACpB,CAAC,GAAA,EAAA,CAAA;AAEDxC,KAAK,CAACyC,YAAY,GAAG;AACnBlC,EAAAA,QAAQ,EAAE,KAAA;AACZ,CAAC;;;;"}
|
|
@@ -3,27 +3,31 @@ import styled, { css } from 'styled-components';
|
|
|
3
3
|
import { applyDefaultTheme } from '../../utils/defaultTheme.js';
|
|
4
4
|
|
|
5
5
|
const radioSize = '18px';
|
|
6
|
-
const
|
|
7
|
-
return prop !== 'theme' && !prop.startsWith('$');
|
|
8
|
-
};
|
|
9
|
-
const RadioLabel = styled.div.withConfig({
|
|
10
|
-
shouldForwardProp
|
|
11
|
-
}).attrs(applyDefaultTheme)`
|
|
6
|
+
const RadioLabel = styled.div.attrs(applyDefaultTheme)`
|
|
12
7
|
padding-left: ${math(`${radioSize} + 10px`)};
|
|
13
8
|
font-weight: 400;
|
|
14
9
|
font-size: 0.875rem;
|
|
10
|
+
pointer-events: none;
|
|
15
11
|
|
|
16
12
|
${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))};
|
|
17
13
|
`;
|
|
18
|
-
const Radio = styled.label.
|
|
19
|
-
shouldForwardProp
|
|
20
|
-
}).attrs(applyDefaultTheme)`
|
|
14
|
+
const Radio = styled.label.attrs(applyDefaultTheme)`
|
|
21
15
|
display: block;
|
|
22
16
|
position: relative;
|
|
23
|
-
cursor: pointer;
|
|
17
|
+
cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
|
|
24
18
|
line-height: ${radioSize};
|
|
25
19
|
user-select: none;
|
|
26
20
|
|
|
21
|
+
input[type='radio'] {
|
|
22
|
+
position: absolute;
|
|
23
|
+
opacity: 0;
|
|
24
|
+
width: ${radioSize};
|
|
25
|
+
height: ${radioSize};
|
|
26
|
+
margin: 0;
|
|
27
|
+
cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
|
|
28
|
+
z-index: 1;
|
|
29
|
+
}
|
|
30
|
+
|
|
27
31
|
&::before {
|
|
28
32
|
content: '';
|
|
29
33
|
position: absolute;
|
|
@@ -31,9 +35,16 @@ const Radio = styled.label.withConfig({
|
|
|
31
35
|
width: ${radioSize};
|
|
32
36
|
height: ${radioSize};
|
|
33
37
|
top: 0;
|
|
38
|
+
left: 0;
|
|
34
39
|
border-radius: 50%;
|
|
35
40
|
transition: all 200ms;
|
|
36
41
|
box-sizing: border-box;
|
|
42
|
+
pointer-events: none;
|
|
43
|
+
|
|
44
|
+
/* Apply checked styling based on $isChecked prop */
|
|
45
|
+
${props => props.$isChecked && css`
|
|
46
|
+
border-color: ${props.theme.getColor('emerald-500')};
|
|
47
|
+
`}
|
|
37
48
|
}
|
|
38
49
|
|
|
39
50
|
&::after {
|
|
@@ -44,30 +55,32 @@ const Radio = styled.label.withConfig({
|
|
|
44
55
|
top: 5px;
|
|
45
56
|
left: 5px;
|
|
46
57
|
border-radius: 50%;
|
|
58
|
+
background: transparent;
|
|
47
59
|
transform: scale(0);
|
|
48
60
|
transition: all 200ms;
|
|
61
|
+
pointer-events: none;
|
|
62
|
+
|
|
63
|
+
/* Apply checked styling based on $isChecked prop */
|
|
64
|
+
${props => props.$isChecked && css`
|
|
65
|
+
background: ${props.theme.getColor('emerald-500')};
|
|
66
|
+
transform: scale(1);
|
|
67
|
+
`}
|
|
49
68
|
}
|
|
50
69
|
|
|
51
|
-
|
|
52
|
-
|
|
70
|
+
/* Fallback: :has() selector for browsers that support it */
|
|
71
|
+
&:has(input[type='radio']:checked) {
|
|
72
|
+
&::before {
|
|
53
73
|
border-color: ${props => props.theme.getColor('emerald-500')};
|
|
54
74
|
}
|
|
55
75
|
|
|
56
|
-
|
|
76
|
+
&::after {
|
|
57
77
|
background: ${props => props.theme.getColor('emerald-500')};
|
|
58
78
|
transform: scale(1);
|
|
59
79
|
}
|
|
60
|
-
|
|
61
|
-
${RadioLabel} {
|
|
62
|
-
opacity: 1;
|
|
63
|
-
}
|
|
64
80
|
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
opacity: 0;
|
|
69
|
-
pointer-events: none;
|
|
70
|
-
}
|
|
81
|
+
|
|
82
|
+
input[type='radio']:checked + ${RadioLabel} {
|
|
83
|
+
opacity: 1;
|
|
71
84
|
}
|
|
72
85
|
|
|
73
86
|
${props => props.readOnly && css`
|
|
@@ -80,6 +93,10 @@ const Radio = styled.label.withConfig({
|
|
|
80
93
|
opacity: 0.5;
|
|
81
94
|
cursor: not-allowed;
|
|
82
95
|
user-select: text;
|
|
96
|
+
|
|
97
|
+
input[type='radio'] {
|
|
98
|
+
cursor: not-allowed;
|
|
99
|
+
}
|
|
83
100
|
`}
|
|
84
101
|
`;
|
|
85
102
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.styled.js","sources":["../../../src/components/inputs/Radio/Radio.styled.js"],"sourcesContent":["import { math } from 'polished';\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst radioSize = '18px';\n\
|
|
1
|
+
{"version":3,"file":"Radio.styled.js","sources":["../../../src/components/inputs/Radio/Radio.styled.js"],"sourcesContent":["import { math } from 'polished';\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst radioSize = '18px';\n\nexport const RadioLabel = styled.div.attrs(applyDefaultTheme)`\n padding-left: ${math(`${radioSize} + 10px`)};\n font-weight: 400;\n font-size: 0.875rem;\n pointer-events: none;\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('gray-600')\n )};\n`;\n\nexport const Radio = styled.label.attrs(applyDefaultTheme)`\n display: block;\n position: relative;\n cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};\n line-height: ${radioSize};\n user-select: none;\n\n input[type='radio'] {\n position: absolute;\n opacity: 0;\n width: ${radioSize};\n height: ${radioSize};\n margin: 0;\n cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};\n z-index: 1;\n }\n\n &::before {\n content: '';\n position: absolute;\n border: 2px solid ${props => props.theme.getColor('gray-300')};\n width: ${radioSize};\n height: ${radioSize};\n top: 0;\n left: 0;\n border-radius: 50%;\n transition: all 200ms;\n box-sizing: border-box;\n pointer-events: none;\n\n /* Apply checked styling based on $isChecked prop */\n ${props =>\n props.$isChecked &&\n css`\n border-color: ${props.theme.getColor('emerald-500')};\n `}\n }\n\n &::after {\n content: '';\n position: absolute;\n width: 8px;\n height: 8px;\n top: 5px;\n left: 5px;\n border-radius: 50%;\n background: transparent;\n transform: scale(0);\n transition: all 200ms;\n pointer-events: none;\n\n /* Apply checked styling based on $isChecked prop */\n ${props =>\n props.$isChecked &&\n css`\n background: ${props.theme.getColor('emerald-500')};\n transform: scale(1);\n `}\n }\n\n /* Fallback: :has() selector for browsers that support it */\n &:has(input[type='radio']:checked) {\n &::before {\n border-color: ${props => props.theme.getColor('emerald-500')};\n }\n\n &::after {\n background: ${props => props.theme.getColor('emerald-500')};\n transform: scale(1);\n }\n }\n\n input[type='radio']:checked + ${RadioLabel} {\n opacity: 1;\n }\n\n ${props =>\n props.readOnly &&\n css`\n opacity: 0.5;\n pointer-events: none;\n user-select: text;\n `}\n\n ${props =>\n props.disabled &&\n css`\n opacity: 0.5;\n cursor: not-allowed;\n user-select: text;\n\n input[type='radio'] {\n cursor: not-allowed;\n }\n `}\n`;\n"],"names":["radioSize","RadioLabel","styled","div","attrs","applyDefaultTheme","math","props","theme","themeProp","getColor","Radio","label","disabled","$isChecked","css","readOnly"],"mappings":";;;;AAIA,MAAMA,SAAS,GAAG,MAAM,CAAA;AAEjB,MAAMC,UAAU,GAAGC,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC7D,gBAAA,EAAkBC,IAAI,CAAC,CAAGN,EAAAA,SAAS,SAAS,CAAC,CAAA;AAC7C;AACA;AACA;AACA;AACA,EAAIO,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL,EAAC;AAEM,MAAMC,KAAK,GAAGT,MAAM,CAACU,KAAK,CAACR,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC1D;AACA;AACA,UAAYE,EAAAA,KAAK,IAAKA,KAAK,CAACM,QAAQ,GAAG,aAAa,GAAG,SAAU,CAAA;AACjE,eAAA,EAAiBb,SAAS,CAAA;AAC1B;AACA;AACA;AACA;AACA;AACA,WAAA,EAAaA,SAAS,CAAA;AACtB,YAAA,EAAcA,SAAS,CAAA;AACvB;AACA,YAAcO,EAAAA,KAAK,IAAKA,KAAK,CAACM,QAAQ,GAAG,aAAa,GAAG,SAAU,CAAA;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,sBAAwBN,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,CAAA;AACjE,WAAA,EAAaV,SAAS,CAAA;AACtB,YAAA,EAAcA,SAAS,CAAA;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMO,KAAK,IACLA,KAAK,CAACO,UAAU,IAChBC,GAAG,CAAA;AACT,sBAAA,EAAwBR,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAAA;AAC3D,MAAO,CAAA,CAAA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMH,KAAK,IACLA,KAAK,CAACO,UAAU,IAChBC,GAAG,CAAA;AACT,oBAAA,EAAsBR,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAAA;AACzD;AACA,MAAO,CAAA,CAAA;AACP;AACA;AACA;AACA;AACA;AACA,oBAAsBH,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAAA;AAClE;AACA;AACA;AACA,kBAAoBH,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAAA;AAChE;AACA;AACA;AACA;AACA,gCAAA,EAAkCT,UAAU,CAAA;AAC5C;AACA;AACA;AACA,EAAA,EAAIM,KAAK,IACLA,KAAK,CAACS,QAAQ,IACdD,GAAG,CAAA;AACP;AACA;AACA;AACA,IAAK,CAAA,CAAA;AACL;AACA,EAAA,EAAIR,KAAK,IACLA,KAAK,CAACM,QAAQ,IACdE,GAAG,CAAA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAK,CAAA,CAAA;AACL;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Colors
|
|
3
3
|
*/
|
|
4
|
-
|
|
4
|
+
$colors: (
|
|
5
5
|
'orange-600': #634e01,
|
|
6
6
|
'orange-500': #ff9900,
|
|
7
7
|
'orange-400': #ffcb7e,
|
|
@@ -35,4 +35,4 @@ export const colors = {
|
|
|
35
35
|
'signal-green-400': #a3ffe0,
|
|
36
36
|
'black': #202435,
|
|
37
37
|
'white': #ffffff
|
|
38
|
-
|
|
38
|
+
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
2
|
import React__default from 'react';
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
|
-
import { ContextMenuItem as ContextMenuItem$1, IconContainer, SublevelIconContainer } from './ContextMenuItem.styled.js';
|
|
4
|
+
import { ContextMenuItem as ContextMenuItem$1, IconContainer, Label, SublevelIconContainer } from './ContextMenuItem.styled.js';
|
|
5
5
|
import { ReactComponent as SvgTriangleRight } from '../../../icons/triangle-right.svg.js';
|
|
6
6
|
|
|
7
7
|
const ContextMenuItem = React__default.forwardRef(function ContextMenuItem({
|
|
@@ -23,7 +23,7 @@ const ContextMenuItem = React__default.forwardRef(function ContextMenuItem({
|
|
|
23
23
|
className: opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item'
|
|
24
24
|
}, props, {
|
|
25
25
|
role: "menuitem"
|
|
26
|
-
}), icon && React__default.createElement(IconContainer, null, icon), React__default.createElement(
|
|
26
|
+
}), icon && React__default.createElement(IconContainer, null, icon), React__default.createElement(Label, null, title), opensSublevel && React__default.createElement(SublevelIconContainer, null, React__default.createElement(SvgTriangleRight, null)));
|
|
27
27
|
});
|
|
28
28
|
ContextMenuItem.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
29
29
|
title: PropTypes.string.isRequired,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuItem.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './ContextMenuItem.styled';\n\nimport { ReactComponent as TriangleRightIcon } from '../../../../icons/triangle-right.svg';\n\n/**\n * Single context menu item.\n *\n * See the documentation for `ContextMenu` for usage examples.\n *\n * ### Import\n *\n * ``` js\n * import { ContextMenuItem } from '@ntbjs/react-components/widgets/ContextMenu'\n * // or\n * import ContextMenuItem from '@ntbjs/react-components/widgets/ContextMenu/ContextMenuItem'\n * ```\n */\nconst ContextMenuItem = React.forwardRef(function ContextMenuItem(\n { title, icon, onClickEffect, opensSublevel, hoverColors, hoverBackgroundColors, ...props },\n forwardedRef\n) {\n return (\n <S.ContextMenuItem\n ref={forwardedRef}\n $icon={icon}\n onClick={onClickEffect}\n $hoverColors={hoverColors}\n $hoverBackgroundColors={hoverBackgroundColors}\n $openssublevel={opensSublevel}\n className={opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item'}\n {...props}\n role=\"menuitem\"\n >\n {icon && <S.IconContainer>{icon}</S.IconContainer>}\n <
|
|
1
|
+
{"version":3,"file":"ContextMenuItem.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './ContextMenuItem.styled';\n\nimport { ReactComponent as TriangleRightIcon } from '../../../../icons/triangle-right.svg';\n\n/**\n * Single context menu item.\n *\n * See the documentation for `ContextMenu` for usage examples.\n *\n * ### Import\n *\n * ``` js\n * import { ContextMenuItem } from '@ntbjs/react-components/widgets/ContextMenu'\n * // or\n * import ContextMenuItem from '@ntbjs/react-components/widgets/ContextMenu/ContextMenuItem'\n * ```\n */\nconst ContextMenuItem = React.forwardRef(function ContextMenuItem(\n { title, icon, onClickEffect, opensSublevel, hoverColors, hoverBackgroundColors, ...props },\n forwardedRef\n) {\n return (\n <S.ContextMenuItem\n ref={forwardedRef}\n $icon={icon}\n onClick={onClickEffect}\n $hoverColors={hoverColors}\n $hoverBackgroundColors={hoverBackgroundColors}\n $openssublevel={opensSublevel}\n className={opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item'}\n {...props}\n role=\"menuitem\"\n >\n {icon && <S.IconContainer>{icon}</S.IconContainer>}\n <S.Label>{title}</S.Label>\n {opensSublevel && (\n <S.SublevelIconContainer>\n <TriangleRightIcon />\n </S.SublevelIconContainer>\n )}\n </S.ContextMenuItem>\n );\n});\n\nContextMenuItem.propTypes = {\n /**\n * Menu item text\n */\n title: PropTypes.string.isRequired,\n\n /**\n * Optional icon (left side)\n */\n icon: PropTypes.element,\n\n /**\n * Function to trigger when the item is clicked\n */\n onClickEffect: PropTypes.func,\n\n /**\n * Whether the `ContextMenuItem` opens another `ContextMenu`\n */\n opensSublevel: PropTypes.bool,\n\n /**\n * Array of custom hover text/icon color in the form of hex-strings (e.g. `'#FFFFFF'`).\n * Must contain two colors, where the first is for dark-mode and the second is for light-mode.\n */\n hoverColors: PropTypes.arrayOf(PropTypes.string),\n\n /**\n * Array of custom hover background colors in the form of hex-strings (e.g. `'#FFFFFF'`).\n * Must contain two colors, where the first is for dark-mode and the second is for light-mode.\n */\n hoverBackgroundColors: PropTypes.arrayOf(PropTypes.string)\n};\n\nContextMenuItem.defaultProps = {\n icon: undefined,\n hoverColors: undefined,\n hoverBackgroundColors: undefined,\n opensSublevel: false\n};\n\nexport default ContextMenuItem;\n"],"names":["ContextMenuItem","React","forwardRef","title","icon","onClickEffect","opensSublevel","hoverColors","hoverBackgroundColors","props","forwardedRef","createElement","S","_extends","ref","$icon","onClick","$hoverColors","$hoverBackgroundColors","$openssublevel","className","role","TriangleRightIcon","propTypes","process","env","NODE_ENV","PropTypes","string","isRequired","element","func","bool","arrayOf","defaultProps","undefined"],"mappings":";;;;;;AAmBMA,MAAAA,eAAe,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,eAAeA,CAC/D;EAAEG,KAAK;EAAEC,IAAI;EAAEC,aAAa;EAAEC,aAAa;EAAEC,WAAW;EAAEC,qBAAqB;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAC3FC,YAAY,EACZ;EACA,OACET,cAAA,CAAAU,aAAA,CAACC,iBAAiB,EAAAC,QAAA,CAAA;AAChBC,IAAAA,GAAG,EAAEJ,YAAa;AAClBK,IAAAA,KAAK,EAAEX,IAAK;AACZY,IAAAA,OAAO,EAAEX,aAAc;AACvBY,IAAAA,YAAY,EAAEV,WAAY;AAC1BW,IAAAA,sBAAsB,EAAEV,qBAAsB;AAC9CW,IAAAA,cAAc,EAAEb,aAAc;AAC9Bc,IAAAA,SAAS,EAAEd,aAAa,GAAG,kCAAkC,GAAG,mBAAA;AAAoB,GAAA,EAChFG,KAAK,EAAA;AACTY,IAAAA,IAAI,EAAC,UAAA;AAAU,GAAA,CAAA,EAEdjB,IAAI,IAAIH,cAAA,CAAAU,aAAA,CAACC,aAAe,QAAER,IAAsB,CAAC,EAClDH,cAAA,CAAAU,aAAA,CAACC,KAAO,EAAA,IAAA,EAAET,KAAe,CAAC,EACzBG,aAAa,IACZL,cAAA,CAAAU,aAAA,CAACC,qBAAuB,EACtBX,IAAAA,EAAAA,cAAA,CAAAU,aAAA,CAACW,gBAAiB,EAAE,IAAA,CACG,CAEV,CAAC,CAAA;AAExB,CAAC,EAAC;AAEFtB,eAAe,CAACuB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AAI1BvB,EAAAA,KAAK,EAAEwB,SAAS,CAACC,MAAM,CAACC,UAAU;EAKlCzB,IAAI,EAAEuB,SAAS,CAACG,OAAO;EAKvBzB,aAAa,EAAEsB,SAAS,CAACI,IAAI;EAK7BzB,aAAa,EAAEqB,SAAS,CAACK,IAAI;EAM7BzB,WAAW,EAAEoB,SAAS,CAACM,OAAO,CAACN,SAAS,CAACC,MAAM,CAAC;AAMhDpB,EAAAA,qBAAqB,EAAEmB,SAAS,CAACM,OAAO,CAACN,SAAS,CAACC,MAAM,CAAA;AAC3D,CAAC,GAAA,EAAA,CAAA;AAED5B,eAAe,CAACkC,YAAY,GAAG;AAC7B9B,EAAAA,IAAI,EAAE+B,SAAS;AACf5B,EAAAA,WAAW,EAAE4B,SAAS;AACtB3B,EAAAA,qBAAqB,EAAE2B,SAAS;AAChC7B,EAAAA,aAAa,EAAE,KAAA;AACjB,CAAC;;;;"}
|
|
@@ -25,11 +25,6 @@ const ContextMenuItem = styled.span.withConfig({
|
|
|
25
25
|
padding-left: 28px;
|
|
26
26
|
`}
|
|
27
27
|
|
|
28
|
-
:not(:last-of-type) {
|
|
29
|
-
border-bottom: 1px solid;
|
|
30
|
-
|
|
31
|
-
${props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200'))}
|
|
32
|
-
}
|
|
33
28
|
|
|
34
29
|
:last-of-type {
|
|
35
30
|
height: 32px;
|
|
@@ -78,9 +73,14 @@ const SublevelIconContainer = styled.span.withConfig({
|
|
|
78
73
|
padding-left: 24px;
|
|
79
74
|
|
|
80
75
|
svg {
|
|
81
|
-
|
|
76
|
+
height: 6px;
|
|
77
|
+
width: 6px;
|
|
82
78
|
}
|
|
83
79
|
`;
|
|
80
|
+
const Label = styled.span`
|
|
81
|
+
align-items: center;
|
|
82
|
+
display: flex;
|
|
83
|
+
`;
|
|
84
84
|
|
|
85
|
-
export { ContextMenuItem, IconContainer, SublevelIconContainer };
|
|
85
|
+
export { ContextMenuItem, IconContainer, Label, SublevelIconContainer };
|
|
86
86
|
//# sourceMappingURL=ContextMenuItem.styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuItem.styled.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const ContextMenuItem = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n align-items: center;\n cursor: pointer;\n display: flex;\n font-family: ${props => props.theme.primaryFontFamily};\n font-size: 0.875rem;\n font-weight: normal;\n height: 31px;\n min-width: 160px;\n padding: ${props => (props.$openssublevel ? '0 8px' : '0 28px 0 8px')};\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-100'),\n props.theme.getColor('gray-700')\n )}\n\n ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-700'), '#FEFEFE')}\n\n ${props =>\n !props.$icon &&\n css`\n padding-left: 28px;\n `}\n\n
|
|
1
|
+
{"version":3,"file":"ContextMenuItem.styled.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const ContextMenuItem = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n align-items: center;\n cursor: pointer;\n display: flex;\n font-family: ${props => props.theme.primaryFontFamily};\n font-size: 0.875rem;\n font-weight: normal;\n height: 31px;\n min-width: 160px;\n padding: ${props => (props.$openssublevel ? '0 8px' : '0 28px 0 8px')};\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-100'),\n props.theme.getColor('gray-700')\n )}\n\n ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-700'), '#FEFEFE')}\n\n ${props =>\n !props.$icon &&\n css`\n padding-left: 28px;\n `}\n\n\n :last-of-type {\n height: 32px;\n }\n\n &:hover {\n cursor: pointer;\n\n ${props =>\n props.theme.themeProp(\n 'background-color',\n props.theme.getColor('gray-600'),\n props.theme.getColor('gray-200')\n )}\n }\n\n ${props =>\n props.$openssublevelhoverColors &&\n props.$hoverColors[0] &&\n props.$hoverColors[1] &&\n css`\n &&:hover {\n ${props => props.theme.themeProp('color', props.hoverColors[0], props.hoverColors[1])}\n }\n `}\n\n ${props =>\n props.$hoverBackgroundColors &&\n props.$hoverBackgroundColors[0] &&\n props.$hoverBackgroundColors[1] &&\n css`\n &&:hover {\n ${props =>\n props.theme.themeProp(\n 'background-color',\n props.$hoverBackgroundColors[0],\n props.$hoverBackgroundColors[1]\n )}\n }\n `}\n`;\n\nexport const IconContainer = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n align-items: center;\n display: flex;\n height: fit-content;\n max-width: 12px;\n margin-right: 8px;\n\n svg {\n height: 12px;\n }\n`;\n\nexport const SublevelIconContainer = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n align-items: center;\n display: flex;\n height: fit-content;\n max-width: 12px;\n margin-left: auto;\n margin-right: 8px;\n padding-left: 24px;\n\n svg {\n height: 6px;\n width: 6px;\n }\n`;\n\nexport const Label = styled.span`\n align-items: center;\n display: flex;\n`;\n"],"names":["shouldForwardProp","prop","startsWith","ContextMenuItem","styled","span","withConfig","attrs","applyDefaultTheme","props","theme","primaryFontFamily","$openssublevel","themeProp","getColor","$icon","css","$openssublevelhoverColors","$hoverColors","hoverColors","$hoverBackgroundColors","IconContainer","SublevelIconContainer","Label"],"mappings":"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"}
|
|
@@ -7,11 +7,7 @@ const shouldForwardProp = prop => {
|
|
|
7
7
|
const ContextMenuItemsGroup = styled.div.withConfig({
|
|
8
8
|
shouldForwardProp
|
|
9
9
|
}).attrs(applyDefaultTheme)`
|
|
10
|
-
:not(:last-child) {
|
|
11
|
-
border-bottom: 1px solid;
|
|
12
10
|
|
|
13
|
-
${props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200'))}
|
|
14
|
-
}
|
|
15
11
|
|
|
16
12
|
> * {
|
|
17
13
|
border-bottom: none !important;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuItemsGroup.styled.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.styled.js"],"sourcesContent":["import styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const ContextMenuItemsGroup = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n
|
|
1
|
+
{"version":3,"file":"ContextMenuItemsGroup.styled.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.styled.js"],"sourcesContent":["import styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const ContextMenuItemsGroup = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n\n\n > * {\n border-bottom: none !important;\n }\n\n > *:not(:last-child) {\n height: 32px;\n }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","ContextMenuItemsGroup","styled","div","withConfig","attrs","applyDefaultTheme"],"mappings":";;;AAGA,MAAMA,iBAAiB,GAAGC,IAAI,IAAI;EAChC,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC,CAAA;AAClD,CAAC,CAAA;AAEM,MAAMC,qBAAqB,GAAGC,MAAM,CAACC,GAAG,CAC5CC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ntbjs/react-components",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.2-rc.1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -46,9 +46,14 @@
|
|
|
46
46
|
},
|
|
47
47
|
"homepage": "https://bitbucket.org/NTB-NO/react-components/src/master/",
|
|
48
48
|
"engines": {
|
|
49
|
-
"node": ">=
|
|
49
|
+
"node": ">=20.0.0",
|
|
50
50
|
"npm": ">=10.0.0"
|
|
51
51
|
},
|
|
52
|
+
"peerDependencies": {
|
|
53
|
+
"react": ">=16.8.0",
|
|
54
|
+
"react-dom": ">=16.8.0",
|
|
55
|
+
"styled-components": ">=5.0.0"
|
|
56
|
+
},
|
|
52
57
|
"devDependencies": {
|
|
53
58
|
"@babel/core": "^7.28.5",
|
|
54
59
|
"@babel/eslint-parser": "^7.13.14",
|
|
@@ -80,6 +85,8 @@
|
|
|
80
85
|
"madge": "^8.0.0",
|
|
81
86
|
"postcss": "^8.3.0",
|
|
82
87
|
"prop-types": "^15.7.2",
|
|
88
|
+
"react": "^18.3.1",
|
|
89
|
+
"react-dom": "^18.3.1",
|
|
83
90
|
"rollup": "^2.50.6",
|
|
84
91
|
"rollup-plugin-copy": "^3.3.0",
|
|
85
92
|
"rollup-plugin-delete": "^2.0.0",
|
|
@@ -91,6 +98,7 @@
|
|
|
91
98
|
"sass": "^1.97.2",
|
|
92
99
|
"sass-loader": "^10.1.1",
|
|
93
100
|
"storybook": "^10.1.11",
|
|
101
|
+
"styled-components": "^6.1.19",
|
|
94
102
|
"url-loader": "^4.1.1"
|
|
95
103
|
},
|
|
96
104
|
"dependencies": {
|
|
@@ -106,7 +114,6 @@
|
|
|
106
114
|
"react-select": "^5.10.2",
|
|
107
115
|
"react-select-async-paginate": "^0.7.11",
|
|
108
116
|
"react-spinners": "^0.17.0",
|
|
109
|
-
"resize-observer-polyfill": "^1.5.1"
|
|
110
|
-
"styled-components": "^6.1.19"
|
|
117
|
+
"resize-observer-polyfill": "^1.5.1"
|
|
111
118
|
}
|
|
112
119
|
}
|
package/styles/.config.scss
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Colors
|
|
3
3
|
*/
|
|
4
|
-
|
|
4
|
+
$colors: (
|
|
5
5
|
'orange-600': #634e01,
|
|
6
6
|
'orange-500': #ff9900,
|
|
7
7
|
'orange-400': #ffcb7e,
|
|
@@ -35,4 +35,4 @@ export const colors = {
|
|
|
35
35
|
'signal-green-400': #a3ffe0,
|
|
36
36
|
'black': #202435,
|
|
37
37
|
'white': #ffffff
|
|
38
|
-
|
|
38
|
+
);
|