@salt-ds/lab 1.0.0-alpha.27 → 1.0.0-alpha.29

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

@@ -1,8 +1,9 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { clsx } from 'clsx';
 import { Overlay } from '../overlay/Overlay.js';
-import { useOverlay } from '../overlay/useOverlay.js';
+import { OverlayTrigger } from '../overlay/OverlayTrigger.js';
+import { OverlayPanel } from '../overlay/OverlayPanel.js';
 import { makePrefixer, Button } from '@salt-ds/core';
 import { RefreshIcon } from '@salt-ds/icons';
 import { isTransparent } from './color-utils.js';
@@ -14,6 +15,7 @@ import { createTabsMapping } from './createTabsMapping.js';
 import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import css_248z from './ColorChooser.css.js';
+import { useOverlayContext } from '../overlay/OverlayContext.js';
 
 const withBaseName = makePrefixer("saltColorChooser");
 function getActiveTab(hexValue, tabs, saltColorOverrides) {
@@ -90,72 +92,67 @@ const ColorChooser = ({
   const onTabClick = (index) => {
     setActiveTab(index);
   };
-  const { getTriggerProps, getOverlayProps } = useOverlay({
+  const OverlayContent = () => {
+    const { id } = useOverlayContext();
+    return /* @__PURE__ */ jsxs("div", {
+      id: `${id}-content`,
+      className: clsx(withBaseName("overlayContent")),
+      "data-testid": "overlay-content",
+      children: [
+        /* @__PURE__ */ jsxs(Button, {
+          "data-testid": "default-button",
+          variant: "secondary",
+          className: clsx(withBaseName("defaultButton")),
+          onClick: onDefaultSelected,
+          children: [
+            /* @__PURE__ */ jsx(RefreshIcon, {
+              className: clsx(withBaseName("refreshIcon"))
+            }),
+            "Default"
+          ]
+        }),
+        /* @__PURE__ */ jsx(DictTabs, {
+          tabs: tabsMapping,
+          hexValue: color == null ? void 0 : color.hex,
+          onTabClick,
+          activeTab
+        })
+      ]
+    });
+  };
+  return /* @__PURE__ */ jsxs(Overlay, {
     placement: "bottom",
-    open,
-    onOpenChange: handleOpenChange
-  });
-  return /* @__PURE__ */ jsxs(Fragment, {
+    "data-testid": "color-chooser-overlay",
     children: [
-      /* @__PURE__ */ jsxs(Button, {
-        ...getTriggerProps({
+      /* @__PURE__ */ jsx(OverlayTrigger, {
+        children: /* @__PURE__ */ jsxs(Button, {
           className: clsx(withBaseName("overlayButton"), {
             [withBaseName("overlayButtonHiddenLabel")]: hideLabel
           }),
           "data-testid": "color-chooser-overlay-button",
           disabled: readOnly,
-          ...buttonProps
-        }),
-        children: [
-          color && /* @__PURE__ */ jsx("div", {
-            className: clsx(withBaseName("overlayButtonSwatch"), {
-              [withBaseName("overlayButtonSwatchWithBorder")]: color == null ? void 0 : color.hex.startsWith("#ffffff"),
-              [withBaseName("overlayButtonSwatchTransparent")]: isTransparent(
-                color == null ? void 0 : color.hex
-              )
-            }),
-            style: {
-              backgroundColor: color == null ? void 0 : color.hex
-            }
-          }),
-          !hideLabel && /* @__PURE__ */ jsx("div", {
-            className: withBaseName("overlayButtonText"),
-            children: (_c = displayColorName != null ? displayColorName : placeholder) != null ? _c : "No color selected"
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsx(Overlay, {
-        ...getOverlayProps({
-          adaExceptions: {
-            showClose: false
-          },
-          "data-testid": "color-chooser-overlay",
-          className: clsx(withBaseName("overlayButtonClose"))
-        }),
-        children: /* @__PURE__ */ jsxs("div", {
-          className: clsx(withBaseName("overlayContent")),
-          "data-testid": "overlay-content",
+          ...buttonProps,
           children: [
-            /* @__PURE__ */ jsxs(Button, {
-              "data-testid": "default-button",
-              variant: "secondary",
-              className: clsx(withBaseName("defaultButton")),
-              onClick: onDefaultSelected,
-              children: [
-                /* @__PURE__ */ jsx(RefreshIcon, {
-                  className: clsx(withBaseName("refreshIcon"))
-                }),
-                "Default"
-              ]
+            color && /* @__PURE__ */ jsx("div", {
+              className: clsx(withBaseName("overlayButtonSwatch"), {
+                [withBaseName("overlayButtonSwatchWithBorder")]: color == null ? void 0 : color.hex.startsWith("#ffffff"),
+                [withBaseName("overlayButtonSwatchTransparent")]: isTransparent(
+                  color == null ? void 0 : color.hex
+                )
+              }),
+              style: {
+                backgroundColor: color == null ? void 0 : color.hex
+              }
             }),
-            /* @__PURE__ */ jsx(DictTabs, {
-              tabs: tabsMapping,
-              hexValue: color == null ? void 0 : color.hex,
-              onTabClick,
-              activeTab
+            !hideLabel && /* @__PURE__ */ jsx("div", {
+              className: withBaseName("overlayButtonText"),
+              children: (_c = displayColorName != null ? displayColorName : placeholder) != null ? _c : "No color selected"
             })
           ]
         })
+      }),
+      /* @__PURE__ */ jsx(OverlayPanel, {
+        children: /* @__PURE__ */ jsx(OverlayContent, {})
       })
     ]
   });

package/dist-es/color-chooser/ColorChooser.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorChooser.js","sources":["../src/color-chooser/ColorChooser.tsx"],"sourcesContent":["import { ChangeEvent, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport { Overlay, useOverlay } from \"../overlay\";\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { RefreshIcon } from \"@salt-ds/icons\";\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nimport {\n  convertColorMapValueToHex,\n  getColorNameByHexValue,\n  getHexValue,\n  hexValueWithoutAlpha,\n} from \"./ColorHelpers\";\nimport { saltColorMap } from \"./colorMap\";\nimport { ColorChooserTabs, DictTabs } from \"./DictTabs\";\nimport { getColorPalettes } from \"./GetColorPalettes\";\nimport { createTabsMapping } from \"./createTabsMapping\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport colorChooserCss from \"./ColorChooser.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\nfunction getActiveTab(\n  hexValue: string | undefined,\n  tabs: ColorChooserTabs,\n  saltColorOverrides: Record<string, string> | undefined\n): number {\n  if (tabs.Swatches && tabs[\"Color Picker\"]) {\n    const hexNoAlpha: string | undefined = hexValueWithoutAlpha(hexValue);\n    const colors = saltColorOverrides ?? saltColorMap;\n    // if hexNoAlpha is a Salt color or null/undefined then set the active tab as Swatches\n    if (\n      hexNoAlpha &&\n      !Object.keys(colors).find(\n        (key: string) =>\n          convertColorMapValueToHex(colors[key])?.toLowerCase() ===\n          hexNoAlpha?.toLowerCase()\n      )\n    ) {\n      return 1;\n    }\n  }\n  return 0;\n}\n\nexport interface ColorChooserProps {\n  color: Color | undefined;\n  defaultAlpha?: number;\n  disableAlphaChooser?: boolean;\n  displayHexOnly?: boolean;\n  hideLabel?: boolean;\n  onClear: () => void; // called when user clicks \"default\" button\n  onSelect: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    event?: ChangeEvent\n  ) => void;\n  placeholder?: string;\n  buttonProps?: Partial<ButtonProps>;\n  saltColorOverrides?: Record<string, string>;\n  showSwatches?: boolean;\n  showColorPicker?: boolean;\n  readOnly?: boolean;\n}\n\nexport const ColorChooser = ({\n  onClear,\n  onSelect,\n  color,\n  showSwatches = true,\n  showColorPicker = true,\n  defaultAlpha = 1,\n  disableAlphaChooser = false,\n  hideLabel = false,\n  placeholder,\n  buttonProps,\n  saltColorOverrides,\n  readOnly = false,\n  displayHexOnly = false,\n}: ColorChooserProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-color-chooser\",\n    css: colorChooserCss,\n    window: targetWindow,\n  });\n\n  const [open, setOpen] = useState(false);\n\n  const allColors: string[][] = saltColorOverrides\n    ? getColorPalettes(saltColorOverrides)\n    : getColorPalettes();\n  const displayColorName = displayHexOnly\n    ? getHexValue(color?.hex, disableAlphaChooser)\n    : getColorNameByHexValue(\n        color?.hex,\n        disableAlphaChooser,\n        saltColorOverrides\n      );\n\n  const handleOpenChange = (open: boolean) => setOpen(open);\n\n  const alphaForTabs = isTransparent(color?.hex)\n    ? defaultAlpha\n    : color?.rgba?.a ?? defaultAlpha;\n\n  const tabsMapping = createTabsMapping({\n    swatches: showSwatches,\n    colorPicker: showColorPicker,\n    disableAlphaChooser,\n    allColors,\n    color,\n    alpha: alphaForTabs,\n    handleColorChange: onSelect,\n    displayColorName,\n    placeholder,\n    onDialogClosed: () => {\n      setOpen(false);\n    },\n  });\n\n  const [activeTab, setActiveTab] = useState<number>(\n    getActiveTab(color?.hex, tabsMapping, saltColorOverrides)\n  );\n  const onDefaultSelected = (): void => {\n    if (activeTab === 0 && showSwatches) {\n      onClear();\n      handleOpenChange(false);\n    } else {\n      onClear();\n    }\n  };\n  const onTabClick = (index: number): void => {\n    setActiveTab(index);\n  };\n\n  const { getTriggerProps, getOverlayProps } = useOverlay({\n    placement: \"bottom\",\n    open,\n    onOpenChange: handleOpenChange,\n  });\n\n  return (\n    <>\n      <Button\n        {...getTriggerProps<typeof Button>({\n          className: clsx(withBaseName(\"overlayButton\"), {\n            [withBaseName(\"overlayButtonHiddenLabel\")]: hideLabel,\n          }),\n          // @ts-ignore\n          \"data-testid\": \"color-chooser-overlay-button\",\n          disabled: readOnly,\n          ...buttonProps,\n        })}\n      >\n        {color && (\n          <div\n            className={clsx(withBaseName(\"overlayButtonSwatch\"), {\n              [withBaseName(\"overlayButtonSwatchWithBorder\")]:\n                color?.hex.startsWith(\"#ffffff\"),\n              [withBaseName(\"overlayButtonSwatchTransparent\")]: isTransparent(\n                color?.hex\n              ),\n            })}\n            style={{\n              backgroundColor: color?.hex,\n            }}\n          />\n        )}\n        {!hideLabel && (\n          <div className={withBaseName(\"overlayButtonText\")}>\n            {displayColorName ?? placeholder ?? \"No color selected\"}\n          </div>\n        )}\n      </Button>\n      <Overlay\n        {...getOverlayProps({\n          adaExceptions: {\n            showClose: false,\n          },\n          // @ts-ignore\n          \"data-testid\": \"color-chooser-overlay\",\n          className: clsx(withBaseName(\"overlayButtonClose\")),\n        })}\n      >\n        <div\n          className={clsx(withBaseName(\"overlayContent\"))}\n          data-testid=\"overlay-content\"\n        >\n          <Button\n            data-testid=\"default-button\"\n            variant=\"secondary\"\n            className={clsx(withBaseName(\"defaultButton\"))}\n            onClick={onDefaultSelected}\n          >\n            <RefreshIcon className={clsx(withBaseName(\"refreshIcon\"))} />\n            Default\n          </Button>\n          <DictTabs\n            tabs={tabsMapping}\n            hexValue={color?.hex}\n            onTabClick={onTabClick}\n            activeTab={activeTab}\n          />\n        </div>\n      </Overlay>\n    </>\n  );\n};\n"],"names":["colorChooserCss","open"],"mappings":"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"}
+{"version":3,"file":"ColorChooser.js","sources":["../src/color-chooser/ColorChooser.tsx"],"sourcesContent":["import { ChangeEvent, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport { Overlay, OverlayPanel, OverlayTrigger } from \"../overlay\";\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { RefreshIcon } from \"@salt-ds/icons\";\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nimport {\n  convertColorMapValueToHex,\n  getColorNameByHexValue,\n  getHexValue,\n  hexValueWithoutAlpha,\n} from \"./ColorHelpers\";\nimport { saltColorMap } from \"./colorMap\";\nimport { ColorChooserTabs, DictTabs } from \"./DictTabs\";\nimport { getColorPalettes } from \"./GetColorPalettes\";\nimport { createTabsMapping } from \"./createTabsMapping\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport colorChooserCss from \"./ColorChooser.css\";\nimport { useOverlayContext } from \"../overlay/OverlayContext\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\nfunction getActiveTab(\n  hexValue: string | undefined,\n  tabs: ColorChooserTabs,\n  saltColorOverrides: Record<string, string> | undefined\n): number {\n  if (tabs.Swatches && tabs[\"Color Picker\"]) {\n    const hexNoAlpha: string | undefined = hexValueWithoutAlpha(hexValue);\n    const colors = saltColorOverrides ?? saltColorMap;\n    // if hexNoAlpha is a Salt color or null/undefined then set the active tab as Swatches\n    if (\n      hexNoAlpha &&\n      !Object.keys(colors).find(\n        (key: string) =>\n          convertColorMapValueToHex(colors[key])?.toLowerCase() ===\n          hexNoAlpha?.toLowerCase()\n      )\n    ) {\n      return 1;\n    }\n  }\n  return 0;\n}\n\nexport interface ColorChooserProps {\n  color: Color | undefined;\n  defaultAlpha?: number;\n  disableAlphaChooser?: boolean;\n  displayHexOnly?: boolean;\n  hideLabel?: boolean;\n  onClear: () => void; // called when user clicks \"default\" button\n  onSelect: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    event?: ChangeEvent\n  ) => void;\n  placeholder?: string;\n  buttonProps?: Partial<ButtonProps>;\n  saltColorOverrides?: Record<string, string>;\n  showSwatches?: boolean;\n  showColorPicker?: boolean;\n  readOnly?: boolean;\n}\n\nexport const ColorChooser = ({\n  onClear,\n  onSelect,\n  color,\n  showSwatches = true,\n  showColorPicker = true,\n  defaultAlpha = 1,\n  disableAlphaChooser = false,\n  hideLabel = false,\n  placeholder,\n  buttonProps,\n  saltColorOverrides,\n  readOnly = false,\n  displayHexOnly = false,\n}: ColorChooserProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-color-chooser\",\n    css: colorChooserCss,\n    window: targetWindow,\n  });\n\n  const [open, setOpen] = useState(false);\n\n  const allColors: string[][] = saltColorOverrides\n    ? getColorPalettes(saltColorOverrides)\n    : getColorPalettes();\n  const displayColorName = displayHexOnly\n    ? getHexValue(color?.hex, disableAlphaChooser)\n    : getColorNameByHexValue(\n        color?.hex,\n        disableAlphaChooser,\n        saltColorOverrides\n      );\n\n  const handleOpenChange = (open: boolean) => setOpen(open);\n\n  const alphaForTabs = isTransparent(color?.hex)\n    ? defaultAlpha\n    : color?.rgba?.a ?? defaultAlpha;\n\n  const tabsMapping = createTabsMapping({\n    swatches: showSwatches,\n    colorPicker: showColorPicker,\n    disableAlphaChooser,\n    allColors,\n    color,\n    alpha: alphaForTabs,\n    handleColorChange: onSelect,\n    displayColorName,\n    placeholder,\n    onDialogClosed: () => {\n      setOpen(false);\n    },\n  });\n\n  const [activeTab, setActiveTab] = useState<number>(\n    getActiveTab(color?.hex, tabsMapping, saltColorOverrides)\n  );\n  const onDefaultSelected = (): void => {\n    if (activeTab === 0 && showSwatches) {\n      onClear();\n      handleOpenChange(false);\n    } else {\n      onClear();\n    }\n  };\n\n  const onTabClick = (index: number): void => {\n    setActiveTab(index);\n  };\n\n  const OverlayContent = () => {\n    const { id } = useOverlayContext();\n\n    return (\n      <div\n        id={`${id}-content`}\n        className={clsx(withBaseName(\"overlayContent\"))}\n        data-testid=\"overlay-content\"\n      >\n        <Button\n          data-testid=\"default-button\"\n          variant=\"secondary\"\n          className={clsx(withBaseName(\"defaultButton\"))}\n          onClick={onDefaultSelected}\n        >\n          <RefreshIcon className={clsx(withBaseName(\"refreshIcon\"))} />\n          Default\n        </Button>\n        <DictTabs\n          tabs={tabsMapping}\n          hexValue={color?.hex}\n          onTabClick={onTabClick}\n          activeTab={activeTab}\n        />\n      </div>\n    );\n  };\n\n  return (\n    <Overlay placement=\"bottom\" data-testid=\"color-chooser-overlay\">\n      <OverlayTrigger>\n        <Button\n          className={clsx(withBaseName(\"overlayButton\"), {\n            [withBaseName(\"overlayButtonHiddenLabel\")]: hideLabel,\n          })}\n          // @ts-ignore\n          data-testid=\"color-chooser-overlay-button\"\n          disabled={readOnly}\n          {...buttonProps}\n        >\n          {color && (\n            <div\n              className={clsx(withBaseName(\"overlayButtonSwatch\"), {\n                [withBaseName(\"overlayButtonSwatchWithBorder\")]:\n                  color?.hex.startsWith(\"#ffffff\"),\n                [withBaseName(\"overlayButtonSwatchTransparent\")]: isTransparent(\n                  color?.hex\n                ),\n              })}\n              style={{\n                backgroundColor: color?.hex,\n              }}\n            />\n          )}\n          {!hideLabel && (\n            <div className={withBaseName(\"overlayButtonText\")}>\n              {displayColorName ?? placeholder ?? \"No color selected\"}\n            </div>\n          )}\n        </Button>\n      </OverlayTrigger>\n      <OverlayPanel>\n        <OverlayContent />\n      </OverlayPanel>\n    </Overlay>\n  );\n};\n"],"names":["colorChooserCss","open"],"mappings":"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"}

package/dist-es/index.js

@@ -71,9 +71,6 @@ export { Dropdown } from './dropdown/Dropdown.js';
 export { useDropdownBase } from './dropdown/useDropdownBase.js';
 export { DropdownNext } from './dropdown-next/DropdownNext.js';
 export { EditableLabel } from './editable-label/EditableLabel.js';
-export { FileDropZone } from './file-drop-zone/FileDropZone.js';
-export { FileDropZoneIcon } from './file-drop-zone/FileDropZoneIcon.js';
-export { FileDropZoneTrigger } from './file-drop-zone/FileDropZoneTrigger.js';
 export { FormFieldLegacy as FormField } from './form-field-legacy/FormFieldLegacy.js';
 export { FormLabel } from './form-field-legacy/FormLabel.js';
 export { FormFieldLegacyContext } from './form-field-context-legacy/FormFieldLegacyContext.js';
@@ -99,16 +96,11 @@ export { MenuButton } from './menu-button/MenuButton.js';
 export { Metric } from './metric/Metric.js';
 export { MetricHeader } from './metric/MetricHeader.js';
 export { MetricContent } from './metric/MetricContent.js';
-export { NavigationItem } from './navigation-item/NavigationItem.js';
 export { Option } from './option/Option.js';
 export { OptionGroup } from './option/OptionGroup.js';
 export { Overlay } from './overlay/Overlay.js';
-export { useOverlay } from './overlay/useOverlay.js';
-export { Pagination } from './pagination/Pagination.js';
-export { Paginator } from './pagination/Paginator.js';
-export { CompactInput } from './pagination/CompactInput.js';
-export { CompactPaginator } from './pagination/CompactPaginator.js';
-export { GoToInput } from './pagination/GoToInput.js';
+export { OverlayTrigger } from './overlay/OverlayTrigger.js';
+export { OverlayPanel } from './overlay/OverlayPanel.js';
 export { ParentChildItem } from './parent-child-item/ParentChildItem.js';
 export { ParentChildLayout } from './parent-child-layout/ParentChildLayout.js';
 export { Portal } from './portal/Portal.js';
@@ -126,7 +118,6 @@ export { useOverflowLayout } from './responsive/useOverflowLayout.js';
 export { useWidth } from './responsive/useWidth.js';
 export { DropdownPlaceholder, NO_DATA, addAll, allExceptOverflowIndicator, byDescendingPriority, getDropdownPlaceholder, getElementForItem, getIsOverflowed, getOverflowIndicator, getRuntimePadding, isCollapsed, isCollapsedOrCollapsing, isCollapsible, isCollapsing, isOverflowed, measureContainer, measureContainerOverflow, measureElementSize, measureOverflowItems, notOverflowed, popNextItemByPriority } from './responsive/overflowUtils.js';
 export { isResponsiveAttribute, liftResponsivePropsToFormField } from './responsive/utils.js';
-export { Scrim } from './scrim/Scrim.js';
 export { SearchInput } from './search-input/SearchInput.js';
 export { SkipLink } from './skip-link/SkipLink.js';
 export { SkipLinks } from './skip-link/SkipLinks.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/layer-layout/LayerLayout.js

@@ -1,8 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useEffect } from 'react';
 import { clsx } from 'clsx';
-import { Scrim } from '../scrim/Scrim.js';
-import { makePrefixer, usePrevious } from '@salt-ds/core';
+import { makePrefixer, usePrevious, Scrim } from '@salt-ds/core';
 import { useIsViewportLargerThanBreakpoint } from '../utils/useIsViewportLargerThanBreakpoint.js';
 import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';

package/dist-es/layer-layout/LayerLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayerLayout.js","sources":["../src/layer-layout/LayerLayout.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { Scrim, ScrimProps } from \"../scrim\";\n\nimport { Breakpoints, makePrefixer, usePrevious } from \"@salt-ds/core\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport layerLayoutCss from \"./LayerLayout.css\";\n\nexport const LAYER_POSITIONS = [\n  \"center\",\n  \"left\",\n  \"top\",\n  \"right\",\n  \"bottom\",\n] as const;\n\nexport type LayerPositions = (typeof LAYER_POSITIONS)[number];\n\nexport interface LayerLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Disable the scrim.\n   */\n  disableScrim?: boolean;\n  /**\n   * Defines the layer position within the screen.\n   */\n  position?: LayerPositions;\n  /**\n   * Breakpoint at which the layer will become fullscreen.\n   */\n  fullScreenAtBreakpoint?: keyof Breakpoints;\n  /**\n   * Disable all animations.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Display or hide the component.\n   */\n  isOpen?: boolean;\n  /**\n   * Props to be passed to the Scrim component.\n   */\n  scrimProps?: Partial<ScrimProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltLayerLayout\");\n\nconst ariaAttributes = { role: \"dialog\", \"aria-modal\": true };\n\nexport const LayerLayout = forwardRef<HTMLDivElement, LayerLayoutProps>(\n  function LayerLayout(props, ref) {\n    const {\n      children,\n      className,\n      disableScrim = false,\n      position = \"center\",\n      fullScreenAtBreakpoint = \"sm\",\n      disableAnimations = false,\n      scrimProps,\n      isOpen = true,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-layer-layout\",\n      css: layerLayoutCss,\n      window: targetWindow,\n    });\n\n    const previousDisableAnimationsProp = usePrevious(\n      disableAnimations,\n      [disableAnimations],\n      false\n    ); // we check the previous value for this prop to prevent the animations from triggering again when it changes\n\n    const [showComponent, setShowComponent] = useState(false);\n\n    const [isAnimating, setIsAnimating] = useState(false);\n\n    useEffect(() => {\n      if ((!isOpen && disableAnimations) || (!isOpen && !isAnimating)) {\n        setShowComponent(false);\n      }\n\n      if (isOpen && !showComponent) {\n        setShowComponent(true);\n      }\n    }, [isOpen, showComponent, disableAnimations, isAnimating]);\n\n    const fullScreen = useIsViewportLargerThanBreakpoint(\n      fullScreenAtBreakpoint\n    );\n\n    const anchored = position !== \"center\" && !fullScreen;\n\n    const enterAnimation =\n      !disableAnimations && isOpen && !previousDisableAnimationsProp;\n\n    const exitAnimation = !disableAnimations && !isOpen;\n\n    const layerLayout = showComponent ? (\n      <div\n        ref={ref}\n        className={clsx(withBaseName(), className, {\n          [withBaseName(\"anchor\")]: anchored,\n          [withBaseName(\"fullScreen\")]: fullScreen,\n          [withBaseName(position)]: !fullScreen,\n          [withBaseName(\"enter-animation\")]: enterAnimation,\n          [withBaseName(\"exit-animation\")]: exitAnimation,\n        })}\n        onAnimationStart={() => setIsAnimating(true)}\n        onAnimationEnd={() => {\n          if (!isOpen && showComponent) {\n            setShowComponent(false);\n          }\n        }}\n        {...(disableScrim && ariaAttributes)}\n        {...rest}\n      >\n        {children}\n      </div>\n    ) : null;\n\n    return disableScrim ? (\n      layerLayout\n    ) : (\n      <Scrim\n        open={showComponent}\n        className={clsx({\n          [withBaseName(\"enter-animation\")]: enterAnimation,\n          [withBaseName(\"exit-animation\")]: exitAnimation,\n        })}\n        {...scrimProps}\n      >\n        {layerLayout}\n      </Scrim>\n    );\n  }\n);\n"],"names":["LayerLayout","layerLayoutCss"],"mappings":"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"}
+{"version":3,"file":"LayerLayout.js","sources":["../src/layer-layout/LayerLayout.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { Scrim, ScrimProps } from \"@salt-ds/core\";\n\nimport { Breakpoints, makePrefixer, usePrevious } from \"@salt-ds/core\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport layerLayoutCss from \"./LayerLayout.css\";\n\nexport const LAYER_POSITIONS = [\n  \"center\",\n  \"left\",\n  \"top\",\n  \"right\",\n  \"bottom\",\n] as const;\n\nexport type LayerPositions = (typeof LAYER_POSITIONS)[number];\n\nexport interface LayerLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Disable the scrim.\n   */\n  disableScrim?: boolean;\n  /**\n   * Defines the layer position within the screen.\n   */\n  position?: LayerPositions;\n  /**\n   * Breakpoint at which the layer will become fullscreen.\n   */\n  fullScreenAtBreakpoint?: keyof Breakpoints;\n  /**\n   * Disable all animations.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Display or hide the component.\n   */\n  isOpen?: boolean;\n  /**\n   * Props to be passed to the Scrim component.\n   */\n  scrimProps?: Partial<ScrimProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltLayerLayout\");\n\nconst ariaAttributes = { role: \"dialog\", \"aria-modal\": true };\n\nexport const LayerLayout = forwardRef<HTMLDivElement, LayerLayoutProps>(\n  function LayerLayout(props, ref) {\n    const {\n      children,\n      className,\n      disableScrim = false,\n      position = \"center\",\n      fullScreenAtBreakpoint = \"sm\",\n      disableAnimations = false,\n      scrimProps,\n      isOpen = true,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-layer-layout\",\n      css: layerLayoutCss,\n      window: targetWindow,\n    });\n\n    const previousDisableAnimationsProp = usePrevious(\n      disableAnimations,\n      [disableAnimations],\n      false\n    ); // we check the previous value for this prop to prevent the animations from triggering again when it changes\n\n    const [showComponent, setShowComponent] = useState(false);\n\n    const [isAnimating, setIsAnimating] = useState(false);\n\n    useEffect(() => {\n      if ((!isOpen && disableAnimations) || (!isOpen && !isAnimating)) {\n        setShowComponent(false);\n      }\n\n      if (isOpen && !showComponent) {\n        setShowComponent(true);\n      }\n    }, [isOpen, showComponent, disableAnimations, isAnimating]);\n\n    const fullScreen = useIsViewportLargerThanBreakpoint(\n      fullScreenAtBreakpoint\n    );\n\n    const anchored = position !== \"center\" && !fullScreen;\n\n    const enterAnimation =\n      !disableAnimations && isOpen && !previousDisableAnimationsProp;\n\n    const exitAnimation = !disableAnimations && !isOpen;\n\n    const layerLayout = showComponent ? (\n      <div\n        ref={ref}\n        className={clsx(withBaseName(), className, {\n          [withBaseName(\"anchor\")]: anchored,\n          [withBaseName(\"fullScreen\")]: fullScreen,\n          [withBaseName(position)]: !fullScreen,\n          [withBaseName(\"enter-animation\")]: enterAnimation,\n          [withBaseName(\"exit-animation\")]: exitAnimation,\n        })}\n        onAnimationStart={() => setIsAnimating(true)}\n        onAnimationEnd={() => {\n          if (!isOpen && showComponent) {\n            setShowComponent(false);\n          }\n        }}\n        {...(disableScrim && ariaAttributes)}\n        {...rest}\n      >\n        {children}\n      </div>\n    ) : null;\n\n    return disableScrim ? (\n      layerLayout\n    ) : (\n      <Scrim\n        open={showComponent}\n        className={clsx({\n          [withBaseName(\"enter-animation\")]: enterAnimation,\n          [withBaseName(\"exit-animation\")]: exitAnimation,\n        })}\n        {...scrimProps}\n      >\n        {layerLayout}\n      </Scrim>\n    );\n  }\n);\n"],"names":["LayerLayout","layerLayoutCss"],"mappings":"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"}

package/dist-es/overlay/Overlay.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Experimental - Overlay css variable API */\n.saltOverlay {\n  --overlay-text-color: var(--salt-content-primary-foreground);\n  --overlay-spacing: var(--salt-size-unit);\n  --overlay-fontSize: var(--salt-text-fontSize);\n  --overlay-background: var(--salt-container-primary-background);\n  --overlay-borderColor: var(--salt-container-primary-borderColor);\n  /* TODO: z-index audit, provide z index here or rely on popper */\n  --overlay-zindex: var(--salt-zIndex-flyover);\n}\n\n.saltOverlay-secondary.saltOverlay {\n  --overlay-background: var(--salt-container-secondary-background);\n  --overlay-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n.saltOverlay-content {\n  display: flex;\n  padding: calc(var(--overlay-spacing) * 2);\n  font-size: var(--overlay-fontSize);\n\n  border: 1px solid var(--overlay-borderColor);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  line-height: var(--salt-text-lineHeight);\n  background: var(--overlay-background);\n  color: var(--overlay-text-color);\n  position: relative;\n  opacity: 1;\n  overflow: visible;\n  z-index: var(--overlay-zindex);\n}\n\n.saltOverlay-arrow,\n.saltOverlay-arrow::after {\n  border: 8px solid transparent;\n  position: absolute;\n}\n\n.saltOverlay-arrow::after {\n  content: \"\";\n}\n\n.saltOverlay[data-placement^=\"top\"] .saltOverlay-arrow {\n  border-top-color: var(--overlay-borderColor);\n  bottom: -17px;\n}\n\n.saltOverlay[data-placement^=\"bottom\"] .saltOverlay-arrow {\n  border-bottom-color: var(--overlay-borderColor);\n  top: -17px;\n}\n\n.saltOverlay[data-placement^=\"left\"] .saltOverlay-arrow {\n  border-left-color: var(--overlay-borderColor);\n  right: -17px;\n}\n\n.saltOverlay[data-placement^=\"right\"] .saltOverlay-arrow {\n  border-right-color: var(--overlay-borderColor);\n  left: -17px;\n}\n\n.saltOverlay[data-placement^=\"top\"] .saltOverlay-arrow::after {\n  border-top-color: var(--overlay-background);\n  bottom: -7px;\n  left: calc(100% - 8px);\n}\n\n.saltOverlay[data-placement^=\"bottom\"] .saltOverlay-arrow::after {\n  border-bottom-color: var(--overlay-background);\n  top: -7px;\n  left: calc(100% - 8px);\n}\n\n.saltOverlay[data-placement^=\"left\"] .saltOverlay-arrow::after {\n  border-left-color: var(--overlay-background);\n  right: -7px;\n  top: calc(100% - 8px);\n}\n\n.saltOverlay[data-placement^=\"right\"] .saltOverlay-arrow::after {\n  border-right-color: var(--overlay-background);\n  left: -7px;\n  top: calc(100% - 8px);\n}\n\n/* Close Button */\n.saltOverlay-close {\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n}\n";
+var css_248z = ".saltOverlayPanel {\n  --overlay-borderColor: var(--saltOverlay-borderColor, var(--salt-container-primary-borderColor));\n  --overlay-background: var(--saltOverlay-background, var(--salt-container-primary-background));\n}\n\n.saltOverlayPanel {\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltOverlay-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--saltOverlay-fontWeight, var(--salt-text-fontWeight));\n  line-height: var(--saltOverlay-lineHeight, var(--salt-text-lineHeight));\n\n  border-color: var(--overlay-borderColor);\n  border-style: var(--saltOverlay-borderStyle, var(--salt-container-borderStyle));\n  border-width: var(--saltOverlay-borderWidth, var(--salt-size-border));\n\n  background: var(--overlay-background);\n  box-shadow: var(--saltOverlay-boxShadow, var(--salt-overlayable-shadow-popout));\n\n  color: var(--saltOverlay-text-color, var(--salt-text-primary-foreground));\n  z-index: var(--saltOverlay-zIndex, var(--salt-zIndex-flyover));\n  width: max-content;\n}\n\n.saltOverlayPanelBase-container {\n  animation: fade-in var(--salt-duration-perceptible) ease-in-out;\n  position: relative;\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.saltOverlayPanelBase-content {\n  overflow: auto;\n  padding: var(--saltOverlay-content-padding, var(--salt-spacing-100) 0 var(--salt-spacing-100) var(--salt-spacing-100));\n}\n\n.saltButton-secondary.saltOverlayPanelBase-closeButton {\n  position: sticky;\n  top: 0;\n  float: right;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Overlay.css.js.map

package/dist-es/overlay/Overlay.js

@@ -1,71 +1,100 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { makePrefixer, useId, Button } from '@salt-ds/core';
-import { CloseIcon } from '@salt-ds/icons';
-import { clsx } from 'clsx';
-import { forwardRef } from 'react';
-import { Portal } from '../portal/Portal.js';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
-import { useWindow as useWindow$1 } from '../window/WindowContext.js';
-import '../window/ElectronWindow.js';
-import css_248z from './Overlay.css.js';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useMemo } from 'react';
+import { OverlayContext } from './OverlayContext.js';
+import { useId, useControlled, useFloatingUI } from '@salt-ds/core';
+import { offset, flip, shift, limitShift, arrow, useInteractions, useRole, useClick, useDismiss } from '@floating-ui/react';
 
-const withBaseName = makePrefixer("saltOverlay");
 const Overlay = forwardRef(
-  ({
-    adaExceptions: { showClose } = {
-      showClose: true
-    },
-    arrowProps,
-    children,
-    className,
-    open,
-    onOpenChange,
-    variant = "primary",
-    ...rest
-  }, ref) => {
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-      testId: "salt-overlay",
-      css: css_248z,
-      window: targetWindow
+  function Overlay2(props, ref) {
+    const {
+      children,
+      open,
+      onOpenChange,
+      placement: placementProp = "top",
+      id: idProp,
+      onClose,
+      ...rest
+    } = props;
+    const id = useId(idProp);
+    const arrowRef = useRef(null);
+    const [openState, setOpenState] = useControlled({
+      controlled: open,
+      default: false,
+      name: "Overlay",
+      state: "open"
     });
-    const id = useId();
-    const Window = useWindow$1();
-    const handleCloseButton = () => {
-      onOpenChange == null ? void 0 : onOpenChange(false);
+    const {
+      x,
+      y,
+      strategy,
+      context,
+      elements,
+      floating,
+      reference,
+      middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
+      placement
+    } = useFloatingUI({
+      open: openState,
+      onOpenChange: setOpenState,
+      placement: placementProp,
+      middleware: [
+        offset(11),
+        flip(),
+        shift({ limiter: limitShift() }),
+        arrow({ element: arrowRef })
+      ]
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+      useRole(context, { role: "dialog" }),
+      useClick(context),
+      useDismiss(context)
+    ]);
+    const floatingStyles = useMemo(() => {
+      var _a, _b;
+      return {
+        top: y != null ? y : 0,
+        left: x != null ? x : 0,
+        position: strategy,
+        width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
+        height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight
+      };
+    }, [elements.floating, strategy, x, y]);
+    const setOpen = (event, newOpen) => {
+      setOpenState(newOpen);
+      onOpenChange == null ? void 0 : onOpenChange(event, newOpen);
+    };
+    const arrowProps = {
+      ref: arrowRef,
+      context,
+      style: {
+        position: strategy,
+        left: arrowX != null ? arrowX : 0,
+        top: arrowY != null ? arrowY : 0
+      }
+    };
+    const handleCloseButton = (event) => {
+      setOpen(event, false);
+      onClose == null ? void 0 : onClose(event);
     };
-    if (!open) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(Portal, {
-      children: /* @__PURE__ */ jsx(Window, {
-        className: clsx(withBaseName(), className, {
-          [withBaseName(variant)]: variant === "secondary"
-        }),
-        id,
+    return /* @__PURE__ */ jsx(OverlayContext.Provider, {
+      value: {
+        id: id != null ? id : "",
+        openState,
+        setOpen,
+        floatingStyles,
+        placement,
+        context,
+        arrowProps,
+        floating,
+        reference,
+        handleCloseButton,
+        getFloatingProps,
+        getReferenceProps
+      },
+      children: /* @__PURE__ */ jsx("div", {
         ref,
         ...rest,
-        children: /* @__PURE__ */ jsxs("div", {
-          className: clsx(withBaseName("content")),
-          "data-testid": "overlay-content",
-          children: [
-            showClose && /* @__PURE__ */ jsx(Button, {
-              onClick: handleCloseButton,
-              className: withBaseName("close"),
-              variant: "secondary",
-              children: /* @__PURE__ */ jsx(CloseIcon, {
-                "accessible-text": "close overlay",
-                className: withBaseName("closeIcon")
-              })
-            }),
-            children,
-            /* @__PURE__ */ jsx("div", {
-              className: withBaseName("arrow"),
-              ...arrowProps
-            })
-          ]
-        })
+        children
       })
     });
   }

package/dist-es/overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sources":["../src/overlay/Overlay.tsx"],"sourcesContent":["import { Button, makePrefixer, UseFloatingUIProps, useId } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ComponentProps, ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { Portal } from \"../portal\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport { useWindow as usePortalWindow } from \"../window\";\n\nimport overlayCSS from \"./Overlay.css\";\n\ninterface ADAExceptions {\n  showClose?: boolean;\n}\n\nexport interface OverlayProps\n  extends ComponentPropsWithoutRef<\"div\">,\n    Partial<Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\">> {\n  /**\n   * object that houses ada related props.\n   * adaExceptions.showClose defaults to true. It can be removed at the risk of ADA compliance\n   */\n  adaExceptions?: ADAExceptions;\n  arrowProps?: ComponentProps<\"div\">;\n  variant?: \"primary\" | \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltOverlay\");\n\nexport const Overlay = forwardRef<HTMLDivElement, OverlayProps>(\n  (\n    {\n      adaExceptions: { showClose } = {\n        showClose: true,\n      },\n      arrowProps,\n      children,\n      className,\n      open,\n      onOpenChange,\n      variant = \"primary\",\n      ...rest\n    },\n    ref\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-overlay\",\n      css: overlayCSS,\n      window: targetWindow,\n    });\n\n    // Will need to figure out a better way to assign popper id's for the electron windows\n    const id = useId();\n    const Window = usePortalWindow();\n\n    const handleCloseButton = () => {\n      onOpenChange?.(false);\n    };\n\n    if (!open) {\n      return null;\n    }\n\n    return (\n      <Portal>\n        <Window\n          className={clsx(withBaseName(), className, {\n            [withBaseName(variant)]: variant === \"secondary\",\n          })}\n          id={id}\n          ref={ref}\n          {...rest}\n        >\n          <div\n            className={clsx(withBaseName(\"content\"))}\n            data-testid=\"overlay-content\"\n          >\n            {showClose && (\n              <Button\n                onClick={handleCloseButton}\n                className={withBaseName(\"close\")}\n                variant=\"secondary\"\n              >\n                <CloseIcon\n                  accessible-text=\"close overlay\"\n                  className={withBaseName(\"closeIcon\")}\n                />\n              </Button>\n            )}\n            {children}\n            <div className={withBaseName(\"arrow\")} {...arrowProps} />\n          </div>\n        </Window>\n      </Portal>\n    );\n  }\n);\n"],"names":["overlayCSS","usePortalWindow"],"mappings":";;;;;;;;;;;;AA6BA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAExC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,CACE;AAAA,IACE,aAAA,EAAe,EAAE,SAAA,EAAc,GAAA;AAAA,MAC7B,SAAW,EAAA,IAAA;AAAA,KACb;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAGD,IAAA,MAAM,KAAK,KAAM,EAAA,CAAA;AACjB,IAAA,MAAM,SAASC,WAAgB,EAAA,CAAA;AAE/B,IAAA,MAAM,oBAAoB,MAAM;AAC9B,MAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACjB,CAAA;AAEA,IAAA,IAAI,CAAC,IAAM,EAAA;AACT,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,UACzC,CAAC,YAAA,CAAa,OAAO,CAAA,GAAI,OAAY,KAAA,WAAA;AAAA,SACtC,CAAA;AAAA,QACD,EAAA;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,UACvC,aAAY,EAAA,iBAAA;AAAA,UAEX,QAAA,EAAA;AAAA,YAAA,SAAA,oBACE,GAAA,CAAA,MAAA,EAAA;AAAA,cACC,OAAS,EAAA,iBAAA;AAAA,cACT,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,OAAQ,EAAA,WAAA;AAAA,cAER,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,gBACC,iBAAgB,EAAA,eAAA;AAAA,gBAChB,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,eACrC,CAAA;AAAA,aACF,CAAA;AAAA,YAED,QAAA;AAAA,4BACA,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAAI,GAAG,UAAA;AAAA,aAAY,CAAA;AAAA,WAAA;AAAA,SACzD,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"Overlay.js","sources":["../src/overlay/Overlay.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  SyntheticEvent,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { OverlayContext } from \"./OverlayContext\";\nimport { useControlled, useFloatingUI, useId } from \"@salt-ds/core\";\nimport {\n  flip,\n  offset,\n  shift,\n  limitShift,\n  arrow,\n  useClick,\n  useDismiss,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\n\nexport interface OverlayProps extends ComponentPropsWithoutRef<\"div\"> {\n  open?: boolean;\n  onOpenChange?: (event: SyntheticEvent, newOpen: boolean) => void;\n  /*\n   * Set the placement of the Overlay component relative to the trigger element. Defaults to `top`.\n   */\n  placement?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  /*\n   * Use in controlled version to close Overlay.\n   */\n  onClose?: (event: SyntheticEvent) => void;\n}\n\nexport const Overlay = forwardRef<HTMLDivElement, OverlayProps>(\n  function Overlay(props, ref) {\n    const {\n      children,\n      open,\n      onOpenChange,\n      placement: placementProp = \"top\",\n      id: idProp,\n      onClose,\n      ...rest\n    } = props;\n\n    const id = useId(idProp);\n    const arrowRef = useRef<SVGSVGElement | null>(null);\n\n    const [openState, setOpenState] = useControlled({\n      controlled: open,\n      default: false,\n      name: \"Overlay\",\n      state: \"open\",\n    });\n\n    const {\n      x,\n      y,\n      strategy,\n      context,\n      elements,\n      floating,\n      reference,\n      middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n      placement,\n    } = useFloatingUI({\n      open: openState,\n      onOpenChange: setOpenState,\n      placement: placementProp,\n      middleware: [\n        offset(11),\n        flip(),\n        shift({ limiter: limitShift() }),\n        arrow({ element: arrowRef }),\n      ],\n    });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n      useRole(context, { role: \"dialog\" }),\n      useClick(context),\n      useDismiss(context),\n    ]);\n\n    const floatingStyles = useMemo(() => {\n      return {\n        top: y ?? 0,\n        left: x ?? 0,\n        position: strategy,\n        width: elements.floating?.offsetWidth,\n        height: elements.floating?.offsetHeight,\n      };\n    }, [elements.floating, strategy, x, y]);\n\n    const setOpen = (event: SyntheticEvent, newOpen: boolean) => {\n      setOpenState(newOpen);\n      onOpenChange?.(event, newOpen);\n    };\n\n    const arrowProps = {\n      ref: arrowRef,\n      context,\n      style: {\n        position: strategy,\n        left: arrowX ?? 0,\n        top: arrowY ?? 0,\n      },\n    };\n\n    const handleCloseButton = (event: SyntheticEvent) => {\n      setOpen(event, false);\n      onClose?.(event);\n    };\n\n    return (\n      <OverlayContext.Provider\n        value={{\n          id: id ?? \"\",\n          openState,\n          setOpen,\n          floatingStyles,\n          placement,\n          context,\n          arrowProps,\n          floating,\n          reference,\n          handleCloseButton,\n          getFloatingProps,\n          getReferenceProps,\n        }}\n      >\n        <div ref={ref} {...rest}>\n          {children}\n        </div>\n      </OverlayContext.Provider>\n    );\n  }\n);\n"],"names":["Overlay"],"mappings":"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"}

package/dist-es/overlay/OverlayContext.js

@@ -0,0 +1,38 @@
+import { createContext } from '@salt-ds/core';
+import { useContext } from 'react';
+
+const OverlayContext = createContext(
+  "OverlayContext",
+  {
+    id: "",
+    openState: false,
+    setOpen() {
+      return void 0;
+    },
+    floatingStyles: {
+      top: 0,
+      left: 0,
+      position: ""
+    },
+    placement: "",
+    context: {},
+    arrowProps: {},
+    handleCloseButton() {
+      return void 0;
+    },
+    reference: {},
+    floating: {},
+    getFloatingProps() {
+      return {};
+    },
+    getReferenceProps() {
+      return {};
+    }
+  }
+);
+function useOverlayContext() {
+  return useContext(OverlayContext);
+}
+
+export { OverlayContext, useOverlayContext };
+//# sourceMappingURL=OverlayContext.js.map

package/dist-es/overlay/OverlayContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayContext.js","sources":["../src/overlay/OverlayContext.ts"],"sourcesContent":["import {\n  FloatingArrowProps,\n  FloatingContext,\n  Placement,\n  ReferenceType,\n  Strategy,\n} from \"@floating-ui/react\";\nimport { createContext, useFloatingUI } from \"@salt-ds/core\";\nimport { SyntheticEvent, useContext } from \"react\";\n\ntype FloatingReturn = ReturnType<typeof useFloatingUI>;\ntype FloatingStyleProps = {\n  top: number;\n  left: number;\n  position: Strategy;\n  width?: number;\n  height?: number;\n};\n\nexport interface OverlayContextValue {\n  id: string;\n  openState: boolean;\n  setOpen: (event: SyntheticEvent, newOpen: boolean) => void;\n  floatingStyles: FloatingStyleProps;\n  placement: Placement;\n  arrowProps: FloatingArrowProps;\n  context: FloatingContext;\n  reference?: (node: ReferenceType | null) => void;\n  floating?: (node: HTMLElement | null) => void;\n  handleCloseButton: (event: SyntheticEvent) => void;\n  getFloatingProps: (\n    userProps?: React.HTMLProps<HTMLElement> | undefined\n  ) => Record<string, unknown>;\n  getReferenceProps: (\n    userProps?: React.HTMLProps<Element> | undefined\n  ) => Record<string, unknown>;\n}\n\nexport const OverlayContext = createContext<OverlayContextValue>(\n  \"OverlayContext\",\n  {\n    id: \"\",\n    openState: false,\n    setOpen() {\n      return undefined;\n    },\n    floatingStyles: {\n      top: 0,\n      left: 0,\n      position: \"\" as Strategy,\n    },\n    placement: \"\" as Placement,\n    context: {} as FloatingContext,\n    arrowProps: {} as FloatingArrowProps,\n    handleCloseButton() {\n      return undefined;\n    },\n    reference: {} as FloatingReturn[\"reference\"],\n    floating: {} as FloatingReturn[\"floating\"],\n    getFloatingProps() {\n      return {} as Record<string, unknown>;\n    },\n    getReferenceProps() {\n      return {} as Record<string, unknown>;\n    },\n  }\n);\n\nexport function useOverlayContext() {\n  return useContext(OverlayContext);\n}\n"],"names":[],"mappings":";;;AAsCO,MAAM,cAAiB,GAAA,aAAA;AAAA,EAC5B,gBAAA;AAAA,EACA;AAAA,IACE,EAAI,EAAA,EAAA;AAAA,IACJ,SAAW,EAAA,KAAA;AAAA,IACX,OAAU,GAAA;AACR,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,IACA,cAAgB,EAAA;AAAA,MACd,GAAK,EAAA,CAAA;AAAA,MACL,IAAM,EAAA,CAAA;AAAA,MACN,QAAU,EAAA,EAAA;AAAA,KACZ;AAAA,IACA,SAAW,EAAA,EAAA;AAAA,IACX,SAAS,EAAC;AAAA,IACV,YAAY,EAAC;AAAA,IACb,iBAAoB,GAAA;AAClB,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,IACA,WAAW,EAAC;AAAA,IACZ,UAAU,EAAC;AAAA,IACX,gBAAmB,GAAA;AACjB,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AAAA,IACA,iBAAoB,GAAA;AAClB,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AAAA,GACF;AACF,EAAA;AAEO,SAAS,iBAAoB,GAAA;AAClC,EAAA,OAAO,WAAW,cAAc,CAAA,CAAA;AAClC;;;;"}

package/dist-es/overlay/OverlayPanel.js

@@ -0,0 +1,60 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { makePrefixer, useFloatingComponent, useForkRef } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { useOverlayContext } from './OverlayContext.js';
+import { FloatingOverlay } from '@floating-ui/react';
+import { OverlayPanelBase } from './OverlayPanelBase.js';
+
+const withBaseName = makePrefixer("saltOverlayPanel");
+const OverlayPanel = forwardRef(
+  function OverlayPanel2(props, ref) {
+    const { className, ...rest } = props;
+    const { Component: FloatingComponent } = useFloatingComponent();
+    const {
+      id,
+      openState,
+      floatingStyles,
+      placement,
+      context,
+      getFloatingProps,
+      floating
+    } = useOverlayContext();
+    const handleRef = useForkRef(floating, ref);
+    const { top, left, width, height, position } = floatingStyles;
+    const getOverlayProps = () => {
+      return getFloatingProps({
+        "data-placement": placement,
+        ref: floating,
+        id: `${id}-panel`
+      });
+    };
+    if (!openState)
+      return /* @__PURE__ */ jsx(Fragment, {});
+    return /* @__PURE__ */ jsx(FloatingOverlay, {
+      children: /* @__PURE__ */ jsx(FloatingComponent, {
+        open: openState,
+        className: clsx(withBaseName(), className),
+        "aria-modal": "true",
+        "aria-labelledby": `${id}-header`,
+        "aria-describedby": `${id}-content`,
+        ...getOverlayProps(),
+        ref: handleRef,
+        width,
+        height,
+        top,
+        left,
+        position,
+        focusManagerProps: {
+          context
+        },
+        children: /* @__PURE__ */ jsx(OverlayPanelBase, {
+          ...rest
+        })
+      })
+    });
+  }
+);
+
+export { OverlayPanel };
+//# sourceMappingURL=OverlayPanel.js.map