@ballistix.digital/react-components 0.3.3 → 0.4.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 (6) hide show
  1. package/dist/index.d.ts +8 -2
  2. package/dist/index.esm.js +47 -6
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/index.js +46 -5
  5. package/dist/index.js.map +1 -1
  6. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -512,8 +512,36 @@ var IconElement = function (props) {
512
512
  return component;
513
513
  };
514
514
 
515
+ var useMappedValue = function (format) {
516
+ var _a = React.useState(''), mappedValue = _a[0], setMappedValue = _a[1];
517
+ React.useEffect(function () {
518
+ setMappedValue('');
519
+ }, [format]);
520
+ var handleMapValue = function (inputValue) {
521
+ var strippedValue = inputValue.replace(/\D/g, ''); // remove all non-numeric characters
522
+ var formattedNumber = '';
523
+ var valueIndex = 0;
524
+ for (var i = 0; i < format.length; i++) {
525
+ if (format[i] === 'X') {
526
+ if (valueIndex >= strippedValue.length) {
527
+ break;
528
+ }
529
+ formattedNumber += strippedValue[valueIndex];
530
+ valueIndex++;
531
+ }
532
+ else {
533
+ formattedNumber += format[i];
534
+ }
535
+ }
536
+ setMappedValue(formattedNumber);
537
+ };
538
+ return [mappedValue, handleMapValue];
539
+ };
540
+
515
541
  var InputGroupForm = function (props) {
516
- var name = props.name, _a = props.htmlType, htmlType = _a === void 0 ? 'text' : _a, label = props.label, description = props.description, placeholder = props.placeholder, leading = props.leading, trailing = props.trailing, value = props.value, _b = props.type, type = _b === void 0 ? 'normal' : _b, _c = props.isValid, isValid = _c === void 0 ? true : _c, isDisabled = props.isDisabled, isRequired = props.isRequired, onChange = props.onChange, stylesOverrides = props.styles;
542
+ var name = props.name, _a = props.htmlType, htmlType = _a === void 0 ? 'text' : _a, label = props.label, description = props.description, placeholder = props.placeholder, leading = props.leading, trailing = props.trailing, value = props.value, map = props.map, error = props.error, _b = props.type, type = _b === void 0 ? 'normal' : _b, isDisabled = props.isDisabled, isRequired = props.isRequired, isTouched = props.isTouched, _c = props.isSolo, isSolo = _c === void 0 ? false : _c, onChange = props.onChange, onBlur = props.onBlur, stylesOverrides = props.styles;
543
+ var _d = useMappedValue(map !== null && map !== void 0 ? map : ''), mappedValue = _d[0], setMappedValue = _d[1];
544
+ var isValid = error === undefined;
517
545
  var handleGenerateStyle = function () {
518
546
  var result = deepCopyObject(styles$e.base);
519
547
  var keys = calculateNestedKeys(styles$e.base);
@@ -524,7 +552,19 @@ var InputGroupForm = function (props) {
524
552
  };
525
553
  var styles = handleGenerateStyle();
526
554
  var invalidIcon = (jsxRuntime.jsx(solid.ExclamationCircleIcon, { className: "h-5 w-5 text-red-500", "aria-hidden": "true" }));
527
- return (jsxRuntime.jsxs("div", __assign({ className: styles.container }, { children: [jsxRuntime.jsxs("div", __assign({ className: styles.head }, { children: [label && (jsxRuntime.jsx("label", __assign({ htmlFor: name, className: styles.label }, { children: label }))), !isRequired && jsxRuntime.jsx("span", __assign({ className: styles.hint }, { children: "Optional" }))] })), jsxRuntime.jsxs("div", __assign({ className: styles.body }, { children: [leading && jsxRuntime.jsx("div", __assign({ className: styles.leading }, { children: leading })), jsxRuntime.jsx("input", { type: htmlType, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: value, disabled: isDisabled, onChange: onChange }), type === 'floored' && (jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsxRuntime.jsx("div", __assign({ className: styles.trailing }, { children: trailing }))), !isValid && jsxRuntime.jsx("div", __assign({ className: styles.trailing }, { children: invalidIcon }))] })), jsxRuntime.jsx("div", __assign({ className: styles.foot }, { children: description && jsxRuntime.jsx("p", __assign({ className: styles.description }, { children: description })) }))] })));
555
+ return (jsxRuntime.jsxs("div", __assign({ className: styles.container }, { children: [jsxRuntime.jsxs("div", __assign({ className: styles.head }, { children: [label && (jsxRuntime.jsx("label", __assign({ htmlFor: name, className: styles.label }, { children: label }))), !isRequired && jsxRuntime.jsx("span", __assign({ className: styles.hint }, { children: "Optional" }))] })), jsxRuntime.jsxs("div", __assign({ className: styles.body }, { children: [leading && jsxRuntime.jsx("div", __assign({ className: styles.leading }, { children: leading })), jsxRuntime.jsx("input", { type: htmlType, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, disabled: isDisabled, onChange: function (e) {
556
+ if (map) {
557
+ setMappedValue(e.currentTarget.value);
558
+ }
559
+ onChange(e);
560
+ }, onBlur: function (e) {
561
+ if (map) {
562
+ var result = e.currentTarget;
563
+ result.value = mappedValue;
564
+ onChange(result);
565
+ }
566
+ onBlur(e);
567
+ } }), type === 'floored' && (jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsxRuntime.jsx("div", __assign({ className: styles.trailing }, { children: trailing }))), !isValid && jsxRuntime.jsx("div", __assign({ className: styles.trailing }, { children: invalidIcon }))] })), jsxRuntime.jsxs("div", __assign({ className: styles.foot }, { children: [description && !error && (jsxRuntime.jsx("p", __assign({ className: styles.description }, { children: description }))), error && isTouched && jsxRuntime.jsx("p", __assign({ className: styles.error }, { children: error }))] }))] })));
528
568
  };
529
569
 
530
570
  var base$d = {
@@ -537,7 +577,8 @@ var base$d = {
537
577
  leading: 'pointer-events-none absolute inset-y-0 left-0 flex items-center',
538
578
  input: 'block w-full',
539
579
  trailing: 'pointer-events-none absolute inset-y-0 right-0 flex items-center',
540
- description: 'text-gray-500 text-xs',
580
+ description: 'text-gray-400 text-xs mt-1',
581
+ error: 'text-red-500 text-xs ml-5 mt-1',
541
582
  };
542
583
  var leading = {
543
584
  input: 'pl-10',
@@ -17542,12 +17583,12 @@ var ModalOverlay = function (props) {
17542
17583
  var styles = handleGenerateStyle();
17543
17584
  React.useEffect(function () {
17544
17585
  if (isOpen) {
17545
- onOpen();
17586
+ onOpen && onOpen();
17546
17587
  }
17547
17588
  }, [isOpen, onOpen]);
17548
17589
  React.useEffect(function () {
17549
17590
  if (!isOpen) {
17550
- onClose();
17591
+ onClose && onClose();
17551
17592
  }
17552
17593
  }, [isOpen, onClose]);
17553
17594
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition.Root, __assign({ show: isOpen, as: React.Fragment }, { children: jsxRuntime.jsxs(react.Dialog, __assign({ as: "div", className: styles.container, onClose: setIsOpen }, { children: [jsxRuntime.jsx(react.Transition.Child, __assign({ as: React.Fragment, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo }, { children: jsxRuntime.jsx("div", { className: styles.background.container }) })), jsxRuntime.jsx("div", __assign({ className: styles.layout.container }, { children: jsxRuntime.jsx("div", __assign({ className: styles.layout.content }, { children: jsxRuntime.jsx(react.Transition.Child, __assign({ as: React.Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo }, { children: jsxRuntime.jsx(react.Dialog.Panel, __assign({ className: styles.panel.container }, { children: children(options) })) })) })) }))] })) })), trigger && trigger(options)] }));