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

package/components/DatePicker/DatePicker.js

@@ -0,0 +1,150 @@
+"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 = DatePicker;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _xDatePickers = require("@mui/x-date-pickers");
+var _AdapterLuxon = require("@mui/x-date-pickers/AdapterLuxon");
+var _luxon = require("luxon");
+var _date = require("../../utils/date");
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+require("./styles.scss");
+/**
+ * TODO: remove support for JS Date in DatePickerDateType once
+ * clients have moved to only using DateTime objects in input props
+ * and callback arguments.
+ * export type DatePickerDateType = Exclude<DateType, Date> | null;
+ */
+
+const initializeDate = (value, timeZoneId) => {
+  if (!value) {
+    return null;
+  }
+  const date = (0, _date.getDate)(value, timeZoneId);
+  return date !== null && date !== void 0 && date.isValid ? date : null;
+};
+function DatePicker(props) {
+  var _props$locale;
+  const [temporalValue, setTemporalValue] = (0, _react.useState)(initializeDate(props.value, props.defaultTimeZone));
+  const [minDateTime, setMinDateTime] = (0, _react.useState)(initializeDate(props.minDate, props.defaultTimeZone));
+  const [maxDateTime, setMaxDateTime] = (0, _react.useState)(initializeDate(props.maxDate, props.defaultTimeZone));
+  const locale = (_props$locale = props.locale) !== null && _props$locale !== void 0 ? _props$locale : 'en';
+  _luxon.Settings.defaultZone = (0, _date.tz)(props.defaultTimeZone);
+  _react.default.useEffect(() => {
+    setTemporalValue(prev => {
+      if (props.value !== prev && props.value) {
+        return initializeDate(props.value, props.defaultTimeZone);
+      } else {
+        return prev;
+      }
+    });
+  }, [props.defaultTimeZone, props.value]);
+  _react.default.useEffect(() => {
+    setMinDateTime(initializeDate(props.minDate, props.defaultTimeZone));
+  }, [props.defaultTimeZone, props.minDate]);
+  _react.default.useEffect(() => {
+    setMaxDateTime(initializeDate(props.maxDate, props.defaultTimeZone));
+  }, [props.defaultTimeZone, props.maxDate]);
+
+  // TODO: Localize the yyyy-mm-dd placeholder string that is shown to users when the input is
+  //       empty. It appears to be generated programmatically deep in the guts of the MUI DatePicker
+  //       code, and it most likely uses the browser's locale.
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: "date-picker ".concat(props.className, " ").concat(props.errorText ? 'date-picker--error' : ''),
+    sx: props.sx
+  }, /*#__PURE__*/_react.default.createElement(_xDatePickers.LocalizationProvider, {
+    dateAdapter: _AdapterLuxon.AdapterLuxon,
+    adapterLocale: locale
+  }, props.label && /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: props.id,
+    className: "textfield-label"
+  }, props.label), props.showTime ? /*#__PURE__*/_react.default.createElement(_xDatePickers.DesktopDateTimePicker, {
+    disabled: props.disabled,
+    minDate: minDateTime && minDateTime.isValid ? minDateTime : undefined,
+    maxDate: maxDateTime && maxDateTime.isValid ? maxDateTime : undefined,
+    onChange: newValue => {
+      setTemporalValue(newValue);
+      // TODO: remove onChange and make onDateChange required
+      if (props.onChange) {
+        props.onChange(newValue && newValue.isValid ? newValue.toJSDate() : null);
+      }
+      if (props.onDateChange) {
+        props.onDateChange(newValue && newValue.isValid ? newValue : undefined);
+      }
+    },
+    onError: props.onError,
+    slotProps: {
+      textField: {
+        sx: {
+          '& fieldset': {
+            border: 'none'
+          },
+          '& .MuiFormHelperText-root': {
+            marginLeft: 0
+          }
+        },
+        helperText: props.errorText ? /*#__PURE__*/_react.default.createElement("div", {
+          className: "textfield-error-text-container"
+        }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          name: "error",
+          className: "textfield-error-text--icon"
+        }), /*#__PURE__*/_react.default.createElement("label", {
+          htmlFor: props.id,
+          className: "textfield-error-text"
+        }, props.errorText)) : props.helperText,
+        id: props.id,
+        placeholder: props.placeholder,
+        autoFocus: props.autoFocus,
+        onKeyPress: props.onKeyPress
+      }
+    },
+    value: temporalValue
+  }) : /*#__PURE__*/_react.default.createElement(_xDatePickers.DesktopDatePicker, {
+    disabled: props.disabled,
+    format: "yyyy-MM-dd",
+    minDate: minDateTime && minDateTime.isValid ? minDateTime : undefined,
+    maxDate: maxDateTime && maxDateTime.isValid ? maxDateTime : undefined,
+    onChange: newValue => {
+      setTemporalValue(newValue);
+      // TODO: remove onChange and make onDateChange required
+      if (props.onChange) {
+        props.onChange(newValue && newValue.isValid ? newValue.toJSDate() : null);
+      }
+      if (props.onDateChange) {
+        props.onDateChange(newValue && newValue.isValid ? newValue : undefined);
+      }
+    },
+    onError: props.onError,
+    slotProps: {
+      textField: {
+        sx: {
+          '& fieldset': {
+            border: 'none'
+          },
+          '& .MuiFormHelperText-root': {
+            marginLeft: 0
+          }
+        },
+        helperText: props.errorText ? /*#__PURE__*/_react.default.createElement("div", {
+          className: "textfield-error-text-container"
+        }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          name: "error",
+          className: "textfield-error-text--icon"
+        }), /*#__PURE__*/_react.default.createElement("label", {
+          htmlFor: props.id,
+          className: "textfield-error-text"
+        }, props.errorText)) : props.helperText,
+        id: props.id,
+        placeholder: props.placeholder,
+        autoFocus: props.autoFocus,
+        onKeyPress: props.onKeyPress
+      }
+    },
+    value: temporalValue
+  })));
+}

package/components/DatePicker/styles.scss

@@ -0,0 +1,95 @@
+@import '../../style-dictionary-dist/terraware.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+.date-picker {
+  display: flex;
+  flex-flow: column wrap;
+
+  .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-error-text-container {
+    display: flex;
+    margin-top: $tw-spc-base-x-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;
+      width: 100%;
+      max-width: 100%;
+
+      &--icon {
+        fill: $tw-clr-txt-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;
+      }
+    }
+  }
+
+  .MuiInputBase-root {
+    border: 1px solid $tw-clr-bg-info;
+    border-radius: $tw-sz-base-x-small;
+    position: unset;
+  }
+
+  .MuiInputBase-input {
+    height: 18px;
+  }
+
+  .MuiIconButton-root {
+    color: $tw-clr-icn-secondary;
+  }
+
+  input {
+    padding: calc(#{$tw-spc-base-xx-small} * 2.5) calc(#{$tw-spc-base-xx-small} * 3);
+    background-color: $tw-clr-base-white;
+    border-radius: $tw-sz-base-x-small 0 0 $tw-sz-base-x-small;
+  }
+
+  .MuiOutlinedInput-root {
+    border-color: $tw-clr-brdr-secondary;
+
+    &:hover {
+      border-color: $tw-clr-brdr-hover;
+    }
+    &.Mui-focused {
+      border-color: $tw-clr-brdr-hover;
+    }
+  }
+
+  &--error {
+    .MuiInputBase-root {
+      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;
+      }
+
+      &:active {
+        border: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-brdr-danger;
+      }
+    }
+
+    input {
+      background-color: $tw-clr-bg-danger-tertiary;
+    }
+  }
+}

package/components/DialogBox/DialogBox.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DialogBox;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _utils = require("../../utils");
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+require("./styles.scss");
+function DialogBox(props) {
+  const {
+    title,
+    size,
+    message,
+    children,
+    leftButton,
+    rightButtons,
+    middleButtons,
+    onClose,
+    open,
+    scrolled,
+    skrim,
+    style
+  } = props;
+  const hasFooter = leftButton || rightButtons || middleButtons;
+  const {
+    isMobile
+  } = (0, _utils.useDeviceInfo)();
+  return open ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "dialog-box-container".concat(skrim ? '--skrim' : '', " ").concat(open ? 'dialog-box--opened' : 'dialog-box--closed', " ").concat(isMobile ? 'mobile' : ''),
+    onClick: event => {
+      if (event.target instanceof HTMLElement && event.target.classList.contains('dialog-box--opened')) {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+      }
+    },
+    style: style
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "dialog-box dialog-box--".concat(size)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "dialog-box--header"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "close-icon-spacer"
+  }), /*#__PURE__*/_react.default.createElement("p", {
+    className: "title"
+  }, title), /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+    onClick: onClose,
+    size: "small"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "close",
+    className: "icon-close"
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: (hasFooter ? 'dialog-box--body' : 'dialog-box--body-no-footer') + (scrolled ? ' scrolled' : '')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "dialog-box--message"
+  }, message), /*#__PURE__*/_react.default.createElement("div", {
+    className: "dialog-box--boundary"
+  }, children)), hasFooter && /*#__PURE__*/_react.default.createElement("div", {
+    className: "dialog-box--footer"
+  }, leftButton && /*#__PURE__*/_react.default.createElement("div", {
+    className: "dialog-box--footer-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "left-button"
+  }, leftButton), /*#__PURE__*/_react.default.createElement("div", {
+    className: "right-buttons"
+  }, rightButtons === null || rightButtons === void 0 ? void 0 : rightButtons.map((rb, index) => {
+    const rbWithKey = {
+      ...rb,
+      key: "rb-".concat(index),
+      props: {
+        ...rb.props,
+        size: rb.props.size || 'medium'
+      }
+    };
+    return rbWithKey;
+  }))), middleButtons && /*#__PURE__*/_react.default.createElement("div", {
+    className: "dialog-box--actions-container"
+  }, middleButtons === null || middleButtons === void 0 ? void 0 : middleButtons.map((mb, index) => {
+    const mbWithKey = {
+      ...mb,
+      key: "mb-".concat(index),
+      props: {
+        ...mb.props,
+        size: mb.props.size || 'medium'
+      }
+    };
+    return mbWithKey;
+  }))))) : null;
+}

package/components/DialogBox/styles.scss

@@ -0,0 +1,165 @@
+@import '../../style-dictionary-dist/terraware.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+.dialog-box-container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  z-index: 1300;
+  inset: 0px;
+
+  &--skrim {
+    background-color: rgba($tw-clr-base-gray-025, $tw-opcty-base-060);
+    background-image: linear-gradient(
+      180deg,
+      rgba($tw-clr-base-green-050, $tw-opcty-base-000),
+      rgba($tw-clr-base-green-050, 0.24)
+    );
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    z-index: 1300;
+    inset: 0px;
+  }
+
+  &.mobile {
+    margin: 0 $tw-spc-base-small;
+    .dialog-box {
+      &--footer {
+        button {
+          margin: 0 0 $tw-spc-base-x-small 0;
+        }
+        &-container {
+          flex-direction: column;
+          .left-button,
+          .right-buttons {
+            display: flex;
+            flex-direction: column;
+          }
+        }
+      }
+      &--actions-container {
+        flex-direction: column-reverse;
+      }
+    }
+  }
+}
+
+.dialog-box {
+  box-shadow: $tw-elvtn-base-800;
+  border-radius: $tw-sz-base-small;
+  display: flex;
+  flex-direction: column;
+  background: $tw-clr-base-white;
+  max-height: calc(100vh - 128px); //64 from top and bottom
+  max-width: calc(100vw - 32px);
+  margin-top: auto;
+  margin-bottom: auto;
+
+  &--closed {
+    display: none;
+  }
+
+  &--small {
+    width: 320px;
+  }
+  &--medium {
+    width: 480px;
+  }
+  &--large {
+    width: 640px;
+  }
+  &--x-large {
+    width: 800px;
+  }
+  &--xx-large {
+    width: 1080px;
+  }
+
+  &--header {
+    border-bottom: 1px solid $tw-clr-brdr-tertiary;
+    padding: $tw-spc-base-small $tw-spc-base-medium;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: $tw-sz-base-small $tw-sz-base-small 0 0;
+    .title {
+      font-family: $tw-fnt-dlg-bx-title-font-family;
+      font-size: $tw-fnt-dlg-bx-title-font-size;
+      font-weight: $tw-fnt-dlg-bx-title-font-weight;
+      line-height: $tw-fnt-dlg-bx-title-line-height;
+      color: $tw-clr-txt;
+      text-align: center;
+      margin: 0;
+      width: 100%;
+    }
+
+    .icon-close {
+      fill: $tw-clr-icn-secondary;
+      height: $tw-sz-base-medium;
+      width: $tw-sz-base-medium;
+    }
+
+    .MuiButtonBase-root {
+      padding: $tw-spc-base-xx-small;
+    }
+
+    .close-icon-spacer {
+      height: calc(#{$tw-sz-base-medium} + 2 *#{$tw-spc-base-xx-small});
+      width: calc(#{$tw-sz-base-medium} + 2 *#{$tw-spc-base-xx-small});
+    }
+  }
+
+  &--body {
+    background: $tw-clr-base-white;
+    padding: $tw-spc-base-medium;
+    text-align: center;
+    &.scrolled {
+      overflow: auto;
+    }
+  }
+
+  &--body-no-footer {
+    padding: $tw-spc-base-medium;
+    &.scrolled {
+      overflow: auto;
+    }
+  }
+
+  &--message {
+    font-family: $tw-fnt-dlg-bx-message-font-family;
+    font-size: $tw-fnt-dlg-bx-message-font-size;
+    font-weight: $tw-fnt-dlg-bx-message-font-weight;
+    line-height: $tw-fnt-dlg-bx-message-line-height;
+    color: $tw-clr-txt;
+    width: 100%;
+    text-align: center;
+  }
+
+  &--footer {
+    border-radius: 0 0 $tw-sz-base-small $tw-sz-base-small;
+    background-color: $tw-clr-bg-secondary;
+    padding: $tw-spc-base-medium $tw-spc-base-medium;
+    button + button {
+      margin-left: $tw-spc-base-x-small;
+    }
+  }
+
+  &--footer-container {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &--actions-container {
+    display: flex;
+    justify-content: center;
+  }
+}

package/components/Divisor.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Divisor;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+function Divisor(_ref) {
+  let {
+    mt = 3
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    mt: mt
+  }), /*#__PURE__*/_react.default.createElement(_material.Divider, {
+    light: true
+  }), /*#__PURE__*/_react.default.createElement(_material.Box, {
+    mt: mt
+  }));
+}

package/components/Dropdown.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropdownV1 = DropdownV1;
+exports.default = Dropdown;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _Autocomplete = _interopRequireDefault(require("./Autocomplete/Autocomplete"));
+var _SelectT = _interopRequireDefault(require("./Select/SelectT"));
+function DropdownV1(_ref) {
+  let {
+    id,
+    label,
+    values,
+    onChange,
+    selected,
+    disabled
+  } = _ref;
+  const onChangeH = event => {
+    onChange(event.target.value);
+  };
+  return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
+    variant: "outlined",
+    size: "small",
+    disabled: disabled,
+    sx: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.InputLabel, {
+    id: "".concat(id, "-outlined-label")
+  }, label), /*#__PURE__*/_react.default.createElement(_material.Select, {
+    labelId: "".concat(id, "-outlined-label"),
+    id: id,
+    label: label,
+    onChange: onChangeH,
+    value: selected
+  }, values === null || values === void 0 ? void 0 : values.map(_ref2 => {
+    let {
+      label: inLabel,
+      value
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+      id: value,
+      key: value,
+      value: value
+    }, inLabel);
+  })));
+}
+/**
+ * This is a simple dropdown that takes in a tuple { label, value }
+ * for list of options.
+ * The label is used for display, the value is passed back in onChange, and used to set selectedValue.
+ *
+ * Example:
+ * <Dropdown
+ *   options=[{ label: 'label', value: 'value'}, { label: 'label1': value: 'value1'} ]
+ *   onChange={(value: string) => setSomeValue(value)}
+ *   selectedValue={'value1'}
+ * />
+ */
+function Dropdown(props) {
+  const {
+    selectedValue,
+    onChange,
+    options,
+    autocomplete,
+    ...remainingProps
+  } = props;
+  const selectedItem = options === null || options === void 0 ? void 0 : options.find(option => option.value === selectedValue);
+  const renderOption = option => {
+    const styles = {
+      fontWeight: option.fontWeight || 'normal',
+      fontStyle: option.fontStyle || 'normal'
+    };
+    return /*#__PURE__*/_react.default.createElement("span", {
+      style: styles
+    }, option.label);
+  };
+  if (autocomplete) {
+    return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, Object.assign({}, remainingProps, {
+      options: options !== null && options !== void 0 ? options : [],
+      selected: selectedItem || '',
+      isEqual: (A, B) => A.value === B.value,
+      onChange: option => onChange(option.value)
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement(_SelectT.default, Object.assign({}, remainingProps, {
+    options: options,
+    selectedValue: selectedItem,
+    isEqual: (A, B) => A.value === B.value,
+    renderOption: renderOption,
+    toT: str => ({
+      label: str,
+      value: str
+    }),
+    displayLabel: option => (option === null || option === void 0 ? void 0 : option.label) || '',
+    onChange: option => onChange(option.value)
+  }));
+}

package/components/ErrorBox/ErrorBox.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ErrorBox;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _useDeviceInfo = _interopRequireDefault(require("../../utils/useDeviceInfo"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+require("./styles.scss");
+function ErrorBox(props) {
+  const {
+    text,
+    onClick,
+    buttonText,
+    title,
+    className,
+    sx
+  } = props;
+  const {
+    isMobile
+  } = (0, _useDeviceInfo.default)();
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: "error-box ".concat(className, " ").concat(isMobile ? 'mobile' : ''),
+    sx: sx
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "error-box--container"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "error",
+    className: "error-icon",
+    size: "large"
+  }), /*#__PURE__*/_react.default.createElement("div", null, title && /*#__PURE__*/_react.default.createElement("h1", {
+    className: "error-title"
+  }, title), /*#__PURE__*/_react.default.createElement("p", {
+    className: "error-text"
+  }, text))), buttonText && onClick && /*#__PURE__*/_react.default.createElement("div", {
+    className: "button-container"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    label: buttonText,
+    priority: "secondary",
+    type: "passive",
+    onClick: onClick
+  })));
+}