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

package/components/Select/SelectT.js

@@ -1,241 +1,256 @@
-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";
+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';
+
 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(()=>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);
-    };
-    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;
-                }
-            }
+  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 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;
-                }
+  }, [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;
             }
+            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)=>/*#__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
-            })
-        ]
-    });
+      }
+    }
+  };
+  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;
+          }
+        }
+      }
+    }
+  };
+  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
+    })]
+  });
 }
-export default SelectT;
+
+export { SelectT as default };

package/components/Separator/index.js

@@ -1,14 +1,17 @@
-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;
+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 };

package/components/Size.js

@@ -0,0 +1 @@
+

package/components/Slider/index.js

@@ -1,44 +1,57 @@
-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
-    });
+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
+  });
 }
-export default Slider_Slider;
+
+export { Slider as default };