@wistia/ui 0.6.25 → 0.6.26

package/dist/index.d.mts

@@ -97,6 +97,9 @@ type UseKeyOptions = {
 };
 declare const useKey: (key: KeyFilter, eventHandler: EventHandler, { eventName, eventTarget, eventOptions }?: UseKeyOptions) => void;
 
+type SetItemType = Storage['setItem'];
+declare const useLocalStorage: <T, _>(key: Parameters<SetItemType>[0], initialValue: T, storage?: Storage) => [T | undefined, (newValue: T) => void, () => void];
+
 type MediaQueryBooleans = {
     isXlAndUp: boolean;
     isLgAndUp: boolean;
@@ -2925,4 +2928,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useLocalStorage, useMq, useToast, useWindowSize };

package/dist/index.d.ts

@@ -97,6 +97,9 @@ type UseKeyOptions = {
 };
 declare const useKey: (key: KeyFilter, eventHandler: EventHandler, { eventName, eventTarget, eventOptions }?: UseKeyOptions) => void;
 
+type SetItemType = Storage['setItem'];
+declare const useLocalStorage: <T, _>(key: Parameters<SetItemType>[0], initialValue: T, storage?: Storage) => [T | undefined, (newValue: T) => void, () => void];
+
 type MediaQueryBooleans = {
     isXlAndUp: boolean;
     isLgAndUp: boolean;
@@ -2925,4 +2928,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useLocalStorage, useMq, useToast, useWindowSize };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.25
+ * @license @wistia/ui v0.6.26
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -2033,11 +2033,39 @@ var useKey = (key, eventHandler, { eventName = "keydown", eventTarget, eventOpti
   useEvent(eventName, memoizedEventHandler, eventTarget, eventOptions);
 };
 
+// src/hooks/useLocalStorage/useLocalStorage.ts
+import { useState as useState3 } from "react";
+var useLocalStorage = (key, initialValue, storage = window.localStorage) => {
+  const [storedValue, setStoredValue] = useState3(() => {
+    try {
+      const item = storage.getItem(key);
+      return item !== null && !!item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.log(error);
+      return initialValue;
+    }
+  });
+  const setValue = (value) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      storage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  const removeValue = () => {
+    storage.removeItem(key);
+    setStoredValue(void 0);
+  };
+  return [storedValue, setValue, removeValue];
+};
+
 // src/hooks/useMq/useMq.ts
 import { isBoolean } from "@wistia/type-guards";
 
 // src/hooks/useWindowSize/useWindowSize.ts
-import { useState as useState3, useLayoutEffect } from "react";
+import { useState as useState4, useLayoutEffect } from "react";
 import { debounce } from "throttle-debounce";
 
 // src/private/helpers/isClient/isClient.ts
@@ -2045,7 +2073,7 @@ var isClient = () => typeof window !== "undefined" && typeof document !== "undef
 
 // src/hooks/useWindowSize/useWindowSize.ts
 var useWindowSize = (interval = 0) => {
-  const [dimensions, setDimensions] = useState3({
+  const [dimensions, setDimensions] = useState4({
     width: isClient() ? window.innerWidth : 0,
     height: isClient() ? window.innerHeight : 0
   });
@@ -6827,7 +6855,7 @@ var ActionButton = forwardRef3(
 ActionButton.displayName = "ActionButton";
 
 // src/components/Avatar/Avatar.tsx
-import { useState as useState4, useMemo as useMemo3, useEffect as useEffect3 } from "react";
+import { useState as useState5, useMemo as useMemo3, useEffect as useEffect3 } from "react";
 import { isNil as isNil8 } from "@wistia/type-guards";
 import styled8 from "styled-components";
 
@@ -6959,7 +6987,7 @@ var Avatar = ({
   onImageLoad,
   ...otherProps
 }) => {
-  const [imageLoadState, setImageLoadState] = useState4("loading");
+  const [imageLoadState, setImageLoadState] = useState5("loading");
   useEffect3(() => {
     setImageLoadState("loading");
   }, [imageUrl]);
@@ -8317,7 +8345,7 @@ Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
 import styled29, { css as css26 } from "styled-components";
-import { useState as useState5, useRef as useRef4 } from "react";
+import { useState as useState6, useRef as useRef4 } from "react";
 
 // src/components/Tooltip/Tooltip.tsx
 import {
@@ -8643,10 +8671,10 @@ var EditableHeading = ({
   forceEditing = false,
   editingDisabled = false
 }) => {
-  const [isEditing, setIsEditing] = useState5(false);
-  const [value, setValue] = useState5(children);
-  const [previousValue, setPreviousValue] = useState5(children);
-  const [headingHeight, setHeadingHeight] = useState5("60");
+  const [isEditing, setIsEditing] = useState6(false);
+  const [value, setValue] = useState6(children);
+  const [previousValue, setPreviousValue] = useState6(children);
+  const [headingHeight, setHeadingHeight] = useState6("60");
   const headingRef = useRef4(null);
   const handleSetEditing = (editing) => {
     if (editingDisabled) return;
@@ -8733,7 +8761,7 @@ var EditableHeading = ({
 };
 
 // src/components/Form/Form.tsx
-import { forwardRef as forwardRef11, useRef as useRef5, useMemo as useMemo4, createContext as createContext2, useState as useState6, useId as useId2 } from "react";
+import { forwardRef as forwardRef11, useRef as useRef5, useMemo as useMemo4, createContext as createContext2, useState as useState7, useId as useId2 } from "react";
 import styled31 from "styled-components";
 import { isNotUndefined as isNotUndefined6, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
@@ -8793,8 +8821,8 @@ var FormComponent = ({
   fullWidth = false,
   ...props
 }, forwardedRef) => {
-  const [errors, setErrors] = useState6({});
-  const [hasSubmitted, setHasSubmitted] = useState6(false);
+  const [errors, setErrors] = useState7({});
+  const [hasSubmitted, setHasSubmitted] = useState7(false);
   const innerRef = useRef5();
   const ref = forwardedRef ?? innerRef;
   const autoId = useId2();
@@ -8871,11 +8899,11 @@ FormComponent.displayName = "Form";
 var Form = forwardRef11(FormComponent);
 
 // src/components/Form/useFormState.tsx
-import { useCallback as useCallback6, useState as useState7 } from "react";
+import { useCallback as useCallback6, useState as useState8 } from "react";
 var useFormState = (action, initialData = {}) => {
-  const [data, setData] = useState7(initialData);
-  const [isPending, setIsPending] = useState7(false);
-  const [error, setError] = useState7(null);
+  const [data, setData] = useState8(initialData);
+  const [isPending, setIsPending] = useState8(false);
+  const [error, setError] = useState8(null);
   const formAction = useCallback6(
     async (nextFormData) => {
       if (nextFormData === null) {
@@ -9495,7 +9523,7 @@ var MenuLabel = ({ children, ...props }) => {
 MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import styled41 from "styled-components";
 import {
   DropdownMenuPortal as DropdownMenuPortal2,
@@ -9681,7 +9709,7 @@ var SubMenu = ({
   ...props
 }) => {
   const { isSmAndUp } = useMq();
-  const [isExpanded, setIsExpanded] = useState8(false);
+  const [isExpanded, setIsExpanded] = useState9(false);
   const { compact } = useMenuContext();
   return isSmAndUp ? /* @__PURE__ */ jsxs25(DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ jsxs25(SubMenuTrigger, { ...props, children: [
@@ -10450,7 +10478,7 @@ import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
 import { isNil as isNil14 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSelectedItemMeasurements.tsx
-import { createContext as createContext6, useContext as useContext5, useMemo as useMemo8, useState as useState9 } from "react";
+import { createContext as createContext6, useContext as useContext5, useMemo as useMemo8, useState as useState10 } from "react";
 import { jsx as jsx242 } from "react/jsx-runtime";
 var SelectedItemMeasurementsContext = createContext6(
   null
@@ -10458,7 +10486,7 @@ var SelectedItemMeasurementsContext = createContext6(
 var SelectedItemMeasurementsProvider = ({
   children
 }) => {
-  const [selectedItemMeasurements, setSelectedItemMeasurements] = useState9(null);
+  const [selectedItemMeasurements, setSelectedItemMeasurements] = useState10(null);
   const contextValue = useMemo8(
     () => ({
       setSelectedItemMeasurements,
@@ -11193,7 +11221,7 @@ var TableRow = ({ children, ...props }) => {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { forwardRef as forwardRef25, useState as useState10 } from "react";
+import { forwardRef as forwardRef25, useState as useState11 } from "react";
 import { Root as TabsRoot } from "@radix-ui/react-tabs";
 import { isNotNil as isNotNil24, isNil as isNil15 } from "@wistia/type-guards";
 import styled67 from "styled-components";
@@ -11410,7 +11438,7 @@ var Tabs = forwardRef25(
     ...otherProps
   }, ref) => {
     const tabItems = extractTabItems(children);
-    const [internalSelectedValue, setInternalSelectedValue] = useState10(defaultSelectedValue);
+    const [internalSelectedValue, setInternalSelectedValue] = useState11(defaultSelectedValue);
     const modeProps = defaultSelectedValue !== void 0 ? {
       defaultValue: defaultSelectedValue,
       onValueChange: setInternalSelectedValue
@@ -11878,6 +11906,7 @@ export {
   useFormState,
   useImperativeFilePicker,
   useKey,
+  useLocalStorage,
   useMq,
   useToast,
   useWindowSize