@ballistix.digital/react-components 2.1.0 → 2.2.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.
package/dist/index.esm.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
2
2
  import { ArrowPathIcon, ChevronDownIcon, EllipsisVerticalIcon, ExclamationCircleIcon, ChevronDoubleLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDoubleRightIcon, ChevronUpIcon, ChevronUpDownIcon, HomeIcon, ArrowLongLeftIcon, ArrowLongRightIcon } from '@heroicons/react/20/solid';
3
- import { isArray, map, set, get, noop as noop$1, indexOf, toSafeInteger, pick, isEmpty, some, compact as compact$1, forEach, assign, includes, intersection, delay, trim, lastIndexOf } from 'lodash';
3
+ import { isArray, map, set, get, noop as noop$1, indexOf, toSafeInteger, pick, isEmpty, some, compact as compact$1, forEach, assign, includes, intersection, trim, lastIndexOf } from 'lodash';
4
4
  import get$1 from 'lodash/get';
5
5
  import React, { useState, useMemo, Children, Fragment, useEffect, useCallback, useRef, forwardRef, useImperativeHandle, useReducer, createElement, PureComponent, Component } from 'react';
6
6
  import { library } from '@fortawesome/fontawesome-svg-core';
@@ -2358,10 +2358,15 @@ var styles$c = {
2358
2358
  var ModalOverlay = function (props) {
2359
2359
  var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, stylesOverrides = props.styles, dataCy = props.dataCy, onOpen = props.onOpen, onClose = props.onClose;
2360
2360
  var _b = useState(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
2361
+ var handleClose = useCallback(function () {
2362
+ setIsOpen(false);
2363
+ if (onClose)
2364
+ setTimeout(onClose, 180);
2365
+ }, [onClose]);
2361
2366
  var options = useMemo(function () { return ({
2362
2367
  handleOpen: function () { return setIsOpen(true); },
2363
- handleClose: function () { return setIsOpen(false); },
2364
- }); }, []);
2368
+ handleClose: handleClose,
2369
+ }); }, [handleClose]);
2365
2370
  var handleGenerateStyle = function () {
2366
2371
  var result = deepCopyObject(styles$b.base);
2367
2372
  var keys = calculateNestedKeys(styles$b.base);
@@ -2376,12 +2381,7 @@ var ModalOverlay = function (props) {
2376
2381
  onOpen && onOpen();
2377
2382
  }
2378
2383
  }, [isOpen, onOpen]);
2379
- useEffect(function () {
2380
- if (!isOpen) {
2381
- onClose && onClose();
2382
- }
2383
- }, [isOpen, onClose]);
2384
- return (jsxs(Fragment$1, { children: [jsx(Transition.Root, { show: isOpen, as: Fragment, children: jsxs(Dialog, { as: "div", className: styles.container, onClose: setIsOpen, children: [jsx(Transition.Child, { as: 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: jsx("div", { className: styles.background.container }) }), jsx("div", { className: styles.layout.container, children: jsx("div", { className: styles.layout.content, "data-cy": dataCy, children: jsx(Transition.Child, { as: 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: jsx(Dialog.Panel, { className: styles.panel.container, children: children(options) }) }) }) })] }) }), trigger && trigger(options)] }));
2384
+ return (jsxs(Fragment$1, { children: [jsx(Transition.Root, { show: isOpen, as: Fragment, children: jsxs(Dialog, { as: "div", className: styles.container, onClose: handleClose, children: [jsx(Transition.Child, { as: 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: jsx("div", { className: styles.background.container }) }), jsx("div", { className: styles.layout.container, children: jsx("div", { className: styles.layout.content, "data-cy": dataCy, children: jsx(Transition.Child, { as: 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: jsx(Dialog.Panel, { className: styles.panel.container, children: children(options) }) }) }) })] }) }), trigger && trigger(options)] }));
2385
2385
  };
2386
2386
 
2387
2387
  var base$8 = {
@@ -2982,7 +2982,7 @@ var Switch = function (props) {
2982
2982
  return result;
2983
2983
  };
2984
2984
  var styles = handleGenerateStyle();
2985
- return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [label && (jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsx("div", { className: styles.container, children: jsx("div", { "data-cy": inputDataCy, children: jsxs(Switch$1, { checked: value, disabled: isDisabled, onChange: function (value) { return delay(function () { return onChange(value); }, 200); }, className: toClassName(styles.switch.base, value ? styles.switch.checked : styles.switch.unchecked, isDisabled && styles.switch.disabled), children: [jsxs("span", { className: styles.switch.screenreader, children: ["Switch setting for ", name] }), jsx("span", { className: toClassName(styles.toggle.base, value ? styles.toggle.checked : styles.toggle.unchecked), children: iconAccessorChecked && iconAccessorUnchecked && (jsxs(Fragment$1, { children: [jsx("span", { className: toClassName(value ? styles.icon.hidden : styles.icon.shown, styles.icon.base), "aria-hidden": "true", children: jsx(IconElement, { accessor: iconAccessorUnchecked, className: styles.icon.icon }) }), jsx("span", { className: toClassName(value ? styles.icon.shown : styles.icon.hidden, styles.icon.base), "aria-hidden": "true", children: jsx(IconElement, { accessor: iconAccessorChecked, className: styles.icon.icon }) })] })) })] }) }) }), jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles.description, children: description })), error && isTouched && (jsx("p", { className: styles.error, "data-cy": errorDataCy, children: error }))] })] }));
2985
+ return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [label && (jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsx("div", { className: styles.container, children: jsx("div", { "data-cy": inputDataCy, children: jsxs(Switch$1, { checked: value, disabled: isDisabled, onChange: onChange, className: toClassName(styles.switch.base, value ? styles.switch.checked : styles.switch.unchecked, isDisabled && styles.switch.disabled), children: [jsxs("span", { className: styles.switch.screenreader, children: ["Switch setting for ", name] }), jsx("span", { className: toClassName(styles.toggle.base, value ? styles.toggle.checked : styles.toggle.unchecked), children: iconAccessorChecked && iconAccessorUnchecked && (jsxs(Fragment$1, { children: [jsx("span", { className: toClassName(value ? styles.icon.hidden : styles.icon.shown, styles.icon.base), "aria-hidden": "true", children: jsx(IconElement, { accessor: iconAccessorUnchecked, className: styles.icon.icon }) }), jsx("span", { className: toClassName(value ? styles.icon.shown : styles.icon.hidden, styles.icon.base), "aria-hidden": "true", children: jsx(IconElement, { accessor: iconAccessorChecked, className: styles.icon.icon }) })] })) })] }) }) }), jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles.description, children: description })), error && isTouched && (jsx("p", { className: styles.error, "data-cy": errorDataCy, children: error }))] })] }));
2986
2986
  };
2987
2987
 
2988
2988
  var styles$4 = {
package/dist/index.js CHANGED
@@ -2360,10 +2360,15 @@ var styles$c = {
2360
2360
  var ModalOverlay = function (props) {
2361
2361
  var children = props.children, trigger = props.trigger, _a = props.size, size = _a === void 0 ? 'md' : _a, stylesOverrides = props.styles, dataCy = props.dataCy, onOpen = props.onOpen, onClose = props.onClose;
2362
2362
  var _b = React.useState(trigger ? false : true), isOpen = _b[0], setIsOpen = _b[1];
2363
+ var handleClose = React.useCallback(function () {
2364
+ setIsOpen(false);
2365
+ if (onClose)
2366
+ setTimeout(onClose, 180);
2367
+ }, [onClose]);
2363
2368
  var options = React.useMemo(function () { return ({
2364
2369
  handleOpen: function () { return setIsOpen(true); },
2365
- handleClose: function () { return setIsOpen(false); },
2366
- }); }, []);
2370
+ handleClose: handleClose,
2371
+ }); }, [handleClose]);
2367
2372
  var handleGenerateStyle = function () {
2368
2373
  var result = deepCopyObject(styles$b.base);
2369
2374
  var keys = calculateNestedKeys(styles$b.base);
@@ -2378,12 +2383,7 @@ var ModalOverlay = function (props) {
2378
2383
  onOpen && onOpen();
2379
2384
  }
2380
2385
  }, [isOpen, onOpen]);
2381
- React.useEffect(function () {
2382
- if (!isOpen) {
2383
- onClose && onClose();
2384
- }
2385
- }, [isOpen, onClose]);
2386
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition.Root, { show: isOpen, as: React.Fragment, children: jsxRuntime.jsxs(react.Dialog, { as: "div", className: styles.container, onClose: setIsOpen, children: [jsxRuntime.jsx(react.Transition.Child, { 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", { className: styles.layout.container, children: jsxRuntime.jsx("div", { className: styles.layout.content, "data-cy": dataCy, children: jsxRuntime.jsx(react.Transition.Child, { 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, { className: styles.panel.container, children: children(options) }) }) }) })] }) }), trigger && trigger(options)] }));
2386
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Transition.Root, { show: isOpen, as: React.Fragment, children: jsxRuntime.jsxs(react.Dialog, { as: "div", className: styles.container, onClose: handleClose, children: [jsxRuntime.jsx(react.Transition.Child, { 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", { className: styles.layout.container, children: jsxRuntime.jsx("div", { className: styles.layout.content, "data-cy": dataCy, children: jsxRuntime.jsx(react.Transition.Child, { 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, { className: styles.panel.container, children: children(options) }) }) }) })] }) }), trigger && trigger(options)] }));
2387
2387
  };
2388
2388
 
2389
2389
  var base$8 = {
@@ -2984,7 +2984,7 @@ var Switch = function (props) {
2984
2984
  return result;
2985
2985
  };
2986
2986
  var styles = handleGenerateStyle();
2987
- return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsx("div", { className: styles.container, children: jsxRuntime.jsx("div", { "data-cy": inputDataCy, children: jsxRuntime.jsxs(react.Switch, { checked: value, disabled: isDisabled, onChange: function (value) { return lodash.delay(function () { return onChange(value); }, 200); }, className: toClassName(styles.switch.base, value ? styles.switch.checked : styles.switch.unchecked, isDisabled && styles.switch.disabled), children: [jsxRuntime.jsxs("span", { className: styles.switch.screenreader, children: ["Switch setting for ", name] }), jsxRuntime.jsx("span", { className: toClassName(styles.toggle.base, value ? styles.toggle.checked : styles.toggle.unchecked), children: iconAccessorChecked && iconAccessorUnchecked && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: toClassName(value ? styles.icon.hidden : styles.icon.shown, styles.icon.base), "aria-hidden": "true", children: jsxRuntime.jsx(IconElement, { accessor: iconAccessorUnchecked, className: styles.icon.icon }) }), jsxRuntime.jsx("span", { className: toClassName(value ? styles.icon.shown : styles.icon.hidden, styles.icon.base), "aria-hidden": "true", children: jsxRuntime.jsx(IconElement, { accessor: iconAccessorChecked, className: styles.icon.icon }) })] })) })] }) }) }), jsxRuntime.jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", { className: styles.description, children: description })), error && isTouched && (jsxRuntime.jsx("p", { className: styles.error, "data-cy": errorDataCy, children: error }))] })] }));
2987
+ return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsx("div", { className: styles.container, children: jsxRuntime.jsx("div", { "data-cy": inputDataCy, children: jsxRuntime.jsxs(react.Switch, { checked: value, disabled: isDisabled, onChange: onChange, className: toClassName(styles.switch.base, value ? styles.switch.checked : styles.switch.unchecked, isDisabled && styles.switch.disabled), children: [jsxRuntime.jsxs("span", { className: styles.switch.screenreader, children: ["Switch setting for ", name] }), jsxRuntime.jsx("span", { className: toClassName(styles.toggle.base, value ? styles.toggle.checked : styles.toggle.unchecked), children: iconAccessorChecked && iconAccessorUnchecked && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: toClassName(value ? styles.icon.hidden : styles.icon.shown, styles.icon.base), "aria-hidden": "true", children: jsxRuntime.jsx(IconElement, { accessor: iconAccessorUnchecked, className: styles.icon.icon }) }), jsxRuntime.jsx("span", { className: toClassName(value ? styles.icon.shown : styles.icon.hidden, styles.icon.base), "aria-hidden": "true", children: jsxRuntime.jsx(IconElement, { accessor: iconAccessorChecked, className: styles.icon.icon }) })] })) })] }) }) }), jsxRuntime.jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", { className: styles.description, children: description })), error && isTouched && (jsxRuntime.jsx("p", { className: styles.error, "data-cy": errorDataCy, children: error }))] })] }));
2988
2988
  };
2989
2989
 
2990
2990
  var styles$4 = {