@salt-ds/lab 1.0.0-alpha.0 → 1.0.0-alpha.1

package/dist-es/packages/lab/src/deck-item/DeckItem.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useRef, useMemo } from 'react';
 import { makePrefixer, useId, useForkRef } from '@salt-ds/core';
 import './DeckItem.css.js';
@@ -28,7 +28,7 @@ const DeckItem = forwardRef(
     ];
     const id = useId(idProp);
     return /* @__PURE__ */ jsx("div", {
-      className: cx(
+      className: clsx(
         withBaseName(),
         withBaseName(`${animation ? animation : "static"}-${position}`),
         {

package/dist-es/packages/lab/src/deck-item/DeckItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeckItem.js","sources":["../src/deck-item/DeckItem.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { forwardRef, HTMLAttributes, useMemo, useRef } from \"react\";\nimport { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { LayoutAnimation } from \"../deck-layout\";\nimport \"./DeckItem.css\";\n\nconst withBaseName = makePrefixer(\"saltDeckItem\");\n\nexport interface DeckItemProps extends HTMLAttributes<HTMLDivElement> {\n  activeIndex?: number;\n  animation?: LayoutAnimation;\n  index: number;\n  role?: string;\n}\n\nexport const DeckItem = forwardRef<HTMLDivElement, DeckItemProps>(\n  function DeckItem(\n    {\n      activeIndex = 0,\n      animation,\n      children,\n      className,\n      index,\n      role = \"group\",\n      id: idProp,\n      ...rest\n    },\n    ref\n  ) {\n    const sliderRef = useRef<HTMLDivElement | null>(null);\n\n    const isCurrent = activeIndex === index;\n\n    const position = useMemo(() => {\n      return isCurrent ? \"current\" : activeIndex < index ? \"next\" : \"previous\";\n    }, [activeIndex, index, isCurrent]);\n\n    const classesIndex = animation && position === \"current\" ? 0 : 1;\n\n    const getActiveClasses = [\n      `${animation || \"fade\"}-in`, // in-right\n      `${animation || \"fade\"}-out`, // out-left\n    ];\n\n    const id = useId(idProp);\n\n    return (\n      <div\n        className={cx(\n          withBaseName(),\n          withBaseName(`${animation ? animation : \"static\"}-${position}`),\n          {\n            [withBaseName(getActiveClasses[classesIndex])]:\n              animation === \"fade\",\n          },\n          className\n        )}\n        ref={useForkRef(ref, sliderRef)}\n        role={role}\n        tabIndex={isCurrent ? 0 : -1}\n        id={id}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["DeckItem"],"mappings":";;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AASzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SACP,CAAA;AAAA,IACE,WAAc,GAAA,CAAA;AAAA,IACd,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAO,GAAA,OAAA;AAAA,IACP,EAAI,EAAA,MAAA;AAAA,IACD,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,SAAA,GAAY,OAA8B,IAAI,CAAA,CAAA;AAEpD,IAAA,MAAM,YAAY,WAAgB,KAAA,KAAA,CAAA;AAElC,IAAM,MAAA,QAAA,GAAW,QAAQ,MAAM;AAC7B,MAAA,OAAO,SAAY,GAAA,SAAA,GAAY,WAAc,GAAA,KAAA,GAAQ,MAAS,GAAA,UAAA,CAAA;AAAA,KAC7D,EAAA,CAAC,WAAa,EAAA,KAAA,EAAO,SAAS,CAAC,CAAA,CAAA;AAElC,IAAA,MAAM,YAAe,GAAA,SAAA,IAAa,QAAa,KAAA,SAAA,GAAY,CAAI,GAAA,CAAA,CAAA;AAE/D,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,GAAG,SAAa,IAAA,MAAA,CAAA,GAAA,CAAA;AAAA,MAChB,GAAG,SAAa,IAAA,MAAA,CAAA,IAAA,CAAA;AAAA,KAClB,CAAA;AAEA,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,EAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,YAAa,CAAA,CAAA,EAAG,SAAY,GAAA,SAAA,GAAY,YAAY,QAAU,CAAA,CAAA,CAAA;AAAA,QAC9D;AAAA,UACE,CAAC,YAAA,CAAa,gBAAiB,CAAA,YAAA,CAAa,IAC1C,SAAc,KAAA,MAAA;AAAA,SAClB;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA,EAAK,UAAW,CAAA,GAAA,EAAK,SAAS,CAAA;AAAA,MAC9B,IAAA;AAAA,MACA,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,MAC1B,EAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"DeckItem.js","sources":["../src/deck-item/DeckItem.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useMemo, useRef } from \"react\";\nimport { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { LayoutAnimation } from \"../deck-layout\";\nimport \"./DeckItem.css\";\n\nconst withBaseName = makePrefixer(\"saltDeckItem\");\n\nexport interface DeckItemProps extends HTMLAttributes<HTMLDivElement> {\n  activeIndex?: number;\n  animation?: LayoutAnimation;\n  index: number;\n  role?: string;\n}\n\nexport const DeckItem = forwardRef<HTMLDivElement, DeckItemProps>(\n  function DeckItem(\n    {\n      activeIndex = 0,\n      animation,\n      children,\n      className,\n      index,\n      role = \"group\",\n      id: idProp,\n      ...rest\n    },\n    ref\n  ) {\n    const sliderRef = useRef<HTMLDivElement | null>(null);\n\n    const isCurrent = activeIndex === index;\n\n    const position = useMemo(() => {\n      return isCurrent ? \"current\" : activeIndex < index ? \"next\" : \"previous\";\n    }, [activeIndex, index, isCurrent]);\n\n    const classesIndex = animation && position === \"current\" ? 0 : 1;\n\n    const getActiveClasses = [\n      `${animation || \"fade\"}-in`, // in-right\n      `${animation || \"fade\"}-out`, // out-left\n    ];\n\n    const id = useId(idProp);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(`${animation ? animation : \"static\"}-${position}`),\n          {\n            [withBaseName(getActiveClasses[classesIndex])]:\n              animation === \"fade\",\n          },\n          className\n        )}\n        ref={useForkRef(ref, sliderRef)}\n        role={role}\n        tabIndex={isCurrent ? 0 : -1}\n        id={id}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["DeckItem"],"mappings":";;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AASzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SACP,CAAA;AAAA,IACE,WAAc,GAAA,CAAA;AAAA,IACd,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAO,GAAA,OAAA;AAAA,IACP,EAAI,EAAA,MAAA;AAAA,IACD,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,SAAA,GAAY,OAA8B,IAAI,CAAA,CAAA;AAEpD,IAAA,MAAM,YAAY,WAAgB,KAAA,KAAA,CAAA;AAElC,IAAM,MAAA,QAAA,GAAW,QAAQ,MAAM;AAC7B,MAAA,OAAO,SAAY,GAAA,SAAA,GAAY,WAAc,GAAA,KAAA,GAAQ,MAAS,GAAA,UAAA,CAAA;AAAA,KAC7D,EAAA,CAAC,WAAa,EAAA,KAAA,EAAO,SAAS,CAAC,CAAA,CAAA;AAElC,IAAA,MAAM,YAAe,GAAA,SAAA,IAAa,QAAa,KAAA,SAAA,GAAY,CAAI,GAAA,CAAA,CAAA;AAE/D,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,GAAG,SAAa,IAAA,MAAA,CAAA,GAAA,CAAA;AAAA,MAChB,GAAG,SAAa,IAAA,MAAA,CAAA,IAAA,CAAA;AAAA,KAClB,CAAA;AAEA,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,YAAa,CAAA,CAAA,EAAG,SAAY,GAAA,SAAA,GAAY,YAAY,QAAU,CAAA,CAAA,CAAA;AAAA,QAC9D;AAAA,UACE,CAAC,YAAA,CAAa,gBAAiB,CAAA,YAAA,CAAa,IAC1C,SAAc,KAAA,MAAA;AAAA,SAClB;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA,EAAK,UAAW,CAAA,GAAA,EAAK,SAAS,CAAA;AAAA,MAC9B,IAAA;AAAA,MACA,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,MAC1B,EAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/deck-layout/DeckLayout.js

@@ -5,7 +5,7 @@ import { DeckItem } from '../deck-item/DeckItem.js';
 import '../responsive/useResizeObserver.js';
 import { useWidth } from '../responsive/useWidth.js';
 import './DeckLayout.css.js';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 
 const withBaseName = makePrefixer("saltDeckLayout");
 const DeckLayout = forwardRef(
@@ -51,12 +51,12 @@ const DeckLayout = forwardRef(
       "--deckLayout-transform-value": `-${activeIndex * 100}%`
     };
     return /* @__PURE__ */ jsx("div", {
-      className: cx(withBaseName(), className),
+      className: clsx(withBaseName(), className),
       style: deckLayoutStyles,
       ref,
       ...rest,
       children: /* @__PURE__ */ jsx("div", {
-        className: cx(
+        className: clsx(
           {
             [withBaseName("animate")]: animation
           },

package/dist-es/packages/lab/src/deck-layout/DeckLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeckLayout.js","sources":["../src/deck-layout/DeckLayout.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  HTMLAttributes,\n  useState,\n  useCallback,\n  CSSProperties,\n} from \"react\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { DeckItem, DeckItemProps } from \"../deck-item\";\nimport { useWidth } from \"../responsive\";\nimport \"./DeckLayout.css\";\n\nimport cx from \"classnames\";\n\nexport type LayoutAnimation = \"slide\" | \"fade\";\nexport type LayoutAnimationDirection = \"horizontal\" | \"vertical\";\nexport type LayoutAnimationTransition = \"increase\" | \"decrease\";\n\nexport interface DeckLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The initial item to render.\n   **/\n  activeIndex?: number;\n  /**\n   * The animation when the slides are shown.\n   **/\n  animation?: LayoutAnimation;\n  /**\n   * The direction in which items will transition.\n   **/\n  direction?: LayoutAnimationDirection;\n  /**\n   * Props to be passed to the DeckItem component.\n   */\n  deckItemProps?: Partial<DeckItemProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltDeckLayout\");\n\nexport const DeckLayout = forwardRef<HTMLDivElement, DeckLayoutProps>(\n  function DeckLayout(\n    {\n      activeIndex = 0,\n      animation,\n      className,\n      children,\n      direction = \"horizontal\",\n      style,\n      deckItemProps,\n      ...rest\n    },\n    ref\n  ) {\n    const [deckItemRef, deckItemWidth] = useWidth<HTMLDivElement>(true);\n\n    const [deckItemHeight, setDeckItemHeight] = useState<number>(0);\n\n    const handleResize = useCallback(function handleResize(\n      contentRect: DOMRect\n    ) {\n      setDeckItemHeight(contentRect.height);\n    },\n    []);\n\n    useIsomorphicLayoutEffect(() => {\n      if (!deckItemRef.current) {\n        return undefined;\n      }\n\n      handleResize(deckItemRef.current.getBoundingClientRect());\n\n      const observer = new ResizeObserver(\n        ([{ contentRect }]: ResizeObserverEntry[]) => {\n          handleResize(contentRect);\n        }\n      );\n      observer.observe(deckItemRef.current);\n\n      return () => {\n        observer.disconnect();\n      };\n    }, [deckItemRef, handleResize]);\n\n    const deckLayoutStyles = {\n      ...style,\n      \"--deckLayout-width\": `${deckItemWidth}px`,\n      \"--deckLayout-height\": `${deckItemHeight}px`,\n    };\n\n    const innerStyles = {\n      \"--deckLayout-transform-value\": `-${activeIndex * 100}%`,\n    } as CSSProperties;\n\n    return (\n      <div\n        className={cx(withBaseName(), className)}\n        style={deckLayoutStyles}\n        ref={ref}\n        {...rest}\n      >\n        <div\n          className={cx(\n            {\n              [withBaseName(\"animate\")]: animation,\n            },\n            {\n              [withBaseName(`${animation || \"slide\"}-${direction}`)]: animation,\n            }\n          )}\n          style={innerStyles}\n        >\n          {Children.map(children, (child, index) => {\n            return (\n              <DeckItem\n                ref={deckItemRef}\n                index={index}\n                activeIndex={activeIndex}\n                animation={animation}\n                {...deckItemProps}\n              >\n                {child}\n              </DeckItem>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["DeckLayout","handleResize"],"mappings":"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"}
+{"version":3,"file":"DeckLayout.js","sources":["../src/deck-layout/DeckLayout.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  HTMLAttributes,\n  useState,\n  useCallback,\n  CSSProperties,\n} from \"react\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { DeckItem, DeckItemProps } from \"../deck-item\";\nimport { useWidth } from \"../responsive\";\nimport \"./DeckLayout.css\";\n\nimport { clsx } from \"clsx\";\n\nexport type LayoutAnimation = \"slide\" | \"fade\";\nexport type LayoutAnimationDirection = \"horizontal\" | \"vertical\";\nexport type LayoutAnimationTransition = \"increase\" | \"decrease\";\n\nexport interface DeckLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The initial item to render.\n   **/\n  activeIndex?: number;\n  /**\n   * The animation when the slides are shown.\n   **/\n  animation?: LayoutAnimation;\n  /**\n   * The direction in which items will transition.\n   **/\n  direction?: LayoutAnimationDirection;\n  /**\n   * Props to be passed to the DeckItem component.\n   */\n  deckItemProps?: Partial<DeckItemProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltDeckLayout\");\n\nexport const DeckLayout = forwardRef<HTMLDivElement, DeckLayoutProps>(\n  function DeckLayout(\n    {\n      activeIndex = 0,\n      animation,\n      className,\n      children,\n      direction = \"horizontal\",\n      style,\n      deckItemProps,\n      ...rest\n    },\n    ref\n  ) {\n    const [deckItemRef, deckItemWidth] = useWidth<HTMLDivElement>(true);\n\n    const [deckItemHeight, setDeckItemHeight] = useState<number>(0);\n\n    const handleResize = useCallback(function handleResize(\n      contentRect: DOMRect\n    ) {\n      setDeckItemHeight(contentRect.height);\n    },\n    []);\n\n    useIsomorphicLayoutEffect(() => {\n      if (!deckItemRef.current) {\n        return undefined;\n      }\n\n      handleResize(deckItemRef.current.getBoundingClientRect());\n\n      const observer = new ResizeObserver(\n        ([{ contentRect }]: ResizeObserverEntry[]) => {\n          handleResize(contentRect);\n        }\n      );\n      observer.observe(deckItemRef.current);\n\n      return () => {\n        observer.disconnect();\n      };\n    }, [deckItemRef, handleResize]);\n\n    const deckLayoutStyles = {\n      ...style,\n      \"--deckLayout-width\": `${deckItemWidth}px`,\n      \"--deckLayout-height\": `${deckItemHeight}px`,\n    };\n\n    const innerStyles = {\n      \"--deckLayout-transform-value\": `-${activeIndex * 100}%`,\n    } as CSSProperties;\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        style={deckLayoutStyles}\n        ref={ref}\n        {...rest}\n      >\n        <div\n          className={clsx(\n            {\n              [withBaseName(\"animate\")]: animation,\n            },\n            {\n              [withBaseName(`${animation || \"slide\"}-${direction}`)]: animation,\n            }\n          )}\n          style={innerStyles}\n        >\n          {Children.map(children, (child, index) => {\n            return (\n              <DeckItem\n                ref={deckItemRef}\n                index={index}\n                activeIndex={activeIndex}\n                animation={animation}\n                {...deckItemProps}\n              >\n                {child}\n              </DeckItem>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["DeckLayout","handleResize"],"mappings":"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"}

package/dist-es/packages/lab/src/dialog/Dialog.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { makePrefixer, useId } from '@salt-ds/core';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useState, useEffect, useCallback, useRef } from 'react';
 import { DialogContext } from './internal/DialogContext.js';
 import { Scrim } from '../scrim/Scrim.js';
@@ -65,7 +65,7 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
           id,
           children: /* @__PURE__ */ jsx("div", {
             ...rest,
-            className: cx(withBaseName(), className, {
+            className: clsx(withBaseName(), className, {
               [withBaseName("infoShadow")]: status === "info"
             }),
             style: { width },

package/dist-es/packages/lab/src/dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import { makePrefixer, useId, ValidationStatus } from \"@salt-ds/core\";\nimport classnames from \"classnames\";\nimport {\n  forwardRef,\n  HTMLAttributes,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { DialogContext } from \"./internal/DialogContext\";\nimport { Scrim, ScrimProps } from \"../scrim\";\nimport { useWindow } from \"../window\";\nimport { Portal } from \"../portal\";\n\nimport \"./Dialog.css\";\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n  autoFocusRef?: ScrimProps[\"autoFocusRef\"];\n  height?: string | number;\n  onClose?: () => void;\n  open?: boolean;\n  status?: ValidationStatus;\n  width?: string | number;\n  enableBackdropClick?: boolean;\n  disablePortal?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\n/**\n * The Dialog is a window that contains text and interactive components.\n * By default, Dialog is non-modal, but supports modal behaviour as well.\n */\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n  props,\n  ref\n) {\n  const {\n    autoFocusRef,\n    children,\n    className,\n    height,\n    id,\n    onClose,\n    open: openProp,\n    status,\n    width,\n    enableBackdropClick,\n    disablePortal,\n    ...rest\n  } = props;\n\n  const Window = useWindow();\n  const [open, setOpen] = useState(openProp);\n\n  useEffect(() => {\n    setOpen(openProp);\n  }, [openProp]);\n\n  const dialogId = useId();\n\n  const handleClose = useCallback(() => {\n    onClose?.();\n    setOpen(false);\n  }, [onClose, setOpen]);\n\n  const handleBackdropClick = useCallback(() => {\n    if (enableBackdropClick) {\n      handleClose();\n    }\n  }, [enableBackdropClick, handleClose]);\n\n  const contentElementRef = useRef<HTMLDivElement | null>(null);\n\n  const setContentElement = useCallback((node: HTMLDivElement) => {\n    contentElementRef.current = node;\n  }, []);\n\n  if (!open) {\n    return null;\n  }\n\n  return (\n    <DialogContext.Provider value={{ status, dialogId, setContentElement }}>\n      <Portal disablePortal={disablePortal}>\n        <Scrim\n          autoFocusRef={autoFocusRef}\n          fallbackFocusRef={contentElementRef}\n          open={open}\n          closeWithEscape\n          onBackDropClick={handleBackdropClick}\n          onClose={handleClose}\n          aria-labelledby={`${dialogId}-heading`}\n          aria-describedby={`${dialogId}-body`}\n        >\n          <Window id={id}>\n            <div\n              {...rest}\n              className={classnames(withBaseName(), className, {\n                [withBaseName(\"infoShadow\")]: status === \"info\",\n              })}\n              style={{ width }}\n              ref={ref}\n            >\n              {children}\n            </div>\n          </Window>\n        </Scrim>\n      </Portal>\n    </DialogContext.Provider>\n  );\n});\n"],"names":["Dialog","classnames"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import { makePrefixer, useId, ValidationStatus } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  HTMLAttributes,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { DialogContext } from \"./internal/DialogContext\";\nimport { Scrim, ScrimProps } from \"../scrim\";\nimport { useWindow } from \"../window\";\nimport { Portal } from \"../portal\";\n\nimport \"./Dialog.css\";\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n  autoFocusRef?: ScrimProps[\"autoFocusRef\"];\n  height?: string | number;\n  onClose?: () => void;\n  open?: boolean;\n  status?: ValidationStatus;\n  width?: string | number;\n  enableBackdropClick?: boolean;\n  disablePortal?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\n/**\n * The Dialog is a window that contains text and interactive components.\n * By default, Dialog is non-modal, but supports modal behaviour as well.\n */\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n  props,\n  ref\n) {\n  const {\n    autoFocusRef,\n    children,\n    className,\n    height,\n    id,\n    onClose,\n    open: openProp,\n    status,\n    width,\n    enableBackdropClick,\n    disablePortal,\n    ...rest\n  } = props;\n\n  const Window = useWindow();\n  const [open, setOpen] = useState(openProp);\n\n  useEffect(() => {\n    setOpen(openProp);\n  }, [openProp]);\n\n  const dialogId = useId();\n\n  const handleClose = useCallback(() => {\n    onClose?.();\n    setOpen(false);\n  }, [onClose, setOpen]);\n\n  const handleBackdropClick = useCallback(() => {\n    if (enableBackdropClick) {\n      handleClose();\n    }\n  }, [enableBackdropClick, handleClose]);\n\n  const contentElementRef = useRef<HTMLDivElement | null>(null);\n\n  const setContentElement = useCallback((node: HTMLDivElement) => {\n    contentElementRef.current = node;\n  }, []);\n\n  if (!open) {\n    return null;\n  }\n\n  return (\n    <DialogContext.Provider value={{ status, dialogId, setContentElement }}>\n      <Portal disablePortal={disablePortal}>\n        <Scrim\n          autoFocusRef={autoFocusRef}\n          fallbackFocusRef={contentElementRef}\n          open={open}\n          closeWithEscape\n          onBackDropClick={handleBackdropClick}\n          onClose={handleClose}\n          aria-labelledby={`${dialogId}-heading`}\n          aria-describedby={`${dialogId}-body`}\n        >\n          <Window id={id}>\n            <div\n              {...rest}\n              className={clsx(withBaseName(), className, {\n                [withBaseName(\"infoShadow\")]: status === \"info\",\n              })}\n              style={{ width }}\n              ref={ref}\n            >\n              {children}\n            </div>\n          </Window>\n        </Scrim>\n      </Portal>\n    </DialogContext.Provider>\n  );\n});\n"],"names":["Dialog"],"mappings":"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"}

package/dist-es/packages/lab/src/dialog/DialogActions.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
 import './DialogActions.css.js';
 
@@ -10,7 +10,7 @@ const DialogActions = forwardRef(
     const { className, children, ...rest } = props;
     return /* @__PURE__ */ jsx("div", {
       ...rest,
-      className: cx(withBaseName(), className),
+      className: clsx(withBaseName(), className),
       ref,
       children
     });

package/dist-es/packages/lab/src/dialog/DialogActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogActions.js","sources":["../src/dialog/DialogActions.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport classnames from \"classnames\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport \"./DialogActions.css\";\n\nexport interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {}\n\nconst withBaseName = makePrefixer(\"saltDialogActions\");\n\nexport const DialogActions = forwardRef<HTMLDivElement, DialogActionsProps>(\n  function DialogActions(props, ref) {\n    const { className, children, ...rest } = props;\n\n    return (\n      <div\n        {...rest}\n        className={classnames(withBaseName(), className)}\n        ref={ref}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["DialogActions","classnames"],"mappings":";;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,SAAA,EAAW,QAAa,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAW,EAAAC,EAAA,CAAW,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAC/C,GAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"DialogActions.js","sources":["../src/dialog/DialogActions.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport \"./DialogActions.css\";\n\nexport interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {}\n\nconst withBaseName = makePrefixer(\"saltDialogActions\");\n\nexport const DialogActions = forwardRef<HTMLDivElement, DialogActionsProps>(\n  function DialogActions(props, ref) {\n    const { className, children, ...rest } = props;\n\n    return (\n      <div {...rest} className={clsx(withBaseName(), className)} ref={ref}>\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["DialogActions"],"mappings":";;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,SAAA,EAAW,QAAa,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAK,GAAG,IAAA;AAAA,MAAM,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MACxD,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/dialog/DialogContent.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { makePrefixer, useForkRef } from '@salt-ds/core';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useContext } from 'react';
 import { DialogContext } from './internal/DialogContext.js';
 import './DialogContent.css.js';
@@ -13,7 +13,7 @@ const DialogContent = forwardRef(
     const handleRef = useForkRef(ref, setContentElement);
     return /* @__PURE__ */ jsx("div", {
       ...rest,
-      className: cx(
+      className: clsx(
         withBaseName(),
         className,
         {

package/dist-es/packages/lab/src/dialog/DialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport classnames from \"classnames\";\nimport { forwardRef, HTMLAttributes, useContext } from \"react\";\nimport { DialogContext } from \"./internal/DialogContext\";\n\nimport \"./DialogContent.css\";\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {}\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n  function DialogContent(props, ref) {\n    const { children, className, ...rest } = props;\n    const { status, dialogId, setContentElement } = useContext(DialogContext);\n\n    const handleRef = useForkRef(ref, setContentElement);\n\n    return (\n      <div\n        {...rest}\n        className={classnames(\n          withBaseName(),\n          className,\n          {\n            [withBaseName(\"leftGutter\")]: !!status,\n          },\n          className\n        )}\n        id={`${dialogId}-body`}\n        ref={handleRef}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["DialogContent","classnames"],"mappings":";;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,IAAA,MAAM,EAAE,MAAQ,EAAA,QAAA,EAAU,iBAAkB,EAAA,GAAI,WAAW,aAAa,CAAA,CAAA;AAExE,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,GAAA,EAAK,iBAAiB,CAAA,CAAA;AAEnD,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAW,EAAAC,EAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,SAAA;AAAA,QACA;AAAA,UACE,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,CAAC,CAAC,MAAA;AAAA,SAClC;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAI,CAAG,EAAA,QAAA,CAAA,KAAA,CAAA;AAAA,MACP,GAAK,EAAA,SAAA;AAAA,MAEJ,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useContext } from \"react\";\nimport { DialogContext } from \"./internal/DialogContext\";\n\nimport \"./DialogContent.css\";\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {}\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n  function DialogContent(props, ref) {\n    const { children, className, ...rest } = props;\n    const { status, dialogId, setContentElement } = useContext(DialogContext);\n\n    const handleRef = useForkRef(ref, setContentElement);\n\n    return (\n      <div\n        {...rest}\n        className={clsx(\n          withBaseName(),\n          className,\n          {\n            [withBaseName(\"leftGutter\")]: !!status,\n          },\n          className\n        )}\n        id={`${dialogId}-body`}\n        ref={handleRef}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["DialogContent"],"mappings":";;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,IAAA,MAAM,EAAE,MAAQ,EAAA,QAAA,EAAU,iBAAkB,EAAA,GAAI,WAAW,aAAa,CAAA,CAAA;AAExE,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,GAAA,EAAK,iBAAiB,CAAA,CAAA;AAEnD,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,SAAA;AAAA,QACA;AAAA,UACE,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,CAAC,CAAC,MAAA;AAAA,SAClC;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAI,CAAG,EAAA,QAAA,CAAA,KAAA,CAAA;AAAA,MACP,GAAK,EAAA,SAAA;AAAA,MAEJ,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/dialog/DialogTitle.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makePrefixer, Button, StatusIndicator } from '@salt-ds/core';
 import { CloseIcon } from '@salt-ds/icons';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useContext } from 'react';
 import { DialogContext } from './internal/DialogContext.js';
 import './DialogTitle.css.js';
@@ -12,7 +12,7 @@ const DialogTitle = forwardRef(
     const { children, className, onClose, ...rest } = props;
     const { status, dialogId } = useContext(DialogContext);
     return /* @__PURE__ */ jsxs("div", {
-      className: cx(withBaseName(), className),
+      className: clsx(withBaseName(), className),
       ref,
       ...rest,
       children: [

package/dist-es/packages/lab/src/dialog/DialogTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogTitle.js","sources":["../src/dialog/DialogTitle.tsx"],"sourcesContent":["import { Button, makePrefixer, StatusIndicator } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport classnames from \"classnames\";\nimport { forwardRef, HTMLAttributes, SyntheticEvent, useContext } from \"react\";\nimport { DialogContext } from \"./internal/DialogContext\";\n\nimport \"./DialogTitle.css\";\nexport interface DialogTitleProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Disable the built-in ARIA heading attributes.\n   */\n  disableAria?: boolean;\n  onClose?: (event: SyntheticEvent) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltDialogTitle\");\n\nexport const DialogTitle = forwardRef<HTMLDivElement, DialogTitleProps>(\n  function DialogTitle(props, ref) {\n    const { children, className, onClose, ...rest } = props;\n    const { status, dialogId } = useContext(DialogContext);\n\n    return (\n      <div\n        className={classnames(withBaseName(), className)}\n        ref={ref}\n        {...rest}\n      >\n        {onClose && (\n          <Button\n            className={withBaseName(\"close\")}\n            onClick={onClose}\n            variant=\"secondary\"\n          >\n            <CloseIcon\n              aria-label=\"close dialog\"\n              className={withBaseName(\"closeIcon\")}\n            />\n          </Button>\n        )}\n        {status && (\n          <StatusIndicator\n            className={withBaseName(\"statusIndicator\")}\n            status={status}\n          />\n        )}\n        <span aria-level={1} id={`${dialogId}-heading`} role=\"heading\">\n          {children}\n        </span>\n      </div>\n    );\n  }\n);\n"],"names":["DialogTitle","classnames"],"mappings":";;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAE5C,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,OAAA,EAAA,GAAY,MAAS,GAAA,KAAA,CAAA;AAClD,IAAA,MAAM,EAAE,MAAA,EAAQ,QAAS,EAAA,GAAI,WAAW,aAAa,CAAA,CAAA;AAErD,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAC,EAAA,CAAW,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAC/C,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,OAAA,oBACE,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,OAAS,EAAA,OAAA;AAAA,UACT,OAAQ,EAAA,WAAA;AAAA,UAER,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,YACC,YAAW,EAAA,cAAA;AAAA,YACX,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,WACrC,CAAA;AAAA,SACF,CAAA;AAAA,QAED,0BACE,GAAA,CAAA,eAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,UACzC,MAAA;AAAA,SACF,CAAA;AAAA,wBAED,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,YAAY,EAAA,CAAA;AAAA,UAAG,IAAI,CAAG,EAAA,QAAA,CAAA,QAAA,CAAA;AAAA,UAAoB,IAAK,EAAA,SAAA;AAAA,UAClD,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"DialogTitle.js","sources":["../src/dialog/DialogTitle.tsx"],"sourcesContent":["import { Button, makePrefixer, StatusIndicator } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, SyntheticEvent, useContext } from \"react\";\nimport { DialogContext } from \"./internal/DialogContext\";\n\nimport \"./DialogTitle.css\";\nexport interface DialogTitleProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Disable the built-in ARIA heading attributes.\n   */\n  disableAria?: boolean;\n  onClose?: (event: SyntheticEvent) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltDialogTitle\");\n\nexport const DialogTitle = forwardRef<HTMLDivElement, DialogTitleProps>(\n  function DialogTitle(props, ref) {\n    const { children, className, onClose, ...rest } = props;\n    const { status, dialogId } = useContext(DialogContext);\n\n    return (\n      <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n        {onClose && (\n          <Button\n            className={withBaseName(\"close\")}\n            onClick={onClose}\n            variant=\"secondary\"\n          >\n            <CloseIcon\n              aria-label=\"close dialog\"\n              className={withBaseName(\"closeIcon\")}\n            />\n          </Button>\n        )}\n        {status && (\n          <StatusIndicator\n            className={withBaseName(\"statusIndicator\")}\n            status={status}\n          />\n        )}\n        <span aria-level={1} id={`${dialogId}-heading`} role=\"heading\">\n          {children}\n        </span>\n      </div>\n    );\n  }\n);\n"],"names":["DialogTitle"],"mappings":";;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAE5C,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,OAAA,EAAA,GAAY,MAAS,GAAA,KAAA,CAAA;AAClD,IAAA,MAAM,EAAE,MAAA,EAAQ,QAAS,EAAA,GAAI,WAAW,aAAa,CAAA,CAAA;AAErD,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,MAC5D,QAAA,EAAA;AAAA,QAAA,OAAA,oBACE,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,OAAS,EAAA,OAAA;AAAA,UACT,OAAQ,EAAA,WAAA;AAAA,UAER,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,YACC,YAAW,EAAA,cAAA;AAAA,YACX,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,WACrC,CAAA;AAAA,SACF,CAAA;AAAA,QAED,0BACE,GAAA,CAAA,eAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,UACzC,MAAA;AAAA,SACF,CAAA;AAAA,wBAED,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,YAAY,EAAA,CAAA;AAAA,UAAG,IAAI,CAAG,EAAA,QAAA,CAAA,QAAA,CAAA;AAAA,UAAoB,IAAK,EAAA,SAAA;AAAA,UAClD,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/dropdown/DropdownBase.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { flip, shift, limitShift, size } from '@floating-ui/react-dom-interactions';
 import { makePrefixer, useIdMemo, useForkRef } from '@salt-ds/core';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useRef, Children, useState, cloneElement } from 'react';
 import { forwardCallbackProps } from '../utils/forwardCallbackProps.js';
 import { useDropdownBase } from './useDropdownBase.js';
@@ -33,7 +33,7 @@ const DropdownBase = forwardRef(
     ...htmlAttributes
   }, forwardedRef) {
     const rootRef = useRef(null);
-    const className = cx(withBaseName(), classNameProp, {
+    const className = clsx(withBaseName(), classNameProp, {
       [withBaseName("fullWidth")]: fullWidth,
       [withBaseName("disabled")]: disabled
     });
@@ -114,7 +114,7 @@ const DropdownBase = forwardRef(
       return cloneElement(popupComponent, {
         ...ownProps,
         ...restComponentProps,
-        className: cx(className2, withBaseName("popup-component")),
+        className: clsx(className2, withBaseName("popup-component")),
         id: id2,
         width: ownWidth != null ? ownWidth : width2
       });
@@ -131,7 +131,7 @@ const DropdownBase = forwardRef(
           disablePortal,
           container,
           children: /* @__PURE__ */ jsx(Window, {
-            className: cx(withBaseName("popup"), classNameProp),
+            className: clsx(withBaseName("popup"), classNameProp),
             id: `${id}-popup`,
             style: {
               top: y != null ? y : "",

package/dist-es/packages/lab/src/dropdown/DropdownBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownBase.js","sources":["../src/dropdown/DropdownBase.tsx"],"sourcesContent":["import {\n  flip,\n  limitShift,\n  shift,\n  size,\n} from \"@floating-ui/react-dom-interactions\";\nimport { makePrefixer, useForkRef, useIdMemo as useId } from \"@salt-ds/core\";\nimport cx from \"classnames\";\nimport { Children, cloneElement, forwardRef, useRef, useState } from \"react\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdownBase } from \"./useDropdownBase\";\nimport { useFloatingUI } from \"../popper\";\nimport { Portal } from \"../portal\";\nimport { isDesktop, useWindow } from \"../window\";\n\nimport \"./Dropdown.css\";\n\n// Any component may be passed as our trigger or popup component.\n// Define the common props that we will act on, if present,\n// so we can type them.\nexport type MaybeChildProps = {\n  className?: string;\n  id?: string;\n  role?: string;\n  width: number | string;\n};\n\nconst withBaseName = makePrefixer(\"saltDropdown\");\n\nexport const DropdownBase = forwardRef<HTMLDivElement, DropdownBaseProps>(\n  function Dropdown(\n    {\n      \"aria-labelledby\": ariaLabelledByProp,\n      children,\n      className: classNameProp,\n      container,\n      defaultIsOpen,\n      disabled,\n      disablePortal,\n      fullWidth,\n      id: idProp,\n      isOpen: isOpenProp,\n      onKeyDown,\n      onOpenChange,\n      openOnFocus,\n      placement = \"bottom-start\",\n      popupWidth,\n      width,\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const rootRef = useRef<HTMLDivElement>(null);\n    const className = cx(withBaseName(), classNameProp, {\n      [withBaseName(\"fullWidth\")]: fullWidth,\n      [withBaseName(\"disabled\")]: disabled,\n    });\n    const [trigger, popupComponent] = Children.toArray(\n      children\n    ) as JSX.Element[];\n    const id = useId(idProp);\n    const Window = useWindow();\n\n    const { componentProps, popperRef, isOpen, triggerProps } = useDropdownBase(\n      {\n        ariaLabelledBy: ariaLabelledByProp,\n        defaultIsOpen,\n        disabled,\n        fullWidth,\n        id,\n        isOpen: isOpenProp,\n        onOpenChange,\n        onKeyDown,\n        openOnFocus,\n        popupComponent,\n        popupWidth,\n        rootRef,\n        width,\n      }\n    );\n    const [maxPopupHeight, setMaxPopupHeight] = useState<number | undefined>(\n      undefined\n    );\n\n    const middleware = isDesktop\n      ? []\n      : [\n          flip({\n            fallbackPlacements: [\"bottom-start\", \"top-start\"],\n          }),\n          shift({ limiter: limitShift() }),\n          size({\n            apply({ availableHeight }) {\n              setMaxPopupHeight(availableHeight);\n            },\n          }),\n        ];\n\n    const { reference, floating, x, y, strategy } = useFloatingUI({\n      placement,\n      middleware,\n    });\n\n    const handlePopperListAdapterRef = useForkRef<HTMLDivElement>(\n      reference,\n      forwardedRef\n    );\n    const handleRootRef = useForkRef(rootRef, handlePopperListAdapterRef);\n    const handleFloatingRef = useForkRef<HTMLDivElement>(floating, popperRef);\n    // TODO maybe we should pass style, with maxHeight, to the popupComponent\n\n    const getTriggerComponent = () => {\n      const {\n        id: defaultId,\n        role: defaultRole,\n        ...restTriggerProps\n      } = triggerProps;\n\n      const {\n        id = defaultId,\n        role = defaultRole,\n        ...ownProps\n      } = trigger.props as MaybeChildProps;\n\n      return cloneElement(\n        trigger,\n        forwardCallbackProps(ownProps, {\n          ...restTriggerProps,\n          id,\n          role,\n        })\n      );\n    };\n\n    const getPopupComponent = () => {\n      const { id: defaultId, width, ...restComponentProps } = componentProps;\n      const {\n        className,\n        id = defaultId,\n        width: ownWidth,\n        ...ownProps\n      } = popupComponent.props as MaybeChildProps;\n      return cloneElement(popupComponent, {\n        ...ownProps,\n        ...restComponentProps,\n        className: cx(className, withBaseName(\"popup-component\")),\n        id,\n        width: ownWidth ?? width,\n      });\n    };\n\n    return (\n      <div\n        {...htmlAttributes}\n        className={className}\n        data-testid=\"dropdown\"\n        id={idProp}\n        ref={handleRootRef}\n      >\n        {getTriggerComponent()}\n        {isOpen && (\n          <Portal disablePortal={disablePortal} container={container}>\n            <Window\n              className={cx(withBaseName(\"popup\"), classNameProp)}\n              id={`${id}-popup`}\n              style={{\n                top: y ?? \"\",\n                left: x ?? \"\",\n                position: strategy,\n                maxHeight: maxPopupHeight ?? undefined,\n              }}\n              ref={handleFloatingRef}\n            >\n              {getPopupComponent()}\n            </Window>\n          </Portal>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["useId","id","width","className"],"mappings":"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"}
+{"version":3,"file":"DropdownBase.js","sources":["../src/dropdown/DropdownBase.tsx"],"sourcesContent":["import {\n  flip,\n  limitShift,\n  shift,\n  size,\n} from \"@floating-ui/react-dom-interactions\";\nimport { makePrefixer, useForkRef, useIdMemo as useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { Children, cloneElement, forwardRef, useRef, useState } from \"react\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdownBase } from \"./useDropdownBase\";\nimport { useFloatingUI } from \"../popper\";\nimport { Portal } from \"../portal\";\nimport { isDesktop, useWindow } from \"../window\";\n\nimport \"./Dropdown.css\";\n\n// Any component may be passed as our trigger or popup component.\n// Define the common props that we will act on, if present,\n// so we can type them.\nexport type MaybeChildProps = {\n  className?: string;\n  id?: string;\n  role?: string;\n  width: number | string;\n};\n\nconst withBaseName = makePrefixer(\"saltDropdown\");\n\nexport const DropdownBase = forwardRef<HTMLDivElement, DropdownBaseProps>(\n  function Dropdown(\n    {\n      \"aria-labelledby\": ariaLabelledByProp,\n      children,\n      className: classNameProp,\n      container,\n      defaultIsOpen,\n      disabled,\n      disablePortal,\n      fullWidth,\n      id: idProp,\n      isOpen: isOpenProp,\n      onKeyDown,\n      onOpenChange,\n      openOnFocus,\n      placement = \"bottom-start\",\n      popupWidth,\n      width,\n      ...htmlAttributes\n    },\n    forwardedRef\n  ) {\n    const rootRef = useRef<HTMLDivElement>(null);\n    const className = clsx(withBaseName(), classNameProp, {\n      [withBaseName(\"fullWidth\")]: fullWidth,\n      [withBaseName(\"disabled\")]: disabled,\n    });\n    const [trigger, popupComponent] = Children.toArray(\n      children\n    ) as JSX.Element[];\n    const id = useId(idProp);\n    const Window = useWindow();\n\n    const { componentProps, popperRef, isOpen, triggerProps } = useDropdownBase(\n      {\n        ariaLabelledBy: ariaLabelledByProp,\n        defaultIsOpen,\n        disabled,\n        fullWidth,\n        id,\n        isOpen: isOpenProp,\n        onOpenChange,\n        onKeyDown,\n        openOnFocus,\n        popupComponent,\n        popupWidth,\n        rootRef,\n        width,\n      }\n    );\n    const [maxPopupHeight, setMaxPopupHeight] = useState<number | undefined>(\n      undefined\n    );\n\n    const middleware = isDesktop\n      ? []\n      : [\n          flip({\n            fallbackPlacements: [\"bottom-start\", \"top-start\"],\n          }),\n          shift({ limiter: limitShift() }),\n          size({\n            apply({ availableHeight }) {\n              setMaxPopupHeight(availableHeight);\n            },\n          }),\n        ];\n\n    const { reference, floating, x, y, strategy } = useFloatingUI({\n      placement,\n      middleware,\n    });\n\n    const handlePopperListAdapterRef = useForkRef<HTMLDivElement>(\n      reference,\n      forwardedRef\n    );\n    const handleRootRef = useForkRef(rootRef, handlePopperListAdapterRef);\n    const handleFloatingRef = useForkRef<HTMLDivElement>(floating, popperRef);\n    // TODO maybe we should pass style, with maxHeight, to the popupComponent\n\n    const getTriggerComponent = () => {\n      const {\n        id: defaultId,\n        role: defaultRole,\n        ...restTriggerProps\n      } = triggerProps;\n\n      const {\n        id = defaultId,\n        role = defaultRole,\n        ...ownProps\n      } = trigger.props as MaybeChildProps;\n\n      return cloneElement(\n        trigger,\n        forwardCallbackProps(ownProps, {\n          ...restTriggerProps,\n          id,\n          role,\n        })\n      );\n    };\n\n    const getPopupComponent = () => {\n      const { id: defaultId, width, ...restComponentProps } = componentProps;\n      const {\n        className,\n        id = defaultId,\n        width: ownWidth,\n        ...ownProps\n      } = popupComponent.props as MaybeChildProps;\n      return cloneElement(popupComponent, {\n        ...ownProps,\n        ...restComponentProps,\n        className: clsx(className, withBaseName(\"popup-component\")),\n        id,\n        width: ownWidth ?? width,\n      });\n    };\n\n    return (\n      <div\n        {...htmlAttributes}\n        className={className}\n        data-testid=\"dropdown\"\n        id={idProp}\n        ref={handleRootRef}\n      >\n        {getTriggerComponent()}\n        {isOpen && (\n          <Portal disablePortal={disablePortal} container={container}>\n            <Window\n              className={clsx(withBaseName(\"popup\"), classNameProp)}\n              id={`${id}-popup`}\n              style={{\n                top: y ?? \"\",\n                left: x ?? \"\",\n                position: strategy,\n                maxHeight: maxPopupHeight ?? undefined,\n              }}\n              ref={handleFloatingRef}\n            >\n              {getPopupComponent()}\n            </Window>\n          </Portal>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["useId","id","width","className"],"mappings":"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"}

package/dist-es/packages/lab/src/dropdown/DropdownButton.js

@@ -3,7 +3,7 @@ import { makePrefixer, Button } from '@salt-ds/core';
 import { ChevronDownIcon, DEFAULT_ICON_SIZE } from '@salt-ds/icons';
 import '../form-field-context/FormFieldContext.js';
 import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import './DropdownButton.css.js';
 
@@ -25,7 +25,7 @@ const DropdownButton = forwardRef(function DropdownButton2({
 }, ref) {
   const { inFormField } = useFormFieldProps();
   return /* @__PURE__ */ jsx(Button, {
-    className: cx(
+    className: clsx(
       withBaseName(),
       {
         [withBaseName("fullwidth")]: fullWidth,

package/dist-es/packages/lab/src/dropdown/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.js","sources":["../src/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { ChevronDownIcon, IconProps, DEFAULT_ICON_SIZE } from \"@salt-ds/icons\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport classnames from \"classnames\";\nimport { AriaAttributes, ComponentType, ForwardedRef, forwardRef } from \"react\";\n\nimport \"./DropdownButton.css\";\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Replace the default Icon component\n   */\n  IconComponent?: ComponentType<any>;\n  /**\n   * Whether the dropdown button should hide role='option' via 'aria-hidden'\n   */\n  ariaHideOptionRole?: boolean;\n  /**\n   * If, `true`, the Dropdown button will occupy the full width of it's container\n   */\n  fullWidth?: boolean;\n  /**\n   * Sets the size of the down arrow icon. If this is not specified, a default size based on density is used.\n   */\n  iconSize?: IconProps[\"size\"];\n  /**\n   * Is the dropdown list open\n   */\n  isOpen?: boolean;\n  /**\n   * Label for the dropdown button\n   */\n  label?: string;\n  /**\n   * Id for the label. This is needed for ARIA attributes.\n   */\n  labelId?: string;\n  /**\n   * When the dropdown is collapsed this value is set as aria-posinset on the span containing the selected value\n   * **/\n  posInSet?: number;\n  /**\n   * When the dropdown is collapsed this value is set as aria-setsize on the span containing the selected value\n   * **/\n  setSize?: number;\n  /**\n   *\n   * **/\n  labelAriaAttributes?: Pick<\n    AriaAttributes,\n    \"aria-posinset\" | \"aria-setsize\" | \"aria-selected\"\n  >;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdownButton\");\n\nexport const DropdownButton = forwardRef(function DropdownButton(\n  {\n    IconComponent = ChevronDownIcon,\n    ariaHideOptionRole,\n    className,\n    disabled,\n    iconSize = DEFAULT_ICON_SIZE,\n    isOpen,\n    label,\n    labelId,\n    fullWidth,\n    posInSet,\n    setSize,\n    labelAriaAttributes,\n    ...rest\n  }: DropdownButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>\n) {\n  const { inFormField } = useFormFieldProps();\n  // FIXME: use polymorphic button\n  // We don't want the 'button' tag to be shown in the DOM to trigger some accessibility testing\n  // tool's false alarm on role of 'listbox'\n  return (\n    <Button\n      className={classnames(\n        withBaseName(),\n        {\n          [withBaseName(\"fullwidth\")]: fullWidth,\n          [withBaseName(\"formField\")]: inFormField,\n        },\n        className\n      )}\n      data-testid=\"dropdown-button\"\n      disabled={disabled}\n      variant=\"secondary\"\n      {...rest}\n      ref={ref}\n    >\n      <div className={withBaseName(\"content\")}>\n        <span\n          // 'hidden' so that screen reader won't be confused the additional 'option' which is just a label\n          aria-hidden={ariaHideOptionRole ? \"true\" : undefined}\n          {...labelAriaAttributes}\n          className={withBaseName(\"buttonLabel\")}\n          id={labelId}\n          // 'option' role here is to suppress accessibility testing tool warning about 'listbox' missing children role.\n          role=\"option\"\n        >\n          {label}\n        </span>\n        <IconComponent\n          className={withBaseName(\"icon\")}\n          size={iconSize}\n          aria-label={null}\n          aria-hidden=\"true\"\n        />\n      </div>\n    </Button>\n  );\n});\n"],"names":["DropdownButton","classnames"],"mappings":";;;;;;;;;AAsDA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAEzC,MAAA,cAAA,GAAiB,UAAW,CAAA,SAASA,eAChD,CAAA;AAAA,EACE,aAAgB,GAAA,eAAA;AAAA,EAChB,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAW,GAAA,iBAAA;AAAA,EACX,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,EAAE,WAAY,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAI1C,EAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,IACC,SAAW,EAAAC,EAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,QAC7B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,WAAA;AAAA,OAC/B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,iBAAA;AAAA,IACZ,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACpC,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UAEC,aAAA,EAAa,qBAAqB,MAAS,GAAA,KAAA,CAAA;AAAA,UAC1C,GAAG,mBAAA;AAAA,UACJ,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,UACrC,EAAI,EAAA,OAAA;AAAA,UAEJ,IAAK,EAAA,QAAA;AAAA,UAEJ,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,wBACC,GAAA,CAAA,aAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAC9B,IAAM,EAAA,QAAA;AAAA,UACN,YAAY,EAAA,IAAA;AAAA,UACZ,aAAY,EAAA,MAAA;AAAA,SACd,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"DropdownButton.js","sources":["../src/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { ChevronDownIcon, IconProps, DEFAULT_ICON_SIZE } from \"@salt-ds/icons\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { clsx } from \"clsx\";\nimport { AriaAttributes, ComponentType, ForwardedRef, forwardRef } from \"react\";\n\nimport \"./DropdownButton.css\";\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Replace the default Icon component\n   */\n  IconComponent?: ComponentType<any>;\n  /**\n   * Whether the dropdown button should hide role='option' via 'aria-hidden'\n   */\n  ariaHideOptionRole?: boolean;\n  /**\n   * If, `true`, the Dropdown button will occupy the full width of it's container\n   */\n  fullWidth?: boolean;\n  /**\n   * Sets the size of the down arrow icon. If this is not specified, a default size based on density is used.\n   */\n  iconSize?: IconProps[\"size\"];\n  /**\n   * Is the dropdown list open\n   */\n  isOpen?: boolean;\n  /**\n   * Label for the dropdown button\n   */\n  label?: string;\n  /**\n   * Id for the label. This is needed for ARIA attributes.\n   */\n  labelId?: string;\n  /**\n   * When the dropdown is collapsed this value is set as aria-posinset on the span containing the selected value\n   * **/\n  posInSet?: number;\n  /**\n   * When the dropdown is collapsed this value is set as aria-setsize on the span containing the selected value\n   * **/\n  setSize?: number;\n  /**\n   *\n   * **/\n  labelAriaAttributes?: Pick<\n    AriaAttributes,\n    \"aria-posinset\" | \"aria-setsize\" | \"aria-selected\"\n  >;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdownButton\");\n\nexport const DropdownButton = forwardRef(function DropdownButton(\n  {\n    IconComponent = ChevronDownIcon,\n    ariaHideOptionRole,\n    className,\n    disabled,\n    iconSize = DEFAULT_ICON_SIZE,\n    isOpen,\n    label,\n    labelId,\n    fullWidth,\n    posInSet,\n    setSize,\n    labelAriaAttributes,\n    ...rest\n  }: DropdownButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>\n) {\n  const { inFormField } = useFormFieldProps();\n  // FIXME: use polymorphic button\n  // We don't want the 'button' tag to be shown in the DOM to trigger some accessibility testing\n  // tool's false alarm on role of 'listbox'\n  return (\n    <Button\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"fullwidth\")]: fullWidth,\n          [withBaseName(\"formField\")]: inFormField,\n        },\n        className\n      )}\n      data-testid=\"dropdown-button\"\n      disabled={disabled}\n      variant=\"secondary\"\n      {...rest}\n      ref={ref}\n    >\n      <div className={withBaseName(\"content\")}>\n        <span\n          // 'hidden' so that screen reader won't be confused the additional 'option' which is just a label\n          aria-hidden={ariaHideOptionRole ? \"true\" : undefined}\n          {...labelAriaAttributes}\n          className={withBaseName(\"buttonLabel\")}\n          id={labelId}\n          // 'option' role here is to suppress accessibility testing tool warning about 'listbox' missing children role.\n          role=\"option\"\n        >\n          {label}\n        </span>\n        <IconComponent\n          className={withBaseName(\"icon\")}\n          size={iconSize}\n          aria-label={null}\n          aria-hidden=\"true\"\n        />\n      </div>\n    </Button>\n  );\n});\n"],"names":["DropdownButton"],"mappings":";;;;;;;;;AAsDA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAEzC,MAAA,cAAA,GAAiB,UAAW,CAAA,SAASA,eAChD,CAAA;AAAA,EACE,aAAgB,GAAA,eAAA;AAAA,EAChB,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAW,GAAA,iBAAA;AAAA,EACX,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,EAAE,WAAY,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAI1C,EAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,QAC7B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,WAAA;AAAA,OAC/B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,iBAAA;AAAA,IACZ,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACpC,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UAEC,aAAA,EAAa,qBAAqB,MAAS,GAAA,KAAA,CAAA;AAAA,UAC1C,GAAG,mBAAA;AAAA,UACJ,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,UACrC,EAAI,EAAA,OAAA;AAAA,UAEJ,IAAK,EAAA,QAAA;AAAA,UAEJ,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,wBACC,GAAA,CAAA,aAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAC9B,IAAM,EAAA,QAAA;AAAA,UACN,YAAY,EAAA,IAAA;AAAA,UACZ,aAAY,EAAA,MAAA;AAAA,SACd,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/editable-label/EditableLabel.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useRef, useCallback } from 'react';
 import { useControlled, useIsomorphicLayoutEffect } from '@salt-ds/core';
 import { Input } from '../input/Input.js';
@@ -79,7 +79,7 @@ const EditableLabel = forwardRef(function EditableLabel2({
       exitEditMode({ cancelEdit: true });
     }
   };
-  const className = cx(classBase, classNameProp, {
+  const className = clsx(classBase, classNameProp, {
     [`${classBase}-editing`]: editing
   });
   return /* @__PURE__ */ jsx("div", {

package/dist-es/packages/lab/src/editable-label/EditableLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableLabel.js","sources":["../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport React, {\n  ChangeEvent,\n  KeyboardEvent,\n  useCallback,\n  forwardRef,\n  ForwardedRef,\n  ReactElement,\n  useRef,\n} from \"react\";\nimport { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { Input } from \"../input\";\n\nimport \"./EditableLabel.css\";\n\nconst classBase = \"saltEditableLabel\";\n\nexport interface EditableLabelProps {\n  className?: string;\n  defaultEditing?: boolean;\n  defaultValue?: string;\n  editing?: boolean;\n  onEnterEditMode: () => void;\n  onChange?: (value: string) => void;\n  onExitEditMode: (\n    originalLabel: string | undefined,\n    editedLabel: string | undefined,\n    allowDeactivation?: boolean\n  ) => void;\n  defaultIsEditing?: boolean;\n  value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n  {\n    className: classNameProp,\n    defaultEditing,\n    defaultValue,\n    editing: editingProp,\n    onChange,\n    onEnterEditMode,\n    onExitEditMode,\n    value: valueProp,\n  }: EditableLabelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n): ReactElement<EditableLabelProps> {\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue ?? \"\",\n    name: \"EditableLabel\",\n    state: \"value\",\n  });\n\n  const [editing, setEditing] = useControlled({\n    controlled: editingProp,\n    default: defaultEditing ?? false,\n    name: \"EditableLabel\",\n    state: \"editing\",\n  });\n\n  const initialValue = useRef(value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (editing) {\n      if (inputRef.current !== null) {\n        inputRef.current.select();\n        inputRef.current.focus();\n      }\n    }\n  }, [editing, inputRef]);\n\n  const enterEditMode = useCallback(() => {\n    setEditing(true);\n    // ignoreBlur.current = false;\n    onEnterEditMode && onEnterEditMode();\n  }, [onEnterEditMode, setEditing]);\n\n  const exitEditMode = ({\n    cancelEdit = false,\n    allowDeactivation = false,\n  } = {}) => {\n    setEditing(false);\n    const originalValue = initialValue.current;\n    if (originalValue !== value) {\n      if (cancelEdit) {\n        setValue(originalValue);\n      } else {\n        initialValue.current = value;\n      }\n    }\n    onExitEditMode && onExitEditMode(originalValue, value, allowDeactivation);\n  };\n\n  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n    const { value } = evt.target;\n    setValue(value);\n    onChange && onChange(value);\n  };\n\n  const handleDoubleClick = () => {\n    enterEditMode();\n  };\n\n  const handleBlur = () => {\n    exitEditMode({ allowDeactivation: true });\n  };\n\n  const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {\n    if (editing && evt.key === \"Enter\") {\n      evt.stopPropagation();\n      // we are likely to lose focus as a consequence of user response\n      // to exitEdit transition, don't want it to trigger another\n      //shouldn't we call setEditing here in case we are in uncontrolled mode ?\n      exitEditMode();\n    } else if (evt.key === \"ArrowRight\" || evt.key === \"ArrowLeft\") {\n      evt.stopPropagation();\n    } else if (evt.key === \"Escape\") {\n      exitEditMode({ cancelEdit: true });\n    }\n  };\n\n  const className = classnames(classBase, classNameProp, {\n    [`${classBase}-editing`]: editing,\n  });\n  return (\n    <div\n      className={className}\n      onDoubleClick={handleDoubleClick}\n      data-text={value}\n      ref={forwardedRef}\n    >\n      {editing ? (\n        <Input\n          inputProps={{ className: `${classBase}-input` }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          ref={inputRef}\n          style={{ padding: 0 }}\n          textAlign=\"left\"\n        />\n      ) : (\n        value\n      )}\n    </div>\n  );\n});\n"],"names":["EditableLabel","value","classnames"],"mappings":"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"}
+{"version":3,"file":"EditableLabel.js","sources":["../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n  ChangeEvent,\n  KeyboardEvent,\n  useCallback,\n  forwardRef,\n  ForwardedRef,\n  ReactElement,\n  useRef,\n} from \"react\";\nimport { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { Input } from \"../input\";\n\nimport \"./EditableLabel.css\";\n\nconst classBase = \"saltEditableLabel\";\n\nexport interface EditableLabelProps {\n  className?: string;\n  defaultEditing?: boolean;\n  defaultValue?: string;\n  editing?: boolean;\n  onEnterEditMode: () => void;\n  onChange?: (value: string) => void;\n  onExitEditMode: (\n    originalLabel: string | undefined,\n    editedLabel: string | undefined,\n    allowDeactivation?: boolean\n  ) => void;\n  defaultIsEditing?: boolean;\n  value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n  {\n    className: classNameProp,\n    defaultEditing,\n    defaultValue,\n    editing: editingProp,\n    onChange,\n    onEnterEditMode,\n    onExitEditMode,\n    value: valueProp,\n  }: EditableLabelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n): ReactElement<EditableLabelProps> {\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue ?? \"\",\n    name: \"EditableLabel\",\n    state: \"value\",\n  });\n\n  const [editing, setEditing] = useControlled({\n    controlled: editingProp,\n    default: defaultEditing ?? false,\n    name: \"EditableLabel\",\n    state: \"editing\",\n  });\n\n  const initialValue = useRef(value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (editing) {\n      if (inputRef.current !== null) {\n        inputRef.current.select();\n        inputRef.current.focus();\n      }\n    }\n  }, [editing, inputRef]);\n\n  const enterEditMode = useCallback(() => {\n    setEditing(true);\n    // ignoreBlur.current = false;\n    onEnterEditMode && onEnterEditMode();\n  }, [onEnterEditMode, setEditing]);\n\n  const exitEditMode = ({\n    cancelEdit = false,\n    allowDeactivation = false,\n  } = {}) => {\n    setEditing(false);\n    const originalValue = initialValue.current;\n    if (originalValue !== value) {\n      if (cancelEdit) {\n        setValue(originalValue);\n      } else {\n        initialValue.current = value;\n      }\n    }\n    onExitEditMode && onExitEditMode(originalValue, value, allowDeactivation);\n  };\n\n  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n    const { value } = evt.target;\n    setValue(value);\n    onChange && onChange(value);\n  };\n\n  const handleDoubleClick = () => {\n    enterEditMode();\n  };\n\n  const handleBlur = () => {\n    exitEditMode({ allowDeactivation: true });\n  };\n\n  const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {\n    if (editing && evt.key === \"Enter\") {\n      evt.stopPropagation();\n      // we are likely to lose focus as a consequence of user response\n      // to exitEdit transition, don't want it to trigger another\n      //shouldn't we call setEditing here in case we are in uncontrolled mode ?\n      exitEditMode();\n    } else if (evt.key === \"ArrowRight\" || evt.key === \"ArrowLeft\") {\n      evt.stopPropagation();\n    } else if (evt.key === \"Escape\") {\n      exitEditMode({ cancelEdit: true });\n    }\n  };\n\n  const className = clsx(classBase, classNameProp, {\n    [`${classBase}-editing`]: editing,\n  });\n  return (\n    <div\n      className={className}\n      onDoubleClick={handleDoubleClick}\n      data-text={value}\n      ref={forwardedRef}\n    >\n      {editing ? (\n        <Input\n          inputProps={{ className: `${classBase}-input` }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          ref={inputRef}\n          style={{ padding: 0 }}\n          textAlign=\"left\"\n        />\n      ) : (\n        value\n      )}\n    </div>\n  );\n});\n"],"names":["EditableLabel","value"],"mappings":"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"}

package/dist-es/packages/lab/src/file-drop-zone/FileDropZone.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makePrefixer, useId, Button } from '@salt-ds/core';
 import { ErrorIcon, UploadIcon } from '@salt-ds/icons';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
 import { containsFiles, extractFiles, validateFiles } from './internal/utils.js';
 import './FileDropZone.css.js';
@@ -114,7 +114,7 @@ const FileDropZone = forwardRef(
     const buttonLabelledBy = (isRejected ? [buttonId, iconId, descriptionId] : [buttonId, descriptionId]).join(" ");
     return /* @__PURE__ */ jsxs("div", {
       ...restProps,
-      className: cx(
+      className: clsx(
         withBaseName(),
         {
           [withBaseName("error")]: isRejected,

package/dist-es/packages/lab/src/file-drop-zone/FileDropZone.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDropZone.js","sources":["../src/file-drop-zone/FileDropZone.tsx"],"sourcesContent":["import { Button, makePrefixer, useId } from \"@salt-ds/core\";\nimport { ErrorIcon, UploadIcon } from \"@salt-ds/icons\";\nimport cx from \"classnames\";\nimport {\n  ChangeEventHandler,\n  DragEvent,\n  DragEventHandler,\n  FocusEvent,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { containsFiles, extractFiles, validateFiles } from \"./internal/utils\";\nimport { FilesValidator } from \"./validators\";\n\nimport \"./FileDropZone.css\";\n\n// Recommended button label by ADA review\nconst buttonLabel = \"Browse files\";\nconst INVALID_DROP_TARGET = \"Drop target doesn't contain any file.\";\n\nexport type FilesAcceptedEventHandler = (\n  files: ReadonlyArray<File>,\n  event: SyntheticEvent\n) => void;\n\nexport type FilesRejectedEventHandler<ErrorType = string> = (\n  errors: ReadonlyArray<ErrorType>,\n  event: SyntheticEvent\n) => void;\n\n/**\n * Removed deprecated props\n *\n * - onDrop\n * - onFileTypeError\n * - showUploadButton\n */\n\nexport interface FileDropZoneProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * `accept` attribute for HTML <input>.\n   *\n   * A comma separated list of file types the user can pick from the file input dialog box.\n   */\n  accept?: string;\n\n  /**\n   * The text content of the drop area component.\n   */\n  children?: ReactNode;\n\n  /**\n   * Additional usage information.\n   */\n  description?: string;\n\n  /**\n   * If `true`, the file drop zone will be disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * This prop is used to help implement the accessibility logic.\n   * If you don't provide this prop. It falls back to a randomly generated id.\n   */\n  id?: string;\n\n  /**\n   * Callback on successful file drop or selection.\n   */\n  onFilesAccepted?: FilesAcceptedEventHandler;\n\n  /**\n   * @see `validate` prop\n   * Callback on drop or input in case of an error. A list of errors will be provided as input.\n   */\n  onFilesRejected?: FilesRejectedEventHandler;\n\n  /**\n   * A list of custom validation functions. Every function is provided with the entire file list as input\n   * thus can perform validations on all files. Each function needs to return one or more errors in case of\n   * a failed validation, or `undefined` in case of a successful one.\n   *\n   * All errors are collected in the end and returned as an array to `onFilesRejected`.\n   */\n  validate?: ReadonlyArray<FilesValidator<any>>;\n}\n\nconst withBaseName = makePrefixer(\"saltFileDropZone\");\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(\n  function FileDropZone(\n    {\n      accept,\n      className,\n      children,\n      description,\n      disabled,\n      id: idProp,\n      validate,\n      onFilesAccepted,\n      onFilesRejected,\n      ...restProps\n    },\n    ref\n  ) {\n    const id = useId(idProp);\n\n    const iconId = `${id}-icon`;\n    const buttonId = `${id}-button`;\n    const descriptionId = `${id}-description`;\n\n    const [dropResult, setDropResult] = useState<null | {\n      event: SyntheticEvent;\n      files?: ReadonlyArray<File>;\n      errors: string[];\n    }>(null);\n    const [isActive, setActive] = useState(false);\n    const [isRejected, setRejected] = useState(false);\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const fileInputRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (!disabled && dropResult) {\n        const { event, files, errors } = dropResult;\n\n        if (errors && errors.length !== 0) {\n          setRejected(true);\n          if (!!onFilesRejected) {\n            return onFilesRejected(errors, event);\n          }\n        }\n\n        setRejected(false);\n        return onFilesAccepted?.(files!, event);\n      }\n    }, [disabled, dropResult, onFilesAccepted, onFilesRejected]);\n\n    const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {\n      // Need to cancel the default events to allow drop\n      // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (disabled) {\n        event.dataTransfer && (event.dataTransfer.dropEffect = \"none\");\n        return;\n      } else {\n        // Not using 'move', otherwise apps like Outlook will delete the item\n        event.dataTransfer && (event.dataTransfer.dropEffect = \"copy\");\n      }\n\n      if (!isActive && containsFiles(event)) {\n        setActive(true);\n      }\n    };\n\n    const handleDragLeave = () => setActive(false);\n\n    const handleFilesDrop = (event: SyntheticEvent) => {\n      if (!containsFiles(event as DragEvent)) {\n        return setDropResult({\n          event,\n          errors: [INVALID_DROP_TARGET],\n        });\n      }\n\n      const files = extractFiles(event as DragEvent);\n\n      if (files.length > 0) {\n        return setDropResult({\n          event,\n          files,\n          errors: validate ? validateFiles({ files, validate }) : [],\n        });\n      }\n    };\n\n    const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      handleFilesDrop(event);\n      setActive(false);\n    };\n\n    const handleInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      event.stopPropagation();\n\n      handleFilesDrop(event);\n    };\n\n    // As an ADA requirement when dialog is closed and the focus is returned to the input, we need to\n    // move focus back on the button element so that all labels can be announced correctly\n    const handleInputFocus = useCallback(\n      (event: FocusEvent<HTMLInputElement>) => {\n        event.stopPropagation();\n        buttonRef.current && buttonRef.current.focus();\n      },\n      []\n    );\n\n    const handleInputClick = useCallback(\n      (event: SyntheticEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        fileInputRef.current && fileInputRef.current.click();\n      },\n      []\n    );\n\n    const handleKeyDown = useCallback(\n      (event: KeyboardEvent<HTMLButtonElement>) => {\n        if ([\"Enter\", \"Space\"].indexOf(event.key) !== -1) {\n          fileInputRef.current && fileInputRef.current.click();\n        }\n      },\n      []\n    );\n\n    const fileDropZoneDescription = description ? (\n      <div className=\"saltFileDropZone-description\" id={descriptionId}>\n        {description}\n      </div>\n    ) : null;\n\n    const buttonLabelledBy = (\n      isRejected ? [buttonId, iconId, descriptionId] : [buttonId, descriptionId]\n    ).join(\" \");\n\n    return (\n      <div\n        {...restProps}\n        className={cx(\n          withBaseName(),\n          {\n            [withBaseName(\"error\")]: isRejected,\n            [withBaseName(\"active\")]: isActive,\n            [withBaseName(\"disabled\")]: disabled,\n          },\n          className\n        )}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        ref={ref}\n      >\n        {/* TODO: Check whether we want to replace this with aria announce */}\n        <div aria-live=\"polite\">\n          {/*\n           * It is an ADA requirement to always display an input button.-\n           */}\n          {isRejected ? (\n            <ErrorIcon\n              aria-label=\"error!\"\n              className={withBaseName(\"icon\")}\n              size={2}\n            />\n          ) : (\n            <UploadIcon className={withBaseName(\"icon\")} size={2} />\n          )}\n          {isRejected && fileDropZoneDescription}\n        </div>\n        <div className={withBaseName(\"title\")}>\n          {children || \"Drop files here or\"}\n        </div>\n        <label className={withBaseName(\"inputRoot\")}>\n          <Button\n            aria-labelledby={buttonLabelledBy}\n            ref={buttonRef}\n            className={withBaseName(\"inputButton\")}\n            data-testid=\"file-input-button\"\n            disabled={disabled}\n            onKeyDown={handleKeyDown}\n            onClick={handleInputClick}\n          >\n            {/* TODO: expose this in props */}\n            {buttonLabel.toUpperCase()}\n          </Button>\n          <input\n            accept={accept}\n            className=\"input-hidden\"\n            data-testid=\"file-input\"\n            disabled={disabled}\n            multiple\n            onChange={handleInputChange}\n            onFocus={handleInputFocus}\n            ref={fileInputRef}\n            type=\"file\"\n          />\n        </label>\n        {!isRejected && fileDropZoneDescription}\n      </div>\n    );\n  }\n);\n"],"names":["FileDropZone"],"mappings":";;;;;;;;AAwBA,MAAM,WAAc,GAAA,cAAA,CAAA;AACpB,MAAM,mBAAsB,GAAA,uCAAA,CAAA;AAsE5B,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aACP,CAAA;AAAA,IACE,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,EAAI,EAAA,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,eAAA;AAAA,IACA,eAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,IAAA,MAAM,SAAS,CAAG,EAAA,EAAA,CAAA,KAAA,CAAA,CAAA;AAClB,IAAA,MAAM,WAAW,CAAG,EAAA,EAAA,CAAA,OAAA,CAAA,CAAA;AACpB,IAAA,MAAM,gBAAgB,CAAG,EAAA,EAAA,CAAA,YAAA,CAAA,CAAA;AAEzB,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAIjC,IAAI,CAAA,CAAA;AACP,IAAA,MAAM,CAAC,QAAA,EAAU,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC5C,IAAA,MAAM,CAAC,UAAA,EAAY,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAEhD,IAAM,MAAA,SAAA,GAAY,OAA0B,IAAI,CAAA,CAAA;AAChD,IAAM,MAAA,YAAA,GAAe,OAAyB,IAAI,CAAA,CAAA;AAElD,IAAA,SAAA,CAAU,MAAM;AACd,MAAI,IAAA,CAAC,YAAY,UAAY,EAAA;AAC3B,QAAA,MAAM,EAAE,KAAA,EAAO,KAAO,EAAA,MAAA,EAAW,GAAA,UAAA,CAAA;AAEjC,QAAI,IAAA,MAAA,IAAU,MAAO,CAAA,MAAA,KAAW,CAAG,EAAA;AACjC,UAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAChB,UAAI,IAAA,CAAC,CAAC,eAAiB,EAAA;AACrB,YAAO,OAAA,eAAA,CAAgB,QAAQ,KAAK,CAAA,CAAA;AAAA,WACtC;AAAA,SACF;AAEA,QAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AACjB,QAAA,OAAO,mDAAkB,KAAQ,EAAA,KAAA,CAAA,CAAA;AAAA,OACnC;AAAA,OACC,CAAC,QAAA,EAAU,UAAY,EAAA,eAAA,EAAiB,eAAe,CAAC,CAAA,CAAA;AAE3D,IAAM,MAAA,cAAA,GAAmD,CAAC,KAAU,KAAA;AAGlE,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAEtB,MAAA,IAAI,QAAU,EAAA;AACZ,QAAM,KAAA,CAAA,YAAA,KAAiB,KAAM,CAAA,YAAA,CAAa,UAAa,GAAA,MAAA,CAAA,CAAA;AACvD,QAAA,OAAA;AAAA,OACK,MAAA;AAEL,QAAM,KAAA,CAAA,YAAA,KAAiB,KAAM,CAAA,YAAA,CAAa,UAAa,GAAA,MAAA,CAAA,CAAA;AAAA,OACzD;AAEA,MAAA,IAAI,CAAC,QAAA,IAAY,aAAc,CAAA,KAAK,CAAG,EAAA;AACrC,QAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,OAChB;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,eAAA,GAAkB,MAAM,SAAA,CAAU,KAAK,CAAA,CAAA;AAE7C,IAAM,MAAA,eAAA,GAAkB,CAAC,KAA0B,KAAA;AACjD,MAAI,IAAA,CAAC,aAAc,CAAA,KAAkB,CAAG,EAAA;AACtC,QAAA,OAAO,aAAc,CAAA;AAAA,UACnB,KAAA;AAAA,UACA,MAAA,EAAQ,CAAC,mBAAmB,CAAA;AAAA,SAC7B,CAAA,CAAA;AAAA,OACH;AAEA,MAAM,MAAA,KAAA,GAAQ,aAAa,KAAkB,CAAA,CAAA;AAE7C,MAAI,IAAA,KAAA,CAAM,SAAS,CAAG,EAAA;AACpB,QAAA,OAAO,aAAc,CAAA;AAAA,UACnB,KAAA;AAAA,UACA,KAAA;AAAA,UACA,MAAA,EAAQ,WAAW,aAAc,CAAA,EAAE,OAAO,QAAS,EAAC,IAAI,EAAC;AAAA,SAC1D,CAAA,CAAA;AAAA,OACH;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,UAAA,GAA+C,CAAC,KAAU,KAAA;AAC9D,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAEtB,MAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AACrB,MAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,KACjB,CAAA;AAEA,IAAM,MAAA,iBAAA,GAA0D,CAAC,KAAU,KAAA;AACzE,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAEtB,MAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AAAA,KACvB,CAAA;AAIA,IAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,MACvB,CAAC,KAAwC,KAAA;AACvC,QAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,QAAU,SAAA,CAAA,OAAA,IAAW,SAAU,CAAA,OAAA,CAAQ,KAAM,EAAA,CAAA;AAAA,OAC/C;AAAA,MACA,EAAC;AAAA,KACH,CAAA;AAEA,IAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,MACvB,CAAC,KAA6C,KAAA;AAC5C,QAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,QAAa,YAAA,CAAA,OAAA,IAAW,YAAa,CAAA,OAAA,CAAQ,KAAM,EAAA,CAAA;AAAA,OACrD;AAAA,MACA,EAAC;AAAA,KACH,CAAA;AAEA,IAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,MACpB,CAAC,KAA4C,KAAA;AAC3C,QAAI,IAAA,CAAC,SAAS,OAAO,CAAA,CAAE,QAAQ,KAAM,CAAA,GAAG,MAAM,CAAI,CAAA,EAAA;AAChD,UAAa,YAAA,CAAA,OAAA,IAAW,YAAa,CAAA,OAAA,CAAQ,KAAM,EAAA,CAAA;AAAA,SACrD;AAAA,OACF;AAAA,MACA,EAAC;AAAA,KACH,CAAA;AAEA,IAAM,MAAA,uBAAA,GAA0B,8BAC7B,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAU,EAAA,8BAAA;AAAA,MAA+B,EAAI,EAAA,aAAA;AAAA,MAC/C,QAAA,EAAA,WAAA;AAAA,KACH,CACE,GAAA,IAAA,CAAA;AAEJ,IAAA,MAAM,gBACJ,GAAA,CAAA,UAAA,GAAa,CAAC,QAAA,EAAU,MAAQ,EAAA,aAAa,CAAI,GAAA,CAAC,QAAU,EAAA,aAAa,CACzE,EAAA,IAAA,CAAK,GAAG,CAAA,CAAA;AAEV,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAW,EAAA,EAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,UAAA;AAAA,UACzB,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,QAAA;AAAA,UAC1B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,SAC9B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,WAAa,EAAA,eAAA;AAAA,MACb,UAAY,EAAA,cAAA;AAAA,MACZ,MAAQ,EAAA,UAAA;AAAA,MACR,GAAA;AAAA,MAGA,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,UAAI,WAAU,EAAA,QAAA;AAAA,UAIZ,QAAA,EAAA;AAAA,YAAA,UAAA,mBACE,GAAA,CAAA,SAAA,EAAA;AAAA,cACC,YAAW,EAAA,QAAA;AAAA,cACX,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,cAC9B,IAAM,EAAA,CAAA;AAAA,aACR,oBAEC,GAAA,CAAA,UAAA,EAAA;AAAA,cAAW,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,cAAG,IAAM,EAAA,CAAA;AAAA,aAAG,CAAA;AAAA,YAEvD,UAAc,IAAA,uBAAA;AAAA,WAAA;AAAA,SACjB,CAAA;AAAA,wBACC,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UACjC,QAAY,EAAA,QAAA,IAAA,oBAAA;AAAA,SACf,CAAA;AAAA,wBACC,IAAA,CAAA,OAAA,EAAA;AAAA,UAAM,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,UACxC,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,cACC,iBAAiB,EAAA,gBAAA;AAAA,cACjB,GAAK,EAAA,SAAA;AAAA,cACL,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,cACrC,aAAY,EAAA,mBAAA;AAAA,cACZ,QAAA;AAAA,cACA,SAAW,EAAA,aAAA;AAAA,cACX,OAAS,EAAA,gBAAA;AAAA,cAGR,sBAAY,WAAY,EAAA;AAAA,aAC3B,CAAA;AAAA,4BACC,GAAA,CAAA,OAAA,EAAA;AAAA,cACC,MAAA;AAAA,cACA,SAAU,EAAA,cAAA;AAAA,cACV,aAAY,EAAA,YAAA;AAAA,cACZ,QAAA;AAAA,cACA,QAAQ,EAAA,IAAA;AAAA,cACR,QAAU,EAAA,iBAAA;AAAA,cACV,OAAS,EAAA,gBAAA;AAAA,cACT,GAAK,EAAA,YAAA;AAAA,cACL,IAAK,EAAA,MAAA;AAAA,aACP,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,QACC,CAAC,UAAc,IAAA,uBAAA;AAAA,OAAA;AAAA,KAClB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"FileDropZone.js","sources":["../src/file-drop-zone/FileDropZone.tsx"],"sourcesContent":["import { Button, makePrefixer, useId } from \"@salt-ds/core\";\nimport { ErrorIcon, UploadIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  ChangeEventHandler,\n  DragEvent,\n  DragEventHandler,\n  FocusEvent,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { containsFiles, extractFiles, validateFiles } from \"./internal/utils\";\nimport { FilesValidator } from \"./validators\";\n\nimport \"./FileDropZone.css\";\n\n// Recommended button label by ADA review\nconst buttonLabel = \"Browse files\";\nconst INVALID_DROP_TARGET = \"Drop target doesn't contain any file.\";\n\nexport type FilesAcceptedEventHandler = (\n  files: ReadonlyArray<File>,\n  event: SyntheticEvent\n) => void;\n\nexport type FilesRejectedEventHandler<ErrorType = string> = (\n  errors: ReadonlyArray<ErrorType>,\n  event: SyntheticEvent\n) => void;\n\n/**\n * Removed deprecated props\n *\n * - onDrop\n * - onFileTypeError\n * - showUploadButton\n */\n\nexport interface FileDropZoneProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * `accept` attribute for HTML <input>.\n   *\n   * A comma separated list of file types the user can pick from the file input dialog box.\n   */\n  accept?: string;\n\n  /**\n   * The text content of the drop area component.\n   */\n  children?: ReactNode;\n\n  /**\n   * Additional usage information.\n   */\n  description?: string;\n\n  /**\n   * If `true`, the file drop zone will be disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * This prop is used to help implement the accessibility logic.\n   * If you don't provide this prop. It falls back to a randomly generated id.\n   */\n  id?: string;\n\n  /**\n   * Callback on successful file drop or selection.\n   */\n  onFilesAccepted?: FilesAcceptedEventHandler;\n\n  /**\n   * @see `validate` prop\n   * Callback on drop or input in case of an error. A list of errors will be provided as input.\n   */\n  onFilesRejected?: FilesRejectedEventHandler;\n\n  /**\n   * A list of custom validation functions. Every function is provided with the entire file list as input\n   * thus can perform validations on all files. Each function needs to return one or more errors in case of\n   * a failed validation, or `undefined` in case of a successful one.\n   *\n   * All errors are collected in the end and returned as an array to `onFilesRejected`.\n   */\n  validate?: ReadonlyArray<FilesValidator<any>>;\n}\n\nconst withBaseName = makePrefixer(\"saltFileDropZone\");\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(\n  function FileDropZone(\n    {\n      accept,\n      className,\n      children,\n      description,\n      disabled,\n      id: idProp,\n      validate,\n      onFilesAccepted,\n      onFilesRejected,\n      ...restProps\n    },\n    ref\n  ) {\n    const id = useId(idProp);\n\n    const iconId = `${id}-icon`;\n    const buttonId = `${id}-button`;\n    const descriptionId = `${id}-description`;\n\n    const [dropResult, setDropResult] = useState<null | {\n      event: SyntheticEvent;\n      files?: ReadonlyArray<File>;\n      errors: string[];\n    }>(null);\n    const [isActive, setActive] = useState(false);\n    const [isRejected, setRejected] = useState(false);\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const fileInputRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (!disabled && dropResult) {\n        const { event, files, errors } = dropResult;\n\n        if (errors && errors.length !== 0) {\n          setRejected(true);\n          if (!!onFilesRejected) {\n            return onFilesRejected(errors, event);\n          }\n        }\n\n        setRejected(false);\n        return onFilesAccepted?.(files!, event);\n      }\n    }, [disabled, dropResult, onFilesAccepted, onFilesRejected]);\n\n    const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {\n      // Need to cancel the default events to allow drop\n      // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (disabled) {\n        event.dataTransfer && (event.dataTransfer.dropEffect = \"none\");\n        return;\n      } else {\n        // Not using 'move', otherwise apps like Outlook will delete the item\n        event.dataTransfer && (event.dataTransfer.dropEffect = \"copy\");\n      }\n\n      if (!isActive && containsFiles(event)) {\n        setActive(true);\n      }\n    };\n\n    const handleDragLeave = () => setActive(false);\n\n    const handleFilesDrop = (event: SyntheticEvent) => {\n      if (!containsFiles(event as DragEvent)) {\n        return setDropResult({\n          event,\n          errors: [INVALID_DROP_TARGET],\n        });\n      }\n\n      const files = extractFiles(event as DragEvent);\n\n      if (files.length > 0) {\n        return setDropResult({\n          event,\n          files,\n          errors: validate ? validateFiles({ files, validate }) : [],\n        });\n      }\n    };\n\n    const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {\n      event.preventDefault();\n      event.stopPropagation();\n\n      handleFilesDrop(event);\n      setActive(false);\n    };\n\n    const handleInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      event.stopPropagation();\n\n      handleFilesDrop(event);\n    };\n\n    // As an ADA requirement when dialog is closed and the focus is returned to the input, we need to\n    // move focus back on the button element so that all labels can be announced correctly\n    const handleInputFocus = useCallback(\n      (event: FocusEvent<HTMLInputElement>) => {\n        event.stopPropagation();\n        buttonRef.current && buttonRef.current.focus();\n      },\n      []\n    );\n\n    const handleInputClick = useCallback(\n      (event: SyntheticEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        fileInputRef.current && fileInputRef.current.click();\n      },\n      []\n    );\n\n    const handleKeyDown = useCallback(\n      (event: KeyboardEvent<HTMLButtonElement>) => {\n        if ([\"Enter\", \"Space\"].indexOf(event.key) !== -1) {\n          fileInputRef.current && fileInputRef.current.click();\n        }\n      },\n      []\n    );\n\n    const fileDropZoneDescription = description ? (\n      <div className=\"saltFileDropZone-description\" id={descriptionId}>\n        {description}\n      </div>\n    ) : null;\n\n    const buttonLabelledBy = (\n      isRejected ? [buttonId, iconId, descriptionId] : [buttonId, descriptionId]\n    ).join(\" \");\n\n    return (\n      <div\n        {...restProps}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"error\")]: isRejected,\n            [withBaseName(\"active\")]: isActive,\n            [withBaseName(\"disabled\")]: disabled,\n          },\n          className\n        )}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        ref={ref}\n      >\n        {/* TODO: Check whether we want to replace this with aria announce */}\n        <div aria-live=\"polite\">\n          {/*\n           * It is an ADA requirement to always display an input button.-\n           */}\n          {isRejected ? (\n            <ErrorIcon\n              aria-label=\"error!\"\n              className={withBaseName(\"icon\")}\n              size={2}\n            />\n          ) : (\n            <UploadIcon className={withBaseName(\"icon\")} size={2} />\n          )}\n          {isRejected && fileDropZoneDescription}\n        </div>\n        <div className={withBaseName(\"title\")}>\n          {children || \"Drop files here or\"}\n        </div>\n        <label className={withBaseName(\"inputRoot\")}>\n          <Button\n            aria-labelledby={buttonLabelledBy}\n            ref={buttonRef}\n            className={withBaseName(\"inputButton\")}\n            data-testid=\"file-input-button\"\n            disabled={disabled}\n            onKeyDown={handleKeyDown}\n            onClick={handleInputClick}\n          >\n            {/* TODO: expose this in props */}\n            {buttonLabel.toUpperCase()}\n          </Button>\n          <input\n            accept={accept}\n            className=\"input-hidden\"\n            data-testid=\"file-input\"\n            disabled={disabled}\n            multiple\n            onChange={handleInputChange}\n            onFocus={handleInputFocus}\n            ref={fileInputRef}\n            type=\"file\"\n          />\n        </label>\n        {!isRejected && fileDropZoneDescription}\n      </div>\n    );\n  }\n);\n"],"names":["FileDropZone"],"mappings":"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"}

package/dist-es/packages/lab/src/form-field/FormField.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useRef, useMemo, useState } from 'react';
 import { makePrefixer, useId, useForkRef } from '@salt-ds/core';
 import { FormFieldContext } from '../form-field-context/FormFieldContext.js';
@@ -112,7 +112,7 @@ const FormField = forwardRef(
       disabled: !tooltipHelperText
     });
     const { ref: triggerRef, ...triggerProps } = getTriggerProps({
-      className: cx(
+      className: clsx(
         withBaseName(),
         {
           [withBaseName("disabled")]: disabled,

package/dist-es/packages/lab/src/form-field/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport {\n  Dispatch,\n  ElementType,\n  FocusEventHandler,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  SetStateAction,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { FormFieldContext } from \"../form-field-context\";\nimport { Tooltip, useTooltip } from \"../tooltip\";\nimport { classBase } from \"./constant\";\nimport {\n  FormActivationIndicator,\n  FormActivationIndicatorProps,\n} from \"./FormActivationIndicator\";\nimport { FormHelperText, FormHelperTextProps } from \"./FormHelperText\";\nimport { FormLabel, FormLabelProps } from \"./FormLabel\";\nimport { NecessityIndicatorOptions } from \"./NecessityIndicator\";\nimport { StatusIndicatorProps } from \"./StatusIndicator\";\n\nimport \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\";\nexport type FormFieldHelperTextPlacement = \"bottom\" | \"tooltip\";\nexport type FormFieldValidationStatus = \"error\" | \"warning\";\n\nexport interface A11yValueProps\n  extends Pick<NecessityIndicatorOptions, \"required\"> {\n  /**\n   * If `true`, the FormField will be disabled.\n   */\n  disabled?: boolean;\n  /** id of the helper text node */\n  helperTextId?: string;\n  /** id of the label node */\n  labelId?: string;\n  /**\n   * The FormField value is Readonly\n   */\n  readOnly?: boolean;\n\n  /**\n   * Whether the form field needs to render helper text\n   */\n  renderHelperText?: boolean;\n}\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * The component used for activation indicator. Default to `FormActivationIndicator`.\n   */\n  ActivationIndicatorComponent?: ElementType<FormActivationIndicatorProps>;\n  /**\n   * Outer focus ring focus will not be applied. Defaults to false.\n   */\n  disableFocusRing?: boolean;\n  // I hate this fullWidth business. We should support a width prop. The default should be 100% (standard block behaviour)\n  // we should also support 'auto' or explicit numeric values\n  /**\n   * Whether the form field is occupying full width.\n   */\n  fullWidth?: boolean;\n  /**\n   * Whether to show the StatusIndicator component for validation states.\n   */\n  hasStatusIndicator?: boolean;\n  /**\n   * The helper text content\n   */\n  helperText?: string;\n  /**\n   * The component used for the helper text. Default to `FormHelperText`.\n   */\n  HelperTextComponent?: ElementType<FormHelperTextProps>;\n  /**\n   * Location the helperText, values: 'bottom' (default) or 'tooltip'.\n   */\n  helperTextPlacement?: FormFieldHelperTextPlacement;\n  /**\n   * Props to be applied to the `HelperTextComponent`.\n   *\n   * Generic on `FormHelperTextProps` is omitted.\n   */\n  HelperTextProps?: Partial<FormHelperTextProps>;\n  /**\n   * The label value for the FormField\n   */\n  label?: string;\n  /**\n   * The component used for the label. Default to `FormLabel`.\n   */\n  LabelComponent?: ElementType;\n  /**\n   * Location the label, values: 'top' (default) or 'left'\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * Props to be applied to the `LabelComponent`\n   */\n  LabelProps?: Partial<FormLabelProps>;\n  /**\n   * Override props to be used with the StatusIndicator component\n   */\n  StatusIndicatorProps?: Partial<StatusIndicatorProps>;\n  /**\n   * The state for the FormField: Must be one of: 'error'|'warning'|undefined\n   */\n  validationStatus?: FormFieldValidationStatus;\n  /**\n   * FormField variants; defaults to primary.\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport interface useA11yValueValue {\n  \"aria-labelledby\": A11yValueProps[\"labelId\"];\n  \"aria-required\": A11yValueProps[\"required\"];\n  \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n  disabled: A11yValueProps[\"disabled\"];\n  readOnly: A11yValueProps[\"readOnly\"];\n}\n\nconst useA11yValue = ({\n  required,\n  disabled,\n  readOnly,\n  labelId,\n  helperTextId,\n  renderHelperText,\n}: A11yValueProps) => {\n  return useMemo(\n    () => ({\n      \"aria-labelledby\": labelId,\n      \"aria-required\": required,\n      \"aria-describedby\": renderHelperText ? helperTextId : undefined,\n      disabled,\n      readOnly,\n    }),\n    [labelId, disabled, readOnly, required, renderHelperText, helperTextId]\n  );\n};\n\n// TODO: Add TS props for this\nexport const useFormField = ({\n  onBlur,\n  onFocus,\n}: {\n  onBlur?: FocusEventHandler<HTMLDivElement>;\n  onFocus?: FocusEventHandler<HTMLDivElement>;\n}): [\n  { focused: boolean },\n  { setFocused: Dispatch<SetStateAction<boolean>> },\n  {\n    onBlur: FocusEventHandler<HTMLDivElement>;\n    onFocus: FocusEventHandler<HTMLDivElement>;\n  }\n] => {\n  const [focused, setFocused] = useState(false);\n  const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n    setFocused(false);\n    onBlur?.(event);\n  };\n  const handleFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n    setFocused(true);\n    onFocus?.(event);\n  };\n  return [\n    {\n      focused,\n    },\n    {\n      setFocused,\n    },\n    {\n      onBlur: handleBlur,\n      onFocus: handleFocus,\n    },\n  ];\n};\n\nconst withBaseName = makePrefixer(classBase);\n\nexport const FormField = forwardRef(\n  (\n    {\n      ActivationIndicatorComponent = FormActivationIndicator,\n      children,\n      className,\n      disabled,\n      disableFocusRing = false,\n      fullWidth = true,\n      hasStatusIndicator,\n      HelperTextComponent = FormHelperText,\n      HelperTextProps,\n      helperText,\n      helperTextPlacement = \"bottom\",\n      label,\n      LabelComponent = FormLabel,\n      labelPlacement = \"top\",\n      LabelProps = { displayedNecessity: \"required\" },\n      onBlur,\n      onFocus,\n      readOnly,\n      required,\n      StatusIndicatorProps,\n      validationStatus,\n      variant = \"primary\",\n      ...restProps\n    }: FormFieldProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const labelId = useId(LabelProps?.id);\n    const helperTextId = useId(HelperTextProps?.id);\n    const rootRef = useRef<HTMLDivElement>(null);\n\n    const renderHelperText = !!helperText;\n\n    const a11yValue = useA11yValue({\n      required,\n      disabled,\n      readOnly,\n      labelId,\n      helperTextId,\n      renderHelperText,\n    });\n\n    const [states, dispatchers, eventHandlers] = useFormField({\n      onBlur,\n      onFocus,\n    });\n\n    const hasLabel = label !== undefined;\n    const labelTop = hasLabel && labelPlacement === \"top\";\n    const labelLeft = hasLabel && labelPlacement === \"left\";\n    const isWarning = validationStatus === \"warning\";\n    const isError = validationStatus === \"error\";\n    const focusClass = disableFocusRing\n      ? \"lowFocused\"\n      : \"focused\"; /* NOTE: need to look at */\n    const inlineHelperText =\n      renderHelperText && helperTextPlacement === \"bottom\";\n    const tooltipHelperText =\n      renderHelperText &&\n      helperTextPlacement === \"tooltip\" &&\n      !hasStatusIndicator;\n\n    const { getTooltipProps, getTriggerProps } = useTooltip({\n      disabled: !tooltipHelperText,\n    });\n\n    const { ref: triggerRef, ...triggerProps } = getTriggerProps({\n      className: cx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"readOnly\")]: readOnly,\n          [withBaseName(\"warning\")]: isWarning,\n          [withBaseName(\"error\")]: isError,\n          [withBaseName(\"fullWidth\")]: fullWidth,\n          [withBaseName(focusClass)]: states.focused,\n          [withBaseName(\"labelTop\")]: labelTop,\n          [withBaseName(\"labelLeft\")]: labelLeft,\n          [withBaseName(`withHelperText`)]: inlineHelperText,\n          [withBaseName(variant)]: variant,\n        },\n        className\n      ),\n      ...eventHandlers,\n      ...restProps,\n    });\n\n    const handleTriggerRef = useForkRef(triggerRef, rootRef);\n    const handleRef = useForkRef(handleTriggerRef, ref);\n\n    return (\n      <>\n        <div ref={handleRef} {...triggerProps}>\n          <FormFieldContext.Provider\n            value={{\n              ...states,\n              ...dispatchers,\n              ...eventHandlers,\n              a11yProps: a11yValue,\n              inFormField: true,\n              ref: rootRef,\n            }}\n          >\n            {hasLabel && (\n              <LabelComponent\n                {...LabelProps}\n                validationStatus={validationStatus}\n                hasStatusIndicator={hasStatusIndicator}\n                StatusIndicatorProps={StatusIndicatorProps}\n                className={LabelProps.className}\n                label={label}\n                disabled={disabled}\n                readOnly={readOnly}\n                required={required}\n                tooltipText={helperText}\n                id={labelId}\n              />\n            )}\n            {children}\n            <ActivationIndicatorComponent\n              hasIcon={!hasStatusIndicator}\n              validationStatus={validationStatus}\n            />\n            {renderHelperText && (\n              <HelperTextComponent\n                helperText={helperText}\n                helperTextPlacement={helperTextPlacement}\n                {...HelperTextProps}\n                id={helperTextId}\n              />\n            )}\n          </FormFieldContext.Provider>\n        </div>\n        <Tooltip {...getTooltipProps({ title: helperText })} />\n      </>\n    );\n  }\n);\n"],"names":["StatusIndicatorProps"],"mappings":"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"}
+{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  Dispatch,\n  ElementType,\n  FocusEventHandler,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  SetStateAction,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { FormFieldContext } from \"../form-field-context\";\nimport { Tooltip, useTooltip } from \"../tooltip\";\nimport { classBase } from \"./constant\";\nimport {\n  FormActivationIndicator,\n  FormActivationIndicatorProps,\n} from \"./FormActivationIndicator\";\nimport { FormHelperText, FormHelperTextProps } from \"./FormHelperText\";\nimport { FormLabel, FormLabelProps } from \"./FormLabel\";\nimport { NecessityIndicatorOptions } from \"./NecessityIndicator\";\nimport { StatusIndicatorProps } from \"./StatusIndicator\";\n\nimport \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\";\nexport type FormFieldHelperTextPlacement = \"bottom\" | \"tooltip\";\nexport type FormFieldValidationStatus = \"error\" | \"warning\";\n\nexport interface A11yValueProps\n  extends Pick<NecessityIndicatorOptions, \"required\"> {\n  /**\n   * If `true`, the FormField will be disabled.\n   */\n  disabled?: boolean;\n  /** id of the helper text node */\n  helperTextId?: string;\n  /** id of the label node */\n  labelId?: string;\n  /**\n   * The FormField value is Readonly\n   */\n  readOnly?: boolean;\n\n  /**\n   * Whether the form field needs to render helper text\n   */\n  renderHelperText?: boolean;\n}\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * The component used for activation indicator. Default to `FormActivationIndicator`.\n   */\n  ActivationIndicatorComponent?: ElementType<FormActivationIndicatorProps>;\n  /**\n   * Outer focus ring focus will not be applied. Defaults to false.\n   */\n  disableFocusRing?: boolean;\n  // I hate this fullWidth business. We should support a width prop. The default should be 100% (standard block behaviour)\n  // we should also support 'auto' or explicit numeric values\n  /**\n   * Whether the form field is occupying full width.\n   */\n  fullWidth?: boolean;\n  /**\n   * Whether to show the StatusIndicator component for validation states.\n   */\n  hasStatusIndicator?: boolean;\n  /**\n   * The helper text content\n   */\n  helperText?: string;\n  /**\n   * The component used for the helper text. Default to `FormHelperText`.\n   */\n  HelperTextComponent?: ElementType<FormHelperTextProps>;\n  /**\n   * Location the helperText, values: 'bottom' (default) or 'tooltip'.\n   */\n  helperTextPlacement?: FormFieldHelperTextPlacement;\n  /**\n   * Props to be applied to the `HelperTextComponent`.\n   *\n   * Generic on `FormHelperTextProps` is omitted.\n   */\n  HelperTextProps?: Partial<FormHelperTextProps>;\n  /**\n   * The label value for the FormField\n   */\n  label?: string;\n  /**\n   * The component used for the label. Default to `FormLabel`.\n   */\n  LabelComponent?: ElementType;\n  /**\n   * Location the label, values: 'top' (default) or 'left'\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * Props to be applied to the `LabelComponent`\n   */\n  LabelProps?: Partial<FormLabelProps>;\n  /**\n   * Override props to be used with the StatusIndicator component\n   */\n  StatusIndicatorProps?: Partial<StatusIndicatorProps>;\n  /**\n   * The state for the FormField: Must be one of: 'error'|'warning'|undefined\n   */\n  validationStatus?: FormFieldValidationStatus;\n  /**\n   * FormField variants; defaults to primary.\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport interface useA11yValueValue {\n  \"aria-labelledby\": A11yValueProps[\"labelId\"];\n  \"aria-required\": A11yValueProps[\"required\"];\n  \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n  disabled: A11yValueProps[\"disabled\"];\n  readOnly: A11yValueProps[\"readOnly\"];\n}\n\nconst useA11yValue = ({\n  required,\n  disabled,\n  readOnly,\n  labelId,\n  helperTextId,\n  renderHelperText,\n}: A11yValueProps) => {\n  return useMemo(\n    () => ({\n      \"aria-labelledby\": labelId,\n      \"aria-required\": required,\n      \"aria-describedby\": renderHelperText ? helperTextId : undefined,\n      disabled,\n      readOnly,\n    }),\n    [labelId, disabled, readOnly, required, renderHelperText, helperTextId]\n  );\n};\n\n// TODO: Add TS props for this\nexport const useFormField = ({\n  onBlur,\n  onFocus,\n}: {\n  onBlur?: FocusEventHandler<HTMLDivElement>;\n  onFocus?: FocusEventHandler<HTMLDivElement>;\n}): [\n  { focused: boolean },\n  { setFocused: Dispatch<SetStateAction<boolean>> },\n  {\n    onBlur: FocusEventHandler<HTMLDivElement>;\n    onFocus: FocusEventHandler<HTMLDivElement>;\n  }\n] => {\n  const [focused, setFocused] = useState(false);\n  const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n    setFocused(false);\n    onBlur?.(event);\n  };\n  const handleFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n    setFocused(true);\n    onFocus?.(event);\n  };\n  return [\n    {\n      focused,\n    },\n    {\n      setFocused,\n    },\n    {\n      onBlur: handleBlur,\n      onFocus: handleFocus,\n    },\n  ];\n};\n\nconst withBaseName = makePrefixer(classBase);\n\nexport const FormField = forwardRef(\n  (\n    {\n      ActivationIndicatorComponent = FormActivationIndicator,\n      children,\n      className,\n      disabled,\n      disableFocusRing = false,\n      fullWidth = true,\n      hasStatusIndicator,\n      HelperTextComponent = FormHelperText,\n      HelperTextProps,\n      helperText,\n      helperTextPlacement = \"bottom\",\n      label,\n      LabelComponent = FormLabel,\n      labelPlacement = \"top\",\n      LabelProps = { displayedNecessity: \"required\" },\n      onBlur,\n      onFocus,\n      readOnly,\n      required,\n      StatusIndicatorProps,\n      validationStatus,\n      variant = \"primary\",\n      ...restProps\n    }: FormFieldProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const labelId = useId(LabelProps?.id);\n    const helperTextId = useId(HelperTextProps?.id);\n    const rootRef = useRef<HTMLDivElement>(null);\n\n    const renderHelperText = !!helperText;\n\n    const a11yValue = useA11yValue({\n      required,\n      disabled,\n      readOnly,\n      labelId,\n      helperTextId,\n      renderHelperText,\n    });\n\n    const [states, dispatchers, eventHandlers] = useFormField({\n      onBlur,\n      onFocus,\n    });\n\n    const hasLabel = label !== undefined;\n    const labelTop = hasLabel && labelPlacement === \"top\";\n    const labelLeft = hasLabel && labelPlacement === \"left\";\n    const isWarning = validationStatus === \"warning\";\n    const isError = validationStatus === \"error\";\n    const focusClass = disableFocusRing\n      ? \"lowFocused\"\n      : \"focused\"; /* NOTE: need to look at */\n    const inlineHelperText =\n      renderHelperText && helperTextPlacement === \"bottom\";\n    const tooltipHelperText =\n      renderHelperText &&\n      helperTextPlacement === \"tooltip\" &&\n      !hasStatusIndicator;\n\n    const { getTooltipProps, getTriggerProps } = useTooltip({\n      disabled: !tooltipHelperText,\n    });\n\n    const { ref: triggerRef, ...triggerProps } = getTriggerProps({\n      className: clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"readOnly\")]: readOnly,\n          [withBaseName(\"warning\")]: isWarning,\n          [withBaseName(\"error\")]: isError,\n          [withBaseName(\"fullWidth\")]: fullWidth,\n          [withBaseName(focusClass)]: states.focused,\n          [withBaseName(\"labelTop\")]: labelTop,\n          [withBaseName(\"labelLeft\")]: labelLeft,\n          [withBaseName(`withHelperText`)]: inlineHelperText,\n          [withBaseName(variant)]: variant,\n        },\n        className\n      ),\n      ...eventHandlers,\n      ...restProps,\n    });\n\n    const handleTriggerRef = useForkRef(triggerRef, rootRef);\n    const handleRef = useForkRef(handleTriggerRef, ref);\n\n    return (\n      <>\n        <div ref={handleRef} {...triggerProps}>\n          <FormFieldContext.Provider\n            value={{\n              ...states,\n              ...dispatchers,\n              ...eventHandlers,\n              a11yProps: a11yValue,\n              inFormField: true,\n              ref: rootRef,\n            }}\n          >\n            {hasLabel && (\n              <LabelComponent\n                {...LabelProps}\n                validationStatus={validationStatus}\n                hasStatusIndicator={hasStatusIndicator}\n                StatusIndicatorProps={StatusIndicatorProps}\n                className={LabelProps.className}\n                label={label}\n                disabled={disabled}\n                readOnly={readOnly}\n                required={required}\n                tooltipText={helperText}\n                id={labelId}\n              />\n            )}\n            {children}\n            <ActivationIndicatorComponent\n              hasIcon={!hasStatusIndicator}\n              validationStatus={validationStatus}\n            />\n            {renderHelperText && (\n              <HelperTextComponent\n                helperText={helperText}\n                helperTextPlacement={helperTextPlacement}\n                {...HelperTextProps}\n                id={helperTextId}\n              />\n            )}\n          </FormFieldContext.Provider>\n        </div>\n        <Tooltip {...getTooltipProps({ title: helperText })} />\n      </>\n    );\n  }\n);\n"],"names":["StatusIndicatorProps"],"mappings":"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"}