reshaped 3.5.4-canary.0 → 3.6.0-canary.1

package/dist/components/Toast/ToastContainer.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import { onNextFrame } from "../../utilities/animation.js";
 import { checkKeyboardMode, TrapFocus } from "../../utilities/a11y/index.js";
 import Toast from "./Toast.js";

package/dist/components/Toast/ToastRegion.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import { focusableSelector } from "../../utilities/a11y/index.js";
 import ToastContainer from "./ToastContainer.js";
 import ToastContext from "./Toast.context.js";

package/dist/components/Tooltip/Tooltip.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Theme from "../Theme/index.js";
 import Text from "../Text/index.js";
-import Flyout from "../_private/Flyout/index.js";
+import Flyout from "../Flyout/index.js";
 import s from "./Tooltip.module.css";
 const Tooltip = (props) => {
     const { text, children, position = "bottom", ...flyoutProps } = props;

package/dist/components/Tooltip/Tooltip.types.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { FlyoutProps, FlyoutTriggerProps } from "../_private/Flyout";
+import type { FlyoutProps, FlyoutTriggerProps } from "../Flyout";
 export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "contentGap" | "contentShift" | "originCoordinates"> & {
     children: (attributes: Parameters<FlyoutTriggerProps["children"]>[0] | {}) => React.ReactNode;
     text?: React.ReactNode;

package/dist/components/View/View.js

@@ -1,7 +1,7 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames, responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
+import { classNames, responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
 import Divider from "../Divider/index.js";
 import Hidden from "../Hidden/index.js";
 import s from "./View.module.css";

package/dist/components/_private/Aligner/Aligner.js

@@ -7,7 +7,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * It relies on using a data-rs-aligner-target attribute in other components and works based
  * on the --rs-p, --rs-p-v and --rs-p-h css variables
  */
-import { classNames } from "../../../utilities/helpers.js";
+import { classNames } from "../../../utilities/props.js";
 import s from "./Aligner.module.css";
 const Aligner = (props) => {
     const { side: passedSide = "all", children, className, attributes } = props;

package/dist/components/_private/Expandable/Expandable.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../../utilities/helpers.js";
+import { classNames } from "../../../utilities/props.js";
 import { onNextFrame } from "../../../utilities/animation.js";
 import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
 import s from "./Expandable.module.css";

package/dist/components/_private/HiddenInput/HiddenInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../../utilities/helpers.js";
+import { classNames } from "../../../utilities/props.js";
 import s from "./HiddenInput.module.css";
 const HiddenInput = (props) => {
     const { name, value, type, onChange, onFocus, onBlur, checked, defaultChecked, disabled, className, attributes, } = props;

package/dist/config/tailwind.d.ts

@@ -1,2 +1,2 @@
 import type { ThemeDefinition } from "../themes/_generator/tokens/types";
-export declare const getTheme: (theme?: ThemeDefinition) => Record<"borderRadius" | "backgroundColor" | "borderColor" | "boxShadow" | "spacing" | "textColor" | "colors" | "screens", Record<string, string>>;
+export declare const getTheme: (theme?: ThemeDefinition) => Record<"backgroundColor" | "borderColor" | "borderRadius" | "spacing" | "boxShadow" | "textColor" | "colors" | "screens", Record<string, string>>;

package/dist/hooks/_private/useFadeSide.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const useFadeSide: (scrollableRef: React.RefObject<HTMLElement | null>, options?: {
+    disabled?: boolean;
+}) => "start" | "end" | "both" | null;
+export default useFadeSide;

package/dist/hooks/_private/useFadeSide.js

@@ -0,0 +1,47 @@
+"use client";
+import React from "react";
+import useRTL from "../useRTL.js";
+import useIsomorphicLayoutEffect from "../useIsomorphicLayoutEffect.js";
+import { rafThrottle } from "../../utilities/helpers.js";
+const useFadeSide = (scrollableRef, options = {}) => {
+    const { disabled } = options;
+    const [rtl] = useRTL();
+    const [fadeSide, setFadeSide] = React.useState(null);
+    const updateFade = React.useCallback(() => {
+        const elScrollable = scrollableRef.current;
+        if (!elScrollable)
+            return;
+        const isScrollable = elScrollable.clientWidth < elScrollable.scrollWidth;
+        if (!isScrollable)
+            setFadeSide(null);
+        // scrollLeft in RTL starts from 1 instead of 0, so we compare values using this delta
+        const scrollLeft = elScrollable.scrollLeft * (rtl ? -1 : 1);
+        const cutOffStart = scrollLeft > 1;
+        const cutOffEnd = scrollLeft + elScrollable.clientWidth < elScrollable.scrollWidth - 1;
+        if (cutOffEnd && cutOffStart)
+            return setFadeSide("both");
+        if (cutOffStart)
+            return setFadeSide("start");
+        if (cutOffEnd)
+            return setFadeSide("end");
+    }, [rtl, scrollableRef]);
+    useIsomorphicLayoutEffect(() => {
+        const elScrollable = scrollableRef.current;
+        if (!elScrollable)
+            return;
+        if (disabled)
+            return;
+        const debouncedUpdate = rafThrottle(updateFade);
+        // Use RaF when scroll to have scrollWidth calculated correctly on the first effect
+        // For example: And edge case inside the complex flexbox layout
+        requestAnimationFrame(() => updateFade());
+        window.addEventListener("resize", debouncedUpdate);
+        elScrollable.addEventListener("scroll", debouncedUpdate);
+        return () => {
+            window.removeEventListener("resize", debouncedUpdate);
+            elScrollable.removeEventListener("scroll", debouncedUpdate);
+        };
+    }, [rtl, disabled]);
+    return fadeSide;
+};
+export default useFadeSide;

package/dist/hooks/useIsomorphicLayoutEffect.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
+declare const useIsomorphicLayoutEffect: typeof React.useEffect;
 export default useIsomorphicLayoutEffect;

package/dist/index.d.ts

@@ -1,10 +1,6 @@
 /**
  * Components
  */
-export { default as Accordion } from "./components/Accordion";
-export type { AccordionProps } from "./components/Accordion";
-export { default as Actionable } from "./components/Actionable";
-export type { ActionableProps, ActionableRef } from "./components/Actionable";
 export { default as ActionBar } from "./components/ActionBar";
 export type { ActionBarProps } from "./components/ActionBar";
 export { default as Alert } from "./components/Alert";
@@ -29,32 +25,16 @@ export { default as Checkbox } from "./components/Checkbox";
 export type { CheckboxProps } from "./components/Checkbox";
 export { default as CheckboxGroup } from "./components/CheckboxGroup";
 export type { CheckboxGroupProps } from "./components/CheckboxGroup";
-export { default as Container } from "./components/Container";
-export type { ContainerProps } from "./components/Container";
 export { default as ContextMenu } from "./components/ContextMenu";
 export type { ContextMenuProps } from "./components/ContextMenu";
-export { default as Dismissible } from "./components/Dismissible";
-export type { DismissibleProps } from "./components/Dismissible";
 export { default as Divider } from "./components/Divider";
 export type { DividerProps } from "./components/Divider";
 export { default as DropdownMenu } from "./components/DropdownMenu";
 export type { DropdownMenuProps, DropdownMenuInstance } from "./components/DropdownMenu";
 export { default as FileUpload } from "./components/FileUpload";
 export type { FileUploadProps } from "./components/FileUpload";
-export { default as FormControl } from "./components/FormControl";
-export type { FormControlProps } from "./components/FormControl";
-export { default as Grid } from "./components/Grid";
-export type { GridProps, GridItemProps } from "./components/Grid";
-export { default as Hidden } from "./components/Hidden";
-export type { HiddenProps } from "./components/Hidden";
-export { default as HiddenVisually } from "./components/HiddenVisually";
-export type { HiddenVisuallyProps } from "./components/HiddenVisually";
 export { default as Hotkey } from "./components/Hotkey";
 export type { HotkeyProps } from "./components/Hotkey";
-export { default as Icon } from "./components/Icon";
-export type { IconProps } from "./components/Icon";
-export { default as Image } from "./components/Image";
-export type { ImageProps } from "./components/Image";
 export { default as Link } from "./components/Link";
 export type { LinkProps } from "./components/Link";
 export { default as Loader } from "./components/Loader";
@@ -65,8 +45,6 @@ export { default as Modal } from "./components/Modal";
 export type { ModalProps } from "./components/Modal";
 export { default as NumberField } from "./components/NumberField";
 export type { NumberFieldProps } from "./components/NumberField";
-export { default as Overlay } from "./components/Overlay";
-export type { OverlayProps } from "./components/Overlay";
 export { default as Pagination } from "./components/Pagination";
 export type { PaginationProps } from "./components/Pagination";
 export { default as PinField } from "./components/PinField";
@@ -81,14 +59,8 @@ export { default as Radio } from "./components/Radio";
 export type { RadioProps } from "./components/Radio";
 export { default as RadioGroup } from "./components/RadioGroup";
 export type { RadioGroupProps } from "./components/RadioGroup";
-export { default as Reshaped } from "./components/Reshaped";
-export type { ReshapedProps } from "./components/Reshaped";
-export { default as Resizable } from "./components/Resizable";
-export type { ResizableProps, ResizableItemProps, ResizableHandleProps, } from "./components/Resizable";
 export { default as Scrim } from "./components/Scrim";
 export type { ScrimProps } from "./components/Scrim";
-export { default as ScrollArea } from "./components/ScrollArea";
-export type { ScrollAreaProps } from "./components/ScrollArea";
 export { default as Select } from "./components/Select";
 export type { SelectProps } from "./components/Select";
 export { default as Skeleton } from "./components/Skeleton";
@@ -103,8 +75,6 @@ export { default as Table } from "./components/Table";
 export type { TableProps, TableBodyProps, TableHeadProps, TableHeadingProps, TableCellProps, TableRowProps, } from "./components/Table";
 export { default as Tabs } from "./components/Tabs";
 export type { TabsProps } from "./components/Tabs";
-export { default as Text } from "./components/Text";
-export type { TextProps } from "./components/Text";
 export { default as TextArea } from "./components/TextArea";
 export type { TextAreaProps } from "./components/TextArea";
 export { default as TextField } from "./components/TextField";
@@ -115,6 +85,41 @@ export { useToast, ToastProvider } from "./components/Toast";
 export type { ToastProps, ToastProviderProps, ToastShowProps } from "./components/Toast";
 export { default as Tooltip } from "./components/Tooltip";
 export type { TooltipProps } from "./components/Tooltip";
+/**
+ * Utility components
+ */
+export { default as Reshaped } from "./components/Reshaped";
+export type { ReshapedProps } from "./components/Reshaped";
+export { default as Accordion } from "./components/Accordion";
+export type { AccordionProps } from "./components/Accordion";
+export { default as Actionable } from "./components/Actionable";
+export type { ActionableProps, ActionableRef } from "./components/Actionable";
+export { default as Container } from "./components/Container";
+export type { ContainerProps } from "./components/Container";
+export { default as Dismissible } from "./components/Dismissible";
+export type { DismissibleProps } from "./components/Dismissible";
+export { default as Flyout } from "./components/Flyout";
+export type { FlyoutProps, FlyoutInstance } from "./components/Flyout";
+export { default as FormControl } from "./components/FormControl";
+export type { FormControlProps } from "./components/FormControl";
+export { default as Grid } from "./components/Grid";
+export type { GridProps, GridItemProps } from "./components/Grid";
+export { default as Hidden } from "./components/Hidden";
+export type { HiddenProps } from "./components/Hidden";
+export { default as HiddenVisually } from "./components/HiddenVisually";
+export type { HiddenVisuallyProps } from "./components/HiddenVisually";
+export { default as Icon } from "./components/Icon";
+export type { IconProps } from "./components/Icon";
+export { default as Image } from "./components/Image";
+export type { ImageProps } from "./components/Image";
+export { default as Overlay } from "./components/Overlay";
+export type { OverlayProps } from "./components/Overlay";
+export { default as Resizable } from "./components/Resizable";
+export type { ResizableProps, ResizableItemProps, ResizableHandleProps, } from "./components/Resizable";
+export { default as ScrollArea } from "./components/ScrollArea";
+export type { ScrollAreaProps } from "./components/ScrollArea";
+export { default as Text } from "./components/Text";
+export type { TextProps } from "./components/Text";
 export { default as View } from "./components/View";
 export type { ViewProps, ViewItemProps } from "./components/View";
 /**
@@ -132,9 +137,9 @@ export { default as useRTL } from "./hooks/useRTL";
 export { default as useScrollLock } from "./hooks/useScrollLock";
 export { default as useToggle } from "./hooks/useToggle";
 /**
- * Utilities
+ * Utility functions
  */
-export { classNames, responsiveClassNames, responsivePropDependency } from "./utilities/helpers";
+export { classNames, responsivePropDependency } from "./utilities/props";
 export { TrapFocus } from "./utilities/a11y";
 /**
  * Types

package/dist/index.js

@@ -1,8 +1,6 @@
 /**
  * Components
  */
-export { default as Accordion } from "./components/Accordion/index.js";
-export { default as Actionable } from "./components/Actionable/index.js";
 export { default as ActionBar } from "./components/ActionBar/index.js";
 export { default as Alert } from "./components/Alert/index.js";
 export { default as Autocomplete } from "./components/Autocomplete/index.js";
@@ -15,25 +13,16 @@ export { default as Card } from "./components/Card/index.js";
 export { default as Carousel } from "./components/Carousel/index.js";
 export { default as Checkbox } from "./components/Checkbox/index.js";
 export { default as CheckboxGroup } from "./components/CheckboxGroup/index.js";
-export { default as Container } from "./components/Container/index.js";
 export { default as ContextMenu } from "./components/ContextMenu/index.js";
-export { default as Dismissible } from "./components/Dismissible/index.js";
 export { default as Divider } from "./components/Divider/index.js";
 export { default as DropdownMenu } from "./components/DropdownMenu/index.js";
 export { default as FileUpload } from "./components/FileUpload/index.js";
-export { default as FormControl } from "./components/FormControl/index.js";
-export { default as Grid } from "./components/Grid/index.js";
-export { default as Hidden } from "./components/Hidden/index.js";
-export { default as HiddenVisually } from "./components/HiddenVisually/index.js";
 export { default as Hotkey } from "./components/Hotkey/index.js";
-export { default as Icon } from "./components/Icon/index.js";
-export { default as Image } from "./components/Image/index.js";
 export { default as Link } from "./components/Link/index.js";
 export { default as Loader } from "./components/Loader/index.js";
 export { default as MenuItem } from "./components/MenuItem/index.js";
 export { default as Modal } from "./components/Modal/index.js";
 export { default as NumberField } from "./components/NumberField/index.js";
-export { default as Overlay } from "./components/Overlay/index.js";
 export { default as Pagination } from "./components/Pagination/index.js";
 export { default as PinField } from "./components/PinField/index.js";
 export { default as Popover } from "./components/Popover/index.js";
@@ -41,10 +30,7 @@ export { default as Progress } from "./components/Progress/index.js";
 export { default as ProgressIndicator } from "./components/ProgressIndicator/index.js";
 export { default as Radio } from "./components/Radio/index.js";
 export { default as RadioGroup } from "./components/RadioGroup/index.js";
-export { default as Reshaped } from "./components/Reshaped/index.js";
-export { default as Resizable } from "./components/Resizable/index.js";
 export { default as Scrim } from "./components/Scrim/index.js";
-export { default as ScrollArea } from "./components/ScrollArea/index.js";
 export { default as Select } from "./components/Select/index.js";
 export { default as Skeleton } from "./components/Skeleton/index.js";
 export { default as Slider } from "./components/Slider/index.js";
@@ -52,12 +38,30 @@ export { default as Stepper } from "./components/Stepper/index.js";
 export { default as Switch } from "./components/Switch/index.js";
 export { default as Table } from "./components/Table/index.js";
 export { default as Tabs } from "./components/Tabs/index.js";
-export { default as Text } from "./components/Text/index.js";
 export { default as TextArea } from "./components/TextArea/index.js";
 export { default as TextField } from "./components/TextField/index.js";
 export { default as Timeline } from "./components/Timeline/index.js";
 export { useToast, ToastProvider } from "./components/Toast/index.js";
 export { default as Tooltip } from "./components/Tooltip/index.js";
+/**
+ * Utility components
+ */
+export { default as Reshaped } from "./components/Reshaped/index.js";
+export { default as Accordion } from "./components/Accordion/index.js";
+export { default as Actionable } from "./components/Actionable/index.js";
+export { default as Container } from "./components/Container/index.js";
+export { default as Dismissible } from "./components/Dismissible/index.js";
+export { default as Flyout } from "./components/Flyout/index.js";
+export { default as FormControl } from "./components/FormControl/index.js";
+export { default as Grid } from "./components/Grid/index.js";
+export { default as Hidden } from "./components/Hidden/index.js";
+export { default as HiddenVisually } from "./components/HiddenVisually/index.js";
+export { default as Icon } from "./components/Icon/index.js";
+export { default as Image } from "./components/Image/index.js";
+export { default as Overlay } from "./components/Overlay/index.js";
+export { default as Resizable } from "./components/Resizable/index.js";
+export { default as ScrollArea } from "./components/ScrollArea/index.js";
+export { default as Text } from "./components/Text/index.js";
 export { default as View } from "./components/View/index.js";
 /**
  * Hooks
@@ -74,9 +78,9 @@ export { default as useRTL } from "./hooks/useRTL.js";
 export { default as useScrollLock } from "./hooks/useScrollLock.js";
 export { default as useToggle } from "./hooks/useToggle.js";
 /**
- * Utilities
+ * Utility functions
  */
-export { classNames, responsiveClassNames, responsivePropDependency } from "./utilities/helpers.js";
+export { classNames, responsivePropDependency } from "./utilities/props.js";
 export { TrapFocus } from "./utilities/a11y/index.js";
 /**
  * Dev utilities

package/dist/styles/align/index.js

@@ -1,4 +1,4 @@
-import { responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveVariables } from "../../utilities/props.js";
 import "./align.css";
 const getAlignStyles = (value) => {
     if (!value)

package/dist/styles/aspectRatio/index.js

@@ -1,4 +1,4 @@
-import { responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveVariables } from "../../utilities/props.js";
 import "./aspectRatio.css";
 const getAspectRatioStyles = (value) => {
     if (!value)

package/dist/styles/bleed/index.js

@@ -1,4 +1,4 @@
-import { responsiveClassNames, responsiveVariables, responsivePropDependency, } from "../../utilities/helpers.js";
+import { responsiveClassNames, responsiveVariables, responsivePropDependency, } from "../../utilities/props.js";
 import s from "./bleed.module.css";
 const getBleedStyles = (value) => {
     if (value === undefined)

package/dist/styles/border/index.js

@@ -1,4 +1,4 @@
-import { responsiveClassNames } from "../../utilities/helpers.js";
+import { responsiveClassNames } from "../../utilities/props.js";
 import s from "./border.module.css";
 const getBorderStyles = (value) => {
     if (!value)

package/dist/styles/height/index.js

@@ -1,4 +1,4 @@
-import { responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
 import s from "./height.module.css";
 const getHeightStyles = (value) => {
     if (!value)

package/dist/styles/inset/index.js

@@ -1,4 +1,4 @@
-import { responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveVariables } from "../../utilities/props.js";
 import "./inset.css";
 const getInsetStyles = (value, side) => {
     if (value === undefined)

package/dist/styles/justify/index.js

@@ -1,4 +1,4 @@
-import { responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveVariables } from "../../utilities/props.js";
 import "./justify.css";
 const getJustifyStyles = (value) => {
     if (!value)

package/dist/styles/maxHeight/index.js

@@ -1,4 +1,4 @@
-import { responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
 import s from "./maxHeight.module.css";
 const getMaxHeightStyles = (value) => {
     if (!value)

package/dist/styles/maxWidth/index.js

@@ -1,4 +1,4 @@
-import { responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
 import s from "./maxWidth.module.css";
 const getMaxWidthStyles = (value) => {
     if (!value)

package/dist/styles/minHeight/index.js

@@ -1,4 +1,4 @@
-import { responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
 import s from "./minHeight.module.css";
 const getMinHeightStyles = (value) => {
     if (!value)

package/dist/styles/minWidth/index.js

@@ -1,4 +1,4 @@
-import { responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
 import s from "./minWidth.module.css";
 const getMinWidthStyles = (value) => {
     if (!value)

package/dist/styles/padding/index.js

@@ -1,4 +1,4 @@
-import { responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveVariables } from "../../utilities/props.js";
 import "./padding.css";
 const getPaddingStyles = (value) => {
     if (!value)

package/dist/styles/position/index.js

@@ -1,4 +1,4 @@
-import { responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveVariables } from "../../utilities/props.js";
 import "./position.css";
 const getPositionStyles = (value) => {
     if (!value)

package/dist/styles/radius/index.js

@@ -1,4 +1,4 @@
-import { responsiveClassNames } from "../../utilities/helpers.js";
+import { responsiveClassNames } from "../../utilities/props.js";
 import s from "./radius.module.css";
 const getRadiusStyles = (value) => {
     if (!value)

package/dist/styles/textAlign/index.js

@@ -1,4 +1,4 @@
-import { responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveVariables } from "../../utilities/props.js";
 import "./textAlign.css";
 const getTextAlignStyles = (value) => {
     if (!value)

package/dist/styles/width/index.js

@@ -1,4 +1,4 @@
-import { responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
+import { responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
 import s from "./width.module.css";
 const getWidthStyles = (value) => {
     if (!value)

package/dist/utilities/dom/event.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Workaround for changing a hidden input value with triggerring
+ * React input onChange and form onChange handlers
+ *
+ * Based on https://stackoverflow.com/a/60378508
+ */
+export declare const triggerChangeEvent: (el: HTMLInputElement, value: string) => void;

package/dist/utilities/dom/event.js

@@ -0,0 +1,11 @@
+/**
+ * Workaround for changing a hidden input value with triggerring
+ * React input onChange and form onChange handlers
+ *
+ * Based on https://stackoverflow.com/a/60378508
+ */
+export const triggerChangeEvent = (el, value) => {
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
+    nativeInputValueSetter.call(el, value);
+    el.dispatchEvent(new Event("change", { bubbles: true }));
+};

package/dist/utilities/dom/find.d.ts

@@ -1,13 +1,10 @@
 export declare const findParent: (element: HTMLElement, condition: (el: HTMLElement) => boolean) => HTMLElement | null;
-/**
- * Containers used for scoping the rendering,
- * mostly used in flyouts since the have to accommodate for positioning and overflow
- */
-export declare const findClosestRenderContainer: (args: {
+export declare const findClosestPositionContainer: (args: {
+    el: HTMLElement | null;
+    iteration?: number;
+}) => HTMLElement;
+export declare const findClosestScrollableContainer: (args: {
     el: HTMLElement | null;
     iteration?: number;
     overflowOnly?: boolean;
-}) => {
-    el: HTMLElement;
-    scrollable?: boolean;
-};
+}) => HTMLElement;

package/dist/utilities/dom/find.js

@@ -8,28 +8,30 @@ export const findParent = (element, condition) => {
     }
     return null;
 };
-/**
- * Containers used for scoping the rendering,
- * mostly used in flyouts since the have to accommodate for positioning and overflow
- */
-export const findClosestRenderContainer = (args) => {
-    const { el, iteration = 0, overflowOnly } = args;
+export const findClosestPositionContainer = (args) => {
+    const { el, iteration = 0 } = args;
     const style = el && window.getComputedStyle(el);
-    const overflowY = style?.overflowY;
     const position = style?.position;
-    const isScrollable = overflowY?.includes("scroll") || overflowY?.includes("auto");
     const isFixed = position === "fixed" || position === "sticky";
-    // Only check shadow root on the first run
     if (iteration === 0) {
         const shadowRoot = getShadowRoot(el);
         if (shadowRoot?.firstElementChild)
-            return { el: shadowRoot.firstElementChild };
+            return shadowRoot.firstElementChild;
     }
     if (el === document.body || !el)
-        return { el: document.body };
+        return document.body;
+    if (isFixed)
+        return el;
+    return findClosestPositionContainer({ el: el.parentElement, iteration: iteration + 1 });
+};
+export const findClosestScrollableContainer = (args) => {
+    const { el, iteration = 0 } = args;
+    const style = el && window.getComputedStyle(el);
+    const overflowY = style?.overflowY;
+    const isScrollable = overflowY?.includes("scroll") || overflowY?.includes("auto");
+    if (el === document.body || !el)
+        return document.body;
     if (isScrollable && el.scrollHeight > el.clientHeight)
-        return { el, scrollable: true };
-    if (isFixed && !overflowOnly)
-        return { el };
-    return findClosestRenderContainer({ el: el.parentElement, iteration: iteration + 1 });
+        return el;
+    return findClosestScrollableContainer({ el: el.parentElement, iteration: iteration + 1 });
 };

package/dist/utilities/dom/index.d.ts

@@ -1,4 +1,5 @@
 export { getRectFromCoordinates } from "./flyout";
 export { getShadowRoot } from "./shadowDom";
 export { enableUserSelect, disableUserSelect } from "./userSelect";
-export { findParent, findClosestRenderContainer } from "./find";
+export { findParent, findClosestScrollableContainer, findClosestPositionContainer } from "./find";
+export { triggerChangeEvent } from "./event";

package/dist/utilities/dom/index.js

@@ -1,4 +1,5 @@
 export { getRectFromCoordinates } from "./flyout.js";
 export { getShadowRoot } from "./shadowDom.js";
 export { enableUserSelect, disableUserSelect } from "./userSelect.js";
-export { findParent, findClosestRenderContainer } from "./find.js";
+export { findParent, findClosestScrollableContainer, findClosestPositionContainer } from "./find.js";
+export { triggerChangeEvent } from "./event.js";

package/dist/utilities/helpers.d.ts

@@ -1,17 +1,3 @@
-import type * as G from "../types/global";
 export declare const sleep: (milliseconds: number) => Promise<unknown>;
 export declare const range: (start: number, end: number) => number[];
-export declare const debounce: <T extends Function>(cb: T, wait?: number) => T;
-export declare function debounceHandler<T extends React.SyntheticEvent | Event>(handler: (event: T) => void, timeout: number): (event: T) => void;
-export declare const throttle: <T extends Function>(cb: T, wait: number) => (...args: unknown[]) => void;
-export declare function throttleHandler<T extends React.SyntheticEvent | Event>(handler: (event: T) => void, timeout: number): (event: T) => void;
-type Value = string | boolean | number | undefined;
-type ClassNameResolver = string | ((value: Value) => string);
-export declare const classNames: (...args: G.ClassName[]) => string;
-export declare const responsiveClassNames: <V extends G.Responsive<Value>>(s: Record<string, string>, className: ClassNameResolver, value: V, options?: {
-    excludeValueFromClassName?: boolean;
-}) => string[];
-export declare const responsiveVariables: <V extends Value = Value>(variableName: G.CSSVariable, value?: G.Responsive<V>) => Record<G.CSSVariable, V>;
-export declare const responsivePropDependency: <Result, T>(prop: G.Responsive<T>, resolver: (value: T, key: G.Viewport) => Result) => Result;
-export declare const resolveViewportValue: <T>(viewport: G.Viewport, value: G.Responsive<T>) => T | undefined;
-export {};
+export declare const rafThrottle: <T extends (...args: any[]) => void>(fn: T) => T;