@elliemae/ds-controlled-form 2.4.3-rc.0 → 2.4.3-rc.4
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.
|
@@ -86,7 +86,7 @@ const DSControlledCheckbox = props => {
|
|
|
86
86
|
"aria-controls": ariaControls || legacyAriaControls,
|
|
87
87
|
disabled: disabled,
|
|
88
88
|
readOnly: readOnly,
|
|
89
|
-
onClick: onChange,
|
|
89
|
+
onClick: !disabled && onChange,
|
|
90
90
|
"aria-checked": checked
|
|
91
91
|
}, restGlobals), {}, {
|
|
92
92
|
tabIndex: 0
|
|
@@ -101,15 +101,20 @@ const DSControlledCheckbox = props => {
|
|
|
101
101
|
disabled: disabled,
|
|
102
102
|
readOnly: readOnly,
|
|
103
103
|
onChange: onChange
|
|
104
|
-
}, restGlobals))), label && /*#__PURE__*/
|
|
104
|
+
}, restGlobals))), label && /*#__PURE__*/jsxRuntime.jsx(styles.StyledLabel, _objectSpread(_objectSpread({
|
|
105
105
|
htmlFor: id,
|
|
106
106
|
disabled: disabled,
|
|
107
107
|
readOnly: readOnly,
|
|
108
108
|
checked: checked,
|
|
109
|
+
disabled: disabled,
|
|
109
110
|
"data-testid": "ds-checkbox-label",
|
|
110
111
|
wrapLabel: wrapLabel
|
|
111
|
-
},
|
|
112
|
-
|
|
112
|
+
}, !disabled && (ariaControls || legacyAriaControls) ? {
|
|
113
|
+
onClick: onChange
|
|
114
|
+
} : {}), {}, {
|
|
115
|
+
children: wrapLabel ? /*#__PURE__*/_jsx__default["default"](styles.StyledWrapLabel, {}, void 0, label) : /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
|
|
116
|
+
value: label
|
|
117
|
+
})
|
|
113
118
|
}))]
|
|
114
119
|
}));
|
|
115
120
|
};
|
package/cjs/checkbox/styles.js
CHANGED
|
@@ -105,9 +105,6 @@ const checkboxStyles = dsSystem.css`
|
|
|
105
105
|
&:hover {
|
|
106
106
|
cursor: pointer;
|
|
107
107
|
}
|
|
108
|
-
&:disabled {
|
|
109
|
-
cursor: not-allowed;
|
|
110
|
-
}
|
|
111
108
|
width: 100%;
|
|
112
109
|
height: 100%;
|
|
113
110
|
position: absolute;
|
|
@@ -120,40 +117,58 @@ const StyledInput = dsSystem.styled('input', {
|
|
|
120
117
|
slot: theming.DSCheckboxSlots.INPUT
|
|
121
118
|
})`
|
|
122
119
|
${checkboxStyles}
|
|
120
|
+
&:disabled {
|
|
121
|
+
cursor: not-allowed;
|
|
122
|
+
}
|
|
123
123
|
`;
|
|
124
124
|
const StyledInputMixed = dsSystem.styled('div', {
|
|
125
125
|
name: theming.DSCheckboxName,
|
|
126
126
|
slot: theming.DSCheckboxSlots.INPUT
|
|
127
127
|
})`
|
|
128
128
|
${checkboxStyles}
|
|
129
|
+
${_ref11 => {
|
|
130
|
+
let {
|
|
131
|
+
disabled
|
|
132
|
+
} = _ref11;
|
|
133
|
+
return disabled ? `&:hover {
|
|
134
|
+
cursor: not-allowed;
|
|
135
|
+
}` : '';
|
|
136
|
+
}}
|
|
129
137
|
`;
|
|
130
138
|
const StyledLabel = dsSystem.styled('label', {
|
|
131
139
|
name: theming.DSCheckboxName,
|
|
132
140
|
slot: theming.DSCheckboxSlots.LABEL
|
|
133
141
|
})`
|
|
134
|
-
|
|
135
|
-
cursor: pointer;
|
|
136
|
-
}
|
|
137
|
-
${_ref11 => {
|
|
142
|
+
${_ref12 => {
|
|
138
143
|
let {
|
|
139
144
|
wrapLabel,
|
|
140
145
|
theme
|
|
141
|
-
} =
|
|
146
|
+
} = _ref12;
|
|
142
147
|
return wrapLabel ? 'padding: 8px 0px 8px 8px;' : `padding-left: ${theme.space.xxs}`;
|
|
143
148
|
}};
|
|
144
149
|
|
|
145
|
-
color: ${
|
|
150
|
+
color: ${_ref13 => {
|
|
146
151
|
let {
|
|
147
152
|
theme,
|
|
148
153
|
disabled,
|
|
149
|
-
readOnly
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
return disabled && checked !== true || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800];
|
|
154
|
+
readOnly
|
|
155
|
+
} = _ref13;
|
|
156
|
+
return disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800];
|
|
153
157
|
}};
|
|
154
158
|
font-size: 13px;
|
|
155
159
|
line-height: 13px;
|
|
156
160
|
display: inherit;
|
|
161
|
+
|
|
162
|
+
${_ref14 => {
|
|
163
|
+
let {
|
|
164
|
+
disabled
|
|
165
|
+
} = _ref14;
|
|
166
|
+
return disabled ? `&:hover {
|
|
167
|
+
cursor: not-allowed;
|
|
168
|
+
}` : `&:hover {
|
|
169
|
+
cursor: pointer;
|
|
170
|
+
}`;
|
|
171
|
+
}}
|
|
157
172
|
`;
|
|
158
173
|
const StyledWrapLabel = dsSystem.styled('span')``;
|
|
159
174
|
|
|
@@ -76,7 +76,7 @@ const DSControlledCheckbox = props => {
|
|
|
76
76
|
"aria-controls": ariaControls || legacyAriaControls,
|
|
77
77
|
disabled: disabled,
|
|
78
78
|
readOnly: readOnly,
|
|
79
|
-
onClick: onChange,
|
|
79
|
+
onClick: !disabled && onChange,
|
|
80
80
|
"aria-checked": checked
|
|
81
81
|
}, restGlobals), {}, {
|
|
82
82
|
tabIndex: 0
|
|
@@ -91,15 +91,20 @@ const DSControlledCheckbox = props => {
|
|
|
91
91
|
disabled: disabled,
|
|
92
92
|
readOnly: readOnly,
|
|
93
93
|
onChange: onChange
|
|
94
|
-
}, restGlobals))), label && /*#__PURE__*/
|
|
94
|
+
}, restGlobals))), label && /*#__PURE__*/jsx(StyledLabel, _objectSpread(_objectSpread({
|
|
95
95
|
htmlFor: id,
|
|
96
96
|
disabled: disabled,
|
|
97
97
|
readOnly: readOnly,
|
|
98
98
|
checked: checked,
|
|
99
|
+
disabled: disabled,
|
|
99
100
|
"data-testid": "ds-checkbox-label",
|
|
100
101
|
wrapLabel: wrapLabel
|
|
101
|
-
},
|
|
102
|
-
|
|
102
|
+
}, !disabled && (ariaControls || legacyAriaControls) ? {
|
|
103
|
+
onClick: onChange
|
|
104
|
+
} : {}), {}, {
|
|
105
|
+
children: wrapLabel ? /*#__PURE__*/_jsx(StyledWrapLabel, {}, void 0, label) : /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
|
|
106
|
+
value: label
|
|
107
|
+
})
|
|
103
108
|
}))]
|
|
104
109
|
}));
|
|
105
110
|
};
|
package/esm/checkbox/styles.js
CHANGED
|
@@ -101,9 +101,6 @@ const checkboxStyles = css`
|
|
|
101
101
|
&:hover {
|
|
102
102
|
cursor: pointer;
|
|
103
103
|
}
|
|
104
|
-
&:disabled {
|
|
105
|
-
cursor: not-allowed;
|
|
106
|
-
}
|
|
107
104
|
width: 100%;
|
|
108
105
|
height: 100%;
|
|
109
106
|
position: absolute;
|
|
@@ -116,40 +113,58 @@ const StyledInput = styled('input', {
|
|
|
116
113
|
slot: DSCheckboxSlots.INPUT
|
|
117
114
|
})`
|
|
118
115
|
${checkboxStyles}
|
|
116
|
+
&:disabled {
|
|
117
|
+
cursor: not-allowed;
|
|
118
|
+
}
|
|
119
119
|
`;
|
|
120
120
|
const StyledInputMixed = styled('div', {
|
|
121
121
|
name: DSCheckboxName,
|
|
122
122
|
slot: DSCheckboxSlots.INPUT
|
|
123
123
|
})`
|
|
124
124
|
${checkboxStyles}
|
|
125
|
+
${_ref11 => {
|
|
126
|
+
let {
|
|
127
|
+
disabled
|
|
128
|
+
} = _ref11;
|
|
129
|
+
return disabled ? `&:hover {
|
|
130
|
+
cursor: not-allowed;
|
|
131
|
+
}` : '';
|
|
132
|
+
}}
|
|
125
133
|
`;
|
|
126
134
|
const StyledLabel = styled('label', {
|
|
127
135
|
name: DSCheckboxName,
|
|
128
136
|
slot: DSCheckboxSlots.LABEL
|
|
129
137
|
})`
|
|
130
|
-
|
|
131
|
-
cursor: pointer;
|
|
132
|
-
}
|
|
133
|
-
${_ref11 => {
|
|
138
|
+
${_ref12 => {
|
|
134
139
|
let {
|
|
135
140
|
wrapLabel,
|
|
136
141
|
theme
|
|
137
|
-
} =
|
|
142
|
+
} = _ref12;
|
|
138
143
|
return wrapLabel ? 'padding: 8px 0px 8px 8px;' : `padding-left: ${theme.space.xxs}`;
|
|
139
144
|
}};
|
|
140
145
|
|
|
141
|
-
color: ${
|
|
146
|
+
color: ${_ref13 => {
|
|
142
147
|
let {
|
|
143
148
|
theme,
|
|
144
149
|
disabled,
|
|
145
|
-
readOnly
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
return disabled && checked !== true || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800];
|
|
150
|
+
readOnly
|
|
151
|
+
} = _ref13;
|
|
152
|
+
return disabled || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800];
|
|
149
153
|
}};
|
|
150
154
|
font-size: 13px;
|
|
151
155
|
line-height: 13px;
|
|
152
156
|
display: inherit;
|
|
157
|
+
|
|
158
|
+
${_ref14 => {
|
|
159
|
+
let {
|
|
160
|
+
disabled
|
|
161
|
+
} = _ref14;
|
|
162
|
+
return disabled ? `&:hover {
|
|
163
|
+
cursor: not-allowed;
|
|
164
|
+
}` : `&:hover {
|
|
165
|
+
cursor: pointer;
|
|
166
|
+
}`;
|
|
167
|
+
}}
|
|
153
168
|
`;
|
|
154
169
|
const StyledWrapLabel = styled('span')``;
|
|
155
170
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-controlled-form",
|
|
3
|
-
"version": "2.4.3-rc.
|
|
3
|
+
"version": "2.4.3-rc.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Controllers",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -896,20 +896,20 @@
|
|
|
896
896
|
"build": "node ../../scripts/build/build.js"
|
|
897
897
|
},
|
|
898
898
|
"dependencies": {
|
|
899
|
-
"@elliemae/ds-button": "2.4.3-rc.
|
|
900
|
-
"@elliemae/ds-circular-progress-indicator": "2.4.3-rc.
|
|
901
|
-
"@elliemae/ds-controlled-form": "2.4.3-rc.
|
|
902
|
-
"@elliemae/ds-form": "2.4.3-rc.
|
|
903
|
-
"@elliemae/ds-form-layout-blocks": "2.4.3-rc.
|
|
904
|
-
"@elliemae/ds-grid": "2.4.3-rc.
|
|
905
|
-
"@elliemae/ds-icon": "2.4.3-rc.
|
|
906
|
-
"@elliemae/ds-icons": "2.4.3-rc.
|
|
907
|
-
"@elliemae/ds-pills": "2.4.3-rc.
|
|
908
|
-
"@elliemae/ds-popperjs": "2.4.3-rc.
|
|
909
|
-
"@elliemae/ds-props-helpers": "2.4.3-rc.
|
|
910
|
-
"@elliemae/ds-system": "2.4.3-rc.
|
|
911
|
-
"@elliemae/ds-tooltip": "2.4.3-rc.
|
|
912
|
-
"@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.
|
|
899
|
+
"@elliemae/ds-button": "2.4.3-rc.4",
|
|
900
|
+
"@elliemae/ds-circular-progress-indicator": "2.4.3-rc.4",
|
|
901
|
+
"@elliemae/ds-controlled-form": "2.4.3-rc.4",
|
|
902
|
+
"@elliemae/ds-form": "2.4.3-rc.4",
|
|
903
|
+
"@elliemae/ds-form-layout-blocks": "2.4.3-rc.4",
|
|
904
|
+
"@elliemae/ds-grid": "2.4.3-rc.4",
|
|
905
|
+
"@elliemae/ds-icon": "2.4.3-rc.4",
|
|
906
|
+
"@elliemae/ds-icons": "2.4.3-rc.4",
|
|
907
|
+
"@elliemae/ds-pills": "2.4.3-rc.4",
|
|
908
|
+
"@elliemae/ds-popperjs": "2.4.3-rc.4",
|
|
909
|
+
"@elliemae/ds-props-helpers": "2.4.3-rc.4",
|
|
910
|
+
"@elliemae/ds-system": "2.4.3-rc.4",
|
|
911
|
+
"@elliemae/ds-tooltip": "2.4.3-rc.4",
|
|
912
|
+
"@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.4",
|
|
913
913
|
"prop-types": "~15.7.2",
|
|
914
914
|
"react-desc": "~4.1.3",
|
|
915
915
|
"react-popper": "~2.2.5",
|