@terraware/web-components 5.0.26 → 5.0.27-rc.0

package/components/Select/SelectT.js

@@ -1,256 +1,241 @@
-import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
-import { Box } from '@mui/material';
-import classNames from 'classnames';
-import 'lodash';
-import 'luxon';
-import isWhitespaces from '../../utils/text.js';
-import 'react-responsive';
-import Icon from '../Icon/Icon.js';
-import IconTooltip from '../IconTooltip/index.js';
-import './styles.scss';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box } from "@mui/material";
+import classnames from "classnames";
+import { isWhitespaces } from "../../utils/index.js";
+import Icon from "../Icon/Icon.js";
+import IconTooltip from "../IconTooltip/index.js";
+import "./styles.scss";
 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 = classNames({
-    'textfield-value': true,
-    'textfield-value--disabled': disabled,
-    'textfield-value--error': !!errorText,
-    'textfield-value--warning': !!warningText,
-    'textfield-value--readonly': readonly
-  });
-  const itemClass = classNames({
-    'select-value': true,
-    'select-value--disabled': disabled
-  });
-  const [openedOptions, setOpenedOptions] = useState(false);
-  const [fixedMenuPositioned, setFixedMenuPositioned] = useState(false);
-  const [selectedIndex, setSelectedIndex] = useState(-1);
-  const inputRef = useRef(null);
-  const textFieldRef = useRef(null);
-  const dropdownRef = useRef(null);
-  const hasOptions = useMemo(() => options !== undefined && options.length > 0, [options]);
-  const repositionMenu = useCallback(checkHeight => {
-    if (openedOptions && hasOptions) {
-      scrollToSelectedElement();
-      if (fixedMenu && inputRef.current && dropdownRef.current) {
-        dropdownRef.current.style.width = `${inputRef.current.offsetWidth}px`;
-        const bbox = inputRef.current.getBoundingClientRect();
-        dropdownRef.current.style.top = `${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 = `${dropdownRef.current.clientHeight - (dropdownBottom - windowHeightThreshold)}px`;
-        }
-        setFixedMenuPositioned(true);
-      }
-    } else if (fixedMenu) {
-      setFixedMenuPositioned(false);
-    }
-  }, [fixedMenu, openedOptions, hasOptions]);
-  useEffect(() => {
-    repositionMenu(true);
-  }, [repositionMenu]);
-  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 = useCallback(() => {
-    repositionMenu(false);
-  }, [repositionMenu]);
-  const handleClick = 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 = useCallback(() => {
-    setOpenedOptions(false);
-  }, []);
-  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);
+    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 = classnames({
+        'textfield-value': true,
+        'textfield-value--disabled': disabled,
+        'textfield-value--error': !!errorText,
+        'textfield-value--warning': !!warningText,
+        'textfield-value--readonly': readonly
+    });
+    const itemClass = classnames({
+        'select-value': true,
+        'select-value--disabled': disabled
+    });
+    const [openedOptions, setOpenedOptions] = useState(false);
+    const [fixedMenuPositioned, setFixedMenuPositioned] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(-1);
+    const inputRef = useRef(null);
+    const textFieldRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const hasOptions = useMemo(()=>void 0 !== options && options.length > 0, [
+        options
+    ]);
+    const repositionMenu = useCallback((checkHeight)=>{
+        if (openedOptions && hasOptions) {
+            scrollToSelectedElement();
+            if (fixedMenu && inputRef.current && dropdownRef.current) {
+                dropdownRef.current.style.width = `${inputRef.current.offsetWidth}px`;
+                const bbox = inputRef.current.getBoundingClientRect();
+                dropdownRef.current.style.top = `${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 = `${dropdownRef.current.clientHeight - (dropdownBottom - windowHeightThreshold)}px`;
+                setFixedMenuPositioned(true);
+            }
+        } else if (fixedMenu) setFixedMenuPositioned(false);
+    }, [
+        fixedMenu,
+        openedOptions,
+        hasOptions
+    ]);
+    useEffect(()=>{
+        repositionMenu(true);
+    }, [
+        repositionMenu
+    ]);
+    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 = useCallback(()=>{
+        repositionMenu(false);
+    }, [
+        repositionMenu
+    ]);
+    const handleClick = useCallback((event)=>{
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) setOpenedOptions(false);
+    }, []);
+    const handleResize = useCallback(()=>{
+        setOpenedOptions(false);
+    }, []);
+    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 = ()=>{
+        if (!openedOptions) textFieldRef.current?.focus();
+        setOpenedOptions((isOpen)=>!isOpen);
+    };
+    const onOptionSelected = (option, index)=>{
+        if (onChange) onChange(option);
+        setOpenedOptions(false);
+        setSelectedIndex(index);
     };
-  }, [handleClick, handleResize, handleScroll]);
-  const toggleOptions = () => {
-    if (!openedOptions) {
-      textFieldRef.current?.focus();
-    }
-    setOpenedOptions(isOpen => !isOpen);
-  };
-  const onOptionSelected = (option, index) => {
-    if (onChange) {
-      onChange(option);
-    }
-    setOpenedOptions(false);
-    setSelectedIndex(index);
-  };
-  const onChangeHandler = e => {
-    const textValue = e.target.value;
-    if (isWhitespaces(textValue)) {
-      return;
-    }
-    if (onChange) {
-      onChange(toT(textValue));
-    }
-    setOpenedOptions(true);
-  };
-  const onKeyDownHandler = e => {
-    if (e.key === 'Tab') {
-      toggleOptions();
-    } else {
-      const pressedLetter = e.key.toUpperCase();
-      const items = dropdownRef.current?.getElementsByTagName('li');
-      if (items) {
-        const arrayOfItems = Array.from(items);
-        for (const item of arrayOfItems) {
-          if (item.dataset.key === pressedLetter) {
-            if (dropdownRef.current) {
-              dropdownRef.current.scrollTop = item.offsetTop;
+    const onChangeHandler = (e)=>{
+        const textValue = e.target.value;
+        if (isWhitespaces(textValue)) return;
+        if (onChange) onChange(toT(textValue));
+        setOpenedOptions(true);
+    };
+    const onKeyDownHandler = (e)=>{
+        if ('Tab' === e.key) toggleOptions();
+        else {
+            const pressedLetter = e.key.toUpperCase();
+            const items = dropdownRef.current?.getElementsByTagName('li');
+            if (items) {
+                const arrayOfItems = Array.from(items);
+                for (const item of arrayOfItems)if (item.dataset.key === pressedLetter) {
+                    if (dropdownRef.current) dropdownRef.current.scrollTop = item.offsetTop;
+                    return;
+                }
             }
-            return;
-          }
         }
-      }
-    }
-  };
-  const scrollToSelectedElement = () => {
-    const items = dropdownRef.current?.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;
-          }
+    };
+    const scrollToSelectedElement = ()=>{
+        const items = dropdownRef.current?.getElementsByTagName('li');
+        if (items) {
+            const arrayOfItems = Array.from(items);
+            for (const item of arrayOfItems)if ('true' === item.dataset.selected) {
+                if (dropdownRef.current) {
+                    const topPos = item.offsetTop;
+                    dropdownRef.current.scrollTop = topPos;
+                    return;
+                }
+            }
         }
-      }
-    }
-  };
-  return /*#__PURE__*/jsxs(Box, {
-    className: `select ${className}`,
-    sx: sx,
-    children: [label && /*#__PURE__*/jsxs("label", {
-      htmlFor: id,
-      className: "textfield-label",
-      children: [label, " ", required ? '*' : '', " ", tooltipTitle && /*#__PURE__*/jsx(IconTooltip, {
-        title: tooltipTitle
-      })]
-    }), /*#__PURE__*/jsxs("div", {
-      className: `textfield-container ${fullWidth ? 'textfield-container--fullWidth' : ''}`,
-      children: [/*#__PURE__*/jsxs("div", {
-        id: id,
-        className: selectClass,
-        onClick: toggleOptions,
-        ref: inputRef,
-        style: (selectStyles || {}).inputContainer,
-        children: [/*#__PURE__*/jsx("input", {
-          ref: textFieldRef,
-          value: displayLabel(selectedValue),
-          readOnly: !editable || readonly,
-          placeholder: placeholder,
-          onChange: onChangeHandler,
-          onKeyDown: onKeyDownHandler,
-          onBlur: onBlur,
-          onFocus: onFocus,
-          required: required,
-          style: (selectStyles || {}).input
-        }), !hideArrow && /*#__PURE__*/jsx(Icon, {
-          name: 'chevronDown',
-          className: "textfield-value--icon-right",
-          style: (selectStyles || {}).arrow
-        })]
-      }), options && options.length > 0 && openedOptions && /*#__PURE__*/jsxs(Fragment, {
-        children: [fixedMenu && /*#__PURE__*/jsx("div", {
-          className: "scroll-block"
-        }), /*#__PURE__*/jsx("ul", {
-          className: 'options-container' + (fixedMenu ? ' fixed-menu' : '') + (fixedMenuPositioned ? ' positioned' : ''),
-          ref: dropdownRef,
-          style: (selectStyles || {}).optionsContainer,
-          children: options.map((option, index) => {
-            return /*#__PURE__*/jsx("li", {
-              "data-key": displayLabel(option).charAt(0).toUpperCase(),
-              "data-selected": selectedIndex === index,
-              onClick: () => !readonly ? onOptionSelected(option, index) : undefined,
-              className: `${itemClass} ${selectedIndex === index ? 'select-value--selected' : ''} `,
-              style: (selectStyles || {}).optionContainer,
-              children: renderOption(option)
-            }, index);
-          })
-        })]
-      })]
-    }), errorText && /*#__PURE__*/jsxs("div", {
-      className: "textfield-label-container",
-      children: [/*#__PURE__*/jsx(Icon, {
-        name: "error",
-        className: "textfield-error-text--icon"
-      }), /*#__PURE__*/jsx("label", {
-        htmlFor: id,
-        className: "textfield-error-text",
-        children: errorText
-      })]
-    }), warningText && /*#__PURE__*/jsxs("div", {
-      className: "textfield-label-container",
-      children: [/*#__PURE__*/jsx(Icon, {
-        name: "warning",
-        className: "textfield-warning-text--icon"
-      }), /*#__PURE__*/jsx("label", {
-        htmlFor: id,
-        className: "textfield-warning-text",
-        children: warningText
-      })]
-    }), helperText && /*#__PURE__*/jsx("label", {
-      htmlFor: id,
-      className: "textfield-help-text",
-      children: helperText
-    })]
-  });
+    };
+    return /*#__PURE__*/ jsxs(Box, {
+        className: `select ${className}`,
+        sx: sx,
+        children: [
+            label && /*#__PURE__*/ jsxs("label", {
+                htmlFor: id,
+                className: "textfield-label",
+                children: [
+                    label,
+                    " ",
+                    required ? '*' : '',
+                    " ",
+                    tooltipTitle && /*#__PURE__*/ jsx(IconTooltip, {
+                        title: tooltipTitle
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: `textfield-container ${fullWidth ? 'textfield-container--fullWidth' : ''}`,
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        id: id,
+                        className: selectClass,
+                        onClick: toggleOptions,
+                        ref: inputRef,
+                        style: (selectStyles || {}).inputContainer,
+                        children: [
+                            /*#__PURE__*/ jsx("input", {
+                                ref: textFieldRef,
+                                value: displayLabel(selectedValue),
+                                readOnly: !editable || readonly,
+                                placeholder: placeholder,
+                                onChange: onChangeHandler,
+                                onKeyDown: onKeyDownHandler,
+                                onBlur: onBlur,
+                                onFocus: onFocus,
+                                required: required,
+                                style: (selectStyles || {}).input
+                            }),
+                            !hideArrow && /*#__PURE__*/ jsx(Icon, {
+                                name: 'chevronDown',
+                                className: "textfield-value--icon-right",
+                                style: (selectStyles || {}).arrow
+                            })
+                        ]
+                    }),
+                    options && options.length > 0 && openedOptions && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            fixedMenu && /*#__PURE__*/ jsx("div", {
+                                className: "scroll-block"
+                            }),
+                            /*#__PURE__*/ jsx("ul", {
+                                className: 'options-container' + (fixedMenu ? ' fixed-menu' : '') + (fixedMenuPositioned ? ' positioned' : ''),
+                                ref: dropdownRef,
+                                style: (selectStyles || {}).optionsContainer,
+                                children: options.map((option, index)=>/*#__PURE__*/ jsx("li", {
+                                        "data-key": displayLabel(option).charAt(0).toUpperCase(),
+                                        "data-selected": selectedIndex === index,
+                                        onClick: ()=>readonly ? void 0 : onOptionSelected(option, index),
+                                        className: `${itemClass} ${selectedIndex === index ? 'select-value--selected' : ''} `,
+                                        style: (selectStyles || {}).optionContainer,
+                                        children: renderOption(option)
+                                    }, index))
+                            })
+                        ]
+                    })
+                ]
+            }),
+            errorText && /*#__PURE__*/ jsxs("div", {
+                className: "textfield-label-container",
+                children: [
+                    /*#__PURE__*/ jsx(Icon, {
+                        name: "error",
+                        className: "textfield-error-text--icon"
+                    }),
+                    /*#__PURE__*/ jsx("label", {
+                        htmlFor: id,
+                        className: "textfield-error-text",
+                        children: errorText
+                    })
+                ]
+            }),
+            warningText && /*#__PURE__*/ jsxs("div", {
+                className: "textfield-label-container",
+                children: [
+                    /*#__PURE__*/ jsx(Icon, {
+                        name: "warning",
+                        className: "textfield-warning-text--icon"
+                    }),
+                    /*#__PURE__*/ jsx("label", {
+                        htmlFor: id,
+                        className: "textfield-warning-text",
+                        children: warningText
+                    })
+                ]
+            }),
+            helperText && /*#__PURE__*/ jsx("label", {
+                htmlFor: id,
+                className: "textfield-help-text",
+                children: helperText
+            })
+        ]
+    });
 }
-
-export { SelectT as default };
+export default SelectT;

package/components/Separator/index.js

@@ -1,17 +1,14 @@
-import 'react';
-import { Box } from '@mui/material';
-import theme from '../../theme.js';
-import { jsx } from 'react/jsx-runtime';
-
-const Separator = props => {
-  return /*#__PURE__*/jsx(Box, {
-    sx: {
-      margin: theme.spacing(0, 2),
-      width: '1px',
-      height: props.height || '32px',
-      backgroundColor: props.color || theme.palette.TwClrBrdrTertiary
-    }
-  });
-};
-
-export { Separator as default };
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Box } from "@mui/material";
+import theme from "../../theme.js";
+const Separator = (props)=>/*#__PURE__*/ jsx(Box, {
+        sx: {
+            margin: theme.spacing(0, 2),
+            width: '1px',
+            height: props.height || '32px',
+            backgroundColor: props.color || theme.palette.TwClrBrdrTertiary
+        }
+    });
+const components_Separator = Separator;
+export default components_Separator;

package/components/Size.js

@@ -1 +0,0 @@
-

package/components/Slider/index.js

@@ -1,57 +1,44 @@
-import 'react';
-import { useTheme, Slider as Slider$1 } from '@mui/material';
-import { jsx } from 'react/jsx-runtime';
-
-function Slider(props) {
-  const {
-    defaultValue,
-    value,
-    marks,
-    min,
-    max,
-    onChange,
-    step,
-    valueLabelDisplay
-  } = props;
-  const theme = 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__*/jsx(Slider$1, {
-    "aria-label": "Slider",
-    defaultValue: defaultValue,
-    value: value,
-    marks: marks,
-    min: min,
-    max: max,
-    onChangeCommitted: handleChange,
-    step: step ?? null,
-    valueLabelDisplay: valueLabelDisplay,
-    sx: sliderStyles
-  });
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Slider, useTheme } from "@mui/material";
+function Slider_Slider(props) {
+    const { defaultValue, value, marks, min, max, onChange, step, valueLabelDisplay } = props;
+    const theme = 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__*/ jsx(Slider, {
+        "aria-label": "Slider",
+        defaultValue: defaultValue,
+        value: value,
+        marks: marks,
+        min: min,
+        max: max,
+        onChangeCommitted: handleChange,
+        step: step ?? null,
+        valueLabelDisplay: valueLabelDisplay,
+        sx: sliderStyles
+    });
 }
-
-export { Slider as default };
+export default Slider_Slider;