@terraware/web-components 1.0.2 → 1.0.5

package/components/ProgressCircle/ProgressCircle.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import './styles.scss';
+export interface Props {
+    size?: 'small' | 'medium' | 'large';
+    determinate: true | false;
+    value?: number;
+    hideValue?: boolean;
+}
+export default function ProgressCircle(props: Props): JSX.Element;
+//# sourceMappingURL=ProgressCircle.d.ts.map

package/components/ProgressCircle/ProgressCircle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressCircle/ProgressCircle.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,KAAK;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,WAAW,EAAE,IAAI,GAAG,KAAK,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAgBhE"}

package/components/ProgressCircle/ProgressCircle.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ProgressCircle;
+
+var _material = require("@mui/material");
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./styles.scss");
+
+function ProgressCircle(props) {
+  var _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size,
+      determinate = props.determinate,
+      value = props.value,
+      hideValue = props.hideValue;
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: "circle-container"
+  }, /*#__PURE__*/_react.default.createElement(_material.CircularProgress, {
+    variant: "determinate",
+    value: 100,
+    className: "circle-track circle-track--".concat(size)
+  }), /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: "label-container"
+  }, value && !hideValue && /*#__PURE__*/_react.default.createElement("p", {
+    className: "progress-circle-label--{size}"
+  }, "".concat(Math.round(value), "%"))), /*#__PURE__*/_react.default.createElement(_material.CircularProgress, {
+    value: value,
+    variant: determinate ? 'determinate' : 'indeterminate',
+    className: "circle-fill circle-track--".concat(size)
+  }));
+}

package/components/ProgressCircle/styles.scss

@@ -0,0 +1,84 @@
+@import '../../style-dictionary-dist/progressCircle_variables.scss';
+
+.circle-container {
+  position: relative;
+  display: inline-flex;
+}
+
+.circle-fill {
+  position: absolute;
+  left: 0;
+  color: $tw-clr-base-semantic-productive;
+}
+
+.circle-track {
+  color: $tw-clr-base-semantic-productive-bg !important;
+  &--small {
+    width: $tw-spc-base-x-large !important;
+    height: $tw-spc-base-x-large !important;
+
+    & svg {
+      & circle {
+        stroke-width: 3.67;
+        r: 20;
+      }
+    }
+  }
+
+  &--medium {
+    width: calc(#{$tw-spc-base-x-large} * 2) !important;
+    height: calc(#{$tw-spc-base-x-large} * 2) !important;
+    & svg {
+      & circle {
+        stroke-width: 3.67;
+        r: 18;
+      }
+    }
+  }
+
+  &--large {
+    width: calc(#{$tw-spc-base-x-large} * 4) !important;
+    height: calc(#{$tw-spc-base-x-large} * 4) !important;
+    & svg {
+      & circle {
+        stroke-width: 3.67;
+        r: 14;
+      }
+    }
+  }
+}
+
+.label-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.progress-circle-label {
+  &--small {
+    font-family: $tw-fnt-prgrss-circle-value-small-font-family;
+    font-size: $tw-fnt-prgrss-circle-value-small-font-size;
+    font-weight: $tw-fnt-prgrss-circle-value-small-font-weight;
+    line-height: $tw-fnt-prgrss-circle-value-small-line-height;
+    color: $tw-clr-text-fill;
+  }
+  &--medium {
+    font-family: $tw-fnt-prgrss-circle-value-medium-font-family;
+    font-size: $tw-fnt-prgrss-circle-value-medium-font-size;
+    font-weight: $tw-fnt-prgrss-circle-value-medium-font-weight;
+    line-height: $tw-fnt-prgrss-circle-value-medium-line-height;
+    color: $tw-clr-text-fill;
+  }
+  &--large {
+    font-family: $tw-fnt-prgrss-circle-value-large-font-family;
+    font-size: $tw-fnt-prgrss-circle-value-large-font-size;
+    font-weight: $tw-fnt-prgrss-circle-value-large-font-weight;
+    line-height: $tw-fnt-prgrss-circle-value-large-line-height;
+    color: $tw-clr-text-fill;
+  }
+}

package/components/RadioButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface Props {
+    id: string;
+    name: string;
+    label: React.ReactNode;
+    value?: boolean | null;
+    onChange: (id: string, value: boolean) => void;
+}
+export default function RadioButton(props: Props): JSX.Element;
+//# sourceMappingURL=RadioButton.d.ts.map

package/components/RadioButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../src/components/RadioButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAE9C,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAa7D"}

package/components/RadioButton.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = RadioButton;
+
+var _material = require("@mui/material");
+
+var _react = _interopRequireDefault(require("react"));
+
+function RadioButton(props) {
+  var _props$value;
+
+  var onChange = function onChange(event, checked) {
+    props.onChange(props.id, checked);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_material.FormControlLabel, {
+    id: props.id,
+    onChange: onChange,
+    label: props.label,
+    control: /*#__PURE__*/_react.default.createElement(_material.Radio, {
+      id: 'radio-' + props.id,
+      color: "primary",
+      checked: (_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : false
+    })
+  });
+}

package/components/Select/Select.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import './styles.scss';
+export interface SelectProps {
+    onChange: (newValue: string) => void;
+    label?: string;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    helperText?: string | string[];
+    placeholder?: string;
+    errorText?: string | string[];
+    warningText?: string | string[];
+    selectedValue?: string;
+    readonly?: boolean;
+    options?: string[];
+    fullWidth?: boolean;
+    hideArrow?: boolean;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    fixedMenu?: boolean;
+}
+export default function Select(props: SelectProps): JSX.Element;
+//# sourceMappingURL=Select.d.ts.map

package/components/Select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":";AAGA,OAAO,eAAe,CAAC;AAGvB,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAsN9D"}

package/components/Select/Select.js

@@ -0,0 +1,248 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Select;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+
+require("./styles.scss");
+
+var _utils = require("../../utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Select(props) {
+  var selectedValue = props.selectedValue,
+      onChange = props.onChange,
+      label = props.label,
+      disabled = props.disabled,
+      id = props.id,
+      className = props.className,
+      helperText = props.helperText,
+      placeholder = props.placeholder,
+      errorText = props.errorText,
+      warningText = props.warningText,
+      _props$readonly = props.readonly,
+      readonly = _props$readonly === void 0 ? true : _props$readonly,
+      options = props.options,
+      fullWidth = props.fullWidth,
+      hideArrow = props.hideArrow,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
+      fixedMenu = props.fixedMenu;
+  var selectClass = (0, _classnames.default)({
+    'textfield-value': true,
+    'textfield-value--disabled': disabled,
+    'textfield-value--error': !!errorText,
+    'textfield-value--warning': !!warningText,
+    'textfield-value--readonly': readonly
+  });
+  var itemClass = (0, _classnames.default)({
+    'select-value': true,
+    'select-value--disabled': disabled
+  });
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      openedOptions = _useState2[0],
+      setOpenedOptions = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(-1),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      selectedIndex = _useState4[0],
+      setSelectedIndex = _useState4[1];
+
+  var inputRef = (0, _react.useRef)(null);
+  var dropdownRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (options && selectedValue && selectedIndex === -1) {
+      var newIndex = options.indexOf(selectedValue);
+
+      if (newIndex !== -1) {
+        setSelectedIndex(newIndex);
+      }
+    } else if (!options) {
+      setSelectedIndex(-1);
+    }
+  }, [options, selectedValue, selectedIndex]);
+  (0, _react.useEffect)(function () {
+    window.addEventListener('click', handleClick);
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('click', handleClick);
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  var handleClick = function handleClick(event) {
+    // Don't respond to user clicks inside the input box because those are
+    // already handled by toggleOptions()
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
+      setOpenedOptions(false);
+    }
+  };
+
+  var handleResize = function handleResize() {
+    setOpenedOptions(false);
+  };
+
+  (0, _react.useEffect)(function () {
+    if (openedOptions) {
+      scrollToSelectedElement();
+
+      if (fixedMenu && inputRef.current && dropdownRef.current) {
+        dropdownRef.current.style.width = "".concat(inputRef.current.offsetWidth, "px");
+        var bbox = inputRef.current.getBoundingClientRect();
+        dropdownRef.current.style.top = "".concat(bbox.top + bbox.height, "px");
+        var dropdownBottom = dropdownRef.current.clientHeight + bbox.top + bbox.height;
+        var windowHeightThreshold = window.innerHeight - bbox.height;
+
+        if (dropdownBottom > windowHeightThreshold) {
+          dropdownRef.current.style.maxHeight = "".concat(dropdownRef.current.clientHeight - (dropdownBottom - windowHeightThreshold), "px");
+        }
+      }
+    }
+  }, [fixedMenu, openedOptions]);
+
+  var toggleOptions = function toggleOptions() {
+    setOpenedOptions(function (isOpen) {
+      return !isOpen;
+    });
+  };
+
+  var onOptionSelected = function onOptionSelected(option, index) {
+    if (onChange) {
+      onChange(option);
+    }
+
+    setOpenedOptions(false);
+    setSelectedIndex(index);
+  };
+
+  var onChangeHandler = function onChangeHandler(e) {
+    var textValue = e.target.value;
+
+    if ((0, _utils.isWhitespaces)(textValue)) {
+      return;
+    }
+
+    if (onChange) {
+      onChange(textValue);
+    }
+
+    setOpenedOptions(true);
+  };
+
+  var onKeyDownHandler = function onKeyDownHandler(e) {
+    var _dropdownRef$current;
+
+    var pressedLetter = e.key.toUpperCase();
+    var items = (_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.getElementsByTagName('li');
+
+    if (items) {
+      var arrayOfItems = Array.from(items);
+
+      for (var _i = 0, _arrayOfItems = arrayOfItems; _i < _arrayOfItems.length; _i++) {
+        var item = _arrayOfItems[_i];
+
+        if (item.dataset.key === pressedLetter) {
+          item.scrollIntoView();
+          return;
+        }
+      }
+    }
+  };
+
+  var scrollToSelectedElement = function scrollToSelectedElement() {
+    var _dropdownRef$current2;
+
+    var items = (_dropdownRef$current2 = dropdownRef.current) === null || _dropdownRef$current2 === void 0 ? void 0 : _dropdownRef$current2.getElementsByTagName('li');
+
+    if (items) {
+      var arrayOfItems = Array.from(items);
+
+      for (var _i2 = 0, _arrayOfItems2 = arrayOfItems; _i2 < _arrayOfItems2.length; _i2++) {
+        var item = _arrayOfItems2[_i2];
+
+        if (item.dataset.selected === 'true') {
+          if (dropdownRef.current) {
+            var topPos = item.offsetTop;
+            dropdownRef.current.scrollTop = topPos;
+            return;
+          }
+        }
+      }
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "select ".concat(className)
+  }, label && /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id,
+    className: "textfield-label"
+  }, label), /*#__PURE__*/_react.default.createElement("div", {
+    className: "textfield-container ".concat(fullWidth ? 'textfield-container--fullWidth' : '')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
+    className: selectClass,
+    onClick: toggleOptions,
+    ref: inputRef
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    value: selectedValue || '',
+    readOnly: readonly,
+    placeholder: placeholder,
+    onChange: onChangeHandler,
+    onKeyDown: onKeyDownHandler,
+    onBlur: onBlur,
+    onFocus: onFocus
+  }), !hideArrow && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: 'chevronDown',
+    className: "textfield-value--icon-right"
+  })), options && options.length > 0 && openedOptions && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fixedMenu && /*#__PURE__*/_react.default.createElement("div", {
+    className: "scroll-block"
+  }), /*#__PURE__*/_react.default.createElement("ul", {
+    className: 'options-container' + (fixedMenu ? ' fixed-menu' : ''),
+    ref: dropdownRef
+  }, options.map(function (option, index) {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      "data-key": option.charAt(0).toUpperCase(),
+      "data-selected": selectedIndex === index,
+      key: index,
+      onClick: function onClick() {
+        return onOptionSelected(option, index);
+      },
+      className: "".concat(itemClass, " ").concat(selectedIndex === index ? 'select-value--selected' : '', " ")
+    }, option);
+  })))), errorText && /*#__PURE__*/_react.default.createElement("div", {
+    className: "textfield-label-container"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "error",
+    className: "textfield-error-text--icon"
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id,
+    className: "textfield-error-text"
+  }, errorText)), warningText && /*#__PURE__*/_react.default.createElement("div", {
+    className: "textfield-label-container"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "warning",
+    className: "textfield-warning-text--icon"
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id,
+    className: "textfield-warning-text"
+  }, warningText)), helperText && /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id,
+    className: "textfield-help-text"
+  }, helperText));
+}