@salt-ds/lab 1.0.0-alpha.34 → 1.0.0-alpha.35

package/dist-cjs/tabs-next/TabstripNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabstripNext.js","sources":["../src/tabs-next/TabstripNext.tsx"],"sourcesContent":["import { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport clsx from \"clsx\";\nimport {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  SyntheticEvent,\n  KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Overflow } from \"@fluentui/react-overflow\";\nimport { OverflowMenu } from \"./OverflowMenu\";\nimport tabstripCss from \"./TabstripNext.css\";\nimport { TabsContext } from \"./TabNextContext\";\nimport { SelectionChangeHandler } from \"../common-hooks\";\n\nconst withBaseName = makePrefixer(\"saltTabstripNext\");\n\nexport interface TabstripNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /* Styling active color variant. Defaults to \"primary\". */\n  activeColor?: \"primary\" | \"secondary\";\n  /* Tabs alignment. Defaults to \"left\" */\n  align?: \"left\" | \"center\" | \"right\";\n  /* Value for the uncontrolled version. */\n  value?: string;\n  /* Callback for the controlled version. */\n  onChange?: (e: SyntheticEvent, data: { value: string }) => void;\n  /* Initial value for the uncontrolled version. */\n  defaultValue?: string;\n  /* The Tabs variant */\n  variant?: \"main\" | \"inline\";\n}\n\ninterface TabValue {\n  value: string;\n  label: ReactNode;\n}\n\nexport const TabstripNext = forwardRef<HTMLDivElement, TabstripNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      activeColor = \"primary\",\n      align = \"left\",\n      children,\n      className,\n      value: valueProp,\n      defaultValue,\n      onChange,\n      onKeyDown,\n      style,\n      variant = \"main\",\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tabstrip-next\",\n      css: tabstripCss,\n      window: targetWindow,\n    });\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n\n    const [value, setValue] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"TabstripNext\",\n      state: \"selected\",\n    });\n    const [focusable, setFocusableState] = useState<string | undefined>(value);\n    const [overflowOpen, setOverflowOpen] = useState(false);\n\n    const activate = useCallback(\n      (event: SyntheticEvent<HTMLButtonElement>) => {\n        const newValue = event.currentTarget.value;\n        setValue(newValue);\n        if (value !== newValue) {\n          onChange?.(event, { value: newValue });\n        }\n      },\n      [onChange, value, setValue]\n    );\n\n    const isActive = useCallback(\n      (id: string | undefined) => {\n        return value === id;\n      },\n      [value]\n    );\n\n    const setFocusable = useCallback((id: string | undefined) => {\n      setFocusableState(id);\n    }, []);\n\n    const isFocusable = useCallback(\n      (id: string | undefined) => {\n        return focusable === id || !focusable;\n      },\n      [focusable]\n    );\n\n    const [tabList, setTabList] = useState<TabValue[]>([]);\n    const registerTab = useCallback((tab: TabValue) => {\n      setTabList((list) => list.concat([tab]));\n    }, []);\n\n    const unregisterTab = useCallback((id: string) => {\n      setTabList((list) => list.filter((item) => item.value !== id));\n    }, []);\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (overflowOpen) return;\n\n      const elements: HTMLElement[] = Array.from(\n        tabstripRef.current?.querySelectorAll(\n          `div:not([data-overflowing]) > [role=\"tab\"]:not([disabled])`\n        ) ?? []\n      );\n\n      const currentIndex = elements.findIndex(\n        (element) => element === targetWindow?.document.activeElement\n      );\n\n      if (currentIndex < 0) return;\n\n      switch (event.key) {\n        case \"ArrowDown\":\n        case \"ArrowRight\":\n          elements[Math.min(currentIndex + 1, elements.length)]?.focus();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowLeft\":\n          elements[Math.max(0, currentIndex - 1)]?.focus();\n          break;\n        case \"Home\":\n          elements[0]?.focus();\n          break;\n        case \"End\":\n          elements[elements.length - 1]?.focus();\n      }\n\n      onKeyDown?.(event);\n    };\n\n    const handleOverflowItemClick: SelectionChangeHandler<TabValue> = (\n      event,\n      item\n    ) => {\n      if (item) {\n        setValue(item.value);\n        requestAnimationFrame(() => {\n          const element = tabstripRef.current?.querySelector(\n            `[value=\"${item.value}\"]`\n          );\n          if (element instanceof HTMLElement) {\n            element?.focus();\n          }\n        });\n        if (value !== item.value) {\n          onChange?.(event, { value: item.value });\n        }\n      }\n    };\n\n    const handleOverflowOpenChange = (isOpen: boolean) => {\n      setOverflowOpen(isOpen);\n    };\n\n    const contextValue = useMemo(\n      () => ({\n        activate,\n        isActive,\n        setFocusable,\n        isFocusable,\n        registerTab,\n        unregisterTab,\n        variant,\n        activeColor,\n      }),\n      [\n        activate,\n        isActive,\n        setFocusable,\n        isFocusable,\n        registerTab,\n        unregisterTab,\n        variant,\n        activeColor,\n      ]\n    );\n\n    const tabstripStyle = {\n      \"--tabstripNext-justifyContent\": align,\n      ...style,\n    };\n\n    return (\n      <TabsContext.Provider value={contextValue}>\n        <Overflow ref={handleRef}>\n          <div\n            role=\"tablist\"\n            className={clsx(\n              withBaseName(),\n              withBaseName(\"horizontal\"),\n              withBaseName(variant),\n              className\n            )}\n            onKeyDown={handleKeyDown}\n            style={tabstripStyle}\n            {...rest}\n          >\n            {children}\n            <OverflowMenu\n              tabs={tabList}\n              onOpenChange={handleOverflowOpenChange}\n              onSelectionChange={handleOverflowItemClick}\n            />\n          </div>\n        </Overflow>\n      </TabsContext.Provider>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","TabstripNext","useWindow","useComponentCssInjection","tabstripCss","useRef","useForkRef","useControlled","useState","useCallback","useMemo","jsx","TabsContext","Overflow","jsxs","clsx","OverflowMenu"],"mappings":"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"}
+{"version":3,"file":"TabstripNext.js","sources":["../src/tabs-next/TabstripNext.tsx"],"sourcesContent":["import { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport clsx from \"clsx\";\nimport {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  SyntheticEvent,\n  KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Overflow } from \"@fluentui/react-overflow\";\nimport { OverflowMenu } from \"./OverflowMenu\";\nimport tabstripCss from \"./TabstripNext.css\";\nimport { TabsContext } from \"./TabNextContext\";\nimport { SelectionChangeHandler } from \"../common-hooks\";\n\nconst withBaseName = makePrefixer(\"saltTabstripNext\");\n\nexport interface TabstripNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /* Styling active color variant. Defaults to \"primary\". */\n  activeColor?: \"primary\" | \"secondary\";\n  /* Tabs alignment. Defaults to \"left\" */\n  align?: \"left\" | \"center\" | \"right\";\n  /* Value for the uncontrolled version. */\n  value?: string;\n  /* Callback for the controlled version. */\n  onChange?: (e: SyntheticEvent, data: { value: string }) => void;\n  /* Initial value for the uncontrolled version. */\n  defaultValue?: string;\n  /* The Tabs variant */\n  variant?: \"main\" | \"inline\";\n}\n\ninterface TabValue {\n  value: string;\n  label: ReactNode;\n}\n\nexport const TabstripNext = forwardRef<HTMLDivElement, TabstripNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      activeColor = \"primary\",\n      align = \"left\",\n      children,\n      className,\n      value: valueProp,\n      defaultValue,\n      onChange,\n      onKeyDown,\n      style,\n      variant = \"main\",\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tabstrip-next\",\n      css: tabstripCss,\n      window: targetWindow,\n    });\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n\n    const [value, setValue] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"TabstripNext\",\n      state: \"selected\",\n    });\n    const [focusable, setFocusableState] = useState<string | undefined>(value);\n    const [overflowOpen, setOverflowOpen] = useState(false);\n\n    const activate = useCallback(\n      (event: SyntheticEvent<HTMLButtonElement>) => {\n        const newValue = event.currentTarget.value;\n        setValue(newValue);\n        if (value !== newValue) {\n          onChange?.(event, { value: newValue });\n        }\n      },\n      [onChange, value, setValue]\n    );\n\n    const isActive = useCallback(\n      (id: string | undefined) => {\n        return value === id;\n      },\n      [value]\n    );\n\n    const setFocusable = useCallback((id: string | undefined) => {\n      setFocusableState(id);\n    }, []);\n\n    const isFocusable = useCallback(\n      (id: string | undefined) => {\n        return focusable === id || !focusable;\n      },\n      [focusable]\n    );\n\n    const [tabList, setTabList] = useState<TabValue[]>([]);\n    const registerTab = useCallback((tab: TabValue) => {\n      setTabList((list) => list.concat([tab]));\n    }, []);\n\n    const unregisterTab = useCallback((id: string) => {\n      setTabList((list) => list.filter((item) => item.value !== id));\n    }, []);\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (overflowOpen) return;\n\n      const elements: HTMLElement[] = Array.from(\n        tabstripRef.current?.querySelectorAll(\n          `div:not([data-overflowing]) > [role=\"tab\"]:not([disabled])`\n        ) ?? []\n      );\n\n      const currentIndex = elements.findIndex(\n        (element) => element === targetWindow?.document.activeElement\n      );\n\n      if (currentIndex < 0) return;\n\n      switch (event.key) {\n        case \"ArrowDown\":\n        case \"ArrowRight\":\n          elements[Math.min(currentIndex + 1, elements.length)]?.focus();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowLeft\":\n          elements[Math.max(0, currentIndex - 1)]?.focus();\n          break;\n        case \"Home\":\n          elements[0]?.focus();\n          break;\n        case \"End\":\n          elements[elements.length - 1]?.focus();\n      }\n\n      onKeyDown?.(event);\n    };\n\n    const handleOverflowItemClick: SelectionChangeHandler<TabValue> = (\n      event,\n      item\n    ) => {\n      if (item) {\n        setValue(item.value);\n        requestAnimationFrame(() => {\n          const element = tabstripRef.current?.querySelector(\n            `[value=\"${item.value}\"]`\n          );\n          if (element instanceof HTMLElement) {\n            element?.focus();\n          }\n        });\n        if (value !== item.value) {\n          onChange?.(event, { value: item.value });\n        }\n      }\n    };\n\n    const handleOverflowOpenChange = (isOpen: boolean) => {\n      setOverflowOpen(isOpen);\n    };\n\n    const contextValue = useMemo(\n      () => ({\n        activate,\n        isActive,\n        setFocusable,\n        isFocusable,\n        registerTab,\n        unregisterTab,\n        variant,\n        activeColor,\n      }),\n      [\n        activate,\n        isActive,\n        setFocusable,\n        isFocusable,\n        registerTab,\n        unregisterTab,\n        variant,\n        activeColor,\n      ]\n    );\n\n    const tabstripStyle = {\n      \"--tabstripNext-justifyContent\": align,\n      ...style,\n    };\n\n    return (\n      <TabsContext.Provider value={contextValue}>\n        <div className={clsx(withBaseName(\"container\"), withBaseName(variant))}>\n          <Overflow ref={handleRef}>\n            <div\n              role=\"tablist\"\n              className={clsx(\n                withBaseName(),\n                withBaseName(\"horizontal\"),\n                className\n              )}\n              onKeyDown={handleKeyDown}\n              style={tabstripStyle}\n              {...rest}\n            >\n              {children}\n              <OverflowMenu\n                tabs={tabList}\n                onOpenChange={handleOverflowOpenChange}\n                onSelectionChange={handleOverflowItemClick}\n              />\n            </div>\n          </Overflow>\n        </div>\n      </TabsContext.Provider>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","TabstripNext","useWindow","useComponentCssInjection","tabstripCss","useRef","useForkRef","useControlled","useState","useCallback","useMemo","jsx","TabsContext","clsx","Overflow","jsxs","OverflowMenu"],"mappings":"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"}

package/dist-es/index.js

@@ -57,12 +57,6 @@ export { MailLinkComponent } from './contact-details/MailLinkComponent.js';
 export { ContentStatus } from './content-status/ContentStatus.js';
 export { DeckItem } from './deck-item/DeckItem.js';
 export { DeckLayout } from './deck-layout/DeckLayout.js';
-export { ConditionalScrimWrapper, Dialog } from './dialog/Dialog.js';
-export { DialogHeader } from './dialog/DialogHeader.js';
-export { DialogActions } from './dialog/DialogActions.js';
-export { DialogContent } from './dialog/DialogContent.js';
-export { DialogContext, useDialogContext } from './dialog/DialogContext.js';
-export { DialogCloseButton } from './dialog/DialogCloseButton.js';
 export { DropdownBase } from './dropdown/DropdownBase.js';
 export { DropdownButton } from './dropdown/DropdownButton.js';
 export { Dropdown } from './dropdown/Dropdown.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/overlay/Overlay.css.js

@@ -1,4 +1,4 @@
-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  border-radius: var(--saltOverlay-borderRadius, var(--salt-palette-corner, 0));\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";
+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  border-radius: var(--saltOverlay-borderRadius, var(--salt-palette-corner, 0));\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: var(--salt-animation-fade-in-center);\n  position: relative;\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

@@ -31,7 +31,6 @@ const Overlay = forwardRef(
       elements,
       floating,
       reference,
-      middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
       placement
     } = useFloatingUI({
       open: openState,
@@ -65,12 +64,7 @@ const Overlay = forwardRef(
     };
     const arrowProps = {
       ref: arrowRef,
-      context,
-      style: {
-        position: strategy,
-        left: arrowX != null ? arrowX : 0,
-        top: arrowY != null ? arrowY : 0
-      }
+      context
     };
     const handleCloseButton = (event) => {
       setOpen(event, false);

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

@@ -1 +1 @@
-{"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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"}
+{"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      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    };\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/OverlayPanel.js

@@ -1,15 +1,14 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx } 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 { className, ["aria-labelledby"]: ariaLabelledby, ...rest } = props;
     const { Component: FloatingComponent } = useFloatingComponent();
     const {
       id,
@@ -29,28 +28,23 @@ const OverlayPanel = forwardRef(
         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
-        })
+    return /* @__PURE__ */ jsx(FloatingComponent, {
+      open: openState,
+      className: clsx(withBaseName(), className),
+      "aria-modal": "true",
+      ...getOverlayProps(),
+      ref: handleRef,
+      width,
+      height,
+      top,
+      left,
+      position,
+      focusManagerProps: {
+        context
+      },
+      "aria-labelledby": ariaLabelledby,
+      children: /* @__PURE__ */ jsx(OverlayPanelBase, {
+        ...rest
       })
     });
   }

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

@@ -1 +1 @@
-{"version":3,"file":"OverlayPanel.js","sources":["../src/overlay/OverlayPanel.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  forwardRef,\n  HTMLProps,\n} from \"react\";\nimport { makePrefixer, useFloatingComponent, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { useOverlayContext } from \"./OverlayContext\";\nimport { FloatingOverlay } from \"@floating-ui/react\";\nimport { OverlayPanelBase } from \"./OverlayPanelBase\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanel\");\n\nexport interface OverlayPanelProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nexport const OverlayPanel = forwardRef<HTMLDivElement, OverlayPanelProps>(\n  function OverlayPanel(props, ref: ForwardedRef<HTMLDivElement>) {\n    const { className, ...rest } = props;\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const {\n      id,\n      openState,\n      floatingStyles,\n      placement,\n      context,\n      getFloatingProps,\n      floating,\n    } = useOverlayContext();\n\n    const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    const { top, left, width, height, position } = floatingStyles;\n\n    const getOverlayProps = (): HTMLProps<HTMLDivElement> => {\n      return getFloatingProps({\n        // @ts-ignore data-placement does not exist\n        \"data-placement\": placement,\n        ref: floating,\n        id: `${id}-panel`,\n      });\n    };\n\n    if (!openState) return <></>;\n\n    return (\n      <FloatingOverlay>\n        <FloatingComponent\n          open={openState}\n          className={clsx(withBaseName(), className)}\n          aria-modal=\"true\"\n          aria-labelledby={`${id}-header`}\n          aria-describedby={`${id}-content`}\n          {...getOverlayProps()}\n          ref={handleRef}\n          width={width}\n          height={height}\n          top={top}\n          left={left}\n          position={position}\n          focusManagerProps={{\n            context: context,\n          }}\n        >\n          <OverlayPanelBase {...rest} />\n        </FloatingComponent>\n      </FloatingOverlay>\n    );\n  }\n);\n"],"names":["OverlayPanel"],"mappings":";;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAI7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAa,CAAA,KAAA,EAAO,GAAmC,EAAA;AAC9D,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE/B,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAE9D,IAAM,MAAA;AAAA,MACJ,EAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,QAAA;AAAA,QACE,iBAAkB,EAAA,CAAA;AAEtB,IAAM,MAAA,SAAA,GAAY,UAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE1D,IAAA,MAAM,EAAE,GAAK,EAAA,IAAA,EAAM,KAAO,EAAA,MAAA,EAAQ,UAAa,GAAA,cAAA,CAAA;AAE/C,IAAA,MAAM,kBAAkB,MAAiC;AACvD,MAAA,OAAO,gBAAiB,CAAA;AAAA,QAEtB,gBAAkB,EAAA,SAAA;AAAA,QAClB,GAAK,EAAA,QAAA;AAAA,QACL,IAAI,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,OACR,CAAA,CAAA;AAAA,KACH,CAAA;AAEA,IAAA,IAAI,CAAC,SAAA;AAAW,MAAA,uBAAS,GAAA,CAAA,QAAA,EAAA,EAAA,CAAA,CAAA;AAEzB,IAAA,uBACG,GAAA,CAAA,eAAA,EAAA;AAAA,MACC,QAAC,kBAAA,GAAA,CAAA,iBAAA,EAAA;AAAA,QACC,IAAM,EAAA,SAAA;AAAA,QACN,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,YAAW,EAAA,MAAA;AAAA,QACX,mBAAiB,CAAG,EAAA,EAAA,CAAA,OAAA,CAAA;AAAA,QACpB,oBAAkB,CAAG,EAAA,EAAA,CAAA,QAAA,CAAA;AAAA,QACpB,GAAG,eAAgB,EAAA;AAAA,QACpB,GAAK,EAAA,SAAA;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAA;AAAA,QACA,iBAAmB,EAAA;AAAA,UACjB,OAAA;AAAA,SACF;AAAA,QAEA,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA;AAAA,UAAkB,GAAG,IAAA;AAAA,SAAM,CAAA;AAAA,OAC9B,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"OverlayPanel.js","sources":["../src/overlay/OverlayPanel.tsx"],"sourcesContent":["import {\n  ForwardedRef,\n  forwardRef,\n  HTMLProps,\n  ComponentPropsWithoutRef,\n} from \"react\";\nimport { makePrefixer, useFloatingComponent, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { useOverlayContext } from \"./OverlayContext\";\nimport { OverlayPanelBase } from \"./OverlayPanelBase\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanel\");\n\nexport interface OverlayPanelProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nexport const OverlayPanel = forwardRef<HTMLDivElement, OverlayPanelProps>(\n  function OverlayPanel(props, ref: ForwardedRef<HTMLDivElement>) {\n    const { className, [\"aria-labelledby\"]: ariaLabelledby, ...rest } = props;\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const {\n      id,\n      openState,\n      floatingStyles,\n      placement,\n      context,\n      getFloatingProps,\n      floating,\n    } = useOverlayContext();\n\n    const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    const { top, left, width, height, position } = floatingStyles;\n\n    const getOverlayProps = (): HTMLProps<HTMLDivElement> => {\n      return getFloatingProps({\n        // @ts-ignore data-placement does not exist\n        \"data-placement\": placement,\n        ref: floating,\n        id: `${id}-panel`,\n      });\n    };\n\n    return (\n      <FloatingComponent\n        open={openState}\n        className={clsx(withBaseName(), className)}\n        aria-modal=\"true\"\n        {...getOverlayProps()}\n        ref={handleRef}\n        width={width}\n        height={height}\n        top={top}\n        left={left}\n        position={position}\n        focusManagerProps={{\n          context: context,\n        }}\n        aria-labelledby={ariaLabelledby}\n      >\n        <OverlayPanelBase {...rest} />\n      </FloatingComponent>\n    );\n  }\n);\n"],"names":["OverlayPanel"],"mappings":";;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAI7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAa,CAAA,KAAA,EAAO,GAAmC,EAAA;AAC9D,IAAA,MAAM,EAAE,SAAA,EAAA,CAAY,iBAAoB,GAAA,cAAA,EAAA,GAAmB,MAAS,GAAA,KAAA,CAAA;AAEpE,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAE9D,IAAM,MAAA;AAAA,MACJ,EAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,QAAA;AAAA,QACE,iBAAkB,EAAA,CAAA;AAEtB,IAAM,MAAA,SAAA,GAAY,UAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE1D,IAAA,MAAM,EAAE,GAAK,EAAA,IAAA,EAAM,KAAO,EAAA,MAAA,EAAQ,UAAa,GAAA,cAAA,CAAA;AAE/C,IAAA,MAAM,kBAAkB,MAAiC;AACvD,MAAA,OAAO,gBAAiB,CAAA;AAAA,QAEtB,gBAAkB,EAAA,SAAA;AAAA,QAClB,GAAK,EAAA,QAAA;AAAA,QACL,IAAI,CAAG,EAAA,EAAA,CAAA,MAAA,CAAA;AAAA,OACR,CAAA,CAAA;AAAA,KACH,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,iBAAA,EAAA;AAAA,MACC,IAAM,EAAA,SAAA;AAAA,MACN,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,YAAW,EAAA,MAAA;AAAA,MACV,GAAG,eAAgB,EAAA;AAAA,MACpB,GAAK,EAAA,SAAA;AAAA,MACL,KAAA;AAAA,MACA,MAAA;AAAA,MACA,GAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,iBAAmB,EAAA;AAAA,QACjB,OAAA;AAAA,OACF;AAAA,MACA,iBAAiB,EAAA,cAAA;AAAA,MAEjB,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA;AAAA,QAAkB,GAAG,IAAA;AAAA,OAAM,CAAA;AAAA,KAC9B,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/overlay/OverlayPanelBase.js

@@ -44,10 +44,8 @@ const OverlayPanelBase = (props) => {
         strokeWidth: 1,
         fill: "var(--overlay-background)",
         stroke: "var(--overlay-borderColor)",
-        style: {
-          height: "calc(var(--salt-size-adornment) + 6px)",
-          width: "calc(var(--salt-size-adornment) + 8px)"
-        }
+        height: 5,
+        width: 10
       })
     ]
   });

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

@@ -1 +1 @@
-{"version":3,"file":"OverlayPanelBase.js","sources":["../src/overlay/OverlayPanelBase.tsx"],"sourcesContent":["import { FloatingArrow } from \"@floating-ui/react\";\n\nimport overlayCss from \"./Overlay.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { ComponentPropsWithoutRef } from \"react\";\nimport { useOverlayContext } from \"./OverlayContext\";\nimport clsx from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelBase\");\n\n// OverlayPanelBase component needed for CSS style injection\nexport const OverlayPanelBase = (props: ComponentPropsWithoutRef<\"div\">) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overlay\",\n    css: overlayCss,\n    window: targetWindow,\n  });\n\n  const { arrowProps, handleCloseButton } = useOverlayContext();\n  const { children, className, ...rest } = props;\n\n  return (\n    <>\n      <div className={clsx(withBaseName(\"container\"), className)} {...rest}>\n        <Button\n          onClick={handleCloseButton}\n          variant=\"secondary\"\n          className={withBaseName(\"closeButton\")}\n          aria-label=\"Close Overlay\"\n        >\n          <CloseIcon aria-hidden />\n        </Button>\n        <div className={withBaseName(\"content\")}>{children}</div>\n      </div>\n\n      <FloatingArrow\n        {...arrowProps}\n        strokeWidth={1}\n        fill=\"var(--overlay-background)\"\n        stroke=\"var(--overlay-borderColor)\"\n        style={{\n          height: \"calc(var(--salt-size-adornment) + 6px)\", // FIXME: +6px to account for Floating UI's FloatingArrow positioning calculation\n          width: \"calc(var(--salt-size-adornment) + 8px)\", // FIXME: +8px to account for Floating UI's FloatingArrow positioning calculation\n        }}\n      />\n    </>\n  );\n};\n"],"names":["overlayCss"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AAG3C,MAAA,gBAAA,GAAmB,CAAC,KAA2C,KAAA;AAC1E,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,UAAA,EAAY,iBAAkB,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAC5D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,WAAW,GAAG,SAAS,CAAA;AAAA,QAAI,GAAG,IAAA;AAAA,QAC9D,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YACC,OAAS,EAAA,iBAAA;AAAA,YACT,OAAQ,EAAA,WAAA;AAAA,YACR,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,YACrC,YAAW,EAAA,eAAA;AAAA,YAEX,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,cAAU,aAAW,EAAA,IAAA;AAAA,aAAC,CAAA;AAAA,WACzB,CAAA;AAAA,0BACC,GAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,YAAI,QAAA;AAAA,WAAS,CAAA;AAAA,SAAA;AAAA,OACrD,CAAA;AAAA,sBAEC,GAAA,CAAA,aAAA,EAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,WAAa,EAAA,CAAA;AAAA,QACb,IAAK,EAAA,2BAAA;AAAA,QACL,MAAO,EAAA,4BAAA;AAAA,QACP,KAAO,EAAA;AAAA,UACL,MAAQ,EAAA,wCAAA;AAAA,UACR,KAAO,EAAA,wCAAA;AAAA,SACT;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"OverlayPanelBase.js","sources":["../src/overlay/OverlayPanelBase.tsx"],"sourcesContent":["import { FloatingArrow } from \"@floating-ui/react\";\n\nimport overlayCss from \"./Overlay.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { ComponentPropsWithoutRef } from \"react\";\nimport { useOverlayContext } from \"./OverlayContext\";\nimport clsx from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelBase\");\n\n// OverlayPanelBase component needed for CSS style injection\nexport const OverlayPanelBase = (props: ComponentPropsWithoutRef<\"div\">) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overlay\",\n    css: overlayCss,\n    window: targetWindow,\n  });\n\n  const { arrowProps, handleCloseButton } = useOverlayContext();\n  const { children, className, ...rest } = props;\n\n  return (\n    <>\n      <div className={clsx(withBaseName(\"container\"), className)} {...rest}>\n        <Button\n          onClick={handleCloseButton}\n          variant=\"secondary\"\n          className={withBaseName(\"closeButton\")}\n          aria-label=\"Close Overlay\"\n        >\n          <CloseIcon aria-hidden />\n        </Button>\n        <div className={withBaseName(\"content\")}>{children}</div>\n      </div>\n      <FloatingArrow\n        {...arrowProps}\n        strokeWidth={1}\n        fill=\"var(--overlay-background)\"\n        stroke=\"var(--overlay-borderColor)\"\n        height={5}\n        width={10}\n      />\n    </>\n  );\n};\n"],"names":["overlayCss"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AAG3C,MAAA,gBAAA,GAAmB,CAAC,KAA2C,KAAA;AAC1E,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,cAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,UAAA,EAAY,iBAAkB,EAAA,GAAI,iBAAkB,EAAA,CAAA;AAC5D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,WAAW,GAAG,SAAS,CAAA;AAAA,QAAI,GAAG,IAAA;AAAA,QAC9D,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YACC,OAAS,EAAA,iBAAA;AAAA,YACT,OAAQ,EAAA,WAAA;AAAA,YACR,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,YACrC,YAAW,EAAA,eAAA;AAAA,YAEX,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,cAAU,aAAW,EAAA,IAAA;AAAA,aAAC,CAAA;AAAA,WACzB,CAAA;AAAA,0BACC,GAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,YAAI,QAAA;AAAA,WAAS,CAAA;AAAA,SAAA;AAAA,OACrD,CAAA;AAAA,sBACC,GAAA,CAAA,aAAA,EAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,WAAa,EAAA,CAAA;AAAA,QACb,IAAK,EAAA,2BAAA;AAAA,QACL,MAAO,EAAA,4BAAA;AAAA,QACP,MAAQ,EAAA,CAAA;AAAA,QACR,KAAO,EAAA,EAAA;AAAA,OACT,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/tabs/Tab.js

@@ -79,7 +79,7 @@ const Tab = forwardRef(function Tab2({
     switch (e.key) {
       case "Backspace":
       case "Delete":
-        if (closeable) {
+        if (closeable && !editing) {
           e.stopPropagation();
           onClose && onClose(index);
         }

package/dist-es/tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../src/tabs/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { Button, ButtonProps, makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  FocusEvent,\n  ForwardedRef,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\nimport { TabProps } from \"./TabsTypes\";\n\nimport tabCss from \"./Tab.css\";\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(\"saltTab\");\n\nconst CloseTabButton = (props: ButtonProps) => (\n  // FIXME: use polymorphic button\n  <Button\n    {...props}\n    aria-label=\"Close Tab (Delete or Backspace)\"\n    className={withBaseName(\"closeButton\")}\n    tabIndex={undefined}\n    title=\"Close Tab (Delete or Backspace)\"\n    variant=\"secondary\"\n  >\n    <CloseIcon\n      aria-label=\"Close Tab (Delete or Backspace)\"\n      className={withBaseName(\"close-icon\")}\n    />\n  </Button>\n);\n\nexport const Tab = forwardRef(function Tab(\n  {\n    ariaControls,\n    children,\n    className,\n    closeable,\n    dragging,\n    editable,\n    editing,\n    focusVisible,\n    index,\n    label,\n    onClick,\n    onClose,\n    onEnterEditMode = noop,\n    onExitEditMode = noop,\n    onFocus: onFocusProp,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    orientation,\n    selected,\n    tabChildIndex = 0,\n    tabIndex,\n    ...props\n  }: TabProps,\n  ref: ForwardedRef<HTMLDivElement>\n): ReactElement<TabProps> {\n  if (index === undefined || onClick === undefined || onKeyDown === undefined) {\n    throw Error(\n      \"index, onClick, onKeyUp, onKeyDown are required props, they would nornally be injected by Tabstrip, are you creating a Tab outside of a Tabstrip\"\n    );\n  }\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab\",\n    css: tabCss,\n    window: targetWindow,\n  });\n\n  const root = useRef<HTMLDivElement>(null);\n  const editableRef = useRef<HTMLDivElement>(null);\n  const setForkRef = useForkRef(ref, root);\n  const [closeHover, setCloseHover] = useState(false);\n  const handleClick = useCallback(\n    (e: MouseEvent) => {\n      if (!editing) {\n        e.preventDefault();\n        onClick(e, index);\n      }\n    },\n    [editing, index, onClick]\n  );\n  const handleKeyDownMain = (e: KeyboardEvent<HTMLElement>) => {\n    onKeyDown(e);\n  };\n\n  const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n    originalValue = \"\",\n    editedValue = \"\",\n    allowDeactivation = true\n  ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n  const handleKeyUp = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case \"Backspace\":\n      case \"Delete\":\n        if (closeable) {\n          e.stopPropagation();\n          onClose && onClose(index);\n        }\n        break;\n      default:\n        onKeyUp && onKeyUp(e, index);\n    }\n  };\n\n  const handleCloseButtonClick = (e: MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    onClose && onClose(index);\n  };\n\n  const handleCloseButtonEnter = () => {\n    setCloseHover(true);\n  };\n\n  const handleCloseButtonLeave = () => {\n    setCloseHover(false);\n  };\n\n  const handleMouseDown = (e: MouseEvent<HTMLElement>): void => {\n    onMouseDown?.(e);\n  };\n\n  const getLabel = () => {\n    if (editable) {\n      return (\n        <EditableLabel\n          editing={editing}\n          defaultValue={label}\n          // Create a fresh instance after each edit, so it can be uncontrolled ...\n          key={label}\n          onEnterEditMode={onEnterEditMode}\n          onExitEditMode={handleOnExitEditMode}\n          ref={editableRef}\n        />\n      );\n    } else {\n      return label;\n    }\n  };\n\n  const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n    if (editableRef.current) {\n      const editable = editableRef.current as HTMLElement;\n      const input = editable.querySelector(\n        \".saltEditableLabel-input\"\n      ) as HTMLInputElement;\n      input?.focus();\n    }\n    onFocusProp?.(evt);\n  };\n\n  return (\n    <div\n      {...props}\n      aria-controls={ariaControls}\n      aria-selected={selected}\n      className={clsx(withBaseName(), {\n        [withBaseName(\"closeable\")]: closeable,\n        [withBaseName(\"closeHover\")]: closeHover,\n        [withBaseName(\"dragAway\")]: dragging,\n        [withBaseName(\"editing\")]: editing,\n        [withBaseName(\"vertical\")]: orientation === \"vertical\",\n        [`saltFocusVisible`]: focusVisible,\n      })}\n      data-editable={editable || undefined}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDownMain}\n      onKeyUp={handleKeyUp}\n      onMouseDown={handleMouseDown}\n      ref={setForkRef}\n      role=\"tab\"\n      tabIndex={tabIndex}\n    >\n      <div className={withBaseName(\"main\")}>\n        <span\n          className={withBaseName(\"text\")}\n          // data-text is important, it determines the width of the tab. A pseudo\n          // element assigns data-text as content. This is styled as selected tab\n          // text. That means width of tab always corresponds to its selected state,\n          // so tabs do not change size when selected (ie when the text is bolded).\n          // Do not include if we have editable content, EditableLabel will determine\n          // the width\n          data-text={editable ? undefined : label}\n        >\n          {children ?? getLabel()}\n        </span>\n      </div>\n      {closeable ? (\n        <CloseTabButton\n          onClick={handleCloseButtonClick}\n          onMouseEnter={handleCloseButtonEnter}\n          onMouseLeave={handleCloseButtonLeave}\n        />\n      ) : null}\n    </div>\n  );\n});\n"],"names":["Tab","tabCss","editable"],"mappings":"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"}
+{"version":3,"file":"Tab.js","sources":["../src/tabs/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { Button, ButtonProps, makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  FocusEvent,\n  ForwardedRef,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\nimport { TabProps } from \"./TabsTypes\";\n\nimport tabCss from \"./Tab.css\";\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(\"saltTab\");\n\nconst CloseTabButton = (props: ButtonProps) => (\n  // FIXME: use polymorphic button\n  <Button\n    {...props}\n    aria-label=\"Close Tab (Delete or Backspace)\"\n    className={withBaseName(\"closeButton\")}\n    tabIndex={undefined}\n    title=\"Close Tab (Delete or Backspace)\"\n    variant=\"secondary\"\n  >\n    <CloseIcon\n      aria-label=\"Close Tab (Delete or Backspace)\"\n      className={withBaseName(\"close-icon\")}\n    />\n  </Button>\n);\n\nexport const Tab = forwardRef(function Tab(\n  {\n    ariaControls,\n    children,\n    className,\n    closeable,\n    dragging,\n    editable,\n    editing,\n    focusVisible,\n    index,\n    label,\n    onClick,\n    onClose,\n    onEnterEditMode = noop,\n    onExitEditMode = noop,\n    onFocus: onFocusProp,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    orientation,\n    selected,\n    tabChildIndex = 0,\n    tabIndex,\n    ...props\n  }: TabProps,\n  ref: ForwardedRef<HTMLDivElement>\n): ReactElement<TabProps> {\n  if (index === undefined || onClick === undefined || onKeyDown === undefined) {\n    throw Error(\n      \"index, onClick, onKeyUp, onKeyDown are required props, they would nornally be injected by Tabstrip, are you creating a Tab outside of a Tabstrip\"\n    );\n  }\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab\",\n    css: tabCss,\n    window: targetWindow,\n  });\n\n  const root = useRef<HTMLDivElement>(null);\n  const editableRef = useRef<HTMLDivElement>(null);\n  const setForkRef = useForkRef(ref, root);\n  const [closeHover, setCloseHover] = useState(false);\n  const handleClick = useCallback(\n    (e: MouseEvent) => {\n      if (!editing) {\n        e.preventDefault();\n        onClick(e, index);\n      }\n    },\n    [editing, index, onClick]\n  );\n  const handleKeyDownMain = (e: KeyboardEvent<HTMLElement>) => {\n    onKeyDown(e);\n  };\n\n  const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n    originalValue = \"\",\n    editedValue = \"\",\n    allowDeactivation = true\n  ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n  const handleKeyUp = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case \"Backspace\":\n      case \"Delete\":\n        if (closeable && !editing) {\n          e.stopPropagation();\n          onClose && onClose(index);\n        }\n        break;\n      default:\n        onKeyUp && onKeyUp(e, index);\n    }\n  };\n\n  const handleCloseButtonClick = (e: MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    onClose && onClose(index);\n  };\n\n  const handleCloseButtonEnter = () => {\n    setCloseHover(true);\n  };\n\n  const handleCloseButtonLeave = () => {\n    setCloseHover(false);\n  };\n\n  const handleMouseDown = (e: MouseEvent<HTMLElement>): void => {\n    onMouseDown?.(e);\n  };\n\n  const getLabel = () => {\n    if (editable) {\n      return (\n        <EditableLabel\n          editing={editing}\n          defaultValue={label}\n          // Create a fresh instance after each edit, so it can be uncontrolled ...\n          key={label}\n          onEnterEditMode={onEnterEditMode}\n          onExitEditMode={handleOnExitEditMode}\n          ref={editableRef}\n        />\n      );\n    } else {\n      return label;\n    }\n  };\n\n  const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n    if (editableRef.current) {\n      const editable = editableRef.current as HTMLElement;\n      const input = editable.querySelector(\n        \".saltEditableLabel-input\"\n      ) as HTMLInputElement;\n      input?.focus();\n    }\n    onFocusProp?.(evt);\n  };\n\n  return (\n    <div\n      {...props}\n      aria-controls={ariaControls}\n      aria-selected={selected}\n      className={clsx(withBaseName(), {\n        [withBaseName(\"closeable\")]: closeable,\n        [withBaseName(\"closeHover\")]: closeHover,\n        [withBaseName(\"dragAway\")]: dragging,\n        [withBaseName(\"editing\")]: editing,\n        [withBaseName(\"vertical\")]: orientation === \"vertical\",\n        [`saltFocusVisible`]: focusVisible,\n      })}\n      data-editable={editable || undefined}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDownMain}\n      onKeyUp={handleKeyUp}\n      onMouseDown={handleMouseDown}\n      ref={setForkRef}\n      role=\"tab\"\n      tabIndex={tabIndex}\n    >\n      <div className={withBaseName(\"main\")}>\n        <span\n          className={withBaseName(\"text\")}\n          // data-text is important, it determines the width of the tab. A pseudo\n          // element assigns data-text as content. This is styled as selected tab\n          // text. That means width of tab always corresponds to its selected state,\n          // so tabs do not change size when selected (ie when the text is bolded).\n          // Do not include if we have editable content, EditableLabel will determine\n          // the width\n          data-text={editable ? undefined : label}\n        >\n          {children ?? getLabel()}\n        </span>\n      </div>\n      {closeable ? (\n        <CloseTabButton\n          onClick={handleCloseButtonClick}\n          onMouseEnter={handleCloseButtonEnter}\n          onMouseLeave={handleCloseButtonLeave}\n        />\n      ) : null}\n    </div>\n  );\n});\n"],"names":["Tab","tabCss","editable"],"mappings":"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"}

package/dist-es/tabs-next/TabNextContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabNextContext.js","sources":["../src/tabs-next/TabNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { ReactNode, SyntheticEvent, useContext } from \"react\";\n\ntype TabValue = {\n  value: string;\n  label: ReactNode;\n};\n\nexport interface TabsContextValue {\n  activeColor: \"primary\" | \"secondary\";\n  disabled?: boolean;\n  activate: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  isActive: (id: string) => boolean;\n  setFocusable: (id: string) => void;\n  isFocusable: (id: string) => boolean;\n  registerTab: (tab: TabValue) => void;\n  unregisterTab: (id: string) => void;\n  variant: \"main\" | \"inline\";\n}\n\nexport const TabsContext = createContext<TabsContextValue>(\"TabsContext\", {\n  activeColor: \"primary\",\n  disabled: false,\n  activate: () => undefined,\n  isActive: () => false,\n  setFocusable: () => undefined,\n  isFocusable: () => false,\n  registerTab: () => undefined,\n  unregisterTab: () => undefined,\n  variant: \"main\",\n});\n\nexport function useTabs() {\n  return useContext(TabsContext);\n}\n"],"names":[],"mappings":";;;AAoBa,MAAA,WAAA,GAAc,cAAgC,aAAe,EAAA;AAAA,EACxE,WAAa,EAAA,SAAA;AAAA,EACb,QAAU,EAAA,KAAA;AAAA,EACV,UAAU,MAAM,KAAA,CAAA;AAAA,EAChB,UAAU,MAAM,KAAA;AAAA,EAChB,cAAc,MAAM,KAAA,CAAA;AAAA,EACpB,aAAa,MAAM,KAAA;AAAA,EACnB,aAAa,MAAM,KAAA,CAAA;AAAA,EACnB,eAAe,MAAM,KAAA,CAAA;AAAA,EACrB,OAAS,EAAA,MAAA;AACX,CAAC,EAAA;AAEM,SAAS,OAAU,GAAA;AACxB,EAAA,OAAO,WAAW,WAAW,CAAA,CAAA;AAC/B;;;;"}
+{"version":3,"file":"TabNextContext.js","sources":["../src/tabs-next/TabNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { ReactNode, SyntheticEvent, useContext } from \"react\";\n\ninterface TabValue {\n  value: string;\n  label: ReactNode;\n}\n\nexport interface TabsContextValue {\n  activeColor: \"primary\" | \"secondary\";\n  disabled?: boolean;\n  activate: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  isActive: (id: string) => boolean;\n  setFocusable: (id: string) => void;\n  isFocusable: (id: string) => boolean;\n  registerTab: (tab: TabValue) => void;\n  unregisterTab: (id: string) => void;\n  variant: \"main\" | \"inline\";\n}\n\nexport const TabsContext = createContext<TabsContextValue>(\"TabsContext\", {\n  activeColor: \"primary\",\n  disabled: false,\n  activate: () => undefined,\n  isActive: () => false,\n  setFocusable: () => undefined,\n  isFocusable: () => false,\n  registerTab: () => undefined,\n  unregisterTab: () => undefined,\n  variant: \"main\",\n});\n\nexport function useTabs() {\n  return useContext(TabsContext);\n}\n"],"names":[],"mappings":";;;AAoBa,MAAA,WAAA,GAAc,cAAgC,aAAe,EAAA;AAAA,EACxE,WAAa,EAAA,SAAA;AAAA,EACb,QAAU,EAAA,KAAA;AAAA,EACV,UAAU,MAAM,KAAA,CAAA;AAAA,EAChB,UAAU,MAAM,KAAA;AAAA,EAChB,cAAc,MAAM,KAAA,CAAA;AAAA,EACpB,aAAa,MAAM,KAAA;AAAA,EACnB,aAAa,MAAM,KAAA,CAAA;AAAA,EACnB,eAAe,MAAM,KAAA,CAAA;AAAA,EACrB,OAAS,EAAA,MAAA;AACX,CAAC,EAAA;AAEM,SAAS,OAAU,GAAA;AACxB,EAAA,OAAO,WAAW,WAAW,CAAA,CAAA;AAC/B;;;;"}

package/dist-es/tabs-next/TabstripNext.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: var(--tabstripNext-justifyContent);\n  align-items: center;\n  position: relative;\n  background: transparent;\n  width: 100%;\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltTabstripNext-main {\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  box-sizing: border-box;\n}\n\n.saltTabstripNext-main::before {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: var(--salt-size-border);\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n  padding-right: var(--salt-spacing-100);\n  box-sizing: border-box;\n}\n";
+var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: var(--tabstripNext-justifyContent);\n  align-items: center;\n  position: relative;\n  background: transparent;\n  width: 100%;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n.saltTabstripNext-container {\n  display: inherit;\n  width: 100%;\n  position: relative;\n}\n\n.saltTabstripNext-main {\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  box-sizing: border-box;\n}\n\n.saltTabstripNext-main::before {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: var(--salt-size-border);\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n  padding-right: var(--salt-spacing-100);\n  box-sizing: border-box;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=TabstripNext.css.js.map

package/dist-es/tabs-next/TabstripNext.js

@@ -152,27 +152,29 @@ const TabstripNext = forwardRef(
     };
     return /* @__PURE__ */ jsx(TabsContext.Provider, {
       value: contextValue,
-      children: /* @__PURE__ */ jsx(Overflow, {
-        ref: handleRef,
-        children: /* @__PURE__ */ jsxs("div", {
-          role: "tablist",
-          className: clsx(
-            withBaseName(),
-            withBaseName("horizontal"),
-            withBaseName(variant),
-            className
-          ),
-          onKeyDown: handleKeyDown,
-          style: tabstripStyle,
-          ...rest,
-          children: [
-            children,
-            /* @__PURE__ */ jsx(OverflowMenu, {
-              tabs: tabList,
-              onOpenChange: handleOverflowOpenChange,
-              onSelectionChange: handleOverflowItemClick
-            })
-          ]
+      children: /* @__PURE__ */ jsx("div", {
+        className: clsx(withBaseName("container"), withBaseName(variant)),
+        children: /* @__PURE__ */ jsx(Overflow, {
+          ref: handleRef,
+          children: /* @__PURE__ */ jsxs("div", {
+            role: "tablist",
+            className: clsx(
+              withBaseName(),
+              withBaseName("horizontal"),
+              className
+            ),
+            onKeyDown: handleKeyDown,
+            style: tabstripStyle,
+            ...rest,
+            children: [
+              children,
+              /* @__PURE__ */ jsx(OverflowMenu, {
+                tabs: tabList,
+                onOpenChange: handleOverflowOpenChange,
+                onSelectionChange: handleOverflowItemClick
+              })
+            ]
+          })
         })
       })
     });

package/dist-es/tabs-next/TabstripNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabstripNext.js","sources":["../src/tabs-next/TabstripNext.tsx"],"sourcesContent":["import { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport clsx from \"clsx\";\nimport {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  SyntheticEvent,\n  KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Overflow } from \"@fluentui/react-overflow\";\nimport { OverflowMenu } from \"./OverflowMenu\";\nimport tabstripCss from \"./TabstripNext.css\";\nimport { TabsContext } from \"./TabNextContext\";\nimport { SelectionChangeHandler } from \"../common-hooks\";\n\nconst withBaseName = makePrefixer(\"saltTabstripNext\");\n\nexport interface TabstripNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /* Styling active color variant. Defaults to \"primary\". */\n  activeColor?: \"primary\" | \"secondary\";\n  /* Tabs alignment. Defaults to \"left\" */\n  align?: \"left\" | \"center\" | \"right\";\n  /* Value for the uncontrolled version. */\n  value?: string;\n  /* Callback for the controlled version. */\n  onChange?: (e: SyntheticEvent, data: { value: string }) => void;\n  /* Initial value for the uncontrolled version. */\n  defaultValue?: string;\n  /* The Tabs variant */\n  variant?: \"main\" | \"inline\";\n}\n\ninterface TabValue {\n  value: string;\n  label: ReactNode;\n}\n\nexport const TabstripNext = forwardRef<HTMLDivElement, TabstripNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      activeColor = \"primary\",\n      align = \"left\",\n      children,\n      className,\n      value: valueProp,\n      defaultValue,\n      onChange,\n      onKeyDown,\n      style,\n      variant = \"main\",\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tabstrip-next\",\n      css: tabstripCss,\n      window: targetWindow,\n    });\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n\n    const [value, setValue] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"TabstripNext\",\n      state: \"selected\",\n    });\n    const [focusable, setFocusableState] = useState<string | undefined>(value);\n    const [overflowOpen, setOverflowOpen] = useState(false);\n\n    const activate = useCallback(\n      (event: SyntheticEvent<HTMLButtonElement>) => {\n        const newValue = event.currentTarget.value;\n        setValue(newValue);\n        if (value !== newValue) {\n          onChange?.(event, { value: newValue });\n        }\n      },\n      [onChange, value, setValue]\n    );\n\n    const isActive = useCallback(\n      (id: string | undefined) => {\n        return value === id;\n      },\n      [value]\n    );\n\n    const setFocusable = useCallback((id: string | undefined) => {\n      setFocusableState(id);\n    }, []);\n\n    const isFocusable = useCallback(\n      (id: string | undefined) => {\n        return focusable === id || !focusable;\n      },\n      [focusable]\n    );\n\n    const [tabList, setTabList] = useState<TabValue[]>([]);\n    const registerTab = useCallback((tab: TabValue) => {\n      setTabList((list) => list.concat([tab]));\n    }, []);\n\n    const unregisterTab = useCallback((id: string) => {\n      setTabList((list) => list.filter((item) => item.value !== id));\n    }, []);\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (overflowOpen) return;\n\n      const elements: HTMLElement[] = Array.from(\n        tabstripRef.current?.querySelectorAll(\n          `div:not([data-overflowing]) > [role=\"tab\"]:not([disabled])`\n        ) ?? []\n      );\n\n      const currentIndex = elements.findIndex(\n        (element) => element === targetWindow?.document.activeElement\n      );\n\n      if (currentIndex < 0) return;\n\n      switch (event.key) {\n        case \"ArrowDown\":\n        case \"ArrowRight\":\n          elements[Math.min(currentIndex + 1, elements.length)]?.focus();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowLeft\":\n          elements[Math.max(0, currentIndex - 1)]?.focus();\n          break;\n        case \"Home\":\n          elements[0]?.focus();\n          break;\n        case \"End\":\n          elements[elements.length - 1]?.focus();\n      }\n\n      onKeyDown?.(event);\n    };\n\n    const handleOverflowItemClick: SelectionChangeHandler<TabValue> = (\n      event,\n      item\n    ) => {\n      if (item) {\n        setValue(item.value);\n        requestAnimationFrame(() => {\n          const element = tabstripRef.current?.querySelector(\n            `[value=\"${item.value}\"]`\n          );\n          if (element instanceof HTMLElement) {\n            element?.focus();\n          }\n        });\n        if (value !== item.value) {\n          onChange?.(event, { value: item.value });\n        }\n      }\n    };\n\n    const handleOverflowOpenChange = (isOpen: boolean) => {\n      setOverflowOpen(isOpen);\n    };\n\n    const contextValue = useMemo(\n      () => ({\n        activate,\n        isActive,\n        setFocusable,\n        isFocusable,\n        registerTab,\n        unregisterTab,\n        variant,\n        activeColor,\n      }),\n      [\n        activate,\n        isActive,\n        setFocusable,\n        isFocusable,\n        registerTab,\n        unregisterTab,\n        variant,\n        activeColor,\n      ]\n    );\n\n    const tabstripStyle = {\n      \"--tabstripNext-justifyContent\": align,\n      ...style,\n    };\n\n    return (\n      <TabsContext.Provider value={contextValue}>\n        <Overflow ref={handleRef}>\n          <div\n            role=\"tablist\"\n            className={clsx(\n              withBaseName(),\n              withBaseName(\"horizontal\"),\n              withBaseName(variant),\n              className\n            )}\n            onKeyDown={handleKeyDown}\n            style={tabstripStyle}\n            {...rest}\n          >\n            {children}\n            <OverflowMenu\n              tabs={tabList}\n              onOpenChange={handleOverflowOpenChange}\n              onSelectionChange={handleOverflowItemClick}\n            />\n          </div>\n        </Overflow>\n      </TabsContext.Provider>\n    );\n  }\n);\n"],"names":["TabstripNext","tabstripCss"],"mappings":"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"}
+{"version":3,"file":"TabstripNext.js","sources":["../src/tabs-next/TabstripNext.tsx"],"sourcesContent":["import { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport clsx from \"clsx\";\nimport {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  SyntheticEvent,\n  KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Overflow } from \"@fluentui/react-overflow\";\nimport { OverflowMenu } from \"./OverflowMenu\";\nimport tabstripCss from \"./TabstripNext.css\";\nimport { TabsContext } from \"./TabNextContext\";\nimport { SelectionChangeHandler } from \"../common-hooks\";\n\nconst withBaseName = makePrefixer(\"saltTabstripNext\");\n\nexport interface TabstripNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /* Styling active color variant. Defaults to \"primary\". */\n  activeColor?: \"primary\" | \"secondary\";\n  /* Tabs alignment. Defaults to \"left\" */\n  align?: \"left\" | \"center\" | \"right\";\n  /* Value for the uncontrolled version. */\n  value?: string;\n  /* Callback for the controlled version. */\n  onChange?: (e: SyntheticEvent, data: { value: string }) => void;\n  /* Initial value for the uncontrolled version. */\n  defaultValue?: string;\n  /* The Tabs variant */\n  variant?: \"main\" | \"inline\";\n}\n\ninterface TabValue {\n  value: string;\n  label: ReactNode;\n}\n\nexport const TabstripNext = forwardRef<HTMLDivElement, TabstripNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      activeColor = \"primary\",\n      align = \"left\",\n      children,\n      className,\n      value: valueProp,\n      defaultValue,\n      onChange,\n      onKeyDown,\n      style,\n      variant = \"main\",\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tabstrip-next\",\n      css: tabstripCss,\n      window: targetWindow,\n    });\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n\n    const [value, setValue] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"TabstripNext\",\n      state: \"selected\",\n    });\n    const [focusable, setFocusableState] = useState<string | undefined>(value);\n    const [overflowOpen, setOverflowOpen] = useState(false);\n\n    const activate = useCallback(\n      (event: SyntheticEvent<HTMLButtonElement>) => {\n        const newValue = event.currentTarget.value;\n        setValue(newValue);\n        if (value !== newValue) {\n          onChange?.(event, { value: newValue });\n        }\n      },\n      [onChange, value, setValue]\n    );\n\n    const isActive = useCallback(\n      (id: string | undefined) => {\n        return value === id;\n      },\n      [value]\n    );\n\n    const setFocusable = useCallback((id: string | undefined) => {\n      setFocusableState(id);\n    }, []);\n\n    const isFocusable = useCallback(\n      (id: string | undefined) => {\n        return focusable === id || !focusable;\n      },\n      [focusable]\n    );\n\n    const [tabList, setTabList] = useState<TabValue[]>([]);\n    const registerTab = useCallback((tab: TabValue) => {\n      setTabList((list) => list.concat([tab]));\n    }, []);\n\n    const unregisterTab = useCallback((id: string) => {\n      setTabList((list) => list.filter((item) => item.value !== id));\n    }, []);\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (overflowOpen) return;\n\n      const elements: HTMLElement[] = Array.from(\n        tabstripRef.current?.querySelectorAll(\n          `div:not([data-overflowing]) > [role=\"tab\"]:not([disabled])`\n        ) ?? []\n      );\n\n      const currentIndex = elements.findIndex(\n        (element) => element === targetWindow?.document.activeElement\n      );\n\n      if (currentIndex < 0) return;\n\n      switch (event.key) {\n        case \"ArrowDown\":\n        case \"ArrowRight\":\n          elements[Math.min(currentIndex + 1, elements.length)]?.focus();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowLeft\":\n          elements[Math.max(0, currentIndex - 1)]?.focus();\n          break;\n        case \"Home\":\n          elements[0]?.focus();\n          break;\n        case \"End\":\n          elements[elements.length - 1]?.focus();\n      }\n\n      onKeyDown?.(event);\n    };\n\n    const handleOverflowItemClick: SelectionChangeHandler<TabValue> = (\n      event,\n      item\n    ) => {\n      if (item) {\n        setValue(item.value);\n        requestAnimationFrame(() => {\n          const element = tabstripRef.current?.querySelector(\n            `[value=\"${item.value}\"]`\n          );\n          if (element instanceof HTMLElement) {\n            element?.focus();\n          }\n        });\n        if (value !== item.value) {\n          onChange?.(event, { value: item.value });\n        }\n      }\n    };\n\n    const handleOverflowOpenChange = (isOpen: boolean) => {\n      setOverflowOpen(isOpen);\n    };\n\n    const contextValue = useMemo(\n      () => ({\n        activate,\n        isActive,\n        setFocusable,\n        isFocusable,\n        registerTab,\n        unregisterTab,\n        variant,\n        activeColor,\n      }),\n      [\n        activate,\n        isActive,\n        setFocusable,\n        isFocusable,\n        registerTab,\n        unregisterTab,\n        variant,\n        activeColor,\n      ]\n    );\n\n    const tabstripStyle = {\n      \"--tabstripNext-justifyContent\": align,\n      ...style,\n    };\n\n    return (\n      <TabsContext.Provider value={contextValue}>\n        <div className={clsx(withBaseName(\"container\"), withBaseName(variant))}>\n          <Overflow ref={handleRef}>\n            <div\n              role=\"tablist\"\n              className={clsx(\n                withBaseName(),\n                withBaseName(\"horizontal\"),\n                className\n              )}\n              onKeyDown={handleKeyDown}\n              style={tabstripStyle}\n              {...rest}\n            >\n              {children}\n              <OverflowMenu\n                tabs={tabList}\n                onOpenChange={handleOverflowOpenChange}\n                onSelectionChange={handleOverflowItemClick}\n              />\n            </div>\n          </Overflow>\n        </div>\n      </TabsContext.Provider>\n    );\n  }\n);\n"],"names":["TabstripNext","tabstripCss"],"mappings":"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"}

package/dist-types/index.d.ts

@@ -15,7 +15,6 @@ export * from "./contact-details";
 export * from "./content-status";
 export * from "./deck-item";
 export * from "./deck-layout";
-export * from "./dialog";
 export * from "./dropdown";
 export * from "./dropdown-next";
 export * from "./editable-label";

package/dist-types/tabs/drag-drop/drag-utils.d.ts

@@ -20,24 +20,24 @@ export declare type targetType = {
 declare type Dimension = keyof Pick<DOMRect, "width" | "height">;
 export declare const measureElementSizeAndPosition: (element: HTMLElement, dimension?: Dimension, includeAutoMargin?: boolean) => number[];
 export declare const dimensions: (orientation: orientationType) => {
-    CLIENT_SIZE: "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollTop" | "scrollLeft";
+    CLIENT_SIZE: "scrollTop" | "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollLeft";
     CONTRA: "x" | "y" | "height" | "width" | "left" | "right" | "top" | "bottom";
     CONTRA_POS: "clientX" | "clientY";
     DIMENSION: "height" | "width";
     END: "x" | "y" | "height" | "width" | "left" | "right" | "top" | "bottom";
     POS: "clientX" | "clientY";
-    SCROLL_POS: "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollTop" | "scrollLeft";
-    SCROLL_SIZE: "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollTop" | "scrollLeft";
+    SCROLL_POS: "scrollTop" | "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollLeft";
+    SCROLL_SIZE: "scrollTop" | "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollLeft";
     START: "x" | "y" | "height" | "width" | "left" | "right" | "top" | "bottom";
 } | {
-    CLIENT_SIZE: "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollTop" | "scrollLeft";
+    CLIENT_SIZE: "scrollTop" | "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollLeft";
     CONTRA: "x" | "y" | "height" | "width" | "left" | "right" | "top" | "bottom";
     CONTRA_POS: "clientX" | "clientY";
     DIMENSION: "height" | "width";
     END: "x" | "y" | "height" | "width" | "left" | "right" | "top" | "bottom";
     POS: "clientX" | "clientY";
-    SCROLL_POS: "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollTop" | "scrollLeft";
-    SCROLL_SIZE: "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollTop" | "scrollLeft";
+    SCROLL_POS: "scrollTop" | "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollLeft";
+    SCROLL_SIZE: "scrollTop" | "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollLeft";
     START: "x" | "y" | "height" | "width" | "left" | "right" | "top" | "bottom";
 };
 export declare const getDraggedItem: (measuredItems: MeasuredDropTarget[]) => MeasuredDropTarget;

package/dist-types/tabs-next/TabNextContext.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode, SyntheticEvent } from "react";
-declare type TabValue = {
+interface TabValue {
     value: string;
     label: ReactNode;
-};
+}
 export interface TabsContextValue {
     activeColor: "primary" | "secondary";
     disabled?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/lab",
-  "version": "1.0.0-alpha.34",
+  "version": "1.0.0-alpha.35",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "react-window": "^1.8.6",
     "rifm": "^0.12.0",
     "tinycolor2": "^1.4.2",
-    "@salt-ds/core": "^1.19.0",
+    "@salt-ds/core": "^1.20.0",
     "@salt-ds/window": "^0.1.1",
     "@salt-ds/styles": "^0.2.1",
     "@salt-ds/icons": "^1.9.1"

package/dist-cjs/dialog/Dialog.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = "/* Styles applied to Dialog component */\n.saltDialog {\n  position: fixed;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  margin: auto;\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--salt-spacing-300);\n  padding-bottom: var(--salt-spacing-300);\n  background: var(--salt-container-primary-background);\n  box-shadow: var(--salt-overlayable-shadow-modal);\n  overflow-y: auto;\n  z-index: var(--salt-zIndex-drawer);\n  height: min-content;\n  border: var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor) var(--salt-size-border);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n/* Styles applied to Dialog when a status=\"info\" */\n.saltDialog-info {\n  border-color: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"error\" */\n.saltDialog-error {\n  border-color: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"warning\" */\n.saltDialog-warning {\n  border-color: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"success\" */\n.saltDialog-success {\n  border-color: var(--salt-status-success-borderColor);\n}\n\n/* Styles applied when the component mounts */\n.saltDialog.saltDialog-enterAnimation {\n  animation: var(--salt-animation-fade-in-center);\n}\n\n/* Styles applied when the component unmounts */\n.saltDialog.saltDialog-exitAnimation {\n  animation: var(--salt-animation-fade-out-back);\n}\n\n/* Pending design decision on heights and widths  */\n.saltDialog-small-xs {\n  width: 100%;\n  max-height: 48%;\n}\n\n.saltDialog-small-sm {\n  width: 56%;\n  max-height: 48%;\n}\n\n.saltDialog-small-md {\n  width: 36%;\n  max-height: 48%;\n}\n\n.saltDialog-small-lg {\n  width: 24%;\n  max-height: 48%;\n}\n\n.saltDialog-small-xl {\n  width: 24%;\n  max-height: 48%;\n}\n\n.saltDialog-medium-xs {\n  width: 100%;\n  max-height: 72%;\n}\n\n.saltDialog-medium-sm {\n  width: 84%;\n  max-height: 72%;\n}\n\n.saltDialog-medium-md {\n  width: 68%;\n  max-height: 72%;\n}\n\n.saltDialog-medium-lg {\n  width: 48%;\n  max-height: 72%;\n}\n\n.saltDialog-medium-xl {\n  width: 48%;\n  max-height: 72%;\n}\n\n.saltDialog-large-xs {\n  width: 100%;\n  max-height: 84%;\n}\n\n.saltDialog-large-sm {\n  width: 96%;\n  max-height: 84%;\n}\n\n.saltDialog-large-md {\n  width: 84%;\n  max-height: 84%;\n}\n\n.saltDialog-large-lg {\n  width: 72%;\n  max-height: 84%;\n}\n\n.saltDialog-large-xl {\n  width: 72%;\n  max-height: 84%;\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=Dialog.css.js.map

package/dist-cjs/dialog/Dialog.css.js.map

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