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

package/components/PlacementWrapper/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+/**
+ * A component that allows simple management of the location of an object around some children
+ *
+ * Example:
+ * ```
+ * <PlacementWrapper objectPlacement={'right-end'} placedObject={<Button icon={'iconComment'} onClick={onClick} />}>
+ *   <Box>Stuff and Things</Box>
+ * </PlacementWrapper>
+ * ```
+ */
+const PlacementWrapper = _ref => {
+  let {
+    placedObject,
+    children,
+    objectPlacement
+  } = _ref;
+  const theme = (0, _material.useTheme)();
+  const outsideDirection = (0, _react.useMemo)(() => {
+    if (!objectPlacement) {
+      return 'column';
+    }
+    if (objectPlacement.startsWith('top')) {
+      return 'column';
+    } else if (objectPlacement.startsWith('bottom')) {
+      return 'column-reverse';
+    } else if (objectPlacement.startsWith('left')) {
+      return 'row';
+    } else {
+      return 'row-reverse';
+    }
+  }, [objectPlacement]);
+  const insideAlignment = (0, _react.useMemo)(() => {
+    if (!objectPlacement) {
+      return 'center';
+    }
+    if (objectPlacement.endsWith('start')) {
+      return 'flex-start';
+    } else if (objectPlacement.endsWith('end')) {
+      return 'flex-end';
+    } else {
+      return 'center';
+    }
+  }, [objectPlacement]);
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    display: 'flex',
+    flexDirection: outsideDirection,
+    flexGrow: 1,
+    marginBottom: theme.spacing(2)
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    alignSelf: insideAlignment,
+    margin: theme.spacing(1)
+  }, placedObject), children);
+};
+var _default = exports.default = PlacementWrapper;

package/components/PopoverMenu/Popover.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PopoverDropdown;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+function PopoverDropdown(props) {
+  const {
+    sections,
+    handleClick,
+    anchorElement,
+    setAnchorElement,
+    itemRenderer,
+    menuAlign,
+    selectedValue,
+    onClose,
+    container
+  } = props;
+  const theme = (0, _material.useTheme)();
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+    setAnchorElement(null);
+  };
+  const onClick = item => {
+    if (item.onClick) {
+      item.onClick();
+    }
+    handleClick(item);
+  };
+  const itemStyles = type => ({
+    color: type === 'destructive' ? theme.palette.TwClrTxtDanger : theme.palette.TwClrTxt,
+    '& .MuiMenuItem-root:hover': {
+      backgroundColor: theme.palette.TwClrBgSelectedGhostHover
+    },
+    '&.MuiMenuItem-root:active': {
+      backgroundColor: theme.palette.TwClrBgSelectedGhostActive
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(_material.Popover, {
+    id: "simple-popover",
+    container: container,
+    open: Boolean(anchorElement),
+    anchorEl: anchorElement,
+    onClose: handleClose,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: menuAlign !== null && menuAlign !== void 0 ? menuAlign : 'left'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: menuAlign !== null && menuAlign !== void 0 ? menuAlign : 'left'
+    },
+    sx: {
+      '& .MuiPaper-root': {
+        borderRadius: '8px',
+        boxShadow: 'none',
+        border: "1px solid ".concat(theme.palette.TwClrBrdrSecondary),
+        paddingY: '8px',
+        marginTop: '4px'
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.MenuList, {
+    sx: {
+      padding: 0
+    }
+  }, sections === null || sections === void 0 ? void 0 : sections.map((section, index) => {
+    let elements = [];
+    if (index > 0) {
+      elements.push( /*#__PURE__*/_react.default.createElement(_material.Divider, null));
+    }
+    elements = [...elements, ...section.map((item, itemIndex) => {
+      return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+        onClick: () => onClick(item),
+        key: "option-".concat(itemIndex),
+        sx: itemStyles(item.type),
+        disableRipple: true,
+        disabled: item.disabled,
+        selected: item.value === selectedValue
+      }, itemRenderer ? itemRenderer(item) : item.label);
+    })];
+    return elements;
+  })));
+}

package/components/PopoverMenu/index.js

@@ -0,0 +1,59 @@
+"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 = PopoverMenu;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+var _Popover = _interopRequireDefault(require("./Popover"));
+function PopoverMenu(_ref) {
+  let {
+    anchor,
+    container,
+    menuSections,
+    onClick,
+    showChevron = true,
+    selectedValue
+  } = _ref;
+  const theme = (0, _material.useTheme)();
+  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const handleClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const onItemClick = selectedItem => {
+    if (onClick) {
+      onClick(selectedItem);
+    }
+    handleClose();
+  };
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+    onClick: handleClick,
+    size: "small",
+    sx: {
+      height: '48px',
+      borderRadius: '16px',
+      padding: theme.spacing(1.5, 2)
+    }
+  }, anchor, showChevron && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "chevronDown",
+    size: "medium",
+    style: {
+      marginLeft: '8px',
+      fill: theme.palette.TwClrIcn
+    }
+  })), /*#__PURE__*/_react.default.createElement(_Popover.default, {
+    sections: menuSections,
+    handleClick: onItemClick,
+    anchorElement: anchorEl,
+    setAnchorElement: setAnchorEl,
+    selectedValue: selectedValue,
+    container: container
+  }));
+}

package/components/PopoverMultiSelect/index.js

@@ -0,0 +1,62 @@
+"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 = PopoverMultiSelect;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+var _Popover = _interopRequireDefault(require("../PopoverMenu/Popover"));
+require("./styles.scss");
+function PopoverMultiSelect(props) {
+  const {
+    anchorElement,
+    initialSelection,
+    menuAlign,
+    onChange,
+    sections,
+    setAnchorElement
+  } = props;
+  const [selection, setSelection] = (0, _react.useState)(initialSelection);
+  const addToSelection = value => {
+    const newSelection = [...selection];
+    newSelection.push(value);
+    setSelection(newSelection);
+    onChange(newSelection);
+  };
+  const removeFromSelection = index => {
+    const newSelection = [...selection];
+    newSelection.splice(index, 1);
+    setSelection(newSelection);
+    onChange(newSelection);
+  };
+  const iconSpacer = () => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "popover-multi-select__checkmark-spacer"
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_Popover.default, {
+    sections: sections,
+    handleClick: item => {
+      const itemIndex = selection.findIndex(s => s === item.value);
+      if (itemIndex >= 0) {
+        removeFromSelection(itemIndex);
+      } else {
+        addToSelection(item.value);
+      }
+    },
+    anchorElement: anchorElement,
+    setAnchorElement: setAnchorElement,
+    itemRenderer: item => {
+      const selected = selection.find(s => s === item.value);
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, selected ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        name: "checkmark",
+        className: "popover-multi-select__checkmark-selection"
+      }) : iconSpacer(), /*#__PURE__*/_react.default.createElement(_material.ListItemText, null, item.label));
+    },
+    menuAlign: menuAlign
+  });
+}

package/components/PopoverMultiSelect/styles.scss

@@ -0,0 +1,10 @@
+@import '../../style-dictionary-dist/terraware';
+
+.popover-multi-select__checkmark-selection {
+  margin-right: $tw-spc-base-x-small;
+}
+
+.popover-multi-select__checkmark-spacer {
+  width: calc($tw-spc-base-x-small + $tw-sz-icon-small);
+  height: $tw-sz-icon-small;
+}

package/components/ProgressCircle/ProgressCircle.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ProgressCircle;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+require("./styles.scss");
+function ProgressCircle(props) {
+  const {
+    size = 'small',
+    determinate,
+    value,
+    renderPercentText,
+    hideValue
+  } = props;
+  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--".concat(size)
+  }, renderPercentText(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,87 @@
+@import '../../style-dictionary-dist/terraware.scss';
+
+.circle-container {
+  position: relative;
+  display: inline-flex;
+
+  & .MuiCircularProgress-root {
+    color: $tw-clr-bg-brand;
+  }
+}
+
+.circle-fill {
+  position: absolute;
+  left: 0;
+}
+
+.circle-track {
+  color: $tw-clr-bg-brand-tertiary !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-txt;
+  }
+  &--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-txt;
+  }
+  &--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-txt;
+  }
+}

package/components/RadioButton.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = RadioButton;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+function RadioButton(props) {
+  var _props$value;
+  const onChange = (event, checked) => {
+    props.onChange(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.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Select;
+var _react = _interopRequireDefault(require("react"));
+var _SelectT = _interopRequireDefault(require("./SelectT"));
+require("./styles.scss");
+function Select(props) {
+  const toString = option => option;
+  return /*#__PURE__*/_react.default.createElement(_SelectT.default, Object.assign({}, props, {
+    isEqual: (A, B) => A === B,
+    renderOption: toString,
+    toT: toString,
+    displayLabel: option => option || ''
+  }));
+}