@ohos-ports/sprucelabs-react-heartwood-components 9.1.0-beta.0

package/lib/components/Forms/components/Autosuggest/Autosuggest.js

@@ -0,0 +1,372 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = require("react-dom");
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _reactAutosuggest = _interopRequireDefault(require("react-autosuggest"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Button = _interopRequireDefault(require("../../../Button/Button"));
+
+var _Icon = _interopRequireDefault(require("../../../Icon/Icon"));
+
+var _FormPartials = require("../../FormPartials");
+
+var ClearIcon = function ClearIcon(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("mask", {
+    id: "a",
+    maskUnits: "userSpaceOnUse",
+    x: "2",
+    y: "2",
+    width: "20",
+    height: "20"
+  }, _react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+  })), _react["default"].createElement("g", {
+    mask: "url(#a)"
+  }, _react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 0h24v24H0V0z"
+  })));
+};
+
+ClearIcon.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var theme = function theme(props) {
+  return {
+    container: (0, _classnames["default"])('text-input', {
+      'text-input-small': props.isSmall
+    }),
+    input: (0, _classnames["default"])('text-input__inner text-input__input', {
+      'text-input__inner--has-icon': props.hasIcon
+    }),
+    suggestionsContainer: 'autosuggest',
+    suggestionsContainerOpen: 'autosuggest--show-suggestions',
+    suggestionsList: 'autosuggest__list',
+    suggestion: 'autosuggest__list-item'
+  };
+};
+
+var Autosuggest =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(Autosuggest, _Component);
+
+  function Autosuggest(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Autosuggest);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Autosuggest).call(this, props));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "debouncedResize", (0, _debounce["default"])(function () {
+      return _this.handleWindowResize();
+    }, 500));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "componentDidMount", function () {
+      _this.getContainerPlacement();
+
+      if (typeof window !== 'undefined') {
+        window.addEventListener('resize', _this.debouncedResize, false);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "componentWillUnmount", function () {
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('resize', _this.debouncedResize, false);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getContainerPlacement", function () {
+      var input = _this.autosuggestRef && _this.autosuggestRef.current && _this.autosuggestRef.current.input;
+
+      if (typeof document === 'undefined') {
+        return;
+      } // For scrollX and scrollY cross-browser compatibility
+
+
+      var docEl = document.scrollingElement || document.documentElement;
+      var scrollX = (typeof docEl.scrollLeft === 'number' ? docEl : document.body).scrollLeft;
+      var scrollY = (typeof docEl.scrollTop === 'number' ? docEl : document.body).scrollTop;
+
+      if (!input) {
+        return;
+      }
+
+      var inputPosition = input.getBoundingClientRect();
+
+      _this.setState({
+        containerPlacement: {
+          top: inputPosition.y + inputPosition.height + scrollY,
+          left: inputPosition.x + scrollX,
+          width: inputPosition.width
+        }
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleWindowResize", function () {
+      _this.getContainerPlacement();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (event, _ref) {
+      var newValue = _ref.newValue;
+
+      _this.setState({
+        value: newValue
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onBlur", function () {
+      _this.setState(function (prevState) {
+        return {
+          showClearButton: prevState.value && prevState.value.length > 0 ? true : false
+        };
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSuggestionsFetchRequested",
+    /*#__PURE__*/
+    function () {
+      var _ref3 = (0, _asyncToGenerator2["default"])(
+      /*#__PURE__*/
+      _regenerator["default"].mark(function _callee(_ref2) {
+        var value, getSuggestions, suggestions;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                value = _ref2.value;
+                // Do some stuff to get suggestions
+                // May be async/passed by parent
+                getSuggestions = _this.props.getSuggestions;
+                _context.next = 4;
+                return getSuggestions(value);
+
+              case 4:
+                suggestions = _context.sent;
+                _context.next = 7;
+                return _this.setState({
+                  suggestions: suggestions || []
+                });
+
+              case 7:
+                _this.getContainerPlacement();
+
+                _this.scrollParentIfNeeded();
+
+              case 9:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x) {
+        return _ref3.apply(this, arguments);
+      };
+    }());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSuggestionsClearRequested", function () {
+      var defaultSuggestions = _this.props.defaultSuggestions;
+
+      _this.setState({
+        suggestions: defaultSuggestions
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "scrollParentIfNeeded", function () {
+      var autosuggestRef = _this.autosuggestRef && _this.autosuggestRef.current;
+      var suggestionsContainer = autosuggestRef && autosuggestRef.suggestionsContainer;
+      var autosuggestInput = autosuggestRef && autosuggestRef.autowhatever && autosuggestRef.autowhatever.input;
+
+      if (suggestionsContainer && autosuggestInput && _this.domNodeRef && _this.domNodeRef.current) {
+        var overflowParent = _this.findOverflowParent(_this.domNodeRef.current) || document.body;
+        var overflowBox = overflowParent.getBoundingClientRect();
+        var overflowBoxBottom = overflowBox.top + overflowBox.height;
+        var suggestionsBox = suggestionsContainer.getBoundingClientRect();
+        var suggestionsBottom = suggestionsBox.top + suggestionsBox.height;
+        var isSmoothScrollSupported = 'scrollBehavior' in document.documentElement.style;
+
+        if (suggestionsBottom > overflowBoxBottom) {
+          var inputTop = autosuggestInput.getBoundingClientRect().top;
+          var scrollNode = overflowParent === document.body ? window : overflowParent;
+
+          if (isSmoothScrollSupported) {
+            scrollNode.scrollTo({
+              top: inputTop,
+              behavior: 'smooth'
+            });
+          } else {
+            scrollNode.scrollTo(0, inputTop);
+          }
+        }
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "findOverflowParent", function (node) {
+      if (node == null || typeof node === 'undefined' || node.nodeType !== 1) {
+        return null;
+      }
+
+      var computedStyle = window.getComputedStyle(node);
+
+      if (computedStyle.overflow !== 'visible') {
+        return node;
+      } else {
+        return _this.findOverflowParent(node.parentNode);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClearInput", function () {
+      _this.setState({
+        value: '',
+        showClearButton: false
+      });
+    });
+    _this.domNodeRef = _react["default"].createRef();
+    _this.autosuggestRef = _react["default"].createRef();
+    _this.state = {
+      value: props.defaultValue || '',
+      suggestions: _this.props.defaultSuggestions || [],
+      showClearButton: false,
+      containerPlacement: {
+        top: 0,
+        left: 0,
+        width: 0
+      }
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Autosuggest, [{
+    key: "render",
+    value: function render() {
+      var _this$state = this.state,
+          value = _this$state.value,
+          suggestions = _this$state.suggestions,
+          showClearButton = _this$state.showClearButton,
+          containerPlacement = _this$state.containerPlacement;
+      var _this$props = this.props,
+          getSuggestionValue = _this$props.getSuggestionValue,
+          renderSuggestion = _this$props.renderSuggestion,
+          onSuggestionSelected = _this$props.onSuggestionSelected,
+          placeholder = _this$props.placeholder,
+          label = _this$props.label,
+          error = _this$props.error,
+          helper = _this$props.helper,
+          isSmall = _this$props.isSmall,
+          id = _this$props.id,
+          postLabel = _this$props.postLabel,
+          wrapperClassName = _this$props.wrapperClassName,
+          _this$props$inputProp = _this$props.inputProps,
+          originalInputProps = _this$props$inputProp === void 0 ? {} : _this$props$inputProp,
+          className = _this$props.className,
+          disabled = _this$props.disabled,
+          icon = _this$props.icon,
+          rest = (0, _objectWithoutProperties2["default"])(_this$props, ["getSuggestionValue", "renderSuggestion", "onSuggestionSelected", "placeholder", "label", "error", "helper", "isSmall", "id", "postLabel", "wrapperClassName", "inputProps", "className", "disabled", "icon"]);
+      var inputProps = (0, _objectSpread2["default"])({}, originalInputProps, {
+        placeholder: originalInputProps.placeholder || placeholder || '',
+        value: originalInputProps.value || value,
+        onChange: originalInputProps.onChange || this.onChange,
+        onBlur: originalInputProps.onBlur || this.onBlur,
+        disabled: disabled
+      });
+      var parentClass = (0, _classnames["default"])('text-input', {
+        className: className,
+        'text-input--has-error': error
+      });
+      return _react["default"].createElement("div", {
+        className: parentClass,
+        ref: this.domNodeRef
+      }, label && _react["default"].createElement(_FormPartials.InputPre, {
+        label: label,
+        id: id,
+        postLabel: postLabel
+      }), _react["default"].createElement("div", {
+        className: (0, _classnames["default"])('autosuggest__wrapper', wrapperClassName)
+      }, _react["default"].createElement(_reactAutosuggest["default"], (0, _extends2["default"])({
+        ref: this.autosuggestRef,
+        suggestions: suggestions,
+        onSuggestionsFetchRequested: this.onSuggestionsFetchRequested,
+        onSuggestionsClearRequested: this.onSuggestionsClearRequested,
+        getSuggestionValue: getSuggestionValue,
+        renderSuggestion: renderSuggestion,
+        renderSuggestionsContainer: function renderSuggestionsContainer(_ref4) {
+          var containerProps = _ref4.containerProps,
+              children = _ref4.children;
+
+          if (typeof document === 'undefined') {
+            return;
+          }
+
+          return (0, _reactDom.createPortal)(_react["default"].createElement("div", (0, _extends2["default"])({
+            style: {
+              top: "".concat(containerPlacement.top + 8, "px"),
+              left: "".concat(containerPlacement.left, "px"),
+              width: "".concat(containerPlacement.width, "px")
+            }
+          }, containerProps), children), document.body);
+        },
+        onSuggestionSelected: onSuggestionSelected,
+        inputProps: inputProps,
+        theme: theme({
+          isSmall: isSmall,
+          hasIcon: icon ? true : false
+        })
+      }, rest)), showClearButton && _react["default"].createElement(_Button["default"], {
+        isSmall: true,
+        className: "text-input__clear-btn",
+        icon: {
+          customIcon: ClearIcon,
+          name: 'clear_icon'
+        },
+        onClick: this.handleClearInput
+      }), icon && _react["default"].createElement(_Icon["default"], (0, _extends2["default"])({}, icon, {
+        className: "text-input__icon-pre"
+      }))), (helper || error) && _react["default"].createElement(_FormPartials.InputHelper, {
+        helper: helper,
+        error: error
+      }));
+    }
+  }]);
+  return Autosuggest;
+}(_react.Component);
+
+exports["default"] = Autosuggest;
+(0, _defineProperty2["default"])(Autosuggest, "defaultProps", {
+  defaultSuggestions: []
+});
+//# sourceMappingURL=Autosuggest.js.map

package/lib/components/Forms/components/Autosuggest/Autosuggest.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Forms/components/Autosuggest/Autosuggest.tsx"],"names":["ClearIcon","theme","props","container","isSmall","input","hasIcon","suggestionsContainer","suggestionsContainerOpen","suggestionsList","suggestion","Autosuggest","handleWindowResize","getContainerPlacement","window","addEventListener","debouncedResize","removeEventListener","autosuggestRef","current","document","docEl","scrollingElement","documentElement","scrollX","scrollLeft","body","scrollY","scrollTop","inputPosition","getBoundingClientRect","setState","containerPlacement","top","y","height","left","x","width","event","newValue","value","prevState","showClearButton","length","getSuggestions","suggestions","scrollParentIfNeeded","defaultSuggestions","autosuggestInput","autowhatever","domNodeRef","overflowParent","findOverflowParent","overflowBox","overflowBoxBottom","suggestionsBox","suggestionsBottom","isSmoothScrollSupported","style","inputTop","scrollNode","scrollTo","behavior","node","nodeType","computedStyle","getComputedStyle","overflow","parentNode","React","createRef","state","defaultValue","getSuggestionValue","renderSuggestion","onSuggestionSelected","placeholder","label","error","helper","id","postLabel","wrapperClassName","inputProps","originalInputProps","className","disabled","icon","rest","onChange","onBlur","parentClass","onSuggestionsFetchRequested","onSuggestionsClearRequested","containerProps","children","customIcon","name","handleClearInput","Component"],"mappings":"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","sourcesContent":["import React, { Component } from 'react'\nimport { createPortal } from 'react-dom'\nimport debounce from 'lodash/debounce'\nimport { default as ReactAutosuggest } from 'react-autosuggest'\nimport cx from 'classnames'\nimport Button from '../../../Button/Button'\nimport Icon, { IIconProps } from '../../../Icon/Icon'\nimport { InputPre, InputHelper } from '../../FormPartials'\nimport ClearIcon from '../../../../../static/assets/icons/ic_cancel.svg'\n\nexport interface IAutosuggestInterfaceProps {\n\t/** Unique identifier */\n\tid: string\n\n\t/** Teach Autosuggest how to calculate suggestions for any given input value. */\n\tgetSuggestions: (value: string) => Promise<Record<string, any>[]> | null\n\n\t/** Implement it to teach Autosuggest what should be the input value when suggestion is clicked. */\n\tgetSuggestionValue: Function\n\n\t/** Defines how suggestions will be rendered */\n\trenderSuggestion: Function\n\n\t/** Will be called every time suggestion is selected via mouse or keyboard. */\n\tonSuggestionSelected: Function\n\n\t/** Supply default suggestions that can be shown without input */\n\tdefaultSuggestions?: any[]\n\n\t/** Placeholder for the input */\n\tplaceholder?: string\n\n\t/** optionally pass a default value for this input */\n\tdefaultValue?: string\n\n\t/** optional label */\n\tlabel?: string\n\n\t/** Text after label */\n\tpostLabel?: string | React.ReactNode\n\n\t/** Error text */\n\terror?: string\n\n\t/** Helper text */\n\thelper?: string | React.ReactNode\n\n\t/** Set true to make the input less tall */\n\tisSmall?: boolean\n\n\t/** Adds a class to the Autosuggest's wrapper */\n\twrapperClassName?: string\n\n\t/** passed through to react autosuggest */\n\tinputProps?: Record<string, any>\n\n\t/** optional class name for wrapper */\n\tclassName?: string\n\n\t/** disable this input */\n\tdisabled?: boolean\n\n\t/** Optional; adds an icon to the beginning of the text input */\n\ticon?: IIconProps\n}\n\ninterface IAutosuggestInterfaceState {\n\tvalue: string\n\tsuggestions?: any[]\n\tshowClearButton: boolean\n\tcontainerPlacement: {\n\t\ttop: number\n\t\tleft: number\n\t\twidth: number\n\t}\n}\n\ninterface IThemeProps {\n\tisSmall?: boolean\n\thasIcon?: boolean\n}\n\nconst theme = (props: IThemeProps): any => ({\n\tcontainer: cx('text-input', {\n\t\t'text-input-small': props.isSmall\n\t}),\n\tinput: cx('text-input__inner text-input__input', {\n\t\t'text-input__inner--has-icon': props.hasIcon\n\t}),\n\tsuggestionsContainer: 'autosuggest',\n\tsuggestionsContainerOpen: 'autosuggest--show-suggestions',\n\tsuggestionsList: 'autosuggest__list',\n\tsuggestion: 'autosuggest__list-item'\n})\n\nexport default class Autosuggest extends Component<\n\tIAutosuggestInterfaceProps,\n\tIAutosuggestInterfaceState\n> {\n\tprivate static defaultProps = {\n\t\tdefaultSuggestions: []\n\t}\n\n\tprivate domNodeRef: React.RefObject<HTMLDivElement>\n\tprivate autosuggestRef: React.RefObject<ReactAutosuggest>\n\n\tprivate debouncedResize = debounce(() => this.handleWindowResize(), 500)\n\n\tpublic constructor(props: IAutosuggestInterfaceProps) {\n\t\tsuper(props)\n\n\t\tthis.domNodeRef = React.createRef()\n\t\tthis.autosuggestRef = React.createRef()\n\n\t\tthis.state = {\n\t\t\tvalue: props.defaultValue || '',\n\t\t\tsuggestions: this.props.defaultSuggestions || [],\n\t\t\tshowClearButton: false,\n\t\t\tcontainerPlacement: {\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\twidth: 0\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic componentDidMount = () => {\n\t\tthis.getContainerPlacement()\n\t\tif (typeof window !== 'undefined') {\n\t\t\twindow.addEventListener('resize', this.debouncedResize, false)\n\t\t}\n\t}\n\n\tpublic componentWillUnmount = () => {\n\t\tif (typeof window !== 'undefined') {\n\t\t\twindow.removeEventListener('resize', this.debouncedResize, false)\n\t\t}\n\t}\n\n\tpublic render(): React.ReactElement {\n\t\tconst {\n\t\t\tvalue,\n\t\t\tsuggestions,\n\t\t\tshowClearButton,\n\t\t\tcontainerPlacement\n\t\t} = this.state\n\n\t\tconst {\n\t\t\tgetSuggestionValue,\n\t\t\trenderSuggestion,\n\t\t\tonSuggestionSelected,\n\t\t\tplaceholder,\n\t\t\tlabel,\n\t\t\terror,\n\t\t\thelper,\n\t\t\tisSmall,\n\t\t\tid,\n\t\t\tpostLabel,\n\t\t\twrapperClassName,\n\t\t\tinputProps: originalInputProps = {},\n\t\t\tclassName,\n\t\t\tdisabled,\n\t\t\ticon,\n\t\t\t...rest\n\t\t} = this.props\n\n\t\tconst inputProps = {\n\t\t\t...originalInputProps,\n\t\t\tplaceholder: originalInputProps.placeholder || placeholder || '',\n\t\t\tvalue: originalInputProps.value || value,\n\t\t\tonChange: originalInputProps.onChange || this.onChange,\n\t\t\tonBlur: originalInputProps.onBlur || this.onBlur,\n\t\t\tdisabled\n\t\t}\n\n\t\tconst parentClass = cx('text-input', {\n\t\t\tclassName,\n\t\t\t'text-input--has-error': error\n\t\t})\n\n\t\treturn (\n\t\t\t<div className={parentClass} ref={this.domNodeRef}>\n\t\t\t\t{label && <InputPre label={label} id={id} postLabel={postLabel} />}\n\t\t\t\t<div className={cx('autosuggest__wrapper', wrapperClassName)}>\n\t\t\t\t\t<ReactAutosuggest\n\t\t\t\t\t\tref={this.autosuggestRef}\n\t\t\t\t\t\tsuggestions={suggestions}\n\t\t\t\t\t\tonSuggestionsFetchRequested={this.onSuggestionsFetchRequested}\n\t\t\t\t\t\tonSuggestionsClearRequested={this.onSuggestionsClearRequested}\n\t\t\t\t\t\tgetSuggestionValue={getSuggestionValue}\n\t\t\t\t\t\trenderSuggestion={renderSuggestion}\n\t\t\t\t\t\trenderSuggestionsContainer={({ containerProps, children }) => {\n\t\t\t\t\t\t\tif (typeof document === 'undefined') {\n\t\t\t\t\t\t\t\treturn\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn createPortal(\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\ttop: `${containerPlacement.top + 8}px`,\n\t\t\t\t\t\t\t\t\t\tleft: `${containerPlacement.left}px`,\n\t\t\t\t\t\t\t\t\t\twidth: `${containerPlacement.width}px`\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t{...containerProps}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t\t</div>,\n\t\t\t\t\t\t\t\tdocument.body\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonSuggestionSelected={onSuggestionSelected}\n\t\t\t\t\t\tinputProps={inputProps}\n\t\t\t\t\t\ttheme={theme({ isSmall, hasIcon: icon ? true : false })}\n\t\t\t\t\t\t{...rest}\n\t\t\t\t\t/>\n\t\t\t\t\t{showClearButton && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tclassName=\"text-input__clear-btn\"\n\t\t\t\t\t\t\ticon={{\n\t\t\t\t\t\t\t\tcustomIcon: ClearIcon,\n\t\t\t\t\t\t\t\tname: 'clear_icon'\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonClick={this.handleClearInput}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{icon && <Icon {...icon} className=\"text-input__icon-pre\" />}\n\t\t\t\t</div>\n\t\t\t\t{(helper || error) && <InputHelper helper={helper} error={error} />}\n\t\t\t</div>\n\t\t)\n\t}\n\n\tprivate getContainerPlacement = () => {\n\t\tconst input =\n\t\t\tthis.autosuggestRef &&\n\t\t\tthis.autosuggestRef.current &&\n\t\t\tthis.autosuggestRef.current.input\n\n\t\tif (typeof document === 'undefined') {\n\t\t\treturn\n\t\t}\n\n\t\t// For scrollX and scrollY cross-browser compatibility\n\t\tconst docEl = document.scrollingElement || document.documentElement\n\n\t\tconst scrollX = (typeof docEl.scrollLeft === 'number'\n\t\t\t? docEl\n\t\t\t: document.body\n\t\t).scrollLeft\n\n\t\tconst scrollY = (typeof docEl.scrollTop === 'number'\n\t\t\t? docEl\n\t\t\t: document.body\n\t\t).scrollTop\n\n\t\tif (!input) {\n\t\t\treturn\n\t\t}\n\n\t\tconst inputPosition = input.getBoundingClientRect()\n\n\t\tthis.setState({\n\t\t\tcontainerPlacement: {\n\t\t\t\ttop: inputPosition.y + inputPosition.height + scrollY,\n\t\t\t\tleft: inputPosition.x + scrollX,\n\t\t\t\twidth: inputPosition.width\n\t\t\t}\n\t\t})\n\t}\n\n\tprivate handleWindowResize = () => {\n\t\tthis.getContainerPlacement()\n\t}\n\n\tprivate onChange = (event: any, { newValue }: any) => {\n\t\tthis.setState({\n\t\t\tvalue: newValue\n\t\t})\n\t}\n\n\tprivate onBlur = () => {\n\t\tthis.setState(prevState => ({\n\t\t\tshowClearButton:\n\t\t\t\tprevState.value && prevState.value.length > 0 ? true : false\n\t\t}))\n\t}\n\n\tprivate onSuggestionsFetchRequested = async ({ value }: any) => {\n\t\t// Do some stuff to get suggestions\n\t\t// May be async/passed by parent\n\t\tconst { getSuggestions } = this.props\n\t\tconst suggestions = await getSuggestions(value)\n\t\tawait this.setState({\n\t\t\tsuggestions: suggestions || []\n\t\t})\n\n\t\tthis.getContainerPlacement()\n\t\tthis.scrollParentIfNeeded()\n\t}\n\n\tprivate onSuggestionsClearRequested = () => {\n\t\tconst { defaultSuggestions } = this.props\n\t\tthis.setState({\n\t\t\tsuggestions: defaultSuggestions\n\t\t})\n\t}\n\n\tprivate scrollParentIfNeeded = () => {\n\t\tconst autosuggestRef = this.autosuggestRef && this.autosuggestRef.current\n\t\tconst suggestionsContainer =\n\t\t\tautosuggestRef && autosuggestRef.suggestionsContainer\n\n\t\tconst autosuggestInput =\n\t\t\tautosuggestRef &&\n\t\t\tautosuggestRef.autowhatever &&\n\t\t\tautosuggestRef.autowhatever.input\n\n\t\tif (\n\t\t\tsuggestionsContainer &&\n\t\t\tautosuggestInput &&\n\t\t\tthis.domNodeRef &&\n\t\t\tthis.domNodeRef.current\n\t\t) {\n\t\t\tconst overflowParent =\n\t\t\t\tthis.findOverflowParent(this.domNodeRef.current) || document.body\n\t\t\tconst overflowBox = overflowParent.getBoundingClientRect()\n\t\t\tconst overflowBoxBottom = overflowBox.top + overflowBox.height\n\t\t\tconst suggestionsBox = suggestionsContainer.getBoundingClientRect()\n\t\t\tconst suggestionsBottom = suggestionsBox.top + suggestionsBox.height\n\n\t\t\tconst isSmoothScrollSupported =\n\t\t\t\t'scrollBehavior' in document.documentElement.style\n\n\t\t\tif (suggestionsBottom > overflowBoxBottom) {\n\t\t\t\tconst inputTop = autosuggestInput.getBoundingClientRect().top\n\t\t\t\tconst scrollNode =\n\t\t\t\t\toverflowParent === document.body ? window : overflowParent\n\t\t\t\tif (isSmoothScrollSupported) {\n\t\t\t\t\tscrollNode.scrollTo({\n\t\t\t\t\t\ttop: inputTop,\n\t\t\t\t\t\tbehavior: 'smooth'\n\t\t\t\t\t})\n\t\t\t\t} else {\n\t\t\t\t\tscrollNode.scrollTo(0, inputTop)\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate findOverflowParent = node => {\n\t\tif (node == null || typeof node === 'undefined' || node.nodeType !== 1) {\n\t\t\treturn null\n\t\t}\n\n\t\tconst computedStyle = window.getComputedStyle(node)\n\n\t\tif (computedStyle.overflow !== 'visible') {\n\t\t\treturn node\n\t\t} else {\n\t\t\treturn this.findOverflowParent(node.parentNode)\n\t\t}\n\t}\n\n\tprivate handleClearInput = () => {\n\t\tthis.setState({\n\t\t\tvalue: '',\n\t\t\tshowClearButton: false\n\t\t})\n\t}\n}\n"],"file":"Autosuggest.js"}

package/lib/components/Forms/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,23 @@
+import { IHWAction, IHWCheckbox } from '@sprucelabs/spruce-types';
+import React, { Component } from 'react';
+export interface ICheckboxProps extends Omit<IHWCheckbox, 'isIndeterminate'> {
+    /** Class for the checkbox wrapper */
+    className?: string;
+    /** triggered on change */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Is this 3 states, on, off, or half */
+    isIndeterminate?: boolean;
+    /** optional, provide a handler for Actions */
+    onAction?: (action: IHWAction) => any;
+}
+interface ICheckboxState {
+}
+export default class Checkbox extends Component<ICheckboxProps, ICheckboxState> {
+    private checkboxRef;
+    constructor(props: ICheckboxProps);
+    componentDidMount: () => void;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    render(): React.ReactElement;
+}
+export {};
+//# sourceMappingURL=Checkbox.d.ts.map

package/lib/components/Forms/components/Checkbox/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/Forms/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,EAAe,SAAS,EAAE,MAAM,OAAO,CAAA;AAKrD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,WAAW,EAAE,iBAAiB,CAAC;IAC3E,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAE3D,yCAAyC;IACzC,eAAe,CAAC,EAAE,OAAO,CAAA;IAEzB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,GAAG,CAAA;CACrC;AAED,UAAU,cAAc;CAAG;AAE3B,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,SAAS,CAC9C,cAAc,EACd,cAAc,CACd;IACA,OAAO,CAAC,WAAW,CAAmC;gBAEnC,KAAK,EAAE,cAAc;IAKjC,iBAAiB,aAIvB;IAEM,YAAY,mDAUlB;IAEM,MAAM,IAAI,KAAK,CAAC,YAAY;CAgDnC"}

package/lib/components/Forms/components/Checkbox/Checkbox.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var CheckIconYes = function CheckIconYes(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+  }));
+};
+
+CheckIconYes.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var CheckIconNo = function CheckIconNo(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+  }));
+};
+
+CheckIconNo.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var CheckIconMaybe = function CheckIconMaybe(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"
+  }));
+};
+
+CheckIconMaybe.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var Checkbox =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(Checkbox, _Component);
+
+  function Checkbox(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Checkbox);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Checkbox).call(this, props));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "componentDidMount", function () {
+      if (_this.checkboxRef.current) {
+        _this.checkboxRef.current.indeterminate = !!_this.props.isIndeterminate;
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (e) {
+      var onChange = _this.props.onChange;
+
+      if (_this.checkboxRef.current) {
+        _this.checkboxRef.current.indeterminate = false;
+      }
+
+      if (onChange) {
+        onChange(e);
+      }
+    });
+    _this.checkboxRef = _react["default"].createRef();
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Checkbox, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          action = _this$props.action,
+          className = _this$props.className,
+          id = _this$props.id,
+          isChecked = _this$props.isChecked,
+          isDisabled = _this$props.isDisabled,
+          label = _this$props.label,
+          name = _this$props.name,
+          onAction = _this$props.onAction,
+          postText = _this$props.postText;
+      var parentClass = (0, _classnames["default"])('checkbox-item', className);
+      return _react["default"].createElement("div", {
+        className: parentClass
+      }, _react["default"].createElement("div", {
+        className: "checkbox-item__inner"
+      }, _react["default"].createElement("input", {
+        checked: isChecked || false,
+        name: name || undefined,
+        ref: this.checkboxRef,
+        autoComplete: 'off',
+        className: "checkbox-item__input",
+        disabled: isDisabled || false,
+        id: id // Always use internal change handler
+        ,
+        onChange: function onChange() {
+          _this2.handleChange.apply(_this2, arguments);
+
+          if (onAction && action) {
+            onAction(action);
+          }
+        },
+        type: "checkbox"
+      }), _react["default"].createElement("label", {
+        className: "checkbox-item__label",
+        htmlFor: id
+      }, label), _react["default"].createElement("div", {
+        className: "checkbox-item__icons"
+      }, _react["default"].createElement(CheckIconYes, {
+        className: "checkbox-item__icon checkbox-item__icon-yes"
+      }), _react["default"].createElement(CheckIconNo, {
+        className: "checkbox-item__icon checkbox-item__icon-no"
+      }), _react["default"].createElement(CheckIconMaybe, {
+        className: "checkbox-item__icon checkbox-item__icon-maybe"
+      }))), postText && _react["default"].createElement("p", {
+        className: "checkbox-item__post-text"
+      }, postText));
+    }
+  }]);
+  return Checkbox;
+}(_react.Component);
+
+exports["default"] = Checkbox;
+//# sourceMappingURL=Checkbox.js.map

package/lib/components/Forms/components/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Forms/components/Checkbox/Checkbox.tsx"],"names":["CheckIconYes","CheckIconNo","CheckIconMaybe","Checkbox","props","checkboxRef","current","indeterminate","isIndeterminate","e","onChange","React","createRef","action","className","id","isChecked","isDisabled","label","name","onAction","postText","parentClass","undefined","handleChange","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AACA;;IACOA,Y,YAAAA,Y;;;;;;;;AAAAA,Y;;;;;;;IACAC,W,YAAAA,W;;;;;;;;AAAAA,W;;;;;;;IACAC,c,YAAAA,c;;;;;;;;AAAAA,c;;;;;;;IAkBcC,Q;;;;;AAMpB,oBAAmBC,KAAnB,EAA0C;AAAA;;AAAA;AACzC,oHAAMA,KAAN;AADyC,0GAKf,YAAM;AAChC,UAAI,MAAKC,WAAL,CAAiBC,OAArB,EAA8B;AAC7B,cAAKD,WAAL,CAAiBC,OAAjB,CAAyBC,aAAzB,GAAyC,CAAC,CAAC,MAAKH,KAAL,CAAWI,eAAtD;AACA;AACD,KATyC;AAAA,qGAWpB,UAACC,CAAD,EAAsC;AAAA,UACnDC,QADmD,GACtC,MAAKN,KADiC,CACnDM,QADmD;;AAG3D,UAAI,MAAKL,WAAL,CAAiBC,OAArB,EAA8B;AAC7B,cAAKD,WAAL,CAAiBC,OAAjB,CAAyBC,aAAzB,GAAyC,KAAzC;AACA;;AAED,UAAIG,QAAJ,EAAc;AACbA,QAAAA,QAAQ,CAACD,CAAD,CAAR;AACA;AACD,KArByC;AAEzC,UAAKJ,WAAL,GAAmBM,kBAAMC,SAAN,EAAnB;AAFyC;AAGzC;;;;6BAoBmC;AAAA;;AAAA,wBAW/B,KAAKR,KAX0B;AAAA,UAElCS,MAFkC,eAElCA,MAFkC;AAAA,UAGlCC,SAHkC,eAGlCA,SAHkC;AAAA,UAIlCC,EAJkC,eAIlCA,EAJkC;AAAA,UAKlCC,SALkC,eAKlCA,SALkC;AAAA,UAMlCC,UANkC,eAMlCA,UANkC;AAAA,UAOlCC,KAPkC,eAOlCA,KAPkC;AAAA,UAQlCC,IARkC,eAQlCA,IARkC;AAAA,UASlCC,QATkC,eASlCA,QATkC;AAAA,UAUlCC,QAVkC,eAUlCA,QAVkC;AAYnC,UAAMC,WAAW,GAAG,4BAAG,eAAH,EAAoBR,SAApB,CAApB;AAEA,aACC;AAAK,QAAA,SAAS,EAAEQ;AAAhB,SACC;AAAK,QAAA,SAAS,EAAC;AAAf,SACC;AACC,QAAA,OAAO,EAAEN,SAAS,IAAI,KADvB;AAEC,QAAA,IAAI,EAAEG,IAAI,IAAII,SAFf;AAGC,QAAA,GAAG,EAAE,KAAKlB,WAHX;AAIC,QAAA,YAAY,EAAE,KAJf;AAKC,QAAA,SAAS,EAAC,sBALX;AAMC,QAAA,QAAQ,EAAEY,UAAU,IAAI,KANzB;AAOC,QAAA,EAAE,EAAEF,EAPL,CAQC;AARD;AASC,QAAA,QAAQ,EAAE,oBAAa;AACtB,UAAA,MAAI,CAACS,YAAL,OAAA,MAAI,YAAJ;;AAEA,cAAIJ,QAAQ,IAAIP,MAAhB,EAAwB;AACvBO,YAAAA,QAAQ,CAACP,MAAD,CAAR;AACA;AACD,SAfF;AAgBC,QAAA,IAAI,EAAC;AAhBN,QADD,EAmBC;AAAO,QAAA,SAAS,EAAC,sBAAjB;AAAwC,QAAA,OAAO,EAAEE;AAAjD,SACEG,KADF,CAnBD,EAsBC;AAAK,QAAA,SAAS,EAAC;AAAf,SACC,gCAAC,YAAD;AAAc,QAAA,SAAS,EAAC;AAAxB,QADD,EAEC,gCAAC,WAAD;AAAa,QAAA,SAAS,EAAC;AAAvB,QAFD,EAGC,gCAAC,cAAD;AAAgB,QAAA,SAAS,EAAC;AAA1B,QAHD,CAtBD,CADD,EA6BEG,QAAQ,IAAI;AAAG,QAAA,SAAS,EAAC;AAAb,SAAyCA,QAAzC,CA7Bd,CADD;AAiCA;;;EA5EoCI,gB","sourcesContent":["import { IHWAction, IHWCheckbox } from '@sprucelabs/spruce-types'\nimport cx from 'classnames'\nimport React, { ChangeEvent, Component } from 'react'\nimport CheckIconYes from '../../../../../static/assets/icons/ic_check_box.svg'\nimport CheckIconNo from '../../../../../static/assets/icons/ic_check_box_outline_blank.svg'\nimport CheckIconMaybe from '../../../../../static/assets/icons/ic_indeterminate_check_box.svg'\n\nexport interface ICheckboxProps extends Omit<IHWCheckbox, 'isIndeterminate'> {\n\t/** Class for the checkbox wrapper */\n\tclassName?: string\n\n\t/** triggered on change */\n\tonChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n\n\t/** Is this 3 states, on, off, or half */\n\tisIndeterminate?: boolean\n\n\t/** optional, provide a handler for Actions */\n\tonAction?: (action: IHWAction) => any\n}\n\ninterface ICheckboxState {}\n\nexport default class Checkbox extends Component<\n\tICheckboxProps,\n\tICheckboxState\n> {\n\tprivate checkboxRef: React.RefObject<HTMLInputElement>\n\n\tpublic constructor(props: ICheckboxProps) {\n\t\tsuper(props)\n\t\tthis.checkboxRef = React.createRef()\n\t}\n\n\tpublic componentDidMount = () => {\n\t\tif (this.checkboxRef.current) {\n\t\t\tthis.checkboxRef.current.indeterminate = !!this.props.isIndeterminate\n\t\t}\n\t}\n\n\tpublic handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n\t\tconst { onChange } = this.props\n\n\t\tif (this.checkboxRef.current) {\n\t\t\tthis.checkboxRef.current.indeterminate = false\n\t\t}\n\n\t\tif (onChange) {\n\t\t\tonChange(e)\n\t\t}\n\t}\n\n\tpublic render(): React.ReactElement {\n\t\tconst {\n\t\t\taction,\n\t\t\tclassName,\n\t\t\tid,\n\t\t\tisChecked,\n\t\t\tisDisabled,\n\t\t\tlabel,\n\t\t\tname,\n\t\t\tonAction,\n\t\t\tpostText\n\t\t} = this.props\n\t\tconst parentClass = cx('checkbox-item', className)\n\n\t\treturn (\n\t\t\t<div className={parentClass}>\n\t\t\t\t<div className=\"checkbox-item__inner\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tchecked={isChecked || false}\n\t\t\t\t\t\tname={name || undefined}\n\t\t\t\t\t\tref={this.checkboxRef}\n\t\t\t\t\t\tautoComplete={'off'}\n\t\t\t\t\t\tclassName=\"checkbox-item__input\"\n\t\t\t\t\t\tdisabled={isDisabled || false}\n\t\t\t\t\t\tid={id}\n\t\t\t\t\t\t// Always use internal change handler\n\t\t\t\t\t\tonChange={(...args) => {\n\t\t\t\t\t\t\tthis.handleChange(...args)\n\n\t\t\t\t\t\t\tif (onAction && action) {\n\t\t\t\t\t\t\t\tonAction(action)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t/>\n\t\t\t\t\t<label className=\"checkbox-item__label\" htmlFor={id}>\n\t\t\t\t\t\t{label}\n\t\t\t\t\t</label>\n\t\t\t\t\t<div className=\"checkbox-item__icons\">\n\t\t\t\t\t\t<CheckIconYes className=\"checkbox-item__icon checkbox-item__icon-yes\" />\n\t\t\t\t\t\t<CheckIconNo className=\"checkbox-item__icon checkbox-item__icon-no\" />\n\t\t\t\t\t\t<CheckIconMaybe className=\"checkbox-item__icon checkbox-item__icon-maybe\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{postText && <p className=\"checkbox-item__post-text\">{postText}</p>}\n\t\t\t</div>\n\t\t)\n\t}\n}\n"],"file":"Checkbox.js"}