npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.50 → 1.0.0-alpha.51 - Mend

@salt-ds/lab 1.0.0-alpha.50 → 1.0.0-alpha.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/dist-cjs/dropdown/Dropdown.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".saltDropdown {\n  --saltIcon-margin: 2px 0 0 8px;\n  display: inline-block;\n  line-height: 0;\n  position: relative;\n}\n\n.saltDropdown-fullWidth {\n  width: 100%;\n}\n\n.saltDropdown-popup {\n  background: var(--salt-container-primary-background);\n  z-index: calc(var(--salt-zIndex-flyover) - 1);\n}\n";
+var css_248z = ".saltDropdownBase {\n  --saltIcon-margin: 2px 0 0 8px;\n  display: inline-block;\n  line-height: 0;\n  position: relative;\n}\n\n.saltDropdownBase-fullWidth {\n  width: 100%;\n}\n\n.saltDropdownBase-popup {\n  background: var(--salt-container-primary-background);\n  z-index: calc(var(--salt-zIndex-flyover) - 1);\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=Dropdown.css.js.map

package/dist-cjs/dropdown/DropdownBase.js CHANGED Viewed

@@ -16,7 +16,7 @@ var useDropdownBase = require('./useDropdownBase.js');
 var window = require('@salt-ds/window');
 var Dropdown = require('./Dropdown.css.js');
-const withBaseName = core.makePrefixer("saltDropdown");
+const withBaseName = core.makePrefixer("saltDropdownBase");
 const DropdownBase = react.forwardRef(
   function Dropdown$1({
     "aria-labelledby": ariaLabelledByProp,

package/dist-cjs/dropdown/DropdownBase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownBase.js","sources":["../src/dropdown/DropdownBase.tsx"],"sourcesContent":["import { flip, limitShift, shift, size } from \"@floating-ui/react\";\nimport {\n makePrefixer,\n useFloatingUI,\n useForkRef,\n useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\nimport { Children, cloneElement, forwardRef, useRef, useState } from \"react\";\nimport { Portal } from \"../portal\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { isDesktop, useWindow as usePortalWindow } from \"../window\";\nimport type { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdownBase } from \"./useDropdownBase\";\n\nimport { useWindow } from \"@salt-ds/window\";\n\nimport dropdownCss from \"./Dropdown.css\";\n// Any component may be passed as our trigger or popup component.\n// Define the common props that we will act on, if present,\n// so we can type them.\nexport type MaybeChildProps = {\n className?: string;\n id?: string;\n role?: string;\n width: number \| string;\n};\n\nconst withBaseName = makePrefixer(\"~~saltDropdown~~\");\n\nexport const DropdownBase = forwardRef<HTMLDivElement, DropdownBaseProps>(\n function Dropdown(\n {\n \"aria-labelledby\": ariaLabelledByProp,\n children,\n className: classNameProp,\n container,\n defaultIsOpen,\n disabled,\n disablePortal,\n fullWidth,\n id: idProp,\n isOpen: isOpenProp,\n onKeyDown,\n onOpenChange,\n openOnFocus,\n placement = \"bottom-start\",\n popupWidth,\n width,\n ...htmlAttributes\n },\n forwardedRef,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dropdown\",\n css: dropdownCss,\n window: targetWindow,\n });\n\n const rootRef = useRef<HTMLDivElement>(null);\n const className = clsx(withBaseName(), classNameProp, {\n [withBaseName(\"fullWidth\")]: fullWidth,\n [withBaseName(\"disabled\")]: disabled,\n });\n const [trigger, popupComponent] = Children.toArray(\n children,\n ) as JSX.Element[];\n const id = useId(idProp);\n const Window = usePortalWindow();\n\n const { componentProps, popperRef, isOpen, triggerProps } = useDropdownBase(\n {\n ariaLabelledBy: ariaLabelledByProp,\n defaultIsOpen,\n disabled,\n fullWidth,\n id,\n isOpen: isOpenProp,\n onOpenChange,\n onKeyDown,\n openOnFocus,\n popupComponent,\n popupWidth,\n rootRef,\n width,\n },\n );\n const [maxPopupHeight, setMaxPopupHeight] = useState<number \| undefined>(\n undefined,\n );\n\n const middleware = isDesktop\n ? []\n : [\n flip({\n fallbackPlacements: [\"bottom-start\", \"top-start\"],\n }),\n shift({ limiter: limitShift() }),\n size({\n apply({ availableHeight }) {\n setMaxPopupHeight(availableHeight);\n },\n }),\n ];\n\n const { reference, floating, x, y, strategy } = useFloatingUI({\n placement,\n middleware,\n });\n\n const handlePopperListAdapterRef = useForkRef<HTMLDivElement>(\n reference,\n forwardedRef,\n );\n const handleRootRef = useForkRef(rootRef, handlePopperListAdapterRef);\n const handleFloatingRef = useForkRef<HTMLDivElement>(floating, popperRef);\n // TODO maybe we should pass style, with maxHeight, to the popupComponent\n\n const getTriggerComponent = () => {\n const {\n id: defaultId,\n role: defaultRole,\n ...restTriggerProps\n } = triggerProps;\n\n const {\n id = defaultId,\n role = defaultRole,\n ...ownProps\n } = trigger.props as MaybeChildProps;\n\n return cloneElement(\n trigger,\n forwardCallbackProps(ownProps, {\n ...restTriggerProps,\n id,\n role,\n }),\n );\n };\n\n const getPopupComponent = () => {\n const { id: defaultId, width, ...restComponentProps } = componentProps;\n const {\n className,\n id = defaultId,\n width: ownWidth,\n ...ownProps\n } = popupComponent.props as MaybeChildProps;\n return cloneElement(popupComponent, {\n ...ownProps,\n ...restComponentProps,\n className: clsx(className, withBaseName(\"popup-component\")),\n id,\n width: ownWidth ?? width,\n });\n };\n\n return (\n <div\n {...htmlAttributes}\n className={className}\n data-testid=\"dropdown\"\n id={idProp}\n ref={handleRootRef}\n >\n {getTriggerComponent()}\n {isOpen && (\n <Portal disablePortal={disablePortal} container={container}>\n <Window\n className={clsx(withBaseName(\"popup\"), classNameProp)}\n id={`${id}-popup`}\n style={{\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n maxHeight: maxPopupHeight,\n }}\n ref={handleFloatingRef}\n >\n {getPopupComponent()}\n </Window>\n </Portal>\n )}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Dropdown","useWindow","useComponentCssInjection","dropdownCss","useRef","clsx","Children","useId","usePortalWindow","useDropdownBase","useState","isDesktop","flip","shift","limitShift","size","useFloatingUI","useForkRef","id","cloneElement","forwardCallbackProps","width","className","jsxs","jsx","Portal"],"mappings":";;;;;;;;;;;;;;;;;;AA6BA,MAAM,YAAA,GAAeA,kBAAa,~~cAAc~~,CAAA,CAAA;~~AAEzC~~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"}
1	+ {"version":3,"file":"DropdownBase.js","sources":["../src/dropdown/DropdownBase.tsx"],"sourcesContent":["import { flip, limitShift, shift, size } from \"@floating-ui/react\";\nimport {\n makePrefixer,\n useFloatingUI,\n useForkRef,\n useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\nimport { Children, cloneElement, forwardRef, useRef, useState } from \"react\";\nimport { Portal } from \"../portal\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { isDesktop, useWindow as usePortalWindow } from \"../window\";\nimport type { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdownBase } from \"./useDropdownBase\";\n\nimport { useWindow } from \"@salt-ds/window\";\n\nimport dropdownCss from \"./Dropdown.css\";\n// Any component may be passed as our trigger or popup component.\n// Define the common props that we will act on, if present,\n// so we can type them.\nexport type MaybeChildProps = {\n className?: string;\n id?: string;\n role?: string;\n width: number \| string;\n};\n\nconst withBaseName = makePrefixer(\"saltDropdownBase\");\n\nexport const DropdownBase = forwardRef<HTMLDivElement, DropdownBaseProps>(\n function Dropdown(\n {\n \"aria-labelledby\": ariaLabelledByProp,\n children,\n className: classNameProp,\n container,\n defaultIsOpen,\n disabled,\n disablePortal,\n fullWidth,\n id: idProp,\n isOpen: isOpenProp,\n onKeyDown,\n onOpenChange,\n openOnFocus,\n placement = \"bottom-start\",\n popupWidth,\n width,\n ...htmlAttributes\n },\n forwardedRef,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dropdown\",\n css: dropdownCss,\n window: targetWindow,\n });\n\n const rootRef = useRef<HTMLDivElement>(null);\n const className = clsx(withBaseName(), classNameProp, {\n [withBaseName(\"fullWidth\")]: fullWidth,\n [withBaseName(\"disabled\")]: disabled,\n });\n const [trigger, popupComponent] = Children.toArray(\n children,\n ) as JSX.Element[];\n const id = useId(idProp);\n const Window = usePortalWindow();\n\n const { componentProps, popperRef, isOpen, triggerProps } = useDropdownBase(\n {\n ariaLabelledBy: ariaLabelledByProp,\n defaultIsOpen,\n disabled,\n fullWidth,\n id,\n isOpen: isOpenProp,\n onOpenChange,\n onKeyDown,\n openOnFocus,\n popupComponent,\n popupWidth,\n rootRef,\n width,\n },\n );\n const [maxPopupHeight, setMaxPopupHeight] = useState<number \| undefined>(\n undefined,\n );\n\n const middleware = isDesktop\n ? []\n : [\n flip({\n fallbackPlacements: [\"bottom-start\", \"top-start\"],\n }),\n shift({ limiter: limitShift() }),\n size({\n apply({ availableHeight }) {\n setMaxPopupHeight(availableHeight);\n },\n }),\n ];\n\n const { reference, floating, x, y, strategy } = useFloatingUI({\n placement,\n middleware,\n });\n\n const handlePopperListAdapterRef = useForkRef<HTMLDivElement>(\n reference,\n forwardedRef,\n );\n const handleRootRef = useForkRef(rootRef, handlePopperListAdapterRef);\n const handleFloatingRef = useForkRef<HTMLDivElement>(floating, popperRef);\n // TODO maybe we should pass style, with maxHeight, to the popupComponent\n\n const getTriggerComponent = () => {\n const {\n id: defaultId,\n role: defaultRole,\n ...restTriggerProps\n } = triggerProps;\n\n const {\n id = defaultId,\n role = defaultRole,\n ...ownProps\n } = trigger.props as MaybeChildProps;\n\n return cloneElement(\n trigger,\n forwardCallbackProps(ownProps, {\n ...restTriggerProps,\n id,\n role,\n }),\n );\n };\n\n const getPopupComponent = () => {\n const { id: defaultId, width, ...restComponentProps } = componentProps;\n const {\n className,\n id = defaultId,\n width: ownWidth,\n ...ownProps\n } = popupComponent.props as MaybeChildProps;\n return cloneElement(popupComponent, {\n ...ownProps,\n ...restComponentProps,\n className: clsx(className, withBaseName(\"popup-component\")),\n id,\n width: ownWidth ?? width,\n });\n };\n\n return (\n <div\n {...htmlAttributes}\n className={className}\n data-testid=\"dropdown\"\n id={idProp}\n ref={handleRootRef}\n >\n {getTriggerComponent()}\n {isOpen && (\n <Portal disablePortal={disablePortal} container={container}>\n <Window\n className={clsx(withBaseName(\"popup\"), classNameProp)}\n id={`${id}-popup`}\n style={{\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n maxHeight: maxPopupHeight,\n }}\n ref={handleFloatingRef}\n >\n {getPopupComponent()}\n </Window>\n </Portal>\n )}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","forwardRef","Dropdown","useWindow","useComponentCssInjection","dropdownCss","useRef","clsx","Children","useId","usePortalWindow","useDropdownBase","useState","isDesktop","flip","shift","limitShift","size","useFloatingUI","useForkRef","id","cloneElement","forwardCallbackProps","width","className","jsxs","jsx","Portal"],"mappings":"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"}

package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".saltTrackerStep {\n  --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground-decorative));\n  --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground-decorative));\n\n  --trackerStep-icon-color: var(--saltTrackerStep-icon-color, var(--salt-status-static-foreground));\n\n  --saltIcon-color: var(--trackerStep-icon-color);\n  /* We redefine Icon Size so we can use it in calc functions in the trackerConnector */\n  --saltIcon-size: var(--saltTrackerStep-icon-size, max(var(--salt-size-icon), 12px));\n}\n\n.saltTrackerStep {\n  margin: 0;\n  text-indent: 0;\n  list-style-type: none;\n  flex: 1;\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: var(--saltTrackerStep-width, 100%);\n  gap: var(--salt-spacing-50);\n  color: var(--salt-content-primary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n}\n\n.saltSteppedTracker.saltSteppedTracker-horizontal .saltTrackerStep {\n  flex-direction: column;\n  padding: 0 var(--salt-spacing-25);\n}\n\n.saltSteppedTracker.saltSteppedTracker-vertical .saltTrackerStep {\n  flex-direction: row;\n  min-height: calc(var(--salt-size-base) * 2);\n  width: 100%;\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltTrackerStep:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltTrackerStep .saltTrackerStep-body {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n}\n\n.saltTrackerStep.saltTrackerStep-active {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-active);\n}\n\n.saltTrackerStep.saltTrackerStep-completed {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-completed);\n}\n";
+var css_248z = ".saltTrackerStep {\n  --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground-decorative));\n  --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground-decorative));\n  --trackerStep-icon-color-warning: var(--saltTrackerStep-icon-color-warning, var(--salt-status-warning-foreground-decorative));\n  --trackerStep-icon-color-error: var(--saltTrackerStep-icon-color-error, var(--salt-status-error-foreground-decorative));\n\n  --trackerStep-icon-color: var(--saltTrackerStep-icon-color, var(--salt-status-static-foreground));\n\n  --saltIcon-color: var(--trackerStep-icon-color);\n  /* We redefine Icon Size so we can use it in calc functions in the trackerConnector */\n  --saltIcon-size: var(--saltTrackerStep-icon-size, max(var(--salt-size-icon), 12px));\n}\n\n.saltTrackerStep {\n  margin: 0;\n  text-indent: 0;\n  list-style-type: none;\n  flex: 1;\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: var(--saltTrackerStep-width, 100%);\n  gap: var(--salt-spacing-50);\n  color: var(--salt-content-primary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n}\n\n.saltSteppedTracker.saltSteppedTracker-horizontal .saltTrackerStep {\n  flex-direction: column;\n  padding: 0 var(--salt-spacing-25);\n}\n\n.saltSteppedTracker.saltSteppedTracker-vertical .saltTrackerStep {\n  flex-direction: row;\n  min-height: calc(var(--salt-size-base) * 2);\n  width: 100%;\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltTrackerStep:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltTrackerStep .saltTrackerStep-body {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n}\n\n.saltTrackerStep.saltTrackerStep-status-warning {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-warning);\n}\n\n.saltTrackerStep.saltTrackerStep-status-error {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-error);\n}\n\n.saltTrackerStep.saltTrackerStep-active {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-active);\n}\n\n.saltTrackerStep.saltTrackerStep-stage-completed {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-completed);\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=TrackerStep.css.js.map

package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.js CHANGED Viewed

@@ -15,26 +15,11 @@ var TrackerStep$1 = require('./TrackerStep.css.js');
 const withBaseName = core.makePrefixer("saltTrackerStep");
 const iconMap = {
-  default: icons.StepDefaultIcon,
-  completed: icons.StepSuccessIcon
-};
-const getStateIcon = ({
-  isActive,
-  state
-}) => {
-  if (state === "default" && isActive) {
-    return icons.StepActiveIcon;
-  }
-  return iconMap[state];
-};
-const getState = ({
-  isActive,
-  state
-}) => {
-  if (state === "default" && isActive) {
-    return "active";
-  }
-  return state;
+  pending: icons.StepDefaultIcon,
+  active: icons.StepActiveIcon,
+  completed: icons.StepSuccessIcon,
+  warning: icons.WarningSolidIcon,
+  error: icons.ErrorSolidIcon
 };
 const useCheckWithinSteppedTracker = (isWithinSteppedTracker) => {
   react.useEffect(() => {
@@ -47,10 +32,24 @@ const useCheckWithinSteppedTracker = (isWithinSteppedTracker) => {
     }
   }, [isWithinSteppedTracker]);
 };
+const parseIconName = ({
+  stage,
+  status,
+  active
+}) => {
+  if (stage === "completed")
+    return "completed";
+  if (active)
+    return "active";
+  if (status)
+    return status;
+  return stage;
+};
 const TrackerStep = react.forwardRef(
   function TrackerStep2(props, ref) {
     const {
-      state = "default",
+      stage = "pending",
+      status,
       style,
       className,
       children,
@@ -66,8 +65,8 @@ const TrackerStep = react.forwardRef(
     const stepNumber = SteppedTrackerContext.useTrackerStepContext();
     useCheckWithinSteppedTracker(isWithinSteppedTracker);
     const isActive = activeStep === stepNumber;
-    const Icon = getStateIcon({ isActive, state });
-    const resolvedState = getState({ isActive, state });
+    const iconName = parseIconName({ stage, status, active: isActive });
+    const Icon = iconMap[iconName];
     const connectorState = activeStep > stepNumber ? "active" : "default";
     const hasConnector = stepNumber < totalSteps - 1;
     const innerStyle = {
@@ -75,10 +74,15 @@ const TrackerStep = react.forwardRef(
       "--saltTrackerStep-width": `${100 / totalSteps}%`
     };
     return /* @__PURE__ */ jsxRuntime.jsxs("li", {
-      className: clsx.clsx(withBaseName(), withBaseName(resolvedState), className),
+      className: clsx.clsx(
+        withBaseName(),
+        withBaseName(`stage-${stage}`),
+        withBaseName(`status-${status}`),
+        { [withBaseName("active")]: isActive },
+        className
+      ),
       style: innerStyle,
       "aria-current": isActive ? "step" : void 0,
-      "data-state": state,
       ref,
       ...restProps,
       children: [

package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TrackerStep.js","sources":["../src/stepped-tracker/TrackerStep/TrackerStep.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport {\n StepActiveIcon,\n StepDefaultIcon,\n StepSuccessIcon,\n} from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef, useEffect } from \"react\";\nimport { TrackerConnector } from \"../TrackerConnector\";\n\nimport {\n useSteppedTrackerContext,\n useTrackerStepContext,\n} from \"../SteppedTrackerContext\";\n\nimport trackerStepCss from \"./TrackerStep.css\";\n\nconst withBaseName = makePrefixer(\"saltTrackerStep\");\n\ntype ~~State~~ = \"~~default~~\" \| \"completed\";\n\ntype ~~StateWithActive~~ = ~~State~~ \| \"~~active~~\";\n\nexport interface TrackerStepProps extends ComponentPropsWithoutRef<\"li\"> {\n /*\n The ~~state~~ of the ~~TrackerStep~~\~~n */\n state?:~~ ~~State;\n}~~\n\~~nconst~~ ~~iconMap~~ ~~= {~~\~~n default:~~ ~~StepDefaultIcon,\n completed:~~ ~~StepSuccessIcon,\n};\n~~\~~nconst~~ ~~getStateIcon~~ = ({\n ~~isActive,\~~n ~~state,\n}:~~ {\n ~~isActive:~~ ~~boolean;\n state~~: ~~State;\n})~~ => {\n if ~~(state~~ ~~===~~ ~~\"default\"~~ && ~~isActive)~~ {\n ~~return StepActiveIcon;\~~n ~~}\n return~~ ~~iconMap[state]~~;\n};\n\nconst ~~getState~~ = ({\n ~~isActive~~,\n ~~state,\n}~~: {\n ~~isActive~~: ~~boolean;\~~n ~~state~~: ~~State;\~~n}): ~~StateWithActive => {\~~n ~~if (state === \"default\" && isActive) {\n return \"active\";\n~~ }~~\n return state~~;\n~~};\n~~\nconst useCheckWithinSteppedTracker = (isWithinSteppedTracker: boolean) => {\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (!isWithinSteppedTracker) {\n console.error(\n \"The TrackerStep component must be placed within a SteppedTracker component\",\n );\n }\n }\n }, [isWithinSteppedTracker]);\n};\n\nexport const TrackerStep = forwardRef<HTMLLIElement, TrackerStepProps>(\n function TrackerStep(props, ref) {\n const {\n ~~state~~ = \"~~default~~\",\n style,\n className,\n children,\n ...restProps\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tracker-step\",\n css: trackerStepCss,\n window: targetWindow,\n });\n\n const { activeStep, totalSteps, isWithinSteppedTracker } =\n useSteppedTrackerContext();\n const stepNumber = useTrackerStepContext();\n\n useCheckWithinSteppedTracker(isWithinSteppedTracker);\n\n const isActive = activeStep === stepNumber;\n const ~~Icon~~ = ~~getStateIcon~~({ ~~isActive~~, ~~state~~ });\n const ~~resolvedState~~ = ~~getState({ isActive, state })~~;\n const connectorState = activeStep > stepNumber ? \"active\" : \"default\";\n const hasConnector = stepNumber < totalSteps - 1;\n\n const innerStyle = {\n ...style,\n \"--saltTrackerStep-width\": `${100 / totalSteps}%`,\n };\n\n return (\n <li\n className={clsx(withBaseName(), withBaseName(~~resolvedState~~), className)}\n style={innerStyle}\n aria-current={isActive ? \"step\" : undefined}\n ~~data-state={state}\n~~ ref={ref}\n {...restProps}\n >\n <Icon />\n {hasConnector && <TrackerConnector state={connectorState} />}\n <div className={withBaseName(\"body\")}>{children}</div>\n </li>\n );\n },\n);\n"],"names":["makePrefixer","StepDefaultIcon","StepSuccessIcon","~~StepActiveIcon~~","useEffect","forwardRef","TrackerStep","useWindow","useComponentCssInjection","trackerStepCss","useSteppedTrackerContext","useTrackerStepContext","jsxs","clsx","jsx","TrackerConnector"],"mappings":";;;;;;;;;;;;;;;~~AAmBA~~,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA,CAAA;~~AAanD~~,MAAM,OAAU,GAAA;AAAA,EACd,OAAS,EAAAC,qBAAA;AAAA,EACT,~~SAAW~~,EAAAC,~~qBAAA;AACb,CAAA,CAAA;AAEA,MAAM,eAAe,CAAC;AAAA,EACpB,QAAA;AAAA,EACA,KAAA;AACF,CAGM,KAAA;AACJ,EAAI,IAAA,KAAA,KAAU,aAAa,QAAU,EAAA;AACnC,IAAO,OAAAC,~~oBAAA~~,CAAA~~;AAAA,~~GACT;AACA~~,~~EAAA~~,~~OAAO~~,~~OAAQ,CAAA,KAAA,CAAA,CAAA~~;~~AACjB,CAAA,CAAA;AAEA,MAAM,WAAW,CAAC;~~AAAA,~~EAChB~~,~~QAAA;AAAA~~,~~EACA~~,~~KAAA~~;~~AACF,CAGuB,KAAA;AACrB,EAAI,IAAA,KAAA,KAAU,aAAa,QAAU,EAAA;AACnC,IAAO,OAAA,QAAA,CAAA;~~AAAA,~~GACT;AACA~~,~~EAAO~~,~~OAAA~~,~~KAAA,CAAA~~;AACT,CAAA,CAAA;AAEA,MAAM,4BAAA,GAA+B,CAAC,sBAAoC,KAAA;AACxE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAA,IAAI,CAAC,sBAAwB,EAAA;AAC3B,QAAQ,OAAA,CAAA,KAAA;AAAA,UACN,4EAAA;AAAA,SACF,CAAA;AAAA,OACF;AAAA,KACF;AAAA,GACF,EAAG,CAAC,sBAAsB,CAAC,CAAA,CAAA;AAC7B,CAAA,CAAA;AAEO,MAAM,WAAc,GAAAC,gBAAA;AAAA,EACzB,SAASC,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA;AAAA,MACJ,KAAQ,GAAA,SAAA;AAAA,MACR,KAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACG,GAAA,SAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,UAAY,EAAA,sBAAA,KAC9BC,8CAAyB,EAAA,CAAA;AAC3B,IAAA,MAAM,aAAaC,2CAAsB,EAAA,CAAA;AAEzC,IAAA,4BAAA,CAA6B,sBAAsB,CAAA,CAAA;AAEnD,IAAA,MAAM,WAAW,UAAe,KAAA,UAAA,CAAA;AAChC,IAAA,MAAM,~~IAAO~~,~~GAAA~~,~~YAAA~~,~~CAAa,~~EAAE,~~QAAA~~,~~EAAU~~,~~OAAO~~,CAAA,CAAA;~~AAC7C~~,IAAA,MAAM,~~aAAgB~~,~~GAAA~~,~~QAAA~~,~~CAAS,EAAE,~~QAAA,~~EAAU,OAAO,~~CAAA,CAAA;~~AAClD~~,IAAM,MAAA,cAAA,GAAiB,UAAa,GAAA,UAAA,GAAa,QAAW,GAAA,SAAA,CAAA;AAC5D,IAAM,MAAA,YAAA,GAAe,aAAa,UAAa,GAAA,CAAA,CAAA;AAE/C,IAAA,MAAM,UAAa,GAAA;AAAA,MACjB,GAAG,KAAA;AAAA,MACH,yBAAA,EAA2B,GAAG,GAAM,GAAA,UAAA,CAAA,CAAA,CAAA;AAAA,KACtC,CAAA;AAEA,IAAA,uBACGC,eAAA,CAAA,IAAA,EAAA;AAAA,MACC,~~WAAWC~~,~~SAAK~~,CAAA,YAAA,~~IAAgB~~,YAAa,CAAA,~~aAAa~~,~~GAAG~~,~~SAAS~~,~~CAAA~~;AAAA,~~MACtE~~,KAAO,EAAA,UAAA;AAAA,MACP,cAAA,EAAc,WAAW,MAAS,GAAA,KAAA,CAAA;AAAA,MAClC,~~YAAY,EAAA,KAAA;AAAA,MACZ,~~GAAA;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,IAAK,EAAA,EAAA,CAAA;AAAA,QACL,gCAAiBA,cAAA,CAAAC,iCAAA,EAAA;AAAA,UAAiB,KAAO,EAAA,cAAA;AAAA,SAAgB,CAAA;AAAA,wBACzDD,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAAI,QAAA;AAAA,SAAS,CAAA;AAAA,OAAA;AAAA,KAClD,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"TrackerStep.js","sources":["../src/stepped-tracker/TrackerStep/TrackerStep.tsx"],"sourcesContent":["import { type ValidationStatus, makePrefixer } from \"@salt-ds/core\";\nimport {\n ErrorSolidIcon,\n StepActiveIcon,\n StepDefaultIcon,\n StepSuccessIcon,\n WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef, useEffect } from \"react\";\nimport { TrackerConnector } from \"../TrackerConnector\";\n\nimport {\n useSteppedTrackerContext,\n useTrackerStepContext,\n} from \"../SteppedTrackerContext\";\n\nimport trackerStepCss from \"./TrackerStep.css\";\n\nconst withBaseName = makePrefixer(\"saltTrackerStep\");\n\ntype StageOptions = \"pending\" \| \"completed\";\ntype StatusOptions = Extract<ValidationStatus, \"warning\" \| \"error\">;\n\nexport interface TrackerStepProps extends ComponentPropsWithoutRef<\"li\"> {\n /*\n The stage of the step: \"pending\" or \"completed\" (note, \"active\" is derived from \"activeStep\" in parent SteppedTracker component)\n /\n stage?: StageOptions;\n /\n The status of the step: warning or error\n \n If the stage is completed or active, the status prop will be ignored\n */\n status?: StatusOptions;\n}\n\nconst iconMap = {\n pending: StepDefaultIcon,\n active: StepActiveIcon,\n completed: StepSuccessIcon,\n warning: WarningSolidIcon,\n error: ErrorSolidIcon,\n};\n\nconst useCheckWithinSteppedTracker = (isWithinSteppedTracker: boolean) => {\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (!isWithinSteppedTracker) {\n console.error(\n \"The TrackerStep component must be placed within a SteppedTracker component\",\n );\n }\n }\n }, [isWithinSteppedTracker]);\n};\n\nconst parseIconName = ({\n stage,\n status,\n active,\n}: {\n stage: StageOptions;\n status?: StatusOptions;\n active: boolean;\n}) => {\n if (stage === \"completed\") return \"completed\";\n if (active) return \"active\";\n if (status) return status;\n return stage;\n};\n\nexport const TrackerStep = forwardRef<HTMLLIElement, TrackerStepProps>(\n function TrackerStep(props, ref) {\n const {\n stage = \"pending\",\n status,\n style,\n className,\n children,\n ...restProps\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-tracker-step\",\n css: trackerStepCss,\n window: targetWindow,\n });\n\n const { activeStep, totalSteps, isWithinSteppedTracker } =\n useSteppedTrackerContext();\n const stepNumber = useTrackerStepContext();\n\n useCheckWithinSteppedTracker(isWithinSteppedTracker);\n\n const isActive = activeStep === stepNumber;\n const iconName = parseIconName({ stage, status, active: isActive });\n\n const Icon = iconMap[iconName];\n const connectorState = activeStep > stepNumber ? \"active\" : \"default\";\n const hasConnector = stepNumber < totalSteps - 1;\n\n const innerStyle = {\n ...style,\n \"--saltTrackerStep-width\": `${100 / totalSteps}%`,\n };\n\n return (\n <li\n className={clsx(\n withBaseName(),\n withBaseName(`stage-${stage}`),\n withBaseName(`status-${status}`),\n { [withBaseName(\"active\")]: isActive },\n className,\n )}\n style={innerStyle}\n aria-current={isActive ? \"step\" : undefined}\n ref={ref}\n {...restProps}\n >\n <Icon />\n {hasConnector && <TrackerConnector state={connectorState} />}\n <div className={withBaseName(\"body\")}>{children}</div>\n </li>\n );\n },\n);\n"],"names":["makePrefixer","StepDefaultIcon","StepActiveIcon","StepSuccessIcon","WarningSolidIcon","ErrorSolidIcon","useEffect","forwardRef","TrackerStep","useWindow","useComponentCssInjection","trackerStepCss","useSteppedTrackerContext","useTrackerStepContext","jsxs","clsx","jsx","TrackerConnector"],"mappings":"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"}

package/dist-cjs/tabs/Tabstrip.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = "/* Component class applied to the root element */\n.saltTabstrip {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: none;\n  --tabs-tabstrip-display: inline-flex;\n  --tabs-tabstrip-background: transparent;\n\n  align-items: flex-start;\n  align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  min-width: 28px;\n  width: 100%;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  --saltTabs-activationIndicator-height: 1px;\n  --saltTabs-activationIndicator-thumb-inset: -1px 0 0 0;\n\n  --tabs-activationIndicator-borderStyle: none none solid none;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n  --tabs-activationIndicator-transitionProperty: left;\n  --tabs-activationIndicator-thumb-height: 2px;\n}\n\n/* Tabstrip orientation is vertical */\n.saltTabstrip-vertical {\n  --saltTabs-activationIndicator-thumb-inset: 0 0 0 -1px;\n\n  --tabs-activationIndicator-transition: top 0.3s ease;\n  --tabs-activationIndicator-borderStyle: none solid none none;\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-transitionProperty: top;\n  --tabs-activationIndicator-width: 1px;\n  --tabs-activationIndicator-thumb-width: 2px;\n\n  align-self: flex-start;\n  display: inline-flex;\n}\n\n.saltTabstrip-draggingTab {\n  --saltTabs-activationIndicator-transition: none;\n}\n\n.saltTabstrip-draggingTab .saltTab {\n  pointer-events: none;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-addButton,\n.saltDropdown.saltTabstrip-overflowMenu {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltTabstrip-overflowMenu.saltDropdown {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltTabstrip-overflowMenu-open {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.saltTabstrip-overflowMenu-open .saltButton {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltTabstrip-inner {\n  width: 100%;\n  align-items: center;\n  display: flex;\n  flex-basis: auto;\n  flex-grow: 0;\n  flex-shrink: 1;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  line-height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-vertical .saltTabstrip-inner {\n  flex-direction: column;\n  height: auto;\n}\n\n.saltTabstrip-centered .saltTabstrip-inner {\n  justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.saltDraggable[class*=\"tabstrip\"] {\n  --tabs-tabstrip-display: flex;\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: block;\n\n  --tabs-tab-background: var(--salt-navigable-background-hover);\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n  --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n  --tabs-tab-position: static;\n\n  font-size: 12px;\n}\n\n.saltDraggable-tabstrip-horizontal {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-activationIndicator-thumb-height: 2px;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n\n  line-height: var(--tabs-tabstrip-height);\n}\n.saltDraggable-tabstrip-vertical {\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-thumb-width: 2px;\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab {\n  box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n[data-overflowed] {\n  order: 99;\n  visibility: hidden;\n}\n\n.saltTabstrip-overflowMenu-dropTarget:after {\n  background: var(--salt-selectable-background-selected);\n  content: \"\";\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n";
+var css_248z = "/* Component class applied to the root element */\n.saltTabstrip {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: none;\n  --tabs-tabstrip-display: inline-flex;\n  --tabs-tabstrip-background: transparent;\n\n  align-items: flex-start;\n  align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  min-width: 28px;\n  width: 100%;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  --saltTabs-activationIndicator-height: 1px;\n  --saltTabs-activationIndicator-thumb-inset: -1px 0 0 0;\n\n  --tabs-activationIndicator-borderStyle: none none solid none;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n  --tabs-activationIndicator-transitionProperty: left;\n  --tabs-activationIndicator-thumb-height: 2px;\n}\n\n/* Tabstrip orientation is vertical */\n.saltTabstrip-vertical {\n  --saltTabs-activationIndicator-thumb-inset: 0 0 0 -1px;\n\n  --tabs-activationIndicator-transition: top 0.3s ease;\n  --tabs-activationIndicator-borderStyle: none solid none none;\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-transitionProperty: top;\n  --tabs-activationIndicator-width: 1px;\n  --tabs-activationIndicator-thumb-width: 2px;\n\n  align-self: flex-start;\n  display: inline-flex;\n}\n\n.saltTabstrip-draggingTab {\n  --saltTabs-activationIndicator-transition: none;\n}\n\n.saltTabstrip-draggingTab .saltTab {\n  pointer-events: none;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n  height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-addButton,\n.saltDropdownBase.saltTabstrip-overflowMenu {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltTabstrip-overflowMenu.saltDropdownBase {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltTabstrip-overflowMenu-open {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.saltTabstrip-overflowMenu-open .saltButton {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltTabstrip-inner {\n  width: 100%;\n  align-items: center;\n  display: flex;\n  flex-basis: auto;\n  flex-grow: 0;\n  flex-shrink: 1;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  line-height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-vertical .saltTabstrip-inner {\n  flex-direction: column;\n  height: auto;\n}\n\n.saltTabstrip-centered .saltTabstrip-inner {\n  justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.saltDraggable[class*=\"tabstrip\"] {\n  --tabs-tabstrip-display: flex;\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-tabstrip-dragging-display: block;\n\n  --tabs-tab-background: var(--salt-navigable-background-hover);\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n  --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n  --tabs-tab-position: static;\n\n  font-size: 12px;\n}\n\n.saltDraggable-tabstrip-horizontal {\n  --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  --tabs-activationIndicator-thumb-height: 2px;\n  --tabs-activationIndicator-inset: auto 0px 0px 0px;\n\n  line-height: var(--tabs-tabstrip-height);\n}\n.saltDraggable-tabstrip-vertical {\n  --tabs-activationIndicator-inset: 0px 0px 0px auto;\n  --tabs-activationIndicator-thumb-width: 2px;\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab {\n  box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n[data-overflowed] {\n  order: 99;\n  visibility: hidden;\n}\n\n.saltTabstrip-overflowMenu-dropTarget:after {\n  background: var(--salt-selectable-background-selected);\n  content: \"\";\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=Tabstrip.css.js.map

package/dist-cjs/toolbar/overflow-panel/OverflowPanel.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".saltOverflowPanel.saltDropdown-popup {\n  background: var(--salt-container-primary-background);\n  border: solid 1px var(--salt-selectable-borderColor-hover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n}\n\n.saltOverflowPanel-content {\n  --saltButton-justifyContent: flex-start;\n  --saltDropdown-popup-maxHeight: auto;\n  align-items: stretch;\n  color: var(--salt-content-primary-foreground);\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  display: flex;\n  flex-direction: column;\n  padding: calc(var(--salt-size-unit) * 1.5) 0;\n  outline: none;\n}\n\n.saltOverflowPanel [aria-expanded=\"true\"] {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-background-hover: var(--salt-actionable-secondary-background-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltOverflowPanel.saltDropdown {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltOverflowPanel.saltDropdown-popup .saltFormFieldLegacy:not(.saltFormFieldLegacy-toolbarButton) {\n  --saltFormFieldLegacy-margin: 0 12px 8px 12px;\n}\n";
+var css_248z = ".saltOverflowPanel.saltDropdownBase-popup {\n  background: var(--salt-container-primary-background);\n  border: solid 1px var(--salt-selectable-borderColor-hover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n}\n\n.saltOverflowPanel-content {\n  --saltButton-justifyContent: flex-start;\n  align-items: stretch;\n  color: var(--salt-content-primary-foreground);\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  display: flex;\n  flex-direction: column;\n  padding: calc(var(--salt-size-unit) * 1.5) 0;\n  outline: none;\n}\n\n.saltOverflowPanel [aria-expanded=\"true\"] {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-background-hover: var(--salt-actionable-secondary-background-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltOverflowPanel.saltDropdownBase {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltOverflowPanel.saltDropdownBase-popup .saltFormFieldLegacy:not(.saltFormFieldLegacy-toolbarButton) {\n  --saltFormFieldLegacy-margin: 0 12px 8px 12px;\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=OverflowPanel.css.js.map

package/dist-es/calendar/Calendar.js CHANGED Viewed

@@ -21,6 +21,7 @@ const Calendar = forwardRef(
       renderDayContents,
       hideYearDropdown,
       TooltipProps,
+      borderedDropdown,
       ...rest
     } = props;
     const targetWindow = useWindow();
@@ -56,6 +57,7 @@ const Calendar = forwardRef(
         ref,
         children: [
           /* @__PURE__ */ jsx(CalendarNavigation, {
+            borderedDropdown,
             hideYearDropdown
           }),
           /* @__PURE__ */ jsx(CalendarWeekHeader, {}),

package/dist-es/calendar/Calendar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Calendar.js","sources":["../src/calendar/Calendar.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, useCallback } from \"react\";\nimport {\n CalendarCarousel,\n type CalendarCarouselProps,\n} from \"./internal/CalendarCarousel\";\nimport { CalendarContext } from \"./internal/CalendarContext\";\nimport {\n CalendarNavigation,\n type CalendarNavigationProps,\n} from \"./internal/CalendarNavigation\";\nimport { CalendarWeekHeader } from \"./internal/CalendarWeekHeader\";\nimport { useCalendar, type useCalendarProps } from \"./useCalendar\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport { DateFormatter, getLocalTimeZone } from \"@internationalized/date\";\nimport calendarCss from \"./Calendar.css\";\nimport { getCurrentLocale } from \"./internal/utils\";\n\nexport type CalendarProps = useCalendarProps & {\n className?: string;\n renderDayContents?: CalendarCarouselProps[\"renderDayContents\"];\n hideYearDropdown?: CalendarNavigationProps[\"hideYearDropdown\"];\n TooltipProps?: CalendarCarouselProps[\"TooltipProps\"];\n hideOutOfRangeDates?: CalendarCarouselProps[\"hideOutOfRangeDates\"];\n};\n\nconst withBaseName = makePrefixer(\"saltCalendar\");\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(\n function Calendar(props, ref) {\n const {\n className,\n renderDayContents,\n hideYearDropdown,\n TooltipProps,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar\",\n css: calendarCss,\n window: targetWindow,\n });\n\n const { state, helpers } = useCalendar({\n hideYearDropdown,\n ...rest,\n });\n\n const { setCalendarFocused } = helpers;\n\n const handleFocus = useCallback(() => {\n setCalendarFocused(true);\n }, [setCalendarFocused]);\n\n const handleBlur = useCallback(() => {\n setCalendarFocused(false);\n }, [setCalendarFocused]);\n\n const calendarLabel = new DateFormatter(getCurrentLocale(), {\n month: \"long\",\n year: \"numeric\",\n }).format(state.visibleMonth.toDate(getLocalTimeZone()));\n return (\n <CalendarContext.Provider\n value={{\n state,\n helpers,\n }}\n >\n <div\n className={clsx(withBaseName(), className)}\n role=\"application\"\n aria-label={calendarLabel}\n ref={ref}\n >\n <CalendarNavigation hideYearDropdown={hideYearDropdown} />\n <CalendarWeekHeader />\n <CalendarCarousel\n onFocus={handleFocus}\n onBlur={handleBlur}\n renderDayContents={renderDayContents}\n TooltipProps={TooltipProps}\n />\n </div>\n </CalendarContext.Provider>\n );\n },\n);\n"],"names":["Calendar","calendarCss"],"mappings":";;;;;;;;;;;;;;;~~AA8BA~~,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAC5B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,YAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,OAAQ,EAAA,GAAI,WAAY,CAAA;AAAA,MACrC,gBAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACJ,CAAA,CAAA;AAED,IAAM,MAAA,EAAE,oBAAuB,GAAA,OAAA,CAAA;AAE/B,IAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,MAAA,kBAAA,CAAmB,IAAI,CAAA,CAAA;AAAA,KACzB,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,IAAM,MAAA,UAAA,GAAa,YAAY,MAAM;AACnC,MAAA,kBAAA,CAAmB,KAAK,CAAA,CAAA;AAAA,KAC1B,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,IAAA,MAAM,aAAgB,GAAA,IAAI,aAAc,CAAA,gBAAA,EAAoB,EAAA;AAAA,MAC1D,KAAO,EAAA,MAAA;AAAA,MACP,IAAM,EAAA,SAAA;AAAA,KACP,EAAE,MAAO,CAAA,KAAA,CAAM,aAAa,MAAO,CAAA,gBAAA,EAAkB,CAAC,CAAA,CAAA;AACvD,IACE,uBAAA,GAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAA;AAAA,QACA,OAAA;AAAA,OACF;AAAA,MAEA,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,IAAK,EAAA,aAAA;AAAA,QACL,YAAY,EAAA,aAAA;AAAA,QACZ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,kBAAA,EAAA;AAAA,~~YAAmB~~,gBAAA;AAAA,~~WAAoC~~,CAAA;AAAA,~~8BACvD~~,kBAAmB,EAAA,EAAA,CAAA;AAAA,0BACnB,GAAA,CAAA,gBAAA,EAAA;AAAA,YACC,OAAS,EAAA,WAAA;AAAA,YACT,MAAQ,EAAA,UAAA;AAAA,YACR,iBAAA;AAAA,YACA,YAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"Calendar.js","sources":["../src/calendar/Calendar.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, useCallback } from \"react\";\nimport {\n CalendarCarousel,\n type CalendarCarouselProps,\n} from \"./internal/CalendarCarousel\";\nimport { CalendarContext } from \"./internal/CalendarContext\";\nimport {\n CalendarNavigation,\n type CalendarNavigationProps,\n} from \"./internal/CalendarNavigation\";\nimport { CalendarWeekHeader } from \"./internal/CalendarWeekHeader\";\nimport { useCalendar, type useCalendarProps } from \"./useCalendar\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport { DateFormatter, getLocalTimeZone } from \"@internationalized/date\";\nimport calendarCss from \"./Calendar.css\";\nimport { getCurrentLocale } from \"./internal/utils\";\n\nexport type CalendarProps = useCalendarProps & {\n className?: string;\n renderDayContents?: CalendarCarouselProps[\"renderDayContents\"];\n hideYearDropdown?: CalendarNavigationProps[\"hideYearDropdown\"];\n borderedDropdown?: CalendarNavigationProps[\"borderedDropdown\"];\n TooltipProps?: CalendarCarouselProps[\"TooltipProps\"];\n hideOutOfRangeDates?: CalendarCarouselProps[\"hideOutOfRangeDates\"];\n};\n\nconst withBaseName = makePrefixer(\"saltCalendar\");\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(\n function Calendar(props, ref) {\n const {\n className,\n renderDayContents,\n hideYearDropdown,\n TooltipProps,\n borderedDropdown,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar\",\n css: calendarCss,\n window: targetWindow,\n });\n\n const { state, helpers } = useCalendar({\n hideYearDropdown,\n ...rest,\n });\n\n const { setCalendarFocused } = helpers;\n\n const handleFocus = useCallback(() => {\n setCalendarFocused(true);\n }, [setCalendarFocused]);\n\n const handleBlur = useCallback(() => {\n setCalendarFocused(false);\n }, [setCalendarFocused]);\n\n const calendarLabel = new DateFormatter(getCurrentLocale(), {\n month: \"long\",\n year: \"numeric\",\n }).format(state.visibleMonth.toDate(getLocalTimeZone()));\n return (\n <CalendarContext.Provider\n value={{\n state,\n helpers,\n }}\n >\n <div\n className={clsx(withBaseName(), className)}\n role=\"application\"\n aria-label={calendarLabel}\n ref={ref}\n >\n <CalendarNavigation\n borderedDropdown={borderedDropdown}\n hideYearDropdown={hideYearDropdown}\n />\n <CalendarWeekHeader />\n <CalendarCarousel\n onFocus={handleFocus}\n onBlur={handleBlur}\n renderDayContents={renderDayContents}\n TooltipProps={TooltipProps}\n />\n </div>\n </CalendarContext.Provider>\n );\n },\n);\n"],"names":["Calendar","calendarCss"],"mappings":";;;;;;;;;;;;;;;AA+BA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAC5B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,YAAA;AAAA,MACA,gBAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,OAAQ,EAAA,GAAI,WAAY,CAAA;AAAA,MACrC,gBAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACJ,CAAA,CAAA;AAED,IAAM,MAAA,EAAE,oBAAuB,GAAA,OAAA,CAAA;AAE/B,IAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,MAAA,kBAAA,CAAmB,IAAI,CAAA,CAAA;AAAA,KACzB,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,IAAM,MAAA,UAAA,GAAa,YAAY,MAAM;AACnC,MAAA,kBAAA,CAAmB,KAAK,CAAA,CAAA;AAAA,KAC1B,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,IAAA,MAAM,aAAgB,GAAA,IAAI,aAAc,CAAA,gBAAA,EAAoB,EAAA;AAAA,MAC1D,KAAO,EAAA,MAAA;AAAA,MACP,IAAM,EAAA,SAAA;AAAA,KACP,EAAE,MAAO,CAAA,KAAA,CAAM,aAAa,MAAO,CAAA,gBAAA,EAAkB,CAAC,CAAA,CAAA;AACvD,IACE,uBAAA,GAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAA;AAAA,QACA,OAAA;AAAA,OACF;AAAA,MAEA,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,IAAK,EAAA,aAAA;AAAA,QACL,YAAY,EAAA,aAAA;AAAA,QACZ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,kBAAA,EAAA;AAAA,YACC,gBAAA;AAAA,YACA,gBAAA;AAAA,WACF,CAAA;AAAA,8BACC,kBAAmB,EAAA,EAAA,CAAA;AAAA,0BACnB,GAAA,CAAA,gBAAA,EAAA;AAAA,YACC,OAAS,EAAA,WAAA;AAAA,YACT,MAAQ,EAAA,UAAA;AAAA,YACR,iBAAA;AAAA,YACA,YAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/calendar/internal/CalendarDay.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var css_248z = ".saltCalendarDay {\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  width: var(--salt-size-base);\n  height: var(--salt-size-base);\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  cursor: pointer;\n  border: none;\n  padding: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  overflow: hidden;\n}\n.saltCalendarDay-content {\n  margin: 0 var(--salt-spacing-50);\n  width: 100%;\n}\n\n.saltCalendarDay:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(0px - var(--salt-focused-outlineWidth));\n}\n\n.saltCalendarDay-outOfRange {\n  color: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay-outOfRange:hover {\n  color: var(--salt-content-primary-foreground);\n}\n.saltCalendarDay-outOfRange .saltCalendarDay-today {\n  border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-outOfRange.saltCalendarDay-highlighted:before {\n  background: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay:hover,\n.saltCalendarDay-hoveredOffset,\n.saltCalendarDay-hoveredOffset:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltCalendarDay-selected {\n  border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selectedStart {\n  z-index: var(--salt-zIndex-default);\n\n  border-top-left-radius: var(--salt-palette-corner-weak, 0);\n  border-bottom-left-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selectedEnd {\n  border-top-right-radius: var(--salt-palette-corner-weak, 0);\n  border-bottom-right-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selected,\n.saltCalendarDay-selected:hover,\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart:hover,\n.saltCalendarDay-selectedEnd,\n.saltCalendarDay-selectedEnd:hover {\n  background: var(--salt-selectable-background-selected);\n  box-shadow: 0 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-hoveredSpan,\n.saltCalendarDay-hoveredSpan:hover,\n.saltCalendarDay-selectedSpan,\n.saltCalendarDay-selectedSpan:hover {\n  background: var(--salt-selectable-background-hover);\n  box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover), calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border)\n    var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-disabled,\n.saltCalendarDay-disabled:hover,\n.saltCalendarDay-unselectable,\n.saltCalendarDay-unselectable:hover {\n  background: var(--salt-selectable-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltCalendarDay-highlighted:before,\n.saltCalendarDay-highlighted:hover:before {\n  content: \"\";\n  height: var(--salt-spacing-200); /* TODO: change for size-modifier when available */\n  width: var(--salt-spacing-200);\n  top: calc(var(--salt-spacing-100) * -1);\n  right: calc(var(--salt-spacing-100) * -1);\n  transform: rotate(45deg);\n  background: var(--salt-accent-background);\n  position: absolute;\n}\n\n.saltCalendarDay-disabled {\n  color: var(--salt-content-secondary-foreground-disabled);\n}\n.saltCalendarDay-unselectable:after {\n  content: \"\";\n  height: var(--salt-size-border);\n  width: calc(100% - var(--salt-spacing-100));\n  background: var(--salt-content-secondary-foreground);\n  position: absolute;\n}\n\n.saltCalendarDay-today,\n.saltCalendarDay-today:hover,\n.saltCalendarDay-outOfRange .saltCalendarDay-today:hover {\n  border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-accent-borderColor);\n  margin-bottom: calc(var(--salt-size-indicator) * -1);\n}\n\n.saltCalendarDay-hidden {\n  visibility: hidden;\n}\n";
+var css_248z = ".saltCalendarDay {\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  width: var(--salt-size-base);\n  height: var(--salt-size-base);\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  cursor: pointer;\n  border: none;\n  padding: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  overflow: hidden;\n}\n.saltCalendarDay-content {\n  margin: 0 var(--salt-spacing-50);\n  width: 100%;\n}\n\n.saltCalendarDay:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(0px - var(--salt-focused-outlineWidth));\n}\n\n.saltCalendarDay-outOfRange {\n  color: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay-outOfRange:hover {\n  color: var(--salt-content-primary-foreground);\n}\n.saltCalendarDay-outOfRange .saltCalendarDay-today {\n  border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-outOfRange.saltCalendarDay-highlighted:before {\n  background: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay:hover,\n.saltCalendarDay-hoveredOffset,\n.saltCalendarDay-hoveredOffset:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltCalendarDay-selected {\n  border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selectedStart {\n  z-index: var(--salt-zIndex-default);\n\n  border-top-left-radius: var(--salt-palette-corner-weak, 0);\n  border-bottom-left-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selectedEnd {\n  border-top-right-radius: var(--salt-palette-corner-weak, 0);\n  border-bottom-right-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selected,\n.saltCalendarDay-selected:hover,\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart:hover,\n.saltCalendarDay-selectedEnd,\n.saltCalendarDay-selectedEnd:hover {\n  background: var(--salt-selectable-background-selected);\n  box-shadow: 0 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-hoveredSpan,\n.saltCalendarDay-hoveredSpan:hover,\n.saltCalendarDay-selectedSpan,\n.saltCalendarDay-selectedSpan:hover {\n  background: var(--salt-selectable-background-hover);\n  box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover), calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border)\n    var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-disabled,\n.saltCalendarDay-disabled:hover,\n.saltCalendarDay-unselectable,\n.saltCalendarDay-unselectable:hover {\n  background: var(--salt-selectable-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltCalendarDay-highlighted:before,\n.saltCalendarDay-highlighted:hover:before {\n  content: \"\";\n  height: var(--salt-spacing-200); /* TODO: change for size-modifier when available */\n  width: var(--salt-spacing-200);\n  top: calc(var(--salt-spacing-100) * -1);\n  right: calc(var(--salt-spacing-100) * -1);\n  transform: rotate(45deg);\n  background: var(--salt-accent-background);\n  position: absolute;\n}\n\n.saltCalendarDay-unselectable:after {\n  content: \"\";\n  height: var(--salt-size-border);\n  width: calc(100% - var(--salt-spacing-100));\n  background: var(--salt-content-secondary-foreground);\n  position: absolute;\n}\n\n.saltCalendarDay-today,\n.saltCalendarDay-today:hover,\n.saltCalendarDay-outOfRange .saltCalendarDay-today:hover {\n  border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-accent-borderColor);\n  margin-bottom: calc(var(--salt-size-indicator) * -1);\n}\n\n.saltCalendarDay-disabled,\n.saltCalendarDay-disabled:hover {\n  color: var(--salt-content-secondary-foreground-disabled);\n}\n\n.saltCalendarDay-hidden {\n  visibility: hidden;\n}\n";
 export { css_248z as default };
 //# sourceMappingURL=CalendarDay.css.js.map

package/dist-es/calendar/internal/CalendarNavigation.js CHANGED Viewed

@@ -93,6 +93,7 @@ const CalendarNavigation = forwardRef(function CalendarNavigation2(props, ref) {
     MonthDropdownProps,
     YearDropdownProps,
     hideYearDropdown,
+    borderedDropdown,
     ...rest
   } = props;
   const targetWindow = useWindow();
@@ -161,6 +162,7 @@ const CalendarNavigation = forwardRef(function CalendarNavigation2(props, ref) {
         className: withBaseName("dropdowns"),
         children: [
           /* @__PURE__ */ jsx(Dropdown, {
+            bordered: borderedDropdown,
             "aria-label": "Month Dropdown",
             selected: selectedMonth ? [selectedMonth] : [],
             value: formatMonth(selectedMonth),
@@ -178,6 +180,7 @@ const CalendarNavigation = forwardRef(function CalendarNavigation2(props, ref) {
             selected: selectedYear ? [selectedYear] : [],
             value: formatYear(selectedYear),
             onSelectionChange: handleYearSelect,
+            bordered: borderedDropdown,
             ...YearDropdownProps,
             children: years.map((year) => /* @__PURE__ */ jsx(OptionWithTooltip, {
               value: year,

package/dist-es/calendar/internal/CalendarNavigation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CalendarNavigation.js","sources":["../src/calendar/internal/CalendarNavigation.tsx"],"sourcesContent":["import {\n Button,\n type ButtonProps,\n Dropdown,\n type DropdownProps,\n Option,\n type OptionProps,\n Tooltip,\n makePrefixer,\n useListControlContext,\n} from \"@salt-ds/core\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithRef,\n type MouseEventHandler,\n type SyntheticEvent,\n forwardRef,\n} from \"react\";\n\nimport { useCalendarContext } from \"./CalendarContext\";\n\nimport {\n type DateValue,\n isSameMonth,\n isSameYear,\n} from \"@internationalized/date\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport calendarNavigationCss from \"./CalendarNavigation.css\";\nimport { formatDate, monthDiff, monthsForLocale } from \"./utils\";\n\ntype dateDropdownProps = DropdownProps<DateValue>;\n\nexport interface CalendarNavigationProps extends ComponentPropsWithRef<\"div\"> {\n MonthDropdownProps?: dateDropdownProps;\n YearDropdownProps?: dateDropdownProps;\n onMonthSelect?: dateDropdownProps[\"onChange\"];\n onYearSelect?: dateDropdownProps[\"onChange\"];\n onNavigateNext?: ButtonProps[\"onClick\"];\n onNavigatePrevious?: ButtonProps[\"onClick\"];\n hideYearDropdown?: boolean;\n}\n\ninterface OptionWithTooltipProps extends OptionProps {\n value: DateValue;\n tooltipContent: string;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarNavigation\");\n\nfunction useCalendarNavigation() {\n const {\n state: { visibleMonth, minDate, maxDate },\n helpers: {\n setVisibleMonth,\n isDayVisible,\n isOutsideAllowedYears,\n isOutsideAllowedMonths,\n },\n } = useCalendarContext();\n\n const moveToNextMonth = (event: SyntheticEvent) => {\n setVisibleMonth(event, visibleMonth.add({ months: 1 }));\n };\n\n const moveToPreviousMonth = (event: SyntheticEvent) => {\n setVisibleMonth(event, visibleMonth.subtract({ months: 1 }));\n };\n\n const moveToMonth = (event: SyntheticEvent, month: DateValue) => {\n let newMonth = month;\n\n if (!isOutsideAllowedYears(newMonth)) {\n if (isOutsideAllowedMonths(newMonth)) {\n // If month is navigable we should move to the closest navigable month\n const navigableMonths = monthsForLocale(visibleMonth).filter(\n (n) => !isOutsideAllowedMonths(n),\n );\n newMonth = navigableMonths.reduce((closestMonth, currentMonth) =>\n Math.abs(monthDiff(currentMonth, newMonth)) <\n Math.abs(monthDiff(closestMonth, newMonth))\n ? currentMonth\n : closestMonth,\n );\n }\n setVisibleMonth(event, newMonth);\n }\n };\n\n const months: DateValue[] = monthsForLocale(visibleMonth);\n\n const years: DateValue[] = [-2, -1, 0, 1, 2]\n .map((delta) => visibleMonth.add({ years: delta }))\n .filter((year) => !isOutsideAllowedYears(year));\n\n const selectedMonth: DateValue \| undefined = months.find((month: DateValue) =>\n isSameMonth(month, visibleMonth),\n );\n const selectedYear: DateValue \| undefined = years.find((year: DateValue) =>\n isSameYear(year, visibleMonth),\n );\n\n const canNavigatePrevious = !(minDate && isDayVisible(minDate));\n const canNavigateNext = !(maxDate && isDayVisible(maxDate));\n\n return {\n moveToNextMonth,\n moveToPreviousMonth,\n moveToMonth,\n visibleMonth,\n months,\n years,\n canNavigateNext,\n canNavigatePrevious,\n selectedMonth,\n selectedYear,\n isOutsideAllowedMonths,\n };\n}\n\nconst OptionWithTooltip = ({\n value,\n children,\n disabled,\n tooltipContent,\n}: OptionWithTooltipProps) => {\n const { activeState, openState } = useListControlContext();\n const open = activeState?.value === value;\n\n return (\n <Tooltip\n placement=\"right\"\n open={open && openState}\n disabled={!disabled}\n content={tooltipContent}\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n >\n <Option value={value} disabled={disabled}>\n {children}\n </Option>\n </Tooltip>\n );\n};\n\nexport const CalendarNavigation = forwardRef<\n HTMLDivElement,\n CalendarNavigationProps\n>(function CalendarNavigation(props, ref) {\n const {\n className,\n MonthDropdownProps,\n YearDropdownProps,\n hideYearDropdown,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-navigation\",\n css: calendarNavigationCss,\n window: targetWindow,\n });\n\n const {\n moveToPreviousMonth,\n moveToNextMonth,\n moveToMonth,\n months,\n years,\n canNavigateNext,\n canNavigatePrevious,\n visibleMonth,\n selectedMonth,\n selectedYear,\n isOutsideAllowedMonths,\n } = useCalendarNavigation();\n\n const handleNavigatePrevious: MouseEventHandler<HTMLButtonElement> = (\n event,\n ) => {\n moveToPreviousMonth(event);\n };\n\n const handleNavigateNext: MouseEventHandler<HTMLButtonElement> = (event) => {\n moveToNextMonth(event);\n };\n\n const handleMonthSelect = (event: SyntheticEvent, month: DateValue[]) => {\n moveToMonth(event, month[0]);\n };\n\n const handleYearSelect = (event: SyntheticEvent, year: DateValue[]) => {\n moveToMonth(event, year[0]);\n };\n\n const formatMonth = (date?: DateValue) => {\n return !date\n ? \"\"\n : formatDate(date, { month: hideYearDropdown ? \"long\" : \"short\" });\n };\n\n const formatYear = (date?: DateValue) => {\n return !date ? \"\" : formatDate(date, { year: \"numeric\" });\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"hideYearDropdown\")]: hideYearDropdown },\n className,\n )}\n ref={ref}\n {...rest}\n >\n <Tooltip\n placement=\"top\"\n disabled={canNavigatePrevious}\n content=\"Past dates are out of range\"\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n >\n <Button\n disabled={!canNavigatePrevious}\n variant=\"secondary\"\n onClick={handleNavigatePrevious}\n focusableWhenDisabled={true}\n >\n <ChevronLeftIcon aria-label=\"Previous Month\" />\n </Button>\n </Tooltip>\n <div className={withBaseName(\"dropdowns\")}>\n <Dropdown\n aria-label=\"Month Dropdown\"\n selected={selectedMonth ? [selectedMonth] : []}\n value={formatMonth(selectedMonth)}\n onSelectionChange={handleMonthSelect}\n {...MonthDropdownProps}\n >\n {months.map((month) => (\n <OptionWithTooltip\n key={formatMonth(month)}\n value={month}\n disabled={isOutsideAllowedMonths(month)}\n tooltipContent=\"This month is out of range\"\n >\n {formatMonth(month)}\n </OptionWithTooltip>\n ))}\n </Dropdown>\n {!hideYearDropdown && (\n <Dropdown\n aria-label=\"Year Dropdown\"\n selected={selectedYear ? [selectedYear] : []}\n value={formatYear(selectedYear)}\n onSelectionChange={handleYearSelect}\n {...YearDropdownProps}\n >\n {years.map((year) => (\n <OptionWithTooltip\n key={formatYear(year)}\n value={year}\n tooltipContent=\"This year is out of range\"\n >\n {formatYear(year)}\n </OptionWithTooltip>\n ))}\n </Dropdown>\n )}\n </div>\n <Tooltip\n placement=\"top\"\n disabled={canNavigateNext}\n content=\"Future dates are out of range\"\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n >\n <Button\n disabled={!canNavigateNext}\n variant=\"secondary\"\n onClick={handleNavigateNext}\n focusableWhenDisabled={true}\n >\n <ChevronRightIcon aria-label=\"Next Month\" />\n </Button>\n </Tooltip>\n </div>\n );\n});\n"],"names":["CalendarNavigation","calendarNavigationCss"],"mappings":"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"}
1	+ {"version":3,"file":"CalendarNavigation.js","sources":["../src/calendar/internal/CalendarNavigation.tsx"],"sourcesContent":["import {\n Button,\n type ButtonProps,\n Dropdown,\n type DropdownProps,\n Option,\n type OptionProps,\n Tooltip,\n makePrefixer,\n useListControlContext,\n} from \"@salt-ds/core\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithRef,\n type MouseEventHandler,\n type SyntheticEvent,\n forwardRef,\n} from \"react\";\n\nimport { useCalendarContext } from \"./CalendarContext\";\n\nimport {\n type DateValue,\n isSameMonth,\n isSameYear,\n} from \"@internationalized/date\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport calendarNavigationCss from \"./CalendarNavigation.css\";\nimport { formatDate, monthDiff, monthsForLocale } from \"./utils\";\n\ntype dateDropdownProps = DropdownProps<DateValue>;\n\nexport interface CalendarNavigationProps extends ComponentPropsWithRef<\"div\"> {\n MonthDropdownProps?: dateDropdownProps;\n YearDropdownProps?: dateDropdownProps;\n onMonthSelect?: dateDropdownProps[\"onChange\"];\n onYearSelect?: dateDropdownProps[\"onChange\"];\n borderedDropdown?: dateDropdownProps[\"bordered\"];\n onNavigateNext?: ButtonProps[\"onClick\"];\n onNavigatePrevious?: ButtonProps[\"onClick\"];\n hideYearDropdown?: boolean;\n}\n\ninterface OptionWithTooltipProps extends OptionProps {\n value: DateValue;\n tooltipContent: string;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarNavigation\");\n\nfunction useCalendarNavigation() {\n const {\n state: { visibleMonth, minDate, maxDate },\n helpers: {\n setVisibleMonth,\n isDayVisible,\n isOutsideAllowedYears,\n isOutsideAllowedMonths,\n },\n } = useCalendarContext();\n\n const moveToNextMonth = (event: SyntheticEvent) => {\n setVisibleMonth(event, visibleMonth.add({ months: 1 }));\n };\n\n const moveToPreviousMonth = (event: SyntheticEvent) => {\n setVisibleMonth(event, visibleMonth.subtract({ months: 1 }));\n };\n\n const moveToMonth = (event: SyntheticEvent, month: DateValue) => {\n let newMonth = month;\n\n if (!isOutsideAllowedYears(newMonth)) {\n if (isOutsideAllowedMonths(newMonth)) {\n // If month is navigable we should move to the closest navigable month\n const navigableMonths = monthsForLocale(visibleMonth).filter(\n (n) => !isOutsideAllowedMonths(n),\n );\n newMonth = navigableMonths.reduce((closestMonth, currentMonth) =>\n Math.abs(monthDiff(currentMonth, newMonth)) <\n Math.abs(monthDiff(closestMonth, newMonth))\n ? currentMonth\n : closestMonth,\n );\n }\n setVisibleMonth(event, newMonth);\n }\n };\n\n const months: DateValue[] = monthsForLocale(visibleMonth);\n\n const years: DateValue[] = [-2, -1, 0, 1, 2]\n .map((delta) => visibleMonth.add({ years: delta }))\n .filter((year) => !isOutsideAllowedYears(year));\n\n const selectedMonth: DateValue \| undefined = months.find((month: DateValue) =>\n isSameMonth(month, visibleMonth),\n );\n const selectedYear: DateValue \| undefined = years.find((year: DateValue) =>\n isSameYear(year, visibleMonth),\n );\n\n const canNavigatePrevious = !(minDate && isDayVisible(minDate));\n const canNavigateNext = !(maxDate && isDayVisible(maxDate));\n\n return {\n moveToNextMonth,\n moveToPreviousMonth,\n moveToMonth,\n visibleMonth,\n months,\n years,\n canNavigateNext,\n canNavigatePrevious,\n selectedMonth,\n selectedYear,\n isOutsideAllowedMonths,\n };\n}\n\nconst OptionWithTooltip = ({\n value,\n children,\n disabled,\n tooltipContent,\n}: OptionWithTooltipProps) => {\n const { activeState, openState } = useListControlContext();\n const open = activeState?.value === value;\n\n return (\n <Tooltip\n placement=\"right\"\n open={open && openState}\n disabled={!disabled}\n content={tooltipContent}\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n >\n <Option value={value} disabled={disabled}>\n {children}\n </Option>\n </Tooltip>\n );\n};\n\nexport const CalendarNavigation = forwardRef<\n HTMLDivElement,\n CalendarNavigationProps\n>(function CalendarNavigation(props, ref) {\n const {\n className,\n MonthDropdownProps,\n YearDropdownProps,\n hideYearDropdown,\n borderedDropdown,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-navigation\",\n css: calendarNavigationCss,\n window: targetWindow,\n });\n\n const {\n moveToPreviousMonth,\n moveToNextMonth,\n moveToMonth,\n months,\n years,\n canNavigateNext,\n canNavigatePrevious,\n visibleMonth,\n selectedMonth,\n selectedYear,\n isOutsideAllowedMonths,\n } = useCalendarNavigation();\n\n const handleNavigatePrevious: MouseEventHandler<HTMLButtonElement> = (\n event,\n ) => {\n moveToPreviousMonth(event);\n };\n\n const handleNavigateNext: MouseEventHandler<HTMLButtonElement> = (event) => {\n moveToNextMonth(event);\n };\n\n const handleMonthSelect = (event: SyntheticEvent, month: DateValue[]) => {\n moveToMonth(event, month[0]);\n };\n\n const handleYearSelect = (event: SyntheticEvent, year: DateValue[]) => {\n moveToMonth(event, year[0]);\n };\n\n const formatMonth = (date?: DateValue) => {\n return !date\n ? \"\"\n : formatDate(date, { month: hideYearDropdown ? \"long\" : \"short\" });\n };\n\n const formatYear = (date?: DateValue) => {\n return !date ? \"\" : formatDate(date, { year: \"numeric\" });\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"hideYearDropdown\")]: hideYearDropdown },\n className,\n )}\n ref={ref}\n {...rest}\n >\n <Tooltip\n placement=\"top\"\n disabled={canNavigatePrevious}\n content=\"Past dates are out of range\"\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n >\n <Button\n disabled={!canNavigatePrevious}\n variant=\"secondary\"\n onClick={handleNavigatePrevious}\n focusableWhenDisabled={true}\n >\n <ChevronLeftIcon aria-label=\"Previous Month\" />\n </Button>\n </Tooltip>\n <div className={withBaseName(\"dropdowns\")}>\n <Dropdown\n bordered={borderedDropdown}\n aria-label=\"Month Dropdown\"\n selected={selectedMonth ? [selectedMonth] : []}\n value={formatMonth(selectedMonth)}\n onSelectionChange={handleMonthSelect}\n {...MonthDropdownProps}\n >\n {months.map((month) => (\n <OptionWithTooltip\n key={formatMonth(month)}\n value={month}\n disabled={isOutsideAllowedMonths(month)}\n tooltipContent=\"This month is out of range\"\n >\n {formatMonth(month)}\n </OptionWithTooltip>\n ))}\n </Dropdown>\n {!hideYearDropdown && (\n <Dropdown\n aria-label=\"Year Dropdown\"\n selected={selectedYear ? [selectedYear] : []}\n value={formatYear(selectedYear)}\n onSelectionChange={handleYearSelect}\n bordered={borderedDropdown}\n {...YearDropdownProps}\n >\n {years.map((year) => (\n <OptionWithTooltip\n key={formatYear(year)}\n value={year}\n tooltipContent=\"This year is out of range\"\n >\n {formatYear(year)}\n </OptionWithTooltip>\n ))}\n </Dropdown>\n )}\n </div>\n <Tooltip\n placement=\"top\"\n disabled={canNavigateNext}\n content=\"Future dates are out of range\"\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n >\n <Button\n disabled={!canNavigateNext}\n variant=\"secondary\"\n onClick={handleNavigateNext}\n focusableWhenDisabled={true}\n >\n <ChevronRightIcon aria-label=\"Next Month\" />\n </Button>\n </Tooltip>\n </div>\n );\n});\n"],"names":["CalendarNavigation","calendarNavigationCss"],"mappings":"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"}

package/dist-es/date-input/DateInput.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var css_248z = "/* Style applied to the root element */\n.saltDateInput {\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderStyle: var(--salt-editable-borderStyle);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n  --input-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--saltDateInput-background, var(--input-background));\n  color: var(--saltDateInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltDateInput-fontSize, var(--salt-text-fontSize));\n  height: var(--saltDateInput-height, var(--salt-size-base));\n  line-height: var(--saltDateInput-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltDateInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltDateInput-minWidth, 4em);\n  padding-left: var(--saltDateInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltDateInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.saltDateInput:hover {\n  --input-borderStyle: var(--salt-editable-borderStyle-hover);\n  --input-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--saltDateInput-background-hover, var(--input-background-hover));\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltDateInput:active {\n  --input-borderColor: var(--salt-editable-borderColor-active);\n  --input-borderStyle: var(--salt-editable-borderStyle-active);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--saltDateInput-background-active, var(--input-background-active));\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltDateInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-active: var(--salt-editable-primary-background-active);\n  --input-background-hover: var(--salt-editable-primary-background-hover);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltDateInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-active: var(--salt-editable-secondary-background-active);\n  --input-background-hover: var(--salt-editable-secondary-background-active);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltDateInput-error,\n.saltDateInput-error:hover {\n  --input-background: var(--salt-status-error-background);\n  --input-background-active: var(--salt-status-error-background);\n  --input-background-hover: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltDateInput-warning,\n.saltDateInput-warning:hover {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-active: var(--salt-status-warning-background);\n  --input-background-hover: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltDateInput-success,\n.saltDateInput-success:hover {\n  --input-background: var(--salt-status-success-background);\n  --input-background-active: var(--salt-status-success-background);\n  --input-background-hover: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltDateInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltDateInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: left;\n  width: min-content;\n}\n\n/* Reset in the  class */\n.saltDateInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltDateInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltDateInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltDateInput-focused {\n  --input-borderColor: var(--input-outlineColor);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--saltDateInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltDateInput.saltDateInput-readOnly {\n  --input-borderColor: var(--salt-editable-borderColor-readonly);\n  --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --input-borderWidth: var(--salt-size-border);\n\n  background: var(--input-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltDateInput-focused.saltDateInput-disabled {\n  --input-borderWidth: var(--salt-size-border);\n  outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltDateInput-focused.saltDateInput-readOnly {\n  --input-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltDateInput-disabled .saltDateInput-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltDateInput.saltDateInput-disabled,\n.saltDateInput.saltDateInput-disabled:hover,\n.saltDateInput.saltDateInput-disabled:active {\n  --input-borderColor: var(--salt-editable-borderColor-disabled);\n  --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --input-borderWidth: var(--salt-size-border);\n\n  background: var(--input-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltDateInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltDateInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied to end adornments */\n.saltDateInput-endAdornmentContainer {\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n  margin-left: auto;\n  align-items: end;\n}\n\n.saltDateInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltDateInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltDateInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: var(--salt-spacing-50);\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltDateInput {\n  --input-border: none;\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderStyle: var(--salt-editable-borderStyle);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n  --input-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--saltDateInput-background, var(--input-background));\n  border: var(--input-border);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltDateInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltDateInput-fontSize, var(--salt-text-fontSize));\n  height: var(--saltDateInput-height, var(--salt-size-base));\n  line-height: var(--saltDateInput-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltDateInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltDateInput-minWidth, 4em);\n  padding-left: var(--saltDateInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltDateInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.saltDateInput:hover {\n  --input-borderStyle: var(--salt-editable-borderStyle-hover);\n  --input-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--saltDateInput-background-hover, var(--input-background-hover));\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltDateInput:active {\n  --input-borderColor: var(--salt-editable-borderColor-active);\n  --input-borderStyle: var(--salt-editable-borderStyle-active);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--saltDateInput-background-active, var(--input-background-active));\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltDateInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-active: var(--salt-editable-primary-background-active);\n  --input-background-hover: var(--salt-editable-primary-background-hover);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltDateInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-active: var(--salt-editable-secondary-background-active);\n  --input-background-hover: var(--salt-editable-secondary-background-active);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltDateInput-error,\n.saltDateInput-error:hover {\n  --input-background: var(--salt-status-error-background);\n  --input-background-active: var(--salt-status-error-background);\n  --input-background-hover: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltDateInput-warning,\n.saltDateInput-warning:hover {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-active: var(--salt-status-warning-background);\n  --input-background-hover: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltDateInput-success,\n.saltDateInput-success:hover {\n  --input-background: var(--salt-status-success-background);\n  --input-background-active: var(--salt-status-success-background);\n  --input-background-hover: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltDateInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltDateInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: left;\n  width: min-content;\n}\n\n/* Reset in the  class */\n.saltDateInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltDateInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltDateInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltDateInput-focused {\n  --input-borderColor: var(--input-outlineColor);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--saltDateInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltDateInput.saltDateInput-readOnly {\n  --input-borderColor: var(--salt-editable-borderColor-readonly);\n  --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --input-borderWidth: var(--salt-size-border);\n\n  background: var(--input-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltDateInput-focused.saltDateInput-disabled {\n  --input-borderWidth: var(--salt-size-border);\n  outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltDateInput-focused.saltDateInput-readOnly {\n  --input-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltDateInput-disabled .saltDateInput-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltDateInput.saltDateInput-disabled,\n.saltDateInput.saltDateInput-disabled:hover,\n.saltDateInput.saltDateInput-disabled:active {\n  --input-borderColor: var(--salt-editable-borderColor-disabled);\n  --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --input-borderWidth: var(--salt-size-border);\n\n  background: var(--input-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltDateInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltDateInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltDateInput.saltDateInput-bordered {\n  --input-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--input-borderColor);\n  --input-borderWidth: 0;\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltDateInput-bordered.saltDateInput-focused,\n.saltDateInput-bordered:active {\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltDateInput-bordered.saltDateInput-readOnly,\n.saltDateInput-bordered.saltDateInput-disabled:hover {\n  --input-borderWidth: 0;\n}\n\n/* Style applied to end adornments */\n.saltDateInput-endAdornmentContainer {\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n  margin-left: auto;\n  align-items: end;\n}\n\n.saltDateInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltDateInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltDateInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: var(--salt-spacing-50);\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
 export { css_248z as default };
 //# sourceMappingURL=DateInput.css.js.map

package/dist-es/date-input/DateInput.js CHANGED Viewed

@@ -52,6 +52,7 @@ const DateInput = forwardRef(function DateInput2({
   readOnly: readOnlyProp,
   validationStatus: validationStatusProp,
   variant = "primary",
+  bordered = false,
   dateFormatter = defaultDateFormatter,
   placeholder = "dd mmm yyyy",
   startInputRef,
@@ -190,7 +191,8 @@ const DateInput = forwardRef(function DateInput2({
         [withBaseName("focused")]: !isDisabled && focused,
         [withBaseName("disabled")]: isDisabled,
         [withBaseName("readOnly")]: isReadOnly,
-        [withBaseName(validationStatus != null ? validationStatus : "")]: validationStatus
+        [withBaseName(validationStatus != null ? validationStatus : "")]: validationStatus,
+        [withBaseName("bordered")]: bordered
       },
       className
     ),

package/dist-es/date-input/DateInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateInput.js","sources":["../src/date-input/DateInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type InputHTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n type RefObject,\n type SyntheticEvent,\n forwardRef,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport {\n CalendarDate,\n DateFormatter,\n type DateValue,\n getLocalTimeZone,\n parseAbsoluteToLocal,\n} from \"@internationalized/date\";\nimport {\n StatusAdornment,\n makePrefixer,\n useForkRef,\n useFormFieldProps,\n useId,\n} from \"@salt-ds/core\";\nimport {\n type RangeSelectionValueType,\n type SingleSelectionValueType,\n isRangeOrOffsetSelectionWithStartDate,\n} from \"../calendar\";\nimport { useDatePickerContext } from \"../date-picker/DatePickerContext\";\nimport dateInputCss from \"./DateInput.css\";\n\nconst withBaseName = makePrefixer(\"saltDateInput\");\nconst isInvalidDate = (value: string) =>\n value && Number.isNaN(new Date(value).getDay());\nconst createDate = (date: string): Date \| null => {\n if (!date \|\| isInvalidDate(date)) {\n return null;\n }\n return new Date(date);\n};\n\nconst getIsoDate = (date: Date) => {\n try {\n return parseAbsoluteToLocal(date?.toISOString());\n } catch (err) {\n return undefined;\n }\n};\n\nfunction getCalendarDate(inputDate: string) {\n const date = createDate(inputDate);\n if (!date) return undefined;\n const isoDate = getIsoDate(date);\n return isoDate && new CalendarDate(isoDate.year, isoDate.month, isoDate.day);\n}\n\nconst defaultDateFormatter = (date: DateValue \| undefined): string => {\n return date\n ? new DateFormatter(\"EN-GB\", {\n day: \"2-digit\",\n month: \"short\",\n year: \"numeric\",\n }).format(date.toDate(getLocalTimeZone()))\n : \"\";\n};\n\nexport interface DateInputProps<SelectionVariantType>\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\" \| \"onChange\">,\n Pick<ComponentPropsWithoutRef<\"input\">, \"disabled\" \| \"placeholder\"> {\n ariaLabel?: string;\n /*\n The marker to use in an empty read only DateInput.\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/dateInput#Attributes) applied to the `input` elements.\n /\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /\n If `true`, the component is read only.\n /\n readOnly?: boolean;\n /\n Validation status.\n /\n validationStatus?: \"error\" \| \"warning\" \| \"success\";\n /\n Styling variant. Defaults to \"primary\".\n /\n variant?: \"primary\" \| \"secondary\";\n /\n Function to format the input value.\n /\n dateFormatter?: (input: DateValue \| undefined) => string;\n /\n Reference for the startInput;\n /\n startInputRef?: RefObject<HTMLInputElement>;\n /\n Reference for the endInput;\n /\n endInputRef?: RefObject<HTMLInputElement>;\n /\n Selection variant. Defaults to single select.\n /\n selectionVariant?: \"default\" \| \"range\";\n /\n Callback fired when the selected date change.\n /\n onSelectionChange?: (\n event: SyntheticEvent,\n selectedDate?: SelectionVariantType,\n ) => void;\n /\n Callback fired when the input value change.\n */\n onChange?: SelectionVariantType extends SingleSelectionValueType\n ? (\n event: ChangeEvent<HTMLInputElement>,\n selectedDateInputValue?: string,\n ) => void\n : (\n event: ChangeEvent<HTMLInputElement>,\n startDateInputValue?: string,\n endDateInputValue?: string,\n ) => void;\n}\n\nexport const DateInput = forwardRef<\n HTMLDivElement,\n DateInputProps<SingleSelectionValueType \| RangeSelectionValueType>\n>(function DateInput(\n {\n className,\n disabled,\n \"aria-label\": ariaLabel,\n selectionVariant: selectionVariantProp,\n emptyReadOnlyMarker = \"—\",\n inputProps = {},\n endAdornment,\n readOnly: readOnlyProp,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n dateFormatter = defaultDateFormatter,\n placeholder = \"dd mmm yyyy\",\n startInputRef,\n endInputRef,\n onSelectionChange,\n onChange,\n ...rest\n },\n ref,\n) {\n const wrapperRef = useRef(null);\n const inputRef = useForkRef<HTMLDivElement>(ref, wrapperRef);\n const inputStringFormatter = (input: string): string => {\n const date = getCalendarDate(input);\n return !input \|\| !date ? input : dateFormatter(date);\n };\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dateInput\",\n css: dateInputCss,\n window: targetWindow,\n });\n\n const {\n selectedDate,\n setSelectedDate,\n selectionVariant: pickerSelectionVariant,\n openState,\n setOpen,\n } = useDatePickerContext();\n\n const selectionVariant = selectionVariantProp ?? pickerSelectionVariant;\n const isRangePicker =\n isRangeOrOffsetSelectionWithStartDate(selectedDate) \|\|\n selectionVariant === \"range\";\n\n const endDateInputID = useId();\n const startDateInputID = useId();\n\n const [focused, setFocused] = useState(false);\n const [startDateStringValue, setStartDateStringValue] = useState<string>(\n dateFormatter(\n isRangeOrOffsetSelectionWithStartDate(selectedDate)\n ? selectedDate?.startDate\n : selectedDate,\n ),\n );\n const [endDateStringValue, setEndDateStringValue] = useState<string>(\n dateFormatter(\n isRangeOrOffsetSelectionWithStartDate(selectedDate)\n ? selectedDate?.endDate\n : undefined,\n ),\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 isReadOnly = readOnlyProp \|\| formFieldReadOnly;\n const isDisabled = disabled \|\| formFieldDisabled;\n\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const {\n \"aria-describedby\": dateInputDescribedBy,\n \"aria-labelledby\": dateInputLabelledBy,\n onBlur,\n onKeyDown,\n onFocus,\n required: dateInputPropsRequired,\n ...restDateInputProps\n } = inputProps;\n\n // Update date strings when dates change\n useEffect(() => {\n if (isRangeOrOffsetSelectionWithStartDate(selectedDate)) {\n selectedDate?.startDate &&\n setStartDateStringValue(dateFormatter(selectedDate?.startDate));\n selectedDate?.endDate &&\n setEndDateStringValue(dateFormatter(selectedDate?.endDate));\n } else {\n setStartDateStringValue(dateFormatter(selectedDate));\n }\n }, [selectedDate, dateFormatter]);\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : dateInputPropsRequired;\n const updateStartDate = (event: SyntheticEvent, dateString: string) => {\n const inputDate = inputStringFormatter(dateString);\n const calendarDate = getCalendarDate(inputDate);\n const newSelectedDate = isRangePicker\n ? { ...selectedDate, startDate: calendarDate }\n : calendarDate;\n setSelectedDate(newSelectedDate);\n onSelectionChange?.(event, newSelectedDate);\n };\n\n const updateEndDate = (event: SyntheticEvent, dateString: string) => {\n const inputDate = inputStringFormatter(dateString);\n const calendarDate = getCalendarDate(inputDate);\n const newSelectedDate = { ...selectedDate, endDate: calendarDate };\n setSelectedDate(newSelectedDate);\n onSelectionChange?.(event, newSelectedDate);\n };\n\n // Handlers\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n const handleStartDateBlur = (event: FocusEvent<HTMLInputElement>) => {\n updateStartDate(event, event.target.value);\n setFocused(false);\n };\n\n const handleStartDateChange = (event: ChangeEvent<HTMLInputElement>) => {\n const newStartValue = event.target.value;\n setStartDateStringValue(newStartValue);\n onChange?.(event, newStartValue, endDateStringValue);\n };\n\n const handleStartDateKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"Enter\") {\n updateStartDate(event, startDateStringValue);\n setOpen(false);\n }\n if (event.key === \"Tab\" && event.shiftKey && openState) {\n setOpen(false);\n }\n };\n\n const handleEndDateBlur = (event: FocusEvent<HTMLInputElement>) => {\n updateEndDate(event, event.target.value);\n setFocused(false);\n };\n const handleEndDateChange = (event: ChangeEvent<HTMLInputElement>) => {\n const newEndValue = event.target.value;\n setEndDateStringValue(newEndValue);\n onChange?.(event, startDateStringValue, newEndValue);\n };\n const handleEndDateKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"Enter\") {\n updateEndDate(event, endDateStringValue);\n setOpen(false);\n }\n };\n\n const handleInputClick = (event: SyntheticEvent<HTMLDivElement>) => {\n if (event.target === wrapperRef.current) {\n startInputRef?.current?.focus();\n }\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 className,\n )}\n onClick={(event) => handleInputClick(event)}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n ref={inputRef}\n {...rest}\n >\n <input\n autoComplete=\"off\"\n aria-describedby={clsx(formFieldDescribedBy, dateInputDescribedBy)}\n aria-labelledby={clsx(\n formFieldLabelledBy,\n dateInputLabelledBy,\n startDateInputID,\n )}\n aria-label={clsx(\"Start date\", ariaLabel)}\n id={startDateInputID}\n className={withBaseName(\"input\")}\n disabled={isDisabled}\n readOnly={isReadOnly}\n ref={startInputRef}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleStartDateBlur}\n onChange={handleStartDateChange}\n onKeyDown={handleStartDateKeyDown}\n onFocus={!isDisabled ? handleFocus : undefined}\n placeholder={placeholder}\n size={placeholder.length}\n value={\n isReadOnly && !startDateStringValue\n ? emptyReadOnlyMarker\n : startDateStringValue\n }\n {...restDateInputProps}\n required={isRequired}\n />\n {selectionVariant === \"range\" && (\n <>\n <span>-</span>\n <input\n autoComplete=\"off\"\n aria-describedby={clsx(formFieldDescribedBy, dateInputDescribedBy)}\n aria-labelledby={clsx(\n formFieldLabelledBy,\n dateInputLabelledBy,\n endDateInputID,\n )}\n aria-label={clsx(\"End date\", ariaLabel)}\n id={endDateInputID}\n className={withBaseName(\"input\")}\n disabled={isDisabled}\n readOnly={isReadOnly}\n ref={endInputRef}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleEndDateBlur}\n onChange={handleEndDateChange}\n onKeyDown={handleEndDateKeyDown}\n onFocus={!isDisabled ? handleFocus : undefined}\n placeholder={placeholder}\n size={placeholder.length}\n value={\n isReadOnly && !endDateStringValue\n ? emptyReadOnlyMarker\n : endDateStringValue\n }\n required={isRequired}\n {...restDateInputProps}\n />\n </>\n )}\n {\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {!isDisabled && !isReadOnly && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {endAdornment}\n </div>\n }\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n});\n"],"names":["DateInput","dateInputCss"],"mappings":"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"}
1	+ {"version":3,"file":"DateInput.js","sources":["../src/date-input/DateInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ChangeEvent,\n type ComponentPropsWithoutRef,\n type FocusEvent,\n type InputHTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n type RefObject,\n type SyntheticEvent,\n forwardRef,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nimport {\n CalendarDate,\n DateFormatter,\n type DateValue,\n getLocalTimeZone,\n parseAbsoluteToLocal,\n} from \"@internationalized/date\";\nimport {\n StatusAdornment,\n makePrefixer,\n useForkRef,\n useFormFieldProps,\n useId,\n} from \"@salt-ds/core\";\nimport {\n type RangeSelectionValueType,\n type SingleSelectionValueType,\n isRangeOrOffsetSelectionWithStartDate,\n} from \"../calendar\";\nimport { useDatePickerContext } from \"../date-picker/DatePickerContext\";\nimport dateInputCss from \"./DateInput.css\";\n\nconst withBaseName = makePrefixer(\"saltDateInput\");\nconst isInvalidDate = (value: string) =>\n value && Number.isNaN(new Date(value).getDay());\nconst createDate = (date: string): Date \| null => {\n if (!date \|\| isInvalidDate(date)) {\n return null;\n }\n return new Date(date);\n};\n\nconst getIsoDate = (date: Date) => {\n try {\n return parseAbsoluteToLocal(date?.toISOString());\n } catch (err) {\n return undefined;\n }\n};\n\nfunction getCalendarDate(inputDate: string) {\n const date = createDate(inputDate);\n if (!date) return undefined;\n const isoDate = getIsoDate(date);\n return isoDate && new CalendarDate(isoDate.year, isoDate.month, isoDate.day);\n}\n\nconst defaultDateFormatter = (date: DateValue \| undefined): string => {\n return date\n ? new DateFormatter(\"EN-GB\", {\n day: \"2-digit\",\n month: \"short\",\n year: \"numeric\",\n }).format(date.toDate(getLocalTimeZone()))\n : \"\";\n};\n\nexport interface DateInputProps<SelectionVariantType>\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\" \| \"onChange\">,\n Pick<ComponentPropsWithoutRef<\"input\">, \"disabled\" \| \"placeholder\"> {\n ariaLabel?: string;\n /*\n The marker to use in an empty read only DateInput.\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/dateInput#Attributes) applied to the `input` elements.\n /\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /\n If `true`, the component is read only.\n /\n readOnly?: boolean;\n /\n Validation status.\n /\n validationStatus?: \"error\" \| \"warning\" \| \"success\";\n /\n Styling variant. Defaults to \"primary\".\n /\n variant?: \"primary\" \| \"secondary\";\n /\n Styling variant with full border. Defaults to false\n /\n bordered?: boolean;\n /\n Function to format the input value.\n /\n dateFormatter?: (input: DateValue \| undefined) => string;\n /\n Reference for the startInput;\n /\n startInputRef?: RefObject<HTMLInputElement>;\n /\n Reference for the endInput;\n /\n endInputRef?: RefObject<HTMLInputElement>;\n /\n Selection variant. Defaults to single select.\n /\n selectionVariant?: \"default\" \| \"range\";\n /\n Callback fired when the selected date change.\n /\n onSelectionChange?: (\n event: SyntheticEvent,\n selectedDate?: SelectionVariantType,\n ) => void;\n /\n Callback fired when the input value change.\n */\n onChange?: SelectionVariantType extends SingleSelectionValueType\n ? (\n event: ChangeEvent<HTMLInputElement>,\n selectedDateInputValue?: string,\n ) => void\n : (\n event: ChangeEvent<HTMLInputElement>,\n startDateInputValue?: string,\n endDateInputValue?: string,\n ) => void;\n}\n\nexport const DateInput = forwardRef<\n HTMLDivElement,\n DateInputProps<SingleSelectionValueType \| RangeSelectionValueType>\n>(function DateInput(\n {\n className,\n disabled,\n \"aria-label\": ariaLabel,\n selectionVariant: selectionVariantProp,\n emptyReadOnlyMarker = \"—\",\n inputProps = {},\n endAdornment,\n readOnly: readOnlyProp,\n validationStatus: validationStatusProp,\n variant = \"primary\",\n bordered = false,\n dateFormatter = defaultDateFormatter,\n placeholder = \"dd mmm yyyy\",\n startInputRef,\n endInputRef,\n onSelectionChange,\n onChange,\n ...rest\n },\n ref,\n) {\n const wrapperRef = useRef(null);\n const inputRef = useForkRef<HTMLDivElement>(ref, wrapperRef);\n const inputStringFormatter = (input: string): string => {\n const date = getCalendarDate(input);\n return !input \|\| !date ? input : dateFormatter(date);\n };\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dateInput\",\n css: dateInputCss,\n window: targetWindow,\n });\n\n const {\n selectedDate,\n setSelectedDate,\n selectionVariant: pickerSelectionVariant,\n openState,\n setOpen,\n } = useDatePickerContext();\n\n const selectionVariant = selectionVariantProp ?? pickerSelectionVariant;\n const isRangePicker =\n isRangeOrOffsetSelectionWithStartDate(selectedDate) \|\|\n selectionVariant === \"range\";\n\n const endDateInputID = useId();\n const startDateInputID = useId();\n\n const [focused, setFocused] = useState(false);\n const [startDateStringValue, setStartDateStringValue] = useState<string>(\n dateFormatter(\n isRangeOrOffsetSelectionWithStartDate(selectedDate)\n ? selectedDate?.startDate\n : selectedDate,\n ),\n );\n const [endDateStringValue, setEndDateStringValue] = useState<string>(\n dateFormatter(\n isRangeOrOffsetSelectionWithStartDate(selectedDate)\n ? selectedDate?.endDate\n : undefined,\n ),\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 isReadOnly = readOnlyProp \|\| formFieldReadOnly;\n const isDisabled = disabled \|\| formFieldDisabled;\n\n const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n const {\n \"aria-describedby\": dateInputDescribedBy,\n \"aria-labelledby\": dateInputLabelledBy,\n onBlur,\n onKeyDown,\n onFocus,\n required: dateInputPropsRequired,\n ...restDateInputProps\n } = inputProps;\n\n // Update date strings when dates change\n useEffect(() => {\n if (isRangeOrOffsetSelectionWithStartDate(selectedDate)) {\n selectedDate?.startDate &&\n setStartDateStringValue(dateFormatter(selectedDate?.startDate));\n selectedDate?.endDate &&\n setEndDateStringValue(dateFormatter(selectedDate?.endDate));\n } else {\n setStartDateStringValue(dateFormatter(selectedDate));\n }\n }, [selectedDate, dateFormatter]);\n\n const isRequired = formFieldRequired\n ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n : dateInputPropsRequired;\n const updateStartDate = (event: SyntheticEvent, dateString: string) => {\n const inputDate = inputStringFormatter(dateString);\n const calendarDate = getCalendarDate(inputDate);\n const newSelectedDate = isRangePicker\n ? { ...selectedDate, startDate: calendarDate }\n : calendarDate;\n setSelectedDate(newSelectedDate);\n onSelectionChange?.(event, newSelectedDate);\n };\n\n const updateEndDate = (event: SyntheticEvent, dateString: string) => {\n const inputDate = inputStringFormatter(dateString);\n const calendarDate = getCalendarDate(inputDate);\n const newSelectedDate = { ...selectedDate, endDate: calendarDate };\n setSelectedDate(newSelectedDate);\n onSelectionChange?.(event, newSelectedDate);\n };\n\n // Handlers\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n const handleStartDateBlur = (event: FocusEvent<HTMLInputElement>) => {\n updateStartDate(event, event.target.value);\n setFocused(false);\n };\n\n const handleStartDateChange = (event: ChangeEvent<HTMLInputElement>) => {\n const newStartValue = event.target.value;\n setStartDateStringValue(newStartValue);\n onChange?.(event, newStartValue, endDateStringValue);\n };\n\n const handleStartDateKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"Enter\") {\n updateStartDate(event, startDateStringValue);\n setOpen(false);\n }\n if (event.key === \"Tab\" && event.shiftKey && openState) {\n setOpen(false);\n }\n };\n\n const handleEndDateBlur = (event: FocusEvent<HTMLInputElement>) => {\n updateEndDate(event, event.target.value);\n setFocused(false);\n };\n const handleEndDateChange = (event: ChangeEvent<HTMLInputElement>) => {\n const newEndValue = event.target.value;\n setEndDateStringValue(newEndValue);\n onChange?.(event, startDateStringValue, newEndValue);\n };\n const handleEndDateKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === \"Enter\") {\n updateEndDate(event, endDateStringValue);\n setOpen(false);\n }\n };\n\n const handleInputClick = (event: SyntheticEvent<HTMLDivElement>) => {\n if (event.target === wrapperRef.current) {\n startInputRef?.current?.focus();\n }\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 [withBaseName(\"bordered\")]: bordered,\n },\n className,\n )}\n onClick={(event) => handleInputClick(event)}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n ref={inputRef}\n {...rest}\n >\n <input\n autoComplete=\"off\"\n aria-describedby={clsx(formFieldDescribedBy, dateInputDescribedBy)}\n aria-labelledby={clsx(\n formFieldLabelledBy,\n dateInputLabelledBy,\n startDateInputID,\n )}\n aria-label={clsx(\"Start date\", ariaLabel)}\n id={startDateInputID}\n className={withBaseName(\"input\")}\n disabled={isDisabled}\n readOnly={isReadOnly}\n ref={startInputRef}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleStartDateBlur}\n onChange={handleStartDateChange}\n onKeyDown={handleStartDateKeyDown}\n onFocus={!isDisabled ? handleFocus : undefined}\n placeholder={placeholder}\n size={placeholder.length}\n value={\n isReadOnly && !startDateStringValue\n ? emptyReadOnlyMarker\n : startDateStringValue\n }\n {...restDateInputProps}\n required={isRequired}\n />\n {selectionVariant === \"range\" && (\n <>\n <span>-</span>\n <input\n autoComplete=\"off\"\n aria-describedby={clsx(formFieldDescribedBy, dateInputDescribedBy)}\n aria-labelledby={clsx(\n formFieldLabelledBy,\n dateInputLabelledBy,\n endDateInputID,\n )}\n aria-label={clsx(\"End date\", ariaLabel)}\n id={endDateInputID}\n className={withBaseName(\"input\")}\n disabled={isDisabled}\n readOnly={isReadOnly}\n ref={endInputRef}\n tabIndex={isDisabled ? -1 : 0}\n onBlur={handleEndDateBlur}\n onChange={handleEndDateChange}\n onKeyDown={handleEndDateKeyDown}\n onFocus={!isDisabled ? handleFocus : undefined}\n placeholder={placeholder}\n size={placeholder.length}\n value={\n isReadOnly && !endDateStringValue\n ? emptyReadOnlyMarker\n : endDateStringValue\n }\n required={isRequired}\n {...restDateInputProps}\n />\n </>\n )}\n {\n <div className={withBaseName(\"endAdornmentContainer\")}>\n {!isDisabled && !isReadOnly && validationStatus && (\n <StatusAdornment status={validationStatus} />\n )}\n {endAdornment}\n </div>\n }\n <div className={withBaseName(\"activationIndicator\")} />\n </div>\n );\n});\n"],"names":["DateInput","dateInputCss"],"mappings":"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"}