@wordpress/components 39.0.0 → 40.1.0

package/build/input-control/input-field.cjs

@@ -164,6 +164,7 @@ function InputField({
     ...props,
     ...dragProps,
     className: "components-input-control__input",
+    "data-empty-value": value ? void 0 : "",
     disabled,
     dragCursor,
     isDragging,

package/build/input-control/input-field.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/input-control/input-field.tsx"],
-  "sourcesContent": ["import { useDrag } from '@use-gesture/react';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { withIgnoreIMEEvents } from '@wordpress/keycodes';\nimport { useDragCursor } from './utils';\nimport { Input } from './styles/input-control-styles';\nimport { useInputControlStateReducer } from './reducer/reducer';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction InputField({\n  disabled = false,\n  dragDirection = 'n',\n  dragThreshold = 10,\n  id,\n  isDragEnabled = false,\n  isPressEnterToChange = false,\n  onBlur = noop,\n  onChange = noop,\n  onDrag = noop,\n  onDragEnd = noop,\n  onDragStart = noop,\n  onKeyDown = noop,\n  onValidate = noop,\n  size = 'default',\n  stateReducer = state => state,\n  value: valueProp,\n  type,\n  ...props\n}, ref) {\n  const {\n    // State.\n    state,\n    // Actions.\n    change,\n    commit,\n    drag,\n    dragEnd,\n    dragStart,\n    invalidate,\n    pressDown,\n    pressEnter,\n    pressUp,\n    reset\n  } = useInputControlStateReducer(stateReducer, {\n    isDragEnabled,\n    value: valueProp,\n    isPressEnterToChange\n  }, onChange);\n  const {\n    value,\n    isDragging,\n    isDirty\n  } = state;\n  const wasDirtyOnBlur = useRef(false);\n  const dragCursor = useDragCursor(isDragging, dragDirection);\n  const handleOnBlur = event => {\n    onBlur(event);\n\n    /**\n     * If isPressEnterToChange is set, this commits the value to\n     * the onChange callback.\n     */\n    if (isDirty || !event.target.validity.valid) {\n      wasDirtyOnBlur.current = true;\n      handleOnCommit(event);\n    }\n  };\n  const handleOnChange = event => {\n    const nextValue = event.target.value;\n    change(nextValue, event);\n  };\n  const handleOnCommit = event => {\n    const nextValue = event.currentTarget.value;\n    try {\n      onValidate(nextValue);\n      commit(nextValue, event);\n    } catch (err) {\n      invalidate(err, event);\n    }\n  };\n  const handleOnKeyDown = event => {\n    const {\n      key\n    } = event;\n    onKeyDown(event);\n    switch (key) {\n      case 'ArrowUp':\n        pressUp(event);\n        break;\n      case 'ArrowDown':\n        pressDown(event);\n        break;\n      case 'Enter':\n        pressEnter(event);\n        if (isPressEnterToChange) {\n          event.preventDefault();\n          handleOnCommit(event);\n        }\n        break;\n      case 'Escape':\n        if (isPressEnterToChange && isDirty) {\n          event.preventDefault();\n          reset(valueProp, event);\n        }\n        break;\n    }\n  };\n  const dragGestureProps = useDrag(dragProps => {\n    const {\n      distance,\n      dragging,\n      event,\n      target\n    } = dragProps;\n\n    // The `target` prop always references the `input` element while, by\n    // default, the `dragProps.event.target` property would reference the real\n    // event target (i.e. any DOM element that the pointer is hovering while\n    // dragging). Ensuring that the `target` is always the `input` element\n    // allows consumers of `InputControl` (or any higher-level control) to\n    // check the input's validity by accessing `event.target.validity.valid`.\n    dragProps.event = {\n      ...dragProps.event,\n      target\n    };\n    if (!distance) {\n      return;\n    }\n    event.stopPropagation();\n\n    /**\n     * Quick return if no longer dragging.\n     * This prevents unnecessary value calculations.\n     */\n    if (!dragging) {\n      onDragEnd(dragProps);\n      dragEnd(dragProps);\n      return;\n    }\n    onDrag(dragProps);\n    drag(dragProps);\n    if (!isDragging) {\n      onDragStart(dragProps);\n      dragStart(dragProps);\n    }\n  }, {\n    axis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y',\n    threshold: dragThreshold,\n    enabled: isDragEnabled,\n    pointer: {\n      capture: false\n    }\n  });\n  const dragProps = isDragEnabled ? dragGestureProps() : {};\n  return /*#__PURE__*/_jsx(Input, {\n    ...props,\n    ...dragProps,\n    className: \"components-input-control__input\",\n    disabled: disabled,\n    dragCursor: dragCursor,\n    isDragging: isDragging,\n    id: id,\n    onBlur: handleOnBlur,\n    onChange: handleOnChange,\n    onKeyDown: withIgnoreIMEEvents(handleOnKeyDown),\n    ref: ref,\n    inputSize: size\n    // Fallback to `''` to avoid \"uncontrolled to controlled\" warning.\n    // See https://github.com/WordPress/gutenberg/pull/47250 for details.\n    ,\n    value: value ?? '',\n    type: type\n  });\n}\nconst ForwardedComponent = forwardRef(InputField);\nexport default ForwardedComponent;"],
-  "mappings": "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",
+  "sourcesContent": ["import { useDrag } from '@use-gesture/react';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { withIgnoreIMEEvents } from '@wordpress/keycodes';\nimport { useDragCursor } from './utils';\nimport { Input } from './styles/input-control-styles';\nimport { useInputControlStateReducer } from './reducer/reducer';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction InputField({\n  disabled = false,\n  dragDirection = 'n',\n  dragThreshold = 10,\n  id,\n  isDragEnabled = false,\n  isPressEnterToChange = false,\n  onBlur = noop,\n  onChange = noop,\n  onDrag = noop,\n  onDragEnd = noop,\n  onDragStart = noop,\n  onKeyDown = noop,\n  onValidate = noop,\n  size = 'default',\n  stateReducer = state => state,\n  value: valueProp,\n  type,\n  ...props\n}, ref) {\n  const {\n    // State.\n    state,\n    // Actions.\n    change,\n    commit,\n    drag,\n    dragEnd,\n    dragStart,\n    invalidate,\n    pressDown,\n    pressEnter,\n    pressUp,\n    reset\n  } = useInputControlStateReducer(stateReducer, {\n    isDragEnabled,\n    value: valueProp,\n    isPressEnterToChange\n  }, onChange);\n  const {\n    value,\n    isDragging,\n    isDirty\n  } = state;\n  const wasDirtyOnBlur = useRef(false);\n  const dragCursor = useDragCursor(isDragging, dragDirection);\n  const handleOnBlur = event => {\n    onBlur(event);\n\n    /**\n     * If isPressEnterToChange is set, this commits the value to\n     * the onChange callback.\n     */\n    if (isDirty || !event.target.validity.valid) {\n      wasDirtyOnBlur.current = true;\n      handleOnCommit(event);\n    }\n  };\n  const handleOnChange = event => {\n    const nextValue = event.target.value;\n    change(nextValue, event);\n  };\n  const handleOnCommit = event => {\n    const nextValue = event.currentTarget.value;\n    try {\n      onValidate(nextValue);\n      commit(nextValue, event);\n    } catch (err) {\n      invalidate(err, event);\n    }\n  };\n  const handleOnKeyDown = event => {\n    const {\n      key\n    } = event;\n    onKeyDown(event);\n    switch (key) {\n      case 'ArrowUp':\n        pressUp(event);\n        break;\n      case 'ArrowDown':\n        pressDown(event);\n        break;\n      case 'Enter':\n        pressEnter(event);\n        if (isPressEnterToChange) {\n          event.preventDefault();\n          handleOnCommit(event);\n        }\n        break;\n      case 'Escape':\n        if (isPressEnterToChange && isDirty) {\n          event.preventDefault();\n          reset(valueProp, event);\n        }\n        break;\n    }\n  };\n  const dragGestureProps = useDrag(dragProps => {\n    const {\n      distance,\n      dragging,\n      event,\n      target\n    } = dragProps;\n\n    // The `target` prop always references the `input` element while, by\n    // default, the `dragProps.event.target` property would reference the real\n    // event target (i.e. any DOM element that the pointer is hovering while\n    // dragging). Ensuring that the `target` is always the `input` element\n    // allows consumers of `InputControl` (or any higher-level control) to\n    // check the input's validity by accessing `event.target.validity.valid`.\n    dragProps.event = {\n      ...dragProps.event,\n      target\n    };\n    if (!distance) {\n      return;\n    }\n    event.stopPropagation();\n\n    /**\n     * Quick return if no longer dragging.\n     * This prevents unnecessary value calculations.\n     */\n    if (!dragging) {\n      onDragEnd(dragProps);\n      dragEnd(dragProps);\n      return;\n    }\n    onDrag(dragProps);\n    drag(dragProps);\n    if (!isDragging) {\n      onDragStart(dragProps);\n      dragStart(dragProps);\n    }\n  }, {\n    axis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y',\n    threshold: dragThreshold,\n    enabled: isDragEnabled,\n    pointer: {\n      capture: false\n    }\n  });\n  const dragProps = isDragEnabled ? dragGestureProps() : {};\n  return /*#__PURE__*/_jsx(Input, {\n    ...props,\n    ...dragProps,\n    className: \"components-input-control__input\",\n    \"data-empty-value\": value ? undefined : '',\n    disabled: disabled,\n    dragCursor: dragCursor,\n    isDragging: isDragging,\n    id: id,\n    onBlur: handleOnBlur,\n    onChange: handleOnChange,\n    onKeyDown: withIgnoreIMEEvents(handleOnKeyDown),\n    ref: ref,\n    inputSize: size\n    // Fallback to `''` to avoid \"uncontrolled to controlled\" warning.\n    // See https://github.com/WordPress/gutenberg/pull/47250 for details.\n    ,\n    value: value ?? '',\n    type: type\n  });\n}\nconst ForwardedComponent = forwardRef(InputField);\nexport default ForwardedComponent;"],
+  "mappings": "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",
   "names": ["dragProps", "_jsx"]
 }