@salt-ds/core 1.65.1 → 1.67.0

package/dist-es/border-layout/BorderLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"BorderLayout.js","sources":["../src/border-layout/BorderLayout.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  Children,\n  type ElementType,\n  type ForwardedRef,\n  type FunctionComponent,\n  forwardRef,\n  isValidElement,\n  type ReactNode,\n  useEffect,\n} from \"react\";\n\nimport type { BorderPosition } from \"../border-item\";\nimport { GridLayout, type GridLayoutProps } from \"../grid-layout\";\nimport {\n  makePrefixer,\n  type PolymorphicComponentPropWithRef,\n  type ResponsiveProp,\n} from \"../utils\";\n\nexport type BorderLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 0\n       */\n      gap?: GridLayoutProps<T>[\"gap\"];\n      /**\n       * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 0\n       */\n      columnGap?: GridLayoutProps<T>[\"columnGap\"];\n      /**\n       * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 0\n       */\n      rowGap?: GridLayoutProps<T>[\"rowGap\"];\n      /**\n       * Border item components to be rendered.\n       */\n      children: ReactNode;\n      /**\n       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: ResponsiveProp<number | string>;\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: ResponsiveProp<number | string>;\n    }\n  >;\n\nconst withBaseName = makePrefixer(\"saltBorderLayout\");\n\nconst numberOfColumns = 3;\n\ntype BorderLayoutComponent = <T extends ElementType = \"div\">(\n  props: BorderLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const BorderLayout: BorderLayoutComponent = forwardRef(\n  function BorderLayout<T extends ElementType>(\n    props: unknown,\n    ref?: ForwardedRef<unknown>,\n  ) {\n    // Props need to be typed this way due to polymorphic types not working with required props.\n    const { as, children, className, gap, style, ...rest } =\n      props as BorderLayoutProps<T>;\n\n    const borderAreas = Children.map(\n      children,\n      (child) => isValidElement(child) && child.props.position,\n    ) as BorderPosition[];\n\n    const topSection = borderAreas.includes(\"north\")\n      ? \"north \".repeat(numberOfColumns)\n      : \"none \".repeat(numberOfColumns);\n\n    const leftSection = borderAreas.includes(\"west\") ? \"west\" : \"center\";\n\n    const rightSection = borderAreas.includes(\"east\") ? \"east\" : \"center\";\n\n    const midSection = `${leftSection} center ${rightSection}`;\n\n    const bottomSection = borderAreas.includes(\"south\")\n      ? \"south \".repeat(numberOfColumns)\n      : \"none \".repeat(numberOfColumns);\n\n    const gridTemplateAreas = `\"${topSection}\" \"${midSection}\" \"${bottomSection}\"`;\n\n    const hasMainSection = borderAreas.includes(\"center\");\n\n    useEffect(() => {\n      if (process.env.NODE_ENV !== \"production\") {\n        if (!hasMainSection) {\n          console.warn(\n            \"No main section has been found. A main section should be provided.\",\n          );\n        }\n      }\n    }, [hasMainSection]);\n\n    const borderLayoutStyles = {\n      ...style,\n      \"--gridLayout-gridTemplate\": gridTemplateAreas,\n    };\n\n    return (\n      <GridLayout\n        as={as as ElementType}\n        className={clsx(withBaseName(), className, \"saltGridLayout-area\")}\n        columns={numberOfColumns}\n        gap={gap || 0}\n        style={borderLayoutStyles}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </GridLayout>\n    );\n  },\n);\n"],"names":["BorderLayout"],"mappings":";;;;;;;;;;AAmDA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAEpD,MAAM,eAAA,GAAkB,CAAA;AAMjB,MAAM,YAAA,GAAsC,UAAA;AAAA,EACjD,SAASA,aAAAA,CACP,KAAA,EACA,GAAA,EACA;AAEA,IAAA,MAAM,EAAE,IAAI,QAAA,EAAU,SAAA,EAAW,KAAK,KAAA,EAAO,GAAG,MAAK,GACnD,KAAA;AAEF,IAAA,MAAM,cAAc,QAAA,CAAS,GAAA;AAAA,MAC3B,QAAA;AAAA,MACA,CAAC,KAAA,KAAU,cAAA,CAAe,KAAK,CAAA,IAAK,MAAM,KAAA,CAAM;AAAA,KAClD;AAEA,IAAA,MAAM,UAAA,GAAa,WAAA,CAAY,QAAA,CAAS,OAAO,CAAA,GAC3C,QAAA,CAAS,MAAA,CAAO,eAAe,CAAA,GAC/B,OAAA,CAAQ,MAAA,CAAO,eAAe,CAAA;AAElC,IAAA,MAAM,WAAA,GAAc,WAAA,CAAY,QAAA,CAAS,MAAM,IAAI,MAAA,GAAS,QAAA;AAE5D,IAAA,MAAM,YAAA,GAAe,WAAA,CAAY,QAAA,CAAS,MAAM,IAAI,MAAA,GAAS,QAAA;AAE7D,IAAA,MAAM,UAAA,GAAa,CAAA,EAAG,WAAW,CAAA,QAAA,EAAW,YAAY,CAAA,CAAA;AAExD,IAAA,MAAM,aAAA,GAAgB,WAAA,CAAY,QAAA,CAAS,OAAO,CAAA,GAC9C,QAAA,CAAS,MAAA,CAAO,eAAe,CAAA,GAC/B,OAAA,CAAQ,MAAA,CAAO,eAAe,CAAA;AAElC,IAAA,MAAM,oBAAoB,CAAA,CAAA,EAAI,UAAU,CAAA,GAAA,EAAM,UAAU,MAAM,aAAa,CAAA,CAAA,CAAA;AAE3E,IAAA,MAAM,cAAA,GAAiB,WAAA,CAAY,QAAA,CAAS,QAAQ,CAAA;AAEpD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,OAAA,CAAQ,GAAA,CAAI,QAAA,KAAa,YAAA,EAAc;AACzC,QAAA,IAAI,CAAC,cAAA,EAAgB;AACnB,UAAA,OAAA,CAAQ,IAAA;AAAA,YACN;AAAA,WACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,cAAc,CAAC,CAAA;AAEnB,IAAA,MAAM,kBAAA,GAAqB;AAAA,MACzB,GAAG,KAAA;AAAA,MACH,2BAAA,EAA6B;AAAA,KAC/B;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,WAAW,qBAAqB,CAAA;AAAA,QAChE,OAAA,EAAS,eAAA;AAAA,QACT,KAAK,GAAA,IAAO,CAAA;AAAA,QACZ,KAAA,EAAO,kBAAA;AAAA,QACP,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"BorderLayout.js","sources":["../src/border-layout/BorderLayout.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  Children,\n  type ElementType,\n  type ForwardedRef,\n  type FunctionComponent,\n  forwardRef,\n  isValidElement,\n  type ReactNode,\n  useEffect,\n} from \"react\";\n\nimport type { BorderPosition } from \"../border-item\";\nimport { GridLayout, type GridLayoutProps } from \"../grid-layout\";\nimport {\n  makePrefixer,\n  type PolymorphicComponentPropWithRef,\n  type ResponsiveProp,\n} from \"../utils\";\n\nexport type BorderLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 0\n       */\n      gap?: GridLayoutProps<T>[\"gap\"];\n      /**\n       * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 0\n       */\n      columnGap?: GridLayoutProps<T>[\"columnGap\"];\n      /**\n       * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 0\n       */\n      rowGap?: GridLayoutProps<T>[\"rowGap\"];\n      /**\n       * Border item components to be rendered.\n       */\n      children: ReactNode;\n      /**\n       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: ResponsiveProp<number | string>;\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: ResponsiveProp<number | string>;\n    }\n  >;\n\nconst withBaseName = makePrefixer(\"saltBorderLayout\");\n\nconst numberOfColumns = 3;\n\ntype BorderLayoutComponent = <T extends ElementType = \"div\">(\n  props: BorderLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const BorderLayout: BorderLayoutComponent = forwardRef(\n  function BorderLayout<T extends ElementType>(\n    props: unknown,\n    ref?: ForwardedRef<unknown>,\n  ) {\n    // Props need to be typed this way due to polymorphic types not working with required props.\n    const { as, children, className, gap, style, ...rest } =\n      props as BorderLayoutProps<T>;\n\n    const borderAreas = Children.map(\n      children,\n      (child) => isValidElement(child) && child.props.position,\n    ) as BorderPosition[];\n\n    const hasNorth = borderAreas.includes(\"north\");\n    const hasWest = borderAreas.includes(\"west\");\n    const hasEast = borderAreas.includes(\"east\");\n    const hasSouth = borderAreas.includes(\"south\");\n\n    const middleColumns = [\n      hasWest ? \"west\" : undefined,\n      \"center\",\n      hasEast ? \"east\" : undefined,\n    ].filter(Boolean) as BorderPosition[];\n\n    const gridTemplateColumns = [\n      hasWest ? \"min-content\" : undefined,\n      \"1fr\",\n      hasEast ? \"min-content\" : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n    const gridTemplateRows = [\n      hasNorth ? \"min-content\" : undefined,\n      \"1fr\",\n      hasSouth ? \"min-content\" : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n    const gridTemplateSections = [\n      hasNorth\n        ? `\"${\"north \".repeat(middleColumns.length).trimEnd()}\"`\n        : undefined,\n      `\"${middleColumns.join(\" \")}\"`,\n      hasSouth\n        ? `\"${\"south \".repeat(middleColumns.length).trimEnd()}\"`\n        : undefined,\n    ].filter(Boolean);\n\n    const gridTemplateAreas = gridTemplateSections.join(\" \");\n\n    const hasMainSection = borderAreas.includes(\"center\");\n\n    useEffect(() => {\n      if (process.env.NODE_ENV !== \"production\") {\n        if (!hasMainSection) {\n          console.warn(\n            \"No main section has been found. A main section should be provided.\",\n          );\n        }\n      }\n    }, [hasMainSection]);\n\n    const borderLayoutStyles = {\n      ...style,\n      \"--gridLayout-gridTemplate\": gridTemplateAreas,\n      \"--gridLayout-areaColumns\": gridTemplateColumns,\n      \"--gridLayout-areaRows\": gridTemplateRows,\n    };\n\n    return (\n      <GridLayout\n        as={as as ElementType}\n        className={clsx(withBaseName(), className, \"saltGridLayout-area\")}\n        columns={numberOfColumns}\n        gap={gap || 0}\n        style={borderLayoutStyles}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </GridLayout>\n    );\n  },\n);\n"],"names":["BorderLayout"],"mappings":";;;;;;;;;;AAmDA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAEpD,MAAM,eAAA,GAAkB,CAAA;AAMjB,MAAM,YAAA,GAAsC,UAAA;AAAA,EACjD,SAASA,aAAAA,CACP,KAAA,EACA,GAAA,EACA;AAEA,IAAA,MAAM,EAAE,IAAI,QAAA,EAAU,SAAA,EAAW,KAAK,KAAA,EAAO,GAAG,MAAK,GACnD,KAAA;AAEF,IAAA,MAAM,cAAc,QAAA,CAAS,GAAA;AAAA,MAC3B,QAAA;AAAA,MACA,CAAC,KAAA,KAAU,cAAA,CAAe,KAAK,CAAA,IAAK,MAAM,KAAA,CAAM;AAAA,KAClD;AAEA,IAAA,MAAM,QAAA,GAAW,WAAA,CAAY,QAAA,CAAS,OAAO,CAAA;AAC7C,IAAA,MAAM,OAAA,GAAU,WAAA,CAAY,QAAA,CAAS,MAAM,CAAA;AAC3C,IAAA,MAAM,OAAA,GAAU,WAAA,CAAY,QAAA,CAAS,MAAM,CAAA;AAC3C,IAAA,MAAM,QAAA,GAAW,WAAA,CAAY,QAAA,CAAS,OAAO,CAAA;AAE7C,IAAA,MAAM,aAAA,GAAgB;AAAA,MACpB,UAAU,MAAA,GAAS,MAAA;AAAA,MACnB,QAAA;AAAA,MACA,UAAU,MAAA,GAAS;AAAA,KACrB,CAAE,OAAO,OAAO,CAAA;AAEhB,IAAA,MAAM,mBAAA,GAAsB;AAAA,MAC1B,UAAU,aAAA,GAAgB,MAAA;AAAA,MAC1B,KAAA;AAAA,MACA,UAAU,aAAA,GAAgB;AAAA,KAC5B,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,IAAA,MAAM,gBAAA,GAAmB;AAAA,MACvB,WAAW,aAAA,GAAgB,MAAA;AAAA,MAC3B,KAAA;AAAA,MACA,WAAW,aAAA,GAAgB;AAAA,KAC7B,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,IAAA,MAAM,oBAAA,GAAuB;AAAA,MAC3B,QAAA,GACI,IAAI,QAAA,CAAS,MAAA,CAAO,cAAc,MAAM,CAAA,CAAE,OAAA,EAAS,CAAA,CAAA,CAAA,GACnD,MAAA;AAAA,MACJ,CAAA,CAAA,EAAI,aAAA,CAAc,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA,CAAA;AAAA,MAC3B,QAAA,GACI,IAAI,QAAA,CAAS,MAAA,CAAO,cAAc,MAAM,CAAA,CAAE,OAAA,EAAS,CAAA,CAAA,CAAA,GACnD;AAAA,KACN,CAAE,OAAO,OAAO,CAAA;AAEhB,IAAA,MAAM,iBAAA,GAAoB,oBAAA,CAAqB,IAAA,CAAK,GAAG,CAAA;AAEvD,IAAA,MAAM,cAAA,GAAiB,WAAA,CAAY,QAAA,CAAS,QAAQ,CAAA;AAEpD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,OAAA,CAAQ,GAAA,CAAI,QAAA,KAAa,YAAA,EAAc;AACzC,QAAA,IAAI,CAAC,cAAA,EAAgB;AACnB,UAAA,OAAA,CAAQ,IAAA;AAAA,YACN;AAAA,WACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,cAAc,CAAC,CAAA;AAEnB,IAAA,MAAM,kBAAA,GAAqB;AAAA,MACzB,GAAG,KAAA;AAAA,MACH,2BAAA,EAA6B,iBAAA;AAAA,MAC7B,0BAAA,EAA4B,mBAAA;AAAA,MAC5B,uBAAA,EAAyB;AAAA,KAC3B;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,WAAW,qBAAqB,CAAA;AAAA,QAChE,OAAA,EAAS,eAAA;AAAA,QACT,KAAK,GAAA,IAAO,CAAA;AAAA,QACZ,KAAA,EAAO,kBAAA;AAAA,QACP,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist-es/dialog/Dialog.js

@@ -57,7 +57,7 @@ const Dialog = forwardRef(
     });
     const { getFloatingProps } = useInteractions([
       useClick(context),
-      useDismiss(context, { enabled: !disableDismiss })
+      useDismiss(context, { outsidePress: !disableDismiss })
     ]);
     const { Component: FloatingComponent } = useFloatingComponent();
     const floatingRef = useForkRef(floating, ref);
@@ -90,7 +90,8 @@ const Dialog = forwardRef(
         lockScroll: true,
         focusManagerProps: {
           context,
-          initialFocus
+          initialFocus,
+          outsideElementsInert: true
         },
         className: clsx(
           withBaseName(),

package/dist-es/dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import {\n  type FloatingFocusManager,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentProps,\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n  makePrefixer,\n  useCurrentBreakpoint,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useId,\n} from \"../utils\";\nimport dialogCss from \"./Dialog.css\";\nimport { DialogContext } from \"./DialogContext\";\n\ninterface ConditionalScrimWrapperProps {\n  children?: ReactNode;\n  condition: boolean;\n}\n\nexport const ConditionalScrimWrapper = ({\n  condition,\n  children,\n}: ConditionalScrimWrapperProps) => {\n  return condition ? <Scrim fixed>{children}</Scrim> : <>{children} </>;\n};\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The status of the Dialog\n   * */\n  status?: ValidationStatus;\n  /**\n   * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n   * Default value is 0 (first tabbable element).\n   * */\n  initialFocus?: ComponentProps<typeof FloatingFocusManager>[\"initialFocus\"];\n  /**\n   * Size of the Dialog\n   * */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * Prevent the dialog closing on click away\n   * */\n  disableDismiss?: boolean;\n  /**\n   * Prevent Scrim from rendering\n   * */\n  disableScrim?: boolean;\n  /**\n   * @deprecated IDs are now auto-generated internally for proper ARIA labeling.\n   *\n   * Optional id prop\n   * Used for accessibility purposes to announce the title and subtitle when using a screen reader\n   * */\n  idProp?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n  function Dialog(props, ref) {\n    const {\n      children,\n      className,\n      open = false,\n      onOpenChange,\n      status,\n      disableDismiss,\n      size = \"medium\",\n      disableScrim,\n      idProp,\n      initialFocus,\n      id,\n      \"aria-labelledby\": ariaLabelledBy,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog\",\n      css: dialogCss,\n      window: targetWindow,\n    });\n\n    const dialogId = useId(id);\n    const currentBreakpoint = useCurrentBreakpoint();\n\n    const [showComponent, setShowComponent] = useState(false);\n    const [headerId, setHeaderId] = useState(idProp);\n\n    const { context, floating, elements } = useFloatingUI({\n      open: showComponent,\n      onOpenChange,\n    });\n\n    const { getFloatingProps } = useInteractions([\n      useClick(context),\n      useDismiss(context, { enabled: !disableDismiss }),\n    ]);\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    useEffect(() => {\n      if (open && !showComponent) {\n        setShowComponent(true);\n      }\n\n      if (!open && showComponent) {\n        const animate = setTimeout(() => {\n          setShowComponent(false);\n        }, 300); // var(--salt-duration-perceptible)\n        return () => clearTimeout(animate);\n      }\n    }, [open, showComponent]);\n\n    const contextValue = useMemo(\n      () => ({ status, id: headerId, setId: setHeaderId, dialogId }),\n      [status, headerId, dialogId],\n    );\n\n    return (\n      <DialogContext.Provider value={contextValue}>\n        <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n          <FloatingComponent\n            id={dialogId}\n            open={showComponent}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={clsx(ariaLabelledBy, headerId) || undefined}\n            ref={floatingRef}\n            width={elements.floating?.offsetWidth}\n            height={elements.floating?.offsetHeight}\n            lockScroll\n            focusManagerProps={{\n              context: context,\n              initialFocus,\n            }}\n            className={clsx(\n              withBaseName(),\n              withBaseName(size, currentBreakpoint),\n              {\n                [withBaseName(\"enterAnimation\")]: open,\n                [withBaseName(\"exitAnimation\")]: !open,\n                [withBaseName(status as string)]: status,\n              },\n              className,\n            )}\n            onAnimationEnd={() => {\n              if (!open && showComponent) {\n                setShowComponent(false);\n              }\n            }}\n            {...getFloatingProps()}\n            {...rest}\n          >\n            {children}\n          </FloatingComponent>\n        </ConditionalScrimWrapper>\n      </DialogContext.Provider>\n    );\n  },\n);\n"],"names":["Dialog","dialogCss"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import {\n  type FloatingFocusManager,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentProps,\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n  makePrefixer,\n  useCurrentBreakpoint,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useId,\n} from \"../utils\";\nimport dialogCss from \"./Dialog.css\";\nimport { DialogContext } from \"./DialogContext\";\n\ninterface ConditionalScrimWrapperProps {\n  children?: ReactNode;\n  condition: boolean;\n}\n\nexport const ConditionalScrimWrapper = ({\n  condition,\n  children,\n}: ConditionalScrimWrapperProps) => {\n  return condition ? <Scrim fixed>{children}</Scrim> : <>{children} </>;\n};\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The status of the Dialog\n   * */\n  status?: ValidationStatus;\n  /**\n   * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n   * Default value is 0 (first tabbable element).\n   * */\n  initialFocus?: ComponentProps<typeof FloatingFocusManager>[\"initialFocus\"];\n  /**\n   * Size of the Dialog\n   * */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * Prevent the dialog closing on click away\n   * */\n  disableDismiss?: boolean;\n  /**\n   * Prevent Scrim from rendering\n   * */\n  disableScrim?: boolean;\n  /**\n   * @deprecated IDs are now auto-generated internally for proper ARIA labeling.\n   *\n   * Optional id prop\n   * Used for accessibility purposes to announce the title and subtitle when using a screen reader\n   * */\n  idProp?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n  function Dialog(props, ref) {\n    const {\n      children,\n      className,\n      open = false,\n      onOpenChange,\n      status,\n      disableDismiss,\n      size = \"medium\",\n      disableScrim,\n      idProp,\n      initialFocus,\n      id,\n      \"aria-labelledby\": ariaLabelledBy,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dialog\",\n      css: dialogCss,\n      window: targetWindow,\n    });\n\n    const dialogId = useId(id);\n    const currentBreakpoint = useCurrentBreakpoint();\n\n    const [showComponent, setShowComponent] = useState(false);\n    const [headerId, setHeaderId] = useState(idProp);\n\n    const { context, floating, elements } = useFloatingUI({\n      open: showComponent,\n      onOpenChange,\n    });\n\n    const { getFloatingProps } = useInteractions([\n      useClick(context),\n      useDismiss(context, { outsidePress: !disableDismiss }),\n    ]);\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    useEffect(() => {\n      if (open && !showComponent) {\n        setShowComponent(true);\n      }\n\n      if (!open && showComponent) {\n        const animate = setTimeout(() => {\n          setShowComponent(false);\n        }, 300); // var(--salt-duration-perceptible)\n        return () => clearTimeout(animate);\n      }\n    }, [open, showComponent]);\n\n    const contextValue = useMemo(\n      () => ({ status, id: headerId, setId: setHeaderId, dialogId }),\n      [status, headerId, dialogId],\n    );\n\n    return (\n      <DialogContext.Provider value={contextValue}>\n        <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n          <FloatingComponent\n            id={dialogId}\n            open={showComponent}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={clsx(ariaLabelledBy, headerId) || undefined}\n            ref={floatingRef}\n            width={elements.floating?.offsetWidth}\n            height={elements.floating?.offsetHeight}\n            lockScroll\n            focusManagerProps={{\n              context: context,\n              initialFocus,\n              outsideElementsInert: true,\n            }}\n            className={clsx(\n              withBaseName(),\n              withBaseName(size, currentBreakpoint),\n              {\n                [withBaseName(\"enterAnimation\")]: open,\n                [withBaseName(\"exitAnimation\")]: !open,\n                [withBaseName(status as string)]: status,\n              },\n              className,\n            )}\n            onAnimationEnd={() => {\n              if (!open && showComponent) {\n                setShowComponent(false);\n              }\n            }}\n            {...getFloatingProps()}\n            {...rest}\n          >\n            {children}\n          </FloatingComponent>\n        </ConditionalScrimWrapper>\n      </DialogContext.Provider>\n    );\n  },\n);\n"],"names":["Dialog","dialogCss"],"mappings":"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"}

package/dist-es/drawer/Drawer.js

@@ -81,7 +81,8 @@ const Drawer = forwardRef(
         "aria-modal": "true",
         focusManagerProps: {
           context,
-          initialFocus
+          initialFocus,
+          outsideElementsInert: true
         },
         className: clsx(
           withBaseName(),

package/dist-es/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import {\n  type FloatingFocusManager,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type PropsWithChildren,\n  useEffect,\n  useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport {\n  makePrefixer,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n} from \"../utils\";\nimport drawerCss from \"./Drawer.css\";\n\ninterface ConditionalScrimWrapperProps extends PropsWithChildren {\n  condition: boolean;\n}\n\nconst ConditionalScrimWrapper = ({\n  condition,\n  children,\n}: ConditionalScrimWrapperProps) => {\n  return condition ? <Scrim fixed> {children} </Scrim> : <>{children} </>;\n};\n\nexport interface DrawerProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Defines the drawer position within the screen. Defaults to `left`.\n   */\n  position?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (newOpen: boolean) => void;\n  /**\n   * Change background color palette\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * Prevent the dialog closing on click away\n   * */\n  disableDismiss?: boolean;\n  /**\n   * Prevent Scrim from rendering\n   * */\n  disableScrim?: boolean;\n  /**\n   * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n   * Default value is 0 (first tabbable element).\n   * */\n  initialFocus?: ComponentPropsWithoutRef<\n    typeof FloatingFocusManager\n  >[\"initialFocus\"];\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n  function Drawer(props, ref) {\n    const {\n      children,\n      className,\n      position = \"left\",\n      open = false,\n      onOpenChange,\n      variant = \"primary\",\n      disableDismiss,\n      disableScrim,\n      initialFocus,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer\",\n      css: drawerCss,\n      window: targetWindow,\n    });\n\n    const [showComponent, setShowComponent] = useState(false);\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const { context, floating, elements } = useFloatingUI({\n      open: showComponent,\n      onOpenChange,\n    });\n\n    const { getFloatingProps } = useInteractions([\n      useClick(context),\n      useDismiss(context, { enabled: !disableDismiss }),\n    ]);\n\n    const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    useEffect(() => {\n      if (open && !showComponent) {\n        setShowComponent(true);\n      }\n\n      if (!open && showComponent) {\n        const animate = setTimeout(() => {\n          setShowComponent(false);\n        }, 300); // var(--salt-duration-perceptible)\n        return () => clearTimeout(animate);\n      }\n    }, [open, showComponent]);\n\n    return (\n      <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n        <FloatingComponent\n          open={showComponent}\n          ref={handleRef}\n          role={\"dialog\"}\n          width={elements.floating?.offsetWidth}\n          height={elements.floating?.offsetHeight}\n          aria-modal=\"true\"\n          focusManagerProps={{\n            context: context,\n            initialFocus,\n          }}\n          className={clsx(\n            withBaseName(),\n            withBaseName(position),\n            {\n              [withBaseName(\"enterAnimation\")]: open,\n              [withBaseName(\"exitAnimation\")]: !open,\n              [withBaseName(variant)]: variant,\n            },\n            className,\n          )}\n          {...getFloatingProps()}\n          {...rest}\n        >\n          {children}\n        </FloatingComponent>\n      </ConditionalScrimWrapper>\n    );\n  },\n);\n"],"names":["Drawer","drawerCss"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import {\n  type FloatingFocusManager,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type PropsWithChildren,\n  useEffect,\n  useState,\n} from \"react\";\nimport { Scrim } from \"../scrim\";\nimport {\n  makePrefixer,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n} from \"../utils\";\nimport drawerCss from \"./Drawer.css\";\n\ninterface ConditionalScrimWrapperProps extends PropsWithChildren {\n  condition: boolean;\n}\n\nconst ConditionalScrimWrapper = ({\n  condition,\n  children,\n}: ConditionalScrimWrapperProps) => {\n  return condition ? <Scrim fixed> {children} </Scrim> : <>{children} </>;\n};\n\nexport interface DrawerProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Defines the drawer position within the screen. Defaults to `left`.\n   */\n  position?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (newOpen: boolean) => void;\n  /**\n   * Change background color palette\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * Prevent the dialog closing on click away\n   * */\n  disableDismiss?: boolean;\n  /**\n   * Prevent Scrim from rendering\n   * */\n  disableScrim?: boolean;\n  /**\n   * Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref.\n   * Default value is 0 (first tabbable element).\n   * */\n  initialFocus?: ComponentPropsWithoutRef<\n    typeof FloatingFocusManager\n  >[\"initialFocus\"];\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n  function Drawer(props, ref) {\n    const {\n      children,\n      className,\n      position = \"left\",\n      open = false,\n      onOpenChange,\n      variant = \"primary\",\n      disableDismiss,\n      disableScrim,\n      initialFocus,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-drawer\",\n      css: drawerCss,\n      window: targetWindow,\n    });\n\n    const [showComponent, setShowComponent] = useState(false);\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const { context, floating, elements } = useFloatingUI({\n      open: showComponent,\n      onOpenChange,\n    });\n\n    const { getFloatingProps } = useInteractions([\n      useClick(context),\n      useDismiss(context, { enabled: !disableDismiss }),\n    ]);\n\n    const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    useEffect(() => {\n      if (open && !showComponent) {\n        setShowComponent(true);\n      }\n\n      if (!open && showComponent) {\n        const animate = setTimeout(() => {\n          setShowComponent(false);\n        }, 300); // var(--salt-duration-perceptible)\n        return () => clearTimeout(animate);\n      }\n    }, [open, showComponent]);\n\n    return (\n      <ConditionalScrimWrapper condition={showComponent && !disableScrim}>\n        <FloatingComponent\n          open={showComponent}\n          ref={handleRef}\n          role={\"dialog\"}\n          width={elements.floating?.offsetWidth}\n          height={elements.floating?.offsetHeight}\n          aria-modal=\"true\"\n          focusManagerProps={{\n            context: context,\n            initialFocus,\n            outsideElementsInert: true,\n          }}\n          className={clsx(\n            withBaseName(),\n            withBaseName(position),\n            {\n              [withBaseName(\"enterAnimation\")]: open,\n              [withBaseName(\"exitAnimation\")]: !open,\n              [withBaseName(variant)]: variant,\n            },\n            className,\n          )}\n          {...getFloatingProps()}\n          {...rest}\n        >\n          {children}\n        </FloatingComponent>\n      </ConditionalScrimWrapper>\n    );\n  },\n);\n"],"names":["Drawer","drawerCss"],"mappings":"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"}

package/dist-es/file-drop-zone/FileDropZone.js

@@ -10,7 +10,7 @@ import '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
 import css_248z from './FileDropZone.css.js';
-import { extractFiles, containsFiles } from './internal/utils.js';
+import { containsFiles, extractFiles } from './internal/utils.js';
 
 const withBaseName = makePrefixer("saltFileDropZone");
 const FileDropZone = forwardRef(
@@ -34,8 +34,19 @@ const FileDropZone = forwardRef(
     const regionRef = useRef(null);
     const handleRef = useForkRef(ref, regionRef);
     const handleDragOver = (event) => {
+      onDragOver == null ? void 0 : onDragOver(event);
+      const hasFiles = containsFiles(event);
       event.preventDefault();
       event.stopPropagation();
+      if (!hasFiles) {
+        if (event.dataTransfer) {
+          event.dataTransfer.dropEffect = "none";
+        }
+        if (isActive) {
+          setActive(false);
+        }
+        return;
+      }
       if (disabled) {
         if (event.dataTransfer) {
           event.dataTransfer.dropEffect = "none";
@@ -45,10 +56,9 @@ const FileDropZone = forwardRef(
       if (event.dataTransfer) {
         event.dataTransfer.dropEffect = "copy";
       }
-      if (!isActive && containsFiles(event)) {
+      if (!isActive) {
         setActive(true);
       }
-      onDragOver == null ? void 0 : onDragOver(event);
     };
     const handleDragLeave = (event) => {
       if (disabled) {
@@ -56,16 +66,21 @@ const FileDropZone = forwardRef(
       }
       const region = regionRef == null ? void 0 : regionRef.current;
       const eventTarget = event.relatedTarget;
-      if (eventTarget !== region && !(region == null ? void 0 : region.contains(eventTarget))) {
+      if (eventTarget !== region && (!(eventTarget instanceof Node) || !(region == null ? void 0 : region.contains(eventTarget)))) {
         setActive(false);
       }
       onDragLeave == null ? void 0 : onDragLeave(event);
     };
     const handleDrop = (event) => {
+      event.preventDefault();
+      if (!containsFiles(event)) {
+        setActive(false);
+        return;
+      }
       if (disabled) {
+        setActive(false);
         return;
       }
-      event.preventDefault();
       const files = extractFiles(event);
       setActive(false);
       onDrop == null ? void 0 : onDrop(event, files);

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

@@ -1 +1 @@
-{"version":3,"file":"FileDropZone.js","sources":["../src/file-drop-zone/FileDropZone.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type DragEvent,\n  type DragEventHandler,\n  forwardRef,\n  useRef,\n  useState,\n} from \"react\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer, useForkRef } from \"../utils\";\nimport fileDropZoneCss from \"./FileDropZone.css\";\nimport { containsFiles, extractFiles } from \"./internal/utils\";\n\nexport interface FileDropZoneProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onDrop\"> {\n  /**\n   * If `true`, the file drop zone will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Status indicator to be displayed.\n   */\n  status?: Exclude<ValidationStatus, \"info\" | \"warning\">;\n  /**\n   * Callback for on drop event\n   */\n  onDrop?: (event: DragEvent<HTMLDivElement>, files: File[]) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltFileDropZone\");\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(\n  function FileDropZone(\n    {\n      status,\n      className,\n      children,\n      disabled,\n      onDragOver,\n      onDragLeave,\n      onDrop,\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-file-drop-zone\",\n      css: fileDropZoneCss,\n      window: targetWindow,\n    });\n    const [isActive, setActive] = useState(false);\n\n    const regionRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(ref, regionRef);\n\n    const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {\n      // Need to cancel the default events to allow drop\n      // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (disabled) {\n        if (event.dataTransfer) {\n          event.dataTransfer.dropEffect = \"none\";\n        }\n        return;\n      }\n      if (event.dataTransfer) {\n        event.dataTransfer.dropEffect = \"copy\";\n      }\n      if (!isActive && containsFiles(event)) {\n        setActive(true);\n      }\n      onDragOver?.(event);\n    };\n\n    const handleDragLeave: DragEventHandler<HTMLDivElement> = (event) => {\n      if (disabled) {\n        return;\n      }\n      const region = regionRef?.current;\n      const eventTarget = event.relatedTarget;\n      if (eventTarget !== region && !region?.contains(eventTarget as Node)) {\n        setActive(false);\n      }\n      onDragLeave?.(event);\n    };\n\n    const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {\n      if (disabled) {\n        return;\n      }\n      event.preventDefault();\n      const files = extractFiles(event);\n      setActive(false);\n      onDrop?.(event, files);\n    };\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(status as string)]: status,\n            [withBaseName(\"active\")]: isActive,\n            [withBaseName(\"disabled\")]: disabled,\n          },\n          className,\n        )}\n        aria-disabled={disabled}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        ref={handleRef}\n        {...restProps}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["FileDropZone","fileDropZoneCss"],"mappings":"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"}
+{"version":3,"file":"FileDropZone.js","sources":["../src/file-drop-zone/FileDropZone.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type DragEvent,\n  type DragEventHandler,\n  forwardRef,\n  useRef,\n  useState,\n} from \"react\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer, useForkRef } from \"../utils\";\nimport fileDropZoneCss from \"./FileDropZone.css\";\nimport { containsFiles, extractFiles } from \"./internal/utils\";\n\nexport interface FileDropZoneProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onDrop\"> {\n  /**\n   * If `true`, the file drop zone will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Status indicator to be displayed.\n   */\n  status?: Exclude<ValidationStatus, \"info\" | \"warning\">;\n  /**\n   * Callback for on drop event\n   */\n  onDrop?: (event: DragEvent<HTMLDivElement>, files: File[]) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltFileDropZone\");\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(\n  function FileDropZone(\n    {\n      status,\n      className,\n      children,\n      disabled,\n      onDragOver,\n      onDragLeave,\n      onDrop,\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-file-drop-zone\",\n      css: fileDropZoneCss,\n      window: targetWindow,\n    });\n    const [isActive, setActive] = useState(false);\n\n    const regionRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(ref, regionRef);\n\n    const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {\n      onDragOver?.(event);\n\n      const hasFiles = containsFiles(event);\n      // Need to cancel the default events to allow drop\n      // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (!hasFiles) {\n        if (event.dataTransfer) {\n          event.dataTransfer.dropEffect = \"none\";\n        }\n        if (isActive) {\n          setActive(false);\n        }\n        return;\n      }\n\n      if (disabled) {\n        if (event.dataTransfer) {\n          event.dataTransfer.dropEffect = \"none\";\n        }\n        return;\n      }\n      if (event.dataTransfer) {\n        event.dataTransfer.dropEffect = \"copy\";\n      }\n      if (!isActive) {\n        setActive(true);\n      }\n    };\n\n    const handleDragLeave: DragEventHandler<HTMLDivElement> = (event) => {\n      if (disabled) {\n        return;\n      }\n      const region = regionRef?.current;\n      const eventTarget = event.relatedTarget;\n      if (\n        eventTarget !== region &&\n        (!(eventTarget instanceof Node) || !region?.contains(eventTarget))\n      ) {\n        setActive(false);\n      }\n      onDragLeave?.(event);\n    };\n\n    const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {\n      event.preventDefault();\n\n      if (!containsFiles(event)) {\n        setActive(false);\n        return;\n      }\n\n      if (disabled) {\n        setActive(false);\n        return;\n      }\n\n      const files = extractFiles(event);\n      setActive(false);\n      onDrop?.(event, files);\n    };\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(status as string)]: status,\n            [withBaseName(\"active\")]: isActive,\n            [withBaseName(\"disabled\")]: disabled,\n          },\n          className,\n        )}\n        aria-disabled={disabled}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n        ref={handleRef}\n        {...restProps}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["FileDropZone","fileDropZoneCss"],"mappings":"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"}

package/dist-es/file-drop-zone/FileDropZoneTrigger.js

@@ -8,7 +8,7 @@ import '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
 
-const FileDropZoneTrigger = forwardRef(function FileDropZoneTrigger2({ accept, children, disabled, multiple = false, onChange, ...rest }, ref) {
+const FileDropZoneTrigger = forwardRef(function FileDropZoneTrigger2({ accept, children, disabled, multiple = false, onClick, onChange, ...rest }, ref) {
   const buttonRef = useRef(null);
   const fileInputRef = useRef(null);
   const triggerRef = useForkRef(ref, buttonRef);
@@ -19,13 +19,14 @@ const FileDropZoneTrigger = forwardRef(function FileDropZoneTrigger2({ accept, c
   };
   const handleClick = (event) => {
     var _a;
+    onClick == null ? void 0 : onClick(event);
     event.stopPropagation();
     (_a = fileInputRef.current) == null ? void 0 : _a.click();
   };
   const handleChange = (event) => {
     const files = Array.from(event.target.files ?? []);
-    event.target.value = "";
     onChange == null ? void 0 : onChange(event, files);
+    event.target.value = "";
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(

package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDropZoneTrigger.js","sources":["../src/file-drop-zone/FileDropZoneTrigger.tsx"],"sourcesContent":["import {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  forwardRef,\n  type SyntheticEvent,\n  useRef,\n} from \"react\";\nimport { Button, type ButtonProps } from \"../button\";\nimport { useForkRef } from \"../utils\";\n\nexport interface FileDropZoneTriggerProps\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"onChange\"> {\n  /**\n   * `accept` attribute for HTML <input>.\n   *\n   * A comma separated list of file types the user can pick from the file input dialog box.\n   */\n  accept?: string;\n  /**\n   * Disable all trigger elements.\n   */\n  disabled?: boolean;\n  /**\n   * Allows multiple files to be uploaded.\n   */\n  multiple?: boolean;\n  /**\n   * Callback for input change event\n   */\n  onChange?: (event: ChangeEvent<HTMLInputElement>, files: File[]) => void;\n  /**\n   * The appearance of the button. Options are 'solid', 'bordered', and 'transparent'.\n   * 'solid' is the default value.\n   */\n  appearance?: ButtonProps[\"appearance\"];\n  /**\n   * The sentiment of the button. Options are 'accented' and 'neutral'.\n   * 'neutral' is the default value.\n   *\n   */\n  sentiment?: Extract<ButtonProps[\"sentiment\"], \"accented\" | \"neutral\">;\n}\n\nexport const FileDropZoneTrigger = forwardRef<\n  HTMLButtonElement,\n  FileDropZoneTriggerProps\n>(function FileDropZoneTrigger(\n  { accept, children, disabled, multiple = false, onChange, ...rest },\n  ref,\n) {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const triggerRef = useForkRef(ref, buttonRef);\n\n  // As an ADA requirement when dialog is closed and the focus is returned to the input, we need to\n  // move focus back on the button element so that all labels can be announced correctly\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    event.stopPropagation();\n    buttonRef.current?.focus();\n  };\n\n  const handleClick = (event: SyntheticEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n    fileInputRef.current?.click();\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const files = Array.from((event.target as HTMLInputElement).files ?? []);\n    // Allow selecting the same file multiple times - #3591\n    // User would still be able to put back the value in onChange, if necessary\n    event.target.value = \"\";\n    onChange?.(event, files);\n  };\n  return (\n    <>\n      <Button\n        onClick={handleClick}\n        disabled={disabled}\n        ref={triggerRef}\n        {...rest}\n      >\n        {children ?? \"Browse files\"}\n      </Button>\n      <input\n        accept={accept}\n        style={{ display: \"none\" }}\n        disabled={disabled}\n        multiple={multiple}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        ref={fileInputRef}\n        type=\"file\"\n      />\n    </>\n  );\n});\n"],"names":["FileDropZoneTrigger"],"mappings":";;;;;;;;;;AA4CO,MAAM,mBAAA,GAAsB,UAAA,CAGjC,SAASA,oBAAAA,CACT,EAAE,MAAA,EAAQ,QAAA,EAAU,QAAA,EAAU,QAAA,GAAW,KAAA,EAAO,QAAA,EAAU,GAAG,IAAA,IAC7D,GAAA,EACA;AACA,EAAA,MAAM,SAAA,GAAY,OAA0B,IAAI,CAAA;AAChD,EAAA,MAAM,YAAA,GAAe,OAAyB,IAAI,CAAA;AAClD,EAAA,MAAM,UAAA,GAAa,UAAA,CAAW,GAAA,EAAK,SAAS,CAAA;AAI5C,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAwC;AAzD/D,IAAA,IAAA,EAAA;AA0DI,IAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,IAAA,CAAA,EAAA,GAAA,SAAA,CAAU,YAAV,IAAA,GAAA,MAAA,GAAA,EAAA,CAAmB,KAAA,EAAA;AAAA,EACrB,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAA6C;AA9DpE,IAAA,IAAA,EAAA;AA+DI,IAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,IAAA,CAAA,EAAA,GAAA,YAAA,CAAa,YAAb,IAAA,GAAA,MAAA,GAAA,EAAA,CAAsB,KAAA,EAAA;AAAA,EACxB,CAAA;AAEA,EAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAAyC;AAC7D,IAAA,MAAM,QAAQ,KAAA,CAAM,IAAA,CAAM,MAAM,MAAA,CAA4B,KAAA,IAAS,EAAE,CAAA;AAGvE,IAAA,KAAA,CAAM,OAAO,KAAA,GAAQ,EAAA;AACrB,IAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,EAAO,KAAA,CAAA;AAAA,EACpB,CAAA;AACA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,WAAA;AAAA,QACT,QAAA;AAAA,QACA,GAAA,EAAK,UAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,QAAA,IAAY;AAAA;AAAA,KACf;AAAA,oBACA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,MAAA;AAAA,QACA,KAAA,EAAO,EAAE,OAAA,EAAS,MAAA,EAAO;AAAA,QACzB,QAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA,EAAU,YAAA;AAAA,QACV,OAAA,EAAS,WAAA;AAAA,QACT,GAAA,EAAK,YAAA;AAAA,QACL,IAAA,EAAK;AAAA;AAAA;AACP,GAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"FileDropZoneTrigger.js","sources":["../src/file-drop-zone/FileDropZoneTrigger.tsx"],"sourcesContent":["import {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  forwardRef,\n  type MouseEvent,\n  useRef,\n} from \"react\";\nimport { Button, type ButtonProps } from \"../button\";\nimport { useForkRef } from \"../utils\";\n\nexport interface FileDropZoneTriggerProps\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"onChange\"> {\n  /**\n   * `accept` attribute for HTML <input>.\n   *\n   * A comma separated list of file types the user can pick from the file input dialog box.\n   */\n  accept?: string;\n  /**\n   * Disable all trigger elements.\n   */\n  disabled?: boolean;\n  /**\n   * Allows multiple files to be uploaded.\n   */\n  multiple?: boolean;\n  /**\n   * Callback for input change event\n   */\n  onChange?: (event: ChangeEvent<HTMLInputElement>, files: File[]) => void;\n  /**\n   * The appearance of the button. Options are 'solid', 'bordered', and 'transparent'.\n   * 'solid' is the default value.\n   */\n  appearance?: ButtonProps[\"appearance\"];\n  /**\n   * The sentiment of the button. Options are 'accented' and 'neutral'.\n   * 'neutral' is the default value.\n   *\n   */\n  sentiment?: Extract<ButtonProps[\"sentiment\"], \"accented\" | \"neutral\">;\n}\n\nexport const FileDropZoneTrigger = forwardRef<\n  HTMLButtonElement,\n  FileDropZoneTriggerProps\n>(function FileDropZoneTrigger(\n  { accept, children, disabled, multiple = false, onClick, onChange, ...rest },\n  ref,\n) {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const triggerRef = useForkRef(ref, buttonRef);\n\n  // As an ADA requirement when dialog is closed and the focus is returned to the input, we need to\n  // move focus back on the button element so that all labels can be announced correctly\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    event.stopPropagation();\n    buttonRef.current?.focus();\n  };\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n    event.stopPropagation();\n    fileInputRef.current?.click();\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const files = Array.from((event.target as HTMLInputElement).files ?? []);\n    onChange?.(event, files);\n\n    // Reset after onChange so consumers can read the selected files first.\n    // Clearing the value allows selecting the same file again - #3591.\n    event.target.value = \"\";\n  };\n  return (\n    <>\n      <Button\n        onClick={handleClick}\n        disabled={disabled}\n        ref={triggerRef}\n        {...rest}\n      >\n        {children ?? \"Browse files\"}\n      </Button>\n      <input\n        accept={accept}\n        style={{ display: \"none\" }}\n        disabled={disabled}\n        multiple={multiple}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        ref={fileInputRef}\n        type=\"file\"\n      />\n    </>\n  );\n});\n"],"names":["FileDropZoneTrigger"],"mappings":";;;;;;;;;;AA4CO,MAAM,mBAAA,GAAsB,UAAA,CAGjC,SAASA,oBAAAA,CACT,EAAE,MAAA,EAAQ,QAAA,EAAU,QAAA,EAAU,QAAA,GAAW,OAAO,OAAA,EAAS,QAAA,EAAU,GAAG,IAAA,IACtE,GAAA,EACA;AACA,EAAA,MAAM,SAAA,GAAY,OAA0B,IAAI,CAAA;AAChD,EAAA,MAAM,YAAA,GAAe,OAAyB,IAAI,CAAA;AAClD,EAAA,MAAM,UAAA,GAAa,UAAA,CAAW,GAAA,EAAK,SAAS,CAAA;AAI5C,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAwC;AAzD/D,IAAA,IAAA,EAAA;AA0DI,IAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,IAAA,CAAA,EAAA,GAAA,SAAA,CAAU,YAAV,IAAA,GAAA,MAAA,GAAA,EAAA,CAAmB,KAAA,EAAA;AAAA,EACrB,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AA9DhE,IAAA,IAAA,EAAA;AA+DI,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AACV,IAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,IAAA,CAAA,EAAA,GAAA,YAAA,CAAa,YAAb,IAAA,GAAA,MAAA,GAAA,EAAA,CAAsB,KAAA,EAAA;AAAA,EACxB,CAAA;AAEA,EAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAAyC;AAC7D,IAAA,MAAM,QAAQ,KAAA,CAAM,IAAA,CAAM,MAAM,MAAA,CAA4B,KAAA,IAAS,EAAE,CAAA;AACvE,IAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,KAAA,EAAO,KAAA,CAAA;AAIlB,IAAA,KAAA,CAAM,OAAO,KAAA,GAAQ,EAAA;AAAA,EACvB,CAAA;AACA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,WAAA;AAAA,QACT,QAAA;AAAA,QACA,GAAA,EAAK,UAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,QAAA,IAAY;AAAA;AAAA,KACf;AAAA,oBACA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,MAAA;AAAA,QACA,KAAA,EAAO,EAAE,OAAA,EAAS,MAAA,EAAO;AAAA,QACzB,QAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA,EAAU,YAAA;AAAA,QACV,OAAA,EAAS,WAAA;AAAA,QACT,GAAA,EAAK,YAAA;AAAA,QACL,IAAA,EAAK;AAAA;AAAA;AACP,GAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/grid-layout/GridLayout.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Style applied to the root element */\n.saltGridLayout {\n  display: grid;\n  column-gap: var(--gridLayout-columnGap);\n  row-gap: var(--gridLayout-rowGap);\n  grid-template-columns: var(--gridLayout-columns);\n  grid-template-rows: var(--gridLayout-rows);\n  margin: var(--gridLayout-margin);\n  padding: var(--gridLayout-padding);\n  grid-auto-columns: auto;\n  grid-auto-rows: auto;\n}\n\n.saltGridLayout-area {\n  grid-template: var(--gridLayout-gridTemplate);\n  grid-template-columns: min-content 1fr min-content;\n  grid-template-rows: min-content 1fr min-content;\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltGridLayout {\n  display: grid;\n  column-gap: var(--gridLayout-columnGap);\n  row-gap: var(--gridLayout-rowGap);\n  grid-template-columns: var(--gridLayout-columns);\n  grid-template-rows: var(--gridLayout-rows);\n  margin: var(--gridLayout-margin);\n  padding: var(--gridLayout-padding);\n  grid-auto-columns: auto;\n  grid-auto-rows: auto;\n}\n\n.saltGridLayout-area {\n  grid-template: var(--gridLayout-gridTemplate);\n  grid-template-columns: var(--gridLayout-areaColumns, min-content 1fr min-content);\n  grid-template-rows: var(--gridLayout-areaRows, min-content 1fr min-content);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=GridLayout.css.js.map

package/dist-es/index.js

@@ -58,6 +58,17 @@ export { Link } from './link/Link.js';
 export { LinkCard } from './link-card/LinkCard.js';
 export { ListBox } from './list-box/ListBox.js';
 export { useListControlContext } from './list-control/ListControlContext.js';
+export { MegaMenu } from './mega-menu/MegaMenu.js';
+export { MegaMenuActions } from './mega-menu/MegaMenuActions.js';
+export { MegaMenuAside } from './mega-menu/MegaMenuAside.js';
+export { MegaMenuContent } from './mega-menu/MegaMenuContent.js';
+export { MegaMenuGroup } from './mega-menu/MegaMenuGroup.js';
+export { MegaMenuGroupHeading } from './mega-menu/MegaMenuGroupHeading.js';
+export { MegaMenuGroups } from './mega-menu/MegaMenuGroups.js';
+export { MegaMenuList } from './mega-menu/MegaMenuList.js';
+export { MegaMenuListItem } from './mega-menu/MegaMenuListItem.js';
+export { MegaMenuPanel } from './mega-menu/MegaMenuPanel.js';
+export { MegaMenuTrigger } from './mega-menu/MegaMenuTrigger.js';
 export { Menu } from './menu/Menu.js';
 export { MenuGroup } from './menu/MenuGroup.js';
 export { MenuItem } from './menu/MenuItem.js';

package/dist-es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-es/mega-menu/MegaMenu.js

@@ -0,0 +1,79 @@
+import { jsx } from 'react/jsx-runtime';
+import { useFloatingRootContext, useInteractions, useClick, useDismiss } from '@floating-ui/react';
+import { useState, useRef, useCallback, useMemo } from 'react';
+import 'clsx';
+import { useControlled } from '../utils/useControlled.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { MegaMenuContext } from './MegaMenuContext.js';
+import { useMegaMenuNavigation } from './useMegaMenuNavigation.js';
+
+function MegaMenu({
+  children,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  placement = "bottom"
+}) {
+  const [openState, setOpenState] = useControlled({
+    controlled: open,
+    default: defaultOpen,
+    name: "MegaMenu",
+    state: "open"
+  });
+  const [reference, setReference] = useState(null);
+  const [floating, setFloating] = useState(null);
+  const focusFirstItemOnOpenRef = useRef(false);
+  const [panelId, setPanelId] = useState();
+  const setOpen = useCallback(
+    (newOpen) => {
+      if (!newOpen) {
+        focusFirstItemOnOpenRef.current = false;
+      }
+      setOpenState(newOpen);
+      onOpenChange == null ? void 0 : onOpenChange(newOpen);
+    },
+    [onOpenChange]
+  );
+  const floatingRootContext = useFloatingRootContext({
+    open: openState,
+    onOpenChange: setOpen,
+    elements: { reference, floating }
+  });
+  const megaMenuNavigation = useMegaMenuNavigation(floatingRootContext);
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    useClick(floatingRootContext),
+    useDismiss(floatingRootContext),
+    megaMenuNavigation
+  ]);
+  const contextValue = useMemo(
+    () => ({
+      openState,
+      floatingRootContext,
+      placement,
+      getFloatingProps,
+      getReferenceProps,
+      setFloating,
+      setReference,
+      setOpen,
+      focusFirstItemOnOpenRef,
+      panelId,
+      setPanelId
+    }),
+    [
+      openState,
+      floatingRootContext,
+      placement,
+      getFloatingProps,
+      getReferenceProps,
+      setOpen,
+      panelId
+    ]
+  );
+  return /* @__PURE__ */ jsx(MegaMenuContext.Provider, { value: contextValue, children });
+}
+
+export { MegaMenu };
+//# sourceMappingURL=MegaMenu.js.map

package/dist-es/mega-menu/MegaMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenu.js","sources":["../src/mega-menu/MegaMenu.tsx"],"sourcesContent":["import {\n  useClick,\n  useDismiss,\n  useFloatingRootContext,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { type ReactNode, useCallback, useMemo, useRef, useState } from \"react\";\nimport { useControlled } from \"../utils\";\nimport { MegaMenuContext } from \"./MegaMenuContext\";\nimport { useMegaMenuNavigation } from \"./useMegaMenuNavigation\";\n\n/**\n * Supported placements for the mega menu panel.\n */\nexport type MegaMenuPlacement = \"bottom\" | \"bottom-start\" | \"bottom-end\";\n\nexport interface MegaMenuProps {\n  /**\n   * The content of the mega menu, typically `MegaMenuTrigger` and `MegaMenuPanel`.\n   */\n  children?: ReactNode;\n  /**\n   * Whether the mega menu is open. Use for controlled mode.\n   */\n  open?: boolean;\n  /**\n   * Whether the mega menu is initially open. Use for uncontrolled mode.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Callback fired when the open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The placement of the mega menu panel relative to the trigger.\n   * @default \"bottom\"\n   */\n  placement?: MegaMenuPlacement;\n}\n\n/**\n * Root of a mega menu, coordinating its trigger and panel.\n *\n * Not intended to be nested inside another floating overlay (e.g. a dialog or\n * popover): the mega menu does not participate in floating-ui's `FloatingTree`\n */\nexport function MegaMenu({\n  children,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  placement = \"bottom\",\n}: MegaMenuProps) {\n  const [openState, setOpenState] = useControlled({\n    controlled: open,\n    default: defaultOpen,\n    name: \"MegaMenu\",\n    state: \"open\",\n  });\n\n  const [reference, setReference] = useState<HTMLElement | null>(null);\n  const [floating, setFloating] = useState<HTMLElement | null>(null);\n  const focusFirstItemOnOpenRef = useRef(false);\n  const [panelId, setPanelId] = useState<string>();\n\n  const setOpen = useCallback(\n    (newOpen: boolean) => {\n      if (!newOpen) {\n        focusFirstItemOnOpenRef.current = false;\n      }\n      setOpenState(newOpen);\n      onOpenChange?.(newOpen);\n    },\n    [onOpenChange],\n  );\n\n  const floatingRootContext = useFloatingRootContext({\n    open: openState,\n    onOpenChange: setOpen,\n    elements: { reference, floating },\n  });\n\n  const megaMenuNavigation = useMegaMenuNavigation(floatingRootContext);\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useClick(floatingRootContext),\n    useDismiss(floatingRootContext),\n    megaMenuNavigation,\n  ]);\n\n  const contextValue = useMemo(\n    () => ({\n      openState,\n      floatingRootContext,\n      placement,\n      getFloatingProps,\n      getReferenceProps,\n      setFloating,\n      setReference,\n      setOpen,\n      focusFirstItemOnOpenRef,\n      panelId,\n      setPanelId,\n    }),\n    [\n      openState,\n      floatingRootContext,\n      placement,\n      getFloatingProps,\n      getReferenceProps,\n      setOpen,\n      panelId,\n    ],\n  );\n\n  return (\n    <MegaMenuContext.Provider value={contextValue}>\n      {children}\n    </MegaMenuContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AA+CO,SAAS,QAAA,CAAS;AAAA,EACvB,QAAA;AAAA,EACA,IAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,YAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,EAAkB;AAChB,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,aAAA,CAAc;AAAA,IAC9C,UAAA,EAAY,IAAA;AAAA,IACZ,OAAA,EAAS,WAAA;AAAA,IACT,IAAA,EAAM,UAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AAED,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAA6B,IAAI,CAAA;AACnE,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAA6B,IAAI,CAAA;AACjE,EAAA,MAAM,uBAAA,GAA0B,OAAO,KAAK,CAAA;AAC5C,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,QAAA,EAAiB;AAE/C,EAAA,MAAM,OAAA,GAAU,WAAA;AAAA,IACd,CAAC,OAAA,KAAqB;AACpB,MAAA,IAAI,CAAC,OAAA,EAAS;AACZ,QAAA,uBAAA,CAAwB,OAAA,GAAU,KAAA;AAAA,MACpC;AACA,MAAA,YAAA,CAAa,OAAO,CAAA;AACpB,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,OAAA,CAAA;AAAA,IACjB,CAAA;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,MAAM,sBAAsB,sBAAA,CAAuB;AAAA,IACjD,IAAA,EAAM,SAAA;AAAA,IACN,YAAA,EAAc,OAAA;AAAA,IACd,QAAA,EAAU,EAAE,SAAA,EAAW,QAAA;AAAS,GACjC,CAAA;AAED,EAAA,MAAM,kBAAA,GAAqB,sBAAsB,mBAAmB,CAAA;AAEpE,EAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAA,EAAiB,GAAI,eAAA,CAAgB;AAAA,IAC9D,SAAS,mBAAmB,CAAA;AAAA,IAC5B,WAAW,mBAAmB,CAAA;AAAA,IAC9B;AAAA,GACD,CAAA;AAED,EAAA,MAAM,YAAA,GAAe,OAAA;AAAA,IACnB,OAAO;AAAA,MACL,SAAA;AAAA,MACA,mBAAA;AAAA,MACA,SAAA;AAAA,MACA,gBAAA;AAAA,MACA,iBAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAA;AAAA,MACA,uBAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,SAAA;AAAA,MACA,mBAAA;AAAA,MACA,SAAA;AAAA,MACA,gBAAA;AAAA,MACA,iBAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,2BACG,eAAA,CAAgB,QAAA,EAAhB,EAAyB,KAAA,EAAO,cAC9B,QAAA,EACH,CAAA;AAEJ;;;;"}

package/dist-es/mega-menu/MegaMenuActions.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltMegaMenuActions {\n  display: flex;\n  flex-wrap: wrap;\n  margin-block-start: auto;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=MegaMenuActions.css.js.map

package/dist-es/mega-menu/MegaMenuActions.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuActions.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/mega-menu/MegaMenuActions.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import css_248z from './MegaMenuActions.css.js';
+
+const withBaseName = makePrefixer("saltMegaMenuActions");
+const MegaMenuActions = forwardRef(
+  function MegaMenuActions2({ className, ...rest }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-mega-menu-actions",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-mega-menu-actions": "",
+        className: clsx(withBaseName(), className),
+        ref,
+        ...rest
+      }
+    );
+  }
+);
+
+export { MegaMenuActions };
+//# sourceMappingURL=MegaMenuActions.js.map

package/dist-es/mega-menu/MegaMenuActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuActions.js","sources":["../src/mega-menu/MegaMenuActions.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport megaMenuActionsCss from \"./MegaMenuActions.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuActions\");\n\nexport interface MegaMenuActionsProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of the actions. Place `MegaMenuActions` inside\n   * `MegaMenuContent`, after `MegaMenuGroups`; it renders as a band beneath the\n   * groups, spanning their width.\n   */\n  children?: ReactNode;\n}\n\nexport const MegaMenuActions = forwardRef<HTMLDivElement, MegaMenuActionsProps>(\n  function MegaMenuActions({ className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-mega-menu-actions\",\n      css: megaMenuActionsCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        data-mega-menu-actions=\"\"\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["MegaMenuActions","megaMenuActionsCss"],"mappings":";;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA;AAWhD,MAAM,eAAA,GAAkB,UAAA;AAAA,EAC7B,SAASA,gBAAAA,CAAgB,EAAE,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AACpD,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,wBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,wBAAA,EAAuB,EAAA;AAAA,QACvB,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;;;;"}

package/dist-es/mega-menu/MegaMenuAside.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltMegaMenuAside {\n  flex: 0 0 auto;\n  display: flex;\n  flex-direction: column;\n  padding: var(--salt-spacing-300);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=MegaMenuAside.css.js.map

package/dist-es/mega-menu/MegaMenuAside.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuAside.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/mega-menu/MegaMenuAside.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import css_248z from './MegaMenuAside.css.js';
+
+const withBaseName = makePrefixer("saltMegaMenuAside");
+const MegaMenuAside = forwardRef(
+  function MegaMenuAside2({ className, ...rest }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-mega-menu-aside",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx(
+      "aside",
+      {
+        "data-mega-menu-column": "",
+        className: clsx(withBaseName(), className),
+        ref,
+        ...rest
+      }
+    );
+  }
+);
+
+export { MegaMenuAside };
+//# sourceMappingURL=MegaMenuAside.js.map

package/dist-es/mega-menu/MegaMenuAside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuAside.js","sources":["../src/mega-menu/MegaMenuAside.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport megaMenuAsideCss from \"./MegaMenuAside.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuAside\");\n\nexport interface MegaMenuAsideProps extends ComponentPropsWithoutRef<\"aside\"> {\n  /**\n   * The content. Renders to the left of `MegaMenuContent` when placed before\n   * it, and to the right when placed after.\n   */\n  children?: ReactNode;\n}\n\nexport const MegaMenuAside = forwardRef<HTMLElement, MegaMenuAsideProps>(\n  function MegaMenuAside({ className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-mega-menu-aside\",\n      css: megaMenuAsideCss,\n      window: targetWindow,\n    });\n\n    // Side content is also a navigation column (`data-mega-menu-column`).\n    return (\n      <aside\n        data-mega-menu-column=\"\"\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["MegaMenuAside","megaMenuAsideCss"],"mappings":";;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAU9C,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,SAASA,cAAAA,CAAc,EAAE,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AAClD,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAGD,IAAA,uBACE,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,uBAAA,EAAsB,EAAA;AAAA,QACtB,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;;;;"}

package/dist-es/mega-menu/MegaMenuContent.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltMegaMenuContent {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-300);\n  padding: var(--salt-spacing-300);\n  min-width: 0;\n  flex: 0 1 auto;\n  max-inline-size: var(--saltMegaMenuPanel-availableWidth);\n  box-sizing: border-box;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=MegaMenuContent.css.js.map

package/dist-es/mega-menu/MegaMenuContent.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuContent.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/mega-menu/MegaMenuContent.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import css_248z from './MegaMenuContent.css.js';
+
+const withBaseName = makePrefixer("saltMegaMenuContent");
+const MegaMenuContent = forwardRef(
+  function MegaMenuContent2({ children, className, ...rest }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-mega-menu-content",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx("div", { className: clsx(withBaseName(), className), ref, ...rest, children });
+  }
+);
+
+export { MegaMenuContent };
+//# sourceMappingURL=MegaMenuContent.js.map

package/dist-es/mega-menu/MegaMenuContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuContent.js","sources":["../src/mega-menu/MegaMenuContent.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport megaMenuContentCss from \"./MegaMenuContent.css\";\n\nconst withBaseName = makePrefixer(\"saltMegaMenuContent\");\n\nexport interface MegaMenuContentProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of the mega menu navigation area, typically a `MegaMenuGroups`\n   * and an optional `MegaMenuActions`.\n   */\n  children?: ReactNode;\n}\n\nexport const MegaMenuContent = forwardRef<HTMLDivElement, MegaMenuContentProps>(\n  function MegaMenuContent({ children, className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-mega-menu-content\",\n      css: megaMenuContentCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["MegaMenuContent","megaMenuContentCss"],"mappings":";;;;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA;AAUhD,MAAM,eAAA,GAAkB,UAAA;AAAA,EAC7B,SAASA,iBAAgB,EAAE,QAAA,EAAU,WAAW,GAAG,IAAA,IAAQ,GAAA,EAAK;AAC9D,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,wBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,IAAA,EAC5D,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist-es/mega-menu/MegaMenuContext.js

@@ -0,0 +1,16 @@
+import { createContext } from '../utils/createContext.js';
+import 'react';
+import 'clsx';
+import 'react/jsx-runtime';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+
+const MegaMenuContext = createContext(
+  "MegaMenuContext",
+  void 0
+);
+
+export { MegaMenuContext };
+//# sourceMappingURL=MegaMenuContext.js.map

package/dist-es/mega-menu/MegaMenuContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuContext.js","sources":["../src/mega-menu/MegaMenuContext.ts"],"sourcesContent":["import type { FloatingRootContext } from \"@floating-ui/react\";\nimport type {\n  Dispatch,\n  HTMLProps,\n  MutableRefObject,\n  SetStateAction,\n} from \"react\";\nimport { createContext } from \"../utils\";\nimport type { MegaMenuPlacement } from \"./MegaMenu\";\n\nexport interface MegaMenuContextValue {\n  /** Whether the mega menu is currently open. */\n  openState: boolean;\n  /** Toggle or set the open state of the mega menu. */\n  setOpen: (open: boolean) => void;\n  /** The floating-ui root context for coordinating interactions. */\n  floatingRootContext: FloatingRootContext;\n  /** The placement of the mega menu panel relative to the trigger. */\n  placement: MegaMenuPlacement;\n  /** Props getter for the trigger (reference) element. Merges floating-ui interaction props with user props. */\n  getReferenceProps: (\n    userProps?: HTMLProps<Element> | undefined,\n  ) => Record<string, unknown>;\n  /** Props getter for the floating panel element. Merges floating-ui interaction props with user props. */\n  getFloatingProps: (\n    userProps?: HTMLProps<HTMLElement> | undefined,\n  ) => Record<string, unknown>;\n  /** Ref setter for the floating panel element. */\n  setFloating: Dispatch<SetStateAction<HTMLElement | null>>;\n  /** Ref setter for the trigger (reference) element. */\n  setReference: Dispatch<SetStateAction<HTMLElement | null>>;\n  /** Whether the first item should receive focus when the panel opens. */\n  focusFirstItemOnOpenRef: MutableRefObject<boolean>;\n  /** The id of the mega menu panel, used for aria-controls on the trigger. */\n  panelId: string | undefined;\n  /** Registers the panel's id so the trigger's aria-controls stays in sync. */\n  setPanelId: Dispatch<SetStateAction<string | undefined>>;\n}\n\nexport const MegaMenuContext = createContext<MegaMenuContextValue | undefined>(\n  \"MegaMenuContext\",\n  undefined,\n);\n"],"names":[],"mappings":";;;;;;;;;AAuCO,MAAM,eAAA,GAAkB,aAAA;AAAA,EAC7B,iBAAA;AAAA,EACA;AACF;;;;"}

package/dist-es/mega-menu/MegaMenuGroup.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltMegaMenuGroup {\n  display: flex;\n  flex-direction: column;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=MegaMenuGroup.css.js.map

package/dist-es/mega-menu/MegaMenuGroup.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MegaMenuGroup.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}