@unite-us/app-create-referral 0.15.62 → 0.15.63

package/dist/components/SearchableField.js

@@ -1,9 +1,3 @@
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import React, { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { isNull, isEmpty, get } from 'lodash';
@@ -12,146 +6,148 @@ import { Combobox } from '@headlessui/react';
 import { Icon } from '@unite-us/ui';
 import { getPreferredProp } from '@unite-us/ui';
 import '../pages/builder/ReferralBuilderForm.scss';
-export var SearchableSelectField = function SearchableSelectField(props) {
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const SearchableSelectField = props => {
   var _getPreferredProp;
-  var className = props.className,
-    clearable = props.clearable,
-    hideLabel = props.hideLabel,
-    label = props.label,
-    labelClassName = props.labelClassName,
-    listBoxUpOptionsClassName = props.listBoxUpOptionsClassName,
-    onChange = props.onChange,
-    options = props.options,
-    placeholder = props.placeholder,
-    required = props.required,
-    truncateOptions = props.truncateOptions,
-    onInputChange = props.onInputChange,
-    id = props.id,
-    _props$style = props.style,
-    style = _props$style === void 0 ? {
+  const {
+    className,
+    clearable,
+    hideLabel,
+    label,
+    labelClassName,
+    listBoxUpOptionsClassName,
+    onChange,
+    options,
+    placeholder,
+    required,
+    truncateOptions,
+    onInputChange,
+    id,
+    style = {
       container: {},
       label: {},
       input: {},
       hint: {},
       error: {}
-    } : _props$style;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isFocused = _useState2[0],
-    setIsFocused = _useState2[1];
-  var hasError = getPreferredProp(props, 'invalid') && getPreferredProp(props, 'touched');
-  var name = getPreferredProp(props, 'name');
-  var error = getPreferredProp(props, 'error');
-  var reduxOnBlur = getPreferredProp(props, 'onBlur');
-  var value = (_getPreferredProp = getPreferredProp(props, 'value')) === null || _getPreferredProp === void 0 ? void 0 : _getPreferredProp.value;
-  var selectedOption = options.find(function (option) {
-    return option.value === value;
-  }) || null;
-  var _useState3 = useState(''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    query = _useState4[0],
-    setQuery = _useState4[1];
-  var filteredOptions = useMemo(function () {
-    return options.filter(function (option) {
-      return query === '' || option.label.toLowerCase().includes(query.toLowerCase());
-    });
-  }, [options, query]);
-  useEffect(function () {
+    }
+  } = props;
+  const [isFocused, setIsFocused] = useState(false);
+  const hasError = getPreferredProp(props, 'invalid') && getPreferredProp(props, 'touched');
+  const name = getPreferredProp(props, 'name');
+  const error = getPreferredProp(props, 'error');
+  const reduxOnBlur = getPreferredProp(props, 'onBlur');
+  const value = (_getPreferredProp = getPreferredProp(props, 'value')) === null || _getPreferredProp === void 0 ? void 0 : _getPreferredProp.value;
+  const selectedOption = options.find(option => option.value === value) || null;
+  const [query, setQuery] = useState('');
+  const filteredOptions = useMemo(() => options.filter(option => query === '' || option.label.toLowerCase().includes(query.toLowerCase())), [options, query]);
+  useEffect(() => {
     if (isNull(selectedOption)) {
       setQuery('');
     }
   }, [selectedOption, setQuery]);
-  var onClearClick = function onClearClick(event) {
+  const onClearClick = event => {
     event.stopPropagation();
     onChange({});
     setIsFocused(false);
   };
-  var onBlur = function onBlur(event) {
-    var value = get(event, 'target.value', '');
+  const onBlur = event => {
+    const value = get(event, 'target.value', '');
     reduxOnBlur(value);
     setIsFocused(false);
   };
-  return /*#__PURE__*/React.createElement(Combobox, {
+  return /*#__PURE__*/_jsx(Combobox, {
     value: value,
     onChange: onChange,
     onBlur: onBlur,
-    onFocus: function onFocus() {
-      return setIsFocused(true);
-    }
-  }, function () {
-    return /*#__PURE__*/React.createElement("div", {
+    onFocus: () => setIsFocused(true),
+    children: () => /*#__PURE__*/_jsxs("div", {
       className: classNames(className, 'antialiased'),
-      "aria-live": "polite"
-    }, /*#__PURE__*/React.createElement(Combobox.Label, {
-      className: classNames('block mb-1 leading-snug', 'font-extrabold font-medium-font normal-case', !hasError && 'text-13px text-blue', hasError && 'text-13px text-red', labelClassName, hideLabel && 'hidden', required && 'ui-form-field__label--required')
-    }, label), /*#__PURE__*/React.createElement("div", {
-      className: "relative"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classNames('relative box-border w-full bg-white cursor-default text-left', 'pl-3 py-2 border border-solid rounded-md shadow-sm focus:shadow-input-ring', !hasError && 'border-dark-border-blue ', !hasError && 'border-blue hover:border-action-blue focus:border-action-blue', hasError && 'border border-dark-border-red', hasError && 'border-red hover:border-action-red focus:border-action-red', isFocused && 'border-solid border-focus-blue', clearable && !isEmpty(selectedOption) ? 'pr-12' : 'pr-10')
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "absolute inset-y-1"
-    }, /*#__PURE__*/React.createElement(Icon, {
-      "aria-hidden": true,
-      className: "text-gray",
-      icon: "IconSearch",
-      size: 16
-    })), /*#__PURE__*/React.createElement(Combobox.Input, {
-      className: "h-5 w-full pl-6 leading-5 focus:outline-none",
-      displayValue: value,
-      onChange: function onChange(evt) {
-        if (onInputChange) {
-          onInputChange(evt.target.value);
-        } else {
-          setQuery(evt.target.value);
-        }
-      },
-      value: value,
-      placeholder: placeholder,
-      id: id
-    }), clearable && (!isEmpty(selectedOption) || !isEmpty(value)) && /*#__PURE__*/React.createElement("span", {
-      className: "absolute opacity-50 inset-y-0 inset-x-1 right-4 flex items-center pr-5 pl-1"
-    }, /*#__PURE__*/React.createElement(Icon, {
-      className: "text-gray",
-      icon: "IconCross",
-      size: 10,
-      onClick: onClearClick,
-      ariaLabel: "Clear ".concat(label)
-    })), /*#__PURE__*/React.createElement(Combobox.Button, {
-      className: classNames('absolute inset-y-0 right-0 flex items-center pr-4 focus:outline-none', clearable && selectedOption ? 'pl-0' : 'pl-2')
-    }, /*#__PURE__*/React.createElement(Icon, {
-      "aria-hidden": true,
-      className: "text-gray",
-      icon: "IconChevronDown",
-      size: 12
-    }))), /*#__PURE__*/React.createElement(Combobox.Options, {
-      className: classNames('absolute z-dropdown box-content pl-0 py-1 z-10 mt-1 w-full max-h-80 overflow-auto', 'bg-white shadow-lg rounded-md text-base focus:outline-none', listBoxUpOptionsClassName)
-    }, filteredOptions.map(function (option) {
-      return /*#__PURE__*/React.createElement(Combobox.Option, {
-        className: function className(_ref) {
-          var active = _ref.active;
-          return classNames('relative cursor-pointer py-2 pl-3 pr-9 select-none', active && 'bg-action-blue');
-        },
-        key: option.value,
-        value: option
-      }, function (_ref2) {
-        var active = _ref2.active,
-          selected = _ref2.selected;
-        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-          className: classNames('block leading-4', truncateOptions && 'truncate', active ? 'text-white' : 'text-text-blue', selected ? 'font-semibold mr-8' : 'font-normal')
-        }, option.label), selected && /*#__PURE__*/React.createElement("span", {
-          className: "absolute inset-y-0 right-0 flex items-center pr-4"
-        }, /*#__PURE__*/React.createElement(Icon, {
-          "aria-hidden": true,
-          className: classNames('h-5 w-5 fill-current', active ? 'text-white' : 'text-action-blue'),
-          icon: "IconCheck"
-        })));
-      });
-    }))), hasError && error && /*#__PURE__*/React.createElement("div", {
-      className: "ui-form-field__error visible mt-1.5",
-      style: style.error,
-      "data-test-visible": hasError,
-      "data-testid": "".concat(name || id || 'unnamed', "-error")
-    }, error));
+      "aria-live": "polite",
+      children: [/*#__PURE__*/_jsx(Combobox.Label, {
+        className: classNames('block mb-1 leading-snug', 'font-extrabold font-medium-font normal-case', !hasError && 'text-13px text-blue', hasError && 'text-13px text-red', labelClassName, hideLabel && 'hidden', required && 'ui-form-field__label--required'),
+        children: label
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "relative",
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: classNames('relative box-border w-full bg-white cursor-default text-left', 'pl-3 py-2 border border-solid rounded-md shadow-sm focus:shadow-input-ring', !hasError && 'border-dark-border-blue ', !hasError && 'border-blue hover:border-action-blue focus:border-action-blue', hasError && 'border border-dark-border-red', hasError && 'border-red hover:border-action-red focus:border-action-red', isFocused && 'border-solid border-focus-blue', clearable && !isEmpty(selectedOption) ? 'pr-12' : 'pr-10'),
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "absolute inset-y-1",
+            children: /*#__PURE__*/_jsx(Icon, {
+              "aria-hidden": true,
+              className: "text-gray",
+              icon: "IconSearch",
+              size: 16
+            })
+          }), /*#__PURE__*/_jsx(Combobox.Input, {
+            className: "h-5 w-full pl-6 leading-5 focus:outline-none",
+            displayValue: value,
+            onChange: evt => {
+              if (onInputChange) {
+                onInputChange(evt.target.value);
+              } else {
+                setQuery(evt.target.value);
+              }
+            },
+            value: value,
+            placeholder: placeholder,
+            id: id
+          }), clearable && (!isEmpty(selectedOption) || !isEmpty(value)) && /*#__PURE__*/_jsx("span", {
+            className: "absolute opacity-50 inset-y-0 inset-x-1 right-4 flex items-center pr-5 pl-1",
+            children: /*#__PURE__*/_jsx(Icon, {
+              className: "text-gray",
+              icon: "IconCross",
+              size: 10,
+              onClick: onClearClick,
+              ariaLabel: "Clear ".concat(label)
+            })
+          }), /*#__PURE__*/_jsx(Combobox.Button, {
+            className: classNames('absolute inset-y-0 right-0 flex items-center pr-4 focus:outline-none', clearable && selectedOption ? 'pl-0' : 'pl-2'),
+            children: /*#__PURE__*/_jsx(Icon, {
+              "aria-hidden": true,
+              className: "text-gray",
+              icon: "IconChevronDown",
+              size: 12
+            })
+          })]
+        }), /*#__PURE__*/_jsx(Combobox.Options, {
+          className: classNames('absolute z-dropdown box-content pl-0 py-1 z-10 mt-1 w-full max-h-80 overflow-auto', 'bg-white shadow-lg rounded-md text-base focus:outline-none', listBoxUpOptionsClassName),
+          children: filteredOptions.map(option => /*#__PURE__*/_jsx(Combobox.Option, {
+            className: _ref => {
+              let {
+                active
+              } = _ref;
+              return classNames('relative cursor-pointer py-2 pl-3 pr-9 select-none', active && 'bg-action-blue');
+            },
+            value: option,
+            children: _ref2 => {
+              let {
+                active,
+                selected
+              } = _ref2;
+              return /*#__PURE__*/_jsxs(_Fragment, {
+                children: [/*#__PURE__*/_jsx("span", {
+                  className: classNames('block leading-4', truncateOptions && 'truncate', active ? 'text-white' : 'text-text-blue', selected ? 'font-semibold mr-8' : 'font-normal'),
+                  children: option.label
+                }), selected && /*#__PURE__*/_jsx("span", {
+                  className: "absolute inset-y-0 right-0 flex items-center pr-4",
+                  children: /*#__PURE__*/_jsx(Icon, {
+                    "aria-hidden": true,
+                    className: classNames('h-5 w-5 fill-current', active ? 'text-white' : 'text-action-blue'),
+                    icon: "IconCheck"
+                  })
+                })]
+              });
+            }
+          }, option.value))
+        })]
+      }), hasError && error && /*#__PURE__*/_jsx("div", {
+        className: "ui-form-field__error visible mt-1.5",
+        style: style.error,
+        "data-test-visible": hasError,
+        "data-testid": "".concat(name || id || 'unnamed', "-error"),
+        children: error
+      })]
+    })
   });
 };
 SearchableSelectField.propTypes = {

package/dist/components/SearchableField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchableField.js","names":["React","useEffect","useMemo","useState","PropTypes","isNull","isEmpty","get","classNames","Combobox","Icon","getPreferredProp","SearchableSelectField","props","_getPreferredProp","className","clearable","hideLabel","label","labelClassName","listBoxUpOptionsClassName","onChange","options","placeholder","required","truncateOptions","onInputChange","id","_props$style","style","container","input","hint","error","_useState","_useState2","_slicedToArray","isFocused","setIsFocused","hasError","name","reduxOnBlur","value","selectedOption","find","option","_useState3","_useState4","query","setQuery","filteredOptions","filter","toLowerCase","includes","onClearClick","event","stopPropagation","onBlur","createElement","onFocus","Label","icon","size","Input","displayValue","evt","target","onClick","ariaLabel","concat","Button","Options","map","Option","_ref","active","key","_ref2","selected","Fragment","propTypes","string","bool","func","isRequired","arrayOf","shape","oneOfType","object","array","number","node","defaultProps","undefined"],"sources":["../../src/components/SearchableField.js"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { isNull, isEmpty, get} from 'lodash';\nimport classNames from 'classnames';\nimport { Combobox } from '@headlessui/react';\nimport { Icon } from '@unite-us/ui';\nimport { getPreferredProp } from '@unite-us/ui';\nimport '../pages/builder/ReferralBuilderForm.scss';\n\nexport const SearchableSelectField = (props) => {\n  const {\n    className,\n    clearable,\n    hideLabel,\n    label,\n    labelClassName,\n    listBoxUpOptionsClassName,\n    onChange,\n    options,\n    placeholder,\n    required,\n    truncateOptions,\n    onInputChange,\n    id,\n    style = {\n      container: {},\n      label: {},\n      input: {},\n      hint: {},\n      error: {},\n    },\n  } = props\n  const [isFocused, setIsFocused] = useState(false);\n  const hasError = getPreferredProp(props, 'invalid') && getPreferredProp(props, 'touched');\n  const name = getPreferredProp(props, 'name');\n  const error = getPreferredProp(props, 'error');\n  const reduxOnBlur = getPreferredProp(props, 'onBlur');\n  const value = getPreferredProp(props, 'value')?.value;\n  const selectedOption = options.find((option) => option.value === value) || null;\n  const [query, setQuery] = useState('');\n  const filteredOptions = useMemo(() => (\n    options.filter((option) => (\n      query === '' || option.label.toLowerCase().includes(query.toLowerCase())\n    ))\n  ), [options, query]);\n\n  useEffect(() => {\n    if (isNull(selectedOption)) {\n      setQuery('');\n    }\n  }, [selectedOption, setQuery]);\n\n  const onClearClick = (event) => {\n    event.stopPropagation();\n    onChange({});\n    setIsFocused(false);\n  };\n\n  const onBlur = (event) => {\n    const value = get(event, 'target.value', '');\n    reduxOnBlur(value);\n    setIsFocused(false);\n  };\n\n  return (\n    <Combobox\n      value={value}\n      onChange={onChange}\n      onBlur={onBlur}\n      onFocus={() => setIsFocused(true)}\n    >\n      {() => (\n        <div className={classNames(className, 'antialiased')} aria-live=\"polite\">\n          <Combobox.Label className={classNames(\n            'block mb-1 leading-snug',\n            'font-extrabold font-medium-font normal-case',\n            !hasError && 'text-13px text-blue',\n            hasError && 'text-13px text-red',\n            labelClassName,\n            hideLabel && 'hidden',\n            required && 'ui-form-field__label--required',\n          )}\n          >\n            {label}\n          </Combobox.Label>\n          <div className=\"relative\">\n            <div className={classNames(\n              'relative box-border w-full bg-white cursor-default text-left',\n              'pl-3 py-2 border border-solid rounded-md shadow-sm focus:shadow-input-ring',\n              !hasError && 'border-dark-border-blue ',\n              !hasError && 'border-blue hover:border-action-blue focus:border-action-blue',\n              hasError && 'border border-dark-border-red',\n              hasError && 'border-red hover:border-action-red focus:border-action-red',\n              isFocused && 'border-solid border-focus-blue',\n              clearable && !isEmpty(selectedOption) ? 'pr-12' : 'pr-10',\n            )}\n            >\n              <div className=\"absolute inset-y-1\">\n                <Icon\n                  aria-hidden\n                  className=\"text-gray\"\n                  icon=\"IconSearch\"\n                  size={16}\n                />\n              </div>\n              <Combobox.Input\n                className=\"h-5 w-full pl-6 leading-5 focus:outline-none\"\n                displayValue={value}\n                onChange={(evt) => {\n                  if (onInputChange) { onInputChange(evt.target.value); } else { setQuery(evt.target.value); }\n                }}\n                value={value}\n                placeholder={placeholder}\n                id={id}\n              />\n              {\n                clearable && (!isEmpty(selectedOption) || !isEmpty(value)) && (\n                  <span\n                    className=\"absolute opacity-50 inset-y-0 inset-x-1 right-4 flex items-center pr-5 pl-1\"\n                  >\n                    <Icon\n                      className=\"text-gray\"\n                      icon=\"IconCross\"\n                      size={10}\n                      onClick={onClearClick}\n                      ariaLabel={`Clear ${label}`}\n                    />\n                  </span>\n                )\n              }\n              <Combobox.Button\n                className={classNames(\n                  'absolute inset-y-0 right-0 flex items-center pr-4 focus:outline-none',\n                  clearable && selectedOption ? 'pl-0' : 'pl-2',\n                )}\n              >\n                <Icon\n                  aria-hidden\n                  className=\"text-gray\"\n                  icon=\"IconChevronDown\"\n                  size={12}\n                />\n              </Combobox.Button>\n            </div>\n            <Combobox.Options\n              className={classNames(\n                'absolute z-dropdown box-content pl-0 py-1 z-10 mt-1 w-full max-h-80 overflow-auto',\n                'bg-white shadow-lg rounded-md text-base focus:outline-none',\n                listBoxUpOptionsClassName,\n              )}\n            >\n              {filteredOptions.map((option) => (\n                <Combobox.Option\n                  className={({ active }) => classNames(\n                    'relative cursor-pointer py-2 pl-3 pr-9 select-none',\n                    active && 'bg-action-blue',\n                  )}\n                  key={option.value}\n                  value={option}\n                >\n                  {({ active, selected }) => (\n                    <>\n                      <span\n                        className={classNames(\n                          'block leading-4',\n                          truncateOptions && 'truncate',\n                          active ? 'text-white' : 'text-text-blue',\n                          selected ? 'font-semibold mr-8' : 'font-normal',\n                        )}\n                      >\n                        {option.label}\n                      </span>\n                      {selected && (\n                        <span className=\"absolute inset-y-0 right-0 flex items-center pr-4\">\n                          <Icon\n                            aria-hidden\n                            className={classNames(\n                              'h-5 w-5 fill-current',\n                              active ? 'text-white' : 'text-action-blue',\n                            )}\n                            icon=\"IconCheck\"\n                          />\n                        </span>\n                      )}\n                    </>\n                  )}\n                </Combobox.Option>\n              ))}\n            </Combobox.Options>\n          </div>\n          {hasError && error && (\n          <div\n            className=\"ui-form-field__error visible mt-1.5\"\n            style={style.error}\n            data-test-visible={hasError}\n            data-testid={`${name || id || 'unnamed'}-error`}\n          >\n            {error}\n          </div>\n        )}\n        </div>\n      )}\n    </Combobox>\n  );\n};\n\nSearchableSelectField.propTypes = {\n  className: PropTypes.string,\n  clearable: PropTypes.bool,\n  onChange: PropTypes.func.isRequired,\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      value: PropTypes.oneOfType([\n        PropTypes.string,\n        PropTypes.bool,\n        PropTypes.object,\n        PropTypes.array,\n        PropTypes.number,\n      ]).isRequired,\n    }),\n  ),\n  label: PropTypes.node,\n  labelClassName: PropTypes.string,\n  hideLabel: PropTypes.bool,\n  listBoxUpOptionsClassName: PropTypes.string,\n  placeholder: PropTypes.string,\n  required: PropTypes.bool,\n  truncateOptions: PropTypes.bool,\n  onInputChange: PropTypes.func,\n  id: PropTypes.string,\n  style: PropTypes.shape({\n    container: PropTypes.object,\n    error: PropTypes.object,\n    hint: PropTypes.object,\n    input: PropTypes.object,\n    label: PropTypes.object,\n  }),\n};\n\nSearchableSelectField.defaultProps = {\n  className: '',\n  clearable: false,\n  options: [],\n  label: '',\n  labelClassName: undefined,\n  listBoxUpOptionsClassName: '',\n  placeholder: '',\n  required: false,\n  truncateOptions: true,\n  hideLabel: false,\n  onInputChange: null,\n  id: '',\n  style: {\n    container: {},\n    label: {},\n    input: {},\n    hint: {},\n    error: {},\n  },\n};\n\nexport default SearchableSelectField;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchableField.js","names":["React","useEffect","useMemo","useState","PropTypes","isNull","isEmpty","get","classNames","Combobox","Icon","getPreferredProp","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","SearchableSelectField","props","_getPreferredProp","className","clearable","hideLabel","label","labelClassName","listBoxUpOptionsClassName","onChange","options","placeholder","required","truncateOptions","onInputChange","id","style","container","input","hint","error","isFocused","setIsFocused","hasError","name","reduxOnBlur","value","selectedOption","find","option","query","setQuery","filteredOptions","filter","toLowerCase","includes","onClearClick","event","stopPropagation","onBlur","onFocus","children","Label","icon","size","Input","displayValue","evt","target","onClick","ariaLabel","concat","Button","Options","map","Option","_ref","active","_ref2","selected","propTypes","string","bool","func","isRequired","arrayOf","shape","oneOfType","object","array","number","node","defaultProps","undefined"],"sources":["../../src/components/SearchableField.js"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { isNull, isEmpty, get} from 'lodash';\nimport classNames from 'classnames';\nimport { Combobox } from '@headlessui/react';\nimport { Icon } from '@unite-us/ui';\nimport { getPreferredProp } from '@unite-us/ui';\nimport '../pages/builder/ReferralBuilderForm.scss';\n\nexport const SearchableSelectField = (props) => {\n  const {\n    className,\n    clearable,\n    hideLabel,\n    label,\n    labelClassName,\n    listBoxUpOptionsClassName,\n    onChange,\n    options,\n    placeholder,\n    required,\n    truncateOptions,\n    onInputChange,\n    id,\n    style = {\n      container: {},\n      label: {},\n      input: {},\n      hint: {},\n      error: {},\n    },\n  } = props\n  const [isFocused, setIsFocused] = useState(false);\n  const hasError = getPreferredProp(props, 'invalid') && getPreferredProp(props, 'touched');\n  const name = getPreferredProp(props, 'name');\n  const error = getPreferredProp(props, 'error');\n  const reduxOnBlur = getPreferredProp(props, 'onBlur');\n  const value = getPreferredProp(props, 'value')?.value;\n  const selectedOption = options.find((option) => option.value === value) || null;\n  const [query, setQuery] = useState('');\n  const filteredOptions = useMemo(() => (\n    options.filter((option) => (\n      query === '' || option.label.toLowerCase().includes(query.toLowerCase())\n    ))\n  ), [options, query]);\n\n  useEffect(() => {\n    if (isNull(selectedOption)) {\n      setQuery('');\n    }\n  }, [selectedOption, setQuery]);\n\n  const onClearClick = (event) => {\n    event.stopPropagation();\n    onChange({});\n    setIsFocused(false);\n  };\n\n  const onBlur = (event) => {\n    const value = get(event, 'target.value', '');\n    reduxOnBlur(value);\n    setIsFocused(false);\n  };\n\n  return (\n    <Combobox\n      value={value}\n      onChange={onChange}\n      onBlur={onBlur}\n      onFocus={() => setIsFocused(true)}\n    >\n      {() => (\n        <div className={classNames(className, 'antialiased')} aria-live=\"polite\">\n          <Combobox.Label className={classNames(\n            'block mb-1 leading-snug',\n            'font-extrabold font-medium-font normal-case',\n            !hasError && 'text-13px text-blue',\n            hasError && 'text-13px text-red',\n            labelClassName,\n            hideLabel && 'hidden',\n            required && 'ui-form-field__label--required',\n          )}\n          >\n            {label}\n          </Combobox.Label>\n          <div className=\"relative\">\n            <div className={classNames(\n              'relative box-border w-full bg-white cursor-default text-left',\n              'pl-3 py-2 border border-solid rounded-md shadow-sm focus:shadow-input-ring',\n              !hasError && 'border-dark-border-blue ',\n              !hasError && 'border-blue hover:border-action-blue focus:border-action-blue',\n              hasError && 'border border-dark-border-red',\n              hasError && 'border-red hover:border-action-red focus:border-action-red',\n              isFocused && 'border-solid border-focus-blue',\n              clearable && !isEmpty(selectedOption) ? 'pr-12' : 'pr-10',\n            )}\n            >\n              <div className=\"absolute inset-y-1\">\n                <Icon\n                  aria-hidden\n                  className=\"text-gray\"\n                  icon=\"IconSearch\"\n                  size={16}\n                />\n              </div>\n              <Combobox.Input\n                className=\"h-5 w-full pl-6 leading-5 focus:outline-none\"\n                displayValue={value}\n                onChange={(evt) => {\n                  if (onInputChange) { onInputChange(evt.target.value); } else { setQuery(evt.target.value); }\n                }}\n                value={value}\n                placeholder={placeholder}\n                id={id}\n              />\n              {\n                clearable && (!isEmpty(selectedOption) || !isEmpty(value)) && (\n                  <span\n                    className=\"absolute opacity-50 inset-y-0 inset-x-1 right-4 flex items-center pr-5 pl-1\"\n                  >\n                    <Icon\n                      className=\"text-gray\"\n                      icon=\"IconCross\"\n                      size={10}\n                      onClick={onClearClick}\n                      ariaLabel={`Clear ${label}`}\n                    />\n                  </span>\n                )\n              }\n              <Combobox.Button\n                className={classNames(\n                  'absolute inset-y-0 right-0 flex items-center pr-4 focus:outline-none',\n                  clearable && selectedOption ? 'pl-0' : 'pl-2',\n                )}\n              >\n                <Icon\n                  aria-hidden\n                  className=\"text-gray\"\n                  icon=\"IconChevronDown\"\n                  size={12}\n                />\n              </Combobox.Button>\n            </div>\n            <Combobox.Options\n              className={classNames(\n                'absolute z-dropdown box-content pl-0 py-1 z-10 mt-1 w-full max-h-80 overflow-auto',\n                'bg-white shadow-lg rounded-md text-base focus:outline-none',\n                listBoxUpOptionsClassName,\n              )}\n            >\n              {filteredOptions.map((option) => (\n                <Combobox.Option\n                  className={({ active }) => classNames(\n                    'relative cursor-pointer py-2 pl-3 pr-9 select-none',\n                    active && 'bg-action-blue',\n                  )}\n                  key={option.value}\n                  value={option}\n                >\n                  {({ active, selected }) => (\n                    <>\n                      <span\n                        className={classNames(\n                          'block leading-4',\n                          truncateOptions && 'truncate',\n                          active ? 'text-white' : 'text-text-blue',\n                          selected ? 'font-semibold mr-8' : 'font-normal',\n                        )}\n                      >\n                        {option.label}\n                      </span>\n                      {selected && (\n                        <span className=\"absolute inset-y-0 right-0 flex items-center pr-4\">\n                          <Icon\n                            aria-hidden\n                            className={classNames(\n                              'h-5 w-5 fill-current',\n                              active ? 'text-white' : 'text-action-blue',\n                            )}\n                            icon=\"IconCheck\"\n                          />\n                        </span>\n                      )}\n                    </>\n                  )}\n                </Combobox.Option>\n              ))}\n            </Combobox.Options>\n          </div>\n          {hasError && error && (\n          <div\n            className=\"ui-form-field__error visible mt-1.5\"\n            style={style.error}\n            data-test-visible={hasError}\n            data-testid={`${name || id || 'unnamed'}-error`}\n          >\n            {error}\n          </div>\n        )}\n        </div>\n      )}\n    </Combobox>\n  );\n};\n\nSearchableSelectField.propTypes = {\n  className: PropTypes.string,\n  clearable: PropTypes.bool,\n  onChange: PropTypes.func.isRequired,\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      value: PropTypes.oneOfType([\n        PropTypes.string,\n        PropTypes.bool,\n        PropTypes.object,\n        PropTypes.array,\n        PropTypes.number,\n      ]).isRequired,\n    }),\n  ),\n  label: PropTypes.node,\n  labelClassName: PropTypes.string,\n  hideLabel: PropTypes.bool,\n  listBoxUpOptionsClassName: PropTypes.string,\n  placeholder: PropTypes.string,\n  required: PropTypes.bool,\n  truncateOptions: PropTypes.bool,\n  onInputChange: PropTypes.func,\n  id: PropTypes.string,\n  style: PropTypes.shape({\n    container: PropTypes.object,\n    error: PropTypes.object,\n    hint: PropTypes.object,\n    input: PropTypes.object,\n    label: PropTypes.object,\n  }),\n};\n\nSearchableSelectField.defaultProps = {\n  className: '',\n  clearable: false,\n  options: [],\n  label: '',\n  labelClassName: undefined,\n  listBoxUpOptionsClassName: '',\n  placeholder: '',\n  required: false,\n  truncateOptions: true,\n  hideLabel: false,\n  onInputChange: null,\n  id: '',\n  style: {\n    container: {},\n    label: {},\n    input: {},\n    hint: {},\n    error: {},\n  },\n};\n\nexport default SearchableSelectField;\n"],"mappings":"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","ignoreList":[]}

package/dist/components/StepHeader.js

@@ -1,21 +1,30 @@
 import React from 'react';
 import { Icon } from '@unite-us/ui';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function StepHeader(props) {
-  var header = props.header,
-    icon = props.icon,
-    children = props.children;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "flex justify-center responsive-max-width flex-col mx-auto mb-8"
-  }, /*#__PURE__*/React.createElement("h1", {
-    className: "text-3xl my-5 text-center font-bold"
-  }, icon && /*#__PURE__*/React.createElement(Icon, {
-    icon: "V2Referrall",
-    color: "#182a44",
-    className: "w-12 h-12 pr-4"
-  }), header), /*#__PURE__*/React.createElement("div", {
-    className: "grid place-items-center"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "w-1/2 text-center"
-  }, children))));
+  const {
+    header,
+    icon,
+    children
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "flex justify-center responsive-max-width flex-col mx-auto mb-8",
+      children: [/*#__PURE__*/_jsxs("h1", {
+        className: "text-3xl my-5 text-center font-bold",
+        children: [icon && /*#__PURE__*/_jsx(Icon, {
+          icon: "V2Referrall",
+          color: "#182a44",
+          className: "w-12 h-12 pr-4"
+        }), header]
+      }), /*#__PURE__*/_jsx("div", {
+        className: "grid place-items-center",
+        children: /*#__PURE__*/_jsx("div", {
+          className: "w-1/2 text-center",
+          children: children
+        })
+      })]
+    })
+  });
 }
 //# sourceMappingURL=StepHeader.js.map

package/dist/components/StepHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepHeader.js","names":["React","Icon","StepHeader","props","header","icon","children","createElement","Fragment","className","color"],"sources":["../../src/components/StepHeader.js"],"sourcesContent":["import React from 'react';\nimport { Icon } from '@unite-us/ui';\n\nexport default function StepHeader(props) {\n  const { header, icon, children } = props;\n\n  return (\n    <>\n      <div className=\"flex justify-center responsive-max-width flex-col mx-auto mb-8\">\n        <h1 className='text-3xl my-5 text-center font-bold'>\n          {icon && <Icon icon=\"V2Referrall\" color=\"#182a44\" className=\"w-12 h-12 pr-4\" />}\n          {header}\n        </h1>\n        <div className='grid place-items-center'>\n          <div className='w-1/2 text-center'>\n            {children}\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,eAAe,SAASC,UAAUA,CAACC,KAAK,EAAE;EACxC,IAAQC,MAAM,GAAqBD,KAAK,CAAhCC,MAAM;IAAEC,IAAI,GAAeF,KAAK,CAAxBE,IAAI;IAAEC,QAAQ,GAAKH,KAAK,CAAlBG,QAAQ;EAE9B,oBACEN,KAAA,CAAAO,aAAA,CAAAP,KAAA,CAAAQ,QAAA,qBACER,KAAA,CAAAO,aAAA;IAAKE,SAAS,EAAC;EAAgE,gBAC7ET,KAAA,CAAAO,aAAA;IAAIE,SAAS,EAAC;EAAqC,GAChDJ,IAAI,iBAAIL,KAAA,CAAAO,aAAA,CAACN,IAAI;IAACI,IAAI,EAAC,aAAa;IAACK,KAAK,EAAC,SAAS;IAACD,SAAS,EAAC;EAAgB,CAAE,CAAC,EAC9EL,MACC,CAAC,eACLJ,KAAA,CAAAO,aAAA;IAAKE,SAAS,EAAC;EAAyB,gBACtCT,KAAA,CAAAO,aAAA;IAAKE,SAAS,EAAC;EAAmB,GAC/BH,QACE,CACF,CACF,CACL,CAAC;AAEP","ignoreList":[]}
+{"version":3,"file":"StepHeader.js","names":["React","Icon","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","StepHeader","props","header","icon","children","className","color"],"sources":["../../src/components/StepHeader.js"],"sourcesContent":["import React from 'react';\nimport { Icon } from '@unite-us/ui';\n\nexport default function StepHeader(props) {\n  const { header, icon, children } = props;\n\n  return (\n    <>\n      <div className=\"flex justify-center responsive-max-width flex-col mx-auto mb-8\">\n        <h1 className='text-3xl my-5 text-center font-bold'>\n          {icon && <Icon icon=\"V2Referrall\" color=\"#182a44\" className=\"w-12 h-12 pr-4\" />}\n          {header}\n        </h1>\n        <div className='grid place-items-center'>\n          <div className='w-1/2 text-center'>\n            {children}\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAEpC,eAAe,SAASC,UAAUA,CAACC,KAAK,EAAE;EACxC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;EAAS,CAAC,GAAGH,KAAK;EAExC,oBACEN,IAAA,CAAAI,SAAA;IAAAK,QAAA,eACEP,KAAA;MAAKQ,SAAS,EAAC,gEAAgE;MAAAD,QAAA,gBAC7EP,KAAA;QAAIQ,SAAS,EAAC,qCAAqC;QAAAD,QAAA,GAChDD,IAAI,iBAAIR,IAAA,CAACF,IAAI;UAACU,IAAI,EAAC,aAAa;UAACG,KAAK,EAAC,SAAS;UAACD,SAAS,EAAC;QAAgB,CAAE,CAAC,EAC9EH,MAAM;MAAA,CACL,CAAC,eACLP,IAAA;QAAKU,SAAS,EAAC,yBAAyB;QAAAD,QAAA,eACtCT,IAAA;UAAKU,SAAS,EAAC,mBAAmB;UAAAD,QAAA,EAC/BA;QAAQ,CACN;MAAC,CACH,CAAC;IAAA,CACH;EAAC,CACN,CAAC;AAEP","ignoreList":[]}

package/dist/components/Stepper.js

@@ -1,8 +1,9 @@
 import { isFunction, isBoolean } from "lodash";
 import React, { Fragment } from "react";
 import { Icon } from "@unite-us/ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getColorClass(active, completed) {
-  var iconBgColorClass = "bg-dark-grey",
+  let iconBgColorClass = "bg-dark-grey",
     textColorClass = "text-dark-grey";
   if (active) {
     iconBgColorClass = "bg-dark-blue";
@@ -12,67 +13,70 @@ function getColorClass(active, completed) {
     textColorClass = "text-action-blue";
   }
   return {
-    iconBgColorClass: iconBgColorClass,
-    textColorClass: textColorClass
+    iconBgColorClass,
+    textColorClass
   };
 }
 function Step(_ref) {
-  var active = _ref.active,
-    completed = _ref.completed,
-    disabled = _ref.disabled,
-    icon = _ref.icon,
-    label = _ref.label,
-    _onClick = _ref.onClick;
-  var _getColorClass = getColorClass(active, completed),
-    iconBgColorClass = _getColorClass.iconBgColorClass,
-    textColorClass = _getColorClass.textColorClass;
-  return /*#__PURE__*/React.createElement("button", {
+  let {
+    active,
+    completed,
+    disabled,
+    icon,
+    label,
+    onClick
+  } = _ref;
+  const {
+    iconBgColorClass,
+    textColorClass
+  } = getColorClass(active, completed);
+  return /*#__PURE__*/_jsxs("button", {
     className: "flex items-center p-4 ".concat(disabled ? "cursor-default" : ""),
-    onClick: function onClick(e) {
+    onClick: e => {
       if (!disabled) {
-        _onClick(e);
+        onClick(e);
       }
     },
     "aria-label": "Step ".concat(icon, ": ").concat(label),
-    "aria-disabled": disabled
-  }, completed ? /*#__PURE__*/React.createElement(Icon, {
-    icon: "V2CheckCircle",
-    color: "#4467AB",
-    size: 24
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: "text-white text-base flex items-center justify-center font-black w-6 h-6 rounded-full ".concat(iconBgColorClass)
-  }, icon), /*#__PURE__*/React.createElement("span", {
-    className: "font-black whitespace-no-wrap ml-2 text-base ".concat(textColorClass)
-  }, label));
+    "aria-disabled": disabled,
+    children: [completed ? /*#__PURE__*/_jsx(Icon, {
+      icon: "V2CheckCircle",
+      color: "#4467AB",
+      size: 24
+    }) : /*#__PURE__*/_jsx("div", {
+      className: "text-white text-base flex items-center justify-center font-black w-6 h-6 rounded-full ".concat(iconBgColorClass),
+      children: icon
+    }), /*#__PURE__*/_jsx("span", {
+      className: "font-black whitespace-no-wrap ml-2 text-base ".concat(textColorClass),
+      children: label
+    })]
+  });
 }
 export default function Stepper(_ref2) {
-  var steps = _ref2.steps,
-    className = _ref2.className;
-  var currentStep = steps.findIndex(function (s) {
-    return isFunction(s.isActive) && s.isActive();
+  let {
+    steps,
+    className
+  } = _ref2;
+  const currentStep = steps.findIndex(s => isFunction(s.isActive) && s.isActive());
+  return /*#__PURE__*/_jsx("div", {
+    className: "".concat(className, " flex justify-around items-center"),
+    children: steps.map((step, index) => {
+      const completed = isStepCompleted(steps[index], currentStep, index);
+      const disabled = isStepDisabled(steps[index], currentStep);
+      return /*#__PURE__*/_jsxs(Fragment, {
+        children: [/*#__PURE__*/_jsx(Step, {
+          active: index === currentStep,
+          completed: completed,
+          disabled: disabled || !completed,
+          icon: index + 1,
+          label: step.label,
+          onClick: () => step.onStepClick()
+        }, "step-".concat(index)), index < steps.length - 1 && /*#__PURE__*/_jsx("div", {
+          className: "h-px w-full bg-grey"
+        }, "divider-".concat(index))]
+      }, index);
+    })
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(className, " flex justify-around items-center")
-  }, steps.map(function (step, index) {
-    var completed = isStepCompleted(steps[index], currentStep, index);
-    var disabled = isStepDisabled(steps[index], currentStep);
-    return /*#__PURE__*/React.createElement(Fragment, {
-      key: index
-    }, /*#__PURE__*/React.createElement(Step, {
-      key: "step-".concat(index),
-      active: index === currentStep,
-      completed: completed,
-      disabled: disabled || !completed,
-      icon: index + 1,
-      label: step.label,
-      onClick: function onClick() {
-        return step.onStepClick();
-      }
-    }), index < steps.length - 1 && /*#__PURE__*/React.createElement("div", {
-      key: "divider-".concat(index),
-      className: "h-px w-full bg-grey"
-    }));
-  }));
 }
 function isStepCompleted(step, currentStep, index) {
   if (isFunction(step.stepCompleted)) {

package/dist/components/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","names":["isFunction","isBoolean","React","Fragment","Icon","getColorClass","active","completed","iconBgColorClass","textColorClass","Step","_ref","disabled","icon","label","onClick","_getColorClass","createElement","className","concat","e","color","size","Stepper","_ref2","steps","currentStep","findIndex","s","isActive","map","step","index","isStepCompleted","isStepDisabled","key","onStepClick","length","stepCompleted","stepDisabled"],"sources":["../../src/components/Stepper.js"],"sourcesContent":["import { isFunction, isBoolean } from \"lodash\";\nimport React, { Fragment } from \"react\";\nimport { Icon } from \"@unite-us/ui\";\n\nfunction getColorClass(active, completed) {\n  let iconBgColorClass = \"bg-dark-grey\", textColorClass = \"text-dark-grey\";\n  if (active) {\n    iconBgColorClass = \"bg-dark-blue\";\n    textColorClass = \"text-dark-blue\";\n  } else if (completed) {\n    iconBgColorClass = \"bg-action-blue\";\n    textColorClass = \"text-action-blue\";\n  }\n\n  return { iconBgColorClass, textColorClass };\n}\n\nfunction Step({ active, completed, disabled, icon, label, onClick }) {\n  const { iconBgColorClass, textColorClass } = getColorClass(active, completed);\n\n  return (\n    <button\n      className={`flex items-center p-4 ${disabled ? \"cursor-default\" : \"\"}`}\n      onClick={(e) => {\n        if (!disabled) {\n          onClick(e);\n        }\n      }}\n      aria-label={`Step ${icon}: ${label}`}\n      aria-disabled={disabled}\n    >\n      {completed ? (\n        <Icon icon=\"V2CheckCircle\" color=\"#4467AB\" size={24} />\n      ) : (\n        <div\n          className={`text-white text-base flex items-center justify-center font-black w-6 h-6 rounded-full ${iconBgColorClass}`}\n        >\n          {icon}\n        </div>\n      )}\n\n      <span className={`font-black whitespace-no-wrap ml-2 text-base ${textColorClass}`}>{label}</span>\n    </button>\n  );\n}\n\nexport default function Stepper({ steps, className }) {\n  const currentStep = steps.findIndex((s) => isFunction(s.isActive) && s.isActive());\n\n  return (\n    <div className={`${className} flex justify-around items-center`}>\n      {steps.map((step, index) => {\n        const completed = isStepCompleted(steps[index], currentStep, index);\n        const disabled = isStepDisabled(steps[index], currentStep);\n\n        return (\n          <Fragment key={index}>\n            <Step\n              key={`step-${index}`}\n              active={index === currentStep}\n              completed={completed}\n              disabled={disabled || !completed}\n              icon={index + 1}\n              label={step.label}\n              onClick={() => step.onStepClick()}\n            />\n            {index < steps.length - 1 && (\n              <div\n                key={`divider-${index}`}\n                className=\"h-px w-full bg-grey\"\n              />\n            )}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction isStepCompleted(step, currentStep, index) {\n  if (isFunction(step.stepCompleted)) {\n    return step.stepCompleted(currentStep);\n  }\n  if (isBoolean(step.stepCompleted)) {\n    return step.stepCompleted;\n  }\n  return currentStep > index;\n}\n\nfunction isStepDisabled(step, currentStep) {\n  if (isFunction(step.stepDisabled)) {\n    return step.stepDisabled(currentStep);\n  }\n  if (isBoolean(step.stepDisabled)) {\n    return step.stepDisabled;\n  }\n  return false;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Stepper.js","names":["isFunction","isBoolean","React","Fragment","Icon","jsx","_jsx","jsxs","_jsxs","getColorClass","active","completed","iconBgColorClass","textColorClass","Step","_ref","disabled","icon","label","onClick","className","concat","e","children","color","size","Stepper","_ref2","steps","currentStep","findIndex","s","isActive","map","step","index","isStepCompleted","isStepDisabled","onStepClick","length","stepCompleted","stepDisabled"],"sources":["../../src/components/Stepper.js"],"sourcesContent":["import { isFunction, isBoolean } from \"lodash\";\nimport React, { Fragment } from \"react\";\nimport { Icon } from \"@unite-us/ui\";\n\nfunction getColorClass(active, completed) {\n  let iconBgColorClass = \"bg-dark-grey\", textColorClass = \"text-dark-grey\";\n  if (active) {\n    iconBgColorClass = \"bg-dark-blue\";\n    textColorClass = \"text-dark-blue\";\n  } else if (completed) {\n    iconBgColorClass = \"bg-action-blue\";\n    textColorClass = \"text-action-blue\";\n  }\n\n  return { iconBgColorClass, textColorClass };\n}\n\nfunction Step({ active, completed, disabled, icon, label, onClick }) {\n  const { iconBgColorClass, textColorClass } = getColorClass(active, completed);\n\n  return (\n    <button\n      className={`flex items-center p-4 ${disabled ? \"cursor-default\" : \"\"}`}\n      onClick={(e) => {\n        if (!disabled) {\n          onClick(e);\n        }\n      }}\n      aria-label={`Step ${icon}: ${label}`}\n      aria-disabled={disabled}\n    >\n      {completed ? (\n        <Icon icon=\"V2CheckCircle\" color=\"#4467AB\" size={24} />\n      ) : (\n        <div\n          className={`text-white text-base flex items-center justify-center font-black w-6 h-6 rounded-full ${iconBgColorClass}`}\n        >\n          {icon}\n        </div>\n      )}\n\n      <span className={`font-black whitespace-no-wrap ml-2 text-base ${textColorClass}`}>{label}</span>\n    </button>\n  );\n}\n\nexport default function Stepper({ steps, className }) {\n  const currentStep = steps.findIndex((s) => isFunction(s.isActive) && s.isActive());\n\n  return (\n    <div className={`${className} flex justify-around items-center`}>\n      {steps.map((step, index) => {\n        const completed = isStepCompleted(steps[index], currentStep, index);\n        const disabled = isStepDisabled(steps[index], currentStep);\n\n        return (\n          <Fragment key={index}>\n            <Step\n              key={`step-${index}`}\n              active={index === currentStep}\n              completed={completed}\n              disabled={disabled || !completed}\n              icon={index + 1}\n              label={step.label}\n              onClick={() => step.onStepClick()}\n            />\n            {index < steps.length - 1 && (\n              <div\n                key={`divider-${index}`}\n                className=\"h-px w-full bg-grey\"\n              />\n            )}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction isStepCompleted(step, currentStep, index) {\n  if (isFunction(step.stepCompleted)) {\n    return step.stepCompleted(currentStep);\n  }\n  if (isBoolean(step.stepCompleted)) {\n    return step.stepCompleted;\n  }\n  return currentStep > index;\n}\n\nfunction isStepDisabled(step, currentStep) {\n  if (isFunction(step.stepDisabled)) {\n    return step.stepDisabled(currentStep);\n  }\n  if (isBoolean(step.stepDisabled)) {\n    return step.stepDisabled;\n  }\n  return false;\n}\n"],"mappings":"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","ignoreList":[]}