@wistia/ui 0.23.0-beta.3f5d16e2.7eba552 → 0.23.0-beta.dfc52bdb.2a20da9

package/dist/index.d.ts

@@ -618,7 +618,7 @@ declare const ActionButton: _$react.ForwardRefExoticComponent<(Omit<{
    * Changes the secondary icon for different use cases
    */
   variant?: "default" | "gated" | "menu-down" | "menu-up";
-} & Omit<ButtonAsButtonProps, "fullWidth" | "size" | "variant" | "leftIcon" | "rightIcon" | "unstyled" | "isLoading">, "ref"> | Omit<{
+} & Omit<ButtonAsButtonProps, "variant" | "size" | "fullWidth" | "leftIcon" | "rightIcon" | "isLoading" | "unstyled">, "ref"> | Omit<{
   /**
    * @override
    * The text to display for the ActionButton
@@ -647,7 +647,7 @@ declare const ActionButton: _$react.ForwardRefExoticComponent<(Omit<{
    * Changes the secondary icon for different use cases
    */
   variant?: "default" | "gated" | "menu-down" | "menu-up";
-} & Omit<ButtonAsLinkProps, "fullWidth" | "size" | "variant" | "leftIcon" | "rightIcon" | "unstyled" | "isLoading">, "ref">) & _$react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+} & Omit<ButtonAsLinkProps, "variant" | "size" | "fullWidth" | "leftIcon" | "rightIcon" | "isLoading" | "unstyled">, "ref">) & _$react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 //#endregion
 //#region src/components/Avatar/Avatar.d.ts
 type AvatarInstanceType = 'image' | 'initials';
@@ -1233,7 +1233,7 @@ declare const Center: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTM
 //#endregion
 //#region src/components/Checkbox/Checkbox.d.ts
 type CheckboxSizeType = 'lg' | 'md' | 'sm';
-declare const Checkbox: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.DetailedHTMLProps<_$react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "label" | "size" | "hideLabel"> & {
+declare const Checkbox: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.DetailedHTMLProps<_$react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "label" | "onChange" | "size" | "hideLabel"> & {
   /**
    * Indicates the state of the checkbox
    */
@@ -3322,7 +3322,7 @@ type InputClickToCopyProps = Omit<InputProps, 'autoSelect' | 'disabled' | 'right
 /**
  * Provides a readonly input that copies the text to the clipboard when clicked.
  */
-declare const InputClickToCopy: _$react.ForwardRefExoticComponent<Omit<InputProps, "type" | "value" | "disabled" | "autoSelect" | "rightIcon"> & {
+declare const InputClickToCopy: _$react.ForwardRefExoticComponent<Omit<InputProps, "type" | "disabled" | "value" | "autoSelect" | "rightIcon"> & {
   /**
    * When disabled, the copy action will not be triggered
    */
@@ -4373,7 +4373,7 @@ type RadioProps = Omit<ComponentPropsWithoutRef<'input'>, 'hideLabel' | 'label'
    */
   hideLabel?: boolean;
 };
-declare const Radio: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.DetailedHTMLProps<_$react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "label" | "size" | "value" | "hideLabel"> & {
+declare const Radio: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.DetailedHTMLProps<_$react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "label" | "onChange" | "size" | "value" | "hideLabel"> & {
   /**
    * Indicates the state of the radio
    */

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.23.0-beta.3f5d16e2.7eba552
+ * @license @wistia/ui v0.23.0-beta.dfc52bdb.2a20da9
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -10883,7 +10883,7 @@ const StyledMobileTrigger = styled.button`
   }
 `;
 const DatePickerInput = ({ placeholder = "Select a date...", fullWidth, name, id, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy }) => {
-	const { selectedDate, isOpen, inputText, disabled, isMobile, inputRef, popoverContentRef, setIsOpen, handleInputChange, handleCommit } = useDatePickerContext();
+	const { selectedDate, isOpen, inputText, disabled, isMobile, popoverId, inputRef, popoverContentRef, setIsOpen, handleInputChange, handleCommit } = useDatePickerContext();
 	const submittedValue = selectedDate !== null ? toISODate(selectedDate) : "";
 	const handleClick = () => {
 		if (!isOpen) setIsOpen(true);
@@ -10898,6 +10898,7 @@ const DatePickerInput = ({ placeholder = "Select a date...", fullWidth, name, id
 		const isEmpty = inputText.length === 0;
 		return /* @__PURE__ */ jsxs(PopoverAnchor, { children: [/* @__PURE__ */ jsxs(StyledMobileTrigger, {
 			ref: inputRef,
+			"aria-controls": isOpen ? popoverId : void 0,
 			"aria-describedby": ariaDescribedBy,
 			"aria-expanded": isOpen,
 			"aria-haspopup": "dialog",
@@ -10937,9 +10938,9 @@ const DatePickerInput = ({ placeholder = "Select a date...", fullWidth, name, id
 	};
 	return /* @__PURE__ */ jsxs(PopoverAnchor, { children: [/* @__PURE__ */ jsx(Input, {
 		ref: inputRef,
+		"aria-controls": popoverId,
 		"aria-describedby": ariaDescribedBy,
 		"aria-expanded": isOpen,
-		"aria-haspopup": "dialog",
 		...ariaInvalid !== void 0 ? { "aria-invalid": ariaInvalid } : {},
 		autoSelect: true,
 		disabled,
@@ -11223,7 +11224,7 @@ Calendar.displayName = "Calendar";
 //#endregion
 //#region src/components/DatePicker/DatePickerPopover.tsx
 const DatePickerPopover = () => {
-	const { selectedDate, previewDate, displayedMonth, align, side, minDate, maxDate, disabledDates, inputRef, popoverContentRef, handleDaySelect, setDisplayedMonth, setIsOpen } = useDatePickerContext();
+	const { selectedDate, previewDate, displayedMonth, align, side, minDate, maxDate, disabledDates, popoverId, inputRef, popoverContentRef, handleDaySelect, setDisplayedMonth, setIsOpen } = useDatePickerContext();
 	const disabledMatcher = buildDisabledMatcher(minDate, maxDate, disabledDates);
 	const handleOpenAutoFocus = (event) => {
 		event.preventDefault();
@@ -11244,6 +11245,7 @@ const DatePickerPopover = () => {
 	return /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverContent, {
 		ref: popoverContentRef,
 		align,
+		id: popoverId,
 		maxWidth: "none",
 		side,
 		onCloseAutoFocus: handleCloseAutoFocus,
@@ -11280,6 +11282,7 @@ const DatePicker = forwardRef(({ value, onChange, defaultValue, minDate, maxDate
 	const inputRef = useRef(null);
 	const popoverContentRef = useRef(null);
 	const skipNextCommitRef = useRef(false);
+	const popoverId = useId();
 	const { isSmAndDown } = useMq();
 	const commitDate = useCallback((date) => {
 		if (isControlled) onChange(date);
@@ -11353,6 +11356,7 @@ const DatePicker = forwardRef(({ value, onChange, defaultValue, minDate, maxDate
 		minDate,
 		maxDate,
 		disabledDates,
+		popoverId,
 		inputRef,
 		popoverContentRef,
 		setIsOpen,
@@ -11374,6 +11378,7 @@ const DatePicker = forwardRef(({ value, onChange, defaultValue, minDate, maxDate
 		minDate,
 		maxDate,
 		disabledDates,
+		popoverId,
 		handleInputChange,
 		handleCommit,
 		handleDaySelect