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

package/dist-es/packages/lab/src/contact-details/ContactAction.js

@@ -1,36 +1,21 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useForkRef, Button } from '@salt-ds/core';
+import { jsx } from 'react/jsx-runtime';
+import { Tooltip, Button } from '@salt-ds/core';
 import { forwardRef } from 'react';
-import { Tooltip } from '../tooltip/Tooltip.js';
-import '../tooltip/TooltipContext.js';
-import { useTooltip } from '../tooltip/useTooltip.js';
 
 const ContactAction = forwardRef(
   function ContactAction2(props, ref) {
     const { label, icon, accessibleText, tooltipProps, ...restProps } = props;
     const Icon = icon;
-    const { getTooltipProps, getTriggerProps } = useTooltip({
+    return /* @__PURE__ */ jsx(Tooltip, {
       placement: "top",
-      disabled: !accessibleText
-    });
-    const { ref: triggerRef, ...triggerProps } = getTriggerProps(
-      {
+      disabled: !accessibleText,
+      content: accessibleText,
+      children: /* @__PURE__ */ jsx(Button, {
         variant: "secondary",
-        ...restProps
-      }
-    );
-    const handleRef = useForkRef(triggerRef, ref);
-    return /* @__PURE__ */ jsxs(Fragment, {
-      children: [
-        /* @__PURE__ */ jsx(Button, {
-          ...triggerProps,
-          ref: handleRef,
-          children: label ? label : /* @__PURE__ */ jsx(Icon, {})
-        }),
-        /* @__PURE__ */ jsx(Tooltip, {
-          ...getTooltipProps({ title: accessibleText, ...tooltipProps })
-        })
-      ]
+        ref,
+        ...restProps,
+        children: label ? label : /* @__PURE__ */ jsx(Icon, {})
+      })
     });
   }
 );

package/dist-es/packages/lab/src/contact-details/ContactAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactAction.js","sources":["../src/contact-details/ContactAction.tsx"],"sourcesContent":["import { Button, ButtonProps, useForkRef } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { ComponentType, forwardRef } from \"react\";\nimport { Tooltip, TooltipProps, useTooltip } from \"../tooltip\";\n\nexport type ContactActionProps = ButtonProps & {\n  accessibleText?: string;\n  tooltipProps?: TooltipProps;\n} & (\n    | {\n        label: string;\n        icon?: ComponentType<IconProps>;\n      }\n    | {\n        label?: string;\n        icon: ComponentType<IconProps>;\n      }\n  );\n\nexport const ContactAction = forwardRef<HTMLButtonElement, ContactActionProps>(\n  function ContactAction(props, ref) {\n    const { label, icon, accessibleText, tooltipProps, ...restProps } = props;\n\n    const Icon = icon!;\n\n    const { getTooltipProps, getTriggerProps } = useTooltip({\n      placement: \"top\",\n      disabled: !accessibleText,\n    });\n\n    const { ref: triggerRef, ...triggerProps } = getTriggerProps<typeof Button>(\n      {\n        variant: \"secondary\",\n        ...restProps,\n      }\n    );\n\n    const handleRef = useForkRef(triggerRef, ref);\n\n    return (\n      <>\n        <Button {...triggerProps} ref={handleRef}>\n          {label ? label : <Icon />}\n        </Button>\n        <Tooltip\n          {...getTooltipProps({ title: accessibleText, ...tooltipProps })}\n        />\n      </>\n    );\n  }\n);\n"],"names":["ContactAction"],"mappings":";;;;;;;AAmBO,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,KAAO,EAAA,IAAA,EAAM,cAAgB,EAAA,YAAA,EAAA,GAAiB,WAAc,GAAA,KAAA,CAAA;AAEpE,IAAA,MAAM,IAAO,GAAA,IAAA,CAAA;AAEb,IAAA,MAAM,EAAE,eAAA,EAAiB,eAAgB,EAAA,GAAI,UAAW,CAAA;AAAA,MACtD,SAAW,EAAA,KAAA;AAAA,MACX,UAAU,CAAC,cAAA;AAAA,KACZ,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,GAAA,EAAK,UAAe,EAAA,GAAA,YAAA,EAAiB,GAAA,eAAA;AAAA,MAC3C;AAAA,QACE,OAAS,EAAA,WAAA;AAAA,QACT,GAAG,SAAA;AAAA,OACL;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,UAAA,EAAY,GAAG,CAAA,CAAA;AAE5C,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UAAQ,GAAG,YAAA;AAAA,UAAc,GAAK,EAAA,SAAA;AAAA,UAC5B,QAAA,EAAA,KAAA,GAAQ,KAAQ,mBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,CAAA;AAAA,SACzB,CAAA;AAAA,wBACC,GAAA,CAAA,OAAA,EAAA;AAAA,UACE,GAAG,eAAgB,CAAA,EAAE,OAAO,cAAgB,EAAA,GAAG,cAAc,CAAA;AAAA,SAChE,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"ContactAction.js","sources":["../src/contact-details/ContactAction.tsx"],"sourcesContent":["import { Button, ButtonProps, Tooltip, TooltipProps } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { ComponentType, forwardRef } from \"react\";\n\nexport type ContactActionProps = ButtonProps & {\n  accessibleText?: string;\n  tooltipProps?: TooltipProps;\n} & (\n    | {\n        label: string;\n        icon?: ComponentType<IconProps>;\n      }\n    | {\n        label?: string;\n        icon: ComponentType<IconProps>;\n      }\n  );\n\nexport const ContactAction = forwardRef<HTMLButtonElement, ContactActionProps>(\n  function ContactAction(props, ref) {\n    const { label, icon, accessibleText, tooltipProps, ...restProps } = props;\n\n    const Icon = icon!;\n\n    return (\n      <Tooltip\n        placement=\"top\"\n        disabled={!accessibleText}\n        content={accessibleText}\n      >\n        <Button variant=\"secondary\" ref={ref} {...restProps}>\n          {label ? label : <Icon />}\n        </Button>\n      </Tooltip>\n    );\n  }\n);\n"],"names":["ContactAction"],"mappings":";;;;AAkBO,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,KAAO,EAAA,IAAA,EAAM,cAAgB,EAAA,YAAA,EAAA,GAAiB,WAAc,GAAA,KAAA,CAAA;AAEpE,IAAA,MAAM,IAAO,GAAA,IAAA,CAAA;AAEb,IAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAU,EAAA,KAAA;AAAA,MACV,UAAU,CAAC,cAAA;AAAA,MACX,OAAS,EAAA,cAAA;AAAA,MAET,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,QAAO,OAAQ,EAAA,WAAA;AAAA,QAAY,GAAA;AAAA,QAAW,GAAG,SAAA;AAAA,QACvC,QAAA,EAAA,KAAA,GAAQ,KAAQ,mBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,CAAA;AAAA,OACzB,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/contact-details/ContactAvatar.js

@@ -1,7 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useEffect } from 'react';
-import { makePrefixer } from '@salt-ds/core';
-import { Avatar } from '../avatar/Avatar.js';
+import { makePrefixer, Avatar } from '@salt-ds/core';
 import './internal/FavoriteToggleWithTooltip.js';
 import { useContactDetailsContext } from './internal/ContactDetailsContext.js';
 import { clsx } from 'clsx';
@@ -21,7 +20,7 @@ const ContactAvatar = forwardRef(
     if (variant === "mini") {
       return null;
     }
-    const avatarSize = variant === "default" ? "large" : "medium";
+    const avatarSize = variant === "default" ? 3 : 2;
     return /* @__PURE__ */ jsx(Avatar, {
       ...restProps,
       ref,

package/dist-es/packages/lab/src/contact-details/ContactAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactAvatar.js","sources":["../src/contact-details/ContactAvatar.tsx"],"sourcesContent":["import { forwardRef, useEffect } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Avatar, AvatarProps } from \"../avatar\";\nimport { useContactDetailsContext } from \"./internal\";\nimport { clsx } from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltContactAvatar\");\n\nexport interface ContactAvatarProps extends AvatarProps {}\n\nexport const ContactAvatar = forwardRef<HTMLDivElement, ContactAvatarProps>(\n  function (props, ref) {\n    const { className, ...restProps } = props;\n    const context = useContactDetailsContext();\n    const { variant, primary, isStacked, setHasAvatar } = context;\n\n    useEffect(() => {\n      setHasAvatar(true);\n      return () => {\n        setHasAvatar(false);\n      };\n    }, [setHasAvatar]);\n\n    if (variant === \"mini\") {\n      return null;\n    }\n\n    const avatarSize = variant === \"default\" ? \"large\" : \"medium\";\n    return (\n      <Avatar\n        {...restProps}\n        ref={ref}\n        aria-hidden={true}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"stacked\")]: isStacked,\n          },\n          className\n        )}\n        size={avatarSize}\n      >\n        {primary\n          ? primary\n              .split(\" \")\n              .map((x) => x.charAt(0))\n              .slice(0, 2)\n          : null}\n      </Avatar>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAI9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAAU,OAAO,GAAK,EAAA;AACpB,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AACpC,IAAA,MAAM,UAAU,wBAAyB,EAAA,CAAA;AACzC,IAAA,MAAM,EAAE,OAAA,EAAS,OAAS,EAAA,SAAA,EAAW,cAAiB,GAAA,OAAA,CAAA;AAEtD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,MAAA,OAAO,MAAM;AACX,QAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,OACpB,CAAA;AAAA,KACF,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,IAAA,IAAI,YAAY,MAAQ,EAAA;AACtB,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAM,MAAA,UAAA,GAAa,OAAY,KAAA,SAAA,GAAY,OAAU,GAAA,QAAA,CAAA;AACrD,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,aAAa,EAAA,IAAA;AAAA,MACb,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,SAAA;AAAA,SAC7B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAM,EAAA,UAAA;AAAA,MAEL,oBACG,OACG,CAAA,KAAA,CAAM,GAAG,CAAA,CACT,IAAI,CAAC,CAAA,KAAM,CAAE,CAAA,MAAA,CAAO,CAAC,CAAC,CAAA,CACtB,KAAM,CAAA,CAAA,EAAG,CAAC,CACb,GAAA,IAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"ContactAvatar.js","sources":["../src/contact-details/ContactAvatar.tsx"],"sourcesContent":["import { forwardRef, useEffect } from \"react\";\nimport { makePrefixer, Avatar, AvatarProps } from \"@salt-ds/core\";\nimport { useContactDetailsContext } from \"./internal\";\nimport { clsx } from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltContactAvatar\");\n\nexport type ContactAvatarProps = AvatarProps;\n\nexport const ContactAvatar = forwardRef<HTMLDivElement, ContactAvatarProps>(\n  function (props, ref) {\n    const { className, ...restProps } = props;\n    const context = useContactDetailsContext();\n    const { variant, primary, isStacked, setHasAvatar } = context;\n\n    useEffect(() => {\n      setHasAvatar(true);\n      return () => {\n        setHasAvatar(false);\n      };\n    }, [setHasAvatar]);\n\n    if (variant === \"mini\") {\n      return null;\n    }\n\n    const avatarSize = variant === \"default\" ? 3 : 2;\n    return (\n      <Avatar\n        {...restProps}\n        ref={ref}\n        aria-hidden={true}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"stacked\")]: isStacked,\n          },\n          className\n        )}\n        size={avatarSize}\n      >\n        {primary\n          ? primary\n              .split(\" \")\n              .map((x) => x.charAt(0))\n              .slice(0, 2)\n          : null}\n      </Avatar>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;AAKA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAI9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAAU,OAAO,GAAK,EAAA;AACpB,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AACpC,IAAA,MAAM,UAAU,wBAAyB,EAAA,CAAA;AACzC,IAAA,MAAM,EAAE,OAAA,EAAS,OAAS,EAAA,SAAA,EAAW,cAAiB,GAAA,OAAA,CAAA;AAEtD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,MAAA,OAAO,MAAM;AACX,QAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,OACpB,CAAA;AAAA,KACF,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,IAAA,IAAI,YAAY,MAAQ,EAAA;AACtB,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAM,MAAA,UAAA,GAAa,OAAY,KAAA,SAAA,GAAY,CAAI,GAAA,CAAA,CAAA;AAC/C,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,aAAa,EAAA,IAAA;AAAA,MACb,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,SAAA;AAAA,SAC7B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAM,EAAA,UAAA;AAAA,MAEL,oBACG,OACG,CAAA,KAAA,CAAM,GAAG,CAAA,CACT,IAAI,CAAC,CAAA,KAAM,CAAE,CAAA,MAAA,CAAO,CAAC,CAAC,CAAA,CACtB,KAAM,CAAA,CAAA,EAAG,CAAC,CACb,GAAA,IAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/contact-details/ContactFavoriteToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactFavoriteToggle.js","sources":["../src/contact-details/ContactFavoriteToggle.tsx"],"sourcesContent":["import { useControlled, useId } from \"@salt-ds/core\";\nimport { forwardRef } from \"react\";\nimport {\n  FavoriteToggleWithTooltip,\n  FavoriteToggleWithTooltipProps,\n} from \"./internal\";\nimport { TooltipProps } from \"../tooltip\";\n\nexport interface ContactFavoriteToggleProps\n  extends FavoriteToggleWithTooltipProps {\n  isFavorite?: boolean;\n  defaultIsFavorite?: boolean;\n  onChange?: (isFavorite: boolean) => void;\n  tooltipProps?: TooltipProps;\n}\n\nexport const ContactFavoriteToggle = forwardRef<\n  HTMLSpanElement,\n  ContactFavoriteToggleProps\n>(function ContactFavoriteToggle(props, ref) {\n  const {\n    id: idProp,\n    isFavorite: isFavoriteProp,\n    defaultIsFavorite = false,\n    onChange: onChangeProp,\n    tooltipProps,\n    ...restProps\n  } = props;\n\n  const id = useId(idProp);\n\n  const [isFavorite, setIsFavorite] = useControlled({\n    controlled: isFavoriteProp,\n    default: defaultIsFavorite,\n    name: \"ContactDetails\",\n    state: \"isFavorite\",\n  });\n\n  const onChange = (isSelected: boolean) => {\n    setIsFavorite(isSelected);\n    if (onChangeProp) {\n      onChangeProp(isSelected);\n    }\n  };\n\n  const tooltipTitle = `${isFavorite ? \"Remove\" : \"Mark\"} as favorite`;\n\n  return (\n    <FavoriteToggleWithTooltip\n      {...restProps}\n      id={id}\n      ref={ref}\n      tooltipProps={tooltipProps}\n      aria-label=\"Favorite\"\n      isSelected={isFavorite}\n      onChange={onChange}\n      tooltipTitle={tooltipTitle}\n    />\n  );\n});\n"],"names":["ContactFavoriteToggle"],"mappings":";;;;;;AAgBO,MAAM,qBAAwB,GAAA,UAAA,CAGnC,SAASA,sBAAAA,CAAsB,OAAO,GAAK,EAAA;AAC3C,EAAM,MAAA;AAAA,IACJ,EAAI,EAAA,MAAA;AAAA,IACJ,UAAY,EAAA,cAAA;AAAA,IACZ,iBAAoB,GAAA,KAAA;AAAA,IACpB,QAAU,EAAA,YAAA;AAAA,IACV,YAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,aAAc,CAAA;AAAA,IAChD,UAAY,EAAA,cAAA;AAAA,IACZ,OAAS,EAAA,iBAAA;AAAA,IACT,IAAM,EAAA,gBAAA;AAAA,IACN,KAAO,EAAA,YAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAW,CAAC,UAAwB,KAAA;AACxC,IAAA,aAAA,CAAc,UAAU,CAAA,CAAA;AACxB,IAAA,IAAI,YAAc,EAAA;AAChB,MAAA,YAAA,CAAa,UAAU,CAAA,CAAA;AAAA,KACzB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,CAAG,EAAA,UAAA,GAAa,QAAW,GAAA,MAAA,CAAA,YAAA,CAAA,CAAA;AAEhD,EAAA,uBACG,GAAA,CAAA,yBAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,EAAA;AAAA,IACA,GAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAW,EAAA,UAAA;AAAA,IACX,UAAY,EAAA,UAAA;AAAA,IACZ,QAAA;AAAA,IACA,YAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ContactFavoriteToggle.js","sources":["../src/contact-details/ContactFavoriteToggle.tsx"],"sourcesContent":["import { TooltipProps, useControlled, useId } from \"@salt-ds/core\";\nimport { forwardRef } from \"react\";\nimport {\n  FavoriteToggleWithTooltip,\n  FavoriteToggleWithTooltipProps,\n} from \"./internal\";\n\nexport interface ContactFavoriteToggleProps\n  extends FavoriteToggleWithTooltipProps {\n  isFavorite?: boolean;\n  defaultIsFavorite?: boolean;\n  onChange?: (isFavorite: boolean) => void;\n  tooltipProps?: TooltipProps;\n}\n\nexport const ContactFavoriteToggle = forwardRef<\n  HTMLSpanElement,\n  ContactFavoriteToggleProps\n>(function ContactFavoriteToggle(props, ref) {\n  const {\n    id: idProp,\n    isFavorite: isFavoriteProp,\n    defaultIsFavorite = false,\n    onChange: onChangeProp,\n    tooltipProps,\n    ...restProps\n  } = props;\n\n  const id = useId(idProp);\n\n  const [isFavorite, setIsFavorite] = useControlled({\n    controlled: isFavoriteProp,\n    default: defaultIsFavorite,\n    name: \"ContactDetails\",\n    state: \"isFavorite\",\n  });\n\n  const onChange = (isSelected: boolean) => {\n    setIsFavorite(isSelected);\n    if (onChangeProp) {\n      onChangeProp(isSelected);\n    }\n  };\n\n  const tooltipTitle = `${isFavorite ? \"Remove\" : \"Mark\"} as favorite`;\n\n  return (\n    <FavoriteToggleWithTooltip\n      {...restProps}\n      id={id}\n      ref={ref}\n      tooltipProps={tooltipProps}\n      aria-label=\"Favorite\"\n      isSelected={isFavorite}\n      onChange={onChange}\n      tooltipTitle={tooltipTitle}\n    />\n  );\n});\n"],"names":["ContactFavoriteToggle"],"mappings":";;;;;;AAeO,MAAM,qBAAwB,GAAA,UAAA,CAGnC,SAASA,sBAAAA,CAAsB,OAAO,GAAK,EAAA;AAC3C,EAAM,MAAA;AAAA,IACJ,EAAI,EAAA,MAAA;AAAA,IACJ,UAAY,EAAA,cAAA;AAAA,IACZ,iBAAoB,GAAA,KAAA;AAAA,IACpB,QAAU,EAAA,YAAA;AAAA,IACV,YAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,aAAc,CAAA;AAAA,IAChD,UAAY,EAAA,cAAA;AAAA,IACZ,OAAS,EAAA,iBAAA;AAAA,IACT,IAAM,EAAA,gBAAA;AAAA,IACN,KAAO,EAAA,YAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAW,CAAC,UAAwB,KAAA;AACxC,IAAA,aAAA,CAAc,UAAU,CAAA,CAAA;AACxB,IAAA,IAAI,YAAc,EAAA;AAChB,MAAA,YAAA,CAAa,UAAU,CAAA,CAAA;AAAA,KACzB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,CAAG,EAAA,UAAA,GAAa,QAAW,GAAA,MAAA,CAAA,YAAA,CAAA,CAAA;AAEhD,EAAA,uBACG,GAAA,CAAA,yBAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,EAAA;AAAA,IACA,GAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAW,EAAA,UAAA;AAAA,IACX,UAAY,EAAA,UAAA;AAAA,IACZ,QAAA;AAAA,IACA,YAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/contact-details/MailLinkComponent.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { Link, Text } from '@salt-ds/core';
 import { isEmail } from '../utils/isEmail.js';
 import 'react';
+import '../utils/useFloatingUI.js';
 
 const MailLinkComponent = (props) => {
   const { value, ...restProps } = props;

package/dist-es/packages/lab/src/contact-details/MailLinkComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MailLinkComponent.js","sources":["../src/contact-details/MailLinkComponent.tsx"],"sourcesContent":["import { Link, Text } from \"@salt-ds/core\";\n\nimport { isEmail } from \"../utils\";\nimport { ValueComponentProps } from \"./types\";\n\nexport const MailLinkComponent = (props: ValueComponentProps) => {\n  const { value, ...restProps } = props;\n\n  return isEmail(value) ? (\n    <Link href={`mailto:${value}`} tabIndex={0} maxRows={1} {...restProps}>\n      {value}\n    </Link>\n  ) : (\n    <Text maxRows={1}>{value}</Text>\n  );\n};\n"],"names":[],"mappings":";;;;;AAKa,MAAA,iBAAA,GAAoB,CAAC,KAA+B,KAAA;AAC/D,EAAM,MAAA,EAAE,KAAU,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAEhC,EAAO,OAAA,OAAA,CAAQ,KAAK,CAAA,mBACjB,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,MAAM,CAAU,OAAA,EAAA,KAAA,CAAA,CAAA;AAAA,IAAS,QAAU,EAAA,CAAA;AAAA,IAAG,OAAS,EAAA,CAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IACzD,QAAA,EAAA,KAAA;AAAA,GACH,oBAEC,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,OAAS,EAAA,CAAA;AAAA,IAAI,QAAA,EAAA,KAAA;AAAA,GAAM,CAAA,CAAA;AAE7B;;;;"}
+{"version":3,"file":"MailLinkComponent.js","sources":["../src/contact-details/MailLinkComponent.tsx"],"sourcesContent":["import { Link, Text } from \"@salt-ds/core\";\n\nimport { isEmail } from \"../utils\";\nimport { ValueComponentProps } from \"./types\";\n\nexport const MailLinkComponent = (props: ValueComponentProps) => {\n  const { value, ...restProps } = props;\n\n  return isEmail(value) ? (\n    <Link href={`mailto:${value}`} tabIndex={0} maxRows={1} {...restProps}>\n      {value}\n    </Link>\n  ) : (\n    <Text maxRows={1}>{value}</Text>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAKa,MAAA,iBAAA,GAAoB,CAAC,KAA+B,KAAA;AAC/D,EAAM,MAAA,EAAE,KAAU,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAEhC,EAAO,OAAA,OAAA,CAAQ,KAAK,CAAA,mBACjB,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,MAAM,CAAU,OAAA,EAAA,KAAA,CAAA,CAAA;AAAA,IAAS,QAAU,EAAA,CAAA;AAAA,IAAG,OAAS,EAAA,CAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IACzD,QAAA,EAAA,KAAA;AAAA,GACH,oBAEC,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,OAAS,EAAA,CAAA;AAAA,IAAI,QAAA,EAAA,KAAA;AAAA,GAAM,CAAA,CAAA;AAE7B;;;;"}

package/dist-es/packages/lab/src/contact-details/internal/FavoriteToggleWithTooltip.js

@@ -1,10 +1,7 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useForkRef } from '@salt-ds/core';
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import { Tooltip } from '@salt-ds/core';
 import { FavoriteToggle } from './FavoriteToggle.js';
-import { Tooltip } from '../../tooltip/Tooltip.js';
-import '../../tooltip/TooltipContext.js';
-import { useTooltip } from '../../tooltip/useTooltip.js';
 
 const FavoriteToggleWithTooltip = forwardRef(function FavoriteToggleWithTooltip2(props, ref) {
   const {
@@ -12,22 +9,14 @@ const FavoriteToggleWithTooltip = forwardRef(function FavoriteToggleWithTooltip2
     tooltipProps,
     ...restProps
   } = props;
-  const { getTooltipProps, getTriggerProps } = useTooltip({
+  return /* @__PURE__ */ jsx(Tooltip, {
     enterDelay: 1500,
-    placement: "bottom"
-  });
-  const { ref: triggerRef, ...triggerProps } = getTriggerProps(restProps);
-  const handleRef = useForkRef(triggerRef, ref);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      /* @__PURE__ */ jsx(Tooltip, {
-        ...getTooltipProps({ title: tooltipTitle, ...tooltipProps })
-      }),
-      /* @__PURE__ */ jsx(FavoriteToggle, {
-        ...triggerProps,
-        ref: handleRef
-      })
-    ]
+    placement: "bottom",
+    content: tooltipTitle,
+    children: /* @__PURE__ */ jsx(FavoriteToggle, {
+      ref,
+      ...restProps
+    })
   });
 });
 

package/dist-es/packages/lab/src/contact-details/internal/FavoriteToggleWithTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"FavoriteToggleWithTooltip.js","sources":["../src/contact-details/internal/FavoriteToggleWithTooltip.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport { forwardRef } from \"react\";\nimport { FavoriteToggle, FavoriteToggleProps } from \"./FavoriteToggle\";\nimport { Tooltip, TooltipProps, useTooltip } from \"../../tooltip\";\n\nexport interface FavoriteToggleWithTooltipProps extends FavoriteToggleProps {\n  tooltipProps?: TooltipProps;\n  tooltipTitle?: string;\n}\n\nexport const FavoriteToggleWithTooltip = forwardRef<\n  HTMLSpanElement,\n  FavoriteToggleWithTooltipProps\n>(function FavoriteToggleWithTooltip(props, ref) {\n  const {\n    tooltipTitle = \"Toggle favorite\",\n    tooltipProps,\n    ...restProps\n  } = props;\n\n  const { getTooltipProps, getTriggerProps } = useTooltip({\n    enterDelay: 1500,\n    placement: \"bottom\",\n  });\n\n  const { ref: triggerRef, ...triggerProps } =\n    getTriggerProps<typeof FavoriteToggle>(restProps);\n\n  const handleRef = useForkRef(triggerRef, ref);\n\n  return (\n    <>\n      <Tooltip {...getTooltipProps({ title: tooltipTitle, ...tooltipProps })} />\n      <FavoriteToggle {...triggerProps} ref={handleRef} />\n    </>\n  );\n});\n"],"names":["FavoriteToggleWithTooltip"],"mappings":";;;;;;;;AAUO,MAAM,yBAA4B,GAAA,UAAA,CAGvC,SAASA,0BAAAA,CAA0B,OAAO,GAAK,EAAA;AAC/C,EAAM,MAAA;AAAA,IACJ,YAAe,GAAA,iBAAA;AAAA,IACf,YAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,eAAA,EAAiB,eAAgB,EAAA,GAAI,UAAW,CAAA;AAAA,IACtD,UAAY,EAAA,IAAA;AAAA,IACZ,SAAW,EAAA,QAAA;AAAA,GACZ,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,GAAK,EAAA,UAAA,EAAA,GAAe,YAAa,EAAA,GACvC,gBAAuC,SAAS,CAAA,CAAA;AAElD,EAAM,MAAA,SAAA,GAAY,UAAW,CAAA,UAAA,EAAY,GAAG,CAAA,CAAA;AAE5C,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,OAAA,EAAA;AAAA,QAAS,GAAG,eAAgB,CAAA,EAAE,OAAO,YAAc,EAAA,GAAG,cAAc,CAAA;AAAA,OAAG,CAAA;AAAA,sBACvE,GAAA,CAAA,cAAA,EAAA;AAAA,QAAgB,GAAG,YAAA;AAAA,QAAc,GAAK,EAAA,SAAA;AAAA,OAAW,CAAA;AAAA,KAAA;AAAA,GACpD,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"FavoriteToggleWithTooltip.js","sources":["../src/contact-details/internal/FavoriteToggleWithTooltip.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Tooltip, TooltipProps } from \"@salt-ds/core\";\nimport { FavoriteToggle, FavoriteToggleProps } from \"./FavoriteToggle\";\n\nexport interface FavoriteToggleWithTooltipProps extends FavoriteToggleProps {\n  tooltipProps?: TooltipProps;\n  tooltipTitle?: string;\n}\n\nexport const FavoriteToggleWithTooltip = forwardRef<\n  HTMLSpanElement,\n  FavoriteToggleWithTooltipProps\n>(function FavoriteToggleWithTooltip(props, ref) {\n  const {\n    tooltipTitle = \"Toggle favorite\",\n    tooltipProps,\n    ...restProps\n  } = props;\n\n  return (\n    <Tooltip enterDelay={1500} placement=\"bottom\" content={tooltipTitle}>\n      <FavoriteToggle ref={ref} {...restProps} />\n    </Tooltip>\n  );\n});\n"],"names":["FavoriteToggleWithTooltip"],"mappings":";;;;;AASO,MAAM,yBAA4B,GAAA,UAAA,CAGvC,SAASA,0BAAAA,CAA0B,OAAO,GAAK,EAAA;AAC/C,EAAM,MAAA;AAAA,IACJ,YAAe,GAAA,iBAAA;AAAA,IACf,YAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,IAAQ,UAAY,EAAA,IAAA;AAAA,IAAM,SAAU,EAAA,QAAA;AAAA,IAAS,OAAS,EAAA,YAAA;AAAA,IACrD,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA;AAAA,MAAe,GAAA;AAAA,MAAW,GAAG,SAAA;AAAA,KAAW,CAAA;AAAA,GAC3C,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/content-status/ContentStatus.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* Styles applied to root component (ContentStatus) */\n.saltContentStatus {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: var(--salt-text-textAlign-embedded);\n  gap: var(--salt-size-unit);\n}\n\n/* Styles applied to inner content */\n.saltContentStatus-content {\n  color: var(--saltContentStatus-content-color, var(--salt-text-primary-foreground));\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-size-unit);\n}\n\n/* Styles applied to status title */\n.saltContentStatus-title {\n  font-weight: var(--salt-typography-fontWeight-semiBold);\n}\n\n/* Styles applied to status message */\n.saltContentStatus-message {\n}\n\n/* Styles applied to status actions */\n.saltContentStatus-actions {\n  margin-top: var(--saltContentStatus-actions-marginTop, var(--salt-size-unit));\n}\n";
+var css_248z = "/* Styles applied to root component (ContentStatus) */\n.saltContentStatus {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: var(--salt-text-textAlign-embedded);\n  gap: var(--salt-size-unit);\n}\n\n/* Styles applied to inner content */\n.saltContentStatus-content {\n  color: var(--saltContentStatus-content-color, var(--salt-text-primary-foreground));\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-size-unit);\n}\n\n/* Styles applied to status title */\n.saltContentStatus-title {\n  font-weight: var(--salt-text-display1-fontWeight); /* TODO: Use correct token */\n}\n\n/* Styles applied to status message */\n.saltContentStatus-message {\n}\n\n/* Styles applied to status actions */\n.saltContentStatus-actions {\n  margin-top: var(--saltContentStatus-actions-marginTop, var(--salt-size-unit));\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/lab/src/content-status/internal/StatusIndicator.js

@@ -1,9 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { makePrefixer, StatusIndicator as StatusIndicator$1 } from '@salt-ds/core';
+import { makePrefixer, Spinner, StatusIndicator as StatusIndicator$1 } from '@salt-ds/core';
 import { clsx } from 'clsx';
 import { CircularProgress } from '../../progress/CircularProgress/CircularProgress.js';
 import '../../progress/LinearProgress/LinearProgress.js';
-import { Spinner } from '../../spinner/Spinner.js';
 
 const withBaseName = makePrefixer("saltContentStatus");
 function StatusIndicator({

package/dist-es/packages/lab/src/content-status/internal/StatusIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.js","sources":["../src/content-status/internal/StatusIndicator.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  StatusIndicator as BaseStatusIndicator,\n  StatusIndicatorProps as BaseStatusIndicatorProps,\n} from \"@salt-ds/core\";\nimport { ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { CircularProgress, CircularProgressProps } from \"../../progress\";\nimport { Spinner, SpinnerProps } from \"../../spinner\";\n\nexport interface StatusIndicatorProps\n  extends Pick<SpinnerProps, \"disableAnnouncer\">,\n    Pick<CircularProgressProps, \"unit\" | \"value\"> {\n  title?: string;\n  message?: string;\n  CircularProgressProps?: Partial<CircularProgressProps>;\n  SpinnerProps?: Partial<SpinnerProps>;\n  id?: string;\n  status?: BaseStatusIndicatorProps[\"status\"] | \"loading\";\n}\n\nconst withBaseName = makePrefixer(\"saltContentStatus\");\n\nexport function StatusIndicator({\n  status = \"info\",\n  disableAnnouncer,\n  unit,\n  value,\n  title,\n  message,\n  CircularProgressProps: {\n    className: circularProgressClassName,\n    ...restCircularProgressProps\n  } = {},\n  SpinnerProps: { className: spinnerClassName, ...restSpinnerProps } = {},\n  id,\n}: StatusIndicatorProps): ReactElement {\n  if (status === \"loading\") {\n    if (value !== undefined) {\n      return (\n        <CircularProgress\n          aria-label={title || message}\n          className={clsx(\n            withBaseName(\"determinateLoading\"),\n            circularProgressClassName\n          )}\n          size=\"small\"\n          unit={unit}\n          value={value}\n          {...restCircularProgressProps}\n        />\n      );\n    }\n    return (\n      <Spinner\n        className={clsx(withBaseName(\"indeterminateLoading\"), spinnerClassName)}\n        // Announcement of the content status is more useful than completion announcement from spinner\n        completionAnnouncement={null}\n        data-testid={`spinner-${id!}`}\n        disableAnnouncer={disableAnnouncer}\n        {...restSpinnerProps}\n      />\n    );\n  }\n\n  return (\n    <BaseStatusIndicator\n      status={status}\n      data-jpmui-test={`icon-${status}-${id!}`}\n      size={2}\n    />\n  );\n}\n"],"names":["BaseStatusIndicator"],"mappings":";;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,SAAS,eAAgB,CAAA;AAAA,EAC9B,MAAS,GAAA,MAAA;AAAA,EACT,gBAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,qBAAuB,EAAA;AAAA,IACrB,SAAW,EAAA,yBAAA;AAAA,IACR,GAAA,yBAAA;AAAA,MACD,EAAC;AAAA,EACL,cAAc,EAAE,SAAA,EAAW,gBAAqB,EAAA,GAAA,gBAAA,KAAqB,EAAC;AAAA,EACtE,EAAA;AACF,CAAuC,EAAA;AACrC,EAAA,IAAI,WAAW,SAAW,EAAA;AACxB,IAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AACvB,MAAA,uBACG,GAAA,CAAA,gBAAA,EAAA;AAAA,QACC,cAAY,KAAS,IAAA,OAAA;AAAA,QACrB,SAAW,EAAA,IAAA;AAAA,UACT,aAAa,oBAAoB,CAAA;AAAA,UACjC,yBAAA;AAAA,SACF;AAAA,QACA,IAAK,EAAA,OAAA;AAAA,QACL,IAAA;AAAA,QACA,KAAA;AAAA,QACC,GAAG,yBAAA;AAAA,OACN,CAAA,CAAA;AAAA,KAEJ;AACA,IAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,sBAAsB,GAAG,gBAAgB,CAAA;AAAA,MAEtE,sBAAwB,EAAA,IAAA;AAAA,MACxB,eAAa,CAAW,QAAA,EAAA,EAAA,CAAA,CAAA;AAAA,MACxB,gBAAA;AAAA,MACC,GAAG,gBAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAA,uBACG,GAAA,CAAAA,iBAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,iBAAA,EAAiB,QAAQ,MAAU,CAAA,CAAA,EAAA,EAAA,CAAA,CAAA;AAAA,IACnC,IAAM,EAAA,CAAA;AAAA,GACR,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"StatusIndicator.js","sources":["../src/content-status/internal/StatusIndicator.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  StatusIndicator as BaseStatusIndicator,\n  StatusIndicatorProps as BaseStatusIndicatorProps,\n  Spinner,\n  SpinnerProps,\n} from \"@salt-ds/core\";\nimport { ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { CircularProgress, CircularProgressProps } from \"../../progress\";\n\nexport interface StatusIndicatorProps\n  extends Pick<SpinnerProps, \"disableAnnouncer\">,\n    Pick<CircularProgressProps, \"unit\" | \"value\"> {\n  title?: string;\n  message?: string;\n  CircularProgressProps?: Partial<CircularProgressProps>;\n  SpinnerProps?: Partial<SpinnerProps>;\n  id?: string;\n  status?: BaseStatusIndicatorProps[\"status\"] | \"loading\";\n}\n\nconst withBaseName = makePrefixer(\"saltContentStatus\");\n\nexport function StatusIndicator({\n  status = \"info\",\n  disableAnnouncer,\n  unit,\n  value,\n  title,\n  message,\n  CircularProgressProps: {\n    className: circularProgressClassName,\n    ...restCircularProgressProps\n  } = {},\n  SpinnerProps: { className: spinnerClassName, ...restSpinnerProps } = {},\n  id,\n}: StatusIndicatorProps): ReactElement {\n  if (status === \"loading\") {\n    if (value !== undefined) {\n      return (\n        <CircularProgress\n          aria-label={title || message}\n          className={clsx(\n            withBaseName(\"determinateLoading\"),\n            circularProgressClassName\n          )}\n          size=\"small\"\n          unit={unit}\n          value={value}\n          {...restCircularProgressProps}\n        />\n      );\n    }\n    return (\n      <Spinner\n        className={clsx(withBaseName(\"indeterminateLoading\"), spinnerClassName)}\n        // Announcement of the content status is more useful than completion announcement from spinner\n        completionAnnouncement={null}\n        data-testid={`spinner-${id!}`}\n        disableAnnouncer={disableAnnouncer}\n        {...restSpinnerProps}\n      />\n    );\n  }\n\n  return (\n    <BaseStatusIndicator\n      status={status}\n      data-jpmui-test={`icon-${status}-${id!}`}\n      size={2}\n    />\n  );\n}\n"],"names":["BaseStatusIndicator"],"mappings":";;;;;;AAuBA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,SAAS,eAAgB,CAAA;AAAA,EAC9B,MAAS,GAAA,MAAA;AAAA,EACT,gBAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,qBAAuB,EAAA;AAAA,IACrB,SAAW,EAAA,yBAAA;AAAA,IACR,GAAA,yBAAA;AAAA,MACD,EAAC;AAAA,EACL,cAAc,EAAE,SAAA,EAAW,gBAAqB,EAAA,GAAA,gBAAA,KAAqB,EAAC;AAAA,EACtE,EAAA;AACF,CAAuC,EAAA;AACrC,EAAA,IAAI,WAAW,SAAW,EAAA;AACxB,IAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AACvB,MAAA,uBACG,GAAA,CAAA,gBAAA,EAAA;AAAA,QACC,cAAY,KAAS,IAAA,OAAA;AAAA,QACrB,SAAW,EAAA,IAAA;AAAA,UACT,aAAa,oBAAoB,CAAA;AAAA,UACjC,yBAAA;AAAA,SACF;AAAA,QACA,IAAK,EAAA,OAAA;AAAA,QACL,IAAA;AAAA,QACA,KAAA;AAAA,QACC,GAAG,yBAAA;AAAA,OACN,CAAA,CAAA;AAAA,KAEJ;AACA,IAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,sBAAsB,GAAG,gBAAgB,CAAA;AAAA,MAEtE,sBAAwB,EAAA,IAAA;AAAA,MACxB,eAAa,CAAW,QAAA,EAAA,EAAA,CAAA,CAAA;AAAA,MACxB,gBAAA;AAAA,MACC,GAAG,gBAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAA,uBACG,GAAA,CAAAA,iBAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,iBAAA,EAAiB,QAAQ,MAAU,CAAA,CAAA,EAAA,EAAA,CAAA,CAAA;AAAA,IACnC,IAAM,EAAA,CAAA;AAAA,GACR,CAAA,CAAA;AAEJ;;;;"}

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

@@ -3,6 +3,7 @@ import { forwardRef, useState, useCallback, Children } from 'react';
 import { makePrefixer, useIsomorphicLayoutEffect } from '@salt-ds/core';
 import { DeckItem } from '../deck-item/DeckItem.js';
 import '../responsive/useResizeObserver.js';
+import '../utils/useFloatingUI.js';
 import { useWidth } from '../responsive/useWidth.js';
 import './DeckLayout.css.js';
 import { clsx } from 'clsx';

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 { 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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"}
+{"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/DialogContent.js

@@ -15,7 +15,6 @@ const DialogContent = forwardRef(
       ...rest,
       className: clsx(
         withBaseName(),
-        className,
         {
           [withBaseName("leftGutter")]: !!status
         },

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 { 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;;;;"}
+{"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          {\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;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/dropdown/Dropdown.js

@@ -7,6 +7,7 @@ import '../common-hooks/keyUtils.js';
 import { useCollectionItems } from '../common-hooks/useCollectionItems.js';
 import '../responsive/useResizeObserver.js';
 import { forwardCallbackProps } from '../utils/forwardCallbackProps.js';
+import '../utils/useFloatingUI.js';
 import { List } from '../list/List.js';
 import { DropdownBase } from './DropdownBase.js';
 import { DropdownButton } from './DropdownButton.js';

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.tsx"],"sourcesContent":["import { useForkRef, useIdMemo as useId } from \"@salt-ds/core\";\nimport {\n  cloneElement,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport {\n  CollectionItem,\n  CollectionProvider,\n  itemToString as defaultItemToString,\n  SelectionProps,\n  SelectionStrategy,\n  SingleSelectionStrategy,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { List } from \"../list/List\";\nimport { ListProps } from \"../list/listTypes\";\nimport { DropdownBase, MaybeChildProps } from \"./DropdownBase\";\nimport { DropdownButton } from \"./DropdownButton\";\nimport { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdown } from \"./useDropdown\";\nimport { forwardCallbackProps } from \"../utils\";\n\nexport interface DropdownProps<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\"\n> extends DropdownBaseProps,\n    Pick<\n      ListProps<Item, Selection>,\n      \"ListItem\" | \"itemToString\" | \"source\" | \"width\"\n    >,\n    SelectionProps<Item, Selection> {\n  ListProps?: Omit<\n    ListProps<Item, Selection>,\n    \"ListItem\" | \"itemToString\" | \"source\"\n  >;\n}\n\nexport const Dropdown = forwardRef(function Dropdown<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\"\n>(\n  {\n    \"aria-label\": ariaLabel,\n    children,\n    defaultIsOpen,\n    defaultSelected,\n    id: idProp,\n    isOpen: isOpenProp,\n    itemToString = defaultItemToString,\n    onOpenChange,\n    onSelectionChange,\n    selected: selectedProp,\n    selectionStrategy,\n    source,\n    triggerComponent,\n    ListItem,\n    ListProps,\n    width = 180,\n    ...props\n  }: DropdownProps<Item, Selection>,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const id = useId(idProp);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef<HTMLDivElement>(rootRef, forwardedRef);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    children,\n    options: {\n      itemToString,\n    },\n  });\n\n  const {\n    highlightedIndex,\n    triggerLabel,\n    listHandlers,\n    listControlProps,\n    selected,\n    ...dropdownListHook\n  } = useDropdown<Item, Selection>({\n    collectionHook,\n    defaultHighlightedIndex: ListProps?.defaultHighlightedIndex,\n    defaultIsOpen,\n    defaultSelected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof defaultSelected\n    >(defaultSelected),\n    highlightedIndex: ListProps?.highlightedIndex,\n    isOpen: isOpenProp,\n    itemToString,\n    label: \"Dropdown\",\n    onHighlight: ListProps?.onHighlight,\n    onOpenChange,\n    onSelectionChange,\n    selected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof selectedProp\n    >(selectedProp),\n    selectionStrategy,\n  });\n\n  const collectionItemsToItem = useCallback(\n    (\n      itemOrItems?: CollectionItem<Item> | null | CollectionItem<Item>[]\n    ):\n      | undefined\n      | (Selection extends SingleSelectionStrategy ? Item | null : Item[]) => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? Item | null\n        : Item[];\n      if (Array.isArray(itemOrItems)) {\n        return itemOrItems.map((i) => i.value) as returnType;\n      } else if (itemOrItems) {\n        return itemOrItems.value as returnType;\n      }\n    },\n    []\n  );\n\n  const getTriggerComponent = () => {\n    const ariaProps = {\n      \"aria-activedescendant\": dropdownListHook.isOpen\n        ? listControlProps?.[\"aria-activedescendant\"]\n        : undefined,\n      \"aria-label\": ariaLabel,\n    };\n    if (triggerComponent) {\n      const ownProps = triggerComponent.props as MaybeChildProps;\n      return cloneElement(\n        triggerComponent,\n        forwardCallbackProps(ownProps, {\n          ...listControlProps,\n          ...ariaProps,\n        })\n      );\n    } else {\n      return (\n        <DropdownButton\n          label={triggerLabel}\n          {...listControlProps}\n          {...ariaProps}\n        />\n      );\n    }\n  };\n\n  return (\n    <CollectionProvider<Item> collectionHook={collectionHook}>\n      <DropdownBase\n        {...props}\n        id={id}\n        isOpen={dropdownListHook.isOpen}\n        onOpenChange={dropdownListHook.onOpenChange}\n        ref={forkedRef}\n        width={width}\n      >\n        {getTriggerComponent()}\n        <List<Item, Selection>\n          ListItem={ListItem}\n          itemToString={itemToString}\n          {...ListProps}\n          highlightedIndex={highlightedIndex}\n          listHandlers={listHandlers}\n          onSelectionChange={onSelectionChange}\n          selected={collectionItemsToItem(selected)}\n          selectionStrategy={selectionStrategy}\n          data-testid=\"dropdown-list\"\n        />\n      </DropdownBase>\n    </CollectionProvider>\n  );\n}) as <Item, Selection extends SelectionStrategy = \"default\">(\n  props: DropdownProps<Item, Selection> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  }\n) => ReactElement<DropdownProps<Item, Selection>>;\n"],"names":["Dropdown","itemToString","defaultItemToString","ListProps","useId"],"mappings":";;;;;;;;;;;;;;AA0Ca,MAAA,QAAA,GAAW,UAAW,CAAA,SAASA,SAI1C,CAAA;AAAA,EACE,YAAc,EAAA,SAAA;AAAA,EACd,QAAA;AAAA,EACA,aAAA;AAAA,EACA,eAAA;AAAA,EACA,EAAI,EAAA,MAAA;AAAA,EACJ,MAAQ,EAAA,UAAA;AAAA,gBACRC,cAAe,GAAAC,YAAA;AAAA,EACf,YAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,iBAAA;AAAA,EACA,MAAA;AAAA,EACA,gBAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAAC,EAAAA,UAAAA;AAAA,EACA,KAAQ,GAAA,GAAA;AAAA,EACL,GAAA,KAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAM,MAAA,EAAA,GAAKC,UAAM,MAAM,CAAA,CAAA;AACvB,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA,CAAA;AAC3C,EAAM,MAAA,SAAA,GAAY,UAA2B,CAAA,OAAA,EAAS,YAAY,CAAA,CAAA;AAElE,EAAA,MAAM,iBAAiB,kBAAyB,CAAA;AAAA,IAC9C,EAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAS,EAAA;AAAA,oBACPH,cAAA;AAAA,KACF;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,gBAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAA;AAAA,IACG,GAAA,gBAAA;AAAA,MACD,WAA6B,CAAA;AAAA,IAC/B,cAAA;AAAA,IACA,uBAAA,EAAyBE,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,UAAW,CAAA,uBAAA;AAAA,IACpC,aAAA;AAAA,IACA,eAAA,EAAiB,cAAe,CAAA,oBAAA,CAG9B,eAAe,CAAA;AAAA,IACjB,gBAAA,EAAkBA,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,UAAW,CAAA,gBAAA;AAAA,IAC7B,MAAQ,EAAA,UAAA;AAAA,kBACRF,cAAA;AAAA,IACA,KAAO,EAAA,UAAA;AAAA,IACP,WAAA,EAAaE,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,UAAW,CAAA,WAAA;AAAA,IACxB,YAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA,EAAU,cAAe,CAAA,oBAAA,CAGvB,YAAY,CAAA;AAAA,IACd,iBAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAC5B,CACE,WAGwE,KAAA;AAIxE,MAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,WAAW,CAAG,EAAA;AAC9B,QAAA,OAAO,WAAY,CAAA,GAAA,CAAI,CAAC,CAAA,KAAM,EAAE,KAAK,CAAA,CAAA;AAAA,iBAC5B,WAAa,EAAA;AACtB,QAAA,OAAO,WAAY,CAAA,KAAA,CAAA;AAAA,OACrB;AAAA,KACF;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAA,MAAM,sBAAsB,MAAM;AAChC,IAAA,MAAM,SAAY,GAAA;AAAA,MAChB,uBAAyB,EAAA,gBAAA,CAAiB,MACtC,GAAA,gBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAmB,uBACnB,CAAA,GAAA,KAAA,CAAA;AAAA,MACJ,YAAc,EAAA,SAAA;AAAA,KAChB,CAAA;AACA,IAAA,IAAI,gBAAkB,EAAA;AACpB,MAAA,MAAM,WAAW,gBAAiB,CAAA,KAAA,CAAA;AAClC,MAAO,OAAA,YAAA;AAAA,QACL,gBAAA;AAAA,QACA,qBAAqB,QAAU,EAAA;AAAA,UAC7B,GAAG,gBAAA;AAAA,UACH,GAAG,SAAA;AAAA,SACJ,CAAA;AAAA,OACH,CAAA;AAAA,KACK,MAAA;AACL,MAAA,uBACG,GAAA,CAAA,cAAA,EAAA;AAAA,QACC,KAAO,EAAA,YAAA;AAAA,QACN,GAAG,gBAAA;AAAA,QACH,GAAG,SAAA;AAAA,OACN,CAAA,CAAA;AAAA,KAEJ;AAAA,GACF,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,kBAAA,EAAA;AAAA,IAAyB,cAAA;AAAA,IACxB,QAAC,kBAAA,IAAA,CAAA,YAAA,EAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,EAAA;AAAA,MACA,QAAQ,gBAAiB,CAAA,MAAA;AAAA,MACzB,cAAc,gBAAiB,CAAA,YAAA;AAAA,MAC/B,GAAK,EAAA,SAAA;AAAA,MACL,KAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAoB,mBAAA,EAAA;AAAA,wBACpB,GAAA,CAAA,IAAA,EAAA;AAAA,UACC,QAAA;AAAA,wBACAF,cAAA;AAAA,UACC,GAAGE,UAAAA;AAAA,UACJ,gBAAA;AAAA,UACA,YAAA;AAAA,UACA,iBAAA;AAAA,UACA,QAAA,EAAU,sBAAsB,QAAQ,CAAA;AAAA,UACxC,iBAAA;AAAA,UACA,aAAY,EAAA,eAAA;AAAA,SACd,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.tsx"],"sourcesContent":["import { useForkRef, useIdMemo as useId } from \"@salt-ds/core\";\nimport {\n  cloneElement,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport {\n  CollectionItem,\n  CollectionProvider,\n  itemToString as defaultItemToString,\n  SelectionProps,\n  SelectionStrategy,\n  SingleSelectionStrategy,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { List } from \"../list/List\";\nimport { ListProps } from \"../list/listTypes\";\nimport { DropdownBase, MaybeChildProps } from \"./DropdownBase\";\nimport { DropdownButton } from \"./DropdownButton\";\nimport { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdown } from \"./useDropdown\";\nimport { forwardCallbackProps } from \"../utils\";\n\nexport interface DropdownProps<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\"\n> extends DropdownBaseProps,\n    Pick<\n      ListProps<Item, Selection>,\n      \"ListItem\" | \"itemToString\" | \"source\" | \"width\"\n    >,\n    SelectionProps<Item, Selection> {\n  ListProps?: Omit<\n    ListProps<Item, Selection>,\n    \"ListItem\" | \"itemToString\" | \"source\"\n  >;\n}\n\nexport const Dropdown = forwardRef(function Dropdown<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\"\n>(\n  {\n    \"aria-label\": ariaLabel,\n    children,\n    defaultIsOpen,\n    defaultSelected,\n    id: idProp,\n    isOpen: isOpenProp,\n    itemToString = defaultItemToString,\n    onOpenChange,\n    onSelectionChange,\n    selected: selectedProp,\n    selectionStrategy,\n    source,\n    triggerComponent,\n    ListItem,\n    ListProps,\n    width = 180,\n    ...props\n  }: DropdownProps<Item, Selection>,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const id = useId(idProp);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef<HTMLDivElement>(rootRef, forwardedRef);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    children,\n    options: {\n      itemToString,\n    },\n  });\n\n  const {\n    highlightedIndex,\n    triggerLabel,\n    listHandlers,\n    listControlProps,\n    selected,\n    ...dropdownListHook\n  } = useDropdown<Item, Selection>({\n    collectionHook,\n    defaultHighlightedIndex: ListProps?.defaultHighlightedIndex,\n    defaultIsOpen,\n    defaultSelected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof defaultSelected\n    >(defaultSelected),\n    highlightedIndex: ListProps?.highlightedIndex,\n    isOpen: isOpenProp,\n    itemToString,\n    label: \"Dropdown\",\n    onHighlight: ListProps?.onHighlight,\n    onOpenChange,\n    onSelectionChange,\n    selected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof selectedProp\n    >(selectedProp),\n    selectionStrategy,\n  });\n\n  const collectionItemsToItem = useCallback(\n    (\n      itemOrItems?: CollectionItem<Item> | null | CollectionItem<Item>[]\n    ):\n      | undefined\n      | (Selection extends SingleSelectionStrategy ? Item | null : Item[]) => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? Item | null\n        : Item[];\n      if (Array.isArray(itemOrItems)) {\n        return itemOrItems.map((i) => i.value) as returnType;\n      } else if (itemOrItems) {\n        return itemOrItems.value as returnType;\n      }\n    },\n    []\n  );\n\n  const getTriggerComponent = () => {\n    const ariaProps = {\n      \"aria-activedescendant\": dropdownListHook.isOpen\n        ? listControlProps?.[\"aria-activedescendant\"]\n        : undefined,\n      \"aria-label\": ariaLabel,\n    };\n    if (triggerComponent) {\n      const ownProps = triggerComponent.props as MaybeChildProps;\n      return cloneElement(\n        triggerComponent,\n        forwardCallbackProps(ownProps, {\n          ...listControlProps,\n          ...ariaProps,\n        })\n      );\n    } else {\n      return (\n        <DropdownButton\n          label={triggerLabel}\n          {...listControlProps}\n          {...ariaProps}\n        />\n      );\n    }\n  };\n\n  return (\n    <CollectionProvider<Item> collectionHook={collectionHook}>\n      <DropdownBase\n        {...props}\n        id={id}\n        isOpen={dropdownListHook.isOpen}\n        onOpenChange={dropdownListHook.onOpenChange}\n        ref={forkedRef}\n        width={width}\n      >\n        {getTriggerComponent()}\n        <List<Item, Selection>\n          ListItem={ListItem}\n          itemToString={itemToString}\n          {...ListProps}\n          highlightedIndex={highlightedIndex}\n          listHandlers={listHandlers}\n          onSelectionChange={onSelectionChange}\n          selected={collectionItemsToItem(selected)}\n          selectionStrategy={selectionStrategy}\n          data-testid=\"dropdown-list\"\n        />\n      </DropdownBase>\n    </CollectionProvider>\n  );\n}) as <Item, Selection extends SelectionStrategy = \"default\">(\n  props: DropdownProps<Item, Selection> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  }\n) => ReactElement<DropdownProps<Item, Selection>>;\n"],"names":["Dropdown","itemToString","defaultItemToString","ListProps","useId"],"mappings":"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"}

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

@@ -1,11 +1,11 @@
 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 { flip, shift, limitShift, size } from '@floating-ui/react';
+import { makePrefixer, useIdMemo, useFloatingUI, useForkRef } from '@salt-ds/core';
 import { clsx } from 'clsx';
 import { forwardRef, useRef, Children, useState, cloneElement } from 'react';
 import { forwardCallbackProps } from '../utils/forwardCallbackProps.js';
+import '../utils/useFloatingUI.js';
 import { useDropdownBase } from './useDropdownBase.js';
-import { useFloatingUI } from '../popper/useFloatingUI.js';
 import { Portal } from '../portal/Portal.js';
 import { useWindow, isDesktop } from '../window/WindowContext.js';
 import '../window/ElectronWindow.js';

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 { 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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"}
+{"version":3,"file":"DropdownBase.js","sources":["../src/dropdown/DropdownBase.tsx"],"sourcesContent":["import { flip, limitShift, shift, size } from \"@floating-ui/react\";\nimport {\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useIdMemo as useId,\n} 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 { 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.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".saltDropdownButton {\n  --saltButton-background-hover: var(--salt-actionable-secondary-background);\n  --saltButton-background-active: var(--salt-actionable-secondary-background);\n  --saltButton-fontWeight: var(--salt-typography-fontWeight-medium);\n  --saltButton-textAlign: left;\n  --saltButton-textTransform: none;\n  --saltButton-width: 100%;\n}\n\n.saltDropdownButton:active {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n  --saltButton-text-color-active: var(--salt-actionable-secondary-foreground);\n}\n\n.saltDropdownButton-fullwidth {\n  width: 100%;\n}\n\n.saltDropdownButton-content {\n  align-items: center;\n  flex: 1;\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n}\n\n.saltDropdownButton-buttonLabel {\n  display: inline-block;\n  letter-spacing: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n.saltDropdownButton-formField.saltButton:focus,\n.saltDropdownButton-formField.saltButton:focus-visible {\n  outline: none;\n}\n";
+var css_248z = ".saltDropdownButton {\n  --saltButton-background-hover: var(--salt-actionable-secondary-background);\n  --saltButton-background-active: var(--salt-actionable-secondary-background);\n  --saltButton-fontWeight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n  --saltButton-textAlign: left;\n  --saltButton-textTransform: none;\n  --saltButton-width: 100%;\n}\n\n.saltDropdownButton:active {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n  --saltButton-text-color-active: var(--salt-actionable-secondary-foreground);\n}\n\n.saltDropdownButton-fullwidth {\n  width: 100%;\n}\n\n.saltDropdownButton-content {\n  align-items: center;\n  flex: 1;\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n}\n\n.saltDropdownButton-buttonLabel {\n  display: inline-block;\n  letter-spacing: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n.saltDropdownButton-formField.saltButton:focus,\n.saltDropdownButton-formField.saltButton:focus-visible {\n  outline: none;\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

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

@@ -8,6 +8,7 @@ import '../list/VirtualizedList.js';
 import '../common-hooks/collectionProvider.js';
 import { itemToString } from '../common-hooks/itemToString.js';
 import '../common-hooks/keyUtils.js';
+import '../utils/useFloatingUI.js';
 import 'react/jsx-runtime';
 import '../responsive/useResizeObserver.js';
 

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

@@ -1 +1 @@
-{"version":3,"file":"useDropdown.js","sources":["../src/dropdown/useDropdown.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { useCallback, useMemo } from \"react\";\nimport { ListHookProps, ListHookResult, useList } from \"../list\";\nimport { DropdownHookResult, DropdownHookProps } from \"./dropdownTypes\";\nimport {\n  CollectionItem,\n  itemToString as defaultItemToString,\n  SelectionChangeHandler,\n  SelectionStrategy,\n} from \"../common-hooks\";\n\nconst NULL_REF = { current: null };\n\nexport interface DropdownListHookProps<Item, Strategy extends SelectionStrategy>\n  extends Partial<Omit<DropdownHookProps, \"onKeyDown\">>,\n    Omit<ListHookProps<Item, Strategy>, \"containerRef\"> {\n  itemToString?: (item: Item) => string;\n}\n\nexport interface DropdownListHookResult<\n  Item,\n  Selection extends SelectionStrategy\n> extends Partial<ListHookResult<Item, Selection>>,\n    Partial<DropdownHookResult> {\n  onOpenChange: any;\n  triggerLabel?: string;\n}\n\nexport const useDropdown = <\n  Item,\n  Selection extends SelectionStrategy = \"default\"\n>({\n  collectionHook,\n  defaultHighlightedIndex: defaultHighlightedIndexProp,\n  defaultIsOpen,\n  defaultSelected,\n  highlightedIndex: highlightedIndexProp,\n  isOpen: isOpenProp,\n  itemToString = defaultItemToString,\n  onHighlight,\n  onOpenChange,\n  onSelectionChange,\n  selected,\n  selectionStrategy,\n}: DropdownListHookProps<Item, Selection>): DropdownListHookResult<\n  Item,\n  Selection\n> => {\n  const isMultiSelect =\n    selectionStrategy === \"multiple\" || selectionStrategy === \"extended\";\n\n  const [isOpen, setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen ?? false,\n    name: \"useDropdownList\",\n  });\n\n  const handleSelectionChange = useCallback<\n    SelectionChangeHandler<Item, Selection>\n  >(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n        onOpenChange?.(false);\n      }\n      onSelectionChange?.(evt, selected);\n    },\n    [isMultiSelect, onOpenChange, onSelectionChange, setIsOpen]\n  );\n\n  const listHook = useList<Item, Selection>({\n    collectionHook,\n    defaultHighlightedIndex:\n      defaultHighlightedIndexProp ?? highlightedIndexProp === undefined\n        ? 0\n        : undefined,\n    defaultSelected,\n    label: \"useDropDownList\",\n    onSelectionChange: handleSelectionChange,\n    containerRef: NULL_REF,\n    highlightedIndex: highlightedIndexProp,\n    onHighlight,\n    selected,\n    selectionStrategy,\n    tabToSelect: !isMultiSelect,\n  });\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      onOpenChange?.(open);\n    },\n    [onOpenChange, setIsOpen]\n  );\n\n  const triggerLabel = useMemo(() => {\n    if (isMultiSelect && Array.isArray(listHook.selected)) {\n      const selectedItems = listHook.selected as CollectionItem<Item>[];\n      if (selectedItems.length === 0) {\n        return undefined;\n      } else if (selectedItems.length === 1) {\n        const { value } = selectedItems[0];\n        return value === null ? undefined : itemToString(value);\n      } else {\n        return `${selectedItems.length} items selected`;\n      }\n    } else {\n      const selectedItem = listHook.selected as CollectionItem<Item>;\n      return selectedItem == null || selectedItem.value === null\n        ? undefined\n        : itemToString(selectedItem.value);\n    }\n  }, [isMultiSelect, itemToString, listHook.selected]);\n\n  return {\n    isOpen,\n    onOpenChange: handleOpenChange,\n    triggerLabel,\n    ...listHook,\n  };\n};\n"],"names":["itemToString","defaultItemToString","selected"],"mappings":"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"}
+{"version":3,"file":"useDropdown.js","sources":["../src/dropdown/useDropdown.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { useCallback, useMemo } from \"react\";\nimport { ListHookProps, ListHookResult, useList } from \"../list\";\nimport { DropdownHookResult, DropdownHookProps } from \"./dropdownTypes\";\nimport {\n  CollectionItem,\n  itemToString as defaultItemToString,\n  SelectionChangeHandler,\n  SelectionStrategy,\n} from \"../common-hooks\";\n\nconst NULL_REF = { current: null };\n\nexport interface DropdownListHookProps<Item, Strategy extends SelectionStrategy>\n  extends Partial<Omit<DropdownHookProps, \"onKeyDown\">>,\n    Omit<ListHookProps<Item, Strategy>, \"containerRef\"> {\n  itemToString?: (item: Item) => string;\n}\n\nexport interface DropdownListHookResult<\n  Item,\n  Selection extends SelectionStrategy\n> extends Partial<ListHookResult<Item, Selection>>,\n    Partial<DropdownHookResult> {\n  onOpenChange: any;\n  triggerLabel?: string;\n}\n\nexport const useDropdown = <\n  Item,\n  Selection extends SelectionStrategy = \"default\"\n>({\n  collectionHook,\n  defaultHighlightedIndex: defaultHighlightedIndexProp,\n  defaultIsOpen,\n  defaultSelected,\n  highlightedIndex: highlightedIndexProp,\n  isOpen: isOpenProp,\n  itemToString = defaultItemToString,\n  onHighlight,\n  onOpenChange,\n  onSelectionChange,\n  selected,\n  selectionStrategy,\n}: DropdownListHookProps<Item, Selection>): DropdownListHookResult<\n  Item,\n  Selection\n> => {\n  const isMultiSelect =\n    selectionStrategy === \"multiple\" || selectionStrategy === \"extended\";\n\n  const [isOpen, setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen ?? false,\n    name: \"useDropdownList\",\n  });\n\n  const handleSelectionChange = useCallback<\n    SelectionChangeHandler<Item, Selection>\n  >(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n        onOpenChange?.(false);\n      }\n      onSelectionChange?.(evt, selected);\n    },\n    [isMultiSelect, onOpenChange, onSelectionChange, setIsOpen]\n  );\n\n  const listHook = useList<Item, Selection>({\n    collectionHook,\n    defaultHighlightedIndex:\n      defaultHighlightedIndexProp ?? highlightedIndexProp === undefined\n        ? 0\n        : undefined,\n    defaultSelected,\n    label: \"useDropDownList\",\n    onSelectionChange: handleSelectionChange,\n    containerRef: NULL_REF,\n    highlightedIndex: highlightedIndexProp,\n    onHighlight,\n    selected,\n    selectionStrategy,\n    tabToSelect: !isMultiSelect,\n  });\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      onOpenChange?.(open);\n    },\n    [onOpenChange, setIsOpen]\n  );\n\n  const triggerLabel = useMemo(() => {\n    if (isMultiSelect && Array.isArray(listHook.selected)) {\n      const selectedItems = listHook.selected as CollectionItem<Item>[];\n      if (selectedItems.length === 0) {\n        return undefined;\n      } else if (selectedItems.length === 1) {\n        const { value } = selectedItems[0];\n        return value === null ? undefined : itemToString(value);\n      } else {\n        return `${selectedItems.length} items selected`;\n      }\n    } else {\n      const selectedItem = listHook.selected as CollectionItem<Item>;\n      return selectedItem == null || selectedItem.value === null\n        ? undefined\n        : itemToString(selectedItem.value);\n    }\n  }, [isMultiSelect, itemToString, listHook.selected]);\n\n  return {\n    isOpen,\n    onOpenChange: handleOpenChange,\n    triggerLabel,\n    ...listHook,\n  };\n};\n"],"names":["itemToString","defaultItemToString","selected"],"mappings":"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"}

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

@@ -3,6 +3,7 @@ import { useRef, useCallback, useState } from 'react';
 import { useClickAway } from './useClickAway.js';
 import 'react/jsx-runtime';
 import { useResizeObserver, WidthOnly } from '../responsive/useResizeObserver.js';
+import '../utils/useFloatingUI.js';
 import '../form-field-context/FormFieldContext.js';
 import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
 

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

@@ -1 +1 @@
-{"version":3,"file":"useDropdownBase.js","sources":["../src/dropdown/useDropdownBase.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { KeyboardEvent, useCallback, useRef, useState } from \"react\";\n\nimport { DropdownHookProps, DropdownHookResult } from \"./dropdownTypes\";\nimport { useClickAway } from \"./useClickAway\";\nimport { measurements, useResizeObserver, WidthOnly } from \"../responsive\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nconst NO_OBSERVER: string[] = [];\n\nexport const useDropdownBase = ({\n  ariaLabelledBy: ariaLabelledByProp,\n  defaultIsOpen,\n  disabled,\n  // TODO check how we're using fullWidth, do we need a separate value for the popup component\n  fullWidth: fullWidthProp,\n  id,\n  isOpen: isOpenProp,\n  onOpenChange,\n  onKeyDown: onKeyDownProp,\n  openOnFocus,\n  popupComponent: { props: componentProps },\n  popupWidth: popupWidthProp,\n  rootRef,\n  width,\n}: DropdownHookProps): DropdownHookResult => {\n  const justFocused = useRef<number | null>(null);\n  const popperRef = useRef<HTMLElement | null>(null);\n  const popperCallbackRef = useCallback((element: HTMLElement | null) => {\n    popperRef.current = element;\n  }, []);\n  const [isOpen, setIsOpen] = useControlled({\n    controlled: isOpenProp,\n    default: Boolean(defaultIsOpen),\n    name: \"useDropdown\",\n    state: \"isOpen\",\n  });\n\n  const {\n    inFormField,\n    // onFocus: formFieldOnFocus,\n    // onBlur: formFieldOnBlur,\n    a11yProps: { \"aria-labelledby\": ariaLabelledBy, ...restA11yProps } = {},\n  } = useFormFieldProps();\n\n  const [popup, setPopup] = useState<measurements>({\n    width: popupWidthProp ?? width ?? 0,\n  });\n\n  const showDropdown = useCallback(() => {\n    setIsOpen(true);\n    onOpenChange?.(true);\n  }, [onOpenChange, setIsOpen]);\n\n  const hideDropdown = useCallback(() => {\n    setIsOpen(false);\n    onOpenChange?.(false);\n  }, [onOpenChange, setIsOpen]);\n\n  useClickAway({\n    popperRef,\n    rootRef,\n    isOpen,\n    onClose: hideDropdown,\n  });\n\n  const handleTriggerFocus = useCallback(() => {\n    setIsOpen(true);\n    onOpenChange?.(true);\n    // Suppress response to click if click was the cause of focus\n    justFocused.current = window.setTimeout(() => {\n      justFocused.current = null;\n    }, 1000);\n  }, [onOpenChange, setIsOpen]);\n\n  const handleTriggerToggle = useCallback(\n    (e: MouseEvent) => {\n      // Do not trigger menu open for 'Enter' and 'SPACE' key as they're handled in `handleKeyDown`\n      if (\n        [\"Enter\", \" \"].indexOf(\n          (e as unknown as KeyboardEvent<HTMLDivElement>).key\n        ) === -1\n      ) {\n        const newIsOpen = !isOpen;\n        setIsOpen(newIsOpen);\n        onOpenChange?.(newIsOpen);\n      }\n    },\n    [isOpen, setIsOpen, onOpenChange]\n  );\n\n  const handleKeydown = useCallback(\n    (evt: KeyboardEvent<HTMLElement>) => {\n      if ((evt.key === \"Tab\" || evt.key === \"Escape\") && isOpen) {\n        // No preventDefault here, this behaviour does not need to be exclusive\n        hideDropdown();\n      } else if (\n        (evt.key === \"Enter\" || evt.key === \"ArrowDown\" || evt.key === \" \") &&\n        !isOpen\n      ) {\n        evt.preventDefault();\n        showDropdown();\n      } else {\n        onKeyDownProp?.(evt);\n      }\n    },\n    [hideDropdown, isOpen, onKeyDownProp, showDropdown]\n  );\n\n  const fullWidth = fullWidthProp ?? inFormField;\n  const measurements = fullWidth ? WidthOnly : NO_OBSERVER;\n  useResizeObserver(rootRef, measurements, setPopup, fullWidth);\n\n  const componentId = `${id}-dropdown`;\n\n  const getAriaLabelledBy = (\n    labelledBy: string | undefined,\n    labelledByProp: string | undefined\n  ): string | undefined => {\n    if (labelledBy === undefined && labelledByProp === undefined) {\n      return undefined;\n    } else {\n      return [labelledBy, labelledByProp].filter((x) => !!x).join(\" \");\n    }\n  };\n\n  // TODO do we use aria-popup - valid values are menu, disloag, grid, tree, listbox\n  const triggerProps = {\n    ...restA11yProps,\n    \"aria-expanded\": isOpen,\n    \"aria-labelledby\": getAriaLabelledBy(ariaLabelledBy, ariaLabelledByProp),\n    \"aria-owns\": isOpen ? componentId : undefined,\n    id: `${id}-control`,\n    onClick: disabled || openOnFocus ? undefined : handleTriggerToggle,\n    onFocus: openOnFocus && !disabled ? handleTriggerFocus : undefined,\n    role: \"listbox\",\n    onKeyDown: disabled ? undefined : handleKeydown,\n    style: { width: fullWidth ? undefined : width },\n  };\n\n  const dropdownComponentProps = {\n    \"aria-labelledby\": ariaLabelledBy,\n    id: componentId,\n    width: popup.width,\n  };\n\n  return {\n    componentProps: dropdownComponentProps,\n    popperRef: popperCallbackRef,\n    isOpen,\n    label: \"Dropdown Button\",\n    triggerProps,\n  };\n};\n"],"names":["measurements"],"mappings":"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"}
+{"version":3,"file":"useDropdownBase.js","sources":["../src/dropdown/useDropdownBase.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { KeyboardEvent, useCallback, useRef, useState } from \"react\";\n\nimport { DropdownHookProps, DropdownHookResult } from \"./dropdownTypes\";\nimport { useClickAway } from \"./useClickAway\";\nimport { measurements, useResizeObserver, WidthOnly } from \"../responsive\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nconst NO_OBSERVER: string[] = [];\n\nexport const useDropdownBase = ({\n  ariaLabelledBy: ariaLabelledByProp,\n  defaultIsOpen,\n  disabled,\n  // TODO check how we're using fullWidth, do we need a separate value for the popup component\n  fullWidth: fullWidthProp,\n  id,\n  isOpen: isOpenProp,\n  onOpenChange,\n  onKeyDown: onKeyDownProp,\n  openOnFocus,\n  popupComponent: { props: componentProps },\n  popupWidth: popupWidthProp,\n  rootRef,\n  width,\n}: DropdownHookProps): DropdownHookResult => {\n  const justFocused = useRef<number | null>(null);\n  const popperRef = useRef<HTMLElement | null>(null);\n  const popperCallbackRef = useCallback((element: HTMLElement | null) => {\n    popperRef.current = element;\n  }, []);\n  const [isOpen, setIsOpen] = useControlled({\n    controlled: isOpenProp,\n    default: Boolean(defaultIsOpen),\n    name: \"useDropdown\",\n    state: \"isOpen\",\n  });\n\n  const {\n    inFormField,\n    // onFocus: formFieldOnFocus,\n    // onBlur: formFieldOnBlur,\n    a11yProps: { \"aria-labelledby\": ariaLabelledBy, ...restA11yProps } = {},\n  } = useFormFieldProps();\n\n  const [popup, setPopup] = useState<measurements>({\n    width: popupWidthProp ?? width ?? 0,\n  });\n\n  const showDropdown = useCallback(() => {\n    setIsOpen(true);\n    onOpenChange?.(true);\n  }, [onOpenChange, setIsOpen]);\n\n  const hideDropdown = useCallback(() => {\n    setIsOpen(false);\n    onOpenChange?.(false);\n  }, [onOpenChange, setIsOpen]);\n\n  useClickAway({\n    popperRef,\n    rootRef,\n    isOpen,\n    onClose: hideDropdown,\n  });\n\n  const handleTriggerFocus = useCallback(() => {\n    setIsOpen(true);\n    onOpenChange?.(true);\n    // Suppress response to click if click was the cause of focus\n    justFocused.current = window.setTimeout(() => {\n      justFocused.current = null;\n    }, 1000);\n  }, [onOpenChange, setIsOpen]);\n\n  const handleTriggerToggle = useCallback(\n    (e: MouseEvent) => {\n      // Do not trigger menu open for 'Enter' and 'SPACE' key as they're handled in `handleKeyDown`\n      if (\n        [\"Enter\", \" \"].indexOf(\n          (e as unknown as KeyboardEvent<HTMLDivElement>).key\n        ) === -1\n      ) {\n        const newIsOpen = !isOpen;\n        setIsOpen(newIsOpen);\n        onOpenChange?.(newIsOpen);\n      }\n    },\n    [isOpen, setIsOpen, onOpenChange]\n  );\n\n  const handleKeydown = useCallback(\n    (evt: KeyboardEvent<HTMLElement>) => {\n      if ((evt.key === \"Tab\" || evt.key === \"Escape\") && isOpen) {\n        // No preventDefault here, this behaviour does not need to be exclusive\n        hideDropdown();\n      } else if (\n        (evt.key === \"Enter\" || evt.key === \"ArrowDown\" || evt.key === \" \") &&\n        !isOpen\n      ) {\n        evt.preventDefault();\n        showDropdown();\n      } else {\n        onKeyDownProp?.(evt);\n      }\n    },\n    [hideDropdown, isOpen, onKeyDownProp, showDropdown]\n  );\n\n  const fullWidth = fullWidthProp ?? inFormField;\n  const measurements = fullWidth ? WidthOnly : NO_OBSERVER;\n  useResizeObserver(rootRef, measurements, setPopup, fullWidth);\n\n  const componentId = `${id}-dropdown`;\n\n  const getAriaLabelledBy = (\n    labelledBy: string | undefined,\n    labelledByProp: string | undefined\n  ): string | undefined => {\n    if (labelledBy === undefined && labelledByProp === undefined) {\n      return undefined;\n    } else {\n      return [labelledBy, labelledByProp].filter((x) => !!x).join(\" \");\n    }\n  };\n\n  // TODO do we use aria-popup - valid values are menu, disloag, grid, tree, listbox\n  const triggerProps = {\n    ...restA11yProps,\n    \"aria-expanded\": isOpen,\n    \"aria-labelledby\": getAriaLabelledBy(ariaLabelledBy, ariaLabelledByProp),\n    \"aria-owns\": isOpen ? componentId : undefined,\n    id: `${id}-control`,\n    onClick: disabled || openOnFocus ? undefined : handleTriggerToggle,\n    onFocus: openOnFocus && !disabled ? handleTriggerFocus : undefined,\n    role: \"listbox\",\n    onKeyDown: disabled ? undefined : handleKeydown,\n    style: { width: fullWidth ? undefined : width },\n  };\n\n  const dropdownComponentProps = {\n    \"aria-labelledby\": ariaLabelledBy,\n    id: componentId,\n    width: popup.width,\n  };\n\n  return {\n    componentProps: dropdownComponentProps,\n    popperRef: popperCallbackRef,\n    isOpen,\n    label: \"Dropdown Button\",\n    triggerProps,\n  };\n};\n"],"names":["measurements"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* Styles applied to root component */\n.saltFileDropZone {\n  --fileDropZone-background: var(--salt-container-secondary-background);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n  --fileDropZone-borderWidth: var(--salt-size-border);\n  --fileDropZone-borderStyle: var(--salt-dropTarget-borderStyle);\n  --fileDropZone-text-color: var(--salt-text-primary-foreground);\n  --fileDropZone-icon-color: var(--salt-text-primary-foreground);\n  --fileDropZone-padding: calc(var(--salt-size-unit) * 3);\n  --fileDropZone-title-fontSize: var(--salt-text-fontSize);\n  --fileDropZone-title-lineHeight: var(--salt-text-lineHeight);\n}\n\n.saltFileDropZone {\n  color: var(--saltFileDropZone-text-color, var(--fileDropZone-text-color));\n  display: inline-flex;\n  background: var(--saltFileDropZone-background, var(--fileDropZone-background));\n  text-align: center;\n  align-items: stretch;\n  justify-content: center;\n  border-color: var(--saltFileDropZone-borderColor, var(--fileDropZone-borderColor));\n  border-style: var(--saltFileDropZone-borderStyle, var(--fileDropZone-borderStyle));\n  border-width: var(--saltFileDropZone-borderWidth, var(--fileDropZone-borderWidth));\n  flex-direction: column;\n  padding: var(--saltFileDropZone-padding, var(--fileDropZone-padding));\n}\n\n.saltFileDropZone *:not(.saltFileDropZone-inputRoot, .saltFileDropZone-inputRoot *) {\n  pointer-events: none;\n}\n\n/* Styles applied to icon */\n.saltFileDropZone-icon {\n  fill: var(--fileDropZone-icon-color);\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltFileDropZone .saltFileDropZone-title:not(:last-child),\n.saltFileDropZone .saltFileDropZone-inputRoot:not(:last-child) {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isActive={true}` */\n.saltFileDropZone-active:not(.saltFileDropZone-disabled) {\n  --fileDropZone-background: var(--salt-dropTarget-background-hover);\n}\n\n/* Styles applied to description if `isRejected={true}`  */\n.saltFileDropZone-error .saltFileDropZone-description {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isRejected={true}`  */\n.saltFileDropZone-error {\n  --fileDropZone-background: var(--salt-status-error-background-emphasize);\n  --fileDropZone-borderColor: var(--salt-status-error-borderColor);\n  --fileDropZone-icon-color: var(--salt-status-error-foreground);\n}\n\n/* Styles applied on if `isRejected={true}` and `isActive={true}` */\n.saltFileDropZone-error:not(.saltFileDropZone-disabled).saltFileDropZone-active {\n  --fileDropZone-background: var(--salt-dropTarget-background-hover);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to title and description */\n.saltFileDropZone-title,\n.saltFileDropZone-description {\n  font-size: var(--saltFileDropZone-title-fontSize, var(--fileDropZone-title-fontSize));\n  line-height: var(--saltFileDropZone-title-lineHeight, var(--fileDropZone-title-lineHeight));\n}\n\n/* Styles applied to title */\n.saltFileDropZone-title {\n  font-weight: var(--saltFileDropZone-fontWeight, var(--salt-text-fontWeight-strong));\n}\n\n/* Styles applied to input button */\n.saltFileDropZone-inputButton {\n  display: inline-flex;\n}\n\n/* Styles applied to input root */\n.saltFileDropZone-inputRoot {\n  line-height: 1;\n}\n\n.saltFileDropZone-inputRoot .input-hidden {\n  position: absolute;\n  clip: rect(0, 0, 0, 0);\n  visibility: hidden;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor-disabled);\n\n  cursor: var(--salt-dropTarget-cursor-disabled);\n}\n\n/* Styles applied if `disabled={true}` to icon and title */\n.saltFileDropZone-disabled .saltFileDropZone-icon,\n.saltFileDropZone-disabled .saltFileDropZone-title {\n  --fileDropZone-text-color: var(--salt-text-primary-foreground-disabled);\n  --fileDropZone-icon-color: var(--salt-text-primary-foreground-disabled);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltFileDropZone {\n  --fileDropZone-background: var(--salt-container-secondary-background);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n  --fileDropZone-borderWidth: var(--salt-size-border);\n  --fileDropZone-borderStyle: var(--salt-target-borderStyle);\n  --fileDropZone-text-color: var(--salt-text-primary-foreground);\n  --fileDropZone-icon-color: var(--salt-text-primary-foreground);\n  --fileDropZone-padding: calc(var(--salt-size-unit) * 3);\n  --fileDropZone-title-fontSize: var(--salt-text-fontSize);\n  --fileDropZone-title-lineHeight: var(--salt-text-lineHeight);\n}\n\n.saltFileDropZone {\n  color: var(--saltFileDropZone-text-color, var(--fileDropZone-text-color));\n  display: inline-flex;\n  background: var(--saltFileDropZone-background, var(--fileDropZone-background));\n  text-align: center;\n  align-items: stretch;\n  justify-content: center;\n  border-color: var(--saltFileDropZone-borderColor, var(--fileDropZone-borderColor));\n  border-style: var(--saltFileDropZone-borderStyle, var(--fileDropZone-borderStyle));\n  border-width: var(--saltFileDropZone-borderWidth, var(--fileDropZone-borderWidth));\n  flex-direction: column;\n  padding: var(--saltFileDropZone-padding, var(--fileDropZone-padding));\n}\n\n.saltFileDropZone *:not(.saltFileDropZone-inputRoot, .saltFileDropZone-inputRoot *) {\n  pointer-events: none;\n}\n\n/* Styles applied to icon */\n.saltFileDropZone-icon {\n  fill: var(--fileDropZone-icon-color);\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltFileDropZone .saltFileDropZone-title:not(:last-child),\n.saltFileDropZone .saltFileDropZone-inputRoot:not(:last-child) {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isActive={true}` */\n.saltFileDropZone-active:not(.saltFileDropZone-disabled) {\n  --fileDropZone-background: var(--salt-target-background-hover);\n}\n\n/* Styles applied to description if `isRejected={true}`  */\n.saltFileDropZone-error .saltFileDropZone-description {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isRejected={true}`  */\n.saltFileDropZone-error {\n  --fileDropZone-background: var(--salt-status-error-background-emphasize);\n  --fileDropZone-borderColor: var(--salt-status-error-borderColor);\n  --fileDropZone-icon-color: var(--salt-status-error-foreground);\n}\n\n/* Styles applied on if `isRejected={true}` and `isActive={true}` */\n.saltFileDropZone-error:not(.saltFileDropZone-disabled).saltFileDropZone-active {\n  --fileDropZone-background: var(--salt-target-background-hover);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to title and description */\n.saltFileDropZone-title,\n.saltFileDropZone-description {\n  font-size: var(--saltFileDropZone-title-fontSize, var(--fileDropZone-title-fontSize));\n  line-height: var(--saltFileDropZone-title-lineHeight, var(--fileDropZone-title-lineHeight));\n}\n\n/* Styles applied to title */\n.saltFileDropZone-title {\n  font-weight: var(--saltFileDropZone-fontWeight, var(--salt-text-fontWeight-strong));\n}\n\n/* Styles applied to input button */\n.saltFileDropZone-inputButton {\n  display: inline-flex;\n}\n\n/* Styles applied to input root */\n.saltFileDropZone-inputRoot {\n  line-height: 1;\n}\n\n.saltFileDropZone-inputRoot .input-hidden {\n  position: absolute;\n  clip: rect(0, 0, 0, 0);\n  visibility: hidden;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor-disabled);\n\n  cursor: var(--salt-target-cursor-disabled);\n}\n\n/* Styles applied if `disabled={true}` to icon and title */\n.saltFileDropZone-disabled .saltFileDropZone-icon,\n.saltFileDropZone-disabled .saltFileDropZone-title {\n  --fileDropZone-text-color: var(--salt-text-primary-foreground-disabled);\n  --fileDropZone-icon-color: var(--salt-text-primary-foreground-disabled);\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };