@salt-ds/core 1.25.0 → 1.27.0

package/dist-es/form-field/FormFieldLabel.js

@@ -30,6 +30,7 @@ import '../banner/BannerActions.js';
 import '../banner/BannerContent.js';
 import '../border-item/BorderItem.js';
 import '../border-layout/BorderLayout.js';
+import '../breakpoints/BreakpointProvider.js';
 import '../button/Button.js';
 import '../card/Card.js';
 import '../checkbox/Checkbox.js';
@@ -63,12 +64,18 @@ import '../interactable-card/InteractableCardGroupContext.js';
 import '../link/Link.js';
 import '../link-card/LinkCard.js';
 import '../list-control/ListControlContext.js';
+import '../menu/MenuContext.js';
+import '@floating-ui/react';
+import '../menu/MenuItem.js';
+import '../menu/MenuPanel.js';
+import '../menu/MenuTriggerContext.js';
+import '../menu/MenuPanelContext.js';
+import '../menu/MenuGroup.js';
 import '../multiline-input/MultilineInput.js';
 import '../navigation-item/NavigationItem.js';
 import '../option/Option.js';
 import '../option/OptionGroup.js';
 import '../overlay/OverlayContext.js';
-import '@floating-ui/react';
 import '../overlay/OverlayPanel.js';
 import '../overlay/OverlayPanelCloseButton.js';
 import '../overlay/OverlayPanelContent.js';

package/dist-es/form-field/FormFieldLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport interface FormFieldLabelProps\n  extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {\n  /**\n   * Intent for the label.\n   *\n   * Defaults to \"label\"\n   * Using \"sentence\" gives more prominent styling\n   */\n  intent?: \"label\" | \"sentence\";\n}\n\nexport const FormFieldLabel = ({\n  className,\n  children,\n  intent = \"label\",\n  ...restProps\n}: FormFieldLabelProps) => {\n  const { a11yProps, disabled, necessity } = useFormFieldProps();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-label\",\n    css: formFieldLabelCss,\n    window: targetWindow,\n  });\n\n  const necessityLabel = necessity\n    ? necessity === \"asterisk\"\n      ? \" *\"\n      : ` (${capitalize(necessity)})`\n    : undefined;\n\n  return (\n    <Label\n      as=\"label\"\n      className={clsx(withBaseName(), withBaseName(intent), className)}\n      id={a11yProps?.[\"aria-labelledby\"]}\n      disabled={disabled}\n      variant=\"secondary\"\n      {...restProps}\n    >\n      {children}\n      {necessityLabel && (\n        <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n      )}\n    </Label>\n  );\n};\n"],"names":["formFieldLabelCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAa/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAS,GAAA,OAAA;AAAA,EACN,GAAA,SAAA;AACL,CAA2B,KAAA;AACzB,EAAA,MAAM,EAAE,SAAA,EAAW,QAAU,EAAA,SAAA,KAAc,iBAAkB,EAAA,CAAA;AAC7D,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,cAAA,GAAiB,YACnB,SAAc,KAAA,UAAA,GACZ,OACA,CAAK,EAAA,EAAA,UAAA,CAAW,SAAS,CAC3B,CAAA,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,EAAG,EAAA,OAAA;AAAA,IACH,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,IAC/D,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,iBAAA,CAAA;AAAA,IAChB,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,SAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,kCACE,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,QAAI,QAAA,EAAA,cAAA;AAAA,OAAe,CAAA;AAAA,KAAA;AAAA,GAErE,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport interface FormFieldLabelProps\n  extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {\n  /**\n   * Intent for the label.\n   *\n   * Defaults to \"label\"\n   * Using \"sentence\" gives more prominent styling\n   */\n  intent?: \"label\" | \"sentence\";\n}\n\nexport const FormFieldLabel = ({\n  className,\n  children,\n  intent = \"label\",\n  ...restProps\n}: FormFieldLabelProps) => {\n  const { a11yProps, disabled, necessity } = useFormFieldProps();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-label\",\n    css: formFieldLabelCss,\n    window: targetWindow,\n  });\n\n  const necessityLabel = necessity\n    ? necessity === \"asterisk\"\n      ? \" *\"\n      : ` (${capitalize(necessity)})`\n    : undefined;\n\n  return (\n    <Label\n      as=\"label\"\n      className={clsx(withBaseName(), withBaseName(intent), className)}\n      id={a11yProps?.[\"aria-labelledby\"]}\n      disabled={disabled}\n      variant=\"secondary\"\n      {...restProps}\n    >\n      {children}\n      {necessityLabel && (\n        <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n      )}\n    </Label>\n  );\n};\n"],"names":["formFieldLabelCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAa/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAS,GAAA,OAAA;AAAA,EACN,GAAA,SAAA;AACL,CAA2B,KAAA;AACzB,EAAA,MAAM,EAAE,SAAA,EAAW,QAAU,EAAA,SAAA,KAAc,iBAAkB,EAAA,CAAA;AAC7D,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,cAAA,GAAiB,YACnB,SAAc,KAAA,UAAA,GACZ,OACA,CAAK,EAAA,EAAA,UAAA,CAAW,SAAS,CAC3B,CAAA,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,EAAG,EAAA,OAAA;AAAA,IACH,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,IAC/D,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,iBAAA,CAAA;AAAA,IAChB,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,SAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,kCACE,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,QAAI,QAAA,EAAA,cAAA;AAAA,OAAe,CAAA;AAAA,KAAA;AAAA,GAErE,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/form-field-context/FormFieldContext.js

@@ -18,6 +18,7 @@ import '../banner/BannerActions.js';
 import '../banner/BannerContent.js';
 import '../border-item/BorderItem.js';
 import '../border-layout/BorderLayout.js';
+import '../breakpoints/BreakpointProvider.js';
 import '../button/Button.js';
 import '../card/Card.js';
 import '../checkbox/Checkbox.js';
@@ -59,12 +60,18 @@ import '../interactable-card/InteractableCardGroupContext.js';
 import '../link/Link.js';
 import '../link-card/LinkCard.js';
 import '../list-control/ListControlContext.js';
+import '../menu/MenuContext.js';
+import '@floating-ui/react';
+import '../menu/MenuItem.js';
+import '../menu/MenuPanel.js';
+import '../menu/MenuTriggerContext.js';
+import '../menu/MenuPanelContext.js';
+import '../menu/MenuGroup.js';
 import '../multiline-input/MultilineInput.js';
 import '../navigation-item/NavigationItem.js';
 import '../option/Option.js';
 import '../option/OptionGroup.js';
 import '../overlay/OverlayContext.js';
-import '@floating-ui/react';
 import '../overlay/OverlayPanel.js';
 import '../overlay/OverlayPanelCloseButton.js';
 import '../overlay/OverlayPanelContent.js';

package/dist-es/form-field-context/FormFieldContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldContext.js","sources":["../src/form-field-context/FormFieldContext.ts"],"sourcesContent":["import { createContext } from \"../utils\";\n\nexport interface A11yValueProps {\n  /**\n   * id for FormFieldHelperText\n   */\n  helperTextId?: string;\n  /**\n   * id for FormFieldLabel\n   */\n  labelId?: string;\n}\n\nexport type NecessityType = \"required\" | \"optional\" | \"asterisk\";\n\nexport interface a11yValueAriaProps {\n  \"aria-labelledby\": A11yValueProps[\"labelId\"];\n  \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n}\n\nexport interface FormFieldContextValue {\n  a11yProps: a11yValueAriaProps;\n  disabled: boolean;\n  necessity: NecessityType | undefined;\n  readOnly: boolean;\n  validationStatus: \"error\" | \"warning\" | \"success\" | undefined;\n}\n\nexport const FormFieldContext = createContext(\n  \"FormFieldContext\",\n  {} as FormFieldContextValue\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BO,MAAM,gBAAmB,GAAA,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA,EAAC;AACH;;;;"}
+{"version":3,"file":"FormFieldContext.js","sources":["../src/form-field-context/FormFieldContext.ts"],"sourcesContent":["import { createContext } from \"../utils\";\n\nexport interface A11yValueProps {\n  /**\n   * id for FormFieldHelperText\n   */\n  helperTextId?: string;\n  /**\n   * id for FormFieldLabel\n   */\n  labelId?: string;\n}\n\nexport type NecessityType = \"required\" | \"optional\" | \"asterisk\";\n\nexport interface a11yValueAriaProps {\n  \"aria-labelledby\": A11yValueProps[\"labelId\"];\n  \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n}\n\nexport interface FormFieldContextValue {\n  a11yProps: a11yValueAriaProps;\n  disabled: boolean;\n  necessity: NecessityType | undefined;\n  readOnly: boolean;\n  validationStatus: \"error\" | \"warning\" | \"success\" | undefined;\n}\n\nexport const FormFieldContext = createContext(\n  \"FormFieldContext\",\n  {} as FormFieldContextValue\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BO,MAAM,gBAAmB,GAAA,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA,EAAC;AACH;;;;"}

package/dist-es/grid-item/GridItem.js

@@ -4,7 +4,7 @@ import { clsx } from 'clsx';
 import { makePrefixer } from '../utils/makePrefixer.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
 import '../utils/useId.js';
-import { useResponsiveProp } from '../utils/useResponsiveProp.js';
+import { resolveResponsiveValue } from '../utils/useResponsiveProp.js';
 import '../accordion/AccordionGroup.js';
 import '../accordion/AccordionPanel.js';
 import '../accordion/Accordion.js';
@@ -17,6 +17,7 @@ import '../banner/BannerActions.js';
 import '../banner/BannerContent.js';
 import '../border-item/BorderItem.js';
 import '../border-layout/BorderLayout.js';
+import { useBreakpoint } from '../breakpoints/BreakpointProvider.js';
 import '../button/Button.js';
 import '../card/Card.js';
 import '../checkbox/Checkbox.js';
@@ -59,12 +60,18 @@ import '../interactable-card/InteractableCardGroupContext.js';
 import '../link/Link.js';
 import '../link-card/LinkCard.js';
 import '../list-control/ListControlContext.js';
+import '../menu/MenuContext.js';
+import '@floating-ui/react';
+import '../menu/MenuItem.js';
+import '../menu/MenuPanel.js';
+import '../menu/MenuTriggerContext.js';
+import '../menu/MenuPanelContext.js';
+import '../menu/MenuGroup.js';
 import '../multiline-input/MultilineInput.js';
 import '../navigation-item/NavigationItem.js';
 import '../option/Option.js';
 import '../option/OptionGroup.js';
 import '../overlay/OverlayContext.js';
-import '@floating-ui/react';
 import '../overlay/OverlayPanel.js';
 import '../overlay/OverlayPanelCloseButton.js';
 import '../overlay/OverlayPanelContent.js';
@@ -112,8 +119,8 @@ const GridItem = forwardRef(
     as,
     children,
     className,
-    colSpan,
-    rowSpan,
+    colSpan = "auto",
+    rowSpan = "auto",
     horizontalAlignment = "stretch",
     verticalAlignment = "stretch",
     style,
@@ -125,9 +132,10 @@ const GridItem = forwardRef(
       css: css_248z,
       window: targetWindow
     });
+    const { matchedBreakpoints } = useBreakpoint();
     const Component = as || "div";
-    const gridItemColSpan = useResponsiveProp(colSpan, "auto");
-    const gridItemRowSpan = useResponsiveProp(rowSpan, "auto");
+    const gridItemColSpan = resolveResponsiveValue(colSpan, matchedBreakpoints);
+    const gridItemRowSpan = resolveResponsiveValue(rowSpan, matchedBreakpoints);
     const gridColumnStart = gridItemColSpan ? `span ${gridItemColSpan}` : colStart;
     const gridColumnEnd = gridItemColSpan ? `span ${gridItemColSpan}` : colEnd;
     const gridRowStart = gridItemRowSpan ? `span ${gridItemRowSpan}` : rowStart;

package/dist-es/grid-item/GridItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridItem.js","sources":["../src/grid-item/GridItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport {\n  makePrefixer,\n  ResponsiveProp,\n  useResponsiveProp,\n  PolymorphicRef,\n  PolymorphicComponentPropWithRef,\n} from \"../utils\";\nimport gridItemCss from \"./GridItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport const GRID_ALIGNMENT_BASE = [\n  \"start\",\n  \"end\",\n  \"center\",\n  \"stretch\",\n] as const;\n\ntype GridAlignment = (typeof GRID_ALIGNMENT_BASE)[number];\n\ntype GridProperty = number | \"auto\";\nexport type GridItemProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * The item will span across the provided number of grid columns. Defaults to \"auto\"\n       */\n      colSpan?: ResponsiveProp<GridProperty>;\n      /**\n       * The item will span across the provided number of grid rows. Defaults to \"auto\"\n       */\n      rowSpan?: ResponsiveProp<GridProperty>;\n      /**\n       * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n       */\n      horizontalAlignment?: GridAlignment;\n      /**\n       * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n       */\n      verticalAlignment?: GridAlignment;\n    }\n  >;\n\nconst withBaseName = makePrefixer(\"saltGridItem\");\n\nconst colStart = \"auto\";\nconst colEnd = \"auto\";\nconst rowStart = \"auto\";\nconst rowEnd = \"auto\";\n\ntype GridItemComponent = <T extends ElementType = \"div\">(\n  props: GridItemProps<T>\n) => ReactElement | null;\n\nexport const GridItem: GridItemComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      children,\n      className,\n      colSpan,\n      rowSpan,\n      horizontalAlignment = \"stretch\",\n      verticalAlignment = \"stretch\",\n      style,\n      ...rest\n    }: GridItemProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-grid-item\",\n      css: gridItemCss,\n      window: targetWindow,\n    });\n\n    const Component = as || \"div\";\n    const gridItemColSpan = useResponsiveProp(colSpan, \"auto\");\n\n    const gridItemRowSpan = useResponsiveProp(rowSpan, \"auto\");\n\n    const gridColumnStart = gridItemColSpan\n      ? `span ${gridItemColSpan}`\n      : colStart;\n\n    const gridColumnEnd = gridItemColSpan ? `span ${gridItemColSpan}` : colEnd;\n\n    const gridRowStart = gridItemRowSpan ? `span ${gridItemRowSpan}` : rowStart;\n\n    const gridRowEnd = gridItemRowSpan ? `span ${gridItemRowSpan}` : rowEnd;\n\n    const gridStyles = {\n      ...style,\n      \"--gridItem-justifySelf\": horizontalAlignment,\n      \"--gridItem-alignSelf\": verticalAlignment,\n      \"--gridItem-gridRowStart\": gridRowStart,\n      \"--gridItem-gridColumnStart\": gridColumnStart,\n      \"--gridItem-gridRowEnd\": gridRowEnd,\n      \"--gridItem-gridColumnEnd\": gridColumnEnd,\n    };\n\n    return (\n      <Component\n        className={clsx(withBaseName(), className)}\n        style={gridStyles}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["gridItemCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,mBAAsB,GAAA;AAAA,EACjC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AACF,EAAA;AA4BA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAEhD,MAAM,QAAW,GAAA,MAAA,CAAA;AACjB,MAAM,MAAS,GAAA,MAAA,CAAA;AACf,MAAM,QAAW,GAAA,MAAA,CAAA;AACjB,MAAM,MAAS,GAAA,MAAA,CAAA;AAMR,MAAM,QAA8B,GAAA,UAAA;AAAA,EACzC,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,mBAAsB,GAAA,SAAA;AAAA,IACtB,iBAAoB,GAAA,SAAA;AAAA,IACpB,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AACxB,IAAM,MAAA,eAAA,GAAkB,iBAAkB,CAAA,OAAA,EAAS,MAAM,CAAA,CAAA;AAEzD,IAAM,MAAA,eAAA,GAAkB,iBAAkB,CAAA,OAAA,EAAS,MAAM,CAAA,CAAA;AAEzD,IAAM,MAAA,eAAA,GAAkB,eACpB,GAAA,CAAA,KAAA,EAAQ,eACR,CAAA,CAAA,GAAA,QAAA,CAAA;AAEJ,IAAM,MAAA,aAAA,GAAgB,eAAkB,GAAA,CAAA,KAAA,EAAQ,eAAoB,CAAA,CAAA,GAAA,MAAA,CAAA;AAEpE,IAAM,MAAA,YAAA,GAAe,eAAkB,GAAA,CAAA,KAAA,EAAQ,eAAoB,CAAA,CAAA,GAAA,QAAA,CAAA;AAEnE,IAAM,MAAA,UAAA,GAAa,eAAkB,GAAA,CAAA,KAAA,EAAQ,eAAoB,CAAA,CAAA,GAAA,MAAA,CAAA;AAEjE,IAAA,MAAM,UAAa,GAAA;AAAA,MACjB,GAAG,KAAA;AAAA,MACH,wBAA0B,EAAA,mBAAA;AAAA,MAC1B,sBAAwB,EAAA,iBAAA;AAAA,MACxB,yBAA2B,EAAA,YAAA;AAAA,MAC3B,4BAA8B,EAAA,eAAA;AAAA,MAC9B,uBAAyB,EAAA,UAAA;AAAA,MACzB,0BAA4B,EAAA,aAAA;AAAA,KAC9B,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAO,EAAA,UAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"GridItem.js","sources":["../src/grid-item/GridItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport {\n  makePrefixer,\n  ResponsiveProp,\n  PolymorphicRef,\n  PolymorphicComponentPropWithRef,\n  resolveResponsiveValue,\n} from \"../utils\";\nimport gridItemCss from \"./GridItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useBreakpoint } from \"../breakpoints\";\n\nexport const GRID_ALIGNMENT_BASE = [\n  \"start\",\n  \"end\",\n  \"center\",\n  \"stretch\",\n] as const;\n\ntype GridAlignment = (typeof GRID_ALIGNMENT_BASE)[number];\n\ntype GridProperty = number | \"auto\";\nexport type GridItemProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * The item will span across the provided number of grid columns. Defaults to \"auto\"\n       */\n      colSpan?: ResponsiveProp<GridProperty>;\n      /**\n       * The item will span across the provided number of grid rows. Defaults to \"auto\"\n       */\n      rowSpan?: ResponsiveProp<GridProperty>;\n      /**\n       * Aligns a grid item inside a cell along the inline (row) axis. Defaults to \"stretch\"\n       */\n      horizontalAlignment?: GridAlignment;\n      /**\n       * Aligns a grid item inside a cell along the block (column) axis. Defaults to \"stretch\"\n       */\n      verticalAlignment?: GridAlignment;\n    }\n  >;\n\nconst withBaseName = makePrefixer(\"saltGridItem\");\n\nconst colStart = \"auto\";\nconst colEnd = \"auto\";\nconst rowStart = \"auto\";\nconst rowEnd = \"auto\";\n\ntype GridItemComponent = <T extends ElementType = \"div\">(\n  props: GridItemProps<T>\n) => ReactElement | null;\n\nexport const GridItem: GridItemComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      children,\n      className,\n      colSpan = \"auto\",\n      rowSpan = \"auto\",\n      horizontalAlignment = \"stretch\",\n      verticalAlignment = \"stretch\",\n      style,\n      ...rest\n    }: GridItemProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-grid-item\",\n      css: gridItemCss,\n      window: targetWindow,\n    });\n\n    const { matchedBreakpoints } = useBreakpoint();\n\n    const Component = as || \"div\";\n    const gridItemColSpan = resolveResponsiveValue(colSpan, matchedBreakpoints);\n\n    const gridItemRowSpan = resolveResponsiveValue(rowSpan, matchedBreakpoints);\n\n    const gridColumnStart = gridItemColSpan\n      ? `span ${gridItemColSpan}`\n      : colStart;\n\n    const gridColumnEnd = gridItemColSpan ? `span ${gridItemColSpan}` : colEnd;\n\n    const gridRowStart = gridItemRowSpan ? `span ${gridItemRowSpan}` : rowStart;\n\n    const gridRowEnd = gridItemRowSpan ? `span ${gridItemRowSpan}` : rowEnd;\n\n    const gridStyles = {\n      ...style,\n      \"--gridItem-justifySelf\": horizontalAlignment,\n      \"--gridItem-alignSelf\": verticalAlignment,\n      \"--gridItem-gridRowStart\": gridRowStart,\n      \"--gridItem-gridColumnStart\": gridColumnStart,\n      \"--gridItem-gridRowEnd\": gridRowEnd,\n      \"--gridItem-gridColumnEnd\": gridColumnEnd,\n    };\n\n    return (\n      <Component\n        className={clsx(withBaseName(), className)}\n        style={gridStyles}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["gridItemCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,mBAAsB,GAAA;AAAA,EACjC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AACF,EAAA;AA4BA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAEhD,MAAM,QAAW,GAAA,MAAA,CAAA;AACjB,MAAM,MAAS,GAAA,MAAA,CAAA;AACf,MAAM,QAAW,GAAA,MAAA,CAAA;AACjB,MAAM,MAAS,GAAA,MAAA,CAAA;AAMR,MAAM,QAA8B,GAAA,UAAA;AAAA,EACzC,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAU,GAAA,MAAA;AAAA,IACV,OAAU,GAAA,MAAA;AAAA,IACV,mBAAsB,GAAA,SAAA;AAAA,IACtB,iBAAoB,GAAA,SAAA;AAAA,IACpB,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAI,aAAc,EAAA,CAAA;AAE7C,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AACxB,IAAM,MAAA,eAAA,GAAkB,sBAAuB,CAAA,OAAA,EAAS,kBAAkB,CAAA,CAAA;AAE1E,IAAM,MAAA,eAAA,GAAkB,sBAAuB,CAAA,OAAA,EAAS,kBAAkB,CAAA,CAAA;AAE1E,IAAM,MAAA,eAAA,GAAkB,eACpB,GAAA,CAAA,KAAA,EAAQ,eACR,CAAA,CAAA,GAAA,QAAA,CAAA;AAEJ,IAAM,MAAA,aAAA,GAAgB,eAAkB,GAAA,CAAA,KAAA,EAAQ,eAAoB,CAAA,CAAA,GAAA,MAAA,CAAA;AAEpE,IAAM,MAAA,YAAA,GAAe,eAAkB,GAAA,CAAA,KAAA,EAAQ,eAAoB,CAAA,CAAA,GAAA,QAAA,CAAA;AAEnE,IAAM,MAAA,UAAA,GAAa,eAAkB,GAAA,CAAA,KAAA,EAAQ,eAAoB,CAAA,CAAA,GAAA,MAAA,CAAA;AAEjE,IAAA,MAAM,UAAa,GAAA;AAAA,MACjB,GAAG,KAAA;AAAA,MACH,wBAA0B,EAAA,mBAAA;AAAA,MAC1B,sBAAwB,EAAA,iBAAA;AAAA,MACxB,yBAA2B,EAAA,YAAA;AAAA,MAC3B,4BAA8B,EAAA,eAAA;AAAA,MAC9B,uBAAyB,EAAA,UAAA;AAAA,MACzB,0BAA4B,EAAA,aAAA;AAAA,KAC9B,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAO,EAAA,UAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

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

@@ -1,4 +1,4 @@
-var css_248z = ".salt-density-touch {\n  --gridLayout-gap-density-multiplier: 2;\n}\n\n/* Default variables applied to the root element */\n.saltGridLayout {\n  --gridLayout-space: 1fr;\n  --gridLayout-rowGap: var(--gridLayout-gap-density-multiplier, 3);\n  --gridLayout-columnGap: var(--gridLayout-gap-density-multiplier, 3);\n}\n\n/* Style applied to the root element */\n.saltGridLayout {\n  display: grid;\n  column-gap: calc(var(--salt-size-unit) * var(--gridLayout-columnGap));\n  row-gap: calc(var(--salt-size-unit) * var(--gridLayout-rowGap));\n  grid-template-columns: repeat(var(--gridLayout-columns), var(--gridLayout-space));\n  grid-template-rows: repeat(var(--gridLayout-rows), var(--gridLayout-space));\n  grid-auto-columns: auto;\n  grid-auto-rows: auto;\n}\n\n.saltGridLayout-area {\n  grid-template: var(--gridLayout-gridTemplate);\n  grid-template-columns: min-content 1fr min-content;\n  grid-template-rows: min-content 1fr min-content;\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltGridLayout {\n  display: grid;\n  column-gap: var(--gridLayout-columnGap);\n  row-gap: var(--gridLayout-rowGap);\n  grid-template-columns: var(--gridLayout-columns);\n  grid-template-rows: var(--gridLayout-rows);\n  grid-auto-columns: auto;\n  grid-auto-rows: auto;\n}\n\n.saltGridLayout-area {\n  grid-template: var(--gridLayout-gridTemplate);\n  grid-template-columns: min-content 1fr min-content;\n  grid-template-rows: min-content 1fr min-content;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=GridLayout.css.js.map

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

@@ -4,7 +4,7 @@ import { clsx } from 'clsx';
 import { makePrefixer } from '../utils/makePrefixer.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
 import '../utils/useId.js';
-import { useResponsiveProp } from '../utils/useResponsiveProp.js';
+import { resolveResponsiveValue } from '../utils/useResponsiveProp.js';
 import '../accordion/AccordionGroup.js';
 import '../accordion/AccordionPanel.js';
 import '../accordion/Accordion.js';
@@ -17,6 +17,7 @@ import '../banner/BannerActions.js';
 import '../banner/BannerContent.js';
 import '../border-item/BorderItem.js';
 import '../border-layout/BorderLayout.js';
+import { useBreakpoint } from '../breakpoints/BreakpointProvider.js';
 import '../button/Button.js';
 import '../card/Card.js';
 import '../checkbox/Checkbox.js';
@@ -59,12 +60,18 @@ import '../interactable-card/InteractableCardGroupContext.js';
 import '../link/Link.js';
 import '../link-card/LinkCard.js';
 import '../list-control/ListControlContext.js';
+import '../menu/MenuContext.js';
+import '@floating-ui/react';
+import '../menu/MenuItem.js';
+import '../menu/MenuPanel.js';
+import '../menu/MenuTriggerContext.js';
+import '../menu/MenuPanelContext.js';
+import '../menu/MenuGroup.js';
 import '../multiline-input/MultilineInput.js';
 import '../navigation-item/NavigationItem.js';
 import '../option/Option.js';
 import '../option/OptionGroup.js';
 import '../overlay/OverlayContext.js';
-import '@floating-ui/react';
 import '../overlay/OverlayPanel.js';
 import '../overlay/OverlayPanelCloseButton.js';
 import '../overlay/OverlayPanelContent.js';
@@ -97,6 +104,18 @@ import '../viewport/ViewportProvider.js';
 import css_248z from './GridLayout.css.js';
 
 const withBaseName = makePrefixer("saltGridLayout");
+function parseGridValue(value) {
+  if (value === void 0 || typeof value === "string") {
+    return value;
+  }
+  return `repeat(${value}, 1fr)`;
+}
+function parseSpacing(value) {
+  if (value === void 0 || typeof value === "string") {
+    return value;
+  }
+  return `calc(var(--salt-spacing-100) * ${value})`;
+}
 const GridLayout = forwardRef(
   ({
     as,
@@ -104,7 +123,7 @@ const GridLayout = forwardRef(
     className,
     columns = 12,
     rows = 1,
-    gap,
+    gap = 3,
     columnGap,
     rowGap,
     style,
@@ -117,17 +136,18 @@ const GridLayout = forwardRef(
       window: targetWindow
     });
     const Component = as || "div";
-    const gridColumns = useResponsiveProp(columns, 12);
-    const gridRows = useResponsiveProp(rows, 1);
-    const gridGap = useResponsiveProp(gap, 3);
-    const gridColumnGap = useResponsiveProp(columnGap, 3);
-    const gridRowGap = useResponsiveProp(rowGap, 3);
+    const { matchedBreakpoints } = useBreakpoint();
+    const gridColumns = resolveResponsiveValue(columns, matchedBreakpoints);
+    const gridRows = resolveResponsiveValue(rows, matchedBreakpoints);
+    const gridGap = resolveResponsiveValue(gap, matchedBreakpoints);
+    const gridColumnGap = resolveResponsiveValue(columnGap, matchedBreakpoints);
+    const gridRowGap = resolveResponsiveValue(rowGap, matchedBreakpoints);
     const gridLayoutStyles = {
       ...style,
-      "--gridLayout-columns": gridColumns,
-      "--gridLayout-rows": gridRows,
-      "--gridLayout-columnGap": gridColumnGap != null ? gridColumnGap : gridGap,
-      "--gridLayout-rowGap": gridRowGap != null ? gridRowGap : gridGap
+      "--gridLayout-columns": parseGridValue(gridColumns),
+      "--gridLayout-rows": parseGridValue(gridRows),
+      "--gridLayout-columnGap": parseSpacing(gridColumnGap != null ? gridColumnGap : gridGap),
+      "--gridLayout-rowGap": parseSpacing(gridRowGap != null ? gridRowGap : gridGap)
     };
     return /* @__PURE__ */ jsx(Component, {
       className: clsx(withBaseName(), className),

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

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.js","sources":["../src/grid-layout/GridLayout.tsx"],"sourcesContent":["import { forwardRef, ReactElement, ElementType } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport {\n  makePrefixer,\n  ResponsiveProp,\n  useResponsiveProp,\n  PolymorphicComponentPropWithRef,\n  PolymorphicRef,\n} from \"../utils\";\n\nimport gridLayoutCss from \"./GridLayout.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport type GridLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Number of columns to be displayed. Defaults to 12\n       */\n      columns?: ResponsiveProp<number>;\n      /**\n       * Number of rows to be displayed. Defaults to 1\n       */\n      rows?: ResponsiveProp<number>;\n      /**\n       * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 3\n       */\n      gap?: ResponsiveProp<number>;\n      /**\n       * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 1\n       */\n      columnGap?: ResponsiveProp<number>;\n      /**\n       * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 1\n       */\n      rowGap?: ResponsiveProp<number>;\n    }\n  >;\n\ntype GridLayoutComponent = <T extends ElementType = \"div\">(\n  props: GridLayoutProps<T>\n) => ReactElement | null;\n\nconst withBaseName = makePrefixer(\"saltGridLayout\");\n\nexport const GridLayout: GridLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      children,\n      className,\n      columns = 12,\n      rows = 1,\n      gap,\n      columnGap,\n      rowGap,\n      style,\n      ...rest\n    }: GridLayoutProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-grid-layout\",\n      css: gridLayoutCss,\n      window: targetWindow,\n    });\n    const Component = as || \"div\";\n\n    const gridColumns = useResponsiveProp(columns, 12);\n\n    const gridRows = useResponsiveProp(rows, 1);\n\n    const gridGap = useResponsiveProp(gap, 3);\n\n    const gridColumnGap = useResponsiveProp(columnGap, 3);\n\n    const gridRowGap = useResponsiveProp(rowGap, 3);\n\n    const gridLayoutStyles = {\n      ...style,\n      \"--gridLayout-columns\": gridColumns,\n      \"--gridLayout-rows\": gridRows,\n      \"--gridLayout-columnGap\": gridColumnGap ?? gridGap,\n      \"--gridLayout-rowGap\": gridRowGap ?? gridGap,\n    };\n\n    return (\n      <Component\n        className={clsx(withBaseName(), className)}\n        style={gridLayoutStyles}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["gridLayoutCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAE3C,MAAM,UAAkC,GAAA,UAAA;AAAA,EAC7C,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAU,GAAA,EAAA;AAAA,IACV,IAAO,GAAA,CAAA;AAAA,IACP,GAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AAExB,IAAM,MAAA,WAAA,GAAc,iBAAkB,CAAA,OAAA,EAAS,EAAE,CAAA,CAAA;AAEjD,IAAM,MAAA,QAAA,GAAW,iBAAkB,CAAA,IAAA,EAAM,CAAC,CAAA,CAAA;AAE1C,IAAM,MAAA,OAAA,GAAU,iBAAkB,CAAA,GAAA,EAAK,CAAC,CAAA,CAAA;AAExC,IAAM,MAAA,aAAA,GAAgB,iBAAkB,CAAA,SAAA,EAAW,CAAC,CAAA,CAAA;AAEpD,IAAM,MAAA,UAAA,GAAa,iBAAkB,CAAA,MAAA,EAAQ,CAAC,CAAA,CAAA;AAE9C,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,GAAG,KAAA;AAAA,MACH,sBAAwB,EAAA,WAAA;AAAA,MACxB,mBAAqB,EAAA,QAAA;AAAA,MACrB,0BAA0B,aAAiB,IAAA,IAAA,GAAA,aAAA,GAAA,OAAA;AAAA,MAC3C,uBAAuB,UAAc,IAAA,IAAA,GAAA,UAAA,GAAA,OAAA;AAAA,KACvC,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAO,EAAA,gBAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"GridLayout.js","sources":["../src/grid-layout/GridLayout.tsx"],"sourcesContent":["import { forwardRef, ReactElement, ElementType } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport {\n  makePrefixer,\n  ResponsiveProp,\n  PolymorphicComponentPropWithRef,\n  PolymorphicRef,\n  resolveResponsiveValue,\n} from \"../utils\";\n\nimport gridLayoutCss from \"./GridLayout.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useBreakpoint } from \"../breakpoints\";\n\nexport type GridLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Number of columns to be displayed. Defaults to 12\n       */\n      columns?: ResponsiveProp<number | string>;\n      /**\n       * Number of rows to be displayed. Defaults to 1\n       */\n      rows?: ResponsiveProp<number | string>;\n      /**\n       * Defines the size of the gutter between the columns and the rows by setting a density multiplier. Defaults to 3\n       */\n      gap?: ResponsiveProp<number | string>;\n      /**\n       * Defines the size of the gutter between the columns by setting a density multiplier. Defaults to 1\n       */\n      columnGap?: ResponsiveProp<number | string>;\n      /**\n       * Defines the size of the gutter between the rows by setting a density multiplier. Defaults to 1\n       */\n      rowGap?: ResponsiveProp<number | string>;\n    }\n  >;\n\ntype GridLayoutComponent = <T extends ElementType = \"div\">(\n  props: GridLayoutProps<T>\n) => ReactElement | null;\n\nconst withBaseName = makePrefixer(\"saltGridLayout\");\n\nfunction parseGridValue(value: number | string | undefined) {\n  if (value === undefined || typeof value === \"string\") {\n    return value;\n  }\n\n  return `repeat(${value}, 1fr)`;\n}\n\nfunction parseSpacing(value: number | string | undefined) {\n  if (value === undefined || typeof value === \"string\") {\n    return value;\n  }\n\n  return `calc(var(--salt-spacing-100) * ${value})`;\n}\n\nexport const GridLayout: GridLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      children,\n      className,\n      columns = 12,\n      rows = 1,\n      gap = 3,\n      columnGap,\n      rowGap,\n      style,\n      ...rest\n    }: GridLayoutProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-grid-layout\",\n      css: gridLayoutCss,\n      window: targetWindow,\n    });\n    const Component = as || \"div\";\n\n    const { matchedBreakpoints } = useBreakpoint();\n\n    const gridColumns = resolveResponsiveValue(columns, matchedBreakpoints);\n\n    const gridRows = resolveResponsiveValue(rows, matchedBreakpoints);\n\n    const gridGap = resolveResponsiveValue(gap, matchedBreakpoints);\n\n    const gridColumnGap = resolveResponsiveValue(columnGap, matchedBreakpoints);\n\n    const gridRowGap = resolveResponsiveValue(rowGap, matchedBreakpoints);\n\n    const gridLayoutStyles = {\n      ...style,\n      \"--gridLayout-columns\": parseGridValue(gridColumns),\n      \"--gridLayout-rows\": parseGridValue(gridRows),\n      \"--gridLayout-columnGap\": parseSpacing(gridColumnGap ?? gridGap),\n      \"--gridLayout-rowGap\": parseSpacing(gridRowGap ?? gridGap),\n    };\n\n    return (\n      <Component\n        className={clsx(withBaseName(), className)}\n        style={gridLayoutStyles}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["gridLayoutCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAElD,SAAS,eAAe,KAAoC,EAAA;AAC1D,EAAA,IAAI,KAAU,KAAA,KAAA,CAAA,IAAa,OAAO,KAAA,KAAU,QAAU,EAAA;AACpD,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAEA,EAAA,OAAO,CAAU,OAAA,EAAA,KAAA,CAAA,MAAA,CAAA,CAAA;AACnB,CAAA;AAEA,SAAS,aAAa,KAAoC,EAAA;AACxD,EAAA,IAAI,KAAU,KAAA,KAAA,CAAA,IAAa,OAAO,KAAA,KAAU,QAAU,EAAA;AACpD,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAEA,EAAA,OAAO,CAAkC,+BAAA,EAAA,KAAA,CAAA,CAAA,CAAA,CAAA;AAC3C,CAAA;AAEO,MAAM,UAAkC,GAAA,UAAA;AAAA,EAC7C,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAU,GAAA,EAAA;AAAA,IACV,IAAO,GAAA,CAAA;AAAA,IACP,GAAM,GAAA,CAAA;AAAA,IACN,SAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AAExB,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAI,aAAc,EAAA,CAAA;AAE7C,IAAM,MAAA,WAAA,GAAc,sBAAuB,CAAA,OAAA,EAAS,kBAAkB,CAAA,CAAA;AAEtE,IAAM,MAAA,QAAA,GAAW,sBAAuB,CAAA,IAAA,EAAM,kBAAkB,CAAA,CAAA;AAEhE,IAAM,MAAA,OAAA,GAAU,sBAAuB,CAAA,GAAA,EAAK,kBAAkB,CAAA,CAAA;AAE9D,IAAM,MAAA,aAAA,GAAgB,sBAAuB,CAAA,SAAA,EAAW,kBAAkB,CAAA,CAAA;AAE1E,IAAM,MAAA,UAAA,GAAa,sBAAuB,CAAA,MAAA,EAAQ,kBAAkB,CAAA,CAAA;AAEpE,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,GAAG,KAAA;AAAA,MACH,sBAAA,EAAwB,eAAe,WAAW,CAAA;AAAA,MAClD,mBAAA,EAAqB,eAAe,QAAQ,CAAA;AAAA,MAC5C,wBAAA,EAA0B,YAAa,CAAA,aAAA,IAAA,IAAA,GAAA,aAAA,GAAiB,OAAO,CAAA;AAAA,MAC/D,qBAAA,EAAuB,YAAa,CAAA,UAAA,IAAA,IAAA,GAAA,UAAA,GAAc,OAAO,CAAA;AAAA,KAC3D,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAO,EAAA,gBAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/index.js

@@ -15,6 +15,7 @@ export { BannerContent } from './banner/BannerContent.js';
 export { BORDER_POSITION, BorderItem } from './border-item/BorderItem.js';
 export { BorderLayout } from './border-layout/BorderLayout.js';
 export { DEFAULT_BREAKPOINTS } from './breakpoints/Breakpoints.js';
+export { useBreakpoint } from './breakpoints/BreakpointProvider.js';
 export { Button, ButtonVariantValues } from './button/Button.js';
 export { useButton } from './button/useButton.js';
 export { Card } from './card/Card.js';
@@ -51,6 +52,11 @@ export { InteractableCardGroupContext, useInteractableCardGroup } from './intera
 export { Link } from './link/Link.js';
 export { LinkCard } from './link-card/LinkCard.js';
 export { useListControlContext } from './list-control/ListControlContext.js';
+export { Menu } from './menu/Menu.js';
+export { MenuItem } from './menu/MenuItem.js';
+export { MenuPanel } from './menu/MenuPanel.js';
+export { MenuTrigger } from './menu/MenuTrigger.js';
+export { MenuGroup } from './menu/MenuGroup.js';
 export { MultilineInput } from './multiline-input/MultilineInput.js';
 export { NavigationItem } from './navigation-item/NavigationItem.js';
 export { Option } from './option/Option.js';
@@ -117,7 +123,7 @@ export { useId, useIdMemo } from './utils/useId.js';
 export { teardown, useIsFocusVisible } from './utils/useIsFocusVisible.js';
 export { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect.js';
 export { usePrevious } from './utils/usePrevious.js';
-export { getCurrentBreakpoint, useCurrentBreakpoint, useOrderedBreakpoints, useResponsiveProp } from './utils/useResponsiveProp.js';
+export { getCurrentBreakpoint, resolveResponsiveValue, useCurrentBreakpoint, useOrderedBreakpoints, useResponsiveProp } from './utils/useResponsiveProp.js';
 export { mergeProps } from './utils/mergeProps.js';
 export { useValueEffect } from './utils/useValueEffect.js';
 export { useResizeObserver } from './utils/useResizeObserver.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/input/Input.js

@@ -23,6 +23,7 @@ import '../banner/BannerActions.js';
 import '../banner/BannerContent.js';
 import '../border-item/BorderItem.js';
 import '../border-layout/BorderLayout.js';
+import '../breakpoints/BreakpointProvider.js';
 import '../button/Button.js';
 import '../card/Card.js';
 import '../checkbox/Checkbox.js';
@@ -61,12 +62,18 @@ import '../interactable-card/InteractableCardGroupContext.js';
 import '../link/Link.js';
 import '../link-card/LinkCard.js';
 import '../list-control/ListControlContext.js';
+import '../menu/MenuContext.js';
+import '@floating-ui/react';
+import '../menu/MenuItem.js';
+import '../menu/MenuPanel.js';
+import '../menu/MenuTriggerContext.js';
+import '../menu/MenuPanelContext.js';
+import '../menu/MenuGroup.js';
 import '../multiline-input/MultilineInput.js';
 import '../navigation-item/NavigationItem.js';
 import '../option/Option.js';
 import '../option/OptionGroup.js';
 import '../overlay/OverlayContext.js';
-import '@floating-ui/react';
 import '../overlay/OverlayPanel.js';
 import '../overlay/OverlayPanelCloseButton.js';
 import '../overlay/OverlayPanelContent.js';

package/dist-es/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../src/input/Input.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEvent,\n  ComponentPropsWithoutRef,\n  FocusEvent,\n  forwardRef,\n  InputHTMLAttributes,\n  ReactNode,\n  Ref,\n  useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { StatusAdornment } from \"../status-adornment\";\n\nimport inputCss from \"./Input.css\";\n\nconst withBaseName = makePrefixer(\"saltInput\");\n\nexport interface InputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n    Pick<\n      ComponentPropsWithoutRef<\"input\">,\n      \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n    > {\n  /**\n   * The marker to use in an empty read only Input.\n   * Use `''` to disable this feature. Defaults to '—'.\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * End adornment component\n   */\n  endAdornment?: ReactNode;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n   */\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Alignment of text within container. Defaults to \"left\"\n   */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /**\n   * Validation status.\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nexport const Input = forwardRef<HTMLDivElement, InputProps>(function Input(\n  {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    className: classNameProp,\n    disabled,\n    emptyReadOnlyMarker = \"—\",\n    endAdornment,\n    id,\n    inputProps = {},\n    inputRef,\n    placeholder,\n    readOnly: readOnlyProp,\n    role,\n    startAdornment,\n    style,\n    textAlign = \"left\",\n    value: valueProp,\n    defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n    validationStatus: validationStatusProp,\n    variant = \"primary\",\n    ...other\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-input\",\n    css: inputCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps: {\n      \"aria-describedby\": formFieldDescribedBy,\n      \"aria-labelledby\": formFieldLabelledBy,\n    } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    necessity: formFieldRequired,\n    validationStatus: formFieldValidationStatus,\n  } = useFormFieldProps();\n\n  const restA11yProps = {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n  };\n\n  const isDisabled = disabled || formFieldDisabled;\n  const isReadOnly = readOnlyProp || formFieldReadOnly;\n  const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n  const [focused, setFocused] = useState(false);\n\n  const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n  const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n  const {\n    \"aria-describedby\": inputDescribedBy,\n    \"aria-labelledby\": inputLabelledBy,\n    onBlur,\n    onChange,\n    onFocus,\n    required: inputPropsRequired,\n    ...restInputProps\n  } = inputProps;\n\n  const isRequired = formFieldRequired\n    ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n    : inputPropsRequired;\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Input\",\n    state: \"value\",\n  });\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setValue(value);\n    onChange?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    onBlur?.(event);\n    setFocused(false);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setFocused(true);\n  };\n\n  const inputStyle = {\n    \"--input-textAlign\": textAlign,\n    ...style,\n  };\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        {\n          [withBaseName(\"focused\")]: !isDisabled && focused,\n          [withBaseName(\"disabled\")]: isDisabled,\n          [withBaseName(\"readOnly\")]: isReadOnly,\n          [withBaseName(validationStatus || \"\")]: validationStatus,\n        },\n        classNameProp\n      )}\n      ref={ref}\n      style={inputStyle}\n      {...other}\n    >\n      {startAdornment && (\n        <div className={withBaseName(\"startAdornmentContainer\")}>\n          {startAdornment}\n        </div>\n      )}\n      <input\n        aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n        aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n        className={clsx(withBaseName(\"input\"), inputProps?.className)}\n        disabled={isDisabled}\n        id={id}\n        readOnly={isReadOnly}\n        ref={inputRef}\n        role={role}\n        tabIndex={isDisabled ? -1 : 0}\n        onBlur={handleBlur}\n        onChange={handleChange}\n        onFocus={!isDisabled ? handleFocus : undefined}\n        placeholder={placeholder}\n        value={value}\n        {...restA11yProps}\n        {...restInputProps}\n        required={isRequired}\n      />\n      {!isDisabled && !isReadOnly && validationStatus && (\n        <StatusAdornment status={validationStatus} />\n      )}\n      {endAdornment && (\n        <div className={withBaseName(\"endAdornmentContainer\")}>\n          {endAdornment}\n        </div>\n      )}\n      <div className={withBaseName(\"activationIndicator\")} />\n    </div>\n  );\n});\n"],"names":["Input","inputCss","value"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../src/input/Input.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEvent,\n  ComponentPropsWithoutRef,\n  FocusEvent,\n  forwardRef,\n  InputHTMLAttributes,\n  ReactNode,\n  Ref,\n  useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { StatusAdornment } from \"../status-adornment\";\n\nimport inputCss from \"./Input.css\";\n\nconst withBaseName = makePrefixer(\"saltInput\");\n\nexport interface InputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n    Pick<\n      ComponentPropsWithoutRef<\"input\">,\n      \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n    > {\n  /**\n   * The marker to use in an empty read only Input.\n   * Use `''` to disable this feature. Defaults to '—'.\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * End adornment component\n   */\n  endAdornment?: ReactNode;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n   */\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Alignment of text within container. Defaults to \"left\"\n   */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /**\n   * Validation status.\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nexport const Input = forwardRef<HTMLDivElement, InputProps>(function Input(\n  {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    className: classNameProp,\n    disabled,\n    emptyReadOnlyMarker = \"—\",\n    endAdornment,\n    id,\n    inputProps = {},\n    inputRef,\n    placeholder,\n    readOnly: readOnlyProp,\n    role,\n    startAdornment,\n    style,\n    textAlign = \"left\",\n    value: valueProp,\n    defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n    validationStatus: validationStatusProp,\n    variant = \"primary\",\n    ...other\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-input\",\n    css: inputCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps: {\n      \"aria-describedby\": formFieldDescribedBy,\n      \"aria-labelledby\": formFieldLabelledBy,\n    } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    necessity: formFieldRequired,\n    validationStatus: formFieldValidationStatus,\n  } = useFormFieldProps();\n\n  const restA11yProps = {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n  };\n\n  const isDisabled = disabled || formFieldDisabled;\n  const isReadOnly = readOnlyProp || formFieldReadOnly;\n  const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n  const [focused, setFocused] = useState(false);\n\n  const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n  const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n  const {\n    \"aria-describedby\": inputDescribedBy,\n    \"aria-labelledby\": inputLabelledBy,\n    onBlur,\n    onChange,\n    onFocus,\n    required: inputPropsRequired,\n    ...restInputProps\n  } = inputProps;\n\n  const isRequired = formFieldRequired\n    ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n    : inputPropsRequired;\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Input\",\n    state: \"value\",\n  });\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setValue(value);\n    onChange?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    onBlur?.(event);\n    setFocused(false);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setFocused(true);\n  };\n\n  const inputStyle = {\n    \"--input-textAlign\": textAlign,\n    ...style,\n  };\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        {\n          [withBaseName(\"focused\")]: !isDisabled && focused,\n          [withBaseName(\"disabled\")]: isDisabled,\n          [withBaseName(\"readOnly\")]: isReadOnly,\n          [withBaseName(validationStatus || \"\")]: validationStatus,\n        },\n        classNameProp\n      )}\n      ref={ref}\n      style={inputStyle}\n      {...other}\n    >\n      {startAdornment && (\n        <div className={withBaseName(\"startAdornmentContainer\")}>\n          {startAdornment}\n        </div>\n      )}\n      <input\n        aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n        aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n        className={clsx(withBaseName(\"input\"), inputProps?.className)}\n        disabled={isDisabled}\n        id={id}\n        readOnly={isReadOnly}\n        ref={inputRef}\n        role={role}\n        tabIndex={isDisabled ? -1 : 0}\n        onBlur={handleBlur}\n        onChange={handleChange}\n        onFocus={!isDisabled ? handleFocus : undefined}\n        placeholder={placeholder}\n        value={value}\n        {...restA11yProps}\n        {...restInputProps}\n        required={isRequired}\n      />\n      {!isDisabled && !isReadOnly && validationStatus && (\n        <StatusAdornment status={validationStatus} />\n      )}\n      {endAdornment && (\n        <div className={withBaseName(\"endAdornmentContainer\")}>\n          {endAdornment}\n        </div>\n      )}\n      <div className={withBaseName(\"activationIndicator\")} />\n    </div>\n  );\n});\n"],"names":["Input","inputCss","value"],"mappings":"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"}

package/dist-es/interactable-card/InteractableCard.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to InteractableCard */\n.saltInteractableCard {\n  border-width: var(--saltInteractableCard-borderWidth, var(--salt-size-border));\n  border-style: var(--saltInteractableCard-borderStyle, var(--salt-container-borderStyle));\n  border-radius: var(--saltInteractableCard-borderRadius, var(--salt-palette-corner, 0));\n  display: block;\n  padding: var(--saltInteractableCard-padding, var(--salt-spacing-200));\n  position: relative;\n  text-align: start;\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to InteractableCard when variant=\"primary\" */\n.saltInteractableCard-primary {\n  background: var(--saltInteractableCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-primary-borderColor);\n  --card-accent-color: var(--salt-container-primary-borderColor);\n}\n\n/* Styles applied to InteractableCard when variant=\"secondary\" */\n.saltInteractableCard-secondary {\n  background: var(--saltInteractableCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor);\n  --card-accent-color: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to create accent */\n.saltInteractableCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltInteractableCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to InteractableCard if `accent=\"bottom\"` */\n.saltInteractableCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-border));\n  bottom: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-accent);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to InteractableCard if `accent=\"left\"` */\n.saltInteractableCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-accent);\n}\n\n/* Styles applied to InteractableCard if `accent=\"top\"` */\n.saltInteractableCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-accent);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to InteractableCard if `accent=\"right\"` */\n.saltInteractableCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-accent);\n}\n\n/* Styles applied to InteractableCard on focus */\n.saltInteractableCard:focus-visible {\n  cursor: var(--salt-selectable-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow-hover);\n  color: var(--saltInteractableCard-color-focus, var(--salt-content-primary-foreground));\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n  --card-accent-color: var(--salt-selectable-foreground-hover);\n}\n\n/* Styles applied on active state to InteractableCard and if `selected={true}` */\n.saltInteractableCard-selected,\n.saltInteractableCard:active,\n.saltInteractableCard-active {\n  cursor: var(--salt-selectable-cursor-hover);\n  border-color: var(--salt-selectable-borderColor-selected);\n  --card-accent-color: var(--salt-selectable-foreground-selected);\n}\n\n/* Styles applied to InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled,\n.saltInteractableCard-disabled:focus,\n.saltInteractableCard-disabled:active {\n  box-shadow: none;\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n  outline: none;\n  --card-accent-color: var(--salt-selectable-foreground-disabled);\n}\n\n/* Styles applied to InteractableCard primary variant if `disabled={true}` */\n.saltInteractableCard-primary.saltInteractableCard-disabled,\n.saltInteractableCard-primary.saltInteractableCard-disabled:focus,\n.saltInteractableCard-primary.saltInteractableCard-disabled:active {\n  background: var(--salt-container-primary-background-disabled);\n  border-color: var(--salt-container-primary-borderColor-disabled);\n}\n\n/* Styles applied to InteractableCard secondary variant if `disabled={true}` */\n.saltInteractableCard-secondary.saltInteractableCard-disabled,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:focus,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:active {\n  background: var(--saltInteractableCard-background-disabled, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor-disabled);\n}\n\n/* Styles applied to InteractableCard if `selected={true}`and `disabled={true}` */\n.saltInteractableCard-selected.saltInteractableCard-disabled,\n.saltInteractableCard-selected.saltInteractableCard-disabled:focus,\n.saltInteractableCard-selected.saltInteractableCard-disabled:hover,\n.saltInteractableCard-selected.saltInteractableCard-disabled:active {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  --card-accent-color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n/* Styles applied to nested divs in InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled div {\n  pointer-events: none;\n}\n\n/* Styles applied on hover state to InteractableCard */\n@media (hover: hover) {\n  .saltInteractableCard:hover {\n    cursor: var(--salt-selectable-cursor-hover);\n    box-shadow: var(--salt-overlayable-shadow-hover);\n    --card-accent-color: var(--salt-selectable-foreground-hover);\n  }\n\n  .saltInteractableCard-disabled:hover {\n    cursor: var(--salt-selectable-cursor-disabled);\n    box-shadow: none;\n    --card-accent-color: var(--salt-selectable-foreground-disabled);\n  }\n}\n";
+var css_248z = "/* Styles applied to InteractableCard */\n.saltInteractableCard {\n  border-width: var(--saltInteractableCard-borderWidth, var(--salt-size-border));\n  border-style: var(--saltInteractableCard-borderStyle, var(--salt-container-borderStyle));\n  border-radius: var(--saltInteractableCard-borderRadius, var(--salt-palette-corner, 0));\n  display: block;\n  padding: var(--saltInteractableCard-padding, var(--salt-spacing-200));\n  position: relative;\n  text-align: start;\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to InteractableCard when variant=\"primary\" */\n.saltInteractableCard-primary {\n  background: var(--saltInteractableCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-primary-borderColor);\n  --card-accent-color: var(--salt-container-primary-borderColor);\n}\n\n/* Styles applied to InteractableCard when variant=\"secondary\" */\n.saltInteractableCard-secondary {\n  background: var(--saltInteractableCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor);\n  --card-accent-color: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to create accent */\n.saltInteractableCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltInteractableCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to InteractableCard if `accent=\"bottom\"` */\n.saltInteractableCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-border));\n  bottom: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-bar);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to InteractableCard if `accent=\"left\"` */\n.saltInteractableCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to InteractableCard if `accent=\"top\"` */\n.saltInteractableCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-bar);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to InteractableCard if `accent=\"right\"` */\n.saltInteractableCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to InteractableCard on focus */\n.saltInteractableCard:focus-visible {\n  cursor: var(--salt-selectable-cursor-hover);\n  box-shadow: var(--salt-overlayable-shadow-hover);\n  color: var(--saltInteractableCard-color-focus, var(--salt-content-primary-foreground));\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n  --card-accent-color: var(--salt-selectable-foreground-hover);\n}\n\n/* Styles applied on active state to InteractableCard and if `selected={true}` */\n.saltInteractableCard-selected,\n.saltInteractableCard:active,\n.saltInteractableCard-active {\n  cursor: var(--salt-selectable-cursor-hover);\n  border-color: var(--salt-selectable-borderColor-selected);\n  --card-accent-color: var(--salt-selectable-foreground-selected);\n}\n\n/* Styles applied to InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled,\n.saltInteractableCard-disabled:focus,\n.saltInteractableCard-disabled:active {\n  box-shadow: none;\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n  outline: none;\n  --card-accent-color: var(--salt-selectable-foreground-disabled);\n}\n\n/* Styles applied to InteractableCard primary variant if `disabled={true}` */\n.saltInteractableCard-primary.saltInteractableCard-disabled,\n.saltInteractableCard-primary.saltInteractableCard-disabled:focus,\n.saltInteractableCard-primary.saltInteractableCard-disabled:active {\n  background: var(--salt-container-primary-background-disabled);\n  border-color: var(--salt-container-primary-borderColor-disabled);\n}\n\n/* Styles applied to InteractableCard secondary variant if `disabled={true}` */\n.saltInteractableCard-secondary.saltInteractableCard-disabled,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:focus,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:active {\n  background: var(--saltInteractableCard-background-disabled, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor-disabled);\n}\n\n/* Styles applied to InteractableCard if `selected={true}`and `disabled={true}` */\n.saltInteractableCard-selected.saltInteractableCard-disabled,\n.saltInteractableCard-selected.saltInteractableCard-disabled:focus,\n.saltInteractableCard-selected.saltInteractableCard-disabled:hover,\n.saltInteractableCard-selected.saltInteractableCard-disabled:active {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  --card-accent-color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n/* Styles applied to nested divs in InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled div {\n  pointer-events: none;\n}\n\n/* Styles applied on hover state to InteractableCard */\n@media (hover: hover) {\n  .saltInteractableCard:hover {\n    cursor: var(--salt-selectable-cursor-hover);\n    box-shadow: var(--salt-overlayable-shadow-hover);\n    --card-accent-color: var(--salt-selectable-foreground-hover);\n  }\n\n  .saltInteractableCard-disabled:hover {\n    cursor: var(--salt-selectable-cursor-disabled);\n    box-shadow: none;\n    --card-accent-color: var(--salt-selectable-foreground-disabled);\n  }\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=InteractableCard.css.js.map

package/dist-es/interactable-card/InteractableCard.js

@@ -23,6 +23,7 @@ import '../banner/BannerActions.js';
 import '../banner/BannerContent.js';
 import '../border-item/BorderItem.js';
 import '../border-layout/BorderLayout.js';
+import '../breakpoints/BreakpointProvider.js';
 import '../button/Button.js';
 import '../card/Card.js';
 import '../checkbox/Checkbox.js';
@@ -62,12 +63,18 @@ import { useInteractableCardGroup } from './InteractableCardGroupContext.js';
 import '../link/Link.js';
 import '../link-card/LinkCard.js';
 import '../list-control/ListControlContext.js';
+import '../menu/MenuContext.js';
+import '@floating-ui/react';
+import '../menu/MenuItem.js';
+import '../menu/MenuPanel.js';
+import '../menu/MenuTriggerContext.js';
+import '../menu/MenuPanelContext.js';
+import '../menu/MenuGroup.js';
 import '../multiline-input/MultilineInput.js';
 import '../navigation-item/NavigationItem.js';
 import '../option/Option.js';
 import '../option/OptionGroup.js';
 import '../overlay/OverlayContext.js';
-import '@floating-ui/react';
 import '../overlay/OverlayPanel.js';
 import '../overlay/OverlayPanelCloseButton.js';
 import '../overlay/OverlayPanelContent.js';

package/dist-es/interactable-card/InteractableCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractableCard.js","sources":["../src/interactable-card/InteractableCard.tsx"],"sourcesContent":["import {\n  forwardRef,\n  MouseEvent,\n  ComponentPropsWithoutRef,\n  SyntheticEvent,\n  useRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { capitalize, makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport { useInteractableCard } from \"./useInteractableCard\";\nimport interactableCardCss from \"./InteractableCard.css\";\nimport {\n  InteractableCardValue,\n  useInteractableCardGroup,\n} from \"./InteractableCardGroupContext\";\n\nconst withBaseName = makePrefixer(\"saltInteractableCard\");\n\nexport interface InteractableCardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Accent border position: defaults to \"bottom\"\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * @deprecated Use the `accent` prop instead\n   */\n  accentPlacement?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * Value of card (for selectable use case).\n   */\n  value?: InteractableCardValue;\n}\n\nexport const InteractableCard = forwardRef<\n  HTMLDivElement,\n  InteractableCardProps\n>(function InteractableCard(props, ref) {\n  const {\n    accent,\n    accentPlacement,\n    children,\n    className,\n    disabled: disabledProp,\n    variant = \"primary\",\n    value,\n    onBlur,\n    onChange,\n    onClick,\n    onKeyUp,\n    onKeyDown,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-interactable-card\",\n    css: interactableCardCss,\n    window: targetWindow,\n  });\n\n  const interactableCardGroup = useInteractableCardGroup();\n\n  const interactableCardGroupSelected =\n    interactableCardGroup?.isSelected(value);\n\n  const disabled = interactableCardGroup?.disabled || disabledProp;\n\n  const [selected, setSelected] = useControlled({\n    controlled: interactableCardGroupSelected,\n    default: Boolean(false),\n    name: \"InteractableCard\",\n    state: \"selected\",\n  });\n\n  const role = interactableCardGroup\n    ? interactableCardGroup.multiSelect\n      ? \"checkbox\"\n      : \"radio\"\n    : \"button\";\n\n  const isMultiselect =\n    interactableCardGroup && interactableCardGroup.multiSelect;\n\n  const isFirstChild =\n    interactableCardGroup && interactableCardGroup.isFirstChild(value);\n\n  const ariaChecked =\n    role === \"radio\" || role === \"checkbox\" ? selected : undefined;\n\n  const accentValue = accent || accentPlacement;\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (interactableCardGroup && !disabled) {\n      interactableCardGroup.select(event, value);\n      setSelected(!selected);\n    }\n    onChange?.(event);\n    onClick?.(event);\n  };\n\n  let tabIndex;\n\n  if (interactableCardGroup) {\n    if (disabled) {\n      tabIndex = -1;\n    } else if (isMultiselect) {\n      tabIndex = 0; // All items focusable in multi-select\n    } else {\n      // Single select: Only selected or first item (if none are selected) is focusable\n      tabIndex = selected ? 0 : -1;\n      if (!interactableCardGroup.value && isFirstChild) {\n        tabIndex = 0;\n      }\n    }\n  } else {\n    tabIndex = disabled ? -1 : 0;\n  }\n\n  const cardRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, cardRef);\n\n  const { active, cardProps } = useInteractableCard({\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onBlur,\n    onClick,\n  });\n\n  return (\n    <div\n      {...cardProps}\n      role={role}\n      aria-checked={ariaChecked}\n      aria-disabled={disabled}\n      data-value={value}\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        {\n          [withBaseName(\"accent\")]: accentValue,\n          [withBaseName(`accent${capitalize(accentValue ?? \"\")}`)]: accentValue,\n          [withBaseName(\"active\")]: role === \"button\" && active,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"selected\")]: selected,\n        },\n        className\n      )}\n      {...rest}\n      onClick={handleClick}\n      ref={handleRef}\n      tabIndex={tabIndex}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["InteractableCard","interactableCardCss"],"mappings":"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"}
+{"version":3,"file":"InteractableCard.js","sources":["../src/interactable-card/InteractableCard.tsx"],"sourcesContent":["import {\n  forwardRef,\n  MouseEvent,\n  ComponentPropsWithoutRef,\n  SyntheticEvent,\n  useRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { capitalize, makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport { useInteractableCard } from \"./useInteractableCard\";\nimport interactableCardCss from \"./InteractableCard.css\";\nimport {\n  InteractableCardValue,\n  useInteractableCardGroup,\n} from \"./InteractableCardGroupContext\";\n\nconst withBaseName = makePrefixer(\"saltInteractableCard\");\n\nexport interface InteractableCardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Accent border position: defaults to \"bottom\"\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * @deprecated Use the `accent` prop instead\n   */\n  accentPlacement?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * Value of card (for selectable use case).\n   */\n  value?: InteractableCardValue;\n}\n\nexport const InteractableCard = forwardRef<\n  HTMLDivElement,\n  InteractableCardProps\n>(function InteractableCard(props, ref) {\n  const {\n    accent,\n    accentPlacement,\n    children,\n    className,\n    disabled: disabledProp,\n    variant = \"primary\",\n    value,\n    onBlur,\n    onChange,\n    onClick,\n    onKeyUp,\n    onKeyDown,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-interactable-card\",\n    css: interactableCardCss,\n    window: targetWindow,\n  });\n\n  const interactableCardGroup = useInteractableCardGroup();\n\n  const interactableCardGroupSelected =\n    interactableCardGroup?.isSelected(value);\n\n  const disabled = interactableCardGroup?.disabled || disabledProp;\n\n  const [selected, setSelected] = useControlled({\n    controlled: interactableCardGroupSelected,\n    default: Boolean(false),\n    name: \"InteractableCard\",\n    state: \"selected\",\n  });\n\n  const role = interactableCardGroup\n    ? interactableCardGroup.multiSelect\n      ? \"checkbox\"\n      : \"radio\"\n    : \"button\";\n\n  const isMultiselect =\n    interactableCardGroup && interactableCardGroup.multiSelect;\n\n  const isFirstChild =\n    interactableCardGroup && interactableCardGroup.isFirstChild(value);\n\n  const ariaChecked =\n    role === \"radio\" || role === \"checkbox\" ? selected : undefined;\n\n  const accentValue = accent || accentPlacement;\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (interactableCardGroup && !disabled) {\n      interactableCardGroup.select(event, value);\n      setSelected(!selected);\n    }\n    onChange?.(event);\n    onClick?.(event);\n  };\n\n  let tabIndex;\n\n  if (interactableCardGroup) {\n    if (disabled) {\n      tabIndex = -1;\n    } else if (isMultiselect) {\n      tabIndex = 0; // All items focusable in multi-select\n    } else {\n      // Single select: Only selected or first item (if none are selected) is focusable\n      tabIndex = selected ? 0 : -1;\n      if (!interactableCardGroup.value && isFirstChild) {\n        tabIndex = 0;\n      }\n    }\n  } else {\n    tabIndex = disabled ? -1 : 0;\n  }\n\n  const cardRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, cardRef);\n\n  const { active, cardProps } = useInteractableCard({\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onBlur,\n    onClick,\n  });\n\n  return (\n    <div\n      {...cardProps}\n      role={role}\n      aria-checked={ariaChecked}\n      aria-disabled={disabled}\n      data-value={value}\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        {\n          [withBaseName(\"accent\")]: accentValue,\n          [withBaseName(`accent${capitalize(accentValue ?? \"\")}`)]: accentValue,\n          [withBaseName(\"active\")]: role === \"button\" && active,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"selected\")]: selected,\n        },\n        className\n      )}\n      {...rest}\n      onClick={handleClick}\n      ref={handleRef}\n      tabIndex={tabIndex}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["InteractableCard","interactableCardCss"],"mappings":"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"}

package/dist-es/interactable-card/InteractableCardGroup.js

@@ -22,6 +22,7 @@ import '../banner/BannerActions.js';
 import '../banner/BannerContent.js';
 import '../border-item/BorderItem.js';
 import '../border-layout/BorderLayout.js';
+import '../breakpoints/BreakpointProvider.js';
 import '../button/Button.js';
 import '../card/Card.js';
 import '../checkbox/Checkbox.js';
@@ -61,12 +62,18 @@ import { InteractableCardGroupContext } from './InteractableCardGroupContext.js'
 import '../link/Link.js';
 import '../link-card/LinkCard.js';
 import '../list-control/ListControlContext.js';
+import '../menu/MenuContext.js';
+import '@floating-ui/react';
+import '../menu/MenuItem.js';
+import '../menu/MenuPanel.js';
+import '../menu/MenuTriggerContext.js';
+import '../menu/MenuPanelContext.js';
+import '../menu/MenuGroup.js';
 import '../multiline-input/MultilineInput.js';
 import '../navigation-item/NavigationItem.js';
 import '../option/Option.js';
 import '../option/OptionGroup.js';
 import '../overlay/OverlayContext.js';
-import '@floating-ui/react';
 import '../overlay/OverlayPanel.js';
 import '../overlay/OverlayPanelCloseButton.js';
 import '../overlay/OverlayPanelContent.js';

package/dist-es/interactable-card/InteractableCardGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractableCardGroup.js","sources":["../src/interactable-card/InteractableCardGroup.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  KeyboardEvent,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport {\n  InteractableCardGroupContext,\n  InteractableCardValue,\n} from \"./InteractableCardGroupContext\";\nimport interactableCardGroupCss from \"./InteractableCardGroup.css\";\n\nexport interface InteractableCardGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The default value. Use when the component is not controlled. Should be an array when `multiSelect` is true.\n   */\n  defaultValue?: InteractableCardValue;\n  /**\n   * If `true`, the Interactable Card Group will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value. Use when the component is controlled. Should be an array when `multiSelect` is true.\n   */\n  value?: InteractableCardValue;\n  /**\n   * If `true` the Interactable Card Group will allow multiple selection functionality, with keyboard interactions matching those of a checkbox.\n   * By default the group allows mutually exclusive selection with keyboard interactions matching radio buttons.\n   */\n  multiSelect?: boolean;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (\n    event: SyntheticEvent<HTMLDivElement>,\n    value: InteractableCardValue\n  ) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltInteractableCardGroup\");\n\nexport const InteractableCardGroup = forwardRef<\n  HTMLDivElement,\n  InteractableCardGroupProps\n>(function InteractableCardGroup(props, ref) {\n  const {\n    children,\n    className,\n    value: valueProp,\n    defaultValue,\n    disabled,\n    onChange,\n    onKeyDown,\n    multiSelect,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-interactable-card-group\",\n    css: interactableCardGroupCss,\n    window: targetWindow,\n  });\n\n  const groupRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, groupRef);\n\n  const [value, setValue] = useControlled({\n    default: defaultValue,\n    controlled: valueProp,\n    name: \"InteractableCardGroup\",\n    state: \"value\",\n  });\n\n  const [elements, setElements] = useState<HTMLElement[]>([]);\n\n  useEffect(() => {\n    const childElements: HTMLElement[] = Array.from(\n      groupRef.current?.querySelectorAll(\n        \".saltInteractableCard:not([disabled])\"\n      ) ?? []\n    );\n    setElements(childElements);\n  }, [children]);\n\n  const select = useCallback(\n    (\n      event: SyntheticEvent<HTMLDivElement>,\n      newValue: InteractableCardValue\n    ) => {\n      if (multiSelect) {\n        const currentValues = Array.isArray(value) ? value : [];\n        const isSelected = currentValues.includes(newValue);\n\n        const nextValues = isSelected\n          ? currentValues.filter((val) => val !== newValue)\n          : [...currentValues, newValue];\n        setValue(nextValues);\n        onChange?.(event, nextValues);\n      } else {\n        setValue(newValue);\n        if (value !== newValue) {\n          onChange?.(event, newValue);\n        }\n      }\n    },\n    [onChange, value, setValue, multiSelect]\n  );\n\n  const isSelected = useCallback(\n    (cardValue: InteractableCardValue) =>\n      multiSelect\n        ? Array.isArray(value) && value.includes(cardValue)\n        : cardValue !== undefined && value === cardValue,\n    [value, multiSelect]\n  );\n\n  const isFirstChild = useCallback(\n    (cardValue: InteractableCardValue) => {\n      return (\n        elements.findIndex(\n          (element) => element.getAttribute(\"data-value\") === cardValue\n        ) === 0\n      );\n    },\n    [elements]\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      select,\n      isSelected,\n      isFirstChild,\n      disabled,\n      multiSelect,\n      value,\n    }),\n    [select, isSelected, disabled, multiSelect, isFirstChild, value]\n  );\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const currentIndex = elements.findIndex(\n      (element) => element === document.activeElement\n    );\n    const nextIndex = (currentIndex + 1) % elements.length;\n    const prevIndex = (currentIndex - 1 + elements.length) % elements.length;\n\n    if (event.key == \" \") {\n      event.preventDefault();\n      select(\n        event,\n        elements[currentIndex].getAttribute(\n          \"data-value\"\n        ) as InteractableCardValue\n      );\n    }\n\n    if (!multiSelect) {\n      switch (event.key) {\n        case \"ArrowDown\":\n        case \"ArrowRight\":\n          const nextValue = elements[nextIndex].getAttribute(\n            \"data-value\"\n          ) as InteractableCardValue;\n          select(event, nextValue);\n          elements[nextIndex]?.focus();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowLeft\":\n          const prevValue = elements[prevIndex].getAttribute(\n            \"data-value\"\n          ) as InteractableCardValue;\n          select(event, prevValue);\n          elements[prevIndex]?.focus();\n          break;\n      }\n    }\n    onKeyDown?.(event);\n  };\n\n  return (\n    <InteractableCardGroupContext.Provider value={contextValue}>\n      <div\n        className={clsx(withBaseName(), className)}\n        role={multiSelect ? \"group\" : \"radiogroup\"}\n        onKeyDown={handleKeyDown}\n        ref={handleRef}\n        {...rest}\n      >\n        {children}\n      </div>\n    </InteractableCardGroupContext.Provider>\n  );\n});\n"],"names":["InteractableCardGroup","interactableCardGroupCss","isSelected"],"mappings":"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"}
+{"version":3,"file":"InteractableCardGroup.js","sources":["../src/interactable-card/InteractableCardGroup.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  KeyboardEvent,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport {\n  InteractableCardGroupContext,\n  InteractableCardValue,\n} from \"./InteractableCardGroupContext\";\nimport interactableCardGroupCss from \"./InteractableCardGroup.css\";\n\nexport interface InteractableCardGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The default value. Use when the component is not controlled. Should be an array when `multiSelect` is true.\n   */\n  defaultValue?: InteractableCardValue;\n  /**\n   * If `true`, the Interactable Card Group will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value. Use when the component is controlled. Should be an array when `multiSelect` is true.\n   */\n  value?: InteractableCardValue;\n  /**\n   * If `true` the Interactable Card Group will allow multiple selection functionality, with keyboard interactions matching those of a checkbox.\n   * By default the group allows mutually exclusive selection with keyboard interactions matching radio buttons.\n   */\n  multiSelect?: boolean;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (\n    event: SyntheticEvent<HTMLDivElement>,\n    value: InteractableCardValue\n  ) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltInteractableCardGroup\");\n\nexport const InteractableCardGroup = forwardRef<\n  HTMLDivElement,\n  InteractableCardGroupProps\n>(function InteractableCardGroup(props, ref) {\n  const {\n    children,\n    className,\n    value: valueProp,\n    defaultValue,\n    disabled,\n    onChange,\n    onKeyDown,\n    multiSelect,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-interactable-card-group\",\n    css: interactableCardGroupCss,\n    window: targetWindow,\n  });\n\n  const groupRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, groupRef);\n\n  const [value, setValue] = useControlled({\n    default: defaultValue,\n    controlled: valueProp,\n    name: \"InteractableCardGroup\",\n    state: \"value\",\n  });\n\n  const [elements, setElements] = useState<HTMLElement[]>([]);\n\n  useEffect(() => {\n    const childElements: HTMLElement[] = Array.from(\n      groupRef.current?.querySelectorAll(\n        \".saltInteractableCard:not([disabled])\"\n      ) ?? []\n    );\n    setElements(childElements);\n  }, [children]);\n\n  const select = useCallback(\n    (\n      event: SyntheticEvent<HTMLDivElement>,\n      newValue: InteractableCardValue\n    ) => {\n      if (multiSelect) {\n        const currentValues = Array.isArray(value) ? value : [];\n        const isSelected = currentValues.includes(newValue);\n\n        const nextValues = isSelected\n          ? currentValues.filter((val) => val !== newValue)\n          : [...currentValues, newValue];\n        setValue(nextValues);\n        onChange?.(event, nextValues);\n      } else {\n        setValue(newValue);\n        if (value !== newValue) {\n          onChange?.(event, newValue);\n        }\n      }\n    },\n    [onChange, value, setValue, multiSelect]\n  );\n\n  const isSelected = useCallback(\n    (cardValue: InteractableCardValue) =>\n      multiSelect\n        ? Array.isArray(value) && value.includes(cardValue)\n        : cardValue !== undefined && value === cardValue,\n    [value, multiSelect]\n  );\n\n  const isFirstChild = useCallback(\n    (cardValue: InteractableCardValue) => {\n      return (\n        elements.findIndex(\n          (element) => element.getAttribute(\"data-value\") === cardValue\n        ) === 0\n      );\n    },\n    [elements]\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      select,\n      isSelected,\n      isFirstChild,\n      disabled,\n      multiSelect,\n      value,\n    }),\n    [select, isSelected, disabled, multiSelect, isFirstChild, value]\n  );\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const currentIndex = elements.findIndex(\n      (element) => element === document.activeElement\n    );\n    const nextIndex = (currentIndex + 1) % elements.length;\n    const prevIndex = (currentIndex - 1 + elements.length) % elements.length;\n\n    if (event.key == \" \") {\n      event.preventDefault();\n      select(\n        event,\n        elements[currentIndex].getAttribute(\n          \"data-value\"\n        ) as InteractableCardValue\n      );\n    }\n\n    if (!multiSelect) {\n      switch (event.key) {\n        case \"ArrowDown\":\n        case \"ArrowRight\":\n          const nextValue = elements[nextIndex].getAttribute(\n            \"data-value\"\n          ) as InteractableCardValue;\n          select(event, nextValue);\n          elements[nextIndex]?.focus();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowLeft\":\n          const prevValue = elements[prevIndex].getAttribute(\n            \"data-value\"\n          ) as InteractableCardValue;\n          select(event, prevValue);\n          elements[prevIndex]?.focus();\n          break;\n      }\n    }\n    onKeyDown?.(event);\n  };\n\n  return (\n    <InteractableCardGroupContext.Provider value={contextValue}>\n      <div\n        className={clsx(withBaseName(), className)}\n        role={multiSelect ? \"group\" : \"radiogroup\"}\n        onKeyDown={handleKeyDown}\n        ref={handleRef}\n        {...rest}\n      >\n        {children}\n      </div>\n    </InteractableCardGroupContext.Provider>\n  );\n});\n"],"names":["InteractableCardGroup","interactableCardGroupCss","isSelected"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAM,YAAA,GAAe,aAAa,2BAA2B,CAAA,CAAA;AAEtD,MAAM,qBAAwB,GAAA,UAAA,CAGnC,SAASA,sBAAAA,CAAsB,OAAO,GAAK,EAAA;AAC3C,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,YAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,8BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAW,OAAuB,IAAI,CAAA,CAAA;AAC5C,EAAM,MAAA,SAAA,GAAY,UAAW,CAAA,GAAA,EAAK,QAAQ,CAAA,CAAA;AAE1C,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,aAAc,CAAA;AAAA,IACtC,OAAS,EAAA,YAAA;AAAA,IACT,UAAY,EAAA,SAAA;AAAA,IACZ,IAAM,EAAA,uBAAA;AAAA,IACN,KAAO,EAAA,OAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,QAAA,CAAwB,EAAE,CAAA,CAAA;AAE1D,EAAA,SAAA,CAAU,MAAM;AAxFlB,IAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAyFI,IAAA,MAAM,gBAA+B,KAAM,CAAA,IAAA;AAAA,MACzC,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,QAAA,CAAS,YAAT,IAAkB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAA;AAAA,QAChB,uCAAA;AAAA,OAAA,KADF,YAEK,EAAC;AAAA,KACR,CAAA;AACA,IAAA,WAAA,CAAY,aAAa,CAAA,CAAA;AAAA,GAC3B,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAA,MAAM,MAAS,GAAA,WAAA;AAAA,IACb,CACE,OACA,QACG,KAAA;AACH,MAAA,IAAI,WAAa,EAAA;AACf,QAAA,MAAM,gBAAgB,KAAM,CAAA,OAAA,CAAQ,KAAK,CAAA,GAAI,QAAQ,EAAC,CAAA;AACtD,QAAMC,MAAAA,WAAAA,GAAa,aAAc,CAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AAElD,QAAA,MAAM,UAAaA,GAAAA,WAAAA,GACf,aAAc,CAAA,MAAA,CAAO,CAAC,GAAA,KAAQ,GAAQ,KAAA,QAAQ,CAC9C,GAAA,CAAC,GAAG,aAAA,EAAe,QAAQ,CAAA,CAAA;AAC/B,QAAA,QAAA,CAAS,UAAU,CAAA,CAAA;AACnB,QAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,KAAO,EAAA,UAAA,CAAA,CAAA;AAAA,OACb,MAAA;AACL,QAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AACjB,QAAA,IAAI,UAAU,QAAU,EAAA;AACtB,UAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,KAAO,EAAA,QAAA,CAAA,CAAA;AAAA,SACpB;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,QAAA,EAAU,KAAO,EAAA,QAAA,EAAU,WAAW,CAAA;AAAA,GACzC,CAAA;AAEA,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,SAAA,KACC,WACI,GAAA,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAK,IAAA,KAAA,CAAM,QAAS,CAAA,SAAS,CAChD,GAAA,SAAA,KAAc,UAAa,KAAU,KAAA,SAAA;AAAA,IAC3C,CAAC,OAAO,WAAW,CAAA;AAAA,GACrB,CAAA;AAEA,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,SAAqC,KAAA;AACpC,MAAA,OACE,QAAS,CAAA,SAAA;AAAA,QACP,CAAC,OAAA,KAAY,OAAQ,CAAA,YAAA,CAAa,YAAY,CAAM,KAAA,SAAA;AAAA,OAChD,KAAA,CAAA,CAAA;AAAA,KAEV;AAAA,IACA,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EAAA,MAAM,YAAe,GAAA,OAAA;AAAA,IACnB,OAAO;AAAA,MACL,MAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,MAAQ,EAAA,UAAA,EAAY,QAAU,EAAA,WAAA,EAAa,cAAc,KAAK,CAAA;AAAA,GACjE,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAAyC,KAAA;AAxJlE,IAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAyJI,IAAA,MAAM,eAAe,QAAS,CAAA,SAAA;AAAA,MAC5B,CAAC,OAAY,KAAA,OAAA,KAAY,QAAS,CAAA,aAAA;AAAA,KACpC,CAAA;AACA,IAAM,MAAA,SAAA,GAAA,CAAa,YAAe,GAAA,CAAA,IAAK,QAAS,CAAA,MAAA,CAAA;AAChD,IAAA,MAAM,SAAa,GAAA,CAAA,YAAA,GAAe,CAAI,GAAA,QAAA,CAAS,UAAU,QAAS,CAAA,MAAA,CAAA;AAElE,IAAI,IAAA,KAAA,CAAM,OAAO,GAAK,EAAA;AACpB,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,MAAA;AAAA,QACE,KAAA;AAAA,QACA,SAAS,YAAc,CAAA,CAAA,YAAA;AAAA,UACrB,YAAA;AAAA,SACF;AAAA,OACF,CAAA;AAAA,KACF;AAEA,IAAA,IAAI,CAAC,WAAa,EAAA;AAChB,MAAA,QAAQ,KAAM,CAAA,GAAA;AAAA,QACP,KAAA,WAAA,CAAA;AAAA,QACA,KAAA,YAAA;AACH,UAAM,MAAA,SAAA,GAAY,SAAS,SAAW,CAAA,CAAA,YAAA;AAAA,YACpC,YAAA;AAAA,WACF,CAAA;AACA,UAAA,MAAA,CAAO,OAAO,SAAS,CAAA,CAAA;AACvB,UAAA,CAAA,EAAA,GAAA,QAAA,CAAS,eAAT,IAAqB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AACrB,UAAA,MAAA;AAAA,QACG,KAAA,SAAA,CAAA;AAAA,QACA,KAAA,WAAA;AACH,UAAM,MAAA,SAAA,GAAY,SAAS,SAAW,CAAA,CAAA,YAAA;AAAA,YACpC,YAAA;AAAA,WACF,CAAA;AACA,UAAA,MAAA,CAAO,OAAO,SAAS,CAAA,CAAA;AACvB,UAAA,CAAA,EAAA,GAAA,QAAA,CAAS,eAAT,IAAqB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AACrB,UAAA,MAAA;AAAA,OAAA;AAAA,KAEN;AACA,IAAY,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACd,CAAA;AAEA,EACE,uBAAA,GAAA,CAAC,6BAA6B,QAA7B,EAAA;AAAA,IAAsC,KAAO,EAAA,YAAA;AAAA,IAC5C,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,IAAA,EAAM,cAAc,OAAU,GAAA,YAAA;AAAA,MAC9B,SAAW,EAAA,aAAA;AAAA,MACX,GAAK,EAAA,SAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}