@elliemae/ds-controlled-form 2.4.2 → 2.4.3-rc.2

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 (6) hide show
  1. package/cjs/checkbox/ControlledCheckbox.js +9 -4
  2. package/cjs/checkbox/styles.js +28 -13
  3. package/esm/checkbox/ControlledCheckbox.js +9 -4
  4. package/esm/checkbox/styles.js +28 -13
  5. package/package.json +15 -15
  6. package/types/checkbox/react-desc-prop-types.d.ts +1 -0
package/cjs/checkbox/ControlledCheckbox.js CHANGED
@@ -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__*/_jsx__default["default"](styles.StyledLabel, {
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
- }, void 0, wrapLabel ? /*#__PURE__*/_jsx__default["default"](styles.StyledWrapLabel, {}, void 0, label) : /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
112
- value: label
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
- &:hover {
135
- cursor: pointer;
136
- }
137
- ${_ref11 => {
142
+ ${_ref12 => {
138
143
  let {
139
144
  wrapLabel,
140
145
  theme
141
- } = _ref11;
146
+ } = _ref12;
142
147
  return wrapLabel ? 'padding: 8px 0px 8px 8px;' : `padding-left: ${theme.space.xxs}`;
143
148
  }};
144
149
 
145
- color: ${_ref12 => {
150
+ color: ${_ref13 => {
146
151
  let {
147
152
  theme,
148
153
  disabled,
149
- readOnly,
150
- checked
151
- } = _ref12;
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
 
package/esm/checkbox/ControlledCheckbox.js CHANGED
@@ -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__*/_jsx(StyledLabel, {
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
- }, void 0, wrapLabel ? /*#__PURE__*/_jsx(StyledWrapLabel, {}, void 0, label) : /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
102
- value: label
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
- &:hover {
131
- cursor: pointer;
132
- }
133
- ${_ref11 => {
138
+ ${_ref12 => {
134
139
  let {
135
140
  wrapLabel,
136
141
  theme
137
- } = _ref11;
142
+ } = _ref12;
138
143
  return wrapLabel ? 'padding: 8px 0px 8px 8px;' : `padding-left: ${theme.space.xxs}`;
139
144
  }};
140
145
 
141
- color: ${_ref12 => {
146
+ color: ${_ref13 => {
142
147
  let {
143
148
  theme,
144
149
  disabled,
145
- readOnly,
146
- checked
147
- } = _ref12;
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.2",
3
+ "version": "2.4.3-rc.2",
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.2",
900
- "@elliemae/ds-circular-progress-indicator": "2.4.2",
901
- "@elliemae/ds-controlled-form": "2.4.2",
902
- "@elliemae/ds-form": "2.4.2",
903
- "@elliemae/ds-form-layout-blocks": "2.4.2",
904
- "@elliemae/ds-grid": "2.4.2",
905
- "@elliemae/ds-icon": "2.4.2",
906
- "@elliemae/ds-icons": "2.4.2",
907
- "@elliemae/ds-pills": "2.4.2",
908
- "@elliemae/ds-popperjs": "2.4.2",
909
- "@elliemae/ds-props-helpers": "2.4.2",
910
- "@elliemae/ds-system": "2.4.2",
911
- "@elliemae/ds-tooltip": "2.4.2",
912
- "@elliemae/ds-truncated-tooltip-text": "2.4.2",
899
+ "@elliemae/ds-button": "2.4.3-rc.2",
900
+ "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.2",
901
+ "@elliemae/ds-controlled-form": "2.4.3-rc.2",
902
+ "@elliemae/ds-form": "2.4.3-rc.2",
903
+ "@elliemae/ds-form-layout-blocks": "2.4.3-rc.2",
904
+ "@elliemae/ds-grid": "2.4.3-rc.2",
905
+ "@elliemae/ds-icon": "2.4.3-rc.2",
906
+ "@elliemae/ds-icons": "2.4.3-rc.2",
907
+ "@elliemae/ds-pills": "2.4.3-rc.2",
908
+ "@elliemae/ds-popperjs": "2.4.3-rc.2",
909
+ "@elliemae/ds-props-helpers": "2.4.3-rc.2",
910
+ "@elliemae/ds-system": "2.4.3-rc.2",
911
+ "@elliemae/ds-tooltip": "2.4.3-rc.2",
912
+ "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.2",
913
913
  "prop-types": "~15.7.2",
914
914
  "react-desc": "~4.1.3",
915
915
  "react-popper": "~2.2.5",
package/types/checkbox/react-desc-prop-types.d.ts CHANGED
@@ -6,6 +6,7 @@ export declare namespace DSControlledCheckboxT {
6
6
  tabIndex?: number;
7
7
  hasError?: boolean;
8
8
  wrapLabel: boolean;
9
+ disabled: boolean;
9
10
  }
10
11
  interface OptionalProps {
11
12
  innerRef: React.RefObject<HTMLInputElement> | React.LegacyRef<HTMLInputElement>;