@pdg/react-form 1.0.28 → 1.0.29

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/dist/index.esm.js CHANGED
@@ -4993,7 +4993,7 @@ FormRadioGroup.displayName = 'FormRadioGroup';
4993
4993
  FormRadioGroup.defaultProps = FormRadioGroupDefaultProps;var FormToggleButtonGroupDefaultProps = {
4994
4994
  type: 'button',
4995
4995
  formValueSeparator: ',',
4996
- };var css_248z$b = ".FormToggleButtonGroup .ToggleButton {\n display: inline-block;\n padding: 0 10px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButtonContainer, .FormToggleButtonGroup.type-radio .ToggleButtonContainer {\n border: 0 !important;\n margin-left: 0 !important;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButtonContainer:not(:last-child), .FormToggleButtonGroup.type-radio .ToggleButtonContainer:not(:last-child) {\n margin-right: 5px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButtonContainer .ToggleButton, .FormToggleButtonGroup.type-radio .ToggleButtonContainer .ToggleButton {\n padding-left: 3px;\n padding-right: 5px;\n display: flex;\n background-color: transparent !important;\n border: 0 !important;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButtonContainer .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-checkbox .ToggleButtonContainer .ToggleButton .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButtonContainer .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-radio .ToggleButtonContainer .ToggleButton .__checkbox-unchecked__ {\n margin-right: 3px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButtonContainer .ToggleButton .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButtonContainer .ToggleButton .__checkbox-checked__ {\n display: none;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButtonContainer .ToggleButton.Mui-selected .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButtonContainer .ToggleButton.Mui-selected .__checkbox-checked__ {\n display: block;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButtonContainer .ToggleButton.Mui-selected .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButtonContainer .ToggleButton.Mui-selected .__checkbox-unchecked__ {\n display: none;\n}\n.FormToggleButtonGroup:not(.with-label).variant-outlined .ToggleButton {\n height: 52px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-filled .ToggleButton {\n height: 52px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-standard .ToggleButton {\n height: 28px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .ToggleButton {\n height: 44px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .ToggleButton {\n height: 26px;\n}\n.FormToggleButtonGroup.with-label.variant-outlined .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-filled .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-standard .ToggleButton {\n height: 28px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-outlined .ToggleButton {\n height: 24px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-filled .ToggleButton {\n height: 31px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-standard .ToggleButton {\n height: 26px;\n}\n\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .ToggleButton {\n height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .ToggleButton {\n height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .ToggleButton {\n height: 28px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .ToggleButton {\n height: 24px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .ToggleButton {\n height: 31px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .ToggleButton {\n height: 26px;\n}";
4996
+ };var css_248z$b = ".FormToggleButtonGroup .ToggleButton {\n display: inline-block;\n padding: 0 10px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton, .FormToggleButtonGroup.type-radio .ToggleButton {\n padding-left: 3px;\n padding-right: 5px;\n border: 0 !important;\n margin-left: 0 !important;\n justify-content: flex-start;\n display: flex;\n background-color: transparent !important;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton:not(:last-child), .FormToggleButtonGroup.type-radio .ToggleButton:not(:last-child) {\n margin-right: 5px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-unchecked__ {\n margin-right: 3px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__ {\n display: none;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-checked__ {\n display: block;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-unchecked__ {\n display: none;\n}\n.FormToggleButtonGroup:not(.with-label).variant-outlined .ToggleButton {\n height: 52px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-filled .ToggleButton {\n height: 52px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-standard .ToggleButton {\n height: 28px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .ToggleButton {\n height: 44px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .ToggleButton {\n height: 26px;\n}\n.FormToggleButtonGroup.with-label.variant-outlined .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-filled .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-standard .ToggleButton {\n height: 28px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-outlined .ToggleButton {\n height: 24px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-filled .ToggleButton {\n height: 31px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-standard .ToggleButton {\n height: 26px;\n}\n\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .ToggleButton {\n height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .ToggleButton {\n height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .ToggleButton {\n height: 28px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .ToggleButton {\n height: 24px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .ToggleButton {\n height: 31px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .ToggleButton {\n height: 26px;\n}";
4997
4997
  styleInject(css_248z$b);var FormToggleButtonGroup = React__default.forwardRef(function (_a, ref) {
4998
4998
  // ID --------------------------------------------------------------------------------------------------------------
4999
4999
  var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initFullWidth = _a.fullWidth,
@@ -5341,13 +5341,8 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default.forwardRef(fu
5341
5341
  finalItemWidth = 'auto';
5342
5342
  }
5343
5343
  else if (!fullWidth || type === 'radio' || type === 'checkbox') {
5344
- finalItemWidth = 'auto';
5344
+ finalItemWidth = itemWidth || 'auto';
5345
5345
  }
5346
- var containerStyle = type === 'checkbox' || type === 'radio'
5347
- ? {
5348
- width: itemWidth,
5349
- }
5350
- : undefined;
5351
5346
  var buttonStyle = {
5352
5347
  borderColor: error ? theme.palette.error.main : '',
5353
5348
  color: error ? theme.palette.error.main : '',
@@ -5364,12 +5359,7 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default.forwardRef(fu
5364
5359
  React__default.createElement(Icon$1, { className: '__checkbox-unchecked__' }, "radio_button_unchecked"),
5365
5360
  React__default.createElement(Icon$1, { className: '__checkbox-checked__' }, "radio_button_checked"))))),
5366
5361
  label));
5367
- if (type === 'checkbox' || type === 'radio') {
5368
- return (React__default.createElement("div", { className: 'ToggleButtonContainer', style: containerStyle }, button));
5369
- }
5370
- else {
5371
- return button;
5372
- }
5362
+ return button;
5373
5363
  }));
5374
5364
  }, [
5375
5365
  color,