@terraware/web-components 3.5.12-rc.7 → 3.5.12

package/components/Select/SelectT.js

@@ -0,0 +1,245 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SelectT;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _utils = require("../../utils");
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+var _IconTooltip = _interopRequireDefault(require("../IconTooltip"));
+require("./styles.scss");
+// Styles for overriding select dropdown
+
+function SelectT(props) {
+  const {
+    className,
+    disabled,
+    displayLabel,
+    editable,
+    errorText,
+    fixedMenu,
+    fullWidth,
+    helperText,
+    hideArrow,
+    id,
+    isEqual,
+    label,
+    onBlur,
+    onChange,
+    onFocus,
+    options,
+    placeholder,
+    readonly,
+    renderOption,
+    required,
+    selectedValue,
+    selectStyles,
+    sx,
+    tooltipTitle,
+    toT,
+    warningText
+  } = props;
+  const selectClass = (0, _classnames.default)({
+    'textfield-value': true,
+    'textfield-value--disabled': disabled,
+    'textfield-value--error': !!errorText,
+    'textfield-value--warning': !!warningText,
+    'textfield-value--readonly': readonly
+  });
+  const itemClass = (0, _classnames.default)({
+    'select-value': true,
+    'select-value--disabled': disabled
+  });
+  const [openedOptions, setOpenedOptions] = (0, _react.useState)(false);
+  const [fixedMenuPositioned, setFixedMenuPositioned] = (0, _react.useState)(false);
+  const [selectedIndex, setSelectedIndex] = (0, _react.useState)(-1);
+  const inputRef = (0, _react.useRef)(null);
+  const dropdownRef = (0, _react.useRef)(null);
+  const hasOptions = (0, _react.useMemo)(() => options !== undefined && options.length > 0, [options]);
+  const repositionMenu = (0, _react.useCallback)(checkHeight => {
+    if (openedOptions && hasOptions) {
+      scrollToSelectedElement();
+      if (fixedMenu && inputRef.current && dropdownRef.current) {
+        dropdownRef.current.style.width = "".concat(inputRef.current.offsetWidth, "px");
+        const bbox = inputRef.current.getBoundingClientRect();
+        dropdownRef.current.style.top = "".concat(bbox.top + bbox.height, "px");
+        const dropdownBottom = dropdownRef.current.clientHeight + bbox.top + bbox.height;
+        const windowHeightThreshold = window.innerHeight - bbox.height;
+        if (checkHeight && dropdownBottom > windowHeightThreshold) {
+          dropdownRef.current.style.maxHeight = "".concat(dropdownRef.current.clientHeight - (dropdownBottom - windowHeightThreshold), "px");
+        }
+        setFixedMenuPositioned(true);
+      }
+    } else if (fixedMenu) {
+      setFixedMenuPositioned(false);
+    }
+  }, [fixedMenu, openedOptions, hasOptions]);
+  (0, _react.useEffect)(() => {
+    repositionMenu(true);
+  }, [repositionMenu]);
+  (0, _react.useEffect)(() => {
+    let newIndex = -1;
+    if (options && selectedValue) {
+      options.find((option, index) => {
+        if (isEqual(option, selectedValue)) {
+          newIndex = index;
+          return true;
+        }
+        return false;
+      });
+    }
+    if (newIndex !== selectedIndex) {
+      setSelectedIndex(newIndex);
+    }
+  }, [options, selectedValue, selectedIndex, isEqual]);
+  const handleScroll = (0, _react.useCallback)(() => {
+    repositionMenu(false);
+  }, [repositionMenu]);
+  const handleClick = (0, _react.useCallback)(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);
+    }
+  }, []);
+  const handleResize = (0, _react.useCallback)(() => {
+    setOpenedOptions(false);
+  }, []);
+  (0, _react.useEffect)(() => {
+    window.addEventListener('click', handleClick);
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('click', handleClick);
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleClick, handleResize, handleScroll]);
+  const toggleOptions = () => {
+    setOpenedOptions(isOpen => !isOpen);
+  };
+  const onOptionSelected = (option, index) => {
+    if (onChange) {
+      onChange(option);
+    }
+    setOpenedOptions(false);
+    setSelectedIndex(index);
+  };
+  const onChangeHandler = e => {
+    const textValue = e.target.value;
+    if ((0, _utils.isWhitespaces)(textValue)) {
+      return;
+    }
+    if (onChange) {
+      onChange(toT(textValue));
+    }
+    setOpenedOptions(true);
+  };
+  const onKeyDownHandler = e => {
+    if (e.key === 'Tab') {
+      toggleOptions();
+    } else {
+      var _dropdownRef$current;
+      const pressedLetter = e.key.toUpperCase();
+      const items = (_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.getElementsByTagName('li');
+      if (items) {
+        const arrayOfItems = Array.from(items);
+        for (const item of arrayOfItems) {
+          if (item.dataset.key === pressedLetter) {
+            item.scrollIntoView({
+              behavior: 'smooth',
+              block: 'start'
+            });
+            return;
+          }
+        }
+      }
+    }
+  };
+  const scrollToSelectedElement = () => {
+    var _dropdownRef$current2;
+    const items = (_dropdownRef$current2 = dropdownRef.current) === null || _dropdownRef$current2 === void 0 ? void 0 : _dropdownRef$current2.getElementsByTagName('li');
+    if (items) {
+      const arrayOfItems = Array.from(items);
+      for (const item of arrayOfItems) {
+        if (item.dataset.selected === 'true') {
+          if (dropdownRef.current) {
+            const topPos = item.offsetTop;
+            dropdownRef.current.scrollTop = topPos;
+            return;
+          }
+        }
+      }
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: "select ".concat(className),
+    sx: sx
+  }, label && /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id,
+    className: "textfield-label"
+  }, label, " ", required ? '*' : '', " ", tooltipTitle && /*#__PURE__*/_react.default.createElement(_IconTooltip.default, {
+    title: tooltipTitle
+  })), /*#__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,
+    style: (selectStyles || {}).inputContainer
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    value: displayLabel(selectedValue),
+    readOnly: !editable || readonly,
+    placeholder: placeholder,
+    onChange: onChangeHandler,
+    onKeyDown: onKeyDownHandler,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    required: required,
+    style: (selectStyles || {}).input
+  }), !hideArrow && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: 'chevronDown',
+    className: "textfield-value--icon-right",
+    style: (selectStyles || {}).arrow
+  })), 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' : '') + (fixedMenuPositioned ? ' positioned' : ''),
+    ref: dropdownRef,
+    style: (selectStyles || {}).optionsContainer
+  }, options.map((option, index) => {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      "data-key": displayLabel(option).charAt(0).toUpperCase(),
+      "data-selected": selectedIndex === index,
+      key: index,
+      onClick: () => !readonly ? onOptionSelected(option, index) : undefined,
+      className: "".concat(itemClass, " ").concat(selectedIndex === index ? 'select-value--selected' : '', " "),
+      style: (selectStyles || {}).optionContainer
+    }, renderOption(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));
+}

package/components/Select/styles.scss

@@ -0,0 +1,307 @@
+@use 'sass:math';
+
+@import '../../style-dictionary-dist/terraware.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+.select {
+  display: flex;
+  flex-flow: row wrap;
+
+  .textfield-container {
+    position: relative;
+    width: 228px;
+
+    &--fullWidth {
+      width: 100%;
+    }
+  }
+
+  .textfield-label {
+    font-family: $tw-fnt-frm-fld-label-font-family;
+    font-size: $tw-fnt-frm-fld-label-font-size;
+    font-weight: $tw-fnt-frm-fld-label-font-weight;
+    line-height: $tw-fnt-frm-fld-label-line-height;
+    color: $tw-clr-txt-secondary;
+    margin-bottom: $tw-spc-base-xx-small;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .textfield-help-text {
+    font-family: $tw-fnt-frm-fld-help-text-font-family;
+    font-size: $tw-fnt-frm-fld-help-text-font-size;
+    font-weight: $tw-fnt-frm-fld-help-text-font-weight;
+    line-height: $tw-fnt-frm-fld-help-text-line-height;
+    color: $tw-clr-txt-secondary;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    margin-top: $tw-spc-base-xx-small;
+  }
+
+  .textfield-value {
+    background-color: $tw-clr-bg;
+    border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
+    padding: #{$tw-spc-base-x-small - $tw-sz-frm-fld-text-input-stroke};
+    border-radius: $tw-sz-base-x-small;
+    border-width: $tw-sz-frm-fld-text-input-stroke;
+    display: flex;
+
+    &:hover {
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-hover;
+    }
+
+    &:active {
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-active;
+      outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-active;
+    }
+
+    &:focus-within {
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-active;
+      outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-active;
+      outline-offset: -$tw-sz-frm-fld-text-input-stroke;
+    }
+
+    input {
+      border: none;
+      width: 100%;
+      font-family: $tw-fnt-frm-fld-text-value-font-family;
+      font-size: $tw-fnt-frm-fld-text-value-font-size;
+      font-weight: $tw-fnt-frm-fld-text-value-font-weight;
+      line-height: $tw-fnt-frm-fld-text-value-line-height;
+      color: $tw-clr-txt;
+      cursor: pointer;
+      background: transparent;
+      padding-top: 0;
+      padding-bottom: 0;
+
+      &::placeholder {
+        font-family: $tw-fnt-frm-fld-text-placeholder-font-family;
+        font-size: $tw-fnt-frm-fld-text-placeholder-font-size;
+        font-weight: $tw-fnt-frm-fld-text-placeholder-font-weight;
+        line-height: $tw-fnt-frm-fld-text-placeholder-line-height;
+        color: $tw-clr-txt-tertiary;
+      }
+
+      &:focus-visible {
+        outline: none;
+      }
+    }
+
+    &--display {
+      font-family: $tw-fnt-frm-fld-text-value-font-family;
+      font-size: $tw-fnt-frm-fld-text-value-font-size;
+      font-weight: $tw-fnt-frm-fld-text-value-font-weight;
+      line-height: $tw-fnt-frm-fld-text-value-line-height;
+      padding: $tw-spc-base-x-small 0;
+      margin: 0;
+    }
+
+    &--disabled {
+      opacity: $tw-opcty-semantic-off;
+      pointer-events: none;
+
+      &:hover {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
+      }
+
+      &:active {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
+        outline: 0;
+      }
+
+      &:focus-within {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
+        outline: 0;
+      }
+    }
+
+    &--icon-right {
+      width: $tw-fnt-frm-fld-text-value-line-height;
+      height: $tw-fnt-frm-fld-text-value-line-height;
+      fill: $tw-clr-icn;
+      margin-left: $tw-spc-base-x-small;
+      flex-shrink: 0;
+    }
+
+    &--icon-left {
+      width: $tw-fnt-frm-fld-text-value-line-height;
+      height: $tw-fnt-frm-fld-text-value-line-height;
+      fill: $tw-clr-icn-secondary;
+      margin-right: $tw-spc-base-x-small;
+    }
+
+    &--error {
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger;
+      background-color: $tw-clr-bg-danger-tertiary;
+
+      &:hover {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger-hover;
+      }
+
+      &:active {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger-active;
+        outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-danger-active;
+      }
+
+      &:focus-within {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-danger-active;
+        outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-danger-active;
+        outline-offset: -$tw-sz-frm-fld-text-input-stroke;
+      }
+    }
+
+    &--warning {
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning;
+      background-color: $tw-clr-bg-warning-tertiary;
+
+      &:hover {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning-hover;
+      }
+
+      &:active {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning-active;
+        outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-warning-active;
+      }
+
+      &:focus-within {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-warning-active;
+        outline: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-warning-active;
+        outline-offset: -$tw-sz-frm-fld-text-input-stroke;
+      }
+    }
+
+    &--readonly {
+      background-color: $tw-clr-bg-secondary;
+
+      &:hover {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
+      }
+
+      &:active {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
+        outline: 0;
+      }
+
+      &:focus-within {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-brdr-secondary;
+        outline: 0;
+      }
+    }
+
+    &--readonly input {
+      cursor: auto;
+    }
+  }
+
+  .textfield-label-container {
+    position: relative;
+    display: flex;
+    width: 100%;
+    margin-top: $tw-spc-base-xx-small;
+  }
+
+  .textfield-error-text {
+    font-family: $tw-fnt-frm-fld-error-text-font-family;
+    font-size: $tw-fnt-frm-fld-error-text-font-size;
+    font-weight: $tw-fnt-frm-fld-error-text-font-weight;
+    line-height: $tw-fnt-frm-fld-error-text-line-height;
+    color: $tw-clr-txt-danger;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+
+    &--icon {
+      fill: $tw-clr-icn-danger;
+      width: $tw-fnt-frm-fld-error-text-line-height;
+      height: $tw-fnt-frm-fld-error-text-line-height;
+      margin-right: $tw-spc-base-x-small;
+    }
+  }
+
+  .textfield-warning-text {
+    font-family: $tw-fnt-frm-fld-warning-text-font-family;
+    font-size: $tw-fnt-frm-fld-warning-text-font-size;
+    font-weight: $tw-fnt-frm-fld-warning-text-font-weight;
+    line-height: $tw-fnt-frm-fld-warning-text-line-height;
+    color: $tw-clr-txt-warning;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+
+    &--icon {
+      fill: $tw-clr-icn-warning;
+      width: $tw-fnt-frm-fld-error-text-line-height;
+      height: $tw-fnt-frm-fld-error-text-line-height;
+      margin-right: $tw-spc-base-x-small;
+    }
+  }
+
+  .options-container {
+    z-index: 3;
+    width: calc(100% - 2px);
+    position: absolute;
+    top: 44px;
+    list-style-type: none;
+    padding: $tw-spc-base-x-small 0;
+    background: $tw-clr-bg;
+    border: 1px solid $tw-clr-brdr-secondary;
+    margin: $tw-spc-base-xx-small 0 0;
+    border-radius: $tw-sz-base-x-small;
+    max-height: 300px;
+    overflow-y: auto;
+
+    &.fixed-menu {
+      visibility: 'hidden';
+
+      &.positioned {
+        visibility: 'visible';
+        position: fixed;
+        z-index: 11;
+      }
+    }
+
+    .select-value {
+      font-family: $tw-fnt-frm-fld-select-value-font-family;
+      font-size: $tw-fnt-frm-fld-select-value-font-size;
+      font-weight: $tw-fnt-frm-fld-select-value-font-weight;
+      line-height: $tw-fnt-frm-fld-select-value-line-height;
+      padding: $tw-spc-base-x-small $tw-spc-base-small;
+      cursor: pointer;
+
+      &:hover {
+        background-color: $tw-clr-bg-selected-ghost-hover;
+        color: $tw-clr-txt;
+      }
+
+      &:active {
+        background-color: $tw-clr-bg-selected-ghost-active;
+        color: $tw-clr-txt;
+      }
+
+      &--selected,
+      &--selected:hover {
+        background-color: $tw-clr-bg-selected;
+        color: $tw-clr-txt-on-selected;
+      }
+
+      &--disabled {
+        opacity: $tw-opcty-semantic-off;
+      }
+    }
+  }
+
+  .scroll-block {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+  }
+}

package/components/Separator/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _theme = _interopRequireDefault(require("../../theme"));
+const Separator = props => {
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: {
+      margin: _theme.default.spacing(0, 2),
+      width: '1px',
+      height: props.height || '32px',
+      backgroundColor: props.color || _theme.default.palette.TwClrBrdrTertiary
+    }
+  });
+};
+var _default = exports.default = Separator;

package/components/Size.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/Slider/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Slider;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+function Slider(props) {
+  const {
+    defaultValue,
+    value,
+    marks,
+    min,
+    max,
+    onChange,
+    step,
+    valueLabelDisplay
+  } = props;
+  const theme = (0, _material.useTheme)();
+  const sliderStyles = {
+    '.MuiSlider-rail': {
+      backgroundColor: theme.palette.TwClrBgBrandTertiary,
+      height: theme.spacing(0.5)
+    },
+    '.MuiSlider-track': {
+      display: 'none'
+    },
+    '.MuiSlider-mark': {
+      backgroundColor: theme.palette.TwClrBgBrand,
+      height: '8px',
+      width: '8px',
+      borderRadius: '4px'
+    },
+    '.MuiSlider-thumb': {
+      backgroundColor: theme.palette.TwClrBgBrand,
+      height: '16px',
+      width: '16px',
+      borderRadius: '8px'
+    }
+  };
+  const handleChange = (event, val) => {
+    if (!Array.isArray(val)) {
+      onChange(val);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_material.Slider, {
+    "aria-label": "Slider",
+    defaultValue: defaultValue,
+    value: value,
+    marks: marks,
+    min: min,
+    max: max,
+    onChangeCommitted: handleChange,
+    step: step !== null && step !== void 0 ? step : null,
+    valueLabelDisplay: valueLabelDisplay,
+    sx: sliderStyles
+  });
+}