@salt-ds/core 1.8.0-rc.0 → 1.8.0-rc.2

package/dist-es/tooltip/Tooltip.js

@@ -14,6 +14,8 @@ import '../viewport/ViewportProvider.js';
 import { mergeProps } from '../utils/mergeProps.js';
 import { useTooltip } from './useTooltip.js';
 import css_248z from './Tooltip.css.js';
+import '../form-field-context/FormFieldContext.js';
+import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
 
 const withBaseName = makePrefixer("saltTooltip");
 const Tooltip = forwardRef(
@@ -21,17 +23,24 @@ const Tooltip = forwardRef(
     const {
       children,
       className,
-      disabled,
+      disabled: disabledProp,
       hideArrow = false,
       hideIcon = false,
       open: openProp,
       content,
-      status = "info",
+      status: statusProp = "info",
       placement = "right",
       enterDelay = 300,
       leaveDelay = 0,
       ...rest
     } = props;
+    const {
+      a11yProps,
+      disabled: formFieldDisabled,
+      validationStatus: formFieldValidationStatus
+    } = useFormFieldProps();
+    const disabled = formFieldDisabled != null ? formFieldDisabled : disabledProp;
+    const status = formFieldValidationStatus != null ? formFieldValidationStatus : statusProp;
     const targetWindow = useWindow();
     useComponentCssInjection({
       testId: "salt-tooltip",
@@ -84,6 +93,7 @@ const Tooltip = forwardRef(
                       className: withBaseName("icon")
                     }),
                     /* @__PURE__ */ jsx("span", {
+                      id: a11yProps == null ? void 0 : a11yProps["aria-describedby"],
                       className: withBaseName("content"),
                       children: content
                     })

package/dist-es/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  isValidElement,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { FloatingArrow, FloatingPortal } from \"@floating-ui/react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport {\n  makePrefixer,\n  mergeProps,\n  UseFloatingUIProps,\n  useForkRef,\n} from \"../utils\";\nimport { SaltProvider } from \"../salt-provider\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport tooltipCss from \"./Tooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n  extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n  /**\n   * The children will be the Tooltip's trigger.\n   */\n  children: ReactNode;\n  /**\n   * Whether to hide the Tooltip arrow. Defaults to `false`.\n   */\n  hideArrow?: boolean;\n  /**\n   * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n   */\n  hideIcon?: boolean;\n  /**\n   * Content displayed inside the Tooltip. Can be a string or a React component.\n   */\n  content: ReactNode;\n  /**\n   * A string to determine the status of the Tooltip. Defaults to `info`.\n   */\n  status?: ValidationStatus;\n  /**\n   * Delay in milliseconds before the Tooltip is shown.\n   */\n  enterDelay?: number;\n  /**\n   * Delay in milliseconds before the Tooltip is hidden.\n   */\n  leaveDelay?: number;\n  /**\n   * Option to not display the Tooltip. Can be used in conditional situations like text truncation.\n   */\n  disabled?: boolean;\n  /**\n   * Option to remove the hover listener.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * Option to remove the focus listener.\n   */\n  disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(props, ref) {\n    const {\n      children,\n      className,\n      disabled,\n      hideArrow = false,\n      hideIcon = false,\n      open: openProp,\n      content,\n      status = \"info\",\n      placement = \"right\",\n      enterDelay = 300,\n      leaveDelay = 0,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tooltip\",\n      css: tooltipCss,\n      window: targetWindow,\n    });\n\n    const hookProps: UseTooltipProps = {\n      open: openProp,\n      placement,\n      enterDelay,\n      leaveDelay,\n      ...rest,\n    };\n\n    const {\n      arrowProps,\n      open,\n      floating,\n      reference,\n      getTriggerProps,\n      getTooltipProps,\n    } = useTooltip(hookProps);\n\n    const triggerRef = useForkRef(\n      // @ts-ignore\n      isValidElement(children) ? children.ref : null,\n      reference\n    );\n\n    const floatingRef = useForkRef(floating, ref) as Ref<HTMLDivElement>;\n\n    return (\n      <>\n        {isValidElement(children) &&\n          cloneElement(children, {\n            ...mergeProps(getTriggerProps(), children.props),\n            ref: triggerRef,\n          })}\n\n        {open && !disabled && (\n          <FloatingPortal>\n            {/* The provider is needed to support the use case where an app has nested modes. The element that is portalled needs to have the same style as the current scope */}\n            <SaltProvider>\n              <div\n                className={clsx(\n                  withBaseName(),\n                  withBaseName(status),\n                  className\n                )}\n                ref={floatingRef}\n                {...getTooltipProps()}\n              >\n                <div className={withBaseName(\"container\")}>\n                  {!hideIcon && (\n                    <StatusIndicator\n                      status={status}\n                      size={1}\n                      className={withBaseName(\"icon\")}\n                    />\n                  )}\n                  <span className={withBaseName(\"content\")}>{content}</span>\n                </div>\n                {!hideArrow && (\n                  <FloatingArrow\n                    {...arrowProps}\n                    className={withBaseName(\"arrow\")}\n                    strokeWidth={1}\n                    fill=\"var(--salt-container-primary-background)\"\n                    stroke=\"var(--tooltip-status-borderColor)\"\n                    height={5}\n                    width={10}\n                  />\n                )}\n              </div>\n            </SaltProvider>\n          </FloatingPortal>\n        )}\n      </>\n    );\n  }\n);\n"],"names":["Tooltip","tooltipCss"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AA+CxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAS,GAAA,MAAA;AAAA,MACT,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACV,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACL,CAAA;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,KACF,GAAI,WAAW,SAAS,CAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,UAAA;AAAA,MAEjB,cAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,MAC1C,SAAA;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,UAAW,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE5C,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAe,cAAA,CAAA,QAAQ,CACtB,IAAA,YAAA,CAAa,QAAU,EAAA;AAAA,UACrB,GAAG,UAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,UAC/C,GAAK,EAAA,UAAA;AAAA,SACN,CAAA;AAAA,QAEF,IAAA,IAAQ,CAAC,QAAA,oBACP,GAAA,CAAA,cAAA,EAAA;AAAA,UAEC,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA;AAAA,YACC,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA;AAAA,cACC,SAAW,EAAA,IAAA;AAAA,gBACT,YAAa,EAAA;AAAA,gBACb,aAAa,MAAM,CAAA;AAAA,gBACnB,SAAA;AAAA,eACF;AAAA,cACA,GAAK,EAAA,WAAA;AAAA,cACJ,GAAG,eAAgB,EAAA;AAAA,cAEpB,QAAA,EAAA;AAAA,gCAAC,IAAA,CAAA,KAAA,EAAA;AAAA,kBAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,kBACrC,QAAA,EAAA;AAAA,oBAAA,CAAC,4BACC,GAAA,CAAA,eAAA,EAAA;AAAA,sBACC,MAAA;AAAA,sBACA,IAAM,EAAA,CAAA;AAAA,sBACN,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,qBAChC,CAAA;AAAA,oCAED,GAAA,CAAA,MAAA,EAAA;AAAA,sBAAK,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,sBAAI,QAAA,EAAA,OAAA;AAAA,qBAAQ,CAAA;AAAA,mBAAA;AAAA,iBACrD,CAAA;AAAA,gBACC,CAAC,6BACC,GAAA,CAAA,aAAA,EAAA;AAAA,kBACE,GAAG,UAAA;AAAA,kBACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,kBAC/B,WAAa,EAAA,CAAA;AAAA,kBACb,IAAK,EAAA,0CAAA;AAAA,kBACL,MAAO,EAAA,mCAAA;AAAA,kBACP,MAAQ,EAAA,CAAA;AAAA,kBACR,KAAO,EAAA,EAAA;AAAA,iBACT,CAAA;AAAA,eAAA;AAAA,aAEJ,CAAA;AAAA,WACF,CAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  isValidElement,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { FloatingArrow, FloatingPortal } from \"@floating-ui/react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport {\n  makePrefixer,\n  mergeProps,\n  UseFloatingUIProps,\n  useForkRef,\n} from \"../utils\";\nimport { SaltProvider } from \"../salt-provider\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport tooltipCss from \"./Tooltip.css\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n  extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n  /**\n   * The children will be the Tooltip's trigger.\n   */\n  children: ReactNode;\n  /**\n   * Whether to hide the Tooltip arrow. Defaults to `false`.\n   */\n  hideArrow?: boolean;\n  /**\n   * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n   */\n  hideIcon?: boolean;\n  /**\n   * Content displayed inside the Tooltip. Can be a string or a React component.\n   */\n  content: ReactNode;\n  /**\n   * A string to determine the status of the Tooltip. Defaults to `info`.\n   */\n  status?: ValidationStatus;\n  /**\n   * Delay in milliseconds before the Tooltip is shown.\n   */\n  enterDelay?: number;\n  /**\n   * Delay in milliseconds before the Tooltip is hidden.\n   */\n  leaveDelay?: number;\n  /**\n   * Option to not display the Tooltip. Can be used in conditional situations like text truncation.\n   */\n  disabled?: boolean;\n  /**\n   * Option to remove the hover listener.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * Option to remove the focus listener.\n   */\n  disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(props, ref) {\n    const {\n      children,\n      className,\n      disabled: disabledProp,\n      hideArrow = false,\n      hideIcon = false,\n      open: openProp,\n      content,\n      status: statusProp = \"info\",\n      placement = \"right\",\n      enterDelay = 300,\n      leaveDelay = 0,\n      ...rest\n    } = props;\n\n    const {\n      a11yProps,\n      disabled: formFieldDisabled,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const disabled = formFieldDisabled ?? disabledProp;\n    const status = formFieldValidationStatus ?? statusProp;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tooltip\",\n      css: tooltipCss,\n      window: targetWindow,\n    });\n\n    const hookProps: UseTooltipProps = {\n      open: openProp,\n      placement,\n      enterDelay,\n      leaveDelay,\n      ...rest,\n    };\n\n    const {\n      arrowProps,\n      open,\n      floating,\n      reference,\n      getTriggerProps,\n      getTooltipProps,\n    } = useTooltip(hookProps);\n\n    const triggerRef = useForkRef(\n      // @ts-ignore\n      isValidElement(children) ? children.ref : null,\n      reference\n    );\n\n    const floatingRef = useForkRef(floating, ref) as Ref<HTMLDivElement>;\n\n    return (\n      <>\n        {isValidElement(children) &&\n          cloneElement(children, {\n            ...mergeProps(getTriggerProps(), children.props),\n            ref: triggerRef,\n          })}\n\n        {open && !disabled && (\n          <FloatingPortal>\n            {/* The provider is needed to support the use case where an app has nested modes. The element that is portalled needs to have the same style as the current scope */}\n            <SaltProvider>\n              <div\n                className={clsx(\n                  withBaseName(),\n                  withBaseName(status),\n                  className\n                )}\n                ref={floatingRef}\n                {...getTooltipProps()}\n              >\n                <div className={withBaseName(\"container\")}>\n                  {!hideIcon && (\n                    <StatusIndicator\n                      status={status}\n                      size={1}\n                      className={withBaseName(\"icon\")}\n                    />\n                  )}\n                  <span\n                    id={a11yProps?.[\"aria-describedby\"]}\n                    className={withBaseName(\"content\")}\n                  >\n                    {content}\n                  </span>\n                </div>\n                {!hideArrow && (\n                  <FloatingArrow\n                    {...arrowProps}\n                    className={withBaseName(\"arrow\")}\n                    strokeWidth={1}\n                    fill=\"var(--salt-container-primary-background)\"\n                    stroke=\"var(--tooltip-status-borderColor)\"\n                    height={5}\n                    width={10}\n                  />\n                )}\n              </div>\n            </SaltProvider>\n          </FloatingPortal>\n        )}\n      </>\n    );\n  }\n);\n"],"names":["Tooltip","tooltipCss"],"mappings":"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"}

package/dist-es/utils/useResponsiveProp.js

@@ -2,7 +2,9 @@ import { useBreakpoints } from '../salt-provider/SaltProvider.js';
 import { useViewport } from '../viewport/ViewportProvider.js';
 
 const getCurrentBreakpoint = (breakpoints, width) => {
-  const breakpointList = Object.entries(breakpoints);
+  const breakpointList = Object.entries(breakpoints).sort(
+    ([, a], [, b]) => a - b
+  );
   const [currentBreakpoint] = breakpointList.reduce((acc, val) => {
     const [, accWidth] = acc;
     const [breakpoint, breakpointWidth] = val;
@@ -20,8 +22,7 @@ const useCurrentBreakpoint = () => {
 };
 const useOrderedBreakpoints = () => {
   const breakpoints = useBreakpoints();
-  const orderedBreakpoints = Object.entries(breakpoints).sort(([, a], [, b]) => a - b).map(([key]) => key);
-  return orderedBreakpoints;
+  return Object.entries(breakpoints).sort(([, a], [, b]) => a - b).map(([key]) => key);
 };
 const isObject = (value) => {
   const type = typeof value;
@@ -31,7 +32,7 @@ const hasBreakpointValues = (value, breakpoints) => {
   return isObject(value) && Object.keys(value).every((key) => key in breakpoints);
 };
 const getResponsiveValue = (breakpointValues, breakpoints, viewport, defaultValue) => {
-  const value = Object.entries(breakpointValues).reduce(
+  return Object.entries(breakpointValues).reduce(
     (acc, val) => {
       const [accWidth] = acc;
       const [breakpoint, breakpointValue] = val;
@@ -43,11 +44,12 @@ const getResponsiveValue = (breakpointValues, breakpoints, viewport, defaultValu
     },
     [0, defaultValue]
   )[1];
-  return value;
 };
 const useResponsiveProp = (value, defaultValue) => {
   const breakpoints = useBreakpoints();
   const viewport = useViewport();
+  if (value === defaultValue)
+    return defaultValue;
   const currentViewport = getCurrentBreakpoint(breakpoints, viewport);
   if (hasBreakpointValues(value, breakpoints)) {
     return getResponsiveValue(

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

@@ -1 +1 @@
-{"version":3,"file":"useResponsiveProp.js","sources":["../src/utils/useResponsiveProp.ts"],"sourcesContent":["import { Breakpoints } from \"../breakpoints\";\nimport { useBreakpoints } from \"../salt-provider\";\nimport { useViewport } from \"../viewport\";\n\ntype BreakpointProp<T> = {\n  [K in keyof Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | BreakpointProp<T>;\n\nexport const getCurrentBreakpoint = (\n  breakpoints: Breakpoints,\n  width: number\n) => {\n  const breakpointList = Object.entries(breakpoints);\n\n  const [currentBreakpoint] = (\n    breakpointList as [keyof Breakpoints, number][]\n  ).reduce((acc, val) => {\n    const [, accWidth] = acc;\n    const [breakpoint, breakpointWidth] = val;\n    if (breakpointWidth < width && breakpointWidth > accWidth) {\n      return [breakpoint, breakpointWidth];\n    }\n    return [...acc];\n  }, breakpointList[0] as [keyof Breakpoints, number]);\n\n  return currentBreakpoint;\n};\n\nexport const useCurrentBreakpoint = () => {\n  const viewport = useViewport();\n\n  const breakpoints = useBreakpoints();\n\n  return getCurrentBreakpoint(breakpoints, viewport);\n};\n\nexport const useOrderedBreakpoints = () => {\n  const breakpoints = useBreakpoints();\n\n  const orderedBreakpoints = Object.entries(breakpoints)\n    .sort(([, a], [, b]) => a - b)\n    .map(([key]) => key);\n\n  return orderedBreakpoints;\n};\n\nconst isObject = <T>(\n  value: T\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): value is Record<string | number | symbol, any> => {\n  const type = typeof value;\n  return value !== null && (type === \"object\" || type === \"function\");\n};\n\nconst hasBreakpointValues = <T>(\n  value: ResponsiveProp<T>,\n  breakpoints: Breakpoints\n): value is BreakpointProp<T> => {\n  return (\n    isObject(value) && Object.keys(value).every((key) => key in breakpoints)\n  );\n};\n\nconst getResponsiveValue = <T>(\n  breakpointValues: BreakpointProp<T>,\n  breakpoints: Breakpoints,\n  viewport: keyof Breakpoints,\n  defaultValue: T\n) => {\n  const value = Object.entries(breakpointValues).reduce<[number, T]>(\n    (acc, val) => {\n      const [accWidth] = acc;\n      const [breakpoint, breakpointValue] = val;\n\n      const breakpointWidth =\n        breakpoints[breakpoint as keyof typeof breakpoints];\n\n      if (\n        breakpointWidth >= accWidth &&\n        breakpointWidth <= breakpoints[viewport]\n      ) {\n        return [breakpointWidth, breakpointValue];\n      }\n\n      return acc;\n    },\n    [0, defaultValue]\n  )[1];\n\n  return value;\n};\n\nexport const useResponsiveProp = <T>(\n  value: ResponsiveProp<T>,\n  defaultValue: T\n) => {\n  const breakpoints = useBreakpoints();\n  const viewport = useViewport();\n\n  const currentViewport = getCurrentBreakpoint(breakpoints, viewport);\n\n  if (hasBreakpointValues(value, breakpoints)) {\n    return getResponsiveValue(\n      value,\n      breakpoints,\n      currentViewport,\n      defaultValue\n    );\n  }\n  return value;\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useResponsiveProp.js","sources":["../src/utils/useResponsiveProp.ts"],"sourcesContent":["import { Breakpoints } from \"../breakpoints\";\nimport { useBreakpoints } from \"../salt-provider\";\nimport { useViewport } from \"../viewport\";\n\ntype BreakpointProp<T> = {\n  [K in keyof Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | BreakpointProp<T>;\n\nexport const getCurrentBreakpoint = (\n  breakpoints: Breakpoints,\n  width: number\n) => {\n  const breakpointList = Object.entries(breakpoints).sort(\n    ([, a], [, b]) => a - b\n  );\n  const [currentBreakpoint] = (\n    breakpointList as [keyof Breakpoints, number][]\n  ).reduce((acc, val) => {\n    const [, accWidth] = acc;\n    const [breakpoint, breakpointWidth] = val;\n    if (breakpointWidth < width && breakpointWidth > accWidth) {\n      return [breakpoint, breakpointWidth];\n    }\n    return [...acc];\n  }, breakpointList[0] as [keyof Breakpoints, number]);\n\n  return currentBreakpoint;\n};\n\nexport const useCurrentBreakpoint = () => {\n  const viewport = useViewport();\n\n  const breakpoints = useBreakpoints();\n\n  return getCurrentBreakpoint(breakpoints, viewport);\n};\n\nexport const useOrderedBreakpoints = () => {\n  const breakpoints = useBreakpoints();\n\n  return Object.entries(breakpoints)\n    .sort(([, a], [, b]) => a - b)\n    .map(([key]) => key);\n};\n\nconst isObject = <T>(\n  value: T\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n): value is Record<string | number | symbol, any> => {\n  const type = typeof value;\n  return value !== null && (type === \"object\" || type === \"function\");\n};\n\nconst hasBreakpointValues = <T>(\n  value: ResponsiveProp<T>,\n  breakpoints: Breakpoints\n): value is BreakpointProp<T> => {\n  return (\n    isObject(value) && Object.keys(value).every((key) => key in breakpoints)\n  );\n};\n\nconst getResponsiveValue = <T>(\n  breakpointValues: BreakpointProp<T>,\n  breakpoints: Breakpoints,\n  viewport: keyof Breakpoints,\n  defaultValue: T\n) => {\n  return Object.entries(breakpointValues).reduce<[number, T]>(\n    (acc, val) => {\n      const [accWidth] = acc;\n      const [breakpoint, breakpointValue] = val;\n\n      const breakpointWidth =\n        breakpoints[breakpoint as keyof typeof breakpoints];\n\n      if (\n        breakpointWidth >= accWidth &&\n        breakpointWidth <= breakpoints[viewport]\n      ) {\n        return [breakpointWidth, breakpointValue];\n      }\n\n      return acc;\n    },\n    [0, defaultValue]\n  )[1];\n};\n\nexport const useResponsiveProp = <T>(\n  value: ResponsiveProp<T>,\n  defaultValue: T\n) => {\n  const breakpoints = useBreakpoints();\n  const viewport = useViewport();\n  // return early if the values are the same\n  if (value === defaultValue) return defaultValue;\n\n  const currentViewport = getCurrentBreakpoint(breakpoints, viewport);\n  if (hasBreakpointValues(value, breakpoints)) {\n    return getResponsiveValue(\n      value,\n      breakpoints,\n      currentViewport,\n      defaultValue\n    );\n  }\n  return value;\n};\n"],"names":[],"mappings":"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"}

package/dist-types/checkbox/Checkbox.d.ts

@@ -1,4 +1,5 @@
 import { ChangeEventHandler, FocusEventHandler, InputHTMLAttributes, ReactNode } from "react";
+import { AdornmentValidationStatus } from "../status-adornment";
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLLabelElement>, "onChange" | "onBlur" | "onFocus"> {
     /**
      * If `true`, the checkbox will be checked.
@@ -14,6 +15,7 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLLabelElement
      */
     disabled?: boolean;
     /**
+     * **Deprecated**: Use validationStatus instead
      * If `true`, the checkbox will be in the error state.
      */
     error?: boolean;
@@ -51,5 +53,12 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLLabelElement
      * The value of the checkbox.
      */
     value?: string;
+    /**
+     * Validation status, one of "warning" | "error" | "success"
+     *
+     * Checkbox has styling variants for "error" and "warning".
+     * No visual styling will be applied on "success" variant.
+     */
+    validationStatus?: AdornmentValidationStatus;
 }
 export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLLabelElement>>;

package/dist-types/checkbox/CheckboxGroup.d.ts

@@ -1,4 +1,5 @@
 import { ChangeEventHandler, ComponentPropsWithoutRef } from "react";
+import { AdornmentValidationStatus } from "../status-adornment";
 export interface CheckboxGroupProps extends Omit<ComponentPropsWithoutRef<"fieldset">, "onChange"> {
     /**
      * The current checked options.
@@ -12,6 +13,10 @@ export interface CheckboxGroupProps extends Omit<ComponentPropsWithoutRef<"field
      * Display group of elements in a compact row.
      */
     direction?: "horizontal" | "vertical";
+    /**
+     * Disable the Checkbox group
+     */
+    disabled?: boolean;
     /**
      * The name used to reference the value of the control.
      */
@@ -25,5 +30,9 @@ export interface CheckboxGroupProps extends Omit<ComponentPropsWithoutRef<"field
      * Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise, the checkboxes will wrap onto the next line.
      */
     wrap?: boolean;
+    /**
+     * Validation status.
+     */
+    validationStatus?: AdornmentValidationStatus;
 }
 export declare const CheckboxGroup: import("react").ForwardRefExoticComponent<CheckboxGroupProps & import("react").RefAttributes<HTMLFieldSetElement>>;

package/dist-types/checkbox/CheckboxIcon.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
+import { AdornmentValidationStatus } from "../status-adornment";
 export interface CheckboxIconProps {
     checked?: boolean;
     className?: string;
     disabled?: boolean;
     error?: boolean;
     indeterminate?: boolean;
+    validationStatus?: AdornmentValidationStatus;
 }
-export declare const CheckboxIcon: ({ checked, className: classNameProp, disabled, error, indeterminate, }: CheckboxIconProps) => JSX.Element;
+export declare const CheckboxIcon: ({ checked, className: classNameProp, disabled, error, indeterminate, validationStatus, }: CheckboxIconProps) => JSX.Element;

package/dist-types/checkbox/internal/CheckboxGroupContext.d.ts

@@ -1,9 +1,14 @@
 /// <reference types="react" />
+import { a11yValueAriaProps } from "../../form-field-context";
+import { AdornmentValidationStatus } from "../../status-adornment";
 import { CheckboxGroupProps } from "../CheckboxGroup";
 export interface CheckboxGroupState {
+    a11yProps?: a11yValueAriaProps;
+    disabled?: boolean;
     name?: CheckboxGroupProps["name"];
     onChange?: CheckboxGroupProps["onChange"];
     checkedValues?: CheckboxGroupProps["checkedValues"];
+    validationStatus?: AdornmentValidationStatus;
 }
 declare const CheckboxGroupContext: import("react").Context<CheckboxGroupState>;
 export { CheckboxGroupContext };

package/dist-types/form-field/FormField.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from "react";
 import { A11yValueProps } from "../form-field-context";
-export declare type FormFieldLabelPlacement = "top" | "left";
+export declare type FormFieldLabelPlacement = "top" | "left" | "right";
 export interface FormFieldProps extends HTMLAttributes<HTMLDivElement>, A11yValueProps {
     /**
      * Disabled prop
@@ -21,6 +21,10 @@ export interface FormFieldProps extends HTMLAttributes<HTMLDivElement>, A11yValu
      * Used as suffix of FormFieldHelperText id: `helperText-{id}`
      */
     id?: string;
+    /**
+     * Displays necessity on label
+     */
+    necessity?: "required" | "optional" | "asterisk";
     /**
      * Validation status
      */

package/dist-types/form-field/index.d.ts

@@ -1,4 +1,3 @@
 export * from "./FormField";
-export * from "./FormFieldControlWrapper";
 export * from "./FormFieldHelperText";
 export * from "./FormFieldLabel";

package/dist-types/form-field-context/FormFieldContext.d.ts

@@ -9,6 +9,7 @@ export interface A11yValueProps {
      */
     labelId?: string;
 }
+declare type NecessityType = "required" | "optional" | "asterisk";
 export interface a11yValueAriaProps {
     "aria-labelledby": A11yValueProps["labelId"];
     "aria-describedby": A11yValueProps["helperTextId"] | undefined;
@@ -16,7 +17,9 @@ export interface a11yValueAriaProps {
 export interface FormFieldContextValue {
     a11yProps: a11yValueAriaProps;
     disabled: boolean;
+    necessity: NecessityType | undefined;
     readOnly: boolean;
     validationStatus: "error" | "warning" | "success" | undefined;
 }
 export declare const FormFieldContext: import("react").Context<FormFieldContextValue>;
+export {};

package/dist-types/input/Input.d.ts

@@ -1,10 +1,14 @@
-import { ComponentPropsWithoutRef, InputHTMLAttributes, Ref } from "react";
-export interface InputProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue">, Pick<ComponentPropsWithoutRef<"input">, "disabled" | "value" | "defaultValue"> {
+import { ComponentPropsWithoutRef, InputHTMLAttributes, ReactNode, Ref } from "react";
+export interface InputProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue">, Pick<ComponentPropsWithoutRef<"input">, "disabled" | "value" | "defaultValue" | "placeholder"> {
     /**
      * The marker to use in an empty read only Input.
      * Use `''` to disable this feature. Defaults to '—'.
      */
     emptyReadOnlyMarker?: string;
+    /**
+     * End adornment component
+     */
+    endAdornment?: ReactNode;
     /**
      * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
      */
@@ -17,6 +21,10 @@ export interface InputProps extends Omit<ComponentPropsWithoutRef<"div">, "defau
      * If `true`, the component is read only.
      */
     readOnly?: boolean;
+    /**
+     * Start adornment component
+     */
+    startAdornment?: ReactNode;
     /**
      * Alignment of text within container. Defaults to "left"
      */

package/dist-types/radio-button/RadioButton.d.ts

@@ -1,4 +1,5 @@
 import { ChangeEventHandler, FocusEventHandler, HTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
+import { AdornmentValidationStatus } from "../status-adornment";
 export interface RadioButtonProps extends Omit<HTMLAttributes<HTMLLabelElement>, "onChange" | "onBlur" | "onFocus"> {
     /**
      * Set the default selected radio button in the group
@@ -9,6 +10,7 @@ export interface RadioButtonProps extends Omit<HTMLAttributes<HTMLLabelElement>,
      */
     disabled?: boolean;
     /**
+     * **Deprecated**: Use validationStatus instead
      * Set the error state
      */
     error?: boolean;
@@ -40,5 +42,12 @@ export interface RadioButtonProps extends Omit<HTMLAttributes<HTMLLabelElement>,
      * Value of radio button
      */
     value?: string;
+    /**
+     * Validation status, one of "warning" | "error" | "success"
+     *
+     * RadioButton has styling variants for "error" and "warning".
+     * No visual styling will be applied on "success" variant.
+     */
+    validationStatus?: AdornmentValidationStatus;
 }
 export declare const RadioButton: import("react").ForwardRefExoticComponent<RadioButtonProps & import("react").RefAttributes<HTMLLabelElement>>;

package/dist-types/radio-button/RadioButtonGroup.d.ts

@@ -8,6 +8,10 @@ export interface RadioButtonGroupProps extends Omit<ComponentPropsWithoutRef<"fi
      * Set the group direction.
      */
     direction?: "horizontal" | "vertical";
+    /**
+     * Disable the RadioButton group
+     */
+    disabled?: boolean;
     /**
      * Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise the radio buttons will wrap onto the next line.
      */
@@ -24,5 +28,9 @@ export interface RadioButtonGroupProps extends Omit<ComponentPropsWithoutRef<"fi
      * The value of the radio group, required for a controlled component.
      */
     value?: string;
+    /**
+     * Validation status.
+     */
+    validationStatus?: "error" | "warning";
 }
 export declare const RadioButtonGroup: import("react").ForwardRefExoticComponent<RadioButtonGroupProps & import("react").RefAttributes<HTMLFieldSetElement>>;

package/dist-types/radio-button/RadioButtonIcon.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
+import { AdornmentValidationStatus } from "../status-adornment";
 export interface RadioButtonIconProps {
     checked?: boolean;
     error?: boolean;
     disabled?: boolean;
+    validationStatus?: AdornmentValidationStatus;
 }
 /**
  * Default radio icon
  */
-export declare const RadioButtonIcon: ({ checked, error, disabled, }: RadioButtonIconProps) => JSX.Element;
+export declare const RadioButtonIcon: ({ checked, error, disabled, validationStatus, }: RadioButtonIconProps) => JSX.Element;

package/dist-types/radio-button/internal/RadioGroupContext.d.ts

@@ -1,7 +1,12 @@
 import { ChangeEventHandler } from "react";
+import { a11yValueAriaProps } from "../../form-field-context";
+import { AdornmentValidationStatus } from "../../status-adornment";
 export interface RadioGroupContextValue {
+    a11yProps?: a11yValueAriaProps;
+    disabled?: boolean;
     name?: string;
     value?: string;
     onChange?: ChangeEventHandler<HTMLElement>;
+    validationStatus?: AdornmentValidationStatus;
 }
 export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue>;

package/dist-types/status-adornment/StatusAdornment.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { IconProps } from "@salt-ds/icons";
 import { ValidationStatus } from "../status-indicator";
-declare type AdornmentValidationStatus = Exclude<ValidationStatus, "info">;
+export declare type AdornmentValidationStatus = Exclude<ValidationStatus, "info">;
 export interface StatusAdornmentProps extends IconProps {
     /**
      * Status adornment to be displayed.
@@ -9,4 +9,3 @@ export interface StatusAdornmentProps extends IconProps {
     status: AdornmentValidationStatus;
 }
 export declare const StatusAdornment: import("react").ForwardRefExoticComponent<StatusAdornmentProps & import("react").RefAttributes<SVGSVGElement>>;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/core",
-  "version": "1.8.0-rc.0",
+  "version": "1.8.0-rc.2",
   "license": "Apache-2.0",
   "main": "dist-cjs/index.js",
   "sideEffects": false,
@@ -15,7 +15,8 @@
     }
   },
   "publishConfig": {
-    "directory": "../../dist/salt-ds-core"
+    "directory": "../../dist/salt-ds-core",
+    "provenance": true
   },
   "module": "dist-es/index.js",
   "typings": "dist-types/index.d.ts",

package/dist-cjs/form-field/FormFieldControlWrapper.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = ".saltFormFieldControlWrapper {\n  align-items: center;\n  display: grid;\n  grid-auto-columns: minmax(min-content, 1fr);\n  grid-auto-flow: column;\n  grid-column-gap: var(--salt-size-unit);\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=FormFieldControlWrapper.css.js.map

package/dist-cjs/form-field/FormFieldControlWrapper.css.js.map

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

package/dist-cjs/form-field/FormFieldControlWrapper.js

@@ -1,32 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-require('react');
-var makePrefixer = require('../utils/makePrefixer.js');
-require('../utils/useFloatingUI.js');
-require('../utils/useId.js');
-require('../salt-provider/SaltProvider.js');
-require('../viewport/ViewportProvider.js');
-require('clsx');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
-var FormFieldControlWrapper$1 = require('./FormFieldControlWrapper.css.js');
-
-const withBaseName = makePrefixer.makePrefixer("saltFormFieldControlWrapper");
-const FormFieldControlWrapper = ({ children }) => {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "salt-form-field-control-wrapper",
-    css: FormFieldControlWrapper$1,
-    window: targetWindow
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: withBaseName(),
-    children
-  });
-};
-
-exports.FormFieldControlWrapper = FormFieldControlWrapper;
-//# sourceMappingURL=FormFieldControlWrapper.js.map

package/dist-cjs/form-field/FormFieldControlWrapper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormFieldControlWrapper.js","sources":["../src/form-field/FormFieldControlWrapper.tsx"],"sourcesContent":["import { PropsWithChildren } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport formFieldControlWrapper from \"./FormFieldControlWrapper.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldControlWrapper\");\n\nexport const FormFieldControlWrapper = ({ children }: PropsWithChildren) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-control-wrapper\",\n    css: formFieldControlWrapper,\n    window: targetWindow,\n  });\n  return <div className={withBaseName()}>{children}</div>;\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","formFieldControlWrapper","jsx"],"mappings":";;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,0BAAa,6BAA6B,CAAA,CAAA;AAExD,MAAM,uBAA0B,GAAA,CAAC,EAAE,QAAA,EAAkC,KAAA;AAC1E,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iCAAA;AAAA,IACR,GAAK,EAAAC,yBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,uBAAQC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAI,QAAA;AAAA,GAAS,CAAA,CAAA;AACnD;;;;"}

package/dist-es/form-field/FormFieldControlWrapper.css.js

@@ -1,4 +0,0 @@
-var css_248z = ".saltFormFieldControlWrapper {\n  align-items: center;\n  display: grid;\n  grid-auto-columns: minmax(min-content, 1fr);\n  grid-auto-flow: column;\n  grid-column-gap: var(--salt-size-unit);\n}\n";
-
-export { css_248z as default };
-//# sourceMappingURL=FormFieldControlWrapper.css.js.map

package/dist-es/form-field/FormFieldControlWrapper.css.js.map

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

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

@@ -1,28 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import 'react';
-import { makePrefixer } from '../utils/makePrefixer.js';
-import '../utils/useFloatingUI.js';
-import '../utils/useId.js';
-import '../salt-provider/SaltProvider.js';
-import '../viewport/ViewportProvider.js';
-import 'clsx';
-import { useWindow } from '@salt-ds/window';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import css_248z from './FormFieldControlWrapper.css.js';
-
-const withBaseName = makePrefixer("saltFormFieldControlWrapper");
-const FormFieldControlWrapper = ({ children }) => {
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "salt-form-field-control-wrapper",
-    css: css_248z,
-    window: targetWindow
-  });
-  return /* @__PURE__ */ jsx("div", {
-    className: withBaseName(),
-    children
-  });
-};
-
-export { FormFieldControlWrapper };
-//# sourceMappingURL=FormFieldControlWrapper.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"FormFieldControlWrapper.js","sources":["../src/form-field/FormFieldControlWrapper.tsx"],"sourcesContent":["import { PropsWithChildren } from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport formFieldControlWrapper from \"./FormFieldControlWrapper.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldControlWrapper\");\n\nexport const FormFieldControlWrapper = ({ children }: PropsWithChildren) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-control-wrapper\",\n    css: formFieldControlWrapper,\n    window: targetWindow,\n  });\n  return <div className={withBaseName()}>{children}</div>;\n};\n"],"names":["formFieldControlWrapper"],"mappings":";;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,6BAA6B,CAAA,CAAA;AAExD,MAAM,uBAA0B,GAAA,CAAC,EAAE,QAAA,EAAkC,KAAA;AAC1E,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iCAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAI,QAAA;AAAA,GAAS,CAAA,CAAA;AACnD;;;;"}

package/dist-types/form-field/FormFieldControlWrapper.d.ts

@@ -1,2 +0,0 @@
-import { PropsWithChildren } from "react";
-export declare const FormFieldControlWrapper: ({ children }: PropsWithChildren) => JSX.Element;