@ballistix.digital/react-components 7.2.0 → 7.2.1-rc-72.0

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 (8) hide show
  1. package/dist/index.d.ts +7 -9
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/index.esm.js +89 -60
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +89 -60
  6. package/dist/index.js.map +1 -1
  7. package/dist/tsconfig.tsbuildinfo +1 -1
  8. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -472,10 +472,10 @@ var $2125901b4a9afff9$export$2e2bcd8739ae039 = $2125901b4a9afff9$var$IconElement
472
472
 
473
473
 
474
474
  var $fbfda6b39c475fe4$var$base = {
475
- container: 'rounded-xs p-4 border-l-4',
475
+ container: 'flex rounded-xs p-4 border-l-4',
476
476
  icon: 'h-5 w-5',
477
477
  content: {
478
- container: 'ml-3 flex-1 md:flex md:justify-between ease-in-out transition-transform h-full items-center',
478
+ container: 'ml-3 flex-1 md:flex md:justify-between ease-in-out transition-transform h-full',
479
479
  iconContainer: 'shrink-0',
480
480
  title: 'text-md font-semibold',
481
481
  message: 'text-sm',
@@ -541,8 +541,8 @@ var $fbfda6b39c475fe4$export$2e2bcd8739ae039 = $fbfda6b39c475fe4$var$styles;
541
541
 
542
542
 
543
543
  var $29a51bd84954e590$var$AlertElement = function(props) {
544
- var title = props.title, message = props.message, _a = props.type, type = _a === void 0 ? 'generic' : _a, _b = props.onClose, onClose = _b === void 0 ? (0, $iA2ta$lodash.noop) : _b, _c = props.onCollapse, onCollapse = _c === void 0 ? (0, $iA2ta$lodash.noop) : _c, _d = props.isCollapsible, isCollapsible = _d === void 0 ? false : _d, stylesOverrides = props.styles, iconAccessorOverride = props.iconAccessor;
545
- var _e = (0, $iA2ta$react.useState)(false), isCollapsed = _e[0], setIsCollapsed = _e[1];
544
+ var title = props.title, message = props.message, _a = props.type, type = _a === void 0 ? 'generic' : _a, onClose = props.onClose, onCollapse = props.onCollapse, _b = props.isCollapsible, isCollapsible = _b === void 0 ? false : _b, stylesOverrides = props.styles, iconAccessorOverride = props.iconAccessor;
545
+ var _c = (0, $iA2ta$react.useState)(false), isCollapsed = _c[0], setIsCollapsed = _c[1];
546
546
  var handleGenerateStyle = function() {
547
547
  var result = (0, $f0c671820c340322$export$e2d2075c69d9100d)((0, $fbfda6b39c475fe4$export$2e2bcd8739ae039).base);
548
548
  var keys = (0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $fbfda6b39c475fe4$export$2e2bcd8739ae039).base);
@@ -574,9 +574,9 @@ var $29a51bd84954e590$var$AlertElement = function(props) {
574
574
  return (0, $iA2ta$reactjsxruntime.jsxs)("div", {
575
575
  className: (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.container),
576
576
  children: [
577
- (0, $iA2ta$reactjsxruntime.jsx)("div", {
577
+ iconAccessor && (0, $iA2ta$reactjsxruntime.jsx)("div", {
578
578
  className: styles.iconContainer,
579
- children: iconAccessor && (0, $iA2ta$reactjsxruntime.jsx)((0, $2125901b4a9afff9$export$2e2bcd8739ae039), {
579
+ children: (0, $iA2ta$reactjsxruntime.jsx)((0, $2125901b4a9afff9$export$2e2bcd8739ae039), {
580
580
  accessor: iconAccessor,
581
581
  className: (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.icon),
582
582
  "aria-hidden": "true"
@@ -587,11 +587,11 @@ var $29a51bd84954e590$var$AlertElement = function(props) {
587
587
  children: [
588
588
  (0, $iA2ta$reactjsxruntime.jsxs)("div", {
589
589
  children: [
590
- (0, $iA2ta$reactjsxruntime.jsx)("h3", {
590
+ title && (0, $iA2ta$reactjsxruntime.jsx)("h3", {
591
591
  className: (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.content.title),
592
592
  children: title
593
593
  }),
594
- !isCollapsed && (0, $iA2ta$reactjsxruntime.jsx)("p", {
594
+ message && !isCollapsed && (0, $iA2ta$reactjsxruntime.jsx)("p", {
595
595
  className: (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.content.message),
596
596
  children: message
597
597
  })
@@ -603,14 +603,14 @@ var $29a51bd84954e590$var$AlertElement = function(props) {
603
603
  isCollapsible && (0, $iA2ta$reactjsxruntime.jsx)("div", {
604
604
  onClick: function() {
605
605
  setIsCollapsed(!isCollapsed);
606
- onCollapse();
606
+ if (onCollapse) onCollapse();
607
607
  },
608
608
  children: (0, $iA2ta$reactjsxruntime.jsx)((0, $2125901b4a9afff9$export$2e2bcd8739ae039), {
609
609
  className: (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.content.action, isCollapsed && styles.content.inverted),
610
610
  accessor: "chevron-up"
611
611
  })
612
612
  }),
613
- (0, $iA2ta$reactjsxruntime.jsx)("div", {
613
+ onClose && (0, $iA2ta$reactjsxruntime.jsx)("div", {
614
614
  onClick: onClose,
615
615
  children: (0, $iA2ta$reactjsxruntime.jsx)((0, $2125901b4a9afff9$export$2e2bcd8739ae039), {
616
616
  className: styles.content.action,
@@ -1133,8 +1133,8 @@ var $49256f91bd9e1c3f$export$2e2bcd8739ae039 = $49256f91bd9e1c3f$var$ButtonGroup
1133
1133
 
1134
1134
  var $87a4b9b6cee76290$var$base = {
1135
1135
  container: 'inline-block text-left',
1136
- button: 'inline-flex justify-center w-full rounded-md border border-gray-300 shadow-xs px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-primary-500',
1137
- compact: 'bg-gray-100 rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-primary-500',
1136
+ button: 'cursor-pointer inline-flex justify-center w-full rounded-md border border-gray-300 shadow-xs px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-primary-500',
1137
+ compact: 'cursor-pointer bg-gray-100 rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-primary-500',
1138
1138
  dots: 'h-7 w-7 p-1',
1139
1139
  items: 'z-10 absolute mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black/5 divide-y divide-gray-100 focus:outline-hidden'
1140
1140
  };
@@ -1153,8 +1153,8 @@ var $87a4b9b6cee76290$var$topRight = {
1153
1153
  items: 'origin-bottom-left left-0 bottom-0'
1154
1154
  };
1155
1155
  var $87a4b9b6cee76290$var$disabled = {
1156
- button: 'opacity-50 cursor-not-allowed',
1157
- compact: 'opacity-50 cursor-not-allowed'
1156
+ button: 'opacity-50 cursor-not-allowed!',
1157
+ compact: 'opacity-50 cursor-not-allowed!'
1158
1158
  };
1159
1159
  var $87a4b9b6cee76290$var$styles = {
1160
1160
  base: $87a4b9b6cee76290$var$base,
@@ -5418,7 +5418,8 @@ https://github.com/onesine/react-tailwindcss-datepicker
5418
5418
  label: 'block font-medium text-gray-900',
5419
5419
  hint: 'text-xs text-gray-500',
5420
5420
  leading: 'pointer-events-none absolute inset-y-0 left-0 flex items-center',
5421
- input: 'block w-full inline-flex',
5421
+ inputWrapper: '',
5422
+ input: 'w-full inline-flex',
5422
5423
  trailing: 'pointer-events-none absolute inset-y-0 right-0 flex items-center',
5423
5424
  description: 'text-gray-400 text-xs mt-1',
5424
5425
  error: 'text-red-500 text-xs ml-5 mt-1'
@@ -5599,7 +5600,7 @@ var $7d3977a96c400c32$var$DateRangeMenu = function(props) {
5599
5600
  ]
5600
5601
  }),
5601
5602
  (0, $iA2ta$reactjsxruntime.jsxs)("div", {
5602
- className: styles.container,
5603
+ className: styles.inputWrapper,
5603
5604
  "data-cy": inputDataCy,
5604
5605
  ref: $datepickerInputRef,
5605
5606
  onClick: onClick,
@@ -5992,7 +5993,7 @@ var $7343b5b4243d5cba$export$2e2bcd8739ae039 = $7343b5b4243d5cba$var$styles;
5992
5993
 
5993
5994
 
5994
5995
  var $341e1fbf5ffaef7b$var$Switch = function(props) {
5995
- var name = props.name, label = props.label, description = props.description, isDisabled = props.isDisabled, _a = props.isRequired, isRequired = _a === void 0 ? false : _a, required = props.required, _b = props.isTouched, isTouched = _b === void 0 ? false : _b, error = props.error, value = props.value, stylesOverrides = props.styles, _c = props.size, size = _c === void 0 ? 'md' : _c, onChange = props.onChange, iconAccessorChecked = props.iconAccessorChecked, iconAccessorUnchecked = props.iconAccessorUnchecked;
5996
+ var name = props.name, label = props.label, description = props.description, isDisabled = props.isDisabled, _a = props.isRequired, isRequired = _a === void 0 ? false : _a, required = props.required, _b = props.isTouched, isTouched = _b === void 0 ? false : _b, error = props.error, value = props.value, stylesOverrides = props.styles, _c = props.size, size = _c === void 0 ? 'md' : _c, _d = props.isOptionalLabelHidden, isOptionalLabelHidden = _d === void 0 ? false : _d, onChange = props.onChange, iconAccessorChecked = props.iconAccessorChecked, iconAccessorUnchecked = props.iconAccessorUnchecked;
5996
5997
  var inputDataCy = "form-input-".concat(name);
5997
5998
  var errorDataCy = "form-input-error-".concat(name);
5998
5999
  var handleGenerateStyle = function() {
@@ -6004,21 +6005,64 @@ var $341e1fbf5ffaef7b$var$Switch = function(props) {
6004
6005
  return result;
6005
6006
  };
6006
6007
  var styles = handleGenerateStyle();
6008
+ var labelComponent = (0, $iA2ta$react.useMemo)(function() {
6009
+ if (!label) return null;
6010
+ return (0, $iA2ta$reactjsxruntime.jsx)("label", {
6011
+ htmlFor: name,
6012
+ className: styles.label,
6013
+ children: label
6014
+ });
6015
+ }, [
6016
+ label,
6017
+ name,
6018
+ styles.label
6019
+ ]);
6020
+ var optionalLabelComponent = (0, $iA2ta$react.useMemo)(function() {
6021
+ if (required || isRequired || typeof label !== 'string' || isOptionalLabelHidden) return null;
6022
+ return (0, $iA2ta$reactjsxruntime.jsx)("span", {
6023
+ className: styles.hint,
6024
+ children: "Optional"
6025
+ });
6026
+ }, [
6027
+ isOptionalLabelHidden,
6028
+ isRequired,
6029
+ label,
6030
+ required,
6031
+ styles.hint
6032
+ ]);
6033
+ var footComponent = (0, $iA2ta$react.useMemo)(function() {
6034
+ if (!description && !error) return null;
6035
+ return (0, $iA2ta$reactjsxruntime.jsxs)("div", {
6036
+ className: styles.foot,
6037
+ children: [
6038
+ description && !(error && isTouched) && (0, $iA2ta$reactjsxruntime.jsx)("p", {
6039
+ className: styles.description,
6040
+ children: description
6041
+ }),
6042
+ error && isTouched && (0, $iA2ta$reactjsxruntime.jsx)("p", {
6043
+ className: styles.error,
6044
+ "data-cy": errorDataCy,
6045
+ children: error
6046
+ })
6047
+ ]
6048
+ });
6049
+ }, [
6050
+ description,
6051
+ error,
6052
+ errorDataCy,
6053
+ isTouched,
6054
+ styles.description,
6055
+ styles.error,
6056
+ styles.foot
6057
+ ]);
6007
6058
  return (0, $iA2ta$reactjsxruntime.jsxs)("div", {
6008
6059
  className: styles.container,
6009
6060
  children: [
6010
6061
  (0, $iA2ta$reactjsxruntime.jsxs)("div", {
6011
6062
  className: styles.head,
6012
6063
  children: [
6013
- label && (0, $iA2ta$reactjsxruntime.jsx)("label", {
6014
- htmlFor: name,
6015
- className: styles.label,
6016
- children: label
6017
- }),
6018
- !required && !isRequired && typeof label === 'string' && (0, $iA2ta$reactjsxruntime.jsx)("span", {
6019
- className: styles.hint,
6020
- children: "Optional"
6021
- }),
6064
+ labelComponent,
6065
+ optionalLabelComponent,
6022
6066
  required && required({
6023
6067
  isRequired: isRequired
6024
6068
  })
@@ -6040,46 +6084,31 @@ var $341e1fbf5ffaef7b$var$Switch = function(props) {
6040
6084
  name
6041
6085
  ]
6042
6086
  }),
6043
- (0, $iA2ta$reactjsxruntime.jsx)("span", {
6087
+ (0, $iA2ta$reactjsxruntime.jsxs)("span", {
6044
6088
  className: (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.toggle.base, value ? styles.toggle.checked : styles.toggle.unchecked),
6045
- children: iconAccessorChecked && iconAccessorUnchecked && (0, $iA2ta$reactjsxruntime.jsxs)((0, $iA2ta$reactjsxruntime.Fragment), {
6046
- children: [
6047
- (0, $iA2ta$reactjsxruntime.jsx)("span", {
6048
- className: (0, $622cd2936b18c771$export$4370d69198e9314a)(value ? styles.icon.hidden : styles.icon.shown, styles.icon.base),
6049
- "aria-hidden": "true",
6050
- children: (0, $iA2ta$reactjsxruntime.jsx)((0, $2125901b4a9afff9$export$2e2bcd8739ae039), {
6051
- accessor: iconAccessorUnchecked,
6052
- className: styles.icon.icon
6053
- })
6054
- }),
6055
- (0, $iA2ta$reactjsxruntime.jsx)("span", {
6056
- className: (0, $622cd2936b18c771$export$4370d69198e9314a)(value ? styles.icon.shown : styles.icon.hidden, styles.icon.base),
6057
- "aria-hidden": "true",
6058
- children: (0, $iA2ta$reactjsxruntime.jsx)((0, $2125901b4a9afff9$export$2e2bcd8739ae039), {
6059
- accessor: iconAccessorChecked,
6060
- className: styles.icon.icon
6061
- })
6089
+ children: [
6090
+ iconAccessorUnchecked && (0, $iA2ta$reactjsxruntime.jsx)("span", {
6091
+ className: (0, $622cd2936b18c771$export$4370d69198e9314a)(value ? styles.icon.hidden : styles.icon.shown, styles.icon.base),
6092
+ "aria-hidden": "true",
6093
+ children: (0, $iA2ta$reactjsxruntime.jsx)((0, $2125901b4a9afff9$export$2e2bcd8739ae039), {
6094
+ accessor: iconAccessorUnchecked,
6095
+ className: styles.icon.icon
6062
6096
  })
6063
- ]
6064
- })
6097
+ }),
6098
+ iconAccessorChecked && (0, $iA2ta$reactjsxruntime.jsx)("span", {
6099
+ className: (0, $622cd2936b18c771$export$4370d69198e9314a)(value ? styles.icon.shown : styles.icon.hidden, styles.icon.base),
6100
+ "aria-hidden": "true",
6101
+ children: (0, $iA2ta$reactjsxruntime.jsx)((0, $2125901b4a9afff9$export$2e2bcd8739ae039), {
6102
+ accessor: iconAccessorChecked,
6103
+ className: styles.icon.icon
6104
+ })
6105
+ })
6106
+ ]
6065
6107
  })
6066
6108
  ]
6067
6109
  })
6068
6110
  }),
6069
- (0, $iA2ta$reactjsxruntime.jsxs)("div", {
6070
- className: styles.foot,
6071
- children: [
6072
- description && !(error && isTouched) && (0, $iA2ta$reactjsxruntime.jsx)("p", {
6073
- className: styles.description,
6074
- children: description
6075
- }),
6076
- error && isTouched && (0, $iA2ta$reactjsxruntime.jsx)("p", {
6077
- className: styles.error,
6078
- "data-cy": errorDataCy,
6079
- children: error
6080
- })
6081
- ]
6082
- })
6111
+ footComponent
6083
6112
  ]
6084
6113
  });
6085
6114
  };