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

package/dist-cjs/calendar/useCalendar.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var date = require('@internationalized/date');
 var core = require('@salt-ds/core');
-var React = require('react');
+var react = require('react');
 var useSelection = require('./useSelection.js');
 
 const defaultIsDayUnselectable = () => false;
@@ -35,7 +35,7 @@ function useCalendar(props) {
     name: "Calendar",
     state: "visibleMonth"
   });
-  const isOutsideAllowedDates = React.useCallback(
+  const isOutsideAllowedDates = react.useCallback(
     (date) => {
       return minDate != null && date.compare(minDate) < 0 || maxDate != null && date.compare(maxDate) > 0;
     },
@@ -47,7 +47,7 @@ function useCalendar(props) {
   const isOutsideAllowedYears = (date$1) => {
     return minDate != null && date.endOfYear(date$1).compare(minDate) < 0 || maxDate != null && date.startOfYear(date$1).compare(maxDate) > 0;
   };
-  const isDaySelectable = React.useCallback(
+  const isDaySelectable = react.useCallback(
     (date) => !(date && (isDayUnselectable(date) || isDayDisabled(date) || isOutsideAllowedDates(date))),
     [isDayUnselectable, isDayDisabled, isOutsideAllowedDates]
   );
@@ -62,7 +62,7 @@ function useCalendar(props) {
     onHoveredDateChange,
     hoveredDate
   });
-  const [calendarFocused, setCalendarFocused] = React.useState(false);
+  const [calendarFocused, setCalendarFocused] = react.useState(false);
   const isInVisibleMonth = (date$1) => date$1 != null && date.isSameMonth(date$1, visibleMonth);
   const getInitialFocusedDate = () => {
     const selectedDate2 = selectionManager.state.selectedDate;
@@ -91,10 +91,10 @@ function useCalendar(props) {
     }
     return date.startOfMonth(visibleMonth);
   };
-  const [focusedDate, setFocusedDateState] = React.useState(
+  const [focusedDate, setFocusedDateState] = react.useState(
     getInitialFocusedDate
   );
-  const isDayVisible = React.useCallback(
+  const isDayVisible = react.useCallback(
     (date$1) => {
       const startInsideDays = date.startOfMonth(visibleMonth);
       if (date$1.compare(startInsideDays) < 0)
@@ -104,14 +104,14 @@ function useCalendar(props) {
     },
     [visibleMonth]
   );
-  const setVisibleMonth = React.useCallback(
+  const setVisibleMonth = react.useCallback(
     (event, newVisibleMonth) => {
       setVisibleMonthState(newVisibleMonth);
       onVisibleMonthChange == null ? void 0 : onVisibleMonthChange(event, newVisibleMonth);
     },
     [onVisibleMonthChange, setVisibleMonthState]
   );
-  const setFocusedDate = React.useCallback(
+  const setFocusedDate = react.useCallback(
     (event, date$1) => {
       if (date.isSameDay(date$1, focusedDate) || isOutsideAllowedDates(date$1))
         return;
@@ -129,7 +129,7 @@ function useCalendar(props) {
       setVisibleMonth
     ]
   );
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (!isDayVisible(focusedDate)) {
       setFocusedDateState(getInitialFocusedDate());
     }

package/dist-cjs/calendar/useCalendarDay.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var date = require('@internationalized/date');
-var React = require('react');
+var react = require('react');
 var CalendarContext = require('./internal/CalendarContext.js');
 var useFocusManagement = require('./internal/useFocusManagement.js');
 var useSelection = require('./useSelection.js');
@@ -51,7 +51,7 @@ function useCalendarDay({ date: date$1, month }, ref) {
   const unselectable = Boolean(unselectableReason);
   const highlighted = Boolean(highlightedReason);
   const hidden = hideOutOfRangeDates && outOfRange;
-  React.useEffect(() => {
+  react.useEffect(() => {
     var _a;
     if (focused) {
       (_a = ref.current) == null ? void 0 : _a.focus({ preventScroll: true });

package/dist-cjs/carousel/Carousel.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+var react = require('react');
 var core = require('@salt-ds/core');
 var icons = require('@salt-ds/icons');
 var clsx = require('clsx');
@@ -14,7 +14,7 @@ var useSlideSelection = require('../utils/useSlideSelection.js');
 var Carousel$1 = require('./Carousel.css.js');
 
 const withBaseName = core.makePrefixer("saltCarousel");
-const Carousel = React.forwardRef(
+const Carousel = react.forwardRef(
   function Carousel2({
     initialIndex,
     animation = "slide",
@@ -32,7 +32,7 @@ const Carousel = React.forwardRef(
       window: targetWindow
     });
     const id = core.useId(idProp);
-    const slidesCount = React.Children.count(children);
+    const slidesCount = react.Children.count(children);
     const [_, selectedSlide, handleSlideSelection] = useSlideSelection.useSlideSelection(initialIndex);
     const moveSlide = (direction) => {
       const moveLeft = selectedSlide === 0 ? slidesCount - 1 : selectedSlide - 1;
@@ -46,7 +46,7 @@ const Carousel = React.forwardRef(
     }) => {
       handleSlideSelection(Number(value));
     };
-    React.useEffect(() => {
+    react.useEffect(() => {
       if (process.env.NODE_ENV !== "production") {
         if (slidesCount < 1) {
           console.warn(
@@ -101,7 +101,7 @@ const Carousel = React.forwardRef(
             direction: "horizontal",
             children: Array.from({ length: slidesCount }, (_2, index) => ({
               value: `${index}`
-            })).map((radio) => /* @__PURE__ */ React.createElement(core.RadioButton, {
+            })).map((radio) => /* @__PURE__ */ react.createElement(core.RadioButton, {
               ...radio,
               key: radio.value
             }))

package/dist-cjs/carousel/CarouselSlide.js

@@ -4,13 +4,13 @@ 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 clsx = require('clsx');
 
 const withBaseName = core.makePrefixer("saltCarouselSlide");
-const CarouselSlide = React.forwardRef(
+const CarouselSlide = react.forwardRef(
   function CarouselSlide2({ ButtonBar, Media, description, title, contentAlignment }, ref) {
-    const buttonBarRef = React.useRef(null);
+    const buttonBarRef = react.useRef(null);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", {
       ref,
       children: [

package/dist-cjs/cascading-menu/CascadingMenu.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+var react = require('react');
 var core = require('@salt-ds/core');
 var useEventCallback = require('../utils/useEventCallback.js');
 var CascadingMenuList = require('./CascadingMenuList.js');
@@ -17,7 +17,7 @@ var useStateReducer = require('./internal/useStateReducer.js');
 var stateChangeTypes = require('./stateChangeTypes.js');
 
 const defaultItemToString = (item) => (item == null ? void 0 : item.title) || String(item);
-const CascadingMenu = React.forwardRef(
+const CascadingMenu = react.forwardRef(
   function CascadingMenu2(props, ref) {
     const {
       children,
@@ -46,8 +46,8 @@ const CascadingMenu = React.forwardRef(
     } = props;
     const density = core.useDensity();
     const refsManager = useRefsManager.useRefsManager();
-    const childrenRef = React.useRef(null);
-    const getMenuTriggerRef = React.useCallback(
+    const childrenRef = react.useRef(null);
+    const getMenuTriggerRef = react.useCallback(
       () => anchorRefProp || childrenRef.current,
       [anchorRefProp]
     );
@@ -57,12 +57,12 @@ const CascadingMenu = React.forwardRef(
       name: "CascadingMenu",
       state: "source"
     });
-    const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = React.useState(false);
-    const menusDataById = React.useMemo(
+    const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = react.useState(false);
+    const menusDataById = react.useMemo(
       () => menuSource ? stateUtils.deriveFlatStateFromTree(menuSource) : {},
       [menuSource]
     );
-    const rootMenuId = React.useMemo(
+    const rootMenuId = react.useMemo(
       () => Object.keys(menusDataById).find((id) => menusDataById[id].level === 0),
       [menusDataById]
     );
@@ -70,11 +70,11 @@ const CascadingMenu = React.forwardRef(
       menusDataById,
       isNavigatingWithKeyboard
     );
-    const [state, dispatch] = React.useReducer(stateReducer, []);
+    const [state, dispatch] = react.useReducer(stateReducer, []);
     const rootMenuState = state[0];
     const prevState = core.usePrevious(state, void 0, []);
     const prevRootMenuState = prevState == null ? void 0 : prevState[0];
-    React.useEffect(() => {
+    react.useEffect(() => {
       if (!!rootMenuState !== !!prevRootMenuState) {
         if (!rootMenuState) {
           onClose == null ? void 0 : onClose();
@@ -83,7 +83,7 @@ const CascadingMenu = React.forwardRef(
         }
       }
     });
-    const openCloseMenu = React.useCallback(
+    const openCloseMenu = react.useCallback(
       (open) => dispatch({
         type: open ? CascadingMenuAction.CascadingMenuAction.OPEN_MENU : CascadingMenuAction.CascadingMenuAction.CLOSE_CASCADING_MENU,
         cause: stateChangeTypes.stateChangeTypes.MOUSE_TOGGLE,
@@ -91,7 +91,7 @@ const CascadingMenu = React.forwardRef(
       }),
       [rootMenuId]
     );
-    React.useEffect(() => {
+    react.useEffect(() => {
       if (openProp !== void 0 && openProp !== !!rootMenuState) {
         openCloseMenu(openProp);
       }
@@ -122,14 +122,14 @@ const CascadingMenu = React.forwardRef(
         });
       }
     });
-    React.useEffect(() => {
+    react.useEffect(() => {
       const win = core.ownerWindow(getMenuTriggerRef());
       win.addEventListener("resize", handleResize);
       return () => {
         win.removeEventListener("resize", handleResize);
       };
     }, [getMenuTriggerRef, handleResize]);
-    const onItemClickCallback = React.useCallback(
+    const onItemClickCallback = react.useCallback(
       (sourceItem, event) => {
         onItemClick == null ? void 0 : onItemClick(sourceItem, event);
         if (!isNavigatingWithKeyboard) {
@@ -142,7 +142,7 @@ const CascadingMenu = React.forwardRef(
       },
       [isNavigatingWithKeyboard, onItemClick, rootMenuId]
     );
-    const setMenuTriggerRef = React.useCallback((node) => {
+    const setMenuTriggerRef = react.useCallback((node) => {
       childrenRef.current = node;
     }, []);
     const handleRef = core.useForkRef(
@@ -159,7 +159,7 @@ const CascadingMenu = React.forwardRef(
       menusDataById
     });
     const cloneMenuChildren = (cloneChildren) => {
-      if (React.isValidElement(cloneChildren)) {
+      if (react.isValidElement(cloneChildren)) {
         const childrenProps = {
           ...cloneChildren.props
         };
@@ -167,7 +167,7 @@ const CascadingMenu = React.forwardRef(
           childrenProps.onClick = onMenuTriggerClick;
           childrenProps.onKeyDown = onMenuTriggerKeydown;
         }
-        return React.cloneElement(cloneChildren, {
+        return react.cloneElement(cloneChildren, {
           ref: handleRef,
           ...childrenProps
         });
@@ -193,7 +193,7 @@ const CascadingMenu = React.forwardRef(
       getScreenBounds,
       disableMouseOutInteractions
     };
-    React.useEffect(() => {
+    react.useEffect(() => {
       if (!openProp) {
         setIsNavigatingWithKeyboard(false);
       }
@@ -206,7 +206,7 @@ const CascadingMenu = React.forwardRef(
           const isRoot = data.level === 0;
           const parentElement = isRoot ? getMenuTriggerRef() : refsManager.get(data.parentId);
           const isChildMenuOpen = !!state[data.level + 1];
-          return /* @__PURE__ */ React.createElement(CascadingMenuList.CascadingMenuList, {
+          return /* @__PURE__ */ react.createElement(CascadingMenuList.CascadingMenuList, {
             ...commonMenuProps,
             data,
             height,

package/dist-cjs/cascading-menu/CascadingMenuItem.js

@@ -6,7 +6,7 @@ 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');
 require('../list-deprecated/List.js');
 require('../list-deprecated/ListBase.js');
 require('../list-deprecated/ListItemBase.js');
@@ -30,7 +30,7 @@ const getIcon = (sourceItem, isDisabled = false) => {
   }
   return null;
 };
-const DefaultMenuItem = React.forwardRef(
+const DefaultMenuItem = react.forwardRef(
   (props, ref) => {
     const {
       blurSelected,
@@ -55,10 +55,10 @@ const DefaultMenuItem = React.forwardRef(
       css: CascadingMenuItem,
       window: targetWindow
     });
-    const menuTextRef = React.useRef(null);
-    const [hasTooltip, setHasTooltip] = React.useState(false);
+    const menuTextRef = react.useRef(null);
+    const [hasTooltip, setHasTooltip] = react.useState(false);
     const menuText = itemToString(sourceItem);
-    React.useEffect(() => {
+    react.useEffect(() => {
       const element = menuTextRef.current;
       if (element) {
         if (element.offsetWidth < element.scrollWidth) {

package/dist-cjs/cascading-menu/CascadingMenuList.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var clsx = require('clsx');
-var React = require('react');
+var react = require('react');
 var List = require('../list-deprecated/List.js');
 require('../list-deprecated/ListBase.js');
 require('../list-deprecated/ListItemBase.js');
@@ -26,7 +26,7 @@ var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var CascadingMenuList$1 = require('./CascadingMenuList.css.js');
 
-const CascadingMenuList = React.forwardRef(function CascadingMenuList2(props, ref) {
+const CascadingMenuList = react.forwardRef(function CascadingMenuList2(props, ref) {
   const {
     className,
     maxWidth,
@@ -58,8 +58,8 @@ const CascadingMenuList = React.forwardRef(function CascadingMenuList2(props, re
     window: targetWindow
   });
   const baseClass = "saltCascadingMenuList";
-  const [menuRef, setInternalMenuRef] = React.useState(null);
-  const setMenuRef = React.useCallback(
+  const [menuRef, setInternalMenuRef] = react.useState(null);
+  const setMenuRef = react.useCallback(
     (node) => {
       refsManager.set(menuId, node);
     },
@@ -68,11 +68,11 @@ const CascadingMenuList = React.forwardRef(function CascadingMenuList2(props, re
   const sizeStackable = 36;
   const defaultRowHeight = sizeStackable;
   const spacing = 8;
-  const isMenuActiveState = React.useState(true);
+  const isMenuActiveState = react.useState(true);
   const [isMenuActive, setIsMenuActive] = isMenuActiveState;
   const listRef = core.useForkRef(ref, setInternalMenuRef);
   const handleRef = core.useForkRef(setMenuRef, listRef);
-  React.useEffect(() => {
+  react.useEffect(() => {
     if (menuRef == null ? void 0 : menuRef.focus) {
       const id = setTimeout(() => {
         menuRef.focus();
@@ -83,7 +83,7 @@ const CascadingMenuList = React.forwardRef(function CascadingMenuList2(props, re
     }
   }, [menuRef, rootPlacementOffset]);
   const handleKeyDown = keydownHandlers.getKeyDownHandlers(props, setIsMenuActive);
-  const onFocusHandler = React.useCallback(() => {
+  const onFocusHandler = react.useCallback(() => {
     setIsMenuActive(true);
     if (isNavigatingWithKeyboard) {
       if (!highlightedItemIndex) {
@@ -107,11 +107,11 @@ const CascadingMenuList = React.forwardRef(function CascadingMenuList2(props, re
     isMenuActiveState,
     menuRef
   );
-  const hasEndAdornment = React.useMemo(
+  const hasEndAdornment = react.useMemo(
     () => data.menuItems.some(stateUtils.hasSubMenu),
     [data]
   );
-  const hasStartAdornment = React.useMemo(() => data.menuItems.some(stateUtils.hasIcon), [data]);
+  const hasStartAdornment = react.useMemo(() => data.menuItems.some(stateUtils.hasIcon), [data]);
   const rowHeight = rowHeightProp != null ? rowHeightProp : defaultRowHeight;
   const maxHeight = menuPositioning.getMaxHeight(heightProp, spacing, getScreenBounds);
   const calculatedMenuHeight = rowHeight * data.menuItems.length;

package/dist-cjs/cascading-menu/internal/useClickAway.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var react = require('react');
 var useEventCallback = require('../../utils/useEventCallback.js');
 require('@salt-ds/core');
 var useMountedRef = require('./useMountedRef.js');
@@ -36,7 +36,7 @@ const useClickAway = (nodes, containingDocument, onClickAway, onClick = () => vo
       onClickAway(event);
     }
   });
-  React.useEffect(() => {
+  react.useEffect(() => {
     var _a;
     if (containingDocument) {
       containingDocument.addEventListener(

package/dist-cjs/cascading-menu/internal/useMenuTriggerHandlers.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var react = require('react');
 var useEventCallback = require('../../utils/useEventCallback.js');
 require('@salt-ds/core');
 var stateChangeTypes = require('../stateChangeTypes.js');
@@ -22,7 +22,7 @@ function useMenuTriggerHandlers({
     const { type } = event;
     setIsNavigatingWithKeyboard(false);
     if (type === "click") {
-      if (React.isValidElement(children)) {
+      if (react.isValidElement(children)) {
         const childrenProps = children.props;
         (_a = childrenProps.onClick) == null ? void 0 : _a.call(childrenProps, event);
       }
@@ -79,7 +79,7 @@ function useMenuTriggerHandlers({
           });
           break;
       }
-      if (React.isValidElement(children)) {
+      if (react.isValidElement(children)) {
         const childrenProps = children.props;
         (_a = childrenProps.onKeyDown) == null ? void 0 : _a.call(childrenProps, event);
       }

package/dist-cjs/cascading-menu/internal/useMountedRef.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var react = require('react');
 
 function useMountedRef() {
-  const mountedRef = React.useRef(false);
-  React.useEffect(() => {
+  const mountedRef = react.useRef(false);
+  react.useEffect(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;

package/dist-cjs/cascading-menu/internal/useMouseHandlers.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var react = require('react');
 var stateChangeTypes = require('../stateChangeTypes.js');
 var CascadingMenuAction = require('./CascadingMenuAction.js');
 
@@ -23,17 +23,17 @@ function useMouseHandlers(props, isMenuActiveState, menuRef) {
     menuId,
     parentElement
   } = props;
-  const scheduledHighlightedIndexChange = React.useRef(null);
-  const mouseEnterTimer = React.useRef();
-  const mouseOutTimer = React.useRef();
-  React.useEffect(
+  const scheduledHighlightedIndexChange = react.useRef(null);
+  const mouseEnterTimer = react.useRef();
+  const mouseOutTimer = react.useRef();
+  react.useEffect(
     () => function cleanUpTimeouts() {
       clearTimeout(mouseEnterTimer.current);
       clearTimeout(mouseOutTimer.current);
     },
     []
   );
-  const handleMouseMove = React.useCallback(
+  const handleMouseMove = react.useCallback(
     (highlightedIndex) => {
       if (isNavigatingWithKeyboard) {
         setIsNavigatingWithKeyboard(false);
@@ -65,7 +65,7 @@ function useMouseHandlers(props, isMenuActiveState, menuRef) {
       menuId
     ]
   );
-  const handleMouseOut = React.useCallback(
+  const handleMouseOut = react.useCallback(
     (event) => {
       var _a;
       if (isNavigatingWithKeyboard) {

package/dist-cjs/cascading-menu/internal/useRefsManager.js

@@ -2,22 +2,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var react = require('react');
 
 function useRefsManager() {
-  const refs = React.useRef(/* @__PURE__ */ new Map());
-  const [, forceUpdate] = React.useReducer((x) => !x, false);
-  const get = React.useCallback((key) => refs.current.get(key), []);
-  const set = React.useCallback((key, value) => {
+  const refs = react.useRef(/* @__PURE__ */ new Map());
+  const [, forceUpdate] = react.useReducer((x) => !x, false);
+  const get = react.useCallback((key) => refs.current.get(key), []);
+  const set = react.useCallback((key, value) => {
     refs.current.set(key, value);
     forceUpdate();
   }, []);
-  const values = React.useCallback(() => {
+  const values = react.useCallback(() => {
     const vals = [];
     refs.current.forEach((value) => vals.push(value));
     return vals;
   }, []);
-  return React.useMemo(() => ({ get, set, values }), [get, set, values]);
+  return react.useMemo(() => ({ get, set, values }), [get, set, values]);
 }
 
 exports.useRefsManager = useRefsManager;

package/dist-cjs/cascading-menu/internal/useStateReducer.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var react = require('react');
 var CascadingMenuAction = require('./CascadingMenuAction.js');
 
 function getDefaultMenuState(id) {
@@ -29,7 +29,7 @@ function menuPositionReducer(state, action, level) {
   }
 }
 function useStateReducer(menusDataById, isNavigatingWithKeyboard) {
-  return React.useCallback(
+  return react.useCallback(
     (state, action) => {
       let newState = [...state];
       const { type, targetId, highlightedItemIndex = null } = action;

package/dist-cjs/color-chooser/AlphaInputField.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var clsx = require('clsx');
-var React = require('react');
+var react = require('react');
 var InputLegacy = require('../input-legacy/InputLegacy.js');
 require('../input-legacy/StaticInputAdornment.js');
 var styles = require('@salt-ds/styles');
@@ -24,10 +24,10 @@ const AlphaInput = ({
     css: RGBAInput,
     window: targetWindow
   });
-  const [alphaInputValue, setAlphaInputValue] = React.useState(
+  const [alphaInputValue, setAlphaInputValue] = react.useState(
     !Number.isNaN(alphaValue) ? alphaValue.toString() : ""
   );
-  React.useEffect(() => {
+  react.useEffect(() => {
     setAlphaInputValue(!Number.isNaN(alphaValue) ? alphaValue.toString() : "");
   }, [alphaValue]);
   const handleAlphaInputChange = (event, newValue) => {

package/dist-cjs/color-chooser/AlphaInputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlphaInputField.js","sources":["../src/color-chooser/AlphaInputField.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ChangeEvent, useEffect, useState } from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport rgbaInputCss from \"./RGBAInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\ninterface AlphaInputProps {\n  alphaValue: number;\n  showAsOpacity?: boolean;\n  onSubmit: (alpha: number, e?: ChangeEvent) => void;\n}\n\nexport const AlphaInput = ({\n  alphaValue,\n  onSubmit,\n  showAsOpacity = false,\n}: AlphaInputProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-rgba-input\",\n    css: rgbaInputCss,\n    window: targetWindow,\n  });\n\n  const [alphaInputValue, setAlphaInputValue] = useState<string>(\n    !Number.isNaN(alphaValue) ? alphaValue.toString() : \"\",\n  );\n\n  useEffect(() => {\n    setAlphaInputValue(!Number.isNaN(alphaValue) ? alphaValue.toString() : \"\");\n  }, [alphaValue]);\n\n  const handleAlphaInputChange = (\n    event: ChangeEvent<HTMLInputElement>,\n    newValue: string,\n  ): void => {\n    const value = newValue.replace(\"%\", \"\");\n    let alpha: string = value;\n\n    if (value.trim() === \"\" || Number.isNaN(value)) {\n      alpha = \"\";\n    }\n\n    if (showAsOpacity && Number.parseFloat(value)) {\n      alpha = (Number.parseFloat(value) / 100).toString();\n    }\n\n    if (value.charAt(1) === \".\" || value.charAt(0) === \".\") {\n      alpha = value;\n    }\n\n    setAlphaInputValue(alpha);\n  };\n\n  const handleKeyDownAlpha = (\n    e: React.KeyboardEvent<HTMLInputElement>,\n  ): void => {\n    if (e.key === \"Enter\") {\n      const alpha =\n        alphaInputValue.trim().replace(\"%\", \"\") !== \"\"\n          ? Number.parseFloat(alphaInputValue)\n          : 0;\n      const validatedAlpha = Math.max(0, Math.min(alpha, 1));\n      setAlphaInputValue(validatedAlpha.toString());\n      onSubmit(validatedAlpha);\n    }\n  };\n\n  const handleOnBlurAlpha = (e: React.FocusEvent<HTMLInputElement>): void => {\n    // Guard against parseFloat('') becoming NaN\n    const alpha =\n      alphaInputValue.trim() !== \"\" ? Number.parseFloat(alphaInputValue) : 0;\n\n    const validatedAlpha = Math.max(0, Math.min(alpha, 1));\n    setAlphaInputValue(validatedAlpha.toString());\n    onSubmit(validatedAlpha, e);\n  };\n\n  return (\n    <Input\n      inputProps={{\n        // @ts-ignore\n        \"data-testid\": \"a-input\",\n      }}\n      className={clsx({\n        [withBaseName(\"rgbaInput\")]: !showAsOpacity,\n        [withBaseName(\"opacityInput\")]: showAsOpacity,\n      })}\n      value={\n        showAsOpacity\n          ? alphaInputValue\n            ? `${(Number.parseFloat(alphaInputValue) * 100).toString()}%`\n            : \"%\"\n          : alphaInputValue\n      }\n      onChange={handleAlphaInputChange}\n      onBlur={handleOnBlurAlpha}\n      onKeyDown={handleKeyDownAlpha}\n    />\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","rgbaInputCss","useState","useEffect","jsx","Input","clsx"],"mappings":"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"}
+{"version":3,"file":"AlphaInputField.js","sources":["../src/color-chooser/AlphaInputField.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type FocusEvent,\n  type KeyboardEvent,\n  useEffect,\n  useState,\n} from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport rgbaInputCss from \"./RGBAInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\ninterface AlphaInputProps {\n  alphaValue: number;\n  showAsOpacity?: boolean;\n  onSubmit: (alpha: number, e?: ChangeEvent) => void;\n}\n\nexport const AlphaInput = ({\n  alphaValue,\n  onSubmit,\n  showAsOpacity = false,\n}: AlphaInputProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-rgba-input\",\n    css: rgbaInputCss,\n    window: targetWindow,\n  });\n\n  const [alphaInputValue, setAlphaInputValue] = useState<string>(\n    !Number.isNaN(alphaValue) ? alphaValue.toString() : \"\",\n  );\n\n  useEffect(() => {\n    setAlphaInputValue(!Number.isNaN(alphaValue) ? alphaValue.toString() : \"\");\n  }, [alphaValue]);\n\n  const handleAlphaInputChange = (\n    event: ChangeEvent<HTMLInputElement>,\n    newValue: string,\n  ): void => {\n    const value = newValue.replace(\"%\", \"\");\n    let alpha: string = value;\n\n    if (value.trim() === \"\" || Number.isNaN(value)) {\n      alpha = \"\";\n    }\n\n    if (showAsOpacity && Number.parseFloat(value)) {\n      alpha = (Number.parseFloat(value) / 100).toString();\n    }\n\n    if (value.charAt(1) === \".\" || value.charAt(0) === \".\") {\n      alpha = value;\n    }\n\n    setAlphaInputValue(alpha);\n  };\n\n  const handleKeyDownAlpha = (e: KeyboardEvent<HTMLInputElement>): void => {\n    if (e.key === \"Enter\") {\n      const alpha =\n        alphaInputValue.trim().replace(\"%\", \"\") !== \"\"\n          ? Number.parseFloat(alphaInputValue)\n          : 0;\n      const validatedAlpha = Math.max(0, Math.min(alpha, 1));\n      setAlphaInputValue(validatedAlpha.toString());\n      onSubmit(validatedAlpha);\n    }\n  };\n\n  const handleOnBlurAlpha = (e: FocusEvent<HTMLInputElement>): void => {\n    // Guard against parseFloat('') becoming NaN\n    const alpha =\n      alphaInputValue.trim() !== \"\" ? Number.parseFloat(alphaInputValue) : 0;\n\n    const validatedAlpha = Math.max(0, Math.min(alpha, 1));\n    setAlphaInputValue(validatedAlpha.toString());\n    onSubmit(validatedAlpha, e);\n  };\n\n  return (\n    <Input\n      inputProps={{\n        // @ts-ignore\n        \"data-testid\": \"a-input\",\n      }}\n      className={clsx({\n        [withBaseName(\"rgbaInput\")]: !showAsOpacity,\n        [withBaseName(\"opacityInput\")]: showAsOpacity,\n      })}\n      value={\n        showAsOpacity\n          ? alphaInputValue\n            ? `${(Number.parseFloat(alphaInputValue) * 100).toString()}%`\n            : \"%\"\n          : alphaInputValue\n      }\n      onChange={handleAlphaInputChange}\n      onBlur={handleOnBlurAlpha}\n      onKeyDown={handleKeyDownAlpha}\n    />\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","rgbaInputCss","useState","useEffect","jsx","Input","clsx"],"mappings":"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"}

package/dist-cjs/color-chooser/ColorChooser.js

@@ -6,7 +6,7 @@ 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 colorUtils = require('./color-utils.js');
 var ColorHelpers = require('./ColorHelpers.js');
 var DictTabs = require('./DictTabs.js');
@@ -55,7 +55,7 @@ const ColorChooser = ({
     css: ColorChooser$1,
     window: targetWindow
   });
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = react.useState(false);
   const allColors = saltColorOverrides ? GetColorPalettes.getColorPalettes(saltColorOverrides) : GetColorPalettes.getColorPalettes();
   const displayColorName = displayHexOnly ? ColorHelpers.getHexValue(color == null ? void 0 : color.hex, disableAlphaChooser) : ColorHelpers.getColorNameByHexValue(
     color == null ? void 0 : color.hex,
@@ -78,7 +78,7 @@ const ColorChooser = ({
       setOpen(false);
     }
   });
-  const [activeTab, setActiveTab] = React.useState(
+  const [activeTab, setActiveTab] = react.useState(
     getActiveTab(color == null ? void 0 : color.hex, tabsMapping, saltColorOverrides)
   );
   const onDefaultSelected = () => {

package/dist-cjs/color-chooser/HexInput.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var clsx = require('clsx');
-var React = require('react');
+var react = require('react');
 var InputLegacy = require('../input-legacy/InputLegacy.js');
 require('../input-legacy/StaticInputAdornment.js');
 var ColorHelpers = require('./ColorHelpers.js');
@@ -26,10 +26,10 @@ const HexInput = ({
     css: HexInput$1,
     window: targetWindow
   });
-  const [hexInputValue, setHexInputValue] = React.useState(
+  const [hexInputValue, setHexInputValue] = react.useState(
     hexValue
   );
-  React.useEffect(() => {
+  react.useEffect(() => {
     setHexInputValue(hexValue);
   }, [hexValue]);
   const handleHexInputChange = (event, value) => {