@salt-ds/lab 1.0.0-alpha.39 → 1.0.0-alpha.40

package/dist-es/menu/MenuPanelBase.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './MenuPanel.css.js';
+
+const MenuPanelBase = forwardRef(
+  function MenuPanelBase2(props, ref) {
+    const { children, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-menu-panel",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx("div", {
+      ref,
+      ...rest,
+      children
+    });
+  }
+);
+
+export { MenuPanelBase };
+//# sourceMappingURL=MenuPanelBase.js.map

package/dist-es/menu/MenuPanelBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPanelBase.js","sources":["../src/menu/MenuPanelBase.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport menuPanelCss from \"./MenuPanel.css\";\n\nexport interface MenuPanelBaseProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nexport const MenuPanelBase = forwardRef<HTMLDivElement, MenuPanelBaseProps>(\n  function MenuPanelBase(props, ref) {\n    const { children, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-menu-panel\",\n      css: menuPanelCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div ref={ref} {...rest}>\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["MenuPanelBase","menuPanelCss"],"mappings":";;;;;;AAOO,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAM,MAAA,EAAE,QAAa,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE9B,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,MAChB,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/menu/MenuPanelContext.js

@@ -0,0 +1,17 @@
+import { createContext } from '@salt-ds/core';
+import { useContext } from 'react';
+
+const MenuPanelContext = createContext(
+  "MenuPanelContext",
+  {
+    activeIndex: null,
+    getItemProps: () => ({}),
+    setFocusInside: () => void 0
+  }
+);
+function useMenuPanelContext() {
+  return useContext(MenuPanelContext);
+}
+
+export { MenuPanelContext, useMenuPanelContext };
+//# sourceMappingURL=MenuPanelContext.js.map

package/dist-es/menu/MenuPanelContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPanelContext.js","sources":["../src/menu/MenuPanelContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\nimport { MenuContextValue } from \"./MenuContext\";\n\nexport interface MenuPanelContextValue\n  extends Pick<\n    MenuContextValue,\n    \"getItemProps\" | \"activeIndex\" | \"setFocusInside\"\n  > {}\n\nexport const MenuPanelContext = createContext<MenuPanelContextValue>(\n  \"MenuPanelContext\",\n  {\n    activeIndex: null,\n    getItemProps: () => ({}),\n    setFocusInside: () => undefined,\n  }\n);\n\nexport function useMenuPanelContext() {\n  return useContext(MenuPanelContext);\n}\n"],"names":[],"mappings":";;;AAUO,MAAM,gBAAmB,GAAA,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,WAAa,EAAA,IAAA;AAAA,IACb,YAAA,EAAc,OAAO,EAAC,CAAA;AAAA,IACtB,gBAAgB,MAAM,KAAA,CAAA;AAAA,GACxB;AACF,EAAA;AAEO,SAAS,mBAAsB,GAAA;AACpC,EAAA,OAAO,WAAW,gBAAgB,CAAA,CAAA;AACpC;;;;"}

package/dist-es/menu/MenuTrigger.js

@@ -0,0 +1,39 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { isValidElement, cloneElement } from 'react';
+import { useForkRef, mergeProps } from '@salt-ds/core';
+import { useMenuContext } from './MenuContext.js';
+import { MenuTriggerContext } from './MenuTriggerContext.js';
+import { useMenuPanelContext } from './MenuPanelContext.js';
+
+function MenuTrigger(props) {
+  const { children } = props;
+  const { getReferenceProps, refs, setFocusInside, focusInside, openState } = useMenuContext();
+  const { setFocusInside: setFocusInsideParent } = useMenuPanelContext();
+  const handleRef = useForkRef(
+    isValidElement(children) ? children.ref : null,
+    refs == null ? void 0 : refs.setReference
+  );
+  if (!children || !isValidElement(children)) {
+    return /* @__PURE__ */ jsx(Fragment, {
+      children
+    });
+  }
+  return /* @__PURE__ */ jsx(MenuTriggerContext.Provider, {
+    value: { triggersSubmenu: true, blurActive: focusInside && openState },
+    children: cloneElement(children, {
+      ...mergeProps(
+        getReferenceProps({
+          onFocus() {
+            setFocusInsideParent(true);
+            setFocusInside(false);
+          }
+        }),
+        children.props
+      ),
+      ref: handleRef
+    })
+  });
+}
+
+export { MenuTrigger };
+//# sourceMappingURL=MenuTrigger.js.map

package/dist-es/menu/MenuTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTrigger.js","sources":["../src/menu/MenuTrigger.tsx"],"sourcesContent":["import { cloneElement, isValidElement, ReactNode } from \"react\";\nimport { mergeProps, useForkRef } from \"@salt-ds/core\";\nimport { useMenuContext } from \"./MenuContext\";\nimport { MenuTriggerContext } from \"./MenuTriggerContext\";\nimport { useMenuPanelContext } from \"./MenuPanelContext\";\n\nexport interface MenuTriggerProps {\n  /**\n   * The trigger element for the menu. This should be a single child element and accept a ref.\n   */\n  children?: ReactNode;\n}\n\nexport function MenuTrigger(props: MenuTriggerProps) {\n  const { children } = props;\n\n  const { getReferenceProps, refs, setFocusInside, focusInside, openState } =\n    useMenuContext();\n  const { setFocusInside: setFocusInsideParent } = useMenuPanelContext();\n\n  const handleRef = useForkRef(\n    // @ts-expect-error error TS2339 missing property ref\n    isValidElement(children) ? children.ref : null,\n    refs?.setReference\n  );\n\n  if (!children || !isValidElement(children)) {\n    // Should we log or throw error?\n    return <>{children}</>;\n  }\n\n  return (\n    <MenuTriggerContext.Provider\n      value={{ triggersSubmenu: true, blurActive: focusInside && openState }}\n    >\n      {cloneElement(children, {\n        ...mergeProps(\n          getReferenceProps({\n            onFocus() {\n              setFocusInsideParent(true);\n              setFocusInside(false);\n            },\n          }),\n          children.props\n        ),\n        ref: handleRef,\n      })}\n    </MenuTriggerContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAaO,SAAS,YAAY,KAAyB,EAAA;AACnD,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA,CAAA;AAErB,EAAA,MAAM,EAAE,iBAAmB,EAAA,IAAA,EAAM,gBAAgB,WAAa,EAAA,SAAA,KAC5D,cAAe,EAAA,CAAA;AACjB,EAAA,MAAM,EAAE,cAAA,EAAgB,oBAAqB,EAAA,GAAI,mBAAoB,EAAA,CAAA;AAErE,EAAA,MAAM,SAAY,GAAA,UAAA;AAAA,IAEhB,cAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,IAC1C,IAAM,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CAAA,YAAA;AAAA,GACR,CAAA;AAEA,EAAA,IAAI,CAAC,QAAA,IAAY,CAAC,cAAA,CAAe,QAAQ,CAAG,EAAA;AAE1C,IAAO,uBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,MAAG,QAAA;AAAA,KAAS,CAAA,CAAA;AAAA,GACrB;AAEA,EACE,uBAAA,GAAA,CAAC,mBAAmB,QAAnB,EAAA;AAAA,IACC,OAAO,EAAE,eAAA,EAAiB,IAAM,EAAA,UAAA,EAAY,eAAe,SAAU,EAAA;AAAA,IAEpE,uBAAa,QAAU,EAAA;AAAA,MACtB,GAAG,UAAA;AAAA,QACD,iBAAkB,CAAA;AAAA,UAChB,OAAU,GAAA;AACR,YAAA,oBAAA,CAAqB,IAAI,CAAA,CAAA;AACzB,YAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AAAA,WACtB;AAAA,SACD,CAAA;AAAA,QACD,QAAS,CAAA,KAAA;AAAA,OACX;AAAA,MACA,GAAK,EAAA,SAAA;AAAA,KACN,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/menu/MenuTriggerContext.js

@@ -0,0 +1,13 @@
+import { createContext } from '@salt-ds/core';
+import { useContext } from 'react';
+
+const MenuTriggerContext = createContext(
+  "MenuTriggerContext",
+  { triggersSubmenu: false, blurActive: false }
+);
+function useIsMenuTrigger() {
+  return useContext(MenuTriggerContext);
+}
+
+export { MenuTriggerContext, useIsMenuTrigger };
+//# sourceMappingURL=MenuTriggerContext.js.map

package/dist-es/menu/MenuTriggerContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTriggerContext.js","sources":["../src/menu/MenuTriggerContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\n\nexport interface MenuTriggerContextValue {\n  triggersSubmenu: boolean;\n  blurActive: boolean;\n}\n\nexport const MenuTriggerContext = createContext<MenuTriggerContextValue>(\n  \"MenuTriggerContext\",\n  { triggersSubmenu: false, blurActive: false }\n);\n\nexport function useIsMenuTrigger() {\n  return useContext(MenuTriggerContext);\n}\n"],"names":[],"mappings":";;;AAQO,MAAM,kBAAqB,GAAA,aAAA;AAAA,EAChC,oBAAA;AAAA,EACA,EAAE,eAAA,EAAiB,KAAO,EAAA,UAAA,EAAY,KAAM,EAAA;AAC9C,EAAA;AAEO,SAAS,gBAAmB,GAAA;AACjC,EAAA,OAAO,WAAW,kBAAkB,CAAA,CAAA;AACtC;;;;"}

package/dist-es/parent-child-layout/ParentChildLayout.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltParentChildLayout {\n  overflow: hidden;\n}\n\n.saltParentChildLayout-parent {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n.saltParentChildLayout-child {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n.saltParentChildLayout-reversed.saltFlexLayout {\n  --flexLayout-direction: row-reverse;\n}\n\n.saltParentChildLayout-no-animations .saltParentChildLayout-parent,\n.saltParentChildLayout-no-animations .saltParentChildLayout-child {\n  animation: none;\n}\n\n@media (prefers-reduced-motion) {\n  .reduced-motion .saltParentChildLayout-parent {\n    animation: none;\n  }\n\n  .reduced-motion .saltParentChildLayout-child {\n    animation: none;\n  }\n}\n";
+var css_248z = ".saltParentChildLayout {\n  display: flex;\n  gap: var(--parentChildLayout-gap);\n}\n\n.saltParentChildLayout-child {\n  flex-grow: 1;\n}\n\n.saltParentChildLayout-collapsed {\n  width: 100%;\n}\n\n.saltParentChildLayout-childAnimation {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n.saltParentChildLayout-parentAnimation {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n@media (prefers-reduced-motion) {\n  .saltParentChildLayout-parentAnimation {\n    animation: var(--salt-animation-fade-in-center);\n  }\n\n  .saltParentChildLayout-childAnimation {\n    animation: var(--salt-animation-fade-in-center);\n  }\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ParentChildLayout.css.js.map

package/dist-es/parent-child-layout/ParentChildLayout.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { makePrefixer, FlexItem, FlexLayout } from '@salt-ds/core';
+import { makePrefixer } from '@salt-ds/core';
 import { clsx } from 'clsx';
 import { forwardRef, useEffect } from 'react';
 import { useIsViewportLargerThanBreakpoint } from '../utils/useIsViewportLargerThanBreakpoint.js';
@@ -10,14 +10,13 @@ import css_248z from './ParentChildLayout.css.js';
 const withBaseName = makePrefixer("saltParentChildLayout");
 const ParentChildLayout = forwardRef(function ParentChildLayout2({
   collapseAtBreakpoint = "sm",
-  collapsedViewElement = "parent",
-  disableAnimations = false,
-  parentPosition = "left",
+  visibleView = "child",
   parent,
   child,
-  gap = 0,
   className,
+  gap = 0,
   onCollapseChange,
+  style,
   ...rest
 }, ref) {
   const targetWindow = useWindow();
@@ -27,43 +26,33 @@ const ParentChildLayout = forwardRef(function ParentChildLayout2({
     window: targetWindow
   });
   const isCollapsed = useIsViewportLargerThanBreakpoint(collapseAtBreakpoint);
-  const collapsedViewChildren = {
-    parent: /* @__PURE__ */ jsx(FlexItem, {
-      className: clsx(withBaseName("parent"), {
-        ["saltFlexItem-stacked"]: isCollapsed
-      }),
-      children: parent
-    }),
-    child: /* @__PURE__ */ jsx(FlexItem, {
-      className: clsx(withBaseName("child"), {
-        ["saltFlexItem-stacked"]: isCollapsed
-      }),
-      children: child
-    })
-  };
   useEffect(() => {
     onCollapseChange == null ? void 0 : onCollapseChange(isCollapsed);
   }, [isCollapsed, onCollapseChange]);
-  return /* @__PURE__ */ jsx(FlexLayout, {
+  const parentChildLayoutStyles = {
+    ...style,
+    "--parentChildLayout-gap": `calc(var(--salt-spacing-100) * ${gap})`
+  };
+  return /* @__PURE__ */ jsx("div", {
     ref,
-    className: clsx(
-      withBaseName(),
-      {
-        [withBaseName(`no-animations`)]: disableAnimations,
-        [withBaseName(`reversed`)]: parentPosition === "right"
-      },
-      className
-    ),
-    gap,
+    className: clsx(withBaseName(), className),
+    style: parentChildLayoutStyles,
     ...rest,
-    children: isCollapsed ? collapsedViewChildren[collapsedViewElement] : /* @__PURE__ */ jsxs(Fragment, {
+    children: isCollapsed ? /* @__PURE__ */ jsx("div", {
+      className: clsx({
+        [withBaseName("collapsed")]: isCollapsed,
+        [withBaseName("childAnimation")]: visibleView === "child",
+        [withBaseName("parentAnimation")]: visibleView === "parent"
+      }),
+      children: isCollapsed && visibleView === "child" ? child : parent
+    }) : /* @__PURE__ */ jsxs(Fragment, {
       children: [
-        /* @__PURE__ */ jsx(FlexItem, {
-          grow: 0,
+        /* @__PURE__ */ jsx("div", {
+          className: withBaseName("parent"),
           children: parent
         }),
-        /* @__PURE__ */ jsx(FlexItem, {
-          grow: 2,
+        /* @__PURE__ */ jsx("div", {
+          className: withBaseName("child"),
           children: child
         })
       ]

package/dist-es/parent-child-layout/ParentChildLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import {\n  Breakpoints,\n  FlexLayout,\n  FlexItem,\n  FlexLayoutProps,\n  makePrefixer,\n} from \"@salt-ds/core\";\n\nimport { clsx } from \"clsx\";\nimport { forwardRef, ReactNode, useEffect } from \"react\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport parentChildLayoutCss from \"./ParentChildLayout.css\";\n\nexport type StackedViewElement = \"parent\" | \"child\";\n\nexport interface ParentChildLayoutProps extends FlexLayoutProps<\"div\"> {\n  /**\n   * Breakpoint at which the parent and child will stack.\n   */\n  collapseAtBreakpoint?: keyof Breakpoints;\n  /**\n   * Change element that is displayed when in staked view.\n   */\n  collapsedViewElement?: StackedViewElement;\n  /**\n   * Disable all animations.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Position of the parent component within the layout.\n   */\n  parentPosition?: \"left\" | \"right\";\n  /**\n   * Parent component to be rendered\n   */\n  parent: ReactNode;\n  /**\n   * Child component to be rendered\n   */\n  child: ReactNode;\n  onCollapseChange?: (isCollapsed: boolean) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nexport const ParentChildLayout = forwardRef<\n  HTMLDivElement,\n  ParentChildLayoutProps\n>(function ParentChildLayout(\n  {\n    collapseAtBreakpoint = \"sm\",\n    collapsedViewElement = \"parent\",\n    disableAnimations = false,\n    parentPosition = \"left\",\n    parent,\n    child,\n    gap = 0,\n    className,\n    onCollapseChange,\n    ...rest\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-parent-child-layout\",\n    css: parentChildLayoutCss,\n    window: targetWindow,\n  });\n\n  const isCollapsed = useIsViewportLargerThanBreakpoint(collapseAtBreakpoint);\n\n  const collapsedViewChildren = {\n    parent: (\n      <FlexItem\n        className={clsx(withBaseName(\"parent\"), {\n          [\"saltFlexItem-stacked\"]: isCollapsed,\n        })}\n      >\n        {parent}\n      </FlexItem>\n    ),\n    child: (\n      <FlexItem\n        className={clsx(withBaseName(\"child\"), {\n          [\"saltFlexItem-stacked\"]: isCollapsed,\n        })}\n      >\n        {child}\n      </FlexItem>\n    ),\n  };\n\n  useEffect(() => {\n    onCollapseChange?.(isCollapsed);\n  }, [isCollapsed, onCollapseChange]);\n\n  return (\n    <FlexLayout\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(`no-animations`)]: disableAnimations,\n          [withBaseName(`reversed`)]: parentPosition === \"right\",\n        },\n        className\n      )}\n      gap={gap}\n      {...rest}\n    >\n      {isCollapsed ? (\n        collapsedViewChildren[collapsedViewElement]\n      ) : (\n        <>\n          <FlexItem grow={0}>{parent}</FlexItem>\n          <FlexItem grow={2}>{child}</FlexItem>\n        </>\n      )}\n    </FlexLayout>\n  );\n});\n"],"names":["ParentChildLayout","parentChildLayoutCss"],"mappings":";;;;;;;;;AA+CA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA,CAAA;AAE5C,MAAA,iBAAA,GAAoB,UAG/B,CAAA,SAASA,kBACT,CAAA;AAAA,EACE,oBAAuB,GAAA,IAAA;AAAA,EACvB,oBAAuB,GAAA,QAAA;AAAA,EACvB,iBAAoB,GAAA,KAAA;AAAA,EACpB,cAAiB,GAAA,MAAA;AAAA,EACjB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAM,GAAA,CAAA;AAAA,EACN,SAAA;AAAA,EACA,gBAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,kCAAkC,oBAAoB,CAAA,CAAA;AAE1E,EAAA,MAAM,qBAAwB,GAAA;AAAA,IAC5B,wBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,QAAQ,CAAG,EAAA;AAAA,QACtC,CAAC,sBAAyB,GAAA,WAAA;AAAA,OAC3B,CAAA;AAAA,MAEA,QAAA,EAAA,MAAA;AAAA,KACH,CAAA;AAAA,IAEF,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,OAAO,CAAG,EAAA;AAAA,QACrC,CAAC,sBAAyB,GAAA,WAAA;AAAA,OAC3B,CAAA;AAAA,MAEA,QAAA,EAAA,KAAA;AAAA,KACH,CAAA;AAAA,GAEJ,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAmB,gBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAA,WAAA,CAAA,CAAA;AAAA,GAClB,EAAA,CAAC,WAAa,EAAA,gBAAgB,CAAC,CAAA,CAAA;AAElC,EAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,CAAA,aAAA,CAAe,CAAI,GAAA,iBAAA;AAAA,QACjC,CAAC,YAAA,CAAa,CAAU,QAAA,CAAA,CAAA,GAAI,cAAmB,KAAA,OAAA;AAAA,OACjD;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA,WAAA,GACC,sBAAsB,oBAEtB,CAAA,mBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,QAAA,EAAA;AAAA,UAAS,IAAM,EAAA,CAAA;AAAA,UAAI,QAAA,EAAA,MAAA;AAAA,SAAO,CAAA;AAAA,wBAC1B,GAAA,CAAA,QAAA,EAAA;AAAA,UAAS,IAAM,EAAA,CAAA;AAAA,UAAI,QAAA,EAAA,KAAA;AAAA,SAAM,CAAA;AAAA,OAAA;AAAA,KAC5B,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import { Breakpoints, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  useEffect,\n} from \"react\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport parentChildLayoutCss from \"./ParentChildLayout.css\";\nexport interface ParentChildLayoutProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Breakpoint at which the parent and child will stack.\n   */\n  collapseAtBreakpoint?: keyof Breakpoints;\n  /**\n   * View that is displayed when in a collapsed state.\n   */\n  visibleView?: \"child\" | \"parent\";\n  /**\n   * Controls the space between parent and child components, default is 0.\n   */\n  gap?: number;\n  /**\n   * Parent component to be rendered\n   */\n  parent: ReactNode;\n  /**\n   * Child component to be rendered\n   */\n  child: ReactNode;\n  /**\n   * Function called when the viewport size equal to or less than the collapseAtBreakpoint variable\n   */\n  onCollapseChange?: (isCollapsed: boolean) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nexport const ParentChildLayout = forwardRef<\n  HTMLDivElement,\n  ParentChildLayoutProps\n>(function ParentChildLayout(\n  {\n    collapseAtBreakpoint = \"sm\",\n    visibleView = \"child\",\n    parent,\n    child,\n    className,\n    gap = 0,\n    onCollapseChange,\n    style,\n    ...rest\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-parent-child-layout\",\n    css: parentChildLayoutCss,\n    window: targetWindow,\n  });\n\n  const isCollapsed = useIsViewportLargerThanBreakpoint(collapseAtBreakpoint);\n\n  useEffect(() => {\n    onCollapseChange?.(isCollapsed);\n  }, [isCollapsed, onCollapseChange]);\n\n  const parentChildLayoutStyles = {\n    ...style,\n    \"--parentChildLayout-gap\": `calc(var(--salt-spacing-100) * ${gap})`,\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(withBaseName(), className)}\n      style={parentChildLayoutStyles}\n      {...rest}\n    >\n      {isCollapsed ? (\n        <div\n          className={clsx({\n            [withBaseName(\"collapsed\")]: isCollapsed,\n            [withBaseName(\"childAnimation\")]: visibleView === \"child\",\n            [withBaseName(\"parentAnimation\")]: visibleView === \"parent\",\n          })}\n        >\n          {isCollapsed && visibleView === \"child\" ? child : parent}\n        </div>\n      ) : (\n        <>\n          <div className={withBaseName(\"parent\")}>{parent}</div>\n          <div className={withBaseName(\"child\")}>{child}</div>\n        </>\n      )}\n    </div>\n  );\n});\n"],"names":["ParentChildLayout","parentChildLayoutCss"],"mappings":";;;;;;;;;AAyCA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA,CAAA;AAE5C,MAAA,iBAAA,GAAoB,UAG/B,CAAA,SAASA,kBACT,CAAA;AAAA,EACE,oBAAuB,GAAA,IAAA;AAAA,EACvB,WAAc,GAAA,OAAA;AAAA,EACd,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAM,GAAA,CAAA;AAAA,EACN,gBAAA;AAAA,EACA,KAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,kCAAkC,oBAAoB,CAAA,CAAA;AAE1E,EAAA,SAAA,CAAU,MAAM;AACd,IAAmB,gBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAA,WAAA,CAAA,CAAA;AAAA,GAClB,EAAA,CAAC,WAAa,EAAA,gBAAgB,CAAC,CAAA,CAAA;AAElC,EAAA,MAAM,uBAA0B,GAAA;AAAA,IAC9B,GAAG,KAAA;AAAA,IACH,2BAA2B,CAAkC,+BAAA,EAAA,GAAA,CAAA,CAAA,CAAA;AAAA,GAC/D,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,KAAO,EAAA,uBAAA;AAAA,IACN,GAAG,IAAA;AAAA,IAEH,wCACE,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,WAAW,IAAK,CAAA;AAAA,QACd,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,WAAA;AAAA,QAC7B,CAAC,YAAA,CAAa,gBAAgB,CAAA,GAAI,WAAgB,KAAA,OAAA;AAAA,QAClD,CAAC,YAAA,CAAa,iBAAiB,CAAA,GAAI,WAAgB,KAAA,QAAA;AAAA,OACpD,CAAA;AAAA,MAEA,QAAA,EAAA,WAAA,IAAe,WAAgB,KAAA,OAAA,GAAU,KAAQ,GAAA,MAAA;AAAA,KACpD,CAEA,mBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,UAAI,QAAA,EAAA,MAAA;AAAA,SAAO,CAAA;AAAA,wBAC/C,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAAI,QAAA,EAAA,KAAA;AAAA,SAAM,CAAA;AAAA,OAAA;AAAA,KAChD,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -72,6 +72,7 @@ const TabNext = forwardRef(function Tab(props, ref) {
         onClick: handleClick,
         onFocus: handleFocus,
         tabIndex: focusable && !disabled ? 0 : -1,
+        type: "button",
         ...rest,
         children
       })

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

@@ -1 +1 @@
-{"version":3,"file":"TabNext.js","sources":["../src/tabs-next/TabNext.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport {\n  forwardRef,\n  ReactElement,\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  FocusEvent,\n  useEffect,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tabCss from \"./TabNext.css\";\nimport clsx from \"clsx\";\nimport { OverflowItem } from \"@fluentui/react-overflow\";\nimport { useTabs } from \"./TabNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabNext\");\n\nexport interface TabNextProps extends ComponentPropsWithoutRef<\"button\"> {\n  /* Value prop is mandatory and must be unique in order for overflow to work. */\n  value: string;\n}\n\nexport const TabNext = forwardRef<HTMLButtonElement, TabNextProps>(function Tab(\n  props,\n  ref\n): ReactElement<TabNextProps> {\n  const {\n    children,\n    className,\n    disabled: disabledProp,\n    onClick,\n    onFocus,\n    value,\n    ...rest\n  } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab-next\",\n    css: tabCss,\n    window: targetWindow,\n  });\n  const {\n    activeColor,\n    isActive,\n    activate,\n    isFocusable,\n    setFocusable,\n    disabled: tabstripDisabled,\n    unregisterTab,\n    registerTab,\n    variant,\n  } = useTabs();\n  const active = isActive(value);\n  const focusable = isFocusable(value);\n  const disabled = tabstripDisabled || disabledProp;\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    activate(event);\n    onClick?.(event);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    setFocusable(value);\n    onFocus?.(event);\n  };\n\n  useEffect(() => {\n    registerTab({ value, label: children });\n    return () => unregisterTab(value);\n  }, [children, registerTab, unregisterTab, value]);\n\n  return (\n    <OverflowItem id={value} priority={active ? 2 : 1}>\n      <div className={withBaseName(\"wrapper\")}>\n        <button\n          className={clsx(\n            withBaseName(),\n            withBaseName(variant),\n            withBaseName(activeColor),\n            className\n          )}\n          data-value={value}\n          aria-selected={active}\n          disabled={disabled}\n          value={value}\n          ref={ref}\n          role=\"tab\"\n          onClick={handleClick}\n          onFocus={handleFocus}\n          tabIndex={focusable && !disabled ? 0 : -1}\n          {...rest}\n        >\n          {children}\n        </button>\n      </div>\n    </OverflowItem>\n  );\n});\n"],"names":["tabCss"],"mappings":";;;;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAOxC,MAAM,OAAU,GAAA,UAAA,CAA4C,SAAS,GAAA,CAC1E,OACA,GAC4B,EAAA;AAC5B,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,OAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAU,EAAA,gBAAA;AAAA,IACV,aAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,MACE,OAAQ,EAAA,CAAA;AACZ,EAAM,MAAA,MAAA,GAAS,SAAS,KAAK,CAAA,CAAA;AAC7B,EAAM,MAAA,SAAA,GAAY,YAAY,KAAK,CAAA,CAAA;AACnC,EAAA,MAAM,WAAW,gBAAoB,IAAA,YAAA,CAAA;AAErC,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,QAAA,CAAS,KAAK,CAAA,CAAA;AACd,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAClB,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY,EAAE,KAAA,EAAO,KAAO,EAAA,QAAA,EAAU,CAAA,CAAA;AACtC,IAAO,OAAA,MAAM,cAAc,KAAK,CAAA,CAAA;AAAA,KAC/B,CAAC,QAAA,EAAU,WAAa,EAAA,aAAA,EAAe,KAAK,CAAC,CAAA,CAAA;AAEhD,EAAA,uBACG,GAAA,CAAA,YAAA,EAAA;AAAA,IAAa,EAAI,EAAA,KAAA;AAAA,IAAO,QAAA,EAAU,SAAS,CAAI,GAAA,CAAA;AAAA,IAC9C,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACpC,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,aAAa,OAAO,CAAA;AAAA,UACpB,aAAa,WAAW,CAAA;AAAA,UACxB,SAAA;AAAA,SACF;AAAA,QACA,YAAY,EAAA,KAAA;AAAA,QACZ,eAAe,EAAA,MAAA;AAAA,QACf,QAAA;AAAA,QACA,KAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAK,EAAA,KAAA;AAAA,QACL,OAAS,EAAA,WAAA;AAAA,QACT,OAAS,EAAA,WAAA;AAAA,QACT,QAAU,EAAA,SAAA,IAAa,CAAC,QAAA,GAAW,CAAI,GAAA,CAAA,CAAA;AAAA,QACtC,GAAG,IAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"TabNext.js","sources":["../src/tabs-next/TabNext.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport {\n  forwardRef,\n  ReactElement,\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  FocusEvent,\n  useEffect,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tabCss from \"./TabNext.css\";\nimport clsx from \"clsx\";\nimport { OverflowItem } from \"@fluentui/react-overflow\";\nimport { useTabs } from \"./TabNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabNext\");\n\nexport interface TabNextProps extends ComponentPropsWithoutRef<\"button\"> {\n  /* Value prop is mandatory and must be unique in order for overflow to work. */\n  value: string;\n}\n\nexport const TabNext = forwardRef<HTMLButtonElement, TabNextProps>(function Tab(\n  props,\n  ref\n): ReactElement<TabNextProps> {\n  const {\n    children,\n    className,\n    disabled: disabledProp,\n    onClick,\n    onFocus,\n    value,\n    ...rest\n  } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab-next\",\n    css: tabCss,\n    window: targetWindow,\n  });\n  const {\n    activeColor,\n    isActive,\n    activate,\n    isFocusable,\n    setFocusable,\n    disabled: tabstripDisabled,\n    unregisterTab,\n    registerTab,\n    variant,\n  } = useTabs();\n  const active = isActive(value);\n  const focusable = isFocusable(value);\n  const disabled = tabstripDisabled || disabledProp;\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    activate(event);\n    onClick?.(event);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    setFocusable(value);\n    onFocus?.(event);\n  };\n\n  useEffect(() => {\n    registerTab({ value, label: children });\n    return () => unregisterTab(value);\n  }, [children, registerTab, unregisterTab, value]);\n\n  return (\n    <OverflowItem id={value} priority={active ? 2 : 1}>\n      <div className={withBaseName(\"wrapper\")}>\n        <button\n          className={clsx(\n            withBaseName(),\n            withBaseName(variant),\n            withBaseName(activeColor),\n            className\n          )}\n          data-value={value}\n          aria-selected={active}\n          disabled={disabled}\n          value={value}\n          ref={ref}\n          role=\"tab\"\n          onClick={handleClick}\n          onFocus={handleFocus}\n          tabIndex={focusable && !disabled ? 0 : -1}\n          type=\"button\"\n          {...rest}\n        >\n          {children}\n        </button>\n      </div>\n    </OverflowItem>\n  );\n});\n"],"names":["tabCss"],"mappings":";;;;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAOxC,MAAM,OAAU,GAAA,UAAA,CAA4C,SAAS,GAAA,CAC1E,OACA,GAC4B,EAAA;AAC5B,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,OAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAU,EAAA,gBAAA;AAAA,IACV,aAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,MACE,OAAQ,EAAA,CAAA;AACZ,EAAM,MAAA,MAAA,GAAS,SAAS,KAAK,CAAA,CAAA;AAC7B,EAAM,MAAA,SAAA,GAAY,YAAY,KAAK,CAAA,CAAA;AACnC,EAAA,MAAM,WAAW,gBAAoB,IAAA,YAAA,CAAA;AAErC,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,QAAA,CAAS,KAAK,CAAA,CAAA;AACd,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAClB,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY,EAAE,KAAA,EAAO,KAAO,EAAA,QAAA,EAAU,CAAA,CAAA;AACtC,IAAO,OAAA,MAAM,cAAc,KAAK,CAAA,CAAA;AAAA,KAC/B,CAAC,QAAA,EAAU,WAAa,EAAA,aAAA,EAAe,KAAK,CAAC,CAAA,CAAA;AAEhD,EAAA,uBACG,GAAA,CAAA,YAAA,EAAA;AAAA,IAAa,EAAI,EAAA,KAAA;AAAA,IAAO,QAAA,EAAU,SAAS,CAAI,GAAA,CAAA;AAAA,IAC9C,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACpC,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,aAAa,OAAO,CAAA;AAAA,UACpB,aAAa,WAAW,CAAA;AAAA,UACxB,SAAA;AAAA,SACF;AAAA,QACA,YAAY,EAAA,KAAA;AAAA,QACZ,eAAe,EAAA,MAAA;AAAA,QACf,QAAA;AAAA,QACA,KAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAK,EAAA,KAAA;AAAA,QACL,OAAS,EAAA,WAAA;AAAA,QACT,OAAS,EAAA,WAAA;AAAA,QACT,QAAU,EAAA,SAAA,IAAa,CAAC,QAAA,GAAW,CAAI,GAAA,CAAA,CAAA;AAAA,QACvC,IAAK,EAAA,QAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/utils/useIsViewportLargerThanBreakpoint.js

@@ -3,9 +3,9 @@ import { useOrderedBreakpoints, useCurrentBreakpoint } from '@salt-ds/core';
 const useIsViewportLargerThanBreakpoint = (targetedBreakpoint) => {
   const orderedBreakpoints = useOrderedBreakpoints();
   const index = orderedBreakpoints.indexOf(targetedBreakpoint);
-  const allPreviousBreakpoints = orderedBreakpoints.slice(0, index + 1);
   const currentBreakpoint = useCurrentBreakpoint();
-  return allPreviousBreakpoints.includes(currentBreakpoint);
+  const currentBreakpointIndex = orderedBreakpoints.indexOf(currentBreakpoint);
+  return index >= currentBreakpointIndex;
 };
 
 export { useIsViewportLargerThanBreakpoint };

package/dist-es/utils/useIsViewportLargerThanBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIsViewportLargerThanBreakpoint.js","sources":["../src/utils/useIsViewportLargerThanBreakpoint.ts"],"sourcesContent":["import {\n  Breakpoints,\n  useCurrentBreakpoint,\n  useOrderedBreakpoints,\n} from \"@salt-ds/core\";\n\nexport const useIsViewportLargerThanBreakpoint = (\n  targetedBreakpoint: keyof Breakpoints\n): boolean => {\n  const orderedBreakpoints = useOrderedBreakpoints();\n  const index = orderedBreakpoints.indexOf(targetedBreakpoint);\n  const allPreviousBreakpoints = orderedBreakpoints.slice(0, index + 1);\n\n  const currentBreakpoint = useCurrentBreakpoint();\n  return allPreviousBreakpoints.includes(currentBreakpoint);\n};\n"],"names":[],"mappings":";;AAMa,MAAA,iCAAA,GAAoC,CAC/C,kBACY,KAAA;AACZ,EAAA,MAAM,qBAAqB,qBAAsB,EAAA,CAAA;AACjD,EAAM,MAAA,KAAA,GAAQ,kBAAmB,CAAA,OAAA,CAAQ,kBAAkB,CAAA,CAAA;AAC3D,EAAA,MAAM,sBAAyB,GAAA,kBAAA,CAAmB,KAAM,CAAA,CAAA,EAAG,QAAQ,CAAC,CAAA,CAAA;AAEpE,EAAA,MAAM,oBAAoB,oBAAqB,EAAA,CAAA;AAC/C,EAAO,OAAA,sBAAA,CAAuB,SAAS,iBAAiB,CAAA,CAAA;AAC1D;;;;"}
+{"version":3,"file":"useIsViewportLargerThanBreakpoint.js","sources":["../src/utils/useIsViewportLargerThanBreakpoint.ts"],"sourcesContent":["import {\n  Breakpoints,\n  useCurrentBreakpoint,\n  useOrderedBreakpoints,\n} from \"@salt-ds/core\";\n\nexport const useIsViewportLargerThanBreakpoint = (\n  targetedBreakpoint: keyof Breakpoints\n): boolean => {\n  const orderedBreakpoints = useOrderedBreakpoints();\n  const index = orderedBreakpoints.indexOf(targetedBreakpoint);\n  const currentBreakpoint = useCurrentBreakpoint();\n  const currentBreakpointIndex = orderedBreakpoints.indexOf(currentBreakpoint);\n  return index >= currentBreakpointIndex;\n};\n"],"names":[],"mappings":";;AAMa,MAAA,iCAAA,GAAoC,CAC/C,kBACY,KAAA;AACZ,EAAA,MAAM,qBAAqB,qBAAsB,EAAA,CAAA;AACjD,EAAM,MAAA,KAAA,GAAQ,kBAAmB,CAAA,OAAA,CAAQ,kBAAkB,CAAA,CAAA;AAC3D,EAAA,MAAM,oBAAoB,oBAAqB,EAAA,CAAA;AAC/C,EAAM,MAAA,sBAAA,GAAyB,kBAAmB,CAAA,OAAA,CAAQ,iBAAiB,CAAA,CAAA;AAC3E,EAAA,OAAO,KAAS,IAAA,sBAAA,CAAA;AAClB;;;;"}

package/dist-types/carousel/CarouselSlide.d.ts

@@ -1,7 +1,6 @@
 import { ElementType, HTMLAttributes, ReactElement } from "react";
-import { ButtonBarProps } from "../button-bar";
 export interface CarouselSlideProps extends HTMLAttributes<HTMLDivElement> {
-    ButtonBar?: ElementType<Partial<ButtonBarProps>>;
+    ButtonBar?: ElementType;
     Media: ReactElement;
     description?: string;
     title?: string;

package/dist-types/date-input/DateInput.d.ts

@@ -0,0 +1,33 @@
+import { ComponentPropsWithoutRef, InputHTMLAttributes, Ref } from "react";
+export interface DateInputProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue">, Pick<ComponentPropsWithoutRef<"input">, "disabled" | "value" | "defaultValue" | "placeholder"> {
+    /**
+     * The marker to use in an empty read only DateInput.
+     * Use `''` to disable this feature. Defaults to '—'.
+     */
+    emptyReadOnlyMarker?: string;
+    /**
+     * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dateInput#Attributes) applied to the `input` elements.
+     */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * Optional ref for the dateInput component
+     */
+    inputRef?: Ref<HTMLInputElement>;
+    /**
+     * If `true`, the component is read only.
+     */
+    readOnly?: boolean;
+    /**
+     * Validation status.
+     */
+    validationStatus?: "error" | "warning" | "success";
+    /**
+     * Styling variant. Defaults to "primary".
+     */
+    variant?: "primary" | "secondary";
+    /**
+     * Function to format the input value.
+     */
+    dateFormatter?: (input: string) => string;
+}
+export declare const DateInput: import("react").ForwardRefExoticComponent<DateInputProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/date-input/index.d.ts

@@ -0,0 +1 @@
+export * from "./DateInput";

package/dist-types/index.d.ts

@@ -12,6 +12,7 @@ export * from "./combo-box";
 export * from "./combo-box-deprecated";
 export * from "./contact-details";
 export * from "./content-status";
+export * from "./date-input";
 export * from "./deck-item";
 export * from "./deck-layout";
 export * from "./dropdown";
@@ -25,9 +26,9 @@ export * from "./layer-layout";
 export * from "./list";
 export * from "./list-next";
 export * from "./logo";
+export * from "./menu";
 export * from "./menu-button";
 export * from "./metric";
-export * from "./overlay";
 export * from "./parent-child-layout";
 export * from "./portal";
 export * from "./query-input";

package/dist-types/menu/Menu.d.ts

@@ -0,0 +1,4 @@
+import { MenuBaseProps } from "./MenuBase";
+export interface MenuProps extends MenuBaseProps {
+}
+export declare function Menu(props: MenuProps): JSX.Element;

package/dist-types/menu/MenuBase.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+import { UseFloatingUIProps } from "@salt-ds/core";
+export interface MenuBaseProps {
+    children?: ReactNode;
+    /**
+     * Display or hide the component.
+     */
+    open?: boolean;
+    /**
+     * If true, the menu will be open by default.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Callback function triggered when open state changes.
+     */
+    onOpenChange?: (newOpen: boolean) => void;
+    /**
+     * Set the placement of the Menu component relative to the trigger element. Defaults to `bottom-start` if it's the root menu or `right-start` if it's nested.
+     */
+    placement?: UseFloatingUIProps["placement"];
+}
+export declare function MenuBase(props: MenuBaseProps): JSX.Element;

package/dist-types/menu/MenuContext.d.ts

@@ -0,0 +1,16 @@
+import { UseFloatingUIReturn } from "@salt-ds/core";
+import { Dispatch, MutableRefObject, SetStateAction } from "react";
+import { useInteractions } from "@floating-ui/react";
+declare type UseInteractionsReturn = ReturnType<typeof useInteractions>;
+export interface MenuContextValue extends Pick<UseInteractionsReturn, "getItemProps" | "getReferenceProps" | "getFloatingProps">, Partial<Pick<UseFloatingUIReturn, "context" | "refs">> {
+    openState: boolean;
+    activeIndex: number | null;
+    getPanelPosition: () => Record<string, unknown>;
+    elementsRef: MutableRefObject<(HTMLDivElement | null)[]>;
+    focusInside: boolean;
+    setFocusInside: Dispatch<SetStateAction<boolean>>;
+    isNested: boolean;
+}
+export declare const MenuContext: import("react").Context<MenuContextValue>;
+export declare function useMenuContext(): MenuContextValue;
+export {};

package/dist-types/menu/MenuGroup.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+export interface MenuGroupProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The label of the menu group.
+     */
+    label?: string;
+    /**
+     * Menus to be rendered inside the menu group.
+     */
+    children?: ReactNode;
+}
+export declare const MenuGroup: import("react").ForwardRefExoticComponent<MenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/menu/MenuItem.d.ts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithoutRef } from "react";
+export interface MenuItemProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * If `true`, the item will be disabled.
+     */
+    disabled?: boolean;
+}
+export declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/menu/MenuPanel.d.ts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+export interface MenuPanelProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The content of the menu panel.
+     */
+    children?: ReactNode;
+}
+export declare const MenuPanel: import("react").ForwardRefExoticComponent<MenuPanelProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/menu/MenuPanelBase.d.ts

@@ -0,0 +1,4 @@
+import { ComponentPropsWithoutRef } from "react";
+export interface MenuPanelBaseProps extends ComponentPropsWithoutRef<"div"> {
+}
+export declare const MenuPanelBase: import("react").ForwardRefExoticComponent<MenuPanelBaseProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/menu/MenuPanelContext.d.ts

@@ -0,0 +1,5 @@
+import { MenuContextValue } from "./MenuContext";
+export interface MenuPanelContextValue extends Pick<MenuContextValue, "getItemProps" | "activeIndex" | "setFocusInside"> {
+}
+export declare const MenuPanelContext: import("react").Context<MenuPanelContextValue>;
+export declare function useMenuPanelContext(): MenuPanelContextValue;

package/dist-types/menu/MenuTrigger.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+export interface MenuTriggerProps {
+    /**
+     * The trigger element for the menu. This should be a single child element and accept a ref.
+     */
+    children?: ReactNode;
+}
+export declare function MenuTrigger(props: MenuTriggerProps): JSX.Element;

package/dist-types/menu/MenuTriggerContext.d.ts

@@ -0,0 +1,6 @@
+export interface MenuTriggerContextValue {
+    triggersSubmenu: boolean;
+    blurActive: boolean;
+}
+export declare const MenuTriggerContext: import("react").Context<MenuTriggerContextValue>;
+export declare function useIsMenuTrigger(): MenuTriggerContextValue;

package/dist-types/menu/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./Menu";
+export * from "./MenuItem";
+export * from "./MenuPanel";
+export * from "./MenuTrigger";
+export * from "./MenuGroup";

package/dist-types/parent-child-layout/ParentChildLayout.d.ts

@@ -1,23 +1,18 @@
-import { Breakpoints, FlexLayoutProps } from "@salt-ds/core";
-import { ReactNode } from "react";
-export declare type StackedViewElement = "parent" | "child";
-export interface ParentChildLayoutProps extends FlexLayoutProps<"div"> {
+import { Breakpoints } from "@salt-ds/core";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+export interface ParentChildLayoutProps extends ComponentPropsWithoutRef<"div"> {
     /**
      * Breakpoint at which the parent and child will stack.
      */
     collapseAtBreakpoint?: keyof Breakpoints;
     /**
-     * Change element that is displayed when in staked view.
+     * View that is displayed when in a collapsed state.
      */
-    collapsedViewElement?: StackedViewElement;
+    visibleView?: "child" | "parent";
     /**
-     * Disable all animations.
+     * Controls the space between parent and child components, default is 0.
      */
-    disableAnimations?: boolean;
-    /**
-     * Position of the parent component within the layout.
-     */
-    parentPosition?: "left" | "right";
+    gap?: number;
     /**
      * Parent component to be rendered
      */
@@ -26,6 +21,9 @@ export interface ParentChildLayoutProps extends FlexLayoutProps<"div"> {
      * Child component to be rendered
      */
     child: ReactNode;
+    /**
+     * Function called when the viewport size equal to or less than the collapseAtBreakpoint variable
+     */
     onCollapseChange?: (isCollapsed: boolean) => void;
 }
-export declare const ParentChildLayout: import("react").ForwardRefExoticComponent<Omit<ParentChildLayoutProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ParentChildLayout: import("react").ForwardRefExoticComponent<ParentChildLayoutProps & import("react").RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/lab",
-  "version": "1.0.0-alpha.39",
+  "version": "1.0.0-alpha.40",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -26,10 +26,10 @@
     "react-window": "^1.8.6",
     "rifm": "^0.12.0",
     "tinycolor2": "^1.4.2",
-    "@salt-ds/core": "^1.23.0",
+    "@salt-ds/core": "^1.24.0",
     "@salt-ds/window": "^0.1.1",
     "@salt-ds/styles": "^0.2.1",
-    "@salt-ds/icons": "^1.10.0"
+    "@salt-ds/icons": "^1.11.0"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0",