@choice-ui/react 2.0.0 → 2.0.2

package/dist/components/numeric-input/src/hooks/use-input-interactions.js

@@ -1,7 +1,7 @@
 import { useRef } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { dealWithNumericInputValue } from "../utils/numeric-value-processor.js";
-import { isExpressionInput, compareNumberResults } from "../utils/value-comparator.js";
+import { compareNumberResults } from "../utils/value-comparator.js";
 function useInputInteractions({
   inputRef,
   displayValue,
@@ -12,6 +12,7 @@ function useInputInteractions({
   min,
   max,
   decimal,
+  defaultValue,
   disabled,
   readOnly,
   innerValue,
@@ -19,11 +20,14 @@ function useInputInteractions({
   updateValue,
   getCurrentStep,
   onChange,
+  onRawInputEditingChange,
   onEmpty,
   value
 }) {
   const initialValueRef = useRef("");
+  const outputShapeSource = value ?? defaultValue;
   const handleInputChange = useEventCallback((e) => {
+    onRawInputEditingChange == null ? void 0 : onRawInputEditingChange(true);
     setDisplayValue(e.target.value);
   });
   const handleInputFocus = useEventCallback((e) => {
@@ -32,6 +36,7 @@ function useInputInteractions({
     e.target.select();
   });
   const handleInputBlur = useEventCallback(() => {
+    onRawInputEditingChange == null ? void 0 : onRawInputEditingChange(false);
     setIsFocused(false);
     if (disabled || readOnly) return;
     try {
@@ -42,7 +47,6 @@ function useInputInteractions({
         min,
         decimal
       });
-      const isExpressionInputValue = isExpressionInput(displayValue, valuePre);
       const isSameValue = compareNumberResults(innerValue, valuePre);
       if (isSameValue) {
         setDisplayValue(valuePre.string);
@@ -51,7 +55,7 @@ function useInputInteractions({
       }
       setValue(valuePre);
       onChange == null ? void 0 : onChange(
-        typeof value === "string" ? valuePre.string : typeof value === "number" ? valuePre.array[0] : Array.isArray(value) ? valuePre.array : valuePre.object,
+        typeof outputShapeSource === "string" ? valuePre.string : typeof outputShapeSource === "number" ? valuePre.array[0] : Array.isArray(outputShapeSource) ? valuePre.array : valuePre.object,
         valuePre
       );
       setDisplayValue(valuePre.string);

package/dist/components/numeric-input/src/hooks/use-numeric-input.js

@@ -30,6 +30,7 @@ function useNumericInput(props) {
   const dragHasChangedRef = useRef(false);
   const dragEndValueRef = useRef(void 0);
   const dragEndDetailRef = useRef(void 0);
+  const hasPendingRawInputRef = useRef(false);
   const [isFocused, setIsFocused] = useState(false);
   const [displayValue, setDisplayValue] = useState("");
   const { shiftPressed, metaPressed } = useModifierKeys(disabled);
@@ -47,13 +48,16 @@ function useNumericInput(props) {
     defaultValue: defaultValuePre,
     allowEmpty: true
   });
+  const outputShapeSource = value ?? defaultValue;
   const mapResultToOutputValue = useCallback(
-    (result) => typeof value === "string" ? result.string : typeof value === "number" ? result.array[0] : Array.isArray(value) ? result.array : result.object,
-    [value]
+    (result) => typeof outputShapeSource === "string" ? result.string : typeof outputShapeSource === "number" ? result.array[0] : Array.isArray(outputShapeSource) ? result.array : result.object,
+    [outputShapeSource]
   );
   useEffect(() => {
     if (!innerValue) {
-      setDisplayValue("");
+      if (!hasPendingRawInputRef.current) {
+        setDisplayValue("");
+      }
       return;
     }
     const valuePre2 = dealWithNumericInputValue({
@@ -66,11 +70,14 @@ function useNumericInput(props) {
     if (JSON.stringify(valuePre2.object) !== JSON.stringify(innerValue.object)) {
       setValue(valuePre2);
     }
-    setDisplayValue(valuePre2.string);
+    if (!hasPendingRawInputRef.current) {
+      setDisplayValue(valuePre2.string);
+    }
   }, [innerValue, expression, max, min, decimal, setValue]);
   const updateValue = useCallback(
     (updateFn, options) => {
       if (disabled || readOnly) return;
+      hasPendingRawInputRef.current = false;
       setValue((prev) => {
         if (!prev) {
           const initialValue = dealWithNumericInputValue({
@@ -134,6 +141,7 @@ function useNumericInput(props) {
     min,
     max,
     decimal,
+    defaultValue,
     disabled,
     readOnly,
     innerValue,
@@ -141,6 +149,9 @@ function useNumericInput(props) {
     updateValue,
     getCurrentStep,
     onChange,
+    onRawInputEditingChange: (editing) => {
+      hasPendingRawInputRef.current = editing;
+    },
     onEmpty,
     value
   });

package/dist/components/numeric-input/src/numeric-input.js

@@ -67,6 +67,7 @@ const NumericInputBase = forwardRef((props, ref) => {
   });
   const { disableScrollProps } = useDisableScroll({ ref: inputRef });
   const [isFocused, setIsFocused] = useState(false);
+  const mergedFocused = focused || isFocused;
   const handleFocus = useEventCallback((e) => {
     var _a;
     onIsEditingChange == null ? void 0 : onIsEditingChange(true);
@@ -89,7 +90,7 @@ const NumericInputBase = forwardRef((props, ref) => {
       disabled,
       readOnly,
       selected,
-      focused,
+      focused: mergedFocused,
       handlerPressed,
       // Configuration
       min,
@@ -116,7 +117,7 @@ const NumericInputBase = forwardRef((props, ref) => {
       disabled,
       readOnly,
       selected,
-      focused,
+      mergedFocused,
       handlerPressed,
       min,
       max,
@@ -169,7 +170,7 @@ const NumericInputBase = forwardRef((props, ref) => {
     variant,
     size,
     selected: selected || handlerPressed,
-    focused,
+    focused: mergedFocused,
     disabled,
     prefixElement: !!prefixNode,
     suffixElement: !!suffixNode,
@@ -212,7 +213,7 @@ const NumericInputBase = forwardRef((props, ref) => {
         variableNode && cloneElement(variableNode, { hasPrefixElement: !!prefixNode }),
         actionPromptNode && cloneElement(actionPromptNode),
         suffixNode && cloneElement(suffixNode, { position: "suffix" }),
-        tooltip && !isFocused && /* @__PURE__ */ jsx(Tooltip, { ...tooltip, children: /* @__PURE__ */ jsx(
+        tooltip && !mergedFocused && /* @__PURE__ */ jsx(Tooltip, { ...tooltip, children: /* @__PURE__ */ jsx(
           "span",
           {
             tabIndex: -1,

package/dist/components/numeric-input/src/utils/value-comparator.js

@@ -21,12 +21,8 @@ function compareNumberResults(result1, result2) {
   const isSameObject = compareNumericObjects(result1.object, result2.object);
   return isSameArray || isSameObject;
 }
-function isExpressionInput(displayValue, processedValue) {
-  return displayValue !== processedValue.string;
-}
 export {
   compareNumberResults,
   compareNumericArrays,
-  compareNumericObjects,
-  isExpressionInput
+  compareNumericObjects
 };

package/dist/components/panel/dist/index.d.ts

@@ -11,20 +11,20 @@ interface PanelRowProps extends Omit<HTMLProps<HTMLFieldSetElement>, "title"> {
      * @default "single"
      * @description
      * - `single`: `columns`: 1fr | `areas`: "label" "input" | `rows`: auto minmax(2rem, auto)
-     * - `two-columns`: `columns`: 1fr 1fr | `areas`: "label label" "left right" | `rows`: auto minmax(2rem, auto)
+     * - `two-columns`: `columns`: 1fr 1fr | `areas`: "label-1 label-2" "input-1 input-2" | `rows`: auto minmax(2rem, auto)
      * - `one-label-one-input`: `columns`: 8fr 20fr | `areas`: "label input" | `rows`: 2rem
-     * - `one-label-one-input-one-icon`: `columns`: 8fr 20fr 2rem | `areas`: "label input icon" | `rows`: 2rem
-     * - `one-label-two-input`: `columns`: 8fr 1fr 1fr | `areas`: "label left right" | `rows`: 2rem
-     * - `one-icon-one-input`: `columns`: 2rem 1fr | `areas`: "icon input" | `rows`: 2rem
-     * - `one-input-one-icon`: `columns`: 1fr 2rem | `areas`: "input icon" | `rows`: 2rem
-     * - `one-input-two-icon`: `columns`: 1fr 1fr 2rem | `areas`: "input left icon" "input right icon" | `rows`: 2rem
-     * - `two-input-two-icon`: `columns`: 1fr 1fr 2rem | `areas`: "left icon right icon" | `rows`: 2rem
-     * - `two-input-one-icon`: `columns`: 2rem 1fr 1fr | `areas`: "icon left right" | `rows`: 2rem
-     * - `one-icon-one-input-two-icon`: `columns`: 2rem 1fr 2rem | `areas`: "icon input icon" | `rows`: 2rem
-     * - `two-input-one-icon-double-row`: `columns`: 1fr 1fr 2rem | `areas`: "left icon right icon" | `rows`: 2rem 2rem
-     * - `one-icon-one-input-two-icon-double-row`: `columns`: 2rem 1fr 2rem | `areas`: "icon input icon" | `rows`: 2rem 2rem
+     * - `one-label-one-input-one-icon`: `columns`: 8fr 20fr 1.5rem | `areas`: "label input icon" | `rows`: 2rem
+     * - `one-label-two-input`: `columns`: 8fr 10fr 10fr | `areas`: "label input-1 input-2" | `rows`: 2rem
+     * - `one-icon-one-input`: `columns`: 1.5rem 1fr | `areas`: ". label" "icon input" | `rows`: auto minmax(2rem, auto)
+     * - `one-input-one-icon`: `columns`: 1fr 1.5rem | `areas`: "label label" "input icon" | `rows`: auto minmax(2rem, auto)
+     * - `one-input-two-icon`: `columns`: 1fr 0.5rem 1.5rem 0.25rem 1.5rem | `areas`: "label . . . ." "input . icon-1 . icon-2" | `rows`: auto minmax(2rem, auto)
+     * - `two-input-two-icon`: `columns`: minmax(76px, 1fr) 0.5rem 1fr 0.5rem 1.5rem 0.25rem 1.5rem | `areas`: "label-1 label-1 label-2 label-2 . . ." "input-1 . input-2 . icon-1 . icon-2" | `rows`: auto minmax(2rem, auto)
+     * - `two-input-one-icon`: `columns`: 1fr 1fr 1.5rem | `areas`: "label-1 label-2 label-2" "input-1 input-2 icon" | `rows`: auto minmax(2rem, auto)
+     * - `one-icon-one-input-one-icon`: `columns`: 1.5rem 0.5rem 1fr 0.5rem 1.5rem | `areas`: "label label label label label" "icon-1 . input . icon-2" | `rows`: auto minmax(2rem, auto)
+     * - `one-icon-one-input-two-icon`: `columns`: 1.5rem 0.5rem 1fr 0.5rem 1.5rem 0.25rem 1.5rem | `areas`: "label label label label label label label" "icon-1 . input . icon-2 . icon-3" | `rows`: auto minmax(2rem, auto)
+     * - `two-input-one-icon-double-row`: `columns`: 1fr 1fr 1.5rem | `areas`: "label-1 label-2 ." "input-1 input-3 icon-1" "input-2 input-3 icon-2" | `rows`: auto 2rem 2rem
      */
-    type?: "single" | "two-columns" | "one-label-one-input" | "one-label-one-input-one-icon" | "one-label-two-input" | "one-icon-one-input" | "one-input-one-icon" | "one-input-two-icon" | "two-input-two-icon" | "two-input-one-icon" | "one-icon-one-input-two-icon" | "two-input-one-icon-double-row";
+    type?: "single" | "two-columns" | "one-label-one-input" | "one-label-one-input-one-icon" | "one-label-two-input" | "one-icon-one-input" | "one-input-one-icon" | "one-input-two-icon" | "two-input-two-icon" | "two-input-one-icon" | "one-icon-one-input-one-icon" | "one-icon-one-input-two-icon" | "two-input-one-icon-double-row";
 }
 declare const PanelRow: react.ForwardRefExoticComponent<Omit<PanelRowProps, "ref"> & react.RefAttributes<HTMLFieldSetElement>>;
 
@@ -83,8 +83,8 @@ declare const SortablePaneContext: react__default.Context<SortablePaneContextVal
 declare const useSortablePane: () => SortablePaneContextValue;
 
 interface PanelSortableProps<T extends SortableItem> {
-    children: react__default.ReactNode;
     className?: string;
+    children: react__default.ReactNode;
     data: T[];
     onDrop: (position: "top" | "bottom" | null, id: string, newIndex: number) => void;
     onSelectedIdChange: (id: string | null) => void;
@@ -129,12 +129,12 @@ interface PanelProps extends Omit<HTMLProps<HTMLDivElement>, "title"> {
     showLabels?: boolean;
     triggerRef?: React.RefObject<HTMLDivElement>;
 }
-declare const PanelContent: ({ children, collapsible, title, otherChildren, }: {
+declare const PanelContent: react.NamedExoticComponent<{
     children: React.ReactNode;
     collapsible?: boolean;
     otherChildren: React.ReactNode[];
     title: React.ReactNode;
-}) => react_jsx_runtime.JSX.Element;
+}>;
 interface PanelComponentProps extends React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<HTMLDivElement>> {
     Content: typeof PanelContent;
     Label: typeof PanelLabel;
@@ -149,4 +149,4 @@ interface PanelComponentProps extends React.ForwardRefExoticComponent<PanelProps
 declare const PanelBase: react.ForwardRefExoticComponent<Omit<PanelProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
 declare const Panel: PanelComponentProps;
 
-export { Panel, PanelBase, PanelContext, PanelLabel, PanelPreviewer, PanelRow, PanelRowLabel, PanelRowManyIcon, type PanelRowManyIconItem, type PanelRowManyIconProps, type PanelRowProps, PanelSortable, PanelSortableRow, PanelTitle, type SortableItem, SortablePaneContext, type SortablePaneContextValue, SortableRowDataContext, type SortableRowDataContextValue, usePanelContext, useSortablePane, useSortableRowItem };
+export { Panel, PanelBase, PanelContext, type PanelContextType, PanelLabel, PanelPreviewer, PanelRow, PanelRowLabel, PanelRowManyIcon, type PanelRowManyIconItem, type PanelRowManyIconProps, type PanelRowProps, PanelSortable, PanelSortableRow, PanelTitle, type SortableItem, SortablePaneContext, type SortablePaneContextValue, SortableRowDataContext, type SortableRowDataContextValue, usePanelContext, useSortablePane, useSortableRowItem };

package/dist/components/picture-preview/dist/index.d.ts

@@ -14,6 +14,11 @@ interface PicturePreviewProps extends HTMLProps<HTMLDivElement> {
     fileName?: string;
     onClose?: () => void;
     src: string;
+    control?: {
+        enable?: boolean;
+        position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+        show?: "always" | "hover";
+    };
 }
 declare const PicturePreview: react.ForwardRefExoticComponent<Omit<PicturePreviewProps, "ref"> & react.RefAttributes<HTMLDivElement>>;