@vuu-ui/vuu-ui-controls 2.1.19-beta.1 → 2.1.19-beta.2

package/src/calendar/useSelection.js

@@ -0,0 +1,202 @@
+import { CalendarDate, isSameDay } from "@internationalized/date";
+import { makePrefixer, useControlled } from "@salt-ds/core";
+import { clsx } from "clsx";
+import { isPlainObject } from "../utils/index.js";
+import { useCalendarContext } from "./internal/CalendarContext.js";
+function addOrRemoveFromArray(array, item) {
+    if (Array.isArray(array)) {
+        if (array.find((element)=>isSameDay(element, item))) return array.filter((element)=>!isSameDay(element, item));
+        return array.concat(item);
+    }
+    return [
+        item
+    ];
+}
+const defaultOffset = (date)=>date;
+function isRangeOrOffsetSelectionValue(selectionValue) {
+    return null != selectionValue && isPlainObject(selectionValue);
+}
+function isRangeOrOffsetSelectionWithStartDate(selectionValue) {
+    return isRangeOrOffsetSelectionValue(selectionValue) && Object.prototype.hasOwnProperty.call(selectionValue, "startDate");
+}
+const withBaseName = makePrefixer("saltCalendarDay");
+function useSelectionCalendar(props) {
+    const { hoveredDate: hoveredDateProp, selectedDate: selectedDateProp, defaultSelectedDate, onHoveredDateChange, isDaySelectable, selectionVariant } = props;
+    const [selectedDate, setSelectedDateState] = useControlled({
+        controlled: selectedDateProp,
+        default: defaultSelectedDate,
+        name: "Calendar",
+        state: "selectedDate"
+    });
+    const getStartDateOffset = (date)=>{
+        if ("offset" === props.selectionVariant && props.startDateOffset) return props.startDateOffset(date);
+        return defaultOffset(date);
+    };
+    const getEndDateOffset = (date)=>{
+        if ("offset" === props.selectionVariant && props.endDateOffset) return props.endDateOffset(date);
+        return defaultOffset(date);
+    };
+    const setSelectedDate = (event, newSelectedDate)=>{
+        if (isDaySelectable(newSelectedDate)) switch(props.selectionVariant){
+            case "default":
+                setSelectedDateState(newSelectedDate);
+                props.onSelectedDateChange?.(event, newSelectedDate);
+                break;
+            case "multiselect":
+                {
+                    const newDates = addOrRemoveFromArray(selectedDate ?? [], newSelectedDate);
+                    setSelectedDateState(newDates);
+                    props.onSelectedDateChange?.(event, newDates);
+                    break;
+                }
+            case "range":
+                {
+                    let base = selectedDate;
+                    base = isRangeOrOffsetSelectionValue(base) ? base?.startDate && base?.endDate ? {
+                        startDate: newSelectedDate
+                    } : base?.startDate && newSelectedDate.compare(base.startDate) > 0 ? {
+                        ...base,
+                        endDate: newSelectedDate
+                    } : {
+                        startDate: newSelectedDate
+                    } : {
+                        startDate: newSelectedDate
+                    };
+                    setSelectedDateState(base);
+                    props.onSelectedDateChange?.(event, base);
+                    break;
+                }
+            case "offset":
+                {
+                    const newRange = {
+                        startDate: getStartDateOffset(newSelectedDate),
+                        endDate: getEndDateOffset(newSelectedDate)
+                    };
+                    setSelectedDateState(newRange);
+                    props.onSelectedDateChange?.(event, newRange);
+                }
+        }
+    };
+    const isSelected = (date)=>{
+        switch(selectionVariant){
+            case "default":
+                return selectedDate instanceof CalendarDate && isSameDay(selectedDate, date);
+            case "multiselect":
+                return Array.isArray(selectedDate) && !!selectedDate.find((element)=>isSameDay(element, date));
+            default:
+                return false;
+        }
+    };
+    const [hoveredDate, setHoveredDateState] = useControlled({
+        controlled: hoveredDateProp,
+        default: void 0,
+        name: "Calendar",
+        state: "hoveredDate"
+    });
+    const setHoveredDate = (event, date)=>{
+        setHoveredDateState(date);
+        onHoveredDateChange?.(event, date);
+    };
+    const isHovered = (date)=>!!hoveredDate && isSameDay(date, hoveredDate);
+    const isSelectedSpan = (date)=>{
+        if (("range" === selectionVariant || "offset" === selectionVariant) && isRangeOrOffsetSelectionValue(selectedDate) && selectedDate?.startDate && selectedDate?.endDate) return date.compare(selectedDate.startDate) > 0 && date.compare(selectedDate.endDate) < 0;
+        return false;
+    };
+    const isHoveredSpan = (date)=>{
+        if (("range" === selectionVariant || "offset" === selectionVariant) && isRangeOrOffsetSelectionValue(selectedDate) && selectedDate.startDate && !selectedDate.endDate && hoveredDate) {
+            const isForwardRange = hoveredDate.compare(selectedDate.startDate) > 0 && (date.compare(selectedDate.startDate) > 0 && date.compare(hoveredDate) < 0 || isSameDay(date, hoveredDate));
+            const isValidDayHovered = isDaySelectable(hoveredDate);
+            return isForwardRange && isValidDayHovered;
+        }
+        return false;
+    };
+    const isSelectedStart = (date)=>{
+        if (("range" === selectionVariant || "offset" === selectionVariant) && isRangeOrOffsetSelectionValue(selectedDate) && selectedDate.startDate) return isSameDay(selectedDate.startDate, date);
+        return false;
+    };
+    const isSelectedEnd = (date)=>{
+        if (("range" === selectionVariant || "offset" === selectionVariant) && isRangeOrOffsetSelectionValue(selectedDate) && selectedDate.endDate) return isSameDay(selectedDate.endDate, date);
+        return false;
+    };
+    const isHoveredOffset = (date)=>{
+        if (hoveredDate && "offset" === selectionVariant) {
+            const startDate = getStartDateOffset(hoveredDate);
+            const endDate = getEndDateOffset(hoveredDate);
+            return date.compare(startDate) >= 0 && date.compare(endDate) <= 0 && isDaySelectable(date);
+        }
+        return false;
+    };
+    return {
+        state: {
+            selectedDate,
+            hoveredDate
+        },
+        helpers: {
+            setSelectedDate,
+            isSelected,
+            setHoveredDate,
+            isHovered,
+            isSelectedSpan,
+            isHoveredSpan,
+            isSelectedStart,
+            isSelectedEnd,
+            isHoveredOffset
+        }
+    };
+}
+function useSelectionDay({ date }) {
+    const { helpers: { setSelectedDate, isSelected, setHoveredDate, isSelectedSpan, isHoveredSpan, isSelectedStart, isSelectedEnd, isHovered, isHoveredOffset, isDayUnselectable } } = useCalendarContext();
+    const handleClick = (event)=>{
+        setSelectedDate(event, date);
+    };
+    const handleKeyDown = (event)=>{
+        switch(event.key){
+            case "Space":
+            case "Enter":
+                setSelectedDate(event, date);
+                event.preventDefault();
+        }
+    };
+    const handleMouseOver = (event)=>{
+        setHoveredDate(event, date);
+    };
+    const handleMouseLeave = (event)=>{
+        setHoveredDate(event, null);
+    };
+    const selected = isSelected(date);
+    const selectedSpan = isSelectedSpan(date);
+    const hoveredSpan = isHoveredSpan(date);
+    const selectedStart = isSelectedStart(date);
+    const selectedEnd = isSelectedEnd(date);
+    const hovered = isHovered(date);
+    const hoveredOffset = isHoveredOffset(date);
+    return {
+        handleClick,
+        handleKeyDown,
+        handleMouseOver,
+        handleMouseLeave,
+        status: {
+            selected,
+            selectedSpan,
+            hoveredSpan,
+            selectedStart,
+            selectedEnd,
+            hovered,
+            hoveredOffset
+        },
+        dayProps: {
+            className: clsx({
+                [withBaseName("selected")]: selected,
+                [withBaseName("selectedSpan")]: selectedSpan,
+                [withBaseName("hoveredSpan")]: hoveredSpan,
+                [withBaseName("selectedStart")]: selectedStart,
+                [withBaseName("selectedEnd")]: selectedEnd,
+                [withBaseName("hovered")]: hovered,
+                [withBaseName("hoveredOffset")]: hoveredOffset
+            }),
+            "aria-pressed": selected || selectedEnd || selectedStart || selectedSpan ? "true" : void 0,
+            "aria-disabled": isDayUnselectable(date) ? "true" : void 0
+        }
+    };
+}
+export { isRangeOrOffsetSelectionValue, isRangeOrOffsetSelectionWithStartDate, useSelectionCalendar, useSelectionDay };

package/src/column-picker/ColumnPicker.css.js

@@ -0,0 +1,8 @@
+const css = `
+.vuuColumnPicker {
+  z-index: 100;
+}
+
+
+`;
+export default css;

package/src/column-picker/ColumnPicker.js

@@ -0,0 +1,108 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { flip, size, useClick, useDismiss, useInteractions } from "@floating-ui/react";
+import { useFloatingComponent, useFloatingUI, useForkRef, useIdMemo } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { forwardRef, useState } from "react";
+import { IconButton } from "../icon-button/index.js";
+import { ColumnSearch } from "./ColumnSearch.js";
+import ColumnPicker_0 from "./ColumnPicker.css";
+const classBase = "vuuColumnPicker";
+const ColumnPicker_FloatingColumnSearch = /*#__PURE__*/ forwardRef(function(props, ref) {
+    const { children, className, collapsed, open, ...rest } = props;
+    const { Component: FloatingComponent } = useFloatingComponent();
+    return /*#__PURE__*/ jsx(FloatingComponent, {
+        className: clsx(classBase, {
+            [`${classBase}-collapsed`]: collapsed
+        }, className),
+        role: "listbox",
+        open: open,
+        ...rest,
+        ref: ref,
+        children: children
+    });
+});
+const ColumnPicker_ColumnPicker = /*#__PURE__*/ forwardRef(function({ columns, icon = "add", iconSize, onSelectionChange, selected, ...htmlAttributes }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-column-picker",
+        css: ColumnPicker_0,
+        window: targetWindow
+    });
+    const [open, setOpen] = useState(false);
+    const listId = useIdMemo();
+    const { context, x, y, strategy, elements, floating, reference } = useFloatingUI({
+        open,
+        onOpenChange: setOpen,
+        placement: "bottom-start",
+        strategy: "fixed",
+        middleware: [
+            size({
+                apply ({ rects, elements, availableHeight }) {
+                    Object.assign(elements.floating.style, {
+                        minWidth: `${rects.reference.width}px`,
+                        maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`
+                    });
+                }
+            }),
+            flip({
+                fallbackStrategy: "initialPlacement"
+            })
+        ]
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        useDismiss(context),
+        useClick(context, {
+            keyboardHandlers: false,
+            toggle: false
+        })
+    ]);
+    const handleButtonClick = ()=>{
+        setOpen((isOpen)=>!isOpen);
+    };
+    const forkedRef = useForkRef(reference, forwardedRef);
+    const handleChange = ()=>{
+        console.log("handleChange");
+    };
+    const handleReorderColumns = ()=>{
+        console.log("handleMoveListItem");
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(IconButton, {
+                ...htmlAttributes,
+                ...getReferenceProps(),
+                icon: icon,
+                size: iconSize,
+                onClick: handleButtonClick,
+                ref: forkedRef,
+                variant: "secondary"
+            }),
+            /*#__PURE__*/ jsx(ColumnPicker_FloatingColumnSearch, {
+                ...getFloatingProps(),
+                open: open,
+                collapsed: !open,
+                id: listId,
+                left: x,
+                position: strategy,
+                ref: floating,
+                top: y,
+                width: elements.floating?.offsetWidth,
+                height: elements.floating?.offsetHeight,
+                children: /*#__PURE__*/ jsx(ColumnSearch, {
+                    columns: columns,
+                    onChange: handleChange,
+                    onReorderColumns: handleReorderColumns,
+                    onSelectionChange: onSelectionChange,
+                    selected: selected,
+                    style: {
+                        width: 220,
+                        height: 300
+                    }
+                })
+            })
+        ]
+    });
+});
+export { ColumnPicker_ColumnPicker as ColumnPicker };

package/src/column-picker/ColumnSearch.css.js

@@ -0,0 +1,61 @@
+const css = `
+.vuuColumnSearch {
+  --vuuList-borderWidth: 0;
+  --vuuColumnListItem-border: none;
+  --vuuMeasuredContainer-flex: 1 1 1px;
+  background: var(--salt-container-primary-background);
+  border: solid 1px var(--salt-container-primary-borderColor);
+  border-radius: 4px;
+  flex-direction: column;
+  height: 100%;
+  padding: 12px 4px 12px 12px;
+  display: flex;
+
+  & .vuuIcon, & .saltSwitch, & .vuuColumnList-header, & .vuuColumnList-colHeadings {
+    display: none;
+  }
+
+  & .vuuList-viewport {
+    padding-right: var(--salt-spacing-100);
+  }
+
+  & .vuuColumnListItem {
+    padding-left: var(--salt-spacing-100);
+  }
+
+  & ::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+
+  & ::-webkit-scrollbar-track {
+    background: none;
+    margin-top: 15px;
+    margin-bottom: 15px;
+  }
+
+  & ::-webkit-scrollbar-thumb {
+    background: #d9d9d9;
+    border-radius: 4px;
+  }
+}
+
+.vuuColumnSearch-inputField {
+  --vuu-icon-size: 16px;
+  flex: 0 0 40px;
+  margin-right: 8px;
+}
+
+.vuuColumnSearch-list {
+  --vuuMeasuredContainer-flex: 1 1 1px;
+  background-color: var(--salt-container-primary-background);
+  flex: auto;
+}
+
+.vuuColumnSearch .vuuTableCell {
+  padding: 0;
+}
+
+
+`;
+export default css;

package/src/column-picker/ColumnSearch.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox, Input, ListBox, Option } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { forwardRef, useCallback, useRef } from "react";
+import ColumnSearch_0 from "./ColumnSearch.css";
+import { queryClosest } from "@vuu-ui/vuu-utils";
+const classBase = "vuuColumnSearch";
+const searchIcon = /*#__PURE__*/ jsx("span", {
+    "data-icon": "search"
+});
+const ColumnSearch_ColumnSearch = /*#__PURE__*/ forwardRef(function({ autoFocus = false, className, columns, onChange, onSelectionChange, selected, ...htmlAttributes }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-column-picker",
+        css: ColumnSearch_0,
+        window: targetWindow
+    });
+    const selectedValues = useRef([]);
+    const searchCallbackRef = useCallback((el)=>{
+        setTimeout(()=>{
+            el?.querySelector("input")?.focus();
+        }, 100);
+    }, []);
+    const handleChange = useCallback((e)=>{
+        const input = e.target;
+        const { columnName } = queryClosest(input, "[data-column-name]", true).dataset;
+        if (columnName) {
+            if (input.checked) selectedValues.current = selectedValues.current.concat(columnName);
+            else selectedValues.current = selectedValues.current.filter((val)=>val !== columnName);
+            onSelectionChange?.(e, selectedValues.current);
+        }
+    }, [
+        onSelectionChange
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        ref: forwardedRef,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-inputField`,
+                children: /*#__PURE__*/ jsx(Input, {
+                    startAdornment: searchIcon,
+                    ref: autoFocus ? searchCallbackRef : null
+                })
+            }),
+            /*#__PURE__*/ jsx(ListBox, {
+                children: columns.map((column)=>/*#__PURE__*/ jsxs(Option, {
+                        "data-column-name": column,
+                        value: column,
+                        children: [
+                            /*#__PURE__*/ jsx(Checkbox, {
+                                onChange: handleChange
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                children: column
+                            })
+                        ]
+                    }, column))
+            })
+        ]
+    });
+});
+export { ColumnSearch_ColumnSearch as ColumnSearch };

package/src/column-picker/index.js

@@ -0,0 +1,2 @@
+export * from "./ColumnPicker.js";
+export * from "./ColumnSearch.js";

package/src/column-picker/moving-window.js

@@ -0,0 +1,49 @@
+import { WindowRange, metadataKeys } from "@vuu-ui/vuu-utils";
+const { SELECTED: SELECTED } = metadataKeys;
+class MovingWindow {
+    data;
+    rowCount = 0;
+    range;
+    constructor({ from, to }){
+        this.range = new WindowRange(from, to);
+        this.data = new Array(to - from);
+        this.rowCount = 0;
+    }
+    setRowCount = (rowCount)=>{
+        if (rowCount < this.data.length) this.data.length = rowCount;
+        this.rowCount = rowCount;
+    };
+    add(data) {
+        const [index] = data;
+        if (this.isWithinRange(index)) {
+            const internalIndex = index - this.range.from;
+            this.data[internalIndex] = data;
+        }
+    }
+    getAtIndex(index) {
+        return this.range.isWithin(index) && null != this.data[index - this.range.from] ? this.data[index - this.range.from] : void 0;
+    }
+    isWithinRange(index) {
+        return this.range.isWithin(index);
+    }
+    setRange({ from, to }) {
+        if (from !== this.range.from || to !== this.range.to) {
+            const [overlapFrom, overlapTo] = this.range.overlap(from, to);
+            const newData = new Array(Math.max(0, to - from));
+            for(let i = overlapFrom; i < overlapTo; i++){
+                const data = this.getAtIndex(i);
+                if (data) {
+                    const index = i - from;
+                    newData[index] = data;
+                }
+            }
+            this.data = newData;
+            this.range.from = from;
+            this.range.to = to;
+        }
+    }
+    getSelectedRows() {
+        return this.data.filter((row)=>0 !== row[SELECTED]);
+    }
+}
+export { MovingWindow };

package/src/common-hooks/index.js

@@ -0,0 +1,3 @@
+export * from "./useControlled.js";
+export * from "./use-resize-observer.js";
+export * from "./selectionTypes.js";

package/src/common-hooks/selectionTypes.js

@@ -0,0 +1,8 @@
+const isSingleSelection = (s)=>void 0 === s || "default" === s || "deselectable" === s;
+const isMultiSelection = (s)=>"multiple" === s || s?.startsWith("extended") === true;
+const selectionIsDisallowed = (selection)=>"none" === selection;
+const allowMultipleSelection = (selectionStrategy, specialKey = false)=>"multiple" === selectionStrategy || "multiple-special-key" === selectionStrategy && specialKey;
+const deselectionIsAllowed = (selection)=>"none" !== selection && "default" !== selection;
+const hasSelection = (selected)=>void 0 !== selected && selected.length > 0;
+const getFirstSelectedItem = (selected)=>selected[0];
+export { allowMultipleSelection, deselectionIsAllowed, getFirstSelectedItem, hasSelection, isMultiSelection, isSingleSelection, selectionIsDisallowed };

package/src/common-hooks/use-resize-observer.js

@@ -0,0 +1,122 @@
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
+const WidthHeight = [
+    "height",
+    "width"
+];
+const WidthOnly = [
+    "width"
+];
+const HeightOnly = [
+    "height"
+];
+const observedMap = new Map();
+const getTargetSize = (element, size, dimension)=>{
+    switch(dimension){
+        case "height":
+            return size.height;
+        case "clientHeight":
+            return element.clientHeight;
+        case "clientWidth":
+            return element.clientWidth;
+        case "contentHeight":
+            return size.contentHeight;
+        case "contentWidth":
+            return size.contentWidth;
+        case "scrollHeight":
+            return Math.ceil(element.scrollHeight);
+        case "scrollWidth":
+            return Math.ceil(element.scrollWidth);
+        case "width":
+            return size.width;
+        default:
+            return 0;
+    }
+};
+const resizeObserver = new ResizeObserver((entries)=>{
+    for (const entry of entries){
+        const { target, borderBoxSize, contentBoxSize } = entry;
+        const observedTarget = observedMap.get(target);
+        if (observedTarget) {
+            const [{ blockSize: height, inlineSize: width }] = borderBoxSize;
+            const [{ blockSize: contentHeight, inlineSize: contentWidth }] = contentBoxSize;
+            const { onResize, measurements } = observedTarget;
+            let sizeChanged = false;
+            for (const [dimension, size] of Object.entries(measurements)){
+                const newSize = getTargetSize(target, {
+                    height,
+                    width,
+                    contentHeight,
+                    contentWidth
+                }, dimension);
+                if (newSize !== size) {
+                    sizeChanged = true;
+                    measurements[dimension] = newSize;
+                }
+            }
+            if (sizeChanged) onResize && onResize(measurements);
+        }
+    }
+});
+function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false) {
+    const dimensionsRef = useRef(dimensions);
+    const target = ref.current;
+    const measure = useCallback((target)=>{
+        const { width, height } = target.getBoundingClientRect();
+        const { clientWidth: contentWidth, clientHeight: contentHeight } = target;
+        return dimensionsRef.current.reduce((map, dim)=>{
+            map[dim] = getTargetSize(target, {
+                width,
+                height,
+                contentHeight,
+                contentWidth
+            }, dim);
+            return map;
+        }, {});
+    }, []);
+    useLayoutEffect(()=>{
+        async function registerObserver() {
+            observedMap.set(target, {
+                measurements: {}
+            });
+            await document.fonts.ready;
+            const observedTarget = observedMap.get(target);
+            if (observedTarget) {
+                const measurements = measure(target);
+                observedTarget.measurements = measurements;
+                resizeObserver.observe(target);
+                if (reportInitialSize) onResize(measurements);
+            } else console.log("%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation", "font-weight:bold; color:red;");
+        }
+        if (target) {
+            observedMap.has(target);
+            registerObserver();
+        }
+        return ()=>{
+            if (target && observedMap.has(target)) {
+                resizeObserver.unobserve(target);
+                observedMap.delete(target);
+            }
+        };
+    }, [
+        measure,
+        target
+    ]);
+    useEffect(()=>{
+        const target = ref.current;
+        const record = observedMap.get(target);
+        if (record) {
+            if (dimensionsRef.current !== dimensions) {
+                dimensionsRef.current = dimensions;
+                const measurements = measure(target);
+                record.measurements = measurements;
+            }
+            record.onResize = onResize;
+        }
+    }, [
+        dimensions,
+        measure,
+        ref,
+        onResize
+    ]);
+}
+export { HeightOnly, WidthHeight, WidthOnly, useResizeObserver };

package/src/common-hooks/useControlled.js

@@ -0,0 +1,45 @@
+import { isValidElement, useCallback, useEffect, useRef, useState } from "react";
+function useControlled({ controlled, default: defaultProp, name, state = "value" }) {
+    const { current: isControlled } = useRef(void 0 !== controlled);
+    const [valueState, setValue] = useState(defaultProp);
+    const value = void 0 !== controlled ? controlled : valueState;
+    const { current: defaultValue } = useRef(defaultProp);
+    useEffect(()=>{
+        if ("production" !== process.env.NODE_ENV) {
+            if (isControlled !== (void 0 !== controlled)) console.error([
+                `Salt: A component is changing the ${isControlled ? "" : "un"}controlled ${state} state of ${name} to be ${isControlled ? "un" : ""}controlled.`,
+                "Elements should not switch from uncontrolled to controlled (or vice versa).",
+                `Decide between using a controlled or uncontrolled ${name} element for the lifetime of the component.`,
+                "The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.",
+                "More info: https://fb.me/react-controlled-components"
+            ].join("\n"));
+        }
+    }, [
+        state,
+        name,
+        controlled
+    ]);
+    useEffect(()=>{
+        if ("production" !== process.env.NODE_ENV) {
+            if (!isControlled && defaultValue !== defaultProp) console.error([
+                `Salt: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. To suppress this warning opt to use a controlled ${name}.`
+            ].join("\n"));
+        }
+    }, [
+        JSON.stringify(defaultProp, ignoreReactElements)
+    ]);
+    const setValueIfUncontrolled = useCallback((newValue)=>{
+        if (!isControlled) setValue(newValue);
+    }, [
+        isControlled
+    ]);
+    return [
+        value,
+        setValueIfUncontrolled,
+        isControlled
+    ];
+}
+function ignoreReactElements(key, value) {
+    return isValidElement(value) ? null : value;
+}
+export { useControlled };