@salt-ds/lab 1.0.0-alpha.49 → 1.0.0-alpha.50

package/dist-cjs/tabs/useTabstrip.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var react = require('react');
 var Tab = require('./Tab.js');
 var useDragDrop = require('./drag-drop/useDragDrop.js');
 var useEditableItem = require('./useEditableItem.js');
@@ -26,10 +26,10 @@ const useTabstrip = ({
   orientation,
   promptForNewTabName
 }) => {
-  const lastSelection = React.useRef(
+  const lastSelection = react.useRef(
     activeTabIndexProp === null ? null : activeTabIndexProp || defaultActiveTabIndex || 0
   );
-  const pendingNewTab = React.useRef(null);
+  const pendingNewTab = react.useRef(null);
   const overflowedItems = collectionHook.data.filter((item) => item.overflowed);
   const keyboardHook = useKeyboardNavigation.useKeyboardNavigation({
     indexPositions: collectionHook.data,
@@ -44,7 +44,7 @@ const useTabstrip = ({
     selected: activeTabIndexProp
   });
   lastSelection.current = selectionHook.selected;
-  const handleDrop = React.useCallback(
+  const handleDrop = react.useCallback(
     (fromIndex, toIndex) => {
       onMoveTab == null ? void 0 : onMoveTab(fromIndex, toIndex);
       if (toIndex === -1) ; else {
@@ -74,7 +74,7 @@ const useTabstrip = ({
     onEnterEditMode,
     onExitEditMode
   });
-  const handleExitEditMode = React.useCallback(
+  const handleExitEditMode = react.useCallback(
     (originalValue, editedValue, allowDeactivation, tabIndex) => {
       editableHook.onExitEditMode(
         originalValue,
@@ -88,7 +88,7 @@ const useTabstrip = ({
     },
     [editableHook, keyboardHook]
   );
-  const handleClick = React.useCallback(
+  const handleClick = react.useCallback(
     (evt, tabIndex) => {
       if (!dragDropHook.isDragging) {
         keyboardHook.onClick(evt, tabIndex);
@@ -97,7 +97,7 @@ const useTabstrip = ({
     },
     [dragDropHook.isDragging, keyboardHook, selectionHook]
   );
-  const handleKeyDown = React.useCallback(
+  const handleKeyDown = react.useCallback(
     (evt) => {
       keyboardHook.onKeyDown(evt);
       if (!evt.defaultPrevented) {
@@ -118,7 +118,7 @@ const useTabstrip = ({
     onEnterEditMode: editableHook.onEnterEditMode,
     onExitEditMode: handleExitEditMode
   };
-  const addTab = React.useCallback(
+  const addTab = react.useCallback(
     (indexPosition = collectionHook.data.length - 1) => {
       const tabId = `${idRoot}-${collectionHook.data.length}`;
       pendingNewTab.current = tabId;
@@ -135,7 +135,7 @@ const useTabstrip = ({
       collectionHook.dispatch({
         type: "add-child-item",
         idRoot,
-        element: React.createElement(Tab.Tab, {
+        element: react.createElement(Tab.Tab, {
           editable: true,
           label: `New Tab ${count}`,
           id: tabId
@@ -145,7 +145,7 @@ const useTabstrip = ({
     },
     [collectionHook, idRoot]
   );
-  const selectNewTab = React.useCallback(
+  const selectNewTab = react.useCallback(
     (tabId) => {
       const tab = collectionHook.data.find((item) => item.id === tabId);
       if (tab) {
@@ -165,7 +165,7 @@ const useTabstrip = ({
       selectionHook
     ]
   );
-  const closeTab = React.useCallback(
+  const closeTab = react.useCallback(
     (indexPosition) => {
       if (!collectionHook.isControlled) {
         collectionHook.dispatch({
@@ -187,7 +187,7 @@ const useTabstrip = ({
     },
     [collectionHook, onCloseTab, selectionHook]
   );
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (pendingNewTab.current) {
       const { current: tabId } = pendingNewTab;
       pendingNewTab.current = null;

package/dist-cjs/tabs-next/OverflowMenu.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var icons = require('@salt-ds/icons');
-var React = require('react');
+var react = require('react');
 var reactOverflow = require('@fluentui/react-overflow');
 require('../dropdown/DropdownBase.js');
 require('../dropdown/DropdownButton.js');
@@ -13,7 +13,7 @@ var Dropdown = require('../dropdown/Dropdown.js');
 require('../form-field-context-legacy/FormFieldLegacyContext.js');
 require('../responsive/useResizeObserver.js');
 
-const OverflowMenu = React.forwardRef(
+const OverflowMenu = react.forwardRef(
   function OverflowMenu2(props, forwardedRef) {
     const { tabs, ...rest } = props;
     const { ref, overflowCount, isOverflowing } = reactOverflow.useOverflowMenu();

package/dist-cjs/tabs-next/TabNext.js

@@ -6,7 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
-var React = require('react');
+var react = require('react');
 var reactOverflow = require('@fluentui/react-overflow');
 var clsx = require('clsx');
 var TabNext$1 = require('./TabNext.css.js');
@@ -17,7 +17,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
 
 const withBaseName = core.makePrefixer("saltTabNext");
-const TabNext = React.forwardRef(
+const TabNext = react.forwardRef(
   function Tab(props, ref) {
     const {
       children,
@@ -56,7 +56,7 @@ const TabNext = React.forwardRef(
       setFocusable(value);
       onFocus == null ? void 0 : onFocus(event);
     };
-    React.useEffect(() => {
+    react.useEffect(() => {
       registerTab({ value, label: children });
       return () => unregisterTab(value);
     }, [children, registerTab, unregisterTab, value]);

package/dist-cjs/tabs-next/TabNextContext.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@salt-ds/core');
-var React = require('react');
+var react = require('react');
 
 const TabsContext = core.createContext("TabsContext", {
   activeColor: "primary",
@@ -17,7 +17,7 @@ const TabsContext = core.createContext("TabsContext", {
   variant: "main"
 });
 function useTabs() {
-  return React.useContext(TabsContext);
+  return react.useContext(TabsContext);
 }
 
 exports.TabsContext = TabsContext;

package/dist-cjs/tabs-next/TabstripNext.js

@@ -8,7 +8,7 @@ var core = require('@salt-ds/core');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var clsx = require('clsx');
-var React = require('react');
+var react = require('react');
 var OverflowMenu = require('./OverflowMenu.js');
 var TabNextContext = require('./TabNextContext.js');
 var TabstripNext$1 = require('./TabstripNext.css.js');
@@ -18,7 +18,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
 
 const withBaseName = core.makePrefixer("saltTabstripNext");
-const TabstripNext = React.forwardRef(
+const TabstripNext = react.forwardRef(
   function TabstripNext2(props, ref) {
     const {
       activeColor = "primary",
@@ -39,7 +39,7 @@ const TabstripNext = React.forwardRef(
       css: TabstripNext$1,
       window: targetWindow
     });
-    const tabstripRef = React.useRef(null);
+    const tabstripRef = react.useRef(null);
     const handleRef = core.useForkRef(tabstripRef, ref);
     const [value, setValue] = core.useControlled({
       controlled: valueProp,
@@ -47,9 +47,9 @@ const TabstripNext = React.forwardRef(
       name: "TabstripNext",
       state: "selected"
     });
-    const [focusable, setFocusableState] = React.useState(value);
-    const [overflowOpen, setOverflowOpen] = React.useState(false);
-    const activate = React.useCallback(
+    const [focusable, setFocusableState] = react.useState(value);
+    const [overflowOpen, setOverflowOpen] = react.useState(false);
+    const activate = react.useCallback(
       (event) => {
         const newValue = event.currentTarget.value;
         setValue(newValue);
@@ -59,26 +59,26 @@ const TabstripNext = React.forwardRef(
       },
       [onChange, value]
     );
-    const isActive = React.useCallback(
+    const isActive = react.useCallback(
       (id) => {
         return value === id;
       },
       [value]
     );
-    const setFocusable = React.useCallback((id) => {
+    const setFocusable = react.useCallback((id) => {
       setFocusableState(id);
     }, []);
-    const isFocusable = React.useCallback(
+    const isFocusable = react.useCallback(
       (id) => {
         return focusable === id || !focusable;
       },
       [focusable]
     );
-    const [tabList, setTabList] = React.useState([]);
-    const registerTab = React.useCallback((tab) => {
+    const [tabList, setTabList] = react.useState([]);
+    const registerTab = react.useCallback((tab) => {
       setTabList((list) => list.concat([tab]));
     }, []);
-    const unregisterTab = React.useCallback((id) => {
+    const unregisterTab = react.useCallback((id) => {
       setTabList((list) => list.filter((item) => item.value !== id));
     }, []);
     const handleKeyDown = (event) => {
@@ -132,7 +132,7 @@ const TabstripNext = React.forwardRef(
     const handleOverflowOpenChange = (isOpen) => {
       setOverflowOpen(isOpen);
     };
-    const contextValue = React.useMemo(
+    const contextValue = react.useMemo(
       () => ({
         activate,
         isActive,

package/dist-cjs/toast-group/ToastGroup.js

@@ -7,11 +7,11 @@ var core = require('@salt-ds/core');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var clsx = require('clsx');
-var React = require('react');
+var react = require('react');
 var ToastGroup$1 = require('./ToastGroup.css.js');
 
 const withBaseName = core.makePrefixer("saltToastGroup");
-const ToastGroup = React.forwardRef(
+const ToastGroup = react.forwardRef(
   function ToastGroup2(props, ref) {
     const { children, className, placement = "bottom-right", ...rest } = props;
     const targetWindow = window.useWindow();

package/dist-cjs/tokenized-input/TokenizedInput.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
-var React = require('react');
+var react = require('react');
 var TokenizedInputBase = require('./TokenizedInputBase.js');
 var useTokenizedInput = require('./useTokenizedInput.js');
 
-const TokenizedInput = React.forwardRef(function TokenizedInput2(props, ref) {
+const TokenizedInput = react.forwardRef(function TokenizedInput2(props, ref) {
   const { inputRef: inputRefProp, ...restProps } = props;
   const { inputRef, helpers, inputProps } = useTokenizedInput.useTokenizedInput(restProps);
   return /* @__PURE__ */ jsxRuntime.jsx(TokenizedInputBase.TokenizedInputBase, {

package/dist-cjs/tokenized-input/TokenizedInputBase.js

@@ -9,7 +9,7 @@ var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var deepmerge = require('deepmerge');
-var React = require('react');
+var react = require('react');
 var InputLegacy = require('../input-legacy/InputLegacy.js');
 require('../input-legacy/StaticInputAdornment.js');
 var InputPill = require('./internal/InputPill.js');
@@ -37,7 +37,7 @@ function hasHelpers(helpers) {
   }
   return helpers != null;
 }
-const TokenizedInputBase = React.forwardRef(function TokenizedInputBase2(props, ref) {
+const TokenizedInputBase = react.forwardRef(function TokenizedInputBase2(props, ref) {
   const {
     InputProps = {},
     ExpandButtonProps = {},
@@ -81,18 +81,18 @@ const TokenizedInputBase = React.forwardRef(function TokenizedInputBase2(props,
   const expandButtonId = `${id}-expand-button`;
   const clearButtonId = `${id}-clear-button`;
   const pillGroupPadding = 16;
-  const pillsRef = React.useRef({});
-  const inputRulerRef = React.useRef(null);
-  const keydownExpandButton = React.useRef(false);
+  const pillsRef = react.useRef({});
+  const inputRulerRef = react.useRef(null);
+  const keydownExpandButton = react.useRef(false);
   const [expandButtonRef, expandButtonWidth] = useWidth.useWidth(density);
   const [clearButtonRef, clearButtonWidth] = useWidth.useWidth(density);
-  const [inputWidth, setInputWidth] = React.useState(INITIAL_INPUT_WIDTH);
-  const [pillGroupWidth, setPillGroupWidth] = React.useState(null);
-  const [firstHiddenIndex, setFirstHiddenIndex] = React.useState(null);
+  const [inputWidth, setInputWidth] = react.useState(INITIAL_INPUT_WIDTH);
+  const [pillGroupWidth, setPillGroupWidth] = react.useState(null);
+  const [firstHiddenIndex, setFirstHiddenIndex] = react.useState(null);
   const showExpandButton = !expanded && firstHiddenIndex != null;
   const widthOffset = pillGroupPadding + INITIAL_INPUT_WIDTH + (expanded ? clearButtonWidth : expandButtonWidth);
   const containerRef = useResizeObserver.useResizeObserver(
-    React.useCallback(
+    react.useCallback(
       ([{ contentRect }]) => {
         setPillGroupWidth(contentRect.width - widthOffset);
       },

package/dist-cjs/tokenized-input/internal/InputPill.js

@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var icons = require('@salt-ds/icons');
 var clsx = require('clsx');
-var React = require('react');
+var react = require('react');
 var useWidth = require('./useWidth.js');
 
 const withBaseName = core.makePrefixer("saltInputPill");
-const InputPill = React.memo(function InputPill2(props) {
+const InputPill = react.memo(function InputPill2(props) {
   const {
     active,
     className,
@@ -24,7 +24,7 @@ const InputPill = React.memo(function InputPill2(props) {
     pillsRef,
     ...restProps
   } = props;
-  const ref = React.useRef(null);
+  const ref = react.useRef(null);
   const isRemovable = Boolean(onDelete);
   core.useIsomorphicLayoutEffect(() => {
     if (!isRemovable && pillsRef.current) {

package/dist-cjs/tokenized-input/internal/InputRuler.js

@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
-var React = require('react');
+var react = require('react');
 var InputRuler$1 = require('./InputRuler.css.js');
 
 const withBaseName = core.makePrefixer("saltInputRuler");
-const InputRuler = React.forwardRef(function InputRuler2(props, ref) {
+const InputRuler = react.forwardRef(function InputRuler2(props, ref) {
   const { value } = props;
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({

package/dist-cjs/tokenized-input/internal/useResizeObserver.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@salt-ds/core');
-var React = require('react');
+var react = require('react');
 
 function useResizeObserver(onSizeChange) {
-  const ref = React.useRef(null);
-  React.useEffect(() => {
+  const ref = react.useRef(null);
+  react.useEffect(() => {
     if (!ref.current) {
       return void 0;
     }

package/dist-cjs/tokenized-input/internal/useWidth.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@salt-ds/core');
-var React = require('react');
+var react = require('react');
 
 const safeParseFloat = (target) => Number.parseFloat(target || "0");
 const getWidth = (node) => {
@@ -24,8 +24,8 @@ const getWidth = (node) => {
   return dimension.width + margin;
 };
 const useWidth = (density) => {
-  const [node, setNode] = React.useState(null);
-  const [width, setWidth] = React.useState(0);
+  const [node, setNode] = react.useState(null);
+  const [width, setWidth] = react.useState(0);
   core.useIsomorphicLayoutEffect(() => {
     if (node !== null && density) {
       setWidth(getWidth(node));

package/dist-cjs/tokenized-input/useTokenizedInput.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@salt-ds/core');
 var copy = require('clipboard-copy');
-var React = require('react');
+var react = require('react');
 require('../form-field-context-legacy/FormFieldLegacyContext.js');
 var useFormFieldLegacyProps = require('../form-field-context-legacy/useFormFieldLegacyProps.js');
 var escapeRegExp = require('../utils/escapeRegExp.js');
@@ -91,14 +91,14 @@ function useTokenizedInput(props) {
     name: "TokenizedInput",
     state: "expanded"
   });
-  const [activeIndices, setActiveIndices] = React.useState([]);
-  const [highlightedIndex, setHighlightedIndex] = React.useState(
+  const [activeIndices, setActiveIndices] = react.useState([]);
+  const [highlightedIndex, setHighlightedIndex] = react.useState(
     void 0
   );
-  const [focused, setFocusedState] = React.useState(false);
-  const inputRef = React.useRef(null);
-  const blurTimeout = React.useRef(null);
-  const preventBlurOnCopy = React.useRef(false);
+  const [focused, setFocusedState] = react.useState(false);
+  const inputRef = react.useRef(null);
+  const blurTimeout = react.useRef(null);
+  const preventBlurOnCopy = react.useRef(false);
   const hasActiveItems = Boolean(activeIndices.length);
   const delimiters = [].concat(delimiter);
   const primaryDelimiter = delimiters[0];
@@ -111,13 +111,13 @@ function useTokenizedInput(props) {
       onChangeProp(selectedItems2);
     }
   });
-  const cancelBlur = React.useCallback(() => {
+  const cancelBlur = react.useCallback(() => {
     if (blurTimeout.current) {
       clearTimeout(blurTimeout.current);
     }
     blurTimeout.current = null;
   }, []);
-  const focusInput = React.useCallback(() => {
+  const focusInput = react.useCallback(() => {
     if (inputRef.current) {
       inputRef.current.focus();
       if (popoutMode && setIsPoppedOut) {
@@ -125,18 +125,18 @@ function useTokenizedInput(props) {
       }
     }
   }, [popoutMode, setIsPoppedOut]);
-  React.useEffect(
+  react.useEffect(
     () => () => {
       cancelBlur();
     },
     [cancelBlur]
   );
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (expanded) {
       focusInput();
     }
   }, [expanded, focusInput]);
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (popoutMode && setManagedPopout) {
       setManagedPopout(true);
       setIntendedHeight(SINGLE_LINE_HEIGHT_MAP[density]);
@@ -147,7 +147,7 @@ function useTokenizedInput(props) {
       setValue(newValue);
     }
   };
-  const updateSelectedItems = React.useCallback(
+  const updateSelectedItems = react.useCallback(
     (action) => {
       if (!isSelectionControlled) {
         setSelectedItems((prevSelectedItems) => {
@@ -184,7 +184,7 @@ function useTokenizedInput(props) {
     setHighlightedIndex(void 0);
     setActiveIndices([]);
   };
-  const removeItems = React.useCallback(
+  const removeItems = react.useCallback(
     (itemIndices) => {
       updateSelectedItems(
         (prevSelectedItems) => prevSelectedItems && (prevSelectedItems.length === 0 ? prevSelectedItems : prevSelectedItems.filter(
@@ -286,7 +286,7 @@ function useTokenizedInput(props) {
       );
     }
   };
-  const handleRemoveItem = React.useCallback(
+  const handleRemoveItem = react.useCallback(
     (itemIndex) => {
       focusInput();
       if (itemIndex) {
@@ -504,7 +504,7 @@ const validateProps = function validateProps2(props) {
   if (process.env.NODE_ENV !== "production") {
     const { delimiter } = props;
     const invalidDelimiter = Array.isArray(delimiter) ? delimiter.every(isChar) : isChar(delimiter);
-    React.useEffect(() => {
+    react.useEffect(() => {
       if (invalidDelimiter) {
         console.warn(
           "TokenizedInput delimiter should be a single character or an array of single characters"

package/dist-cjs/tokenized-input-next/TokenizedInputNext.js

@@ -8,14 +8,14 @@ var icons = require('@salt-ds/icons');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var clsx = require('clsx');
-var React = require('react');
+var react = require('react');
 var TokenizedInputNext$1 = require('./TokenizedInputNext.css.js');
 var InputPill = require('./internal/InputPill.js');
 var useTokenizedInputNext = require('./useTokenizedInputNext.js');
 
 const withBaseName = core.makePrefixer("saltTokenizedInputNext");
 const getItemsAriaLabel = (itemCount) => itemCount === 0 ? "no item selected" : `${itemCount} ${itemCount > 1 ? "items" : "item"}`;
-const TokenizedInputNext = React.forwardRef(function TokenizedInputNext2({
+const TokenizedInputNext = react.forwardRef(function TokenizedInputNext2({
   textAreaRef: textAreaRefProp,
   textAreaProps = {},
   variant = "primary",
@@ -75,7 +75,7 @@ const TokenizedInputNext = React.forwardRef(function TokenizedInputNext2({
   const inputId = `${id}-input`;
   const expandButtonId = `${id}-expand-button`;
   const clearButtonId = `${id}-clear-button`;
-  const keydownExpandButton = React.useRef(false);
+  const keydownExpandButton = react.useRef(false);
   const containerRef = core.useForkRef(ref, containerHookRef);
   const textAreaRef = core.useForkRef(textAreaHookRef, textAreaRefProp);
   const showExpandButton = !expanded && firstHiddenIndex != null;

package/dist-cjs/tokenized-input-next/internal/InputPill.js

@@ -8,12 +8,12 @@ var icons = require('@salt-ds/icons');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var clsx = require('clsx');
-var React = require('react');
+var react = require('react');
 var InputPill$1 = require('./InputPill.css.js');
 var useWidth = require('./useWidth.js');
 
 const withBaseName = core.makePrefixer("saltInputPill");
-const InputPill = React.memo(function InputPill2(props) {
+const InputPill = react.memo(function InputPill2(props) {
   const {
     className,
     hidden,
@@ -30,8 +30,8 @@ const InputPill = React.memo(function InputPill2(props) {
     css: InputPill$1,
     window: targetWindow
   });
-  const ref = React.useRef(null);
-  const [isEllipsisActive, setEllipsisActive] = React.useState(false);
+  const ref = react.useRef(null);
+  const [isEllipsisActive, setEllipsisActive] = react.useState(false);
   const isRemovable = Boolean(onClose);
   core.useIsomorphicLayoutEffect(() => {
     var _a;

package/dist-cjs/tokenized-input-next/internal/useResizeObserver.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@salt-ds/core');
-var React = require('react');
+var react = require('react');
 
 function useResizeObserver(onSizeChange) {
-  const ref = React.useRef(null);
-  React.useEffect(() => {
+  const ref = react.useRef(null);
+  react.useEffect(() => {
     if (!ref.current) {
       return void 0;
     }

package/dist-cjs/tokenized-input-next/internal/useWidth.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@salt-ds/core');
-var React = require('react');
+var react = require('react');
 
 const safeParseFloat = (target) => Number.parseFloat(target != null ? target : "0");
 const getPadding = (node) => {
@@ -32,8 +32,8 @@ const getWidth = (node) => {
   return dimension.width + margin;
 };
 const useWidth = (density) => {
-  const [node, setNode] = React.useState(null);
-  const [width, setWidth] = React.useState(0);
+  const [node, setNode] = react.useState(null);
+  const [width, setWidth] = react.useState(0);
   core.useIsomorphicLayoutEffect(() => {
     if (node !== null && density) {
       setWidth(getWidth(node));